@firecms/ui 3.3.0 → 3.4.0-canary.0ef7442

package/dist/index.umd.js

@@ -37,14 +37,14 @@
   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 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 fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-800 dark:bg-opacity-90 dark:bg-surface-800/90";
   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 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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ";
   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));
@@ -391,6 +391,60 @@
     React.useEffect(t1, t2);
     return debouncedValue;
   }
+  function useDebounceCallback(callback, delay) {
+    const $ = reactCompilerRuntime.c(7);
+    const timeoutRef = React.useRef(null);
+    const callbackRef = React.useRef(callback);
+    let t0;
+    let t1;
+    if ($[0] !== callback) {
+      t0 = () => {
+        callbackRef.current = callback;
+      };
+      t1 = [callback];
+      $[0] = callback;
+      $[1] = t0;
+      $[2] = t1;
+    } else {
+      t0 = $[1];
+      t1 = $[2];
+    }
+    React.useEffect(t0, t1);
+    let t2;
+    let t3;
+    if ($[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t2 = () => () => {
+        if (timeoutRef.current !== null) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
+      t3 = [];
+      $[3] = t2;
+      $[4] = t3;
+    } else {
+      t2 = $[3];
+      t3 = $[4];
+    }
+    React.useEffect(t2, t3);
+    let t4;
+    if ($[5] !== delay) {
+      t4 = (...t5) => {
+        const args = t5;
+        if (timeoutRef.current !== null) {
+          clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+          callbackRef.current?.(...args);
+        }, delay ?? 200);
+      };
+      $[5] = delay;
+      $[6] = t4;
+    } else {
+      t4 = $[6];
+    }
+    const debouncedCallback = t4;
+    return debouncedCallback;
+  }
   function useIconStyles(t0) {
     const {
       fill: t1,
@@ -476,6 +530,7 @@
     }
     return t6;
   });
