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

package/dist/index.es.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
 import * as React from "react";
-import React__default, { createContext, useContext, useEffect, useState, useRef, Children, forwardRef, useLayoutEffect, useDeferredValue } from "react";
+import React__default, { createContext, useContext, useEffect, useState, useRef, Children, forwardRef, useLayoutEffect, useId, useDeferredValue } from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -27,14 +27,14 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
 const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60 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 twMerge(clsx(classes));
@@ -381,6 +381,60 @@ function useDebounceValue(value, t0) {
   useEffect(t1, t2);
   return debouncedValue;
 }
+function useDebounceCallback(callback, delay) {
+  const $ = c(7);
+  const timeoutRef = useRef(null);
+  const callbackRef = 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];
+  }
+  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];
+  }
+  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,
@@ -466,6 +520,7 @@ const Collapse = React__default.memo((t0) => {
   }
   return t6;
 });
+Collapse.displayName = "Collapse";
 const useAutoComplete = ({
   ref
 }) => {
@@ -587,16 +642,16 @@ const getSizeClasses = (size) => {
 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) => {
@@ -618,7 +673,7 @@ const Alert = (t0) => {
   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;
@@ -631,7 +686,7 @@ const Alert = (t0) => {
   }
   let t5;
   if ($[6] !== className) {
-    t5 = cls("flex-grow", className);
+    t5 = cls("grow", className);
     $[6] = className;
     $[7] = t5;
   } else {
@@ -724,7 +779,7 @@ const AvatarInner = (t0, ref) => {
     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);
@@ -770,7 +825,7 @@ const BooleanSwitch = React__default.forwardRef(function BooleanSwitch2({
   size = "medium",
   ...props
 }, ref) {
-  return /* @__PURE__ */ jsxs("button", { type: "button", ref, tabIndex: disabled ? -1 : void 0, onClick: disabled ? (e) => e.preventDefault() : (e_0) => {
+  return /* @__PURE__ */ 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);
@@ -780,7 +835,7 @@ const BooleanSwitch = React__default.forwardRef(function BooleanSwitch2({
       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__ */ 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__ */ 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",
@@ -788,7 +843,7 @@ const BooleanSwitch = React__default.forwardRef(function BooleanSwitch2({
       "translate-x-[9px]": size === "small",
       "translate-x-[8px]": size === "smallest"
     }) }, "knob"),
-    !(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 transform will-change-auto", disabled ? "bg-surface-accent-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__ */ 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",
@@ -842,7 +897,7 @@ const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
   ] });
 };
 const ButtonInner = React__default.memo(React__default.forwardRef((t0, ref) => {
-  const $ = c(55);
+  const $ = c(56);
   let Component;
   let children;
   let className;
@@ -930,32 +985,33 @@ const ButtonInner = React__default.memo(React__default.forwardRef((t0, ref) => {
   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",
@@ -964,7 +1020,7 @@ const ButtonInner = React__default.memo(React__default.forwardRef((t0, ref) => {
         "py-4 px-10": size === "2xl"
       });
       if (Component) {
-        t30 = /* @__PURE__ */ 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__ */ 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
         ] });
@@ -973,81 +1029,83 @@ const ButtonInner = React__default.memo(React__default.forwardRef((t0, ref) => {
       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__ */ 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__default.forwardRef((t0, ref) => {
-  const $ = c(21);
+  const $ = c(23);
   let children;
   let className;
   let onClick;
+  let onKeyDownProp;
   let props;
   let style;
   if ($[0] !== t0) {
@@ -1056,64 +1114,77 @@ const Card = React__default.forwardRef((t0, ref) => {
       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__ */ 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__ */ 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",
@@ -1195,7 +1266,7 @@ const CenteredView = React__default.forwardRef((t0, ref) => {
   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;
@@ -32236,7 +32307,7 @@ const ZoomOutMapIcon = React__default.forwardRef((props, ref) => {
   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",
@@ -32246,20 +32317,20 @@ const outerSizeClasses = {
   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__default.memo((t0) => {
-  const $ = c(25);
+  const $ = c(27);
   const {
     id,
     checked,
@@ -32268,7 +32339,8 @@ const Checkbox = React__default.memo((t0) => {
     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;
@@ -32277,89 +32349,109 @@ const Checkbox = React__default.memo((t0) => {
   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__ */ jsx(CheckboxPrimitive.Indicator, { asChild: true, children: indeterminate ? /* @__PURE__ */ jsx(RemoveIcon, { size: iconSize, className: "absolute" }) : /* @__PURE__ */ jsx(CheckIcon, { size: iconSize, className: "absolute" }) });
+    t18 = /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { asChild: true, children: indeterminate ? /* @__PURE__ */ jsx(RemoveIcon, { size: iconSize, className: "absolute" }) : /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: t11, children: t18 });
-    $[16] = t11;
-    $[17] = t18;
-    $[18] = t19;
+  if ($[13] !== t17 || $[14] !== t18) {
+    t19 = /* @__PURE__ */ 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__ */ jsx(CheckboxPrimitive.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__ */ 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__ */ jsx(CheckboxPrimitive.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__default.forwardRef(function Chip2(t0, ref) {
-  const $ = c(19);
+  const $ = c(25);
   const {
     children,
     colorScheme,
     error,
+    outlined,
     onClick,
     icon,
     size: t1,
@@ -32376,56 +32468,180 @@ const Chip = React__default.forwardRef(function Chip2(t0, ref) {
     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__ */ 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__ */ 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__default.forwardRef(function FilterChip2(t0, ref) {
+  const $ = 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__ */ 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__default.forwardRef((t0, ref) => {
   const $ = c(47);
@@ -32502,7 +32718,7 @@ const Tooltip = React__default.forwardRef((t0, ref) => {
   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) {
@@ -32587,7 +32803,7 @@ const Tooltip = React__default.forwardRef((t0, ref) => {
   }
   return t10;
 });
-const styles = `
+const styles$1 = `
 
 .TooltipContent {
   animation-duration: 220ms;
@@ -32733,13 +32949,13 @@ function ColorPicker(t0) {
   }
   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 = {
@@ -32747,7 +32963,7 @@ const shapeClasses = {
   square: "rounded-md"
 };
 const IconButtonInner = (t0, ref) => {
-  const $ = c(23);
+  const $ = c(27);
   let children;
   let className;
   let component;
@@ -32793,42 +33009,51 @@ const IconButtonInner = (t0, ref) => {
   const size = t1 === void 0 ? "medium" : t1;
   const variant = t2 === void 0 ? "ghost" : t2;
   const shape = t3 === void 0 ? "circular" : t3;
-  const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 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__ */ 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__ */ 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__default.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"
 };
@@ -32859,7 +33084,7 @@ const InputLabel = React.forwardRef(function InputLabel2(inProps, ref) {
       [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;
@@ -33240,7 +33465,7 @@ const widthClasses = {
   full: "max-w-full w-full"
 };
 const Dialog = (t0) => {
-  const $ = c(45);
+  const $ = c(46);
   const {
     open,
     onOpenChange,
@@ -33258,7 +33483,8 @@ const Dialog = (t0) => {
     onPointerDownOutside,
     onInteractOutside,
     disableInitialFocus: t5,
-    portalContainer
+    portalContainer,
+    "aria-describedby": ariaDescribedby
   } = t0;
   const fullWidth = t1 === void 0 ? true : t1;
   const scrollable = t2 === void 0 ? true : t2;
@@ -33279,7 +33505,7 @@ const Dialog = (t0) => {
         return () => clearTimeout(timeout);
       } else {
         setDisplayed(true);
-        return _temp$4;
+        return _temp$5;
       }
     };
     t7 = [open];
@@ -33303,7 +33529,7 @@ const Dialog = (t0) => {
   const t10 = displayed && open ? "opacity-100" : "opacity-0";
   let t11;
   if ($[5] !== t10) {
-    t11 = cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black 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 {
@@ -33345,16 +33571,16 @@ const Dialog = (t0) => {
   }
   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) {
@@ -33380,53 +33606,54 @@ const Dialog = (t0) => {
     t24 = $[26];
   }
   let t25;
-  if ($[27] !== onEscapeKeyDown || $[28] !== onInteractOutside || $[29] !== onPointerDownOutside || $[30] !== t15 || $[31] !== t24) {
-    t25 = /* @__PURE__ */ jsx(DialogPrimitive.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__ */ jsx(DialogPrimitive.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__ */ 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__ */ jsx(DialogPrimitive.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__ */ jsx(DialogPrimitive.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 $ = c(7);
@@ -33579,7 +33806,7 @@ function DialogTitle(t0) {
   return title;
 }
 function ExpandablePanel(t0) {
-  const $ = c(40);
+  const $ = c(41);
   const {
     title,
     children,
@@ -33665,7 +33892,7 @@ function ExpandablePanel(t0) {
   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;
@@ -33689,7 +33916,7 @@ function ExpandablePanel(t0) {
   const t13 = asField && fieldBackgroundMixin;
   let t14;
   if ($[11] !== t10 || $[12] !== t11 || $[13] !== t12 || $[14] !== t13 || $[15] !== titleClassName) {
-    t14 = cls("rounded-t flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-accent-200 hover:bg-opacity-40 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;
@@ -33717,68 +33944,69 @@ function ExpandablePanel(t0) {
     t17 = $[20];
   }
   let t18;
-  if ($[21] !== t14 || $[22] !== t17 || $[23] !== title) {
-    t18 = /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: t14, role: "button", tabIndex: 0, children: [
+  if ($[21] !== open || $[22] !== t14 || $[23] !== t17 || $[24] !== title) {
+    t18 = /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ 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__ */ 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__ */ jsx(Collapsible.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__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Collapsible.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;
 }
@@ -33929,7 +34157,7 @@ function InfoLabel(t0) {
   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 {
@@ -33974,7 +34202,7 @@ const Label = React.forwardRef((t0, ref) => {
   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;
@@ -34234,6 +34462,7 @@ const MenuItem = React__default.memo((t0) => {
   }
   return t9;
 });
+MenuItem.displayName = "MenuItem";
 function Menubar(t0) {
   const $ = c(6);
   const {
@@ -34891,7 +35120,7 @@ function Separator(t0) {
   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 {
@@ -34910,7 +35139,7 @@ function Separator(t0) {
   } 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 {
@@ -35042,7 +35271,7 @@ const MultiSelect = React.forwardRef((t0, ref) => {
   let t12;
   let t13;
   if ($[9] !== children) {
-    t13 = children ? Children.map(children, _temp$3)?.filter(Boolean) ?? [] : [];
+    t13 = children ? Children.map(children, _temp$4)?.filter(Boolean) ?? [] : [];
     $[9] = children;
     $[10] = t13;
   } else {
@@ -35588,7 +35817,7 @@ const InnerCheckBox = React.memo(function InnerCheckBox2(t0) {
   }
   return t7;
 });
-function _temp$3(child) {
+function _temp$4(child) {
   if (React.isValidElement(child)) {
     return child.props.value;
   }
@@ -35688,7 +35917,7 @@ const RadioGroupItem = React.forwardRef((t0, ref) => {
   }
   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 {
@@ -35928,6 +36157,7 @@ function SearchBar(t0) {
     onClick,
     onTextSearch,
     placeholder: t1,
+    initialValue,
     expandable: t2,
     size: t3,
     innerClassName,
@@ -35940,7 +36170,7 @@ function SearchBar(t0) {
   const placeholder = t1 === void 0 ? "Search" : t1;
   const expandable = t2 === void 0 ? false : t2;
   const size = t3 === void 0 ? "medium" : t3;
-  const [searchText, setSearchText] = useState("");
+  const [searchText, setSearchText] = useState(initialValue ?? "");
   const [active, setActive] = useState(false);
   const deferredValues = useDebounceValue(searchText, 200);
   let t4;
@@ -36476,7 +36706,7 @@ const SearchableSelect = React.forwardRef((t0, ref) => {
         }
         const itemValue = child_0.props.value;
         const isSelected = String(value) === String(itemValue);
-        return /* @__PURE__ */ jsxs(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__ */ jsxs(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__ */ jsx("div", { className: cls("w-4 h-4 flex items-center justify-center flex-shrink-0", isSelected ? "text-primary" : "text-transparent"), children: isSelected && /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) }),
           child_0.props.children ?? child_0.props.value
         ] }, String(itemValue));
@@ -36579,12 +36809,12 @@ SearchableSelect.displayName = "SearchableSelect";
 function SearchableSelectItem(_props) {
   return null;
 }
-function _temp$2(e_0) {
+function _temp$3(e_0) {
   e_0.preventDefault();
   e_0.stopPropagation();
 }
 const Select = forwardRef((t0, ref) => {
-  const $ = c(121);
+  const $ = c(123);
   let children;
   let className;
   let disabled;
@@ -36811,7 +37041,7 @@ const Select = forwardRef((t0, ref) => {
   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,
@@ -36832,13 +37062,15 @@ const Select = forwardRef((t0, ref) => {
   } 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",
@@ -36852,196 +37084,198 @@ const Select = forwardRef((t0, ref) => {
     $[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__ */ jsx(SelectPrimitive.Value, { onClick: _temp$1, placeholder, className: "w-full", children: t26 });
+  let t29;
+  if ($[71] !== placeholder || $[72] !== t28) {
+    t29 = /* @__PURE__ */ jsx(SelectPrimitive.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__ */ jsx("div", { ref, className: t25, children: t27 });
+  let t30;
+  if ($[74] !== ref || $[75] !== t27 || $[76] !== t29) {
+    t30 = /* @__PURE__ */ 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__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: t29, className: t33 }) });
-    $[82] = t29;
-    $[83] = t33;
-    $[84] = t34;
+  let t36;
+  if ($[82] !== t31 || $[83] !== t35) {
+    t36 = /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ 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__ */ jsxs(SelectPrimitive.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__ */ jsxs(SelectPrimitive.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__ */ 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__ */ 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__ */ jsxs("div", { className: t19, children: [
-      t35,
-      t36
+  let t39;
+  if ($[95] !== t19 || $[96] !== t37 || $[97] !== t38) {
+    t39 = /* @__PURE__ */ 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__ */ jsx(SelectPrimitive.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__ */ jsx(SelectPrimitive.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__ */ jsx(SelectPrimitive.Portal, { container: finalContainer, children: t42 });
-    $[107] = finalContainer;
-    $[108] = t42;
-    $[109] = t43;
+  if ($[103] !== children || $[104] !== t41) {
+    t43 = /* @__PURE__ */ jsx(SelectPrimitive.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__ */ jsxs(SelectPrimitive.Root, { name, value: stringValue, open: openInternal, disabled, onValueChange: onValueChangeInternal, onOpenChange: t10, ...props, children: [
+  if ($[106] !== position || $[107] !== t43) {
+    t44 = /* @__PURE__ */ jsx(SelectPrimitive.Content, { position, className: t40, children: t43 });
+    $[106] = position;
+    $[107] = t43;
+    $[108] = t44;
+  } else {
+    t44 = $[108];
+  }
+  let t45;
+  if ($[109] !== finalContainer || $[110] !== t44) {
+    t45 = /* @__PURE__ */ jsx(SelectPrimitive.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__ */ jsxs(SelectPrimitive.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__default.memo(function SelectItem2(t0) {
@@ -37056,7 +37290,7 @@ const SelectItem = React__default.memo(function SelectItem2(t0) {
   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;
@@ -37132,7 +37366,7 @@ const SelectGroup = React__default.memo(function SelectGroup2(t0) {
   }
   return t3;
 });
-function _temp$1(e) {
+function _temp$2(e) {
   e.preventDefault();
   e.stopPropagation();
 }
@@ -37469,7 +37703,7 @@ const Sheet = (t0) => {
     }
     T0 = DialogPrimitive.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;
@@ -37553,7 +37787,7 @@ const Sheet = (t0) => {
   }
   return t17;
 };
-function _temp(event) {
+function _temp$1(event) {
   return event.preventDefault();
 }
 function getStyleValue(value) {
@@ -37801,69 +38035,279 @@ function setRef(ref, value) {
     ref.current = value;
   }
 }
-const TextField = 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 ?? useRef(null);
+const TextField = forwardRef((t0, ref) => {
+  const $ = 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 = useRef(null);
+  const inputRef = inputRefProp ?? fallbackRef;
+  const autoId = useId();
+  const inputId = inputProps.id ?? autoId;
+  const labelId = `${inputId}-label`;
   const [focused, setFocused] = React__default.useState(false);
   const hasValue = value !== void 0 && value !== null && value !== "";
-  useEffect(() => {
-    if (inputRef.current && document.activeElement === inputRef.current) {
-      setFocused(true);
-    }
-  }, []);
-  useEffect(() => {
-    if (type !== "number") return;
-    const handleWheel = (event) => {
-      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];
+  }
+  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__ */ 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__ */ 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__ */ 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__ */ jsx(InputLabel, { className: cls("pointer-events-none absolute", size === "large" ? "top-1" : "top-[-1px]", !error ? focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-600", disabled ? "opacity-50" : ""), shrink: hasValue || focused, children: label }),
-    input,
-    endAdornment && /* @__PURE__ */ jsx("div", { className: cls("flex flex-row justify-center items-center absolute h-full right-0 top-0", {
+    t7 = [inputRef, type];
+    $[23] = inputRef;
+    $[24] = type;
+    $[25] = t6;
+    $[26] = t7;
+  } else {
+    t6 = $[25];
+    t7 = $[26];
+  }
+  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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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 = createContext("primary");
 function Tabs(t0) {
   const $ = c(35);
@@ -38308,7 +38752,7 @@ function getParentName(element) {
   return void 0;
 }
 function Popover(t0) {
-  const $ = c(27);
+  const $ = c(29);
   const {
     trigger,
     children,
@@ -38325,7 +38769,9 @@ function Popover(t0) {
     enabled: t2,
     modal: t3,
     portalContainer,
-    className
+    className,
+    onMouseEnter,
+    onMouseLeave
   } = t0;
   const sideOffset = t1 === void 0 ? 5 : t1;
   const enabled = t2 === void 0 ? true : t2;
@@ -38362,14 +38808,14 @@ function Popover(t0) {
   }
   let t6;
   if ($[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t6 = /* @__PURE__ */ jsx(PopoverPrimitive.Arrow, { className: "fill-white dark:fill-surface-accent-950" });
+    t6 = /* @__PURE__ */ jsx(PopoverPrimitive.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__ */ jsxs(PopoverPrimitive.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__ */ jsxs(PopoverPrimitive.Content, { className: t5, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, onMouseEnter, onMouseLeave, children: [
       children,
       t6
     ] });
@@ -38379,37 +38825,39 @@ function Popover(t0) {
     $[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__ */ jsx(PopoverPrimitive.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__ */ jsxs(PopoverPrimitive.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;
 }
@@ -38597,15 +39045,26 @@ function DebouncedTextField(props) {
   }
   return t5;
 }
+const styles = `
+@keyframes shimmer {
+  0% {
+    transform: translateX(-150%);
+  }
+  100% {
+    transform: translateX(150%);
+  }
+}
+`;
 function Skeleton(t0) {
-  const $ = c(10);
+  const $ = 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 = {
@@ -38618,28 +39077,33 @@ function Skeleton(t0) {
   } 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__ */ 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__ */ jsx("span", { style: t3, className: t6 });
-    $[7] = t3;
+  let t6;
+  if ($[6] !== t3 || $[7] !== t4) {
+    t6 = /* @__PURE__ */ 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 $ = c(12);
@@ -38651,7 +39115,7 @@ function ToggleButtonGroup(t0) {
   } = 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 {
@@ -38661,12 +39125,12 @@ function ToggleButtonGroup(t0) {
   if ($[2] !== onValueChange || $[3] !== options || $[4] !== value) {
     let t32;
     if ($[6] !== onValueChange || $[7] !== value) {
-      t32 = (option) => /* @__PURE__ */ jsxs("button", { type: "button", onClick: (e) => {
+      t32 = (option) => /* @__PURE__ */ 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__ */ jsx("span", { className: "text-sm font-medium", children: option.label })
       ] }, option.value);
@@ -38686,7 +39150,7 @@ function ToggleButtonGroup(t0) {
   }
   let t3;
   if ($[9] !== t1 || $[10] !== t2) {
-    t3 = /* @__PURE__ */ jsx("div", { className: t1, children: t2 });
+    t3 = /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Toggle options", className: t1, children: t2 });
     $[9] = t1;
     $[10] = t2;
     $[11] = t3;
@@ -39430,6 +39894,7 @@ export {
   FilterAltOffIcon,
   FilterBAndWIcon,
   FilterCenterFocusIcon,
+  FilterChip,
   FilterDramaIcon,
   FilterFramesIcon,
   FilterHdrIcon,
@@ -40999,6 +41464,7 @@ export {
   keyToIconComponent,
   paperMixin,
   useAutoComplete,
+  useDebounceCallback,
   useDebounceValue,
   useIconStyles,
   useInjectStyles,