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

package/dist/index.es.js

@@ -26,17 +26,17 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as ReactDOM from "react-dom";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 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 twMerge(clsx(classes));
 }
@@ -742,7 +742,7 @@ const BooleanSwitch = React__default.forwardRef(function BooleanSwitch2({
     } 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__ */ 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",
@@ -891,12 +891,12 @@ const ButtonInner = React__default.forwardRef((t0, ref) => {
         "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,
@@ -904,7 +904,7 @@ const ButtonInner = React__default.forwardRef((t0, ref) => {
         "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",
@@ -27265,7 +27265,7 @@ const Checkbox = (t0) => {
   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) {
@@ -27411,7 +27411,7 @@ function Chip(t0) {
   }
   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 = {
@@ -27471,7 +27471,7 @@ const IconButtonInner = (t0, ref) => {
   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" : "";
@@ -27479,7 +27479,7 @@ const IconButtonInner = (t0, ref) => {
   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;
@@ -27849,18 +27849,18 @@ const inputStyles = `
     }
   `;
 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 $ = c(42);
@@ -27923,7 +27923,7 @@ const Dialog = (t0) => {
   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 {
@@ -28052,7 +28052,7 @@ function DialogActions(t0) {
   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;
@@ -28300,7 +28300,7 @@ function ExpandablePanel(t0) {
   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;
@@ -28883,7 +28883,7 @@ function MenubarTrigger(t0) {
   } = t0;
   let t1;
   if ($[0] !== className) {
-    t1 = cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-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 {
@@ -29485,7 +29485,7 @@ function Separator(t0) {
   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 {
@@ -29504,7 +29504,7 @@ function Separator(t0) {
   } 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 {
@@ -29550,7 +29550,7 @@ function SelectInputLabel(t0) {
 }
 const MultiSelectContext = React.createContext({});
 const MultiSelect = React.forwardRef((t0, ref) => {
-  const $ = c(103);
+  const $ = c(105);
   const {
     value,
     size: t1,
@@ -29575,7 +29575,8 @@ const MultiSelect = React.forwardRef((t0, ref) => {
   const includeClear = t3 === void 0 ? true : t3;
   const includeSelectAll = t4 === void 0 ? true : t4;
   const useChips = t5 === void 0 ? true : t5;
-  const [isPopoverOpen, setIsPopoverOpen] = React.useState(open ?? false);
+  const [isMounted, setIsMounted] = useState(false);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(open ?? false);
   let t6;
   if ($[0] !== value) {
     t6 = value ?? [];
@@ -29584,61 +29585,75 @@ const MultiSelect = React.forwardRef((t0, ref) => {
   } else {
     t6 = $[1];
   }
-  const [selectedValues, setSelectedValues] = React.useState(t6);
+  const [selectedValues, setSelectedValues] = 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;
+  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];
   }
-  useEffect(t8, t9);
+  const onPopoverOpenChange = t9;
   let t10;
-  if ($[7] !== children) {
-    t10 = children ? 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;
+  useEffect(t10, t11);
   let t12;
-  if ($[9] !== value) {
-    t11 = () => {
+  if ($[9] !== children) {
+    t12 = children ? 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.useEffect(t11, t12);
+  React.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))) {
@@ -29652,17 +29667,17 @@ const MultiSelect = React.forwardRef((t0, ref) => {
       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 {
@@ -29673,53 +29688,53 @@ const MultiSelect = React.forwardRef((t0, ref) => {
         }
       }
     };
-    $[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 {
@@ -29727,54 +29742,55 @@ const MultiSelect = React.forwardRef((t0, ref) => {
       }
       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__ */ 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__ */ 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"
@@ -29782,21 +29798,21 @@ const MultiSelect = React.forwardRef((t0, ref) => {
       "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__ */ 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__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 text-start", children: [
         renderValues && renderValues(selectedValues),
         !renderValues && selectedValues.map((value_1) => {
@@ -29825,176 +29841,176 @@ const MultiSelect = React.forwardRef((t0, ref) => {
       /* @__PURE__ */ jsx("span", { className: "text-sm", children: placeholder }),
       /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: 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__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { ref, onClick: handleTogglePopover, className: t24, children: t25 }) });
-    $[60] = handleTogglePopover;
-    $[61] = ref;
-    $[62] = t24;
-    $[63] = t25;
-    $[64] = t26;
-  } else {
-    t26 = $[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__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx(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__ */ 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__ */ 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__ */ jsx(Separator, { orientation: "horizontal", className: "my-0" });
-    $[77] = t33;
+  if ($[71] !== handleInputKeyDown) {
+    t33 = /* @__PURE__ */ jsx(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__ */ jsx(Command.Empty, { className: "px-4 py-2", children: "No results found." });
-    $[78] = t34;
+  if ($[73] !== handleClear || $[74] !== selectedValues.length) {
+    t34 = selectedValues.length > 0 && /* @__PURE__ */ jsx("div", { onClick: handleClear, className: "text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark", children: "Clear" });
+    $[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__ */ jsxs(Command.Item, { onSelect: toggleAll, className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"), children: [
-      /* @__PURE__ */ jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }),
-      /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary dark:text-text-secondary-dark", children: "(Select All)" })
-    ] }, "all");
-    $[79] = allValues.length;
-    $[80] = includeSelectAll;
-    $[81] = selectedValues.length;
-    $[82] = toggleAll;
-    $[83] = t35;
+  if ($[76] !== t33 || $[77] !== t34) {
+    t35 = /* @__PURE__ */ 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__ */ jsxs(Command.List, { children: [
-      t34,
-      /* @__PURE__ */ jsxs(Command.Group, { children: [
-        t35,
-        children
-      ] })
-    ] });
-    $[84] = children;
-    $[85] = t35;
-    $[86] = t36;
+  if ($[79] === Symbol.for("react.memo_cache_sentinel")) {
+    t36 = /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "my-0" });
+    $[79] = t36;
   } else {
-    t36 = $[86];
+    t36 = $[79];
   }
   let t37;
-  if ($[87] !== t32 || $[88] !== t36) {
-    t37 = /* @__PURE__ */ jsxs(Command, { children: [
-      t32,
-      t33,
-      t36
-    ] });
-    $[87] = t32;
-    $[88] = t36;
-    $[89] = t37;
+  if ($[80] === Symbol.for("react.memo_cache_sentinel")) {
+    t37 = /* @__PURE__ */ jsx(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__ */ jsx(PopoverPrimitive.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__ */ jsxs(Command.Item, { onSelect: toggleAll, className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-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__ */ jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary dark:text-text-secondary-dark", children: "(Select All)" })
+    ] }, "all");
+    $[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__ */ jsxs(PopoverPrimitive.Root, { open: isPopoverOpen, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
-      t26,
-      t38
+  if ($[86] !== children || $[87] !== t38) {
+    t39 = /* @__PURE__ */ jsxs(Command.List, { children: [
+      t37,
+      /* @__PURE__ */ jsxs(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__ */ jsxs(MultiSelectContext.Provider, { value: t18, children: [
-      t19,
+  if ($[89] !== t35 || $[90] !== t39) {
+    t40 = /* @__PURE__ */ jsxs(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__ */ jsx(PopoverPrimitive.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__ */ jsxs(PopoverPrimitive.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__ */ 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) {
@@ -30052,7 +30068,7 @@ function MultiSelectItem(t0) {
   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;
@@ -30480,7 +30496,7 @@ const Select = forwardRef(({
         "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",
@@ -30621,7 +30637,7 @@ function SliderThumb(props) {
     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;
@@ -30639,7 +30655,7 @@ function SliderThumb(props) {
   }
   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];
@@ -30744,7 +30760,7 @@ const Slider = React.forwardRef((t0, ref) => {
   }
   let t10;
   if ($[15] !== t6 || $[16] !== t9) {
-    t10 = /* @__PURE__ */ jsx(SliderPrimitive.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__ */ jsx(SliderPrimitive.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;
@@ -30918,7 +30934,7 @@ const Sheet = (t0) => {
       t9 = $[41];
     }
     if ($[42] !== displayed || $[43] !== includeBackgroundOverlay || $[44] !== open || $[45] !== overlayClassName || $[46] !== overlayStyle) {
-      t10 = includeBackgroundOverlay && /* @__PURE__ */ jsx(DialogPrimitive.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__ */ jsx(DialogPrimitive.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
       } });
@@ -31259,8 +31275,13 @@ const TextField = forwardRef(({
   ...inputProps
 }, ref) => {
   const inputRef = inputRefProp ?? useRef(null);
-  const [focused, setFocused] = React__default.useState(document.activeElement === inputRef.current);
+  const [focused, setFocused] = React__default.useState(false);
   const hasValue = value !== void 0 && value !== null && value !== "";
+  useEffect(() => {
+    if (inputRef.current && document.activeElement === inputRef.current) {
+      setFocused(true);
+    }
+  }, []);
   useEffect(() => {
     if (type !== "number") return;
     const handleWheel = (event) => {
@@ -31272,7 +31293,7 @@ const TextField = forwardRef(({
       element?.removeEventListener("wheel", handleWheel);
     };
   }, [inputRef, type]);
-  const input = multiline ? /* @__PURE__ */ jsx(TextareaAutosize, { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, minRows, maxRows, value: value ?? "", onChange, style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName) }) : /* @__PURE__ */ jsx("input", { ...inputProps, ref: inputRef, disabled, style: inputStyle, className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
+  const input = multiline ? /* @__PURE__ */ 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__ */ 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",
@@ -31342,7 +31363,7 @@ const Tooltip = (t0) => {
   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 {
@@ -31521,7 +31542,7 @@ function Tab(t0) {
   }
   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 {