+  Collapse.displayName = "Collapse";
   const useAutoComplete = ({
     ref
   }) => {
@@ -597,16 +652,16 @@
   const getColorClasses = (severity) => {
     switch (severity) {
       case "error":
-        return "bg-red-50 dark:bg-red-800 dark:text-red-100 text-red-900";
+        return "bg-red-50 dark:bg-red-800 dark:text-red-100 text-red-900 border-l-[3px] border-l-red-500";
       case "warning":
-        return "bg-amber-50 dark:bg-amber-800 dark:text-amber-100 text-amber-900";
+        return "bg-amber-50 dark:bg-amber-800 dark:text-amber-100 text-amber-900 border-l-[3px] border-l-amber-500";
       case "info":
-        return "bg-blue-100 dark:bg-blue-800 dark:text-blue-100 text-blue-900";
+        return "bg-blue-100 dark:bg-blue-800 dark:text-blue-100 text-blue-900 border-l-[3px] border-l-blue-500";
       case "success":
-        return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900";
+        return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900 border-l-[3px] border-l-emerald-500";
       case "base":
       default:
-        return "bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900";
+        return "bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900 border-l-[3px] border-l-surface-accent-400";
     }
   };
   const Alert = (t0) => {
@@ -628,7 +683,7 @@
     if ($[0] !== color || $[1] !== outerClassName || $[2] !== size || $[3] !== style) {
       const classes = getColorClasses(color);
       t3 = style;
-      t4 = cls(getSizeClasses(size), "w-full", "font-medium", "rounded-md flex items-center gap-2", classes, outerClassName);
+      t4 = cls(getSizeClasses(size), "w-full", "font-medium", "rounded-lg flex items-center gap-2", classes, outerClassName);
       $[0] = color;
       $[1] = outerClassName;
       $[2] = size;
@@ -641,7 +696,7 @@
     }
     let t5;
     if ($[6] !== className) {
-      t5 = cls("flex-grow", className);
+      t5 = cls("grow", className);
       $[6] = className;
       $[7] = t5;
     } else {
@@ -734,7 +789,7 @@
       t2 = $[9];
     }
     const handleImageError = t2;
-    const t3 = hover && "hover:bg-surface-accent-200 hover:dark:bg-surface-accent-700";
+    const t3 = hover && "hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700";
     let t4;
     if ($[10] !== outerClassName || $[11] !== t3) {
       t4 = cls("rounded-full flex items-center justify-center overflow-hidden", "p-1 w-12 h-12 min-w-12 min-h-12", t3, outerClassName);
@@ -780,7 +835,7 @@
     size = "medium",
     ...props
   }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", ref, tabIndex: disabled ? -1 : void 0, onClick: disabled ? (e) => e.preventDefault() : (e_0) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", ref, role: "switch", "aria-checked": allowIndeterminate && (value === null || value === void 0) ? "mixed" : !!value, "aria-disabled": disabled || void 0, tabIndex: disabled ? -1 : void 0, onClick: disabled ? (e) => e.preventDefault() : (e_0) => {
       e_0.preventDefault();
       if (allowIndeterminate) {
         if (value === null || value === void 0) onValueChange?.(true);
@@ -790,7 +845,7 @@
         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-[44px] h-[26px] min-w-[44px] 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", {
+      allowIndeterminate && (value === null || value === void 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600", {
         "w-[21px] h-[10px]": size === "medium" || size === "large",
         "w-[19px] h-[8px]": size === "small",
         "w-[16px] h-[6px]": size === "smallest",
@@ -798,7 +853,7 @@
         "translate-x-[9px]": size === "small",
         "translate-x-[8px]": size === "smallest"
       }) }, "knob"),
-      !(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("block rounded-full transition-transform duration-100 transform will-change-auto", disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : value ? "bg-white" : "bg-surface-accent-600 dark:bg-surface-accent-400", {
+      !(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", disabled ? "bg-surface-accent-300 dark:bg-surface-700" : value ? "bg-white shadow" : "bg-surface-accent-600 dark:bg-surface-accent-400", {
         "w-[21px] h-[21px]": size === "medium" || size === "large",
         "w-[19px] h-[19px]": size === "small",
         "w-[16px] h-[16px]": size === "smallest",
@@ -852,7 +907,7 @@
     ] });
   };
   const ButtonInner = React.memo(React.forwardRef((t0, ref) => {
-    const $ = reactCompilerRuntime.c(55);
+    const $ = reactCompilerRuntime.c(56);
     let Component;
     let children;
     let className;
@@ -940,32 +995,33 @@
     let t28;
     let t29;
     let t30;
-    if ($[11] !== Component || $[12] !== children || $[13] !== className || $[14] !== disabled || $[15] !== fullWidth || $[16] !== props || $[17] !== ref || $[18] !== size || $[19] !== startIcon || $[20] !== t10 || $[21] !== t11 || $[22] !== t12 || $[23] !== t13 || $[24] !== t14 || $[25] !== t15 || $[26] !== t16 || $[27] !== t17 || $[28] !== t18 || $[29] !== t19 || $[30] !== t20 || $[31] !== t21 || $[32] !== t22 || $[33] !== t23 || $[34] !== t24 || $[35] !== t25 || $[36] !== t7 || $[37] !== t8 || $[38] !== t9) {
+    if ($[11] !== Component || $[12] !== children || $[13] !== className || $[14] !== color || $[15] !== disabled || $[16] !== fullWidth || $[17] !== props || $[18] !== ref || $[19] !== size || $[20] !== startIcon || $[21] !== t10 || $[22] !== t11 || $[23] !== t12 || $[24] !== t13 || $[25] !== t14 || $[26] !== t15 || $[27] !== t16 || $[28] !== t17 || $[29] !== t18 || $[30] !== t19 || $[31] !== t20 || $[32] !== t21 || $[33] !== t22 || $[34] !== t23 || $[35] !== t24 || $[36] !== t25 || $[37] !== t7 || $[38] !== t8 || $[39] !== t9) {
       t30 = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
       bb0: {
         const buttonClasses2 = cls({
           "w-full": fullWidth,
           "w-fit": t7,
-          "border border-primary bg-primary focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": t8,
-          "border border-secondary bg-secondary focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": t9,
-          "border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": t10,
-          "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow hover:ring-1 hover:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t11,
-          "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t12,
+          "border border-primary bg-primary focus:ring-primary text-white hover:text-white hover:brightness-105": t8,
+          "border border-secondary bg-secondary focus:ring-secondary text-white hover:text-white hover:brightness-105": t9,
+          "border border-red-500 bg-red-500 hover:bg-red-600 focus:ring-red-500 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 text-text-primary hover:text-text-primary dark:border-surface-accent-700 dark:bg-surface-accent-700 dark:hover:bg-surface-accent-600 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-700 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 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-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:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t16,
+          "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-800": t17,
           "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,
-          "border border-surface-300 text-text-primary hover:bg-surface-accent-200 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-700": t22,
+          "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark dark:border-surface-accent-600 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t21,
+          "border border-surface-300 text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-800": t22,
           "text-text-disabled dark:text-text-disabled-dark": disabled,
           "border border-transparent opacity-50": t23,
           "border border-surface-500 opacity-50": t24,
-          "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-70 bg-surface-300/70 dark:bg-surface-500/70": t25
+          "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40 bg-surface-300/40 dark:bg-surface-500/40": t25
         });
+        const iconColorClass = (color === "neutral" || color === "text") && !disabled ? "[&>svg]:text-surface-accent-500 dark:[&>svg]:text-surface-accent-300" : "";
         const sizeClasses2 = cls({
           "py-1 px-2": size === "small",
           "py-2 px-4": size === "medium",
@@ -974,7 +1030,7 @@
           "py-4 px-10": size === "2xl"
         });
         if (Component) {
-          t30 = /* @__PURE__ */ jsxRuntime.jsxs(Component, { ref, onClick: props.onClick, className: cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition ease-in-out duration-150 gap-2", buttonClasses2, sizeClasses2, className), ...props, children: [
+          t30 = /* @__PURE__ */ jsxRuntime.jsxs(Component, { ref, onClick: props.onClick, className: cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-lg whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-colors ease-in-out duration-150 gap-2", buttonClasses2, sizeClasses2, iconColorClass, className), ...props, children: [
             startIcon,
             children
           ] });
@@ -983,81 +1039,83 @@
         t26 = ref;
         t27 = props.type ?? "button";
         t28 = props.onClick;
-        t29 = cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition ease-in-out duration-150 gap-2", buttonClasses2, sizeClasses2, className);
+        t29 = cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-lg whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-colors ease-in-out duration-150 gap-2", buttonClasses2, sizeClasses2, iconColorClass, className);
       }
       $[11] = Component;
       $[12] = children;
       $[13] = className;
-      $[14] = disabled;
-      $[15] = fullWidth;
-      $[16] = props;
-      $[17] = ref;
-      $[18] = size;
-      $[19] = startIcon;
-      $[20] = t10;
-      $[21] = t11;
-      $[22] = t12;
-      $[23] = t13;
-      $[24] = t14;
-      $[25] = t15;
-      $[26] = t16;
-      $[27] = t17;
-      $[28] = t18;
-      $[29] = t19;
-      $[30] = t20;
-      $[31] = t21;
-      $[32] = t22;
-      $[33] = t23;
-      $[34] = t24;
-      $[35] = t25;
-      $[36] = t7;
-      $[37] = t8;
-      $[38] = t9;
-      $[39] = t26;
-      $[40] = t27;
-      $[41] = t28;
-      $[42] = t29;
-      $[43] = t30;
-    } else {
-      t26 = $[39];
-      t27 = $[40];
-      t28 = $[41];
-      t29 = $[42];
-      t30 = $[43];
+      $[14] = color;
+      $[15] = disabled;
+      $[16] = fullWidth;
+      $[17] = props;
+      $[18] = ref;
+      $[19] = size;
+      $[20] = startIcon;
+      $[21] = t10;
+      $[22] = t11;
+      $[23] = t12;
+      $[24] = t13;
+      $[25] = t14;
+      $[26] = t15;
+      $[27] = t16;
+      $[28] = t17;
+      $[29] = t18;
+      $[30] = t19;
+      $[31] = t20;
+      $[32] = t21;
+      $[33] = t22;
+      $[34] = t23;
+      $[35] = t24;
+      $[36] = t25;
+      $[37] = t7;
+      $[38] = t8;
+      $[39] = t9;
+      $[40] = t26;
+      $[41] = t27;
+      $[42] = t28;
+      $[43] = t29;
+      $[44] = t30;
+    } else {
+      t26 = $[40];
+      t27 = $[41];
+      t28 = $[42];
+      t29 = $[43];
+      t30 = $[44];
     }
     if (t30 !== /* @__PURE__ */ Symbol.for("react.early_return_sentinel")) {
       return t30;
     }
     const t31 = props;
     let t32;
-    if ($[44] !== children || $[45] !== disabled || $[46] !== size || $[47] !== startIcon || $[48] !== t26 || $[49] !== t27 || $[50] !== t28 || $[51] !== t29 || $[52] !== t31 || $[53] !== variant) {
+    if ($[45] !== children || $[46] !== disabled || $[47] !== size || $[48] !== startIcon || $[49] !== t26 || $[50] !== t27 || $[51] !== t28 || $[52] !== t29 || $[53] !== t31 || $[54] !== variant) {
       t32 = /* @__PURE__ */ jsxRuntime.jsxs("button", { ref: t26, type: t27, onClick: t28, className: t29, disabled, "data-variant": variant, "data-size": size, ...t31, children: [
         startIcon,
         children
       ] });
-      $[44] = children;
-      $[45] = disabled;
-      $[46] = size;
-      $[47] = startIcon;
-      $[48] = t26;
-      $[49] = t27;
-      $[50] = t28;
-      $[51] = t29;
-      $[52] = t31;
-      $[53] = variant;
-      $[54] = t32;
-    } else {
-      t32 = $[54];
+      $[45] = children;
+      $[46] = disabled;
+      $[47] = size;
+      $[48] = startIcon;
+      $[49] = t26;
+      $[50] = t27;
+      $[51] = t28;
+      $[52] = t29;
+      $[53] = t31;
+      $[54] = variant;
+      $[55] = t32;
+    } else {
+      t32 = $[55];
     }
     return t32;
   }));
   ButtonInner.displayName = "Button";
   const Button = ButtonInner;
   const Card = React.forwardRef((t0, ref) => {
-    const $ = reactCompilerRuntime.c(21);
+    const $ = reactCompilerRuntime.c(23);
     let children;
     let className;
     let onClick;
+    let onKeyDownProp;
     let props;
     let style;
     if ($[0] !== t0) {
@@ -1066,64 +1124,77 @@
         className,
         onClick,
         style,
+        onKeyDown: onKeyDownProp,
         ...props
       } = t0);
       $[0] = t0;
       $[1] = children;
       $[2] = className;
       $[3] = onClick;
-      $[4] = props;
-      $[5] = style;
+      $[4] = onKeyDownProp;
+      $[5] = props;
+      $[6] = style;
     } else {
       children = $[1];
       className = $[2];
       onClick = $[3];
-      props = $[4];
-      style = $[5];
+      onKeyDownProp = $[4];
+      props = $[5];
+      style = $[6];
     }
     let t1;
-    if ($[6] !== onClick) {
+    if ($[7] !== onClick || $[8] !== onKeyDownProp) {
       t1 = (e) => {
+        onKeyDownProp?.(e);
+        if (!onClick || e.defaultPrevented) {
+          return;
+        }
+        if (e.target !== e.currentTarget) {
+          return;
+        }
         if (e.key === "Enter" || e.key === " ") {
-          onClick?.();
+          e.preventDefault();
+          onClick();
         }
       };
-      $[6] = onClick;
-      $[7] = t1;
+      $[7] = onClick;
+      $[8] = onKeyDownProp;
+      $[9] = t1;
     } else {
-      t1 = $[7];
+      t1 = $[9];
     }
-    const onKeyPress = t1;
+    const onKeyDown = t1;
     const t2 = onClick ? "button" : void 0;
     const t3 = onClick ? 0 : void 0;
     const t4 = onClick && cardClickableMixin;
     let t5;
-    if ($[8] !== className || $[9] !== t4) {
+    if ($[10] !== className || $[11] !== t4) {
       t5 = cls(cardMixin, t4, className);
-      $[8] = className;
-      $[9] = t4;
-      $[10] = t5;
+      $[10] = className;
+      $[11] = t4;
+      $[12] = t5;
     } else {
-      t5 = $[10];
+      t5 = $[12];
     }
     let t6;
-    if ($[11] !== children || $[12] !== onClick || $[13] !== onKeyPress || $[14] !== props || $[15] !== ref || $[16] !== style || $[17] !== t2 || $[18] !== t3 || $[19] !== t5) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref, onKeyPress, role: t2, tabIndex: t3, onClick, className: t5, style, ...props, children });
-      $[11] = children;
-      $[12] = onClick;
-      $[13] = onKeyPress;
-      $[14] = props;
-      $[15] = ref;
-      $[16] = style;
-      $[17] = t2;
-      $[18] = t3;
-      $[19] = t5;
-      $[20] = t6;
+    if ($[13] !== children || $[14] !== onClick || $[15] !== onKeyDown || $[16] !== props || $[17] !== ref || $[18] !== style || $[19] !== t2 || $[20] !== t3 || $[21] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref, onKeyDown, role: t2, tabIndex: t3, onClick, className: t5, style, ...props, children });
+      $[13] = children;
+      $[14] = onClick;
+      $[15] = onKeyDown;
+      $[16] = props;
+      $[17] = ref;
+      $[18] = style;
+      $[19] = t2;
+      $[20] = t3;
+      $[21] = t5;
+      $[22] = t6;
     } else {
-      t6 = $[20];
+      t6 = $[22];
     }
     return t6;
   });
+  Card.displayName = "Card";
   const containerMaxWidths = {
     xs: "max-w-xs",
     sm: "max-w-sm",
@@ -1205,7 +1276,7 @@
     const t1 = fullScreen ? "h-screen" : "h-full";
     let t2;
     if ($[7] !== outerClassName || $[8] !== t1) {
-      t2 = cls("flex flex-col flex-grow", t1, outerClassName);
+      t2 = cls("flex flex-col grow", t1, outerClassName);
       $[7] = outerClassName;
       $[8] = t1;
       $[9] = t2;
@@ -32246,7 +32317,7 @@
     return t0;
   });
   ZoomOutMapIcon.displayName = "ZoomOutMapIcon";
-  const sizeClasses$1 = {
+  const sizeClasses$2 = {
     large: "w-6 h-6 rounded flex items-center justify-center",
     medium: "w-5 h-5 rounded flex items-center justify-center",
     small: "w-4 h-4 rounded flex items-center justify-center",
@@ -32256,20 +32327,20 @@
     medium: "w-10 h-10",
     small: "w-8 h-8",
     large: "w-12 h-12 ",
-    smallest: "w-6 h-6"
+    smallest: "w-8 h-8"
   };
   const paddingClasses = {
     medium: "p-2",
     small: "p-2",
     large: "p-2",
-    smallest: ""
+    smallest: "p-2"
   };
   const colorClasses$2 = {
     primary: "bg-primary",
     secondary: "bg-secondary"
   };
   const Checkbox = React.memo((t0) => {
-    const $ = reactCompilerRuntime.c(25);
+    const $ = reactCompilerRuntime.c(27);
     const {
       id,
       checked,
@@ -32278,7 +32349,8 @@
       disabled,
       size: t3,
       onCheckedChange,
-      color: t4
+      color: t4,
+      "aria-label": ariaLabel
     } = t0;
     const indeterminate = t1 === void 0 ? false : t1;
     const padding = t2 === void 0 ? true : t2;
@@ -32287,89 +32359,109 @@
     const isChecked = indeterminate ? false : checked;
     const iconSize = size === "medium" ? 20 : size === "small" ? 16 : size === "smallest" ? 14 : 24;
     const t5 = indeterminate || isChecked;
-    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 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) {
-      t11 = cls(t7, t8, "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150", t9, t10);
+    const t6 = indeterminate ? "mixed" : isChecked;
+    const t7 = disabled ? void 0 : onCheckedChange;
+    const t8 = padding ? paddingClasses[size] : "";
+    const t9 = outerSizeClasses[size];
+    const t10 = 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 t11 = onCheckedChange ? "cursor-pointer" : "cursor-default";
+    let t12;
+    if ($[0] !== t10 || $[1] !== t11 || $[2] !== t8 || $[3] !== t9) {
+      t12 = cls(t8, t9, "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150", t10, t11);
       $[0] = t10;
-      $[1] = t7;
+      $[1] = t11;
       $[2] = t8;
       $[3] = t9;
-      $[4] = t11;
+      $[4] = t12;
     } else {
-      t11 = $[4];
+      t12 = $[4];
     }
-    const t12 = sizeClasses$1[size];
-    const t13 = disabled ? indeterminate || isChecked ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600" : indeterminate || isChecked ? colorClasses$2[color] : "bg-white dark:bg-surface-900";
-    const t14 = indeterminate || isChecked ? "text-surface-accent-100 dark:text-surface-accent-900" : "";
-    const t15 = disabled ? "border-transparent" : indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200";
-    let t16;
-    if ($[5] !== t12 || $[6] !== t13 || $[7] !== t14 || $[8] !== t15) {
-      t16 = cls("border-2 relative transition-colors ease-in-out duration-150", t12, t13, t14, t15);
-      $[5] = t12;
-      $[6] = t13;
-      $[7] = t14;
-      $[8] = t15;
-      $[9] = t16;
+    const t13 = sizeClasses$2[size];
+    const t14 = disabled ? indeterminate || isChecked ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600" : indeterminate || isChecked ? colorClasses$2[color] : "bg-white dark:bg-surface-900";
+    const t15 = indeterminate || isChecked ? "text-surface-accent-100 dark:text-surface-accent-900" : "";
+    const t16 = disabled ? "border-transparent" : indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-500";
+    let t17;
+    if ($[5] !== t13 || $[6] !== t14 || $[7] !== t15 || $[8] !== t16) {
+      t17 = cls("border-2 relative transition-colors ease-in-out duration-150", t13, t14, t15, t16);
+      $[5] = t13;
+      $[6] = t14;
+      $[7] = t15;
+      $[8] = t16;
+      $[9] = t17;
     } else {
-      t16 = $[9];
+      t17 = $[9];
     }
-    let t17;
+    let t18;
     if ($[10] !== iconSize || $[11] !== indeterminate) {
-      t17 = /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { asChild: true, children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(RemoveIcon, { size: iconSize, className: "absolute" }) : /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: iconSize, className: "absolute" }) });
+      t18 = /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { asChild: true, children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(RemoveIcon, { size: iconSize, className: "absolute" }) : /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: iconSize, className: "absolute" }) });
       $[10] = iconSize;
       $[11] = indeterminate;
