@firecms/ui 3.0.0-rc.4 → 3.0.0-tw4.2

package/dist/index.umd.js

@@ -36,17 +36,17 @@
   const ReactDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactDOM);
   const TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
   const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
-  const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60";
-  const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
-  const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 dark:bg-surface-800 dark:bg-opacity-60";
-  const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0";
-  const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90";
-  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";
-  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";
+  const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-800/60";
+  const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-75 ring-primary/75 ring-offset-2 ring-offset-transparent ";
+  const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-800 dark:bg-opacity-60 dark:bg-surface-800/60";
+  const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0 bg-surface-accent-200/0 dark:bg-surface-800/0";
+  const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-800/90";
+  const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";
+  const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40 border-surface-200/40 dark:border-surface-700/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 border-surface-200/40 dark:border-surface-700/40";
+  const cardMixin = "bg-white dark:bg-surface-950 rounded-md border border-surface-200/40 dark:border-surface-700/40 m-1 -p-1";
+  const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer hover:bg-primary/20 dark:hover:bg-primary/10 ";
+  const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 bg-primary-bg/30 dark:bg-opacity-10 dark:bg-primary-bg/10 ring-1 ring-primary ring-opacity-75 ring-primary/75 bg-primary/10 dark:bg-primary/10 ring-1 ring-primary/75";
   function cls(...classes) {
     return tailwindMerge.twMerge(clsx.clsx(classes));
   }
@@ -752,7 +752,7 @@
       } else {
         onValueChange?.(!value);
       }
-    }, 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: [
+    }, 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 outline-hidden rounded-full relative shadow-sm", value ? disabled ? "bg-white bg-opacity-54 bg-white/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 bg-white/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",
@@ -901,12 +901,12 @@
           "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 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-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/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 hover:bg-surface-accent-200/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 hover:bg-red-500/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-primary text-primary hover:text-primary hover:bg-primary-bg hover:bg-primary/10": 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,
@@ -914,7 +914,7 @@
           "text-text-disabled dark:text-text-disabled-dark": disabled,
           "border border-transparent opacity-50": t23,
           "border border-surface-500 opacity-50": t24,