-      $[12] = t17;
+      $[12] = t18;
     } else {
-      t17 = $[12];
-    }
-    let t18;
-    if ($[13] !== t16 || $[14] !== t17) {
-      t18 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t16, children: t17 });
-      $[13] = t16;
-      $[14] = t17;
-      $[15] = t18;
-    } else {
-      t18 = $[15];
+      t18 = $[12];
     }
     let t19;
-    if ($[16] !== t11 || $[17] !== t18) {
-      t19 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t11, children: t18 });
-      $[16] = t11;
-      $[17] = t18;
-      $[18] = t19;
+    if ($[13] !== t17 || $[14] !== t18) {
+      t19 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t17, children: t18 });
+      $[13] = t17;
+      $[14] = t18;
+      $[15] = t19;
     } else {
-      t19 = $[18];
+      t19 = $[15];
     }
     let t20;
-    if ($[19] !== disabled || $[20] !== id || $[21] !== t19 || $[22] !== t5 || $[23] !== t6) {
-      t20 = /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Root, { id, checked: t5, disabled, onCheckedChange: t6, children: t19 });
-      $[19] = disabled;
-      $[20] = id;
-      $[21] = t19;
-      $[22] = t5;
-      $[23] = t6;
-      $[24] = t20;
+    if ($[16] !== t12 || $[17] !== t19) {
+      t20 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t12, children: t19 });
+      $[16] = t12;
+      $[17] = t19;
+      $[18] = t20;
+    } else {
+      t20 = $[18];
+    }
+    let t21;
+    if ($[19] !== ariaLabel || $[20] !== disabled || $[21] !== id || $[22] !== t20 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7) {
+      t21 = /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Root, { id, checked: t5, disabled, "aria-label": ariaLabel, "aria-checked": t6, onCheckedChange: t7, children: t20 });
+      $[19] = ariaLabel;
+      $[20] = disabled;
+      $[21] = id;
+      $[22] = t20;
+      $[23] = t5;
+      $[24] = t6;
+      $[25] = t7;
+      $[26] = t21;
     } else {
-      t20 = $[24];
+      t21 = $[26];
     }
-    return t20;
+    return t21;
   });
+  Checkbox.displayName = "Checkbox";
   const sizeClassNames = {
+    smallest: "px-1.5 py-px text-[10px]",
     small: "px-2 py-0.5 text-sm",
     medium: "px-3 py-1 text-sm",
     large: "px-4 py-1.5 text-sm"
   };
+  function isDarkMode() {
+    return typeof document !== "undefined" && document.documentElement.classList.contains("dark");
+  }
+  function getRgba(hex, alpha) {
+    if (!hex || !hex.startsWith("#")) return hex;
+    let color = hex.slice(1);
+    if (color.length === 3) {
+      color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
+    }
+    const r = parseInt(color.slice(0, 2), 16);
+    const g = parseInt(color.slice(2, 4), 16);
+    const b = parseInt(color.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
   const Chip = React.forwardRef(function Chip2(t0, ref) {
-    const $ = reactCompilerRuntime.c(19);
+    const $ = reactCompilerRuntime.c(25);
     const {
       children,
       colorScheme,
       error,
+      outlined,
       onClick,
       icon,
       size: t1,
@@ -32386,56 +32478,180 @@
       t2 = $[1];
     }
     const usedColorScheme = t2;
-    const t3 = onClick ? "cursor-pointer hover:bg-surface-accent-300 hover:dark:bg-surface-accent-700" : "";
-    const t4 = sizeClassNames[size];
-    const t5 = error || !usedColorScheme ? "bg-surface-accent-200 dark:bg-surface-accent-800 text-surface-accent-800 dark:text-white" : "";
-    const t6 = error ? "text-red-500 dark:text-red-400" : "";
+    const dark = isDarkMode();
+    const hasScheme = Boolean(error || usedColorScheme);
+    let textColor = "";
+    let bgColor = "";
+    let border = "";
+    if (error) {
+      textColor = dark ? "#f87171" : "#dc2626";
+    } else {
+      if (usedColorScheme) {
+        textColor = dark && usedColorScheme.darkText ? usedColorScheme.darkText : usedColorScheme.text;
+      }
+    }
+    if (hasScheme) {
+      if (outlined) {
+        let t32;
+        if ($[2] !== textColor) {
+          t32 = getRgba(textColor, dark ? 0.1 : 0.06);
+          $[2] = textColor;
+          $[3] = t32;
+        } else {
+          t32 = $[3];
+        }
+        bgColor = t32;
+        border = `1px solid ${getRgba(textColor, dark ? 0.2 : 0.14)}`;
+      } else {
+        if (error) {
+          bgColor = dark ? "rgba(220, 38, 38, 0.15)" : "rgba(239, 68, 68, 0.1)";
+          border = `1px solid ${dark ? "rgba(220, 38, 38, 0.3)" : "rgba(239, 68, 68, 0.2)"}`;
+        } else {
+          if (usedColorScheme) {
+            bgColor = dark && usedColorScheme.darkColor ? usedColorScheme.darkColor : usedColorScheme.color;
+          }
+        }
+      }
+    }
+    const t3 = !hasScheme && "bg-surface-accent-200 dark:bg-surface-accent-800 text-surface-accent-800 dark:text-white";
+    const t4 = !hasScheme && outlined && "bg-transparent dark:bg-transparent border border-surface-accent-300 dark:border-surface-accent-700";
+    const t5 = onClick ? "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5" : "";
+    const t6 = sizeClassNames[size];
     let t7;
-    if ($[2] !== className || $[3] !== t3 || $[4] !== t4 || $[5] !== t5 || $[6] !== t6) {
-      t7 = cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1", "text-ellipsis", "items-center", t3, t4, t5, t6, className);
-      $[2] = className;
-      $[3] = t3;
-      $[4] = t4;
-      $[5] = t5;
-      $[6] = t6;
-      $[7] = t7;
+    if ($[4] !== className || $[5] !== t3 || $[6] !== t4 || $[7] !== t5 || $[8] !== t6) {
+      t7 = cls("rounded-lg max-w-full w-max h-fit font-medium inline-flex gap-1", "text-ellipsis", "items-center", "transition-colors duration-150", t3, t4, t5, t6, className);
+      $[4] = className;
+      $[5] = t3;
+      $[6] = t4;
+      $[7] = t5;
+      $[8] = t6;
+      $[9] = t7;
     } else {
-      t7 = $[7];
+      t7 = $[9];
     }
-    const t8 = error || !usedColorScheme ? void 0 : usedColorScheme.color;
-    const t9 = error || !usedColorScheme ? void 0 : usedColorScheme.text;
-    let t10;
-    if ($[8] !== style || $[9] !== t8 || $[10] !== t9) {
-      t10 = {
-        backgroundColor: t8,
-        color: t9,
+    let t8;
+    if ($[10] !== bgColor || $[11] !== border || $[12] !== hasScheme || $[13] !== textColor) {
+      t8 = hasScheme ? {
+        backgroundColor: bgColor,
+        color: textColor,
+        border: border || void 0
+      } : {};
+      $[10] = bgColor;
+      $[11] = border;
+      $[12] = hasScheme;
+      $[13] = textColor;
+      $[14] = t8;
+    } else {
+      t8 = $[14];
+    }
+    let t9;
+    if ($[15] !== style || $[16] !== t8) {
+      t9 = {
+        ...t8,
         overflow: "hidden",
         ...style
       };
-      $[8] = style;
-      $[9] = t8;
-      $[10] = t9;
-      $[11] = t10;
+      $[15] = style;
+      $[16] = t8;
+      $[17] = t9;
     } else {
-      t10 = $[11];
+      t9 = $[17];
     }
-    let t11;
-    if ($[12] !== children || $[13] !== icon || $[14] !== onClick || $[15] !== ref || $[16] !== t10 || $[17] !== t7) {
-      t11 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: t7, onClick, style: t10, children: [
+    let t10;
+    if ($[18] !== children || $[19] !== icon || $[20] !== onClick || $[21] !== ref || $[22] !== t7 || $[23] !== t9) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: t7, onClick, style: t9, children: [
+        icon,
+        children
+      ] });
+      $[18] = children;
+      $[19] = icon;
+      $[20] = onClick;
+      $[21] = ref;
+      $[22] = t7;
+      $[23] = t9;
+      $[24] = t10;
+    } else {
+      t10 = $[24];
+    }
+    return t10;
+  });
+  const sizeClasses$1 = {
+    small: "px-2 py-0.5 text-xs",
+    medium: "px-2.5 py-1 text-xs"
+  };
+  const FilterChip = React.forwardRef(function FilterChip2(t0, ref) {
+    const $ = reactCompilerRuntime.c(22);
+    let children;
+    let className;
+    let icon;
+    let onClick;
+    let rest;
+    let t1;
+    let t2;
+    let t3;
+    if ($[0] !== t0) {
+      ({
         children,
-        icon
+        active: t1,
+        onClick,
+        icon,
+        size: t2,
+        className,
+        disabled: t3,
+        ...rest
+      } = t0);
+      $[0] = t0;
+      $[1] = children;
+      $[2] = className;
+      $[3] = icon;
+      $[4] = onClick;
+      $[5] = rest;
+      $[6] = t1;
+      $[7] = t2;
+      $[8] = t3;
+    } else {
+      children = $[1];
+      className = $[2];
+      icon = $[3];
+      onClick = $[4];
+      rest = $[5];
+      t1 = $[6];
+      t2 = $[7];
+      t3 = $[8];
+    }
+    const active = t1 === void 0 ? false : t1;
+    const size = t2 === void 0 ? "medium" : t2;
+    const disabled = t3 === void 0 ? false : t3;
+    const t4 = sizeClasses$1[size];
+    let t5;
+    if ($[9] !== active || $[10] !== className || $[11] !== disabled || $[12] !== t4) {
+      t5 = cls("inline-flex items-center gap-1 rounded-full", "font-medium whitespace-nowrap select-none shrink-0", "transition-colors duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", t4, active ? "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]" : cls("bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark", !disabled && "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5"), disabled && "opacity-50 cursor-not-allowed", className);
+      $[9] = active;
+      $[10] = className;
+      $[11] = disabled;
+      $[12] = t4;
+      $[13] = t5;
+    } else {
+      t5 = $[13];
+    }
+    let t6;
+    if ($[14] !== children || $[15] !== disabled || $[16] !== icon || $[17] !== onClick || $[18] !== ref || $[19] !== rest || $[20] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsxs("button", { ref, type: "button", onClick, disabled, className: t5, ...rest, children: [
+        icon,
+        children
       ] });
-      $[12] = children;
-      $[13] = icon;
-      $[14] = onClick;
-      $[15] = ref;
-      $[16] = t10;
-      $[17] = t7;
-      $[18] = t11;
+      $[14] = children;
+      $[15] = disabled;
+      $[16] = icon;
+      $[17] = onClick;
+      $[18] = ref;
+      $[19] = rest;
+      $[20] = t5;
+      $[21] = t6;
     } else {
-      t11 = $[18];
+      t6 = $[21];
     }
-    return t11;
+    return t6;
   });
   const Tooltip = React.forwardRef((t0, ref) => {
     const $ = reactCompilerRuntime.c(47);
@@ -32512,7 +32728,7 @@
     const side = t1 === void 0 ? "bottom" : t1;
     const delayDuration = t2 === void 0 ? 200 : t2;
     const asChild = t3 === void 0 ? false : t3;
-    useInjectStyles("Tooltip", styles);
+    useInjectStyles("Tooltip", styles$1);
     const contextContainer = usePortalContainer();
     const finalContainer = container ?? contextContainer ?? void 0;
     if (!title) {
@@ -32597,7 +32813,7 @@
     }
     return t10;
   });
-  const styles = `
+  const styles$1 = `
 
 .TooltipContent {
   animation-duration: 220ms;
@@ -32743,13 +32959,13 @@
     }
     return t7;
   }
-  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 buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-[1.04] active:scale-95 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 colorClasses$1 = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-300";
   const sizeClasses = {
     medium: "w-10 !h-10 min-w-10 min-h-10",
     small: "w-8 !h-8 min-w-8 min-h-8",
-    smallest: "w-6 !h-6 min-w-6 min-h-6",
+    smallest: "w-7 !h-7 min-w-7 min-h-7",
     large: "w-12 !h-12 min-w-12 min-h-12"
   };
   const shapeClasses = {
@@ -32757,7 +32973,7 @@
     square: "rounded-md"
   };
   const IconButtonInner = (t0, ref) => {
-    const $ = reactCompilerRuntime.c(23);
+    const $ = reactCompilerRuntime.c(27);
     let children;
     let className;
     let component;
@@ -32803,42 +33019,51 @@
     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 bg-surface-accent-200/50 dark:bg-surface-950 dark:bg-opacity-50 dark:bg-surface-950/50";
+    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-50 dark:bg-surface-900/50";
     const Component = component || "button";
-    const t4 = disabled ? "opacity-50 pointer-events-none" : "cursor-pointer";
-    const t5 = toggled ? "outline outline-2 outline-primary" : "";
-    const t6 = shapeClasses[shape];
-    const t7 = sizeClasses[size];
-    let t8;
-    if ($[10] !== bgClasses || $[11] !== className || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
-      t8 = cls(t4, t5, "text-inherit dark:text-inherit", colorClasses$1, bgClasses, baseClasses, buttonClasses, t6, t7, className);
+    const isNativeButton = Component === "button";
+    const t4 = isNativeButton ? "button" : void 0;
+    const t5 = isNativeButton ? void 0 : "button";
+    const t6 = disabled || void 0;
+    const t7 = disabled ? -1 : void 0;
+    const t8 = disabled ? "opacity-50 pointer-events-none" : "cursor-pointer";
+    const t9 = toggled ? "outline outline-2 outline-primary" : "";
+    const t10 = shapeClasses[shape];
+    const t11 = sizeClasses[size];
+    let t12;
+    if ($[10] !== bgClasses || $[11] !== className || $[12] !== t10 || $[13] !== t11 || $[14] !== t8 || $[15] !== t9) {
+      t12 = cls(t8, t9, "text-inherit dark:text-inherit", colorClasses$1, bgClasses, baseClasses, buttonClasses, t10, t11, className);
       $[10] = bgClasses;
       $[11] = className;
-      $[12] = t4;
-      $[13] = t5;
-      $[14] = t6;
-      $[15] = t7;
-      $[16] = t8;
+      $[12] = t10;
+      $[13] = t11;
+      $[14] = t8;
+      $[15] = t9;
+      $[16] = t12;
     } else {
-      t8 = $[16];
+      t12 = $[16];
     }
-    let t9;
-    if ($[17] !== Component || $[18] !== children || $[19] !== props || $[20] !== ref || $[21] !== t8) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsx(Component, { type: "button", ref, ...props, className: t8, children });
+    let t13;
+    if ($[17] !== Component || $[18] !== children || $[19] !== props || $[20] !== ref || $[21] !== t12 || $[22] !== t4 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7) {
+      t13 = /* @__PURE__ */ jsxRuntime.jsx(Component, { type: t4, role: t5, "aria-disabled": t6, tabIndex: t7, ref, ...props, className: t12, children });
       $[17] = Component;
       $[18] = children;
       $[19] = props;
       $[20] = ref;
-      $[21] = t8;
-      $[22] = t9;
+      $[21] = t12;
+      $[22] = t4;
+      $[23] = t5;
+      $[24] = t6;
+      $[25] = t7;
+      $[26] = t13;
     } else {
-      t9 = $[22];
+      t13 = $[26];
     }
-    return t9;
+    return t13;
   };
   const IconButton = React.forwardRef(IconButtonInner);
   const defaultClasses = {
-    root: "origin-left transition-transform block whitespace-nowrap overflow-hidden text-overflow-ellipsis max-w-full",
+    root: "origin-left transition-transform block whitespace-nowrap overflow-hidden text-ellipsis max-w-full",
     shrink: "transform translate-y-[2px] scale-75 translate-x-[12px]",
     expanded: "translate-x-[16px] top-0 transform translate-y-[16px] scale-100"
   };
@@ -32869,7 +33094,7 @@
         [defaultClasses.shrink]: shrink,
         [defaultClasses.expanded]: t0
       }, className);
-      t1 = cls("text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70", defaultBorderMixin, computedClassName);
+      t1 = cls("text-sm font-medium peer-disabled:cursor-not-allowed", defaultBorderMixin, computedClassName);
       $[4] = className;
       $[5] = shrink;
       $[6] = t0;
@@ -33250,7 +33475,7 @@
     full: "max-w-full w-full"
   };
   const Dialog = (t0) => {
-    const $ = reactCompilerRuntime.c(45);
+    const $ = reactCompilerRuntime.c(46);
     const {
       open,
       onOpenChange,
@@ -33268,7 +33493,8 @@
       onPointerDownOutside,
       onInteractOutside,
       disableInitialFocus: t5,
-      portalContainer
+      portalContainer,
+      "aria-describedby": ariaDescribedby
     } = t0;
     const fullWidth = t1 === void 0 ? true : t1;
     const scrollable = t2 === void 0 ? true : t2;
@@ -33289,7 +33515,7 @@
           return () => clearTimeout(timeout);
         } else {
           setDisplayed(true);
-          return _temp$4;
+          return _temp$5;
         }
       };
       t7 = [open];
@@ -33313,7 +33539,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 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");
+      t11 = cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 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 {
@@ -33355,16 +33581,16 @@
     }
     let t16;
     if ($[15] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t16 = cls("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out");
+      t16 = cls("relative h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out");
       $[15] = t16;
     } else {
       t16 = $[15];
     }
     const t17 = fullWidth && !fullScreen ? "w-11/12" : void 0;
     const t18 = fullHeight && !fullScreen ? "h-full" : void 0;
-    const t19 = fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl";
+    const t19 = fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-lg";
     const t20 = scrollable && "overflow-y-auto";
-    const t21 = displayed && open ? "opacity-100" : "opacity-0";
+    const t21 = displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]";
     const t22 = maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0;
     let t23;
     if ($[16] !== className || $[17] !== t17 || $[18] !== t18 || $[19] !== t19 || $[20] !== t20 || $[21] !== t21 || $[22] !== t22) {
@@ -33390,53 +33616,54 @@
       t24 = $[26];
     }
     let t25;
-    if ($[27] !== onEscapeKeyDown || $[28] !== onInteractOutside || $[29] !== onPointerDownOutside || $[30] !== t15 || $[31] !== t24) {
-      t25 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Content, { onEscapeKeyDown, onOpenAutoFocus: t15, onPointerDownOutside, onInteractOutside, className: t16, children: t24 });
-      $[27] = onEscapeKeyDown;
-      $[28] = onInteractOutside;
-      $[29] = onPointerDownOutside;
-      $[30] = t15;
-      $[31] = t24;
-      $[32] = t25;
-    } else {
-      t25 = $[32];
+    if ($[27] !== ariaDescribedby || $[28] !== onEscapeKeyDown || $[29] !== onInteractOutside || $[30] !== onPointerDownOutside || $[31] !== t15 || $[32] !== t24) {
+      t25 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Content, { onEscapeKeyDown, onOpenAutoFocus: t15, onPointerDownOutside, onInteractOutside, "aria-describedby": ariaDescribedby, className: t16, children: t24 });
+      $[27] = ariaDescribedby;
+      $[28] = onEscapeKeyDown;
+      $[29] = onInteractOutside;
+      $[30] = onPointerDownOutside;
+      $[31] = t15;
+      $[32] = t24;
+      $[33] = t25;
+    } else {
+      t25 = $[33];
     }
     let t26;
-    if ($[33] !== t14 || $[34] !== t25 || $[35] !== t9) {
+    if ($[34] !== t14 || $[35] !== t25 || $[36] !== t9) {
       t26 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t9, children: [
         t14,
         t25
       ] });
-      $[33] = t14;
-      $[34] = t25;
-      $[35] = t9;
-      $[36] = t26;
+      $[34] = t14;
+      $[35] = t25;
+      $[36] = t9;
+      $[37] = t26;
     } else {
-      t26 = $[36];
+      t26 = $[37];
     }
     let t27;
-    if ($[37] !== finalContainer || $[38] !== t26) {
+    if ($[38] !== finalContainer || $[39] !== t26) {
       t27 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { container: finalContainer, children: t26 });
-      $[37] = finalContainer;
-      $[38] = t26;
-      $[39] = t27;
+      $[38] = finalContainer;
+      $[39] = t26;
+      $[40] = t27;
     } else {
-      t27 = $[39];
+      t27 = $[40];
     }
     let t28;
-    if ($[40] !== modal || $[41] !== onOpenChange || $[42] !== t27 || $[43] !== t8) {
+    if ($[41] !== modal || $[42] !== onOpenChange || $[43] !== t27 || $[44] !== t8) {
       t28 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: t8, modal, onOpenChange, children: t27 });
-      $[40] = modal;
-      $[41] = onOpenChange;
-      $[42] = t27;
-      $[43] = t8;
-      $[44] = t28;
+      $[41] = modal;
+      $[42] = onOpenChange;
+      $[43] = t27;
+      $[44] = t8;
+      $[45] = t28;
     } else {
-      t28 = $[44];
+      t28 = $[45];
     }
     return t28;
   };