-          "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40": t25
+          "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40 bg-surface-300/40 dark:bg-surface-500/40": t25
         });
         const sizeClasses2 = cls({
           "py-1 px-2": size === "small",
@@ -27275,7 +27275,7 @@
     const t6 = disabled ? void 0 : onCheckedChange;
     const t7 = padding ? paddingClasses[size] : "";
     const t8 = outerSizeClasses[size];
-    const t9 = onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75" : "";
+    const t9 = onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-700/75" : "";
     const t10 = onCheckedChange ? "cursor-pointer" : "cursor-default";
     let t11;
     if ($[0] !== t10 || $[1] !== t7 || $[2] !== t8 || $[3] !== t9) {
@@ -27421,7 +27421,7 @@
     }
     return t11;
   }
-  const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 hover:scale-105 transition-transform";
+  const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-105 transition-transform";
   const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
   const colorClasses$1 = "text-surface-accent-600 visited:text-surface-accent-600 dark:text-surface-accent-300 dark:visited:text-surface-300";
   const sizeClasses = {
@@ -27481,7 +27481,7 @@
     const size = t1 === void 0 ? "medium" : t1;
     const variant = t2 === void 0 ? "ghost" : t2;
     const shape = t3 === void 0 ? "circular" : t3;
-    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 dark:bg-surface-950 dark:bg-opacity-50";
+    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 bg-surface-accent-200/50 dark:bg-surface-950 dark:bg-opacity-50 dark:bg-surface-950/50";
     const Component = component || "button";
     const t4 = disabled ? "opacity-50 pointer-events-none" : "cursor-pointer";
     const t5 = toggled ? "outline outline-2 outline-primary" : "";
@@ -27489,7 +27489,7 @@
     const t7 = sizeClasses[size];
     let t8;
     if ($[10] !== bgClasses || $[11] !== className || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
-      t8 = cls(t4, t5, colorClasses$1, bgClasses, baseClasses, buttonClasses, t6, t7, className);
+      t8 = cls(t4, t5, "text-inherit dark:text-inherit", colorClasses$1, bgClasses, baseClasses, buttonClasses, t6, t7, className);
       $[10] = bgClasses;
       $[11] = className;
       $[12] = t4;
@@ -27859,18 +27859,18 @@
     }
   `;
   const widthClasses = {
-    xs: "max-w-xs min-w-xs w-xs",
-    sm: "max-w-sm min-w-sm w-sm",
-    md: "max-w-md min-w-md w-md",
-    lg: "max-w-lg min-w-lg w-lg",
-    xl: "max-w-xl min-w-xl w-xl",
-    "2xl": "max-w-2xl min-w-2xl w-2xl",
-    "3xl": "max-w-3xl min-w-3xl w-3xl",
-    "4xl": "max-w-4xl min-w-4xl w-4xl",
-    "5xl": "max-w-5xl min-w-5xl w-5xl",
-    "6xl": "max-w-6xl min-w-6xl w-6xl",
-    "7xl": "max-w-7xl min-w-7xl w-7xl",
-    full: "max-w-full min-w-full w-full"
+    xs: "max-w-xs w-xs",
+    sm: "max-w-sm w-sm",
+    md: "max-w-md w-md",
+    lg: "max-w-lg w-lg",
+    xl: "max-w-xl w-xl",
+    "2xl": "max-w-2xl w-2xl",
+    "3xl": "max-w-3xl w-3xl",
+    "4xl": "max-w-4xl w-4xl",
+    "5xl": "max-w-5xl w-5xl",
+    "6xl": "max-w-6xl w-6xl",
+    "7xl": "max-w-7xl w-7xl",
+    full: "max-w-full w-full"
   };
   const Dialog = (t0) => {
     const $ = reactCompilerRuntime.c(42);
@@ -27933,7 +27933,7 @@
     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");
+      t11 = cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black dark:bg-opacity-60 dark:bg-black/60 bg-opacity-50 bg-black/50 dark: bg-black/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 {
@@ -28062,7 +28062,7 @@
     const t3 = translucent ? "backdrop-blur-sm" : "";
     let t4;
     if ($[0] !== className || $[1] !== position || $[2] !== t3) {
-      t4 = cls(defaultBorderMixin, "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2", position, "bg-white bg-opacity-60 dark:bg-surface-900 dark:bg-opacity-60", t3, className);
+      t4 = cls(defaultBorderMixin, "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2", position, "bg-white bg-opacity-60 bg-white/60 dark:bg-surface-900 dark:bg-opacity-60 dark:bg-surface-900/60", t3, className);
       $[0] = className;
       $[1] = position;
       $[2] = t3;
@@ -28310,7 +28310,7 @@
     const t13 = asField && fieldBackgroundMixin;
     let t14;
     if ($[11] !== t10 || $[12] !== t11 || $[13] !== t12 || $[14] !== t13 || $[15] !== titleClassName) {
-      t14 = cls("rounded-t flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-accent-200 hover:bg-opacity-40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40", t10, t11, "transition-all duration-200", t12, t13, titleClassName);
+      t14 = cls("rounded-t flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40", t10, t11, "transition-all duration-200", t12, t13, titleClassName);
       $[11] = t10;
       $[12] = t11;
       $[13] = t12;
@@ -28893,7 +28893,7 @@
     } = t0;
     let t1;
     if ($[0] !== className) {
-      t1 = cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800", 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 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800", className);
       $[0] = className;
       $[1] = t1;
     } else {
@@ -29495,7 +29495,7 @@
     if (orientation === "horizontal") {
       let t1;
       if ($[0] !== className) {
-        t1 = cls("dark:bg-opacity-80 dark:bg-surface-800 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className);
+        t1 = cls("dark:bg-opacity-80 dark:bg-surface-800 dark:bg-surface-800/80 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className);
         $[0] = className;
         $[1] = t1;
       } else {
@@ -29514,7 +29514,7 @@
     } else {
       let t1;
       if ($[5] !== className) {
-        t1 = cls("dark:bg-opacity-80 dark:bg-surface-800 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className);
+        t1 = cls("dark:bg-opacity-80 dark:bg-surface-800 dark:bg-surface-800/80 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className);
         $[5] = className;
         $[6] = t1;
       } else {
@@ -29560,7 +29560,7 @@
   }
   const MultiSelectContext = React__namespace.createContext({});
   const MultiSelect = React__namespace.forwardRef((t0, ref) => {
-    const $ = reactCompilerRuntime.c(103);
+    const $ = reactCompilerRuntime.c(105);
     const {
       value,
       size: t1,
@@ -29585,7 +29585,8 @@
     const includeClear = t3 === void 0 ? true : t3;
     const includeSelectAll = t4 === void 0 ? true : t4;
     const useChips = t5 === void 0 ? true : t5;
-    const [isPopoverOpen, setIsPopoverOpen] = React__namespace.useState(open ?? false);
+    const [isMounted, setIsMounted] = React.useState(false);
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(open ?? false);
     let t6;
     if ($[0] !== value) {
       t6 = value ?? [];
@@ -29594,61 +29595,75 @@
     } else {
       t6 = $[1];
     }
-    const [selectedValues, setSelectedValues] = React__namespace.useState(t6);
+    const [selectedValues, setSelectedValues] = React.useState(t6);
     let t7;
-    if ($[2] !== onOpenChange) {
-      t7 = (open_0) => {
-        setIsPopoverOpen(open_0);
-        onOpenChange?.(open_0);
+    let t8;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = () => {
+        setIsMounted(true);
       };
-      $[2] = onOpenChange;
-      $[3] = t7;
+      t8 = [];
+      $[2] = t7;
+      $[3] = t8;
     } else {
-      t7 = $[3];
+      t7 = $[2];
+      t8 = $[3];
     }
-    const onPopoverOpenChange = t7;
-    let t8;
+    React.useEffect(t7, t8);
     let t9;
-    if ($[4] !== open) {
-      t8 = () => {
-        setIsPopoverOpen(open ?? false);
+    if ($[4] !== onOpenChange) {
+      t9 = (open_0) => {
+        setIsPopoverOpen(open_0);
+        onOpenChange?.(open_0);
       };
-      t9 = [open];
-      $[4] = open;
-      $[5] = t8;
-      $[6] = t9;
+      $[4] = onOpenChange;
+      $[5] = t9;
     } else {
-      t8 = $[5];
-      t9 = $[6];
+      t9 = $[5];
     }
-    React.useEffect(t8, t9);
+    const onPopoverOpenChange = t9;
     let t10;
-    if ($[7] !== children) {
-      t10 = children ? React.Children.map(children, _temp$1).filter(Boolean) : [];
-      $[7] = children;
-      $[8] = t10;
+    let t11;
+    if ($[6] !== open) {
+      t10 = () => {
+        setIsPopoverOpen(open ?? false);
+      };
+      t11 = [open];
+      $[6] = open;
+      $[7] = t10;
+      $[8] = t11;
     } else {
-      t10 = $[8];
+      t10 = $[7];
+      t11 = $[8];
     }
-    const allValues = t10;
-    let t11;
+    React.useEffect(t10, t11);
     let t12;
-    if ($[9] !== value) {
-      t11 = () => {
+    if ($[9] !== children) {
+      t12 = children ? React.Children.map(children, _temp$1).filter(Boolean) : [];
+      $[9] = children;
+      $[10] = t12;
+    } else {
+      t12 = $[10];
+    }
+    const allValues = t12;
+    let t13;
+    let t14;
+    if ($[11] !== value) {
+      t13 = () => {
         setSelectedValues(value ?? []);
       };
-      t12 = [value];
-      $[9] = value;
-      $[10] = t11;
-      $[11] = t12;
+      t14 = [value];
+      $[11] = value;
+      $[12] = t13;
+      $[13] = t14;
     } else {
-      t11 = $[10];
-      t12 = $[11];
+      t13 = $[12];
+      t14 = $[13];
     }
-    React__namespace.useEffect(t11, t12);
+    React__namespace.useEffect(t13, t14);
     let onItemClick;
     let updateValues;
-    if ($[12] !== onValueChange || $[13] !== selectedValues) {
+    if ($[14] !== onValueChange || $[15] !== selectedValues) {
       onItemClick = function onItemClick2(newValue) {
         let newSelectedValues;
         if (selectedValues.some((v_0) => String(v_0) === String(newValue))) {
@@ -29662,17 +29677,17 @@
         setSelectedValues(values);
         onValueChange?.(values);
       };
-      $[12] = onValueChange;
-      $[13] = selectedValues;
-      $[14] = onItemClick;
-      $[15] = updateValues;
+      $[14] = onValueChange;
+      $[15] = selectedValues;
+      $[16] = onItemClick;
+      $[17] = updateValues;
     } else {
-      onItemClick = $[14];
-      updateValues = $[15];
+      onItemClick = $[16];
+      updateValues = $[17];
     }
-    let t13;
-    if ($[16] !== onPopoverOpenChange || $[17] !== selectedValues || $[18] !== updateValues) {
-      t13 = (event) => {
+    let t15;
+    if ($[18] !== onPopoverOpenChange || $[19] !== selectedValues || $[20] !== updateValues) {
+      t15 = (event) => {
         if (event.key === "Enter") {
           onPopoverOpenChange(true);
         } else {
@@ -29683,53 +29698,53 @@
           }
         }
       };
-      $[16] = onPopoverOpenChange;
-      $[17] = selectedValues;
-      $[18] = updateValues;
-      $[19] = t13;
+      $[18] = onPopoverOpenChange;
+      $[19] = selectedValues;
+      $[20] = updateValues;
+      $[21] = t15;
     } else {
-      t13 = $[19];
+      t15 = $[21];
     }
-    const handleInputKeyDown = t13;
-    let t14;
-    if ($[20] !== selectedValues || $[21] !== updateValues) {
-      t14 = (value_0) => {
+    const handleInputKeyDown = t15;
+    let t16;
+    if ($[22] !== selectedValues || $[23] !== updateValues) {
+      t16 = (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] = t14;
+      $[22] = selectedValues;
+      $[23] = updateValues;
+      $[24] = t16;
     } else {
-      t14 = $[22];
+      t16 = $[24];
     }
-    const toggleOption = t14;
-    let t15;
-    if ($[23] !== updateValues) {
-      t15 = () => {
+    const toggleOption = t16;
+    let t17;
+    if ($[25] !== updateValues) {
+      t17 = () => {
         updateValues([]);
       };
-      $[23] = updateValues;
-      $[24] = t15;
+      $[25] = updateValues;
+      $[26] = t17;
     } else {
-      t15 = $[24];
+      t17 = $[26];
     }
-    const handleClear = t15;
-    let t16;
-    if ($[25] !== isPopoverOpen || $[26] !== onPopoverOpenChange) {
-      t16 = () => {
+    const handleClear = t17;
+    let t18;
+    if ($[27] !== isPopoverOpen || $[28] !== onPopoverOpenChange) {
+      t18 = () => {
         onPopoverOpenChange(!isPopoverOpen);
       };
-      $[25] = isPopoverOpen;
-      $[26] = onPopoverOpenChange;
-      $[27] = t16;
+      $[27] = isPopoverOpen;
+      $[28] = onPopoverOpenChange;
+      $[29] = t18;
     } else {
-      t16 = $[27];
+      t18 = $[29];
     }
-    const handleTogglePopover = t16;
-    let t17;
-    if ($[28] !== allValues || $[29] !== handleClear || $[30] !== onPopoverOpenChange || $[31] !== selectedValues.length || $[32] !== updateValues) {
-      t17 = () => {
+    const handleTogglePopover = t18;
+    let t19;
+    if ($[30] !== allValues || $[31] !== handleClear || $[32] !== onPopoverOpenChange || $[33] !== selectedValues.length || $[34] !== updateValues) {
+      t19 = () => {
         if (selectedValues.length === allValues.length) {
           handleClear();
         } else {
@@ -29737,54 +29752,55 @@
         }
         onPopoverOpenChange(false);
       };
-      $[28] = allValues;
-      $[29] = handleClear;
-      $[30] = onPopoverOpenChange;
-      $[31] = selectedValues.length;
-      $[32] = updateValues;
-      $[33] = t17;
+      $[30] = allValues;
+      $[31] = handleClear;
+      $[32] = onPopoverOpenChange;
+      $[33] = selectedValues.length;
+      $[34] = updateValues;
+      $[35] = t19;
     } else {
-      t17 = $[33];
+      t19 = $[35];
     }
-    const toggleAll = t17;
+    const toggleAll = t19;
     useInjectStyles("MultiSelect", `
 [cmdk-group] {
   max-height: 45vh;
   overflow-y: auto;
   // width: 400px;
 } `);
-    let t18;
-    if ($[34] !== onItemClick || $[35] !== selectedValues) {
-      t18 = {
+    let t20;
+    if ($[36] !== onItemClick || $[37] !== selectedValues) {
+      t20 = {
         fieldValue: selectedValues,
         onItemClick
       };
-      $[34] = onItemClick;
-      $[35] = selectedValues;
-      $[36] = t18;
+      $[36] = onItemClick;
+      $[37] = selectedValues;
+      $[38] = t20;
     } else {
-      t18 = $[36];
+      t20 = $[38];
     }
-    let t19;
-    if ($[37] !== error || $[38] !== label) {
-      t19 = typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(SelectInputLabel, { error, children: label }) : label;
-      $[37] = error;
-      $[38] = label;
-      $[39] = t19;
-    } else {
-      t19 = $[39];
-    }
-    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
+    let t21;
+    if ($[39] !== error || $[40] !== label) {
+      t21 = typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(SelectInputLabel, { error, children: label }) : label;
+      $[39] = error;
+      $[40] = label;
+      $[41] = t21;
+    } else {
+      t21 = $[41];
+    }
+    const t22 = isMounted && isPopoverOpen;
+    const t23 = size === "smallest";
+    const t24 = size === "small";
+    const t25 = size === "medium";
+    const t26 = size === "large";
+    let t27;
+    if ($[42] !== className || $[43] !== disabled || $[44] !== invisible || $[45] !== size || $[46] !== t23 || $[47] !== t24 || $[48] !== t25 || $[49] !== t26) {
+      t27 = cls({
+        "min-h-[28px]": t23,
+        "min-h-[32px]": t24,
+        "min-h-[42px]": t25,
+        "min-h-[64px]": t26
       }, {
         "py-1": size === "small" || size === "smallest",
         "py-2": size === "medium" || size === "large"
@@ -29792,21 +29808,21 @@
         "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] = disabled;
-      $[42] = invisible;
-      $[43] = size;
-      $[44] = t20;
-      $[45] = t21;
-      $[46] = t22;
-      $[47] = t23;
-      $[48] = t24;
-    } else {
-      t24 = $[48];
+      $[42] = className;
+      $[43] = disabled;
+      $[44] = invisible;
+      $[45] = size;
+      $[46] = t23;
+      $[47] = t24;
+      $[48] = t25;
+      $[49] = t26;
+      $[50] = t27;
+    } else {
+      t27 = $[50];
     }
-    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__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center w-full", children: [
+    let t28;
+    if ($[51] !== children || $[52] !== handleClear || $[53] !== includeClear || $[54] !== isPopoverOpen || $[55] !== placeholder || $[56] !== renderValues || $[57] !== selectedValues || $[58] !== size || $[59] !== toggleOption || $[60] !== useChips) {
+      t28 = selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center w-full", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1.5 text-start", children: [
           renderValues && renderValues(selectedValues),
           !renderValues && selectedValues.map((value_1) => {
@@ -29835,176 +29851,176 @@
         /* @__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: size === "large" ? "medium" : "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
       ] });
-      $[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 ($[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 }) });
-      $[60] = handleTogglePopover;
-      $[61] = ref;
-      $[62] = t24;
-      $[63] = t25;
-      $[64] = t26;
-    } else {
-      t26 = $[64];
-    }
-    let 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 = $[65];
-    }
-    let t28;
-    if ($[66] !== onPopoverOpenChange) {
-      t28 = () => onPopoverOpenChange(false);
-      $[66] = onPopoverOpenChange;
-      $[67] = t28;
-    } else {
-      t28 = $[67];
+      $[51] = children;
+      $[52] = handleClear;
+      $[53] = includeClear;
+      $[54] = isPopoverOpen;
+      $[55] = placeholder;
+      $[56] = renderValues;
+      $[57] = selectedValues;
+      $[58] = size;
+      $[59] = toggleOption;
+      $[60] = useChips;
+      $[61] = t28;
+    } else {
+      t28 = $[61];
     }
     let t29;
-    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;
+    if ($[62] !== handleTogglePopover || $[63] !== ref || $[64] !== t27 || $[65] !== t28) {
+      t29 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { ref, onClick: handleTogglePopover, className: t27, children: t28 }) });
+      $[62] = handleTogglePopover;
+      $[63] = ref;
+      $[64] = t27;
+      $[65] = t28;
+      $[66] = t29;
     } else {
-      t29 = $[68];
+      t29 = $[66];
     }
     let t30;
-    if ($[69] !== handleInputKeyDown) {
-      t30 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Input, { className: t29, placeholder: "Search...", onKeyDown: handleInputKeyDown });
-      $[69] = handleInputKeyDown;
-      $[70] = t30;
+    if ($[67] === Symbol.for("react.memo_cache_sentinel")) {
+      t30 = cls("z-50 overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin);
+      $[67] = t30;
     } else {
-      t30 = $[70];
+      t30 = $[67];
     }
     let t31;
-    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" });
-      $[71] = handleClear;
-      $[72] = selectedValues.length;
-      $[73] = t31;
+    if ($[68] !== onPopoverOpenChange) {
+      t31 = () => onPopoverOpenChange(false);
+      $[68] = onPopoverOpenChange;
+      $[69] = t31;
     } else {
-      t31 = $[73];
+      t31 = $[69];
     }
     let t32;
-    if ($[74] !== t30 || $[75] !== t31) {
-      t32 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center", children: [
-        t30,
-        t31
-      ] });
-      $[74] = t30;
-      $[75] = t31;
-      $[76] = t32;
+    if ($[70] === Symbol.for("react.memo_cache_sentinel")) {
+      t32 = cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow ");
+      $[70] = t32;
     } else {
-      t32 = $[76];
+      t32 = $[70];
     }
     let t33;
-    if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
-      t33 = /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "horizontal", className: "my-0" });
-      $[77] = t33;
+    if ($[71] !== handleInputKeyDown) {
+      t33 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Input, { className: t32, placeholder: "Search...", onKeyDown: handleInputKeyDown });
+      $[71] = handleInputKeyDown;
+      $[72] = t33;
     } else {
-      t33 = $[77];
+      t33 = $[72];
     }
     let t34;
-    if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
-      t34 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { className: "px-4 py-2", children: "No results found." });
-      $[78] = t34;
+    if ($[73] !== handleClear || $[74] !== selectedValues.length) {
+      t34 = 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" });
+      $[73] = handleClear;
+      $[74] = selectedValues.length;
+      $[75] = t34;
     } else {
-      t34 = $[78];
+      t34 = $[75];
     }
     let t35;
-    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");
-      $[79] = allValues.length;
-      $[80] = includeSelectAll;
-      $[81] = selectedValues.length;
-      $[82] = toggleAll;
-      $[83] = t35;
+    if ($[76] !== t33 || $[77] !== t34) {
+      t35 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center", children: [
+        t33,
+        t34
+      ] });
+      $[76] = t33;
+      $[77] = t34;
+      $[78] = t35;
     } else {
-      t35 = $[83];
+      t35 = $[78];
     }
     let t36;
-    if ($[84] !== children || $[85] !== t35) {
-      t36 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { children: [
-        t34,
-        /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Group, { children: [
-          t35,
-          children
-        ] })
-      ] });
-      $[84] = children;
-      $[85] = t35;
-      $[86] = t36;
+    if ($[79] === Symbol.for("react.memo_cache_sentinel")) {
+      t36 = /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "horizontal", className: "my-0" });
+      $[79] = t36;
     } else {
-      t36 = $[86];
+      t36 = $[79];
     }
     let t37;
-    if ($[87] !== t32 || $[88] !== t36) {
-      t37 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command, { children: [
-        t32,
-        t33,
-        t36
-      ] });
-      $[87] = t32;
-      $[88] = t36;
-      $[89] = t37;
+    if ($[80] === Symbol.for("react.memo_cache_sentinel")) {
+      t37 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { className: "px-4 py-2", children: "No results found." });
+      $[80] = t37;
     } else {
-      t37 = $[89];
+      t37 = $[80];
     }
     let t38;
-    if ($[90] !== t28 || $[91] !== t37) {
-      t38 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Content, { className: t27, align: "start", sideOffset: 8, onEscapeKeyDown: t28, children: t37 });
-      $[90] = t28;
-      $[91] = t37;
-      $[92] = t38;
+    if ($[81] !== allValues.length || $[82] !== includeSelectAll || $[83] !== selectedValues.length || $[84] !== toggleAll) {
+      t38 = 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-primary/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");
+      $[81] = allValues.length;
+      $[82] = includeSelectAll;
+      $[83] = selectedValues.length;
+      $[84] = toggleAll;
+      $[85] = t38;
     } else {
-      t38 = $[92];
+      t38 = $[85];
     }
     let t39;
-    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
+    if ($[86] !== children || $[87] !== t38) {
+      t39 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { children: [
+        t37,
+        /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Group, { children: [
+          t38,
+          children
+        ] })
       ] });
-      $[93] = isPopoverOpen;
-      $[94] = modalPopover;
-      $[95] = onPopoverOpenChange;
-      $[96] = t26;
-      $[97] = t38;
-      $[98] = t39;
+      $[86] = children;
+      $[87] = t38;
+      $[88] = t39;
     } else {
-      t39 = $[98];
+      t39 = $[88];
     }
     let t40;
-    if ($[99] !== t18 || $[100] !== t19 || $[101] !== t39) {
-      t40 = /* @__PURE__ */ jsxRuntime.jsxs(MultiSelectContext.Provider, { value: t18, children: [
-        t19,
+    if ($[89] !== t35 || $[90] !== t39) {
+      t40 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command, { children: [
+        t35,
+        t36,
         t39
       ] });
-      $[99] = t18;
-      $[100] = t19;
-      $[101] = t39;
-      $[102] = t40;
+      $[89] = t35;
+      $[90] = t39;
+      $[91] = t40;
+    } else {
+      t40 = $[91];
+    }
+    let t41;
+    if ($[92] !== t31 || $[93] !== t40) {
+      t41 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Content, { className: t30, align: "start", sideOffset: 8, onEscapeKeyDown: t31, children: t40 });
+      $[92] = t31;
+      $[93] = t40;
+      $[94] = t41;
+    } else {
+      t41 = $[94];
+    }
+    let t42;
+    if ($[95] !== modalPopover || $[96] !== onPopoverOpenChange || $[97] !== t22 || $[98] !== t29 || $[99] !== t41) {
+      t42 = /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, { open: t22, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
+        t29,
+        t41
+      ] });
+      $[95] = modalPopover;
+      $[96] = onPopoverOpenChange;
+      $[97] = t22;
+      $[98] = t29;
+      $[99] = t41;
+      $[100] = t42;
+    } else {
+      t42 = $[100];
+    }
+    let t43;
+    if ($[101] !== t20 || $[102] !== t21 || $[103] !== t42) {
+      t43 = /* @__PURE__ */ jsxRuntime.jsxs(MultiSelectContext.Provider, { value: t20, children: [
+        t21,
+        t42
+      ] });
+      $[101] = t20;
+      $[102] = t21;
+      $[103] = t42;
+      $[104] = t43;
     } else {
-      t40 = $[102];
+      t43 = $[104];
     }
-    return t40;
+    return t43;
   });
   MultiSelect.displayName = "MultiSelect";
   function MultiSelectItem(t0) {
@@ -30062,7 +30078,7 @@
     const t4 = isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "";
     let t5;
     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);
+      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-primary/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);
       $[10] = className;
       $[11] = t4;
       $[12] = t5;
@@ -30490,7 +30506,7 @@
           "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", {
+        } : "", "outline-hidden focus:outline-hidden", "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",
@@ -30631,7 +30647,7 @@
       t2 = cls({
         "border-primary bg-primary outline-none": t1,
         "border-surface-accent-300 bg-surface-accent-300 dark:border-surface-700 dark:bg-surface-700": props.props.disabled
-      }, props.classes, "focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-opacity-50", "hover:ring-4 hover:ring-primary hover:ring-opacity-25", "block rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50");
+      }, props.classes, "focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-opacity-50 focus-visible:ring-primary/50", "hover:ring-4 hover:ring-primary hover:ring-opacity-25 hover:ring-primary/25", "block rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50");
       $[0] = props.classes;
       $[1] = props.props.disabled;
       $[2] = t1;
@@ -30649,7 +30665,7 @@
     }
     let t4;
     if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-      t4 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100");
+      t4 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100");
       $[6] = t4;
     } else {
       t4 = $[6];
@@ -30754,7 +30770,7 @@
     }
     let t10;
     if ($[15] !== t6 || $[16] !== t9) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { style: t6, className: "relative w-full grow overflow-hidden rounded-full bg-surface-accent-300 bg-opacity-40 dark:bg-surface-700 dark:bg-opacity-40", children: t9 });
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { style: t6, className: "relative w-full grow overflow-hidden rounded-full bg-surface-accent-300 bg-opacity-40 bg-surface-accent-300/40 dark:bg-surface-700 dark:bg-opacity-40 dark:bg-surface-700/40", children: t9 });
       $[15] = t6;
       $[16] = t9;
       $[17] = t10;
@@ -30928,7 +30944,7 @@
         t9 = $[41];
       }
       if ($[42] !== displayed || $[43] !== includeBackgroundOverlay || $[44] !== open || $[45] !== overlayClassName || $[46] !== overlayStyle) {
-        t10 = includeBackgroundOverlay && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: cls("outline-none", "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm", "bg-black bg-opacity-50", "dark:bg-surface-900 dark:bg-opacity-60", displayed && open ? "opacity-100" : "opacity-0", overlayClassName), style: {
+        t10 = includeBackgroundOverlay && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: cls("outline-none", "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm", "bg-black bg-opacity-50 bg-black/50", "dark:bg-surface-900 dark:bg-opacity-60 dark:bg-surface-900/60", displayed && open ? "opacity-100" : "opacity-0", overlayClassName), style: {
           pointerEvents: displayed ? "auto" : "none",
           ...overlayStyle
         } });
@@ -31269,8 +31285,13 @@
     ...inputProps
   }, ref) => {
     const inputRef = inputRefProp ?? React.useRef(null);
-    const [focused, setFocused] = React.useState(document.activeElement === inputRef.current);
+    const [focused, setFocused] = React.useState(false);
     const hasValue = value !== void 0 && value !== null && value !== "";
+    React.useEffect(() => {
+      if (inputRef.current && document.activeElement === inputRef.current) {
+        setFocused(true);
+      }
+    }, []);
     React.useEffect(() => {
       if (type !== "number") return;
       const handleWheel = (event) => {
@@ -31282,7 +31303,7 @@
         element?.removeEventListener("wheel", handleWheel);
       };
     }, [inputRef, type]);
-    const input = multiline ? /* @__PURE__ */ jsxRuntime.jsx(TextareaAutosize, { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, minRows, maxRows, value: value ?? "", onChange, style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName) }) : /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, ref: inputRef, disabled, style: inputStyle, className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
+    const input = multiline ? /* @__PURE__ */ jsxRuntime.jsx(TextareaAutosize, { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, minRows, maxRows, value: value ?? "", onChange, onFocus: () => setFocused(true), onBlur: () => setFocused(false), style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName) }) : /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, ref: inputRef, disabled, style: inputStyle, className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
       "min-h-[28px]": size === "smallest",
       "min-h-[32px]": size === "small",
       "min-h-[42px]": size === "medium",
@@ -31352,7 +31373,7 @@
     const trigger = t4;
     let t5;
     if ($[7] !== tooltipClassName) {
-      t5 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName);
+      t5 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName);
       $[7] = tooltipClassName;
       $[8] = t5;
     } else {
@@ -31531,7 +31552,7 @@
     }
     let t2;
     if ($[3] !== innerClassName) {
-      t2 = cls("line-clamp-1", "uppercase inline-block p-2 px-4 rounded", "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800", innerClassName);
+      t2 = cls("line-clamp-1", "uppercase inline-block p-2 px-4 rounded", "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800", innerClassName);
       $[3] = innerClassName;
       $[4] = t2;
     } else {