-  function _temp$4() {
+  function _temp$5() {
   }
   function DialogActions(t0) {
     const $ = reactCompilerRuntime.c(7);
@@ -33589,7 +33816,7 @@
     return title;
   }
   function ExpandablePanel(t0) {
-    const $ = reactCompilerRuntime.c(40);
+    const $ = reactCompilerRuntime.c(41);
     const {
       title,
       children,
@@ -33675,7 +33902,7 @@
     const t7 = !invisible && defaultBorderMixin + " border";
     let t8;
     if ($[6] !== className || $[7] !== t7) {
-      t8 = cls(t7, "rounded-md", "w-full", className);
+      t8 = cls(t7, "rounded-lg", "w-full", className);
       $[6] = className;
       $[7] = t7;
       $[8] = t8;
@@ -33699,7 +33926,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 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, "cursor-pointer");
+      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 active:bg-surface-accent-300/50 dark:active:bg-surface-700/50", t10, t11, "transition-all duration-200", t12, t13, titleClassName, "cursor-pointer");
       $[11] = t10;
       $[12] = t11;
       $[13] = t12;
@@ -33727,68 +33954,69 @@
       t17 = $[20];
     }
     let t18;
-    if ($[21] !== t14 || $[22] !== t17 || $[23] !== title) {
-      t18 = /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t14, role: "button", tabIndex: 0, children: [
+    if ($[21] !== open || $[22] !== t14 || $[23] !== t17 || $[24] !== title) {
+      t18 = /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t14, role: "button", tabIndex: 0, "aria-expanded": open, children: [
         title,
         t17
       ] }) });
-      $[21] = t14;
-      $[22] = t17;
-      $[23] = title;
-      $[24] = t18;
+      $[21] = open;
+      $[22] = t14;
+      $[23] = t17;
+      $[24] = title;
+      $[25] = t18;
     } else {
-      t18 = $[24];
+      t18 = $[25];
     }
     let t19;
-    if ($[25] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    if ($[26] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
       t19 = cls("CollapsibleContent");
-      $[25] = t19;
+      $[26] = t19;
     } else {
-      t19 = $[25];
+      t19 = $[26];
     }
     const t20 = allowOverflow ? "visible" : "hidden";
     let t21;
-    if ($[26] !== t20) {
+    if ($[27] !== t20) {
       t21 = {
         overflow: t20
       };
-      $[26] = t20;
-      $[27] = t21;
+      $[27] = t20;
+      $[28] = t21;
     } else {
-      t21 = $[27];
+      t21 = $[28];
     }
     let t22;
-    if ($[28] !== children || $[29] !== innerClassName) {
+    if ($[29] !== children || $[30] !== innerClassName) {
       t22 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerClassName, children });
-      $[28] = children;
-      $[29] = innerClassName;
-      $[30] = t22;
+      $[29] = children;
+      $[30] = innerClassName;
+      $[31] = t22;
     } else {
-      t22 = $[30];
+      t22 = $[31];
     }
     let t23;
-    if ($[31] !== t21 || $[32] !== t22) {
+    if ($[32] !== t21 || $[33] !== t22) {
       t23 = /* @__PURE__ */ jsxRuntime.jsx(Collapsible__namespace.Content, { className: t19, style: t21, children: t22 });
-      $[31] = t21;
-      $[32] = t22;
-      $[33] = t23;
+      $[32] = t21;
+      $[33] = t22;
+      $[34] = t23;
     } else {
-      t23 = $[33];
+      t23 = $[34];
     }
     let t24;
-    if ($[34] !== open || $[35] !== t18 || $[36] !== t23 || $[37] !== t8 || $[38] !== t9) {
+    if ($[35] !== open || $[36] !== t18 || $[37] !== t23 || $[38] !== t8 || $[39] !== t9) {
       t24 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(Collapsible__namespace.Root, { className: t8, open, onOpenChange: t9, children: [
         t18,
         t23
       ] }) });
-      $[34] = open;
-      $[35] = t18;
-      $[36] = t23;
-      $[37] = t8;
-      $[38] = t9;
-      $[39] = t24;
+      $[35] = open;
+      $[36] = t18;
+      $[37] = t23;
+      $[38] = t8;
+      $[39] = t9;
+      $[40] = t24;
     } else {
-      t24 = $[39];
+      t24 = $[40];
     }
     return t24;
   }
@@ -33939,7 +34167,7 @@
     const t2 = colorClasses[mode];
     let t3;
     if ($[0] !== t2) {
-      t3 = cls("my-3 py-2 px-4 rounded", t2);
+      t3 = cls("my-3 py-2 px-4 rounded-xs", t2);
       $[0] = t2;
       $[1] = t3;
     } else {
@@ -33984,7 +34212,7 @@
     const t2 = onClick && "hover:cursor-pointer hover:bg-surface-200 dark:hover:bg-surface-800";
     let t3;
     if ($[5] !== className || $[6] !== t1 || $[7] !== t2) {
-      t3 = cls("text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70", t1, t2, defaultBorderMixin, className);
+      t3 = cls("text-sm font-medium peer-disabled:cursor-not-allowed", t1, t2, defaultBorderMixin, className);
       $[5] = className;
       $[6] = t1;
       $[7] = t2;
@@ -34244,6 +34472,7 @@
     }
     return t9;
   });
+  MenuItem.displayName = "MenuItem";
   function Menubar(t0) {
     const $ = reactCompilerRuntime.c(6);
     const {
@@ -34901,7 +35130,7 @@
     if (orientation === "horizontal") {
       let t1;
       if ($[0] !== 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);
+        t1 = cls("dark:bg-surface-700 bg-surface-200 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 {
@@ -34920,7 +35149,7 @@
     } else {
       let t1;
       if ($[5] !== 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);
+        t1 = cls("dark:bg-surface-700 bg-surface-200 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 {
@@ -35052,7 +35281,7 @@
     let t12;
     let t13;
     if ($[9] !== children) {
-      t13 = children ? React.Children.map(children, _temp$3)?.filter(Boolean) ?? [] : [];
+      t13 = children ? React.Children.map(children, _temp$4)?.filter(Boolean) ?? [] : [];
       $[9] = children;
       $[10] = t13;
     } else {
@@ -35598,7 +35827,7 @@
     }
     return t7;
   });
-  function _temp$3(child) {
+  function _temp$4(child) {
     if (React__namespace.isValidElement(child)) {
       return child.props.value;
     }
@@ -35698,7 +35927,7 @@
     }
     let t1;
     if ($[3] !== className) {
-      t1 = cls("aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className);
+      t1 = cls("aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className);
       $[3] = className;
       $[4] = t1;
     } else {
@@ -35938,6 +36167,7 @@
       onClick,
       onTextSearch,
       placeholder: t1,
+      initialValue,
       expandable: t2,
       size: t3,
       innerClassName,
@@ -35950,7 +36180,7 @@
     const placeholder = t1 === void 0 ? "Search" : t1;
     const expandable = t2 === void 0 ? false : t2;
     const size = t3 === void 0 ? "medium" : t3;
-    const [searchText, setSearchText] = React.useState("");
+    const [searchText, setSearchText] = React.useState(initialValue ?? "");
     const [active, setActive] = React.useState(false);
     const deferredValues = useDebounceValue(searchText, 200);
     let t4;
@@ -36486,7 +36716,7 @@
           }
           const itemValue = child_0.props.value;
           const isSelected = String(value) === String(itemValue);
-          return /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Item, { value: String(itemValue), onMouseDown: _temp$2, onSelect: () => handleSelect(String(itemValue)), className: cls("flex flex-row items-center gap-1.5", isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "", "cursor-pointer", "m-0.5", "ring-offset-transparent", "p-1.5 rounded", "aria-[selected=true]:outline-none", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "text-surface-accent-700 dark:text-surface-accent-300", child_0.props.className), children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Item, { value: String(itemValue), onMouseDown: _temp$3, onSelect: () => handleSelect(String(itemValue)), className: cls("flex flex-row items-center gap-1.5", isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "", "cursor-pointer", "m-0.5", "ring-offset-transparent", "p-1.5 rounded", "aria-[selected=true]:outline-none", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "text-surface-accent-700 dark:text-surface-accent-300", child_0.props.className), children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("w-4 h-4 flex items-center justify-center flex-shrink-0", isSelected ? "text-primary" : "text-transparent"), children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: 14 }) }),
             child_0.props.children ?? child_0.props.value
           ] }, String(itemValue));
@@ -36589,12 +36819,12 @@
   function SearchableSelectItem(_props) {
     return null;
   }
-  function _temp$2(e_0) {
+  function _temp$3(e_0) {
     e_0.preventDefault();
     e_0.stopPropagation();
   }
   const Select = React.forwardRef((t0, ref) => {
-    const $ = reactCompilerRuntime.c(121);
+    const $ = reactCompilerRuntime.c(123);
     let children;
     let className;
     let disabled;
@@ -36821,7 +37051,7 @@
     const t18 = !fullWidth;
     let t19;
     if ($[43] !== className || $[44] !== fullWidth || $[45] !== t12 || $[46] !== t13 || $[47] !== t14 || $[48] !== t15 || $[49] !== t16 || $[50] !== t17 || $[51] !== t18) {
-      t19 = cls("select-none rounded-md text-sm", t12, t13, "relative flex items-center", className, {
+      t19 = cls("select-none rounded-lg text-sm", t12, t13, "relative flex items-center", className, {
         "min-h-[28px]": t14,
         "min-h-[32px]": t15,
         "min-h-[44px]": t16,
@@ -36842,13 +37072,15 @@
     } else {
       t19 = $[52];
     }
-    let t20;
+    const t20 = typeof label === "string" ? label : typeof renderValue === "string" ? renderValue : "Select an option";
+    const t21 = error || void 0;
+    let t22;
     if ($[53] !== disabled || $[54] !== error || $[55] !== fullWidth || $[56] !== inputClassName || $[57] !== padding || $[58] !== size) {
-      t20 = cls("h-full", padding ? {
+      t22 = cls("h-full", padding ? {
         "px-4": size === "large",
         "px-3": size === "medium",
         "px-2": size === "small" || size === "smallest"
-      } : "", "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", {
+      } : "", "outline-hidden focus:outline-hidden", "outline-none focus:outline-none", "select-none rounded-lg 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-[44px]": size === "medium",
@@ -36862,196 +37094,198 @@
       $[56] = inputClassName;
       $[57] = padding;
       $[58] = size;
-      $[59] = t20;
+      $[59] = t22;
     } else {
-      t20 = $[59];
+      t22 = $[59];
     }
-    const t21 = size === "smallest";
-    const t22 = size === "small";
-    const t23 = size === "medium";
-    const t24 = size === "large";
-    let t25;
-    if ($[60] !== t21 || $[61] !== t22 || $[62] !== t23 || $[63] !== t24) {
-      t25 = cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", {
-        "min-h-[28px]": t21,
-        "min-h-[32px]": t22,
-        "min-h-[44px]": t23,
-        "min-h-[64px]": t24
+    const t23 = size === "smallest";
+    const t24 = size === "small";
+    const t25 = size === "medium";
+    const t26 = size === "large";
+    let t27;
+    if ($[60] !== t23 || $[61] !== t24 || $[62] !== t25 || $[63] !== t26) {
+      t27 = cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", {
+        "min-h-[28px]": t23,
+        "min-h-[32px]": t24,
+        "min-h-[44px]": t25,
+        "min-h-[64px]": t26
       });
-      $[60] = t21;
-      $[61] = t22;
-      $[62] = t23;
-      $[63] = t24;
-      $[64] = t25;
+      $[60] = t23;
+      $[61] = t24;
+      $[62] = t25;
+      $[63] = t26;
+      $[64] = t27;
     } else {
-      t25 = $[64];
+      t27 = $[64];
     }
-    let t26;
+    let t28;
     if ($[65] !== displayChildren || $[66] !== hasValue || $[67] !== placeholder || $[68] !== renderValue || $[69] !== value) {
-      t26 = hasValue && value !== void 0 && renderValue ? renderValue(value) : displayChildren || placeholder;
+      t28 = hasValue && value !== void 0 && renderValue ? renderValue(value) : displayChildren || placeholder;
       $[65] = displayChildren;
       $[66] = hasValue;
       $[67] = placeholder;
       $[68] = renderValue;
       $[69] = value;
-      $[70] = t26;
+      $[70] = t28;
     } else {
-      t26 = $[70];
+      t28 = $[70];
     }
-    let t27;
-    if ($[71] !== placeholder || $[72] !== t26) {
-      t27 = /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { onClick: _temp$1, placeholder, className: "w-full", children: t26 });
+    let t29;
+    if ($[71] !== placeholder || $[72] !== t28) {
+      t29 = /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { onClick: _temp$2, placeholder, className: "w-full", children: t28 });
       $[71] = placeholder;
-      $[72] = t26;
-      $[73] = t27;
+      $[72] = t28;
+      $[73] = t29;
     } else {
-      t27 = $[73];
+      t29 = $[73];
     }
-    let t28;
-    if ($[74] !== ref || $[75] !== t25 || $[76] !== t27) {
-      t28 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: t25, children: t27 });
+    let t30;
+    if ($[74] !== ref || $[75] !== t27 || $[76] !== t29) {
+      t30 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: t27, children: t29 });
       $[74] = ref;
-      $[75] = t25;
-      $[76] = t27;
-      $[77] = t28;
+      $[75] = t27;
+      $[76] = t29;
+      $[77] = t30;
     } else {
-      t28 = $[77];
+      t30 = $[77];
     }
-    const t29 = size === "large" ? "medium" : "small";
-    const t30 = open ? "rotate-180" : "";
-    const t31 = size === "large";
-    const t32 = size === "medium" || size === "small";
-    let t33;
-    if ($[78] !== t30 || $[79] !== t31 || $[80] !== t32) {
-      t33 = cls("transition", t30, {
-        "px-2": t31,
-        "px-1": t32
+    const t31 = size === "large" ? "medium" : "small";
+    const t32 = open ? "rotate-180" : "";
+    const t33 = size === "large";
+    const t34 = size === "medium" || size === "small";
+    let t35;
+    if ($[78] !== t32 || $[79] !== t33 || $[80] !== t34) {
+      t35 = cls("transition", t32, {
+        "px-2": t33,
+        "px-1": t34
       });
-      $[78] = t30;
-      $[79] = t31;
-      $[80] = t32;
-      $[81] = t33;
+      $[78] = t32;
+      $[79] = t33;
+      $[80] = t34;
+      $[81] = t35;
     } else {
-      t33 = $[81];
+      t35 = $[81];
     }
-    let t34;
-    if ($[82] !== t29 || $[83] !== t33) {
-      t34 = /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowDownIcon, { size: t29, className: t33 }) });
-      $[82] = t29;
-      $[83] = t33;
-      $[84] = t34;
+    let t36;
+    if ($[82] !== t31 || $[83] !== t35) {
+      t36 = /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowDownIcon, { size: t31, className: t35 }) });
+      $[82] = t31;
+      $[83] = t35;
+      $[84] = t36;
     } else {
-      t34 = $[84];
+      t36 = $[84];
     }
-    let t35;
-    if ($[85] !== id || $[86] !== inputRef || $[87] !== t20 || $[88] !== t28 || $[89] !== t34) {
-      t35 = /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Trigger, { ref: inputRef, id, asChild: false, type: "button", className: t20, children: [
-        t28,
-        t34
+    let t37;
+    if ($[85] !== id || $[86] !== inputRef || $[87] !== t20 || $[88] !== t21 || $[89] !== t22 || $[90] !== t30 || $[91] !== t36) {
+      t37 = /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Trigger, { ref: inputRef, id, asChild: false, type: "button", "aria-label": t20, "aria-invalid": t21, className: t22, children: [
+        t30,
+        t36
       ] });
       $[85] = id;
       $[86] = inputRef;
       $[87] = t20;
-      $[88] = t28;
-      $[89] = t34;
-      $[90] = t35;
+      $[88] = t21;
+      $[89] = t22;
+      $[90] = t30;
+      $[91] = t36;
+      $[92] = t37;
     } else {
-      t35 = $[90];
+      t37 = $[92];
     }
-    let t36;
-    if ($[91] !== endAdornment) {
-      t36 = endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("h-full flex items-center absolute right-0 pr-12"), onClick: _temp2, children: endAdornment });
-      $[91] = endAdornment;
-      $[92] = t36;
+    let t38;
+    if ($[93] !== endAdornment) {
+      t38 = endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("h-full flex items-center absolute right-0 pr-12"), onClick: _temp2, children: endAdornment });
+      $[93] = endAdornment;
+      $[94] = t38;
     } else {
-      t36 = $[92];
+      t38 = $[94];
     }
-    let t37;
-    if ($[93] !== t19 || $[94] !== t35 || $[95] !== t36) {
-      t37 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t19, children: [
-        t35,
-        t36
+    let t39;
+    if ($[95] !== t19 || $[96] !== t37 || $[97] !== t38) {
+      t39 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t19, children: [
+        t37,
+        t38
       ] });
-      $[93] = t19;
-      $[94] = t35;
-      $[95] = t36;
+      $[95] = t19;
       $[96] = t37;
-    } else {
-      t37 = $[96];
-    }
-    let t38;
-    if ($[97] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t38 = cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin);
       $[97] = t38;
+      $[98] = t39;
     } else {
-      t38 = $[97];
-    }
-    let t39;
-    if ($[98] !== viewportClassName) {
-      t39 = cls("p-1", viewportClassName);
-      $[98] = viewportClassName;
-      $[99] = t39;
-    } else {
-      t39 = $[99];
+      t39 = $[98];
     }
     let t40;
-    if ($[100] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t40 = {
-        maxHeight: "var(--radix-select-content-available-height)"
-      };
-      $[100] = t40;
+    if ($[99] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t40 = cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-800 p-2 rounded-lg shadow-lg", defaultBorderMixin);
+      $[99] = t40;
     } else {
-      t40 = $[100];
+      t40 = $[99];
     }
     let t41;
-    if ($[101] !== children || $[102] !== t39) {
-      t41 = /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: t39, style: t40, children });
-      $[101] = children;
-      $[102] = t39;
-      $[103] = t41;
+    if ($[100] !== viewportClassName) {
+      t41 = cls("p-1", viewportClassName);
+      $[100] = viewportClassName;
+      $[101] = t41;
     } else {
-      t41 = $[103];
+      t41 = $[101];
     }
     let t42;
-    if ($[104] !== position || $[105] !== t41) {
-      t42 = /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Content, { position, className: t38, children: t41 });
-      $[104] = position;
-      $[105] = t41;
-      $[106] = t42;
+    if ($[102] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t42 = {
+        maxHeight: "var(--radix-select-content-available-height)"
+      };
+      $[102] = t42;
     } else {
-      t42 = $[106];
+      t42 = $[102];
     }
     let t43;
-    if ($[107] !== finalContainer || $[108] !== t42) {
-      t43 = /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { container: finalContainer, children: t42 });
-      $[107] = finalContainer;
-      $[108] = t42;
-      $[109] = t43;
+    if ($[103] !== children || $[104] !== t41) {
+      t43 = /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: t41, style: t42, children });
+      $[103] = children;
+      $[104] = t41;
+      $[105] = t43;
     } else {
-      t43 = $[109];
+      t43 = $[105];
     }
     let t44;
-    if ($[110] !== disabled || $[111] !== name || $[112] !== onValueChangeInternal || $[113] !== openInternal || $[114] !== props || $[115] !== stringValue || $[116] !== t10 || $[117] !== t11 || $[118] !== t37 || $[119] !== t43) {
-      t44 = /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Root, { name, value: stringValue, open: openInternal, disabled, onValueChange: onValueChangeInternal, onOpenChange: t10, ...props, children: [
+    if ($[106] !== position || $[107] !== t43) {
+      t44 = /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Content, { position, className: t40, children: t43 });
+      $[106] = position;
+      $[107] = t43;
+      $[108] = t44;
+    } else {
+      t44 = $[108];
+    }
+    let t45;
+    if ($[109] !== finalContainer || $[110] !== t44) {
+      t45 = /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { container: finalContainer, children: t44 });
+      $[109] = finalContainer;
+      $[110] = t44;
+      $[111] = t45;
+    } else {
+      t45 = $[111];
+    }
+    let t46;
+    if ($[112] !== disabled || $[113] !== name || $[114] !== onValueChangeInternal || $[115] !== openInternal || $[116] !== props || $[117] !== stringValue || $[118] !== t10 || $[119] !== t11 || $[120] !== t39 || $[121] !== t45) {
+      t46 = /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Root, { name, value: stringValue, open: openInternal, disabled, onValueChange: onValueChangeInternal, onOpenChange: t10, ...props, children: [
         t11,
-        t37,
-        t43
+        t39,
+        t45
       ] });
-      $[110] = disabled;
-      $[111] = name;
-      $[112] = onValueChangeInternal;
-      $[113] = openInternal;
-      $[114] = props;
-      $[115] = stringValue;
-      $[116] = t10;
-      $[117] = t11;
-      $[118] = t37;
-      $[119] = t43;
-      $[120] = t44;
-    } else {
-      t44 = $[120];
-    }
-    return t44;
+      $[112] = disabled;
+      $[113] = name;
+      $[114] = onValueChangeInternal;
+      $[115] = openInternal;
+      $[116] = props;
+      $[117] = stringValue;
+      $[118] = t10;
+      $[119] = t11;
+      $[120] = t39;
+      $[121] = t45;
+      $[122] = t46;
+    } else {
+      t46 = $[122];
+    }
+    return t46;
   });
   Select.displayName = "Select";
   const SelectItem = React.memo(function SelectItem2(t0) {
@@ -37066,7 +37300,7 @@
     const t1 = disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
     let t2;
     if ($[0] !== className || $[1] !== t1) {
-      t2 = cls("w-full", "relative flex items-center p-2 rounded-md text-sm text-surface-accent-700 dark:text-surface-accent-300", "focus:z-10", "data-[state=checked]:bg-surface-accent-100 data-[state=checked]:dark:bg-surface-accent-800 focus:bg-surface-accent-100 dark:focus:bg-surface-950", "data-[state=checked]:focus:bg-surface-accent-200 data-[state=checked]:dark:focus:bg-surface-950", t1, "[&>*]:w-full", "overflow-visible", className);
+      t2 = cls("w-full", "relative flex items-center p-2 rounded-md text-sm text-surface-accent-700 dark:text-surface-accent-300", "focus:z-10", "data-[state=checked]:bg-surface-accent-100 data-[state=checked]:dark:bg-surface-accent-800 focus:bg-surface-accent-100 dark:focus:bg-surface-900", "data-[state=checked]:focus:bg-surface-accent-200 data-[state=checked]:dark:focus:bg-surface-900", t1, "[&>*]:w-full", "overflow-visible", className);
       $[0] = className;
       $[1] = t1;
       $[2] = t2;
@@ -37142,7 +37376,7 @@
     }
     return t3;
   });
-  function _temp$1(e) {
+  function _temp$2(e) {
     e.preventDefault();
     e.stopPropagation();
   }
@@ -37479,7 +37713,7 @@
       }
       T0 = DialogPrimitive__namespace.Content;
       t6 = props;
-      t7 = _temp;
+      t7 = _temp$1;
       t8 = cls("outline-none", borderClass[side], defaultBorderMixin, "transform-gpu", "will-change-transform", "text-surface-accent-900 dark:text-white", "fixed transform z-20 transition-all ease-in-out", !displayed ? "duration-150" : "duration-100", "outline-none focus:outline-none", transparent ? "" : "shadow-md bg-white dark:bg-surface-950", side === "top" || side === "bottom" ? "w-full" : "h-full", side === "left" || side === "top" ? "left-0 top-0" : "right-0 bottom-0", displayed && open ? "opacity-100" : "opacity-50", !displayed || !open ? transformValue[side] : "", className);
       $[18] = className;
       $[19] = displayed;
@@ -37563,7 +37797,7 @@
     }
     return t17;
   };
-  function _temp(event) {
+  function _temp$1(event) {
     return event.preventDefault();
   }
   function getStyleValue(value) {
@@ -37811,69 +38045,279 @@
       ref.current = value;
     }
   }
-  const TextField = React.forwardRef(({
-    value,
-    onChange,
-    label,
-    type = "text",
-    multiline = false,
-    invisible,
-    maxRows,
-    minRows,
-    disabled,
-    error,
-    endAdornment,
-    autoFocus,
-    placeholder,
-    size = "large",
-    className,
-    style,
-    inputClassName,
-    inputStyle,
-    inputRef: inputRefProp,
-    ...inputProps
-  }, ref) => {
-    const inputRef = inputRefProp ?? React.useRef(null);
+  const TextField = React.forwardRef((t0, ref) => {
+    const $ = reactCompilerRuntime.c(77);
+    let autoFocus;
+    let className;
+    let disabled;
+    let endAdornment;
+    let error;
+    let inputClassName;
+    let inputProps;
+    let inputRefProp;
+    let inputStyle;
+    let invisible;
+    let label;
+    let minRows;
+    let onChange;
+    let placeholder;
+    let style;
+    let t1;
+    let t2;
+    let t3;
+    let value;
+    if ($[0] !== t0) {
+      const {
+        value: t42,
+        onChange: t52,
+        label: t62,
+        type: t72,
+        multiline: t82,
+        invisible: t92,
+        maxRows,
+        minRows: t102,
+        disabled: t112,
+        error: t122,
+        endAdornment: t132,
+        autoFocus: t142,
+        placeholder: t152,
+        size: t162,
+        className: t172,
+        style: t182,
+        inputClassName: t192,
+        inputStyle: t20,
+        inputRef: t21,
+        ...t22
+      } = t0;
+      value = t42;
+      onChange = t52;
+      label = t62;
+      t1 = t72;
+      t2 = t82;
+      invisible = t92;
+      minRows = t102;
+      disabled = t112;
+      error = t122;
+      endAdornment = t132;
+      autoFocus = t142;
+      placeholder = t152;
+      t3 = t162;
+      className = t172;
+      style = t182;
+      inputClassName = t192;
+      inputStyle = t20;
+      inputRefProp = t21;
+      inputProps = t22;
+      $[0] = t0;
+      $[1] = autoFocus;
+      $[2] = className;
+      $[3] = disabled;
+      $[4] = endAdornment;
+      $[5] = error;
+      $[6] = inputClassName;
+      $[7] = inputProps;
+      $[8] = inputRefProp;
+      $[9] = inputStyle;
+      $[10] = invisible;
+      $[11] = label;
+      $[12] = minRows;
+      $[13] = onChange;
+      $[14] = placeholder;
+      $[15] = style;
+      $[16] = t1;
+      $[17] = t2;
+      $[18] = t3;
+      $[19] = value;
+    } else {
+      autoFocus = $[1];
+      className = $[2];
+      disabled = $[3];
+      endAdornment = $[4];
+      error = $[5];
+      inputClassName = $[6];
+      inputProps = $[7];
+      inputRefProp = $[8];
+      inputStyle = $[9];
+      invisible = $[10];
+      label = $[11];
+      minRows = $[12];
+      onChange = $[13];
+      placeholder = $[14];
+      style = $[15];
+      t1 = $[16];
+      t2 = $[17];
+      t3 = $[18];
+      value = $[19];
+    }
+    const type = t1 === void 0 ? "text" : t1;
+    const multiline = t2 === void 0 ? false : t2;
+    const size = t3 === void 0 ? "large" : t3;
+    const fallbackRef = React.useRef(null);
+    const inputRef = inputRefProp ?? fallbackRef;
+    const autoId = React.useId();
+    const inputId = inputProps.id ?? autoId;
+    const labelId = `${inputId}-label`;
     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) => {
-        if (event.target instanceof HTMLElement) event.target.blur();
+    let t4;
+    if ($[20] !== inputRef) {
+      t4 = () => {
+        const element = inputRef && "current" in inputRef ? inputRef.current : null;
+        if (element && document.activeElement === element) {
+          setFocused(true);
+        }
       };
-      const element = "current" in inputRef ? inputRef.current : inputRef;
-      element?.addEventListener("wheel", handleWheel);
-      return () => {
-        element?.removeEventListener("wheel", handleWheel);
+      $[20] = inputRef;
+      $[21] = t4;
+    } else {
+      t4 = $[21];
+    }
+    let t5;
+    if ($[22] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t5 = [];
+      $[22] = t5;
+    } else {
+      t5 = $[22];
+    }
+    React.useEffect(t4, t5);
+    let t6;
+    let t7;
+    if ($[23] !== inputRef || $[24] !== type) {
+      t6 = () => {
+        if (type !== "number") {
+          return;
+        }
+        const handleWheel = _temp;
+        const element_0 = "current" in inputRef ? inputRef.current : inputRef;
+        element_0?.addEventListener("wheel", handleWheel);
+        return () => {
+          element_0?.removeEventListener("wheel", handleWheel);
+        };
       };
-    }, [inputRef, type]);
-    const input = multiline ? /* @__PURE__ */ jsxRuntime.jsx("textarea", { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, rows: typeof minRows === "string" ? parseInt(minRows) : minRows ?? 3, value: value ?? "", onChange, onFocus: () => setFocused(true), onBlur: () => setFocused(false), style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3", label ? "pt-8 pb-2" : "py-2", 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-[44px]": size === "medium",
-      "min-h-[64px]": size === "large"
-    }, label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : size === "smallest" ? "py-0.5" : size === "small" ? "py-1" : "py-2", endAdornment ? "pr-12" : "pr-3", disabled && "outline-none opacity-65 dark:opacity-60 text-surface-accent-800 dark:text-white", inputClassName), placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, onFocus: () => setFocused(true), onBlur: () => setFocused(false), type, value: type === "number" && Number.isNaN(value) ? "" : value ?? "", onChange });
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cls("rounded-md relative max-w-full", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, error ? "border border-red-500 dark:border-red-600" : "", {
-      "min-h-[28px]": size === "smallest",
-      "min-h-[32px]": size === "small",
-      "min-h-[44px]": size === "medium",
-      "min-h-[64px]": size === "large"
-    }, className), style, children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { className: cls("pointer-events-none absolute", size === "large" ? "top-1" : "top-[-1px]", !error ? focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-600", disabled ? "opacity-50" : ""), shrink: hasValue || focused, children: label }),
-      input,
-      endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("flex flex-row justify-center items-center absolute h-full right-0 top-0", {
+      t7 = [inputRef, type];
+      $[23] = inputRef;
+      $[24] = type;
+      $[25] = t6;
+      $[26] = t7;
+    } else {
+      t6 = $[25];
+      t7 = $[26];
+    }
+    React.useEffect(t6, t7);
+    let t8;
+    if ($[27] !== autoFocus || $[28] !== disabled || $[29] !== endAdornment || $[30] !== error || $[31] !== focused || $[32] !== hasValue || $[33] !== inputClassName || $[34] !== inputId || $[35] !== inputProps || $[36] !== inputRef || $[37] !== inputStyle || $[38] !== invisible || $[39] !== label || $[40] !== labelId || $[41] !== minRows || $[42] !== multiline || $[43] !== onChange || $[44] !== placeholder || $[45] !== size || $[46] !== type || $[47] !== value) {
+      t8 = multiline ? /* @__PURE__ */ jsxRuntime.jsx("textarea", { ...inputProps, ref: inputRef, id: inputId, "aria-labelledby": label ? labelId : void 0, "aria-invalid": error || void 0, "aria-disabled": disabled || void 0, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, rows: typeof minRows === "string" ? parseInt(minRows) : minRows ?? 3, value: value ?? "", onChange, onFocus: () => setFocused(true), onBlur: () => setFocused(false), style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-lg resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3", label ? "pt-8 pb-2" : "py-2", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName) }) : /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, ref: inputRef, id: inputId, "aria-labelledby": label ? labelId : void 0, "aria-invalid": error || void 0, "aria-disabled": disabled || void 0, disabled, style: inputStyle, className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-lg", "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-[44px]": size === "medium",
+        "min-h-[64px]": size === "large"
+      }, label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : size === "smallest" ? "py-0.5" : size === "small" ? "py-1" : "py-2", endAdornment ? "pr-12" : "pr-3", disabled && "outline-none opacity-65 dark:opacity-60 text-surface-accent-800 dark:text-white", inputClassName), placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, onFocus: () => setFocused(true), onBlur: () => setFocused(false), type, value: type === "number" && Number.isNaN(value) ? "" : value ?? "", onChange });
+      $[27] = autoFocus;
+      $[28] = disabled;
+      $[29] = endAdornment;
+      $[30] = error;
+      $[31] = focused;
+      $[32] = hasValue;
+      $[33] = inputClassName;
+      $[34] = inputId;
+      $[35] = inputProps;
+      $[36] = inputRef;
+      $[37] = inputStyle;
+      $[38] = invisible;
+      $[39] = label;
+      $[40] = labelId;
+      $[41] = minRows;
+      $[42] = multiline;
+      $[43] = onChange;
+      $[44] = placeholder;
+      $[45] = size;
+      $[46] = type;
+      $[47] = value;
+      $[48] = t8;
+    } else {
+      t8 = $[48];
+    }
+    const input = t8;
+    const t9 = invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin;
+    const t10 = disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin;
+    const t11 = error ? "border border-red-500 dark:border-red-600" : "";
+    const t12 = size === "smallest";
+    const t13 = size === "small";
+    const t14 = size === "medium";
+    const t15 = size === "large";
+    let t16;
+    if ($[49] !== className || $[50] !== t10 || $[51] !== t11 || $[52] !== t12 || $[53] !== t13 || $[54] !== t14 || $[55] !== t15 || $[56] !== t9) {
+      t16 = cls("rounded-lg relative max-w-full", t9, t10, t11, {
+        "min-h-[28px]": t12,
+        "min-h-[32px]": t13,
+        "min-h-[44px]": t14,
+        "min-h-[64px]": t15
+      }, className);
+      $[49] = className;
+      $[50] = t10;
+      $[51] = t11;
+      $[52] = t12;
+      $[53] = t13;
+      $[54] = t14;
+      $[55] = t15;
+      $[56] = t9;
+      $[57] = t16;
+    } else {
+      t16 = $[57];
+    }
+    let t17;
+    if ($[58] !== disabled || $[59] !== error || $[60] !== focused || $[61] !== hasValue || $[62] !== inputId || $[63] !== label || $[64] !== labelId || $[65] !== size) {
+      t17 = label && /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { id: labelId, htmlFor: inputId, className: cls("pointer-events-none absolute", size === "large" ? "top-1" : "top-[-1px]", !error ? focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-600", disabled ? "opacity-50" : ""), shrink: hasValue || focused, children: label });
+      $[58] = disabled;
+      $[59] = error;
+      $[60] = focused;
+      $[61] = hasValue;
+      $[62] = inputId;
+      $[63] = label;
+      $[64] = labelId;
+      $[65] = size;
+      $[66] = t17;
+    } else {
+      t17 = $[66];
+    }
+    let t18;
+    if ($[67] !== endAdornment || $[68] !== size) {
+      t18 = endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("flex flex-row justify-center items-center absolute h-full right-0 top-0", {
         "mr-4": size === "large",
         "mr-3": size === "medium",
         "mr-2": size === "small" || size === "smallest"
-      }), children: endAdornment })
-    ] });
+      }), children: endAdornment });
+      $[67] = endAdornment;
+      $[68] = size;
+      $[69] = t18;
+    } else {
+      t18 = $[69];
+    }
+    let t19;
+    if ($[70] !== input || $[71] !== ref || $[72] !== style || $[73] !== t16 || $[74] !== t17 || $[75] !== t18) {
+      t19 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: t16, style, children: [
+        t17,
+        input,
+        t18
+      ] });
+      $[70] = input;
+      $[71] = ref;
+      $[72] = style;
+      $[73] = t16;
+      $[74] = t17;
+      $[75] = t18;
+      $[76] = t19;
+    } else {
+      t19 = $[76];
+    }
+    return t19;
   });
   TextField.displayName = "TextField";
+  function _temp(event) {
+    if (event.target instanceof HTMLElement) {
+      event.target.blur();
+    }
+  }
   const TabsModeContext = React.createContext("primary");
   function Tabs(t0) {
     const $ = reactCompilerRuntime.c(35);
@@ -38318,7 +38762,7 @@
     return void 0;
   }
   function Popover(t0) {
-    const $ = reactCompilerRuntime.c(27);
+    const $ = reactCompilerRuntime.c(29);
     const {
       trigger,
       children,
@@ -38335,7 +38779,9 @@
       enabled: t2,
       modal: t3,
       portalContainer,
-      className
+      className,
+      onMouseEnter,
+      onMouseLeave
     } = t0;
     const sideOffset = t1 === void 0 ? 5 : t1;
     const enabled = t2 === void 0 ? true : t2;
@@ -38372,14 +38818,14 @@
     }
     let t6;
     if ($[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t6 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Arrow, { className: "fill-white dark:fill-surface-accent-950" });
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Arrow, { className: "fill-white dark:fill-surface-800" });
       $[6] = t6;
     } else {
       t6 = $[6];
     }
     let t7;
-    if ($[7] !== align || $[8] !== alignOffset || $[9] !== arrowPadding || $[10] !== avoidCollisions || $[11] !== children || $[12] !== hideWhenDetached || $[13] !== side || $[14] !== sideOffset || $[15] !== sticky || $[16] !== t5) {
-      t7 = /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Content, { className: t5, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, children: [
+    if ($[7] !== align || $[8] !== alignOffset || $[9] !== arrowPadding || $[10] !== avoidCollisions || $[11] !== children || $[12] !== hideWhenDetached || $[13] !== onMouseEnter || $[14] !== onMouseLeave || $[15] !== side || $[16] !== sideOffset || $[17] !== sticky || $[18] !== t5) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Content, { className: t5, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, onMouseEnter, onMouseLeave, children: [
         children,
         t6
       ] });
@@ -38389,37 +38835,39 @@
       $[10] = avoidCollisions;
       $[11] = children;
       $[12] = hideWhenDetached;
-      $[13] = side;
-      $[14] = sideOffset;
-      $[15] = sticky;
-      $[16] = t5;
-      $[17] = t7;
+      $[13] = onMouseEnter;
+      $[14] = onMouseLeave;
+      $[15] = side;
+      $[16] = sideOffset;
+      $[17] = sticky;
+      $[18] = t5;
+      $[19] = t7;
     } else {
-      t7 = $[17];
+      t7 = $[19];
     }
     let t8;
-    if ($[18] !== finalContainer || $[19] !== t7) {
+    if ($[20] !== finalContainer || $[21] !== t7) {
       t8 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { container: finalContainer, children: t7 });
-      $[18] = finalContainer;
-      $[19] = t7;
-      $[20] = t8;
+      $[20] = finalContainer;
+      $[21] = t7;
+      $[22] = t8;
     } else {
-      t8 = $[20];
+      t8 = $[22];
     }
     let t9;
-    if ($[21] !== modal || $[22] !== onOpenChange || $[23] !== open || $[24] !== t4 || $[25] !== t8) {
+    if ($[23] !== modal || $[24] !== onOpenChange || $[25] !== open || $[26] !== t4 || $[27] !== t8) {
       t9 = /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, { open, onOpenChange, modal, children: [
         t4,
         t8
       ] });
-      $[21] = modal;
-      $[22] = onOpenChange;
-      $[23] = open;
-      $[24] = t4;
-      $[25] = t8;
-      $[26] = t9;
+      $[23] = modal;
+      $[24] = onOpenChange;
+      $[25] = open;
+      $[26] = t4;
+      $[27] = t8;
+      $[28] = t9;
     } else {
-      t9 = $[26];
+      t9 = $[28];
     }
     return t9;
   }
@@ -38607,15 +39055,26 @@
     }
     return t5;
   }
+  const styles = `
+@keyframes shimmer {
+  0% {
+    transform: translateX(-150%);
+  }
+  100% {
+    transform: translateX(150%);
+  }
+}
+`;
   function Skeleton(t0) {
-    const $ = reactCompilerRuntime.c(10);
+    const $ = reactCompilerRuntime.c(9);
     const {
       width,
       height,
       className
     } = t0;
-    const t1 = width !== void 0 ? `${width}px` : void 0;
-    const t2 = height !== void 0 ? `${height}px` : void 0;
+    useInjectStyles("Skeleton", styles);
+    const t1 = width ? `${width}px` : "100%";
+    const t2 = height ? `${height}px` : "12px";
     let t3;
     if ($[0] !== t1 || $[1] !== t2) {
       t3 = {
@@ -38628,28 +39087,33 @@
     } else {
       t3 = $[2];
     }
-    const t4 = width === void 0 ? "w-full" : "";
-    const t5 = height === void 0 ? "h-3" : "";
-    let t6;
-    if ($[3] !== className || $[4] !== t4 || $[5] !== t5) {
-      t6 = cls("block", "bg-surface-accent-200 dark:bg-surface-accent-800 rounded-md", "animate-pulse", "max-w-full max-h-full", t4, t5, className);
+    let t4;
+    if ($[3] !== className) {
+      t4 = cls("block relative overflow-hidden", "bg-surface-accent-50 dark:bg-surface-accent-800 rounded-md", "max-w-full max-h-full", className);
       $[3] = className;
       $[4] = t4;
+    } else {
+      t4 = $[4];
+    }
+    let t5;
+    if ($[5] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/50 dark:via-white/8 to-transparent", style: {
+        animation: "shimmer 1.8s ease-in-out infinite"
+      } });
       $[5] = t5;
-      $[6] = t6;
     } else {
-      t6 = $[6];
+      t5 = $[5];
     }
-    let t7;
-    if ($[7] !== t3 || $[8] !== t6) {
-      t7 = /* @__PURE__ */ jsxRuntime.jsx("span", { style: t3, className: t6 });
-      $[7] = t3;
+    let t6;
+    if ($[6] !== t3 || $[7] !== t4) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("span", { style: t3, className: t4, children: t5 });
+      $[6] = t3;
+      $[7] = t4;
       $[8] = t6;
-      $[9] = t7;
     } else {
-      t7 = $[9];
+      t6 = $[8];
     }
-    return t7;
+    return t6;
   }
   function ToggleButtonGroup(t0) {
     const $ = reactCompilerRuntime.c(12);
@@ -38661,7 +39125,7 @@
     } = t0;
     let t1;
     if ($[0] !== className) {
-      t1 = cls("inline-flex flex-row bg-surface-100 dark:bg-surface-800 rounded-lg p-1 gap-1", className);
+      t1 = cls("inline-flex flex-row bg-surface-100 dark:bg-surface-900 rounded-lg p-1 gap-1", className);
       $[0] = className;
       $[1] = t1;
     } else {
@@ -38671,12 +39135,12 @@
     if ($[2] !== onValueChange || $[3] !== options || $[4] !== value) {
       let t32;
       if ($[6] !== onValueChange || $[7] !== value) {
-        t32 = (option) => /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: (e) => {
+        t32 = (option) => /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", "aria-pressed": value === option.value, "aria-disabled": option.disabled || void 0, onClick: (e) => {
           e.stopPropagation();
           if (!option.disabled) {
             onValueChange(option.value);
           }
-        }, disabled: option.disabled, className: cls("flex flex-row items-center justify-center gap-2 py-3 px-4 rounded-md transition-colors", value === option.value ? "bg-white dark:bg-surface-950 text-primary dark:text-primary-300" : "text-surface-500 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700", option.disabled && "opacity-50 cursor-not-allowed"), children: [
+        }, disabled: option.disabled, className: cls("flex flex-row items-center justify-center gap-2 py-3 px-4 rounded-md transition-colors", value === option.value ? "bg-white dark:bg-surface-900 text-primary dark:text-primary-300 shadow-sm" : "text-surface-500 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700", option.disabled && "opacity-50 cursor-not-allowed"), children: [
           option.icon,
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: option.label })
         ] }, option.value);
@@ -38696,7 +39160,7 @@
     }
     let t3;
     if ($[9] !== t1 || $[10] !== t2) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t1, children: t2 });
+      t3 = /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", "aria-label": "Toggle options", className: t1, children: t2 });
       $[9] = t1;
       $[10] = t2;
       $[11] = t3;
@@ -39439,6 +39903,7 @@
   exports2.FilterAltOffIcon = FilterAltOffIcon;
   exports2.FilterBAndWIcon = FilterBAndWIcon;
   exports2.FilterCenterFocusIcon = FilterCenterFocusIcon;
+  exports2.FilterChip = FilterChip;
   exports2.FilterDramaIcon = FilterDramaIcon;
   exports2.FilterFramesIcon = FilterFramesIcon;
   exports2.FilterHdrIcon = FilterHdrIcon;
@@ -41008,6 +41473,7 @@
   exports2.keyToIconComponent = keyToIconComponent;
   exports2.paperMixin = paperMixin;
   exports2.useAutoComplete = useAutoComplete;
+  exports2.useDebounceCallback = useDebounceCallback;
   exports2.useDebounceValue = useDebounceValue;
   exports2.useIconStyles = useIconStyles;
   exports2.useInjectStyles = useInjectStyles;