@firecms/ui 3.0.1 → 3.1.0-canary.02232f4

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("react"), require("@radix-ui/react-collapsible"), require("clsx"), require("tailwind-merge"), require("@radix-ui/react-checkbox"), require("@material-design-icons/font/filled.css"), require("@radix-ui/react-dialog"), require("@radix-ui/react-visually-hidden"), require("react-dropzone"), require("@radix-ui/react-label"), require("react-fast-compare"), require("markdown-it"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-menubar"), require("@radix-ui/react-popover"), require("cmdk"), require("@radix-ui/react-separator"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-select"), require("@radix-ui/react-slider"), require("@radix-ui/react-tooltip"), require("react-dom"), require("@radix-ui/react-tabs")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "react", "@radix-ui/react-collapsible", "clsx", "tailwind-merge", "@radix-ui/react-checkbox", "@material-design-icons/font/filled.css", "@radix-ui/react-dialog", "@radix-ui/react-visually-hidden", "react-dropzone", "@radix-ui/react-label", "react-fast-compare", "markdown-it", "@radix-ui/react-dropdown-menu", "@radix-ui/react-menubar", "@radix-ui/react-popover", "cmdk", "@radix-ui/react-separator", "@radix-ui/react-radio-group", "@radix-ui/react-select", "@radix-ui/react-slider", "@radix-ui/react-tooltip", "react-dom", "@radix-ui/react-tabs"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS UI"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.React, global.Collapsible, global.clsx, global.tailwindMerge, global.CheckboxPrimitive, null, global.DialogPrimitive, global.VisuallyHidden, global.reactDropzone, global.LabelPrimitive, global.equal, global.MarkdownIt, global.DropdownMenu, global.MenubarPrimitive, global.PopoverPrimitive, global.cmdk, global.SeparatorPrimitive, global.RadioGroupPrimitive, global.SelectPrimitive, global.SliderPrimitive, global.TooltipPrimitive, global.ReactDOM, global.TabsPrimitive));
-})(this, (function(exports2, jsxRuntime, reactCompilerRuntime, React, Collapsible, clsx, tailwindMerge, CheckboxPrimitive, filled_css, DialogPrimitive, VisuallyHidden, reactDropzone, LabelPrimitive, equal, MarkdownIt, DropdownMenu, MenubarPrimitive, PopoverPrimitive, cmdk, SeparatorPrimitive, RadioGroupPrimitive, SelectPrimitive, SliderPrimitive, TooltipPrimitive, ReactDOM, TabsPrimitive) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("react"), require("@radix-ui/react-collapsible"), require("clsx"), require("tailwind-merge"), require("@radix-ui/react-checkbox"), require("@material-design-icons/font/filled.css"), require("@radix-ui/react-tooltip"), require("@radix-ui/react-dialog"), require("@radix-ui/react-visually-hidden"), require("react-dropzone"), require("@radix-ui/react-label"), require("react-fast-compare"), require("markdown-it"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-menubar"), require("@radix-ui/react-popover"), require("cmdk"), require("@radix-ui/react-separator"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-select"), require("@radix-ui/react-slider"), require("@radix-ui/react-tabs")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "react", "@radix-ui/react-collapsible", "clsx", "tailwind-merge", "@radix-ui/react-checkbox", "@material-design-icons/font/filled.css", "@radix-ui/react-tooltip", "@radix-ui/react-dialog", "@radix-ui/react-visually-hidden", "react-dropzone", "@radix-ui/react-label", "react-fast-compare", "markdown-it", "@radix-ui/react-dropdown-menu", "@radix-ui/react-menubar", "@radix-ui/react-popover", "cmdk", "@radix-ui/react-separator", "@radix-ui/react-radio-group", "@radix-ui/react-select", "@radix-ui/react-slider", "@radix-ui/react-tabs"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS UI"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.React, global.Collapsible, global.clsx, global.tailwindMerge, global.CheckboxPrimitive, null, global.TooltipPrimitive, global.DialogPrimitive, global.VisuallyHidden, global.reactDropzone, global.LabelPrimitive, global.equal, global.MarkdownIt, global.DropdownMenu, global.MenubarPrimitive, global.PopoverPrimitive, global.cmdk, global.SeparatorPrimitive, global.RadioGroupPrimitive, global.SelectPrimitive, global.SliderPrimitive, global.TabsPrimitive));
+})(this, (function(exports2, jsxRuntime, reactCompilerRuntime, React, Collapsible, clsx, tailwindMerge, CheckboxPrimitive, filled_css, TooltipPrimitive, DialogPrimitive, VisuallyHidden, reactDropzone, LabelPrimitive, equal, MarkdownIt, DropdownMenu, MenubarPrimitive, PopoverPrimitive, cmdk, SeparatorPrimitive, RadioGroupPrimitive, SelectPrimitive, SliderPrimitive, TabsPrimitive) {
   "use strict";"use client";
 
   function _interopNamespaceDefault(e) {
@@ -22,6 +22,7 @@
   const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
   const Collapsible__namespace = /* @__PURE__ */ _interopNamespaceDefault(Collapsible);
   const CheckboxPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(CheckboxPrimitive);
+  const TooltipPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TooltipPrimitive);
   const DialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DialogPrimitive);
   const VisuallyHidden__namespace = /* @__PURE__ */ _interopNamespaceDefault(VisuallyHidden);
   const LabelPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(LabelPrimitive);
@@ -32,21 +33,19 @@
   const RadioGroupPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadioGroupPrimitive);
   const SelectPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SelectPrimitive);
   const SliderPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SliderPrimitive);
-  const TooltipPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TooltipPrimitive);
-  const ReactDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactDOM);
   const TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
   const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
-  const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60";
-  const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
-  const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 dark:bg-surface-800 dark:bg-opacity-60";
-  const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0";
-  const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90";
-  const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40";
-  const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
-  const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
-  const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40";
-  const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer";
-  const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
+  const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-800/60";
+  const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-75 ring-primary/75 ring-offset-2 ring-offset-transparent ";
+  const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-800 dark:bg-opacity-60 dark:bg-surface-800/60";
+  const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0 bg-surface-accent-200/0 dark:bg-surface-800/0";
+  const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-800/90";
+  const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";
+  const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40 border-surface-200/40 dark:border-surface-700/40 ";
+  const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40 border-surface-200/40 dark:border-surface-700/40";
+  const cardMixin = "bg-white dark:bg-surface-950 rounded-md border border-surface-200/40 dark:border-surface-700/40 m-1 -p-1";
+  const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer hover:bg-primary/20 dark:hover:bg-primary/10 ";
+  const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 bg-primary-bg/30 dark:bg-opacity-10 dark:bg-primary-bg/10 ring-1 ring-primary ring-opacity-75 ring-primary/75 bg-primary/10 dark:bg-primary/10 ring-1 ring-primary/75";
   function cls(...classes) {
     return tailwindMerge.twMerge(clsx.clsx(classes));
   }
@@ -257,31 +256,69 @@
     }).join("") + "Icon";
     return componentName;
   }
+  const PortalContainerContext = React.createContext(void 0);
+  function PortalContainerProvider(t0) {
+    const $ = reactCompilerRuntime.c(5);
+    const {
+      container,
+      children
+    } = t0;
+    let t1;
+    if ($[0] !== container) {
+      t1 = {
+        container
+      };
+      $[0] = container;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    let t2;
+    if ($[2] !== children || $[3] !== t1) {
+      t2 = /* @__PURE__ */ jsxRuntime.jsx(PortalContainerContext.Provider, { value: t1, children });
+      $[2] = children;
+      $[3] = t1;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    return t2;
+  }
+  function usePortalContainer() {
+    const context = React.useContext(PortalContainerContext);
+    return context?.container ?? null;
+  }
   function useInjectStyles(key, styles2) {
-    const $ = reactCompilerRuntime.c(4);
+    const $ = reactCompilerRuntime.c(5);
+    const portalContainer = usePortalContainer();
     let t0;
-    if ($[0] !== key || $[1] !== styles2) {
+    if ($[0] !== key || $[1] !== portalContainer || $[2] !== styles2) {
       t0 = () => {
-        const styleElement = document.getElementById(key);
-        if (!styleElement) {
+        if (typeof document === "undefined") {
+          return;
+        }
+        const targetContainer = portalContainer ?? document.head;
+        const existingStyle = targetContainer.querySelector?.(`#${key}`);
+        if (!existingStyle) {
           const style = document.createElement("style");
           style.id = key;
           style.innerHTML = styles2;
-          document.head.appendChild(style);
+          (targetContainer || document.head).appendChild(style);
         }
       };
       $[0] = key;
-      $[1] = styles2;
-      $[2] = t0;
+      $[1] = portalContainer;
+      $[2] = styles2;
+      $[3] = t0;
     } else {
-      t0 = $[2];
+      t0 = $[3];
     }
     let t1;
-    if ($[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
       t1 = [];
-      $[3] = t1;
+      $[4] = t1;
     } else {
-      t1 = $[3];
+      t1 = $[4];
     }
     React.useEffect(t0, t1);
   }
@@ -752,7 +789,7 @@
       } else {
         onValueChange?.(!value);
       }
-    }, className: cls(size === "smallest" ? "w-[34px] h-[18px] min-w-[34px] min-h-[18px]" : size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[44px] h-[26px] min-w-[44px] min-h-[26px]", "outline-none rounded-full relative shadow-sm", value ? disabled ? "bg-white bg-opacity-54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700", className), ...props, children: [
+    }, className: cls(size === "smallest" ? "w-[34px] h-[18px] min-w-[34px] min-h-[18px]" : size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[44px] h-[26px] min-w-[44px] min-h-[26px]", "outline-none outline-hidden rounded-full relative shadow-sm", value ? disabled ? "bg-white bg-opacity-54 bg-white/54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 bg-white/54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700", className), ...props, children: [
       allowIndeterminate && (value === null || value === void 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("block rounded-full transition-transform duration-100 transform will-change-auto", disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600", {
         "w-[21px] h-[10px]": size === "medium" || size === "large",
         "w-[19px] h-[8px]": size === "small",
@@ -784,6 +821,7 @@
     className,
     fullWidth = true,
     inputClassName,
+    switchAdornment,
     ...props
   }) {
     const ref = React.useRef(null);
@@ -809,6 +847,7 @@
       }
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(BooleanSwitch, { value, ref: refInput, size, className: cls(invisible && focus ? focusedClasses : "", inputClassName), disabled, ...props }),
+      switchAdornment,
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("flex-grow", position === "end" ? "mr-4" : "ml-4", size === "small" || size === "smallest" ? "text-sm" : "text-base"), children: label })
     ] });
   };
@@ -825,18 +864,29 @@
     let t5;
     let t6;
     if ($[0] !== t0) {
-      ({
-        children,
-        className,
-        variant: t1,
-        disabled: t2,
-        size: t3,
-        startIcon: t4,
-        fullWidth: t5,
-        component: Component,
-        color: t6,
-        ...props
-      } = t0);
+      const {
+        children: t72,
+        className: t82,
+        variant: t92,
+        disabled: t102,
+        size: t112,
+        startIcon: t122,
+        fullWidth: t132,
+        component: t142,
+        color: t152,
+        loading,
+        ...t162
+      } = t0;
+      children = t72;
+      className = t82;
+      t1 = t92;
+      t2 = t102;
+      t3 = t112;
+      t4 = t122;
+      t5 = t132;
+      Component = t142;
+      t6 = t152;
+      props = t162;
       $[0] = t0;
       $[1] = Component;
       $[2] = children;
@@ -901,12 +951,12 @@
           "border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": t10,
           "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow hover:ring-1 hover:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t11,
           "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t12,
-          "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": t13,
-          "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": t14,
-          "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10": t15,
+          "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t13,
+          "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t14,
+          "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10 hover:bg-red-500/10": t15,
           "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": t16,
           "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-700": t17,
-          "border border-primary text-primary hover:text-primary hover:bg-primary-bg": t18,
+          "border border-primary text-primary hover:text-primary hover:bg-primary-bg hover:bg-primary/10": t18,
           "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": t19,
           "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": t20,
           "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-accent-200": t21,
@@ -914,7 +964,7 @@
           "text-text-disabled dark:text-text-disabled-dark": disabled,
           "border border-transparent opacity-50": t23,
           "border border-surface-500 opacity-50": t24,
-          "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40": t25
+          "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-70 bg-surface-300/70 dark:bg-surface-500/70": t25
         });
         const sizeClasses2 = cls({
           "py-1 px-2": size === "small",
@@ -1380,6 +1430,50 @@
     }
     return t0;
   }
+  const sizeMap = {
+    smallest: 16,
+    small: 20,
+    medium: 24,
+    large: 28
+  };
+  function FirestoreIcon(props) {
+    const $ = reactCompilerRuntime.c(7);
+    const s = typeof props.size === "number" ? props.size : sizeMap[props.size ?? "medium"] ?? 24;
+    let t0;
+    let t1;
+    let t2;
+    let t3;
+    if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t0 = /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22.575 87.933A52.16 52.16 0 0034.787 90.513c5.84.204 11.395-1.004 16.359-3.298a70.68 70.68 0 01-15.948-10.013c-2.98 4.778-7.393 8.548-12.623 10.731z", opacity: ".7" });
+      t1 = /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M35.2 77.205c-10.505-9.714-16.878-23.776-16.339-39.2.018-.499.045-1.001.075-1.5a39.51 39.51 0 00-5.866-.855 38.77 38.77 0 00-8.34.997A53.07 53.07 0 00.022 53.236c-.544 15.58 8.884 29.191 22.553 34.697 5.23-2.18 9.642-5.948 12.625-10.728z", opacity: ".6" });
+      t2 = /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M35.2 77.205a31.63 31.63 0 004.096-13.428c.452-12.985-8.278-24.155-20.36-27.273-.03.5-.058 1.002-.076 1.502-.536 15.421 5.835 29.483 16.34 39.199z", opacity: ".7" });
+      t3 = /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M37.944 0a73.99 73.99 0 00-15.603 21.156 72.82 72.82 0 00-3.41 15.349c12.082 3.117 20.812 14.288 20.36 27.275a31.58 31.58 0 01-4.098 13.425 70.76 70.76 0 0015.948 10.013c11.951-5.523 20.43-17.41 20.919-31.467.318-9.11-3.181-17.228-8.126-24.081C58.711 24.424 37.944 0 37.944 0z" });
+      $[0] = t0;
+      $[1] = t1;
+      $[2] = t2;
+      $[3] = t3;
+    } else {
+      t0 = $[0];
+      t1 = $[1];
+      t2 = $[2];
+      t3 = $[3];
+    }
+    let t4;
+    if ($[4] !== props.className || $[5] !== s) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: props.className, fill: "currentColor", width: s, height: s, viewBox: "0 0 73 91", children: [
+        t0,
+        t1,
+        t2,
+        t3
+      ] });
+      $[4] = props.className;
+      $[5] = s;
+      $[6] = t4;
+    } else {
+      t4 = $[6];
+    }
+    return t4;
+  }
   const _10kIcon = React.forwardRef((props, ref) => {
     const $ = reactCompilerRuntime.c(3);
     let t0;
@@ -8646,6 +8740,20 @@
     return t0;
   });
   DatasetLinkedIcon.displayName = "DatasetLinkedIcon";
+  const DatabaseIcon = React.forwardRef((props, ref) => {
+    const $ = reactCompilerRuntime.c(3);
+    let t0;
+    if ($[0] !== props || $[1] !== ref) {
+      t0 = /* @__PURE__ */ jsxRuntime.jsx(Icon, { ...props, iconKey: "database", ref });
+      $[0] = props;
+      $[1] = ref;
+      $[2] = t0;
+    } else {
+      t0 = $[2];
+    }
+    return t0;
+  });
+  DatabaseIcon.displayName = "DatabaseIcon";
   const DateRangeIcon = React.forwardRef((props, ref) => {
     const $ = reactCompilerRuntime.c(3);
     let t0;
@@ -32182,7 +32290,7 @@
     const t6 = disabled ? void 0 : onCheckedChange;
     const t7 = padding ? paddingClasses[size] : "";
     const t8 = outerSizeClasses[size];
-    const t9 = onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75" : "";
+    const t9 = onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-700/75" : "";
     const t10 = onCheckedChange ? "cursor-pointer" : "cursor-default";
     let t11;
     if ($[0] !== t10 || $[1] !== t7 || $[2] !== t8 || $[3] !== t9) {
@@ -32256,8 +32364,8 @@
     medium: "px-3 py-1 text-sm",
     large: "px-4 py-1.5 text-sm"
   };
-  function Chip(t0) {
-    const $ = reactCompilerRuntime.c(18);
+  const Chip = React.forwardRef(function Chip2(t0, ref) {
+    const $ = reactCompilerRuntime.c(19);
     const {
       children,
       colorScheme,
@@ -32312,23 +32420,330 @@
       t10 = $[11];
     }
     let t11;
-    if ($[12] !== children || $[13] !== icon || $[14] !== onClick || $[15] !== t10 || $[16] !== t7) {
-      t11 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t7, onClick, style: t10, children: [
+    if ($[12] !== children || $[13] !== icon || $[14] !== onClick || $[15] !== ref || $[16] !== t10 || $[17] !== t7) {
+      t11 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: t7, onClick, style: t10, children: [
         children,
         icon
       ] });
       $[12] = children;
       $[13] = icon;
       $[14] = onClick;
-      $[15] = t10;
-      $[16] = t7;
-      $[17] = t11;
+      $[15] = ref;
+      $[16] = t10;
+      $[17] = t7;
+      $[18] = t11;
     } else {
-      t11 = $[17];
+      t11 = $[18];
     }
     return t11;
+  });
+  const Tooltip = React.forwardRef((t0, ref) => {
+    const $ = reactCompilerRuntime.c(47);
+    let align;
+    let children;
+    let className;
+    let container;
+    let defaultOpen;
+    let onOpenChange;
+    let open;
+    let props;
+    let sideOffset;
+    let style;
+    let t1;
+    let t2;
+    let t3;
+    let title;
+    let tooltipClassName;
+    let tooltipStyle;
+    if ($[0] !== t0) {
+      ({
+        open,
+        defaultOpen,
+        side: t1,
+        delayDuration: t2,
+        sideOffset,
+        align,
+        onOpenChange,
+        title,
+        tooltipClassName,
+        tooltipStyle,
+        children,
+        asChild: t3,
+        container,
+        className,
+        style,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = align;
+      $[2] = children;
+      $[3] = className;
+      $[4] = container;
+      $[5] = defaultOpen;
+      $[6] = onOpenChange;
+      $[7] = open;
+      $[8] = props;
+      $[9] = sideOffset;
+      $[10] = style;
+      $[11] = t1;
+      $[12] = t2;
+      $[13] = t3;
+      $[14] = title;
+      $[15] = tooltipClassName;
+      $[16] = tooltipStyle;
+    } else {
+      align = $[1];
+      children = $[2];
+      className = $[3];
+      container = $[4];
+      defaultOpen = $[5];
+      onOpenChange = $[6];
+      open = $[7];
+      props = $[8];
+      sideOffset = $[9];
+      style = $[10];
+      t1 = $[11];
+      t2 = $[12];
+      t3 = $[13];
+      title = $[14];
+      tooltipClassName = $[15];
+      tooltipStyle = $[16];
+    }
+    const side = t1 === void 0 ? "bottom" : t1;
+    const delayDuration = t2 === void 0 ? 200 : t2;
+    const asChild = t3 === void 0 ? false : t3;
+    useInjectStyles("Tooltip", styles);
+    const contextContainer = usePortalContainer();
+    const finalContainer = container ?? contextContainer ?? void 0;
+    if (!title) {
+      let t42;
+      if ($[17] !== children) {
+        t42 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+        $[17] = children;
+        $[18] = t42;
+      } else {
+        t42 = $[18];
+      }
+      return t42;
+    }
+    let t4;
+    if ($[19] !== asChild || $[20] !== children || $[21] !== className || $[22] !== props || $[23] !== ref || $[24] !== style) {
+      t4 = asChild ? /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { asChild: true, children }) : /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style, className, ref, ...props, children }) });
+      $[19] = asChild;
+      $[20] = children;
+      $[21] = className;
+      $[22] = props;
+      $[23] = ref;
+      $[24] = style;
+      $[25] = t4;
+    } else {
+      t4 = $[25];
+    }
+    const trigger = t4;
+    let t5;
+    if ($[26] !== tooltipClassName) {
+      t5 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName);
+      $[26] = tooltipClassName;
+      $[27] = t5;
+    } else {
+      t5 = $[27];
+    }
+    const t6 = sideOffset === void 0 ? 4 : sideOffset;
+    let t7;
+    if ($[28] !== align || $[29] !== side || $[30] !== t5 || $[31] !== t6 || $[32] !== title || $[33] !== tooltipStyle) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Content, { className: t5, style: tooltipStyle, sideOffset: t6, align, side, children: title });
+      $[28] = align;
+      $[29] = side;
+      $[30] = t5;
+      $[31] = t6;
+      $[32] = title;
+      $[33] = tooltipStyle;
+      $[34] = t7;
+    } else {
+      t7 = $[34];
+    }
+    let t8;
+    if ($[35] !== finalContainer || $[36] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { container: finalContainer, children: t7 });
+      $[35] = finalContainer;
+      $[36] = t7;
+      $[37] = t8;
+    } else {
+      t8 = $[37];
+    }
+    let t9;
+    if ($[38] !== defaultOpen || $[39] !== onOpenChange || $[40] !== open || $[41] !== t8 || $[42] !== trigger) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, { open, onOpenChange, defaultOpen, children: [
+        trigger,
+        t8
+      ] });
+      $[38] = defaultOpen;
+      $[39] = onOpenChange;
+      $[40] = open;
+      $[41] = t8;
+      $[42] = trigger;
+      $[43] = t9;
+    } else {
+      t9 = $[43];
+    }
+    let t10;
+    if ($[44] !== delayDuration || $[45] !== t9) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Provider, { delayDuration, children: t9 });
+      $[44] = delayDuration;
+      $[45] = t9;
+      $[46] = t10;
+    } else {
+      t10 = $[46];
+    }
+    return t10;
+  });
+  const styles = `
+
+.TooltipContent {
+  animation-duration: 220ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+.TooltipContent[data-state='delayed-open'][data-side='top'] {
+  animation-name: slideDownAndFade;
+}
+.TooltipContent[data-state='delayed-open'][data-side='right'] {
+  animation-name: slideLeftAndFade;
+}
+.TooltipContent[data-state='delayed-open'][data-side='bottom'] {
+  animation-name: slideUpAndFade;
+}
+.TooltipContent[data-state='delayed-open'][data-side='left'] {
+  animation-name: slideRightAndFade;
+}
+
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}`;
+  const BASE_COLORS = ["blue", "cyan", "teal", "green", "yellow", "orange", "red", "pink", "purple", "gray"];
+  const VARIANTS = ["Darker", "Dark", "Light", "Lighter"];
+  function getColorDisplayName(colorKey) {
+    const base = colorKey.replace(/(Lighter|Light|Dark|Darker)$/, "");
+    const variant = colorKey.replace(base, "");
+    return `${base.charAt(0).toUpperCase()}${base.slice(1)} ${variant}`;
+  }
+  function ColorPicker(t0) {
+    const $ = reactCompilerRuntime.c(18);
+    const {
+      value,
+      onChange,
+      size: t1,
+      allowClear: t2,
+      disabled: t3
+    } = t0;
+    const size = t1 === void 0 ? "medium" : t1;
+    const allowClear = t2 === void 0 ? true : t2;
+    const disabled = t3 === void 0 ? false : t3;
+    const swatchSize = size === "small" ? "w-5 h-5" : "w-6 h-6";
+    const checkSize = size === "small" ? 12 : 14;
+    let t4;
+    if ($[0] !== allowClear || $[1] !== checkSize || $[2] !== disabled || $[3] !== onChange || $[4] !== swatchSize || $[5] !== value) {
+      t4 = allowClear && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", disabled, onClick: () => onChange(void 0), className: cls("flex items-center gap-2 px-2 py-1 rounded text-sm transition-colors", "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", disabled && "opacity-50 cursor-not-allowed", !value && "bg-surface-accent-100 dark:bg-surface-accent-800 font-medium"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls(swatchSize, "rounded-full border-2 border-dashed border-surface-accent-400 dark:border-surface-accent-600", "flex items-center justify-center"), children: !value && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: checkSize }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-surface-accent-700 dark:text-surface-accent-300", children: "Auto (based on ID)" })
+      ] });
+      $[0] = allowClear;
+      $[1] = checkSize;
+      $[2] = disabled;
+      $[3] = onChange;
+      $[4] = swatchSize;
+      $[5] = value;
+      $[6] = t4;
+    } else {
+      t4 = $[6];
+    }
+    let t5;
+    if ($[7] !== checkSize || $[8] !== disabled || $[9] !== onChange || $[10] !== swatchSize || $[11] !== value) {
+      t5 = VARIANTS.map((variant) => BASE_COLORS.map((base) => {
+        const colorKey = `${base}${variant}`;
+        const colorScheme = CHIP_COLORS[colorKey];
+        const isSelected = value === colorKey;
+        const displayName = getColorDisplayName(colorKey);
+        return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { title: displayName, delayDuration: 300, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", disabled, onClick: () => onChange(colorKey), className: cls(swatchSize, "rounded-full transition-all flex items-center justify-center", "hover:scale-110 hover:shadow-md", "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1", disabled && "opacity-50 cursor-not-allowed hover:scale-100", isSelected && "ring-2 ring-primary ring-offset-1"), style: {
+          backgroundColor: colorScheme.color
+        }, "aria-label": displayName, "aria-pressed": isSelected, children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: checkSize, style: {
+          color: colorScheme.text
+        } }) }) }, colorKey);
+      }));
+      $[7] = checkSize;
+      $[8] = disabled;
+      $[9] = onChange;
+      $[10] = swatchSize;
+      $[11] = value;
+      $[12] = t5;
+    } else {
+      t5 = $[12];
+    }
+    let t6;
+    if ($[13] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-10 gap-1", children: t5 });
+      $[13] = t5;
+      $[14] = t6;
+    } else {
+      t6 = $[14];
+    }
+    let t7;
+    if ($[15] !== t4 || $[16] !== t6) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+        t4,
+        t6
+      ] });
+      $[15] = t4;
+      $[16] = t6;
+      $[17] = t7;
+    } else {
+      t7 = $[17];
+    }
+    return t7;
   }
-  const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 hover:scale-105 transition-transform";
+  const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-105 transition-transform";
   const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
   const colorClasses$1 = "text-surface-accent-600 visited:text-surface-accent-600 dark:text-surface-accent-300 dark:visited:text-surface-300";
   const sizeClasses = {
@@ -32388,7 +32803,7 @@
     const size = t1 === void 0 ? "medium" : t1;
     const variant = t2 === void 0 ? "ghost" : t2;
     const shape = t3 === void 0 ? "circular" : t3;
-    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 dark:bg-surface-950 dark:bg-opacity-50";
+    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 bg-surface-accent-200/50 dark:bg-surface-950 dark:bg-opacity-50 dark:bg-surface-950/50";
     const Component = component || "button";
     const t4 = disabled ? "opacity-50 pointer-events-none" : "cursor-pointer";
     const t5 = toggled ? "outline outline-2 outline-primary" : "";
@@ -32396,7 +32811,7 @@
     const t7 = sizeClasses[size];
     let t8;
     if ($[10] !== bgClasses || $[11] !== className || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
-      t8 = cls(t4, t5, colorClasses$1, bgClasses, baseClasses, buttonClasses, t6, t7, className);
+      t8 = cls(t4, t5, "text-inherit dark:text-inherit", colorClasses$1, bgClasses, baseClasses, buttonClasses, t6, t7, className);
       $[10] = bgClasses;
       $[11] = className;
       $[12] = t4;
@@ -32647,13 +33062,14 @@
     className,
     style,
     inputClassName,
-    invisible
+    invisible,
+    timezone
   }) => {
     const inputRef = React.useRef(null);
     const [focused, setFocused] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState("");
     const [isTyping, setIsTyping] = React.useState(false);
-    const invalidValue = value !== void 0 && value !== null && !(value instanceof Date);
+    const invalidValue = value !== void 0 && value !== null && (!(value instanceof Date) || isNaN(value.getTime()));
     useInjectStyles("DateTimeField", inputStyles);
     const handleClear = (e) => {
       e.preventDefault();
@@ -32665,18 +33081,64 @@
       if (!dateValue) {
         return "";
       }
-      const pad = (n) => n.toString().padStart(2, "0");
-      const year = dateValue.getFullYear();
-      const month = pad(dateValue.getMonth() + 1);
-      const day = pad(dateValue.getDate());
+      const options = {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+        timeZone: timezone
+        // undefined = local timezone
+      };
+      const formatter = new Intl.DateTimeFormat("en-CA", options);
+      let parts;
+      try {
+        parts = formatter.formatToParts(dateValue);
+      } catch {
+        return "";
+      }
+      const getPart = (type) => parts.find((p) => p.type === type)?.value ?? "";
+      const year = getPart("year");
+      const month = getPart("month");
+      const day = getPart("day");
       if (mode_0 === "date") {
         return `${year}-${month}-${day}`;
       } else {
-        const hours = pad(dateValue.getHours());
-        const minutes = pad(dateValue.getMinutes());
+        const hours = getPart("hour");
+        const minutes = getPart("minute");
         return `${year}-${month}-${day}T${hours}:${minutes}`;
       }
     };
+    const getTimezoneOffsetMinutes = (date, tz) => {
+      if (!tz) {
+        return -date.getTimezoneOffset();
+      }
+      const utcFormatter = new Intl.DateTimeFormat("en-CA", {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+        timeZone: "UTC"
+      });
+      const tzFormatter = new Intl.DateTimeFormat("en-CA", {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+        timeZone: tz
+      });
+      const utcParts = utcFormatter.formatToParts(date);
+      const tzParts = tzFormatter.formatToParts(date);
+      const getPart_0 = (parts_0, type_0) => parseInt(parts_0.find((p_0) => p_0.type === type_0)?.value ?? "0", 10);
+      const utcDate = new Date(Date.UTC(getPart_0(utcParts, "year"), getPart_0(utcParts, "month") - 1, getPart_0(utcParts, "day"), getPart_0(utcParts, "hour"), getPart_0(utcParts, "minute")));
+      const tzDate = new Date(Date.UTC(getPart_0(tzParts, "year"), getPart_0(tzParts, "month") - 1, getPart_0(tzParts, "day"), getPart_0(tzParts, "hour"), getPart_0(tzParts, "minute")));
+      return (tzDate.getTime() - utcDate.getTime()) / 6e4;
+    };
     const handleInputChange = (e_0) => {
       const inputValue = e_0.target.value;
       setInternalValue(inputValue);
@@ -32686,18 +33148,26 @@
         return;
       }
       try {
-        const parsed = new Date(inputValue);
-        if (isNaN(parsed.getTime())) {
-          throw new Error("Invalid date");
-        }
-        let newDate;
+        let year_0, month_0, day_0, hours_0 = 0, minutes_0 = 0;
         if (mode === "date") {
-          const userTimezoneOffset = parsed.getTimezoneOffset() * 6e4;
-          newDate = new Date(parsed.getTime() + userTimezoneOffset);
+          [year_0, month_0, day_0] = inputValue.split("-").map(Number);
+        } else {
+          const [datePart, timePart] = inputValue.split("T");
+          [year_0, month_0, day_0] = datePart.split("-").map(Number);
+          [hours_0, minutes_0] = timePart.split(":").map(Number);
+        }
+        let resultDate;
+        if (!timezone) {
+          resultDate = new Date(year_0, month_0 - 1, day_0, hours_0, minutes_0);
         } else {
-          newDate = parsed;
+          const refUtcDate = new Date(Date.UTC(year_0, month_0 - 1, day_0, hours_0, minutes_0));
+          const offsetMinutes = getTimezoneOffsetMinutes(refUtcDate, timezone);
+          resultDate = new Date(Date.UTC(year_0, month_0 - 1, day_0, hours_0, minutes_0) - offsetMinutes * 6e4);
         }
-        onChange?.(newDate);
+        if (isNaN(resultDate.getTime())) {
+          throw new Error("Invalid date");
+        }
+        onChange?.(resultDate);
       } catch (e_1) {
         return;
       }
@@ -32766,21 +33236,21 @@
     }
   `;
   const widthClasses = {
-    xs: "max-w-xs min-w-xs w-xs",
-    sm: "max-w-sm min-w-sm w-sm",
-    md: "max-w-md min-w-md w-md",
-    lg: "max-w-lg min-w-lg w-lg",
-    xl: "max-w-xl min-w-xl w-xl",
-    "2xl": "max-w-2xl min-w-2xl w-2xl",
-    "3xl": "max-w-3xl min-w-3xl w-3xl",
-    "4xl": "max-w-4xl min-w-4xl w-4xl",
-    "5xl": "max-w-5xl min-w-5xl w-5xl",
-    "6xl": "max-w-6xl min-w-6xl w-6xl",
-    "7xl": "max-w-7xl min-w-7xl w-7xl",
-    full: "max-w-full min-w-full w-full"
+    xs: "max-w-xs w-xs",
+    sm: "max-w-sm w-sm",
+    md: "max-w-md w-md",
+    lg: "max-w-lg w-lg",
+    xl: "max-w-xl w-xl",
+    "2xl": "max-w-2xl w-2xl",
+    "3xl": "max-w-3xl w-3xl",
+    "4xl": "max-w-4xl w-4xl",
+    "5xl": "max-w-5xl w-5xl",
+    "6xl": "max-w-6xl w-6xl",
+    "7xl": "max-w-7xl w-7xl",
+    full: "max-w-full w-full"
   };
   const Dialog = (t0) => {
-    const $ = reactCompilerRuntime.c(42);
+    const $ = reactCompilerRuntime.c(45);
     const {
       open,
       onOpenChange,
@@ -32797,7 +33267,8 @@
       onEscapeKeyDown,
       onPointerDownOutside,
       onInteractOutside,
-      disableInitialFocus: t5
+      disableInitialFocus: t5,
+      portalContainer
     } = t0;
     const fullWidth = t1 === void 0 ? true : t1;
     const scrollable = t2 === void 0 ? true : t2;
@@ -32805,6 +33276,8 @@
     const modal = t4 === void 0 ? true : t4;
     const disableInitialFocus = t5 === void 0 ? true : t5;
     const [displayed, setDisplayed] = React.useState(false);
+    const contextContainer = usePortalContainer();
+    const finalContainer = portalContainer ?? contextContainer ?? void 0;
     let t6;
     let t7;
     if ($[0] !== open) {
@@ -32812,11 +33285,11 @@
         if (!open) {
           const timeout = setTimeout(() => {
             setDisplayed(false);
-          }, 150);
+          }, 100);
           return () => clearTimeout(timeout);
         } else {
           setDisplayed(true);
-          return _temp$2;
+          return _temp$4;
         }
       };
       t7 = [open];
@@ -32840,7 +33313,7 @@
     const t10 = displayed && open ? "opacity-100" : "opacity-0";
     let t11;
     if ($[5] !== t10) {
-      t11 = cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ", t10, "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center");
+      t11 = cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black dark:bg-opacity-60 dark:bg-black/60 bg-opacity-50 bg-black/50 dark: bg-black/60  backdrop-blur-sm ", t10, "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center");
       $[5] = t10;
       $[6] = t11;
     } else {
@@ -32930,10 +33403,10 @@
     }
     let t26;
     if ($[33] !== t14 || $[34] !== t25 || $[35] !== t9) {
-      t26 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t9, children: [
+      t26 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t9, children: [
         t14,
         t25
-      ] }) });
+      ] });
       $[33] = t14;
       $[34] = t25;
       $[35] = t9;
@@ -32942,19 +33415,28 @@
       t26 = $[36];
     }
     let t27;
-    if ($[37] !== modal || $[38] !== onOpenChange || $[39] !== t26 || $[40] !== t8) {
-      t27 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: t8, modal, onOpenChange, children: t26 });
-      $[37] = modal;
-      $[38] = onOpenChange;
-      $[39] = t26;
-      $[40] = t8;
-      $[41] = t27;
+    if ($[37] !== finalContainer || $[38] !== t26) {
+      t27 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { container: finalContainer, children: t26 });
+      $[37] = finalContainer;
+      $[38] = t26;
+      $[39] = t27;
+    } else {
+      t27 = $[39];
+    }
+    let t28;
+    if ($[40] !== modal || $[41] !== onOpenChange || $[42] !== t27 || $[43] !== t8) {
+      t28 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: t8, modal, onOpenChange, children: t27 });
+      $[40] = modal;
+      $[41] = onOpenChange;
+      $[42] = t27;
+      $[43] = t8;
+      $[44] = t28;
     } else {
-      t27 = $[41];
+      t28 = $[44];
     }
-    return t27;
+    return t28;
   };
-  function _temp$2() {
+  function _temp$4() {
   }
   function DialogActions(t0) {
     const $ = reactCompilerRuntime.c(7);
@@ -32969,7 +33451,7 @@
     const t3 = translucent ? "backdrop-blur-sm" : "";
     let t4;
     if ($[0] !== className || $[1] !== position || $[2] !== t3) {
-      t4 = cls(defaultBorderMixin, "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2", position, "bg-white bg-opacity-60 dark:bg-surface-900 dark:bg-opacity-60", t3, className);
+      t4 = cls(defaultBorderMixin, "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2", position, "bg-white bg-opacity-60 bg-white/60 dark:bg-surface-900 dark:bg-opacity-60 dark:bg-surface-900/60", t3, className);
       $[0] = className;
       $[1] = position;
       $[2] = t3;
@@ -33217,7 +33699,7 @@
     const t13 = asField && fieldBackgroundMixin;
     let t14;
     if ($[11] !== t10 || $[12] !== t11 || $[13] !== t12 || $[14] !== t13 || $[15] !== titleClassName) {
-      t14 = cls("rounded-t flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-accent-200 hover:bg-opacity-40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40", t10, t11, "transition-all duration-200", t12, t13, titleClassName, "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", t10, t11, "transition-all duration-200", t12, t13, titleClassName, "cursor-pointer");
       $[11] = t10;
       $[12] = t11;
       $[13] = t12;
@@ -33311,7 +33793,7 @@
     return t24;
   }
   function FileUpload(t0) {
-    const $ = reactCompilerRuntime.c(32);
+    const $ = reactCompilerRuntime.c(33);
     const {
       accept,
       onFilesAdded,
@@ -33366,15 +33848,17 @@
     }
     const t4 = size === "large";
     const t5 = size === "medium";
-    const t6 = !disabled;
-    const t7 = !isDragActive;
-    let t8;
-    if ($[10] !== isDragAccept || $[11] !== isDragReject || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
-      t8 = cls(fieldBackgroundMixin, "flex gap-2", "p-4 box-border relative items-center border-2 border-solid border-transparent outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid", {
+    const t6 = size === "small";
+    const t7 = !disabled;
+    const t8 = !isDragActive;
+    let t9;
+    if ($[10] !== isDragAccept || $[11] !== isDragReject || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== t7 || $[16] !== t8) {
+      t9 = cls(fieldBackgroundMixin, "flex gap-2", "p-4 box-border relative items-center border-2 border-solid border-transparent outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid", {
         "h-44": t4,
         "h-28": t5,
-        "cursor-pointer": t6,
-        [fieldBackgroundHoverMixin]: t7,
+        "h-16": t6,
+        "cursor-pointer": t7,
+        [fieldBackgroundHoverMixin]: t8,
         "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-red-500": isDragReject,
         "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-green-500": isDragAccept
       });
@@ -33385,60 +33869,61 @@
       $[14] = t6;
       $[15] = t7;
       $[16] = t8;
+      $[17] = t9;
     } else {
-      t8 = $[16];
-    }
-    let t9;
-    if ($[17] !== title) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", className: "absolute top-2 left-3.5 cursor-inherit", children: title });
-      $[17] = title;
-      $[18] = t9;
-    } else {
-      t9 = $[18];
+      t9 = $[17];
     }
     let t10;
-    if ($[19] !== getInputProps) {
-      t10 = getInputProps();
-      $[19] = getInputProps;
-      $[20] = t10;
+    if ($[18] !== title) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", className: "absolute top-2 left-3.5 cursor-inherit", children: title });
+      $[18] = title;
+      $[19] = t10;
     } else {
-      t10 = $[20];
+      t10 = $[19];
     }
     let t11;
-    if ($[21] !== t10) {
-      t11 = /* @__PURE__ */ jsxRuntime.jsx("input", { ...t10 });
-      $[21] = t10;
-      $[22] = t11;
+    if ($[20] !== getInputProps) {
+      t11 = getInputProps();
+      $[20] = getInputProps;
+      $[21] = t11;
     } else {
-      t11 = $[22];
+      t11 = $[21];
     }
     let t12;
-    if ($[23] !== uploadDescription) {
-      t12 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow h-28 box-border flex flex-col items-center justify-center text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { align: "center", variant: "label", className: "flex flex-row gap-2 justify-center", children: uploadDescription }) });
-      $[23] = uploadDescription;
-      $[24] = t12;
+    if ($[22] !== t11) {
+      t12 = /* @__PURE__ */ jsxRuntime.jsx("input", { ...t11 });
+      $[22] = t11;
+      $[23] = t12;
     } else {
-      t12 = $[24];
+      t12 = $[23];
     }
     let t13;
-    if ($[25] !== children || $[26] !== t11 || $[27] !== t12 || $[28] !== t3 || $[29] !== t8 || $[30] !== t9) {
-      t13 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ...t3, className: t8, children: [
-        t9,
-        t11,
+    if ($[24] !== uploadDescription) {
+      t13 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow h-28 box-border flex flex-col items-center justify-center text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { align: "center", variant: "label", className: "flex flex-row gap-2 justify-center", children: uploadDescription }) });
+      $[24] = uploadDescription;
+      $[25] = t13;
+    } else {
+      t13 = $[25];
+    }
+    let t14;
+    if ($[26] !== children || $[27] !== t10 || $[28] !== t12 || $[29] !== t13 || $[30] !== t3 || $[31] !== t9) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ...t3, className: t9, children: [
+        t10,
+        t12,
         children,
-        t12
+        t13
       ] });
-      $[25] = children;
-      $[26] = t11;
-      $[27] = t12;
-      $[28] = t3;
-      $[29] = t8;
-      $[30] = t9;
-      $[31] = t13;
+      $[26] = children;
+      $[27] = t10;
+      $[28] = t12;
+      $[29] = t13;
+      $[30] = t3;
+      $[31] = t9;
+      $[32] = t14;
     } else {
-      t13 = $[31];
+      t14 = $[32];
     }
-    return t13;
+    return t14;
   }
   const colorClasses = {
     info: "bg-sky-200 dark:bg-teal-900",
@@ -33659,6 +34144,8 @@
       className
     } = t0;
     const sideOffset = t1 === void 0 ? 4 : t1;
+    const contextContainer = usePortalContainer();
+    const finalContainer = portalContainer ?? contextContainer ?? void 0;
     let t2;
     if ($[0] !== ref || $[1] !== trigger) {
       t2 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { ref, asChild: true, children: trigger });
@@ -33689,9 +34176,9 @@
       t4 = $[10];
     }
     let t5;
-    if ($[11] !== portalContainer || $[12] !== t4) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalContainer, children: t4 });
-      $[11] = portalContainer;
+    if ($[11] !== finalContainer || $[12] !== t4) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: finalContainer, children: t4 });
+      $[11] = finalContainer;
       $[12] = t4;
       $[13] = t5;
     } else {
@@ -33716,38 +34203,46 @@
   });
   Menu.displayName = "Menu";
   const MenuItem = React.memo((t0) => {
-    const $ = reactCompilerRuntime.c(8);
+    const $ = reactCompilerRuntime.c(11);
     const {
       children,
       dense: t1,
+      disabled: t2,
       onClick,
       className
     } = t0;
     const dense = t1 === void 0 ? false : t1;
-    const t2 = onClick && "cursor-pointer";
-    const t3 = dense ? "px-4 py-1.5" : "px-4 py-2";
-    let t4;
-    if ($[0] !== className || $[1] !== t2 || $[2] !== t3) {
-      t4 = cls(t2, "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900 flex items-center gap-4", t3, className);
+    const disabled = t2 === void 0 ? false : t2;
+    const t3 = onClick && !disabled && "cursor-pointer";
+    const t4 = disabled && "opacity-50 cursor-not-allowed";
+    const t5 = !disabled && "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900";
+    const t6 = dense ? "px-4 py-1.5" : "px-4 py-2";
+    let t7;
+    if ($[0] !== className || $[1] !== t3 || $[2] !== t4 || $[3] !== t5 || $[4] !== t6) {
+      t7 = cls(t3, t4, "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 flex items-center gap-4", t5, t6, className);
       $[0] = className;
-      $[1] = t2;
-      $[2] = t3;
-      $[3] = t4;
+      $[1] = t3;
+      $[2] = t4;
+      $[3] = t5;
+      $[4] = t6;
+      $[5] = t7;
     } else {
-      t4 = $[3];
+      t7 = $[5];
     }
-    const classNames = t4;
-    let t5;
-    if ($[4] !== children || $[5] !== classNames || $[6] !== onClick) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Item, { className: classNames, onClick, children });
-      $[4] = children;
-      $[5] = classNames;
-      $[6] = onClick;
-      $[7] = t5;
+    const classNames = t7;
+    const t8 = disabled ? void 0 : onClick;
+    let t9;
+    if ($[6] !== children || $[7] !== classNames || $[8] !== disabled || $[9] !== t8) {
+      t9 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Item, { className: classNames, disabled, onClick: t8, children });
+      $[6] = children;
+      $[7] = classNames;
+      $[8] = disabled;
+      $[9] = t8;
+      $[10] = t9;
     } else {
-      t5 = $[7];
+      t9 = $[10];
     }
-    return t5;
+    return t9;
   });
   function Menubar(t0) {
     const $ = reactCompilerRuntime.c(6);
@@ -33800,7 +34295,7 @@
     } = t0;
     let t1;
     if ($[0] !== className) {
-      t1 = cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800", className);
+      t1 = cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800", className);
       $[0] = className;
       $[1] = t1;
     } else {
@@ -33819,17 +34314,21 @@
     return t2;
   }
   function MenubarPortal(t0) {
-    const $ = reactCompilerRuntime.c(2);
+    const $ = reactCompilerRuntime.c(3);
     const {
-      children
+      children,
+      portalContainer
     } = t0;
+    const contextContainer = usePortalContainer();
+    const finalContainer = portalContainer ?? contextContainer ?? void 0;
     let t1;
-    if ($[0] !== children) {
-      t1 = /* @__PURE__ */ jsxRuntime.jsx(MenubarPrimitive__namespace.Portal, { children });
+    if ($[0] !== children || $[1] !== finalContainer) {
+      t1 = /* @__PURE__ */ jsxRuntime.jsx(MenubarPrimitive__namespace.Portal, { container: finalContainer, children });
       $[0] = children;
-      $[1] = t1;
+      $[1] = finalContainer;
+      $[2] = t1;
     } else {
-      t1 = $[1];
+      t1 = $[2];
     }
     return t1;
   }
@@ -34402,7 +34901,7 @@
     if (orientation === "horizontal") {
       let t1;
       if ($[0] !== className) {
-        t1 = cls("dark:bg-opacity-80 dark:bg-surface-800 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className);
+        t1 = cls("dark:bg-opacity-80 dark:bg-surface-800 dark:bg-surface-800/80 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className);
         $[0] = className;
         $[1] = t1;
       } else {
@@ -34421,7 +34920,7 @@
     } else {
       let t1;
       if ($[5] !== className) {
-        t1 = cls("dark:bg-opacity-80 dark:bg-surface-800 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className);
+        t1 = cls("dark:bg-opacity-80 dark:bg-surface-800 dark:bg-surface-800/80 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className);
         $[5] = className;
         $[6] = t1;
       } else {
@@ -34467,7 +34966,7 @@
   }
   const MultiSelectContext = React__namespace.createContext({});
   const MultiSelect = React__namespace.forwardRef((t0, ref) => {
-    const $ = reactCompilerRuntime.c(105);
+    const $ = reactCompilerRuntime.c(112);
     const {
       value,
       size: t1,
@@ -34482,17 +34981,22 @@
       includeSelectAll: t4,
       useChips: t5,
       className,
+      inputClassName,
+      inputRef,
       children,
       renderValues,
       open,
-      onOpenChange
+      onOpenChange,
+      portalContainer,
+      endAdornment
     } = t0;
     const size = t1 === void 0 ? "large" : t1;
     const modalPopover = t2 === void 0 ? true : t2;
     const includeClear = t3 === void 0 ? true : t3;
     const includeSelectAll = t4 === void 0 ? true : t4;
     const useChips = t5 === void 0 ? true : t5;
-    const [isPopoverOpen, setIsPopoverOpen] = React__namespace.useState(open ?? false);
+    const [isMounted, setIsMounted] = React.useState(false);
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(open ?? false);
     let t6;
     if ($[0] !== value) {
       t6 = value ?? [];
@@ -34501,79 +35005,95 @@
     } else {
       t6 = $[1];
     }
-    const [selectedValues, setSelectedValues] = React__namespace.useState(t6);
+    const [selectedValues, setSelectedValues] = React.useState(t6);
+    const contextContainer = usePortalContainer();
+    const finalContainer = portalContainer ?? contextContainer ?? void 0;
     let t7;
-    if ($[2] !== onOpenChange) {
-      t7 = (open_0) => {
-        setIsPopoverOpen(open_0);
-        onOpenChange?.(open_0);
+    let t8;
+    if ($[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t7 = () => {
+        setIsMounted(true);
       };
-      $[2] = onOpenChange;
-      $[3] = t7;
+      t8 = [];
+      $[2] = t7;
+      $[3] = t8;
     } else {
-      t7 = $[3];
+      t7 = $[2];
+      t8 = $[3];
     }
-    const onPopoverOpenChange = t7;
-    let t8;
+    React.useEffect(t7, t8);
     let t9;
-    if ($[4] !== open) {
-      t8 = () => {
-        setIsPopoverOpen(open ?? false);
+    if ($[4] !== onOpenChange) {
+      t9 = (open_0) => {
+        setIsPopoverOpen(open_0);
+        onOpenChange?.(open_0);
       };
-      t9 = [open];
-      $[4] = open;
-      $[5] = t8;
-      $[6] = t9;
+      $[4] = onOpenChange;
+      $[5] = t9;
     } else {
-      t8 = $[5];
-      t9 = $[6];
+      t9 = $[5];
     }
-    React.useEffect(t8, t9);
+    const onPopoverOpenChange = t9;
     let t10;
     let t11;
-    if ($[7] !== children) {
-      t11 = children ? React.Children.map(children, _temp$1).filter(Boolean) : [];
-      $[7] = children;
+    if ($[6] !== open) {
+      t10 = () => {
+        setIsPopoverOpen(open ?? false);
+      };
+      t11 = [open];
+      $[6] = open;
+      $[7] = t10;
       $[8] = t11;
     } else {
+      t10 = $[7];
       t11 = $[8];
     }
-    t10 = t11;
-    const allValues = t10;
+    React.useEffect(t10, t11);
     let t12;
-    let map;
+    let t13;
     if ($[9] !== children) {
+      t13 = children ? React.Children.map(children, _temp$3)?.filter(Boolean) ?? [] : [];
+      $[9] = children;
+      $[10] = t13;
+    } else {
+      t13 = $[10];
+    }
+    t12 = t13;
+    const allValues = t12;
+    let t14;
+    let map;
+    if ($[11] !== children) {
       map = /* @__PURE__ */ new Map();
       React.Children.forEach(children, (child_0) => {
         if (React__namespace.isValidElement(child_0)) {
           map.set(String(child_0.props.value), child_0.props.children);
         }
       });
-      $[9] = children;
-      $[10] = map;
+      $[11] = children;
+      $[12] = map;
     } else {
-      map = $[10];
+      map = $[12];
     }
-    t12 = map;
-    const optionsMap = t12;
-    let t13;
-    let t14;
-    if ($[11] !== value) {
-      t13 = () => {
+    t14 = map;
+    const optionsMap = t14;
+    let t15;
+    let t16;
+    if ($[13] !== value) {
+      t15 = () => {
         setSelectedValues(value ?? []);
       };
-      t14 = [value];
-      $[11] = value;
-      $[12] = t13;
-      $[13] = t14;
+      t16 = [value];
+      $[13] = value;
+      $[14] = t15;
+      $[15] = t16;
     } else {
-      t13 = $[12];
-      t14 = $[13];
+      t15 = $[14];
+      t16 = $[15];
     }
-    React__namespace.useEffect(t13, t14);
+    React__namespace.useEffect(t15, t16);
     let onItemClick;
     let updateValues;
-    if ($[14] !== onValueChange || $[15] !== selectedValues) {
+    if ($[16] !== onValueChange || $[17] !== selectedValues) {
       onItemClick = function onItemClick2(newValue) {
         let newSelectedValues;
         if (selectedValues.some((v_0) => String(v_0) === String(newValue))) {
@@ -34587,17 +35107,17 @@
         setSelectedValues(values);
         onValueChange?.(values);
       };
-      $[14] = onValueChange;
-      $[15] = selectedValues;
-      $[16] = onItemClick;
-      $[17] = updateValues;
+      $[16] = onValueChange;
+      $[17] = selectedValues;
+      $[18] = onItemClick;
+      $[19] = updateValues;
     } else {
-      onItemClick = $[16];
-      updateValues = $[17];
+      onItemClick = $[18];
+      updateValues = $[19];
     }
-    let t15;
-    if ($[18] !== onPopoverOpenChange || $[19] !== selectedValues || $[20] !== updateValues) {
-      t15 = (event) => {
+    let t17;
+    if ($[20] !== onPopoverOpenChange || $[21] !== selectedValues || $[22] !== updateValues) {
+      t17 = (event) => {
         if (event.key === "Enter") {
           onPopoverOpenChange(true);
         } else {
@@ -34608,53 +35128,53 @@
           }
         }
       };
-      $[18] = onPopoverOpenChange;
-      $[19] = selectedValues;
-      $[20] = updateValues;
-      $[21] = t15;
+      $[20] = onPopoverOpenChange;
+      $[21] = selectedValues;
+      $[22] = updateValues;
+      $[23] = t17;
     } else {
-      t15 = $[21];
+      t17 = $[23];
     }
-    const handleInputKeyDown = t15;
-    let t16;
-    if ($[22] !== selectedValues || $[23] !== updateValues) {
-      t16 = (value_0) => {
+    const handleInputKeyDown = t17;
+    let t18;
+    if ($[24] !== selectedValues || $[25] !== updateValues) {
+      t18 = (value_0) => {
         const newSelectedValues_1 = selectedValues.some((v_2) => String(v_2) === String(value_0)) ? selectedValues.filter((v_1) => String(v_1) !== String(value_0)) : [...selectedValues, value_0];
         updateValues(newSelectedValues_1);
       };
-      $[22] = selectedValues;
-      $[23] = updateValues;
-      $[24] = t16;
+      $[24] = selectedValues;
+      $[25] = updateValues;
+      $[26] = t18;
     } else {
-      t16 = $[24];
+      t18 = $[26];
     }
-    const toggleOption = t16;
-    let t17;
-    if ($[25] !== updateValues) {
-      t17 = () => {
+    const toggleOption = t18;
+    let t19;
+    if ($[27] !== updateValues) {
+      t19 = () => {
         updateValues([]);
       };
-      $[25] = updateValues;
-      $[26] = t17;
+      $[27] = updateValues;
+      $[28] = t19;
     } else {
-      t17 = $[26];
+      t19 = $[28];
     }
-    const handleClear = t17;
-    let t18;
-    if ($[27] !== isPopoverOpen || $[28] !== onPopoverOpenChange) {
-      t18 = () => {
+    const handleClear = t19;
+    let t20;
+    if ($[29] !== isPopoverOpen || $[30] !== onPopoverOpenChange) {
+      t20 = () => {
         onPopoverOpenChange(!isPopoverOpen);
       };
-      $[27] = isPopoverOpen;
-      $[28] = onPopoverOpenChange;
-      $[29] = t18;
+      $[29] = isPopoverOpen;
+      $[30] = onPopoverOpenChange;
+      $[31] = t20;
     } else {
-      t18 = $[29];
+      t20 = $[31];
     }
-    const handleTogglePopover = t18;
-    let t19;
-    if ($[30] !== allValues || $[31] !== handleClear || $[32] !== onPopoverOpenChange || $[33] !== selectedValues.length || $[34] !== updateValues) {
-      t19 = () => {
+    const handleTogglePopover = t20;
+    let t21;
+    if ($[32] !== allValues || $[33] !== handleClear || $[34] !== onPopoverOpenChange || $[35] !== selectedValues.length || $[36] !== updateValues) {
+      t21 = () => {
         if (selectedValues.length === allValues.length) {
           handleClear();
         } else {
@@ -34662,76 +35182,79 @@
         }
         onPopoverOpenChange(false);
       };
-      $[30] = allValues;
-      $[31] = handleClear;
-      $[32] = onPopoverOpenChange;
-      $[33] = selectedValues.length;
-      $[34] = updateValues;
-      $[35] = t19;
+      $[32] = allValues;
+      $[33] = handleClear;
+      $[34] = onPopoverOpenChange;
+      $[35] = selectedValues.length;
+      $[36] = updateValues;
+      $[37] = t21;
     } else {
-      t19 = $[35];
+      t21 = $[37];
     }
-    const toggleAll = t19;
+    const toggleAll = t21;
     useInjectStyles("MultiSelect", `
 [cmdk-group] {
   max-height: 45vh;
   overflow-y: auto;
   // width: 400px;
 } `);
-    let t20;
-    if ($[36] !== onItemClick || $[37] !== selectedValues) {
-      t20 = {
+    let t22;
+    if ($[38] !== onItemClick || $[39] !== selectedValues) {
+      t22 = {
         fieldValue: selectedValues,
         onItemClick
       };
-      $[36] = onItemClick;
-      $[37] = selectedValues;
-      $[38] = t20;
+      $[38] = onItemClick;
+      $[39] = selectedValues;
+      $[40] = t22;
     } else {
-      t20 = $[38];
+      t22 = $[40];
     }
-    let t21;
-    if ($[39] !== error || $[40] !== label) {
-      t21 = typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(SelectInputLabel, { error, children: label }) : label;
-      $[39] = error;
-      $[40] = label;
-      $[41] = t21;
-    } else {
-      t21 = $[41];
-    }
-    const t22 = size === "smallest";
-    const t23 = size === "small";
-    const t24 = size === "medium";
-    const t25 = size === "large";
-    let t26;
-    if ($[42] !== className || $[43] !== disabled || $[44] !== invisible || $[45] !== size || $[46] !== t22 || $[47] !== t23 || $[48] !== t24 || $[49] !== t25) {
-      t26 = cls({
-        "min-h-[28px]": t22,
-        "min-h-[32px]": t23,
-        "min-h-[44px]": t24,
-        "min-h-[64px]": t25
+    let t23;
+    if ($[41] !== error || $[42] !== label) {
+      t23 = typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(SelectInputLabel, { error, children: label }) : label;
+      $[41] = error;
+      $[42] = label;
+      $[43] = t23;
+    } else {
+      t23 = $[43];
+    }
+    const t24 = isMounted && isPopoverOpen;
+    const t25 = inputRef ?? ref;
+    const t26 = size === "smallest";
+    const t27 = size === "small";
+    const t28 = size === "medium";
+    const t29 = size === "large";
+    let t30;
+    if ($[44] !== className || $[45] !== disabled || $[46] !== inputClassName || $[47] !== invisible || $[48] !== size || $[49] !== t26 || $[50] !== t27 || $[51] !== t28 || $[52] !== t29) {
+      t30 = cls({
+        "min-h-[28px]": t26,
+        "min-h-[32px]": t27,
+        "min-h-[44px]": t28,
+        "min-h-[64px]": t29
       }, {
         "py-1": size === "small" || size === "smallest",
         "py-2": size === "medium" || size === "large"
       }, {
         "px-2": size === "small" || size === "smallest",
         "px-4": size === "medium" || size === "large"
-      }, "select-none rounded-md text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className);
-      $[42] = className;
-      $[43] = disabled;
-      $[44] = invisible;
-      $[45] = size;
-      $[46] = t22;
-      $[47] = t23;
-      $[48] = t24;
-      $[49] = t25;
-      $[50] = t26;
+      }, "select-none rounded-md text-sm", "focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, inputClassName);
+      $[44] = className;
+      $[45] = disabled;
+      $[46] = inputClassName;
+      $[47] = invisible;
+      $[48] = size;
+      $[49] = t26;
+      $[50] = t27;
+      $[51] = t28;
+      $[52] = t29;
+      $[53] = t30;
     } else {
-      t26 = $[50];
+      t30 = $[53];
     }
-    let t27;
-    if ($[51] !== handleClear || $[52] !== includeClear || $[53] !== isPopoverOpen || $[54] !== optionsMap || $[55] !== placeholder || $[56] !== renderValues || $[57] !== selectedValues || $[58] !== size || $[59] !== toggleOption || $[60] !== useChips) {
-      t27 = selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center w-full", children: [
+    let t31;
+    if ($[54] !== endAdornment || $[55] !== handleClear || $[56] !== includeClear || $[57] !== isPopoverOpen || $[58] !== optionsMap || $[59] !== placeholder || $[60] !== renderValues || $[61] !== selectedValues || $[62] !== size || $[63] !== toggleOption || $[64] !== useChips) {
+      t31 = selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center w-full", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1.5 text-start", children: [
           renderValues && renderValues(selectedValues),
           !renderValues && selectedValues.map((value_1) => {
@@ -34749,186 +35272,200 @@
           })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          includeClear && /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "ml-4", size: "small", onClick: (event_1) => {
+          includeClear && !endAdornment && /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "ml-4", size: "small", onClick: (event_1) => {
             event_1.stopPropagation();
             handleClear();
           } }),
+          endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4 flex items-center", onClick: _temp2$1, children: endAdornment }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
         ] })
       ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full mx-auto", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: placeholder }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-4 flex items-center", onClick: _temp3, children: endAdornment }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
+        ] })
       ] });
-      $[51] = handleClear;
-      $[52] = includeClear;
-      $[53] = isPopoverOpen;
-      $[54] = optionsMap;
-      $[55] = placeholder;
-      $[56] = renderValues;
-      $[57] = selectedValues;
-      $[58] = size;
-      $[59] = toggleOption;
-      $[60] = useChips;
-      $[61] = t27;
-    } else {
-      t27 = $[61];
+      $[54] = endAdornment;
+      $[55] = handleClear;
+      $[56] = includeClear;
+      $[57] = isPopoverOpen;
+      $[58] = optionsMap;
+      $[59] = placeholder;
+      $[60] = renderValues;
+      $[61] = selectedValues;
+      $[62] = size;
+      $[63] = toggleOption;
+      $[64] = useChips;
+      $[65] = t31;
+    } else {
+      t31 = $[65];
     }
-    let t28;
-    if ($[62] !== handleTogglePopover || $[63] !== ref || $[64] !== t26 || $[65] !== t27) {
-      t28 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { ref, onClick: handleTogglePopover, className: t26, children: t27 }) });
-      $[62] = handleTogglePopover;
-      $[63] = ref;
-      $[64] = t26;
-      $[65] = t27;
-      $[66] = t28;
+    let t32;
+    if ($[66] !== handleTogglePopover || $[67] !== t25 || $[68] !== t30 || $[69] !== t31) {
+      t32 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { ref: t25, onClick: handleTogglePopover, className: t30, children: t31 }) });
+      $[66] = handleTogglePopover;
+      $[67] = t25;
+      $[68] = t30;
+      $[69] = t31;
+      $[70] = t32;
     } else {
-      t28 = $[66];
+      t32 = $[70];
     }
-    let t29;
-    if ($[67] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t29 = cls("z-50 relative overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin);
-      $[67] = t29;
+    let t33;
+    if ($[71] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t33 = cls("z-50 overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin);
+      $[71] = t33;
     } else {
-      t29 = $[67];
+      t33 = $[71];
     }
-    let t30;
-    if ($[68] !== onPopoverOpenChange) {
-      t30 = () => onPopoverOpenChange(false);
-      $[68] = onPopoverOpenChange;
-      $[69] = t30;
+    let t34;
+    if ($[72] !== onPopoverOpenChange) {
+      t34 = () => onPopoverOpenChange(false);
+      $[72] = onPopoverOpenChange;
+      $[73] = t34;
     } else {
-      t30 = $[69];
+      t34 = $[73];
     }
-    let t31;
-    if ($[70] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t31 = cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow ");
-      $[70] = t31;
+    let t35;
+    if ($[74] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t35 = cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow text-surface-accent-900 dark:text-white");
+      $[74] = t35;
     } else {
-      t31 = $[70];
+      t35 = $[74];
     }
-    let t32;
-    if ($[71] !== handleInputKeyDown) {
-      t32 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Input, { className: t31, placeholder: "Search...", onKeyDown: handleInputKeyDown });
-      $[71] = handleInputKeyDown;
-      $[72] = t32;
+    let t36;
+    if ($[75] !== handleInputKeyDown) {
+      t36 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Input, { className: t35, placeholder: "Search...", onKeyDown: handleInputKeyDown });
+      $[75] = handleInputKeyDown;
+      $[76] = t36;
     } else {
-      t32 = $[72];
+      t36 = $[76];
     }
-    let t33;
-    if ($[73] !== handleClear || $[74] !== selectedValues.length) {
-      t33 = selectedValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handleClear, className: "text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark", children: "Clear" });
-      $[73] = handleClear;
-      $[74] = selectedValues.length;
-      $[75] = t33;
+    let t37;
+    if ($[77] !== handleClear || $[78] !== selectedValues.length) {
+      t37 = selectedValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handleClear, className: "text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark", children: "Clear" });
+      $[77] = handleClear;
+      $[78] = selectedValues.length;
+      $[79] = t37;
     } else {
-      t33 = $[75];
+      t37 = $[79];
     }
-    let t34;
-    if ($[76] !== t32 || $[77] !== t33) {
-      t34 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center", children: [
-        t32,
-        t33
+    let t38;
+    if ($[80] !== t36 || $[81] !== t37) {
+      t38 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center", children: [
+        t36,
+        t37
       ] });
-      $[76] = t32;
-      $[77] = t33;
-      $[78] = t34;
+      $[80] = t36;
+      $[81] = t37;
+      $[82] = t38;
     } else {
-      t34 = $[78];
+      t38 = $[82];
     }
-    let t35;
-    if ($[79] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t35 = /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "horizontal", className: "my-0" });
-      $[79] = t35;
+    let t39;
+    if ($[83] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t39 = /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "horizontal", className: "my-0" });
+      $[83] = t39;
     } else {
-      t35 = $[79];
+      t39 = $[83];
     }
-    let t36;
-    if ($[80] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t36 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { className: "px-4 py-2", children: "No results found." });
-      $[80] = t36;
+    let t40;
+    if ($[84] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t40 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { className: "px-4 py-2 text-sm text-text-secondary dark:text-text-secondary-dark", children: "No results found." });
+      $[84] = t40;
     } else {
-      t36 = $[80];
+      t40 = $[84];
     }
-    let t37;
-    if ($[81] !== allValues.length || $[82] !== includeSelectAll || $[83] !== selectedValues.length || $[84] !== toggleAll) {
-      t37 = includeSelectAll && /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Item, { onSelect: toggleAll, className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"), children: [
+    let t41;
+    if ($[85] !== allValues.length || $[86] !== includeSelectAll || $[87] !== selectedValues.length || $[88] !== toggleAll) {
+      t41 = includeSelectAll && /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Item, { onSelect: toggleAll, className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"), children: [
         /* @__PURE__ */ jsxRuntime.jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary dark:text-text-secondary-dark", children: "(Select All)" })
       ] }, "all");
-      $[81] = allValues.length;
-      $[82] = includeSelectAll;
-      $[83] = selectedValues.length;
-      $[84] = toggleAll;
-      $[85] = t37;
+      $[85] = allValues.length;
+      $[86] = includeSelectAll;
+      $[87] = selectedValues.length;
+      $[88] = toggleAll;
+      $[89] = t41;
     } else {
-      t37 = $[85];
+      t41 = $[89];
     }
-    let t38;
-    if ($[86] !== children || $[87] !== t37) {
-      t38 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { children: [
-        t36,
+    let t42;
+    if ($[90] !== children || $[91] !== t41) {
+      t42 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { children: [
+        t40,
         /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Group, { children: [
-          t37,
+          t41,
           children
         ] })
       ] });
-      $[86] = children;
-      $[87] = t37;
-      $[88] = t38;
-    } else {
-      t38 = $[88];
-    }
-    let t39;
-    if ($[89] !== t34 || $[90] !== t38) {
-      t39 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command, { children: [
-        t34,
-        t35,
-        t38
+      $[90] = children;
+      $[91] = t41;
+      $[92] = t42;
+    } else {
+      t42 = $[92];
+    }
+    let t43;
+    if ($[93] !== t38 || $[94] !== t42) {
+      t43 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command, { children: [
+        t38,
+        t39,
+        t42
       ] });
-      $[89] = t34;
-      $[90] = t38;
-      $[91] = t39;
+      $[93] = t38;
+      $[94] = t42;
+      $[95] = t43;
     } else {
-      t39 = $[91];
+      t43 = $[95];
     }
-    let t40;
-    if ($[92] !== t30 || $[93] !== t39) {
-      t40 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Content, { className: t29, align: "start", sideOffset: 8, onEscapeKeyDown: t30, children: t39 });
-      $[92] = t30;
-      $[93] = t39;
-      $[94] = t40;
+    let t44;
+    if ($[96] !== t34 || $[97] !== t43) {
+      t44 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Content, { className: t33, align: "start", sideOffset: 8, onEscapeKeyDown: t34, children: t43 });
+      $[96] = t34;
+      $[97] = t43;
+      $[98] = t44;
     } else {
-      t40 = $[94];
+      t44 = $[98];
     }
-    let t41;
-    if ($[95] !== isPopoverOpen || $[96] !== modalPopover || $[97] !== onPopoverOpenChange || $[98] !== t28 || $[99] !== t40) {
-      t41 = /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, { open: isPopoverOpen, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
-        t28,
-        t40
-      ] });
-      $[95] = isPopoverOpen;
-      $[96] = modalPopover;
-      $[97] = onPopoverOpenChange;
-      $[98] = t28;
-      $[99] = t40;
-      $[100] = t41;
+    let t45;
+    if ($[99] !== finalContainer || $[100] !== t44) {
+      t45 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { container: finalContainer, children: t44 });
+      $[99] = finalContainer;
+      $[100] = t44;
+      $[101] = t45;
     } else {
-      t41 = $[100];
+      t45 = $[101];
     }
-    let t42;
-    if ($[101] !== t20 || $[102] !== t21 || $[103] !== t41) {
-      t42 = /* @__PURE__ */ jsxRuntime.jsxs(MultiSelectContext.Provider, { value: t20, children: [
-        t21,
-        t41
+    let t46;
+    if ($[102] !== modalPopover || $[103] !== onPopoverOpenChange || $[104] !== t24 || $[105] !== t32 || $[106] !== t45) {
+      t46 = /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, { open: t24, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
+        t32,
+        t45
       ] });
-      $[101] = t20;
-      $[102] = t21;
-      $[103] = t41;
-      $[104] = t42;
+      $[102] = modalPopover;
+      $[103] = onPopoverOpenChange;
+      $[104] = t24;
+      $[105] = t32;
+      $[106] = t45;
+      $[107] = t46;
+    } else {
+      t46 = $[107];
+    }
+    let t47;
+    if ($[108] !== t22 || $[109] !== t23 || $[110] !== t46) {
+      t47 = /* @__PURE__ */ jsxRuntime.jsxs(MultiSelectContext.Provider, { value: t22, children: [
+        t23,
+        t46
+      ] });
+      $[108] = t22;
+      $[109] = t23;
+      $[110] = t46;
+      $[111] = t47;
     } else {
-      t42 = $[104];
+      t47 = $[111];
     }
-    return t42;
+    return t47;
   });
   MultiSelect.displayName = "MultiSelect";
   const MultiSelectItem = React__namespace.memo(function MultiSelectItem2(t0) {
@@ -34986,7 +35523,7 @@
     const t4 = isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "";
     let t5;
     if ($[10] !== className || $[11] !== t4) {
-      t5 = cls("flex flex-row items-center gap-1.5", t4, "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", className);
+      t5 = cls("flex flex-row items-center gap-1.5", t4, "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "text-surface-accent-700 dark:text-surface-accent-300", className);
       $[10] = className;
       $[11] = t4;
       $[12] = t5;
@@ -35003,7 +35540,7 @@
     }
     let t7;
     if ($[15] !== children || $[16] !== t3 || $[17] !== t5 || $[18] !== t6) {
-      t7 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Item, { onMouseDown: _temp2, onSelect: t3, className: t5, children: [
+      t7 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Item, { onMouseDown: _temp4, onSelect: t3, className: t5, children: [
         t6,
         children
       ] });
@@ -35061,13 +35598,21 @@
     }
     return t7;
   });
-  function _temp$1(child) {
+  function _temp$3(child) {
     if (React__namespace.isValidElement(child)) {
       return child.props.value;
     }
     return null;
   }
-  function _temp2(e) {
+  function _temp2$1(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  function _temp3(e_0) {
+    e_0.preventDefault();
+    e_0.stopPropagation();
+  }
+  function _temp4(e) {
     e.preventDefault();
     e.stopPropagation();
   }
@@ -35179,14 +35724,222 @@
     return t3;
   });
   RadioGroupItem.displayName = RadioGroupPrimitive__namespace.Item.displayName;
+  function ResizablePanels(t0) {
+    const $ = reactCompilerRuntime.c(40);
+    const {
+      firstPanel,
+      secondPanel,
+      showFirstPanel: t1,
+      showSecondPanel: t2,
+      panelSizePercent,
+      onPanelSizeChange,
+      minPanelSizePx: t3,
+      orientation: t4,
+      className
+    } = t0;
+    const showFirstPanel = t1 === void 0 ? true : t1;
+    const showSecondPanel = t2 === void 0 ? true : t2;
+    const minPanelSizePx = t3 === void 0 ? 200 : t3;
+    const orientation = t4 === void 0 ? "horizontal" : t4;
+    const containerRef = React.useRef(null);
+    const isResizingRef = React.useRef(false);
+    const firstPanelRef = React.useRef(null);
+    const startPosRef = React.useRef(0);
+    const startSizeRef = React.useRef(0);
+    const [, setIsResizing] = React.useState(false);
+    const isHorizontal = orientation === "horizontal";
+    let t5;
+    if ($[0] !== isHorizontal || $[1] !== showFirstPanel || $[2] !== showSecondPanel) {
+      t5 = (e) => {
+        if (!showFirstPanel || !showSecondPanel) {
+          return;
+        }
+        e.preventDefault();
+        isResizingRef.current = true;
+        setIsResizing(true);
+        startPosRef.current = isHorizontal ? e.clientX : e.clientY;
+        if (firstPanelRef.current) {
+          const rect = firstPanelRef.current.getBoundingClientRect();
+          startSizeRef.current = isHorizontal ? rect.width : rect.height;
+        }
+        document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
+        document.body.style.userSelect = "none";
+      };
+      $[0] = isHorizontal;
+      $[1] = showFirstPanel;
+      $[2] = showSecondPanel;
+      $[3] = t5;
+    } else {
+      t5 = $[3];
+    }
+    const handleResizeStart = t5;
+    let t6;
+    let t7;
+    if ($[4] !== isHorizontal || $[5] !== minPanelSizePx || $[6] !== onPanelSizeChange) {
+      t6 = () => {
+        const handleMouseMove = (e_0) => {
+          if (!isResizingRef.current || !containerRef.current) {
+            return;
+          }
+          const currentPos = isHorizontal ? e_0.clientX : e_0.clientY;
+          const delta = currentPos - startPosRef.current;
+          let newSize = startSizeRef.current + delta;
+          const containerRect = containerRef.current.getBoundingClientRect();
+          const containerTotal = isHorizontal ? containerRect.width : containerRect.height;
+          const maxSize = containerTotal - minPanelSizePx;
+          newSize = Math.max(minPanelSizePx, Math.min(newSize, maxSize));
+          if (firstPanelRef.current) {
+            if (isHorizontal) {
+              firstPanelRef.current.style.width = `${newSize}px`;
+            } else {
+              firstPanelRef.current.style.height = `${newSize}px`;
+            }
+          }
+        };
+        const handleMouseUp = () => {
+          if (isResizingRef.current && containerRef.current && firstPanelRef.current) {
+            isResizingRef.current = false;
+            setIsResizing(false);
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+            const containerRect_0 = containerRef.current.getBoundingClientRect();
+            const firstPanelRect = firstPanelRef.current.getBoundingClientRect();
+            const containerSize = isHorizontal ? containerRect_0.width : containerRect_0.height;
+            const finalSize = isHorizontal ? firstPanelRect.width : firstPanelRect.height;
+            if (containerSize > 0) {
+              const newPercent = finalSize / containerSize * 100;
+              onPanelSizeChange(Math.max(0, Math.min(100, newPercent)));
+            }
+          }
+        };
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", handleMouseUp);
+        return () => {
+          window.removeEventListener("mousemove", handleMouseMove);
+          window.removeEventListener("mouseup", handleMouseUp);
+        };
+      };
+      t7 = [onPanelSizeChange, isHorizontal, minPanelSizePx];
+      $[4] = isHorizontal;
+      $[5] = minPanelSizePx;
+      $[6] = onPanelSizeChange;
+      $[7] = t6;
+      $[8] = t7;
+    } else {
+      t6 = $[7];
+      t7 = $[8];
+    }
+    React.useEffect(t6, t7);
+    const appliedBasis = !showFirstPanel ? "0%" : showSecondPanel ? `${panelSizePercent}%` : "100%";
+    const t8 = isHorizontal ? "flex-row" : "flex-col";
+    let t9;
+    if ($[9] !== className || $[10] !== t8) {
+      t9 = cls("relative w-full h-full flex overflow-hidden", t8, className);
+      $[9] = className;
+      $[10] = t8;
+      $[11] = t9;
+    } else {
+      t9 = $[11];
+    }
+    const t10 = !showFirstPanel && "hidden";
+    let t11;
+    if ($[12] !== t10) {
+      t11 = cls("relative flex-shrink-0 flex flex-col overflow-hidden", t10);
+      $[12] = t10;
+      $[13] = t11;
+    } else {
+      t11 = $[13];
+    }
+    const t12 = isHorizontal ? appliedBasis : "100%";
+    const t13 = !isHorizontal ? appliedBasis : "100%";
+    const t14 = isHorizontal && showFirstPanel && showSecondPanel ? `${minPanelSizePx}px` : void 0;
+    const t15 = !isHorizontal && showFirstPanel && showSecondPanel ? `${minPanelSizePx}px` : void 0;
+    const t16 = showSecondPanel ? void 0 : "100%";
+    const t17 = showSecondPanel ? void 0 : "100%";
+    let t18;
+    if ($[14] !== t12 || $[15] !== t13 || $[16] !== t14 || $[17] !== t15 || $[18] !== t16 || $[19] !== t17) {
+      t18 = {
+        width: t12,
+        height: t13,
+        minWidth: t14,
+        minHeight: t15,
+        maxWidth: t16,
+        maxHeight: t17
+      };
+      $[14] = t12;
+      $[15] = t13;
+      $[16] = t14;
+      $[17] = t15;
+      $[18] = t16;
+      $[19] = t17;
+      $[20] = t18;
+    } else {
+      t18 = $[20];
+    }
+    let t19;
+    if ($[21] !== firstPanel || $[22] !== t11 || $[23] !== t18) {
+      t19 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: firstPanelRef, className: t11, style: t18, children: firstPanel });
+      $[21] = firstPanel;
+      $[22] = t11;
+      $[23] = t18;
+      $[24] = t19;
+    } else {
+      t19 = $[24];
+    }
+    let t20;
+    if ($[25] !== handleResizeStart || $[26] !== isHorizontal || $[27] !== showFirstPanel || $[28] !== showSecondPanel) {
+      t20 = showFirstPanel && showSecondPanel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("relative z-10 flex flex-shrink-0 items-center justify-center", isHorizontal ? "w-px h-full cursor-col-resize" : "h-px w-full cursor-row-resize"), onMouseDown: handleResizeStart, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("absolute flex items-center justify-center group", isHorizontal ? "w-4 h-full cursor-col-resize top-0" : "h-4 w-full cursor-row-resize left-0"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("bg-primary/60 dark:bg-primary rounded-full opacity-0 group-hover:opacity-100 transition-all duration-200", isHorizontal ? "w-1 h-8" : "h-1 w-8") }) }) });
+      $[25] = handleResizeStart;
+      $[26] = isHorizontal;
+      $[27] = showFirstPanel;
+      $[28] = showSecondPanel;
+      $[29] = t20;
+    } else {
+      t20 = $[29];
+    }
+    const t21 = !showSecondPanel && "hidden";
+    let t22;
+    if ($[30] !== t21) {
+      t22 = cls("flex-grow relative flex flex-col overflow-hidden min-w-0 min-h-0", t21);
+      $[30] = t21;
+      $[31] = t22;
+    } else {
+      t22 = $[31];
+    }
+    let t23;
+    if ($[32] !== secondPanel || $[33] !== t22) {
+      t23 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t22, children: secondPanel });
+      $[32] = secondPanel;
+      $[33] = t22;
+      $[34] = t23;
+    } else {
+      t23 = $[34];
+    }
+    let t24;
+    if ($[35] !== t19 || $[36] !== t20 || $[37] !== t23 || $[38] !== t9) {
+      t24 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: t9, children: [
+        t19,
+        t20,
+        t23
+      ] });
+      $[35] = t19;
+      $[36] = t20;
+      $[37] = t23;
+      $[38] = t9;
+      $[39] = t24;
+    } else {
+      t24 = $[39];
+    }
+    return t24;
+  }
   function SearchBar(t0) {
-    const $ = reactCompilerRuntime.c(39);
+    const $ = reactCompilerRuntime.c(47);
     const {
       onClick,
       onTextSearch,
       placeholder: t1,
       expandable: t2,
-      large: t3,
+      size: t3,
       innerClassName,
       className,
       autoFocus,
@@ -35196,7 +35949,7 @@
     } = t0;
     const placeholder = t1 === void 0 ? "Search" : t1;
     const expandable = t2 === void 0 ? false : t2;
-    const large = t3 === void 0 ? false : t3;
+    const size = t3 === void 0 ? "medium" : t3;
     const [searchText, setSearchText] = React.useState("");
     const [active, setActive] = React.useState(false);
     const deferredValues = useDebounceValue(searchText, 200);
@@ -35242,217 +35995,1063 @@
       t6 = $[6];
     }
     const clearText = t6;
-    const t7 = large ? "h-14" : "h-[44px]";
-    let t8;
-    if ($[7] !== className || $[8] !== t7) {
-      t8 = cls("relative", t7, "bg-surface-accent-50 dark:bg-surface-800 border", defaultBorderMixin, "rounded-lg", className);
+    const heightClass = size === "small" ? "h-[36px]" : "h-[44px]";
+    const iconPaddingClass = size === "small" ? "px-2" : "px-4";
+    const inputPaddingClass = size === "small" ? "pl-8" : "pl-12";
+    let t7;
+    if ($[7] !== className || $[8] !== heightClass) {
+      t7 = cls("relative", heightClass, "bg-surface-accent-50 dark:bg-surface-800 border", defaultBorderMixin, "rounded-lg", className);
       $[7] = className;
-      $[8] = t7;
-      $[9] = t8;
+      $[8] = heightClass;
+      $[9] = t7;
+    } else {
+      t7 = $[9];
+    }
+    let t8;
+    if ($[10] !== iconPaddingClass) {
+      t8 = cls("absolute p-0 h-full pointer-events-none flex items-center justify-center top-0", iconPaddingClass);
+      $[10] = iconPaddingClass;
+      $[11] = t8;
     } else {
-      t8 = $[9];
+      t8 = $[11];
     }
     let t9;
-    if ($[10] !== loading) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0", children: loading ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "text-text-disabled dark:text-text-disabled-dark" }) });
-      $[10] = loading;
-      $[11] = t9;
+    if ($[12] !== loading || $[13] !== size) {
+      t9 = loading ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "text-text-disabled dark:text-text-disabled-dark", size: size === "small" ? "small" : "medium" });
+      $[12] = loading;
+      $[13] = size;
+      $[14] = t9;
     } else {
-      t9 = $[11];
+      t9 = $[14];
     }
-    const t10 = searchText ?? "";
-    const t11 = !onTextSearch;
-    let t12;
-    if ($[12] !== onTextSearch) {
-      t12 = onTextSearch ? (event) => {
+    let t10;
+    if ($[15] !== t8 || $[16] !== t9) {
+      t10 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t8, children: t9 });
+      $[15] = t8;
+      $[16] = t9;
+      $[17] = t10;
+    } else {
+      t10 = $[17];
+    }
+    const t11 = searchText ?? "";
+    const t12 = !onTextSearch;
+    let t13;
+    if ($[18] !== onTextSearch) {
+      t13 = onTextSearch ? (event) => {
         setSearchText(event.target.value);
       } : void 0;
-      $[12] = onTextSearch;
-      $[13] = t12;
+      $[18] = onTextSearch;
+      $[19] = t13;
     } else {
-      t12 = $[13];
+      t13 = $[19];
     }
-    let t13;
     let t14;
-    if ($[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t13 = () => setActive(true);
-      t14 = () => setActive(false);
-      $[14] = t13;
-      $[15] = t14;
+    let t15;
+    if ($[20] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t14 = () => setActive(true);
+      t15 = () => setActive(false);
+      $[20] = t14;
+      $[21] = t15;
     } else {
-      t13 = $[14];
-      t14 = $[15];
+      t14 = $[20];
+      t15 = $[21];
     }
-    const t15 = (disabled || loading) && "pointer-events-none";
-    const t16 = expandable ? active ? "w-[220px]" : "w-[180px]" : "";
-    let t17;
-    if ($[16] !== innerClassName || $[17] !== t15 || $[18] !== t16) {
-      t17 = cls(t15, "placeholder-text-disabled dark:placeholder-text-disabled-dark", "relative flex items-center rounded-lg transition-all bg-transparent outline-none appearance-none border-none", "pl-12 h-full text-current ", t16, innerClassName);
-      $[16] = innerClassName;
-      $[17] = t15;
-      $[18] = t16;
-      $[19] = t17;
+    const t16 = (disabled || loading) && "pointer-events-none";
+    const t17 = size === "small" ? "text-sm" : "";
+    const t18 = expandable ? active ? "w-[220px]" : "w-[180px]" : "";
+    let t19;
+    if ($[22] !== innerClassName || $[23] !== inputPaddingClass || $[24] !== t16 || $[25] !== t17 || $[26] !== t18) {
+      t19 = cls(t16, "placeholder-text-disabled dark:placeholder-text-disabled-dark", "relative flex items-center rounded-lg transition-all bg-transparent outline-none appearance-none border-none", inputPaddingClass, "h-full text-current", t17, t18, innerClassName);
+      $[22] = innerClassName;
+      $[23] = inputPaddingClass;
+      $[24] = t16;
+      $[25] = t17;
+      $[26] = t18;
+      $[27] = t19;
     } else {
-      t17 = $[19];
+      t19 = $[27];
     }
-    let t18;
-    if ($[20] !== autoFocus || $[21] !== inputRef || $[22] !== onClick || $[23] !== placeholder || $[24] !== t10 || $[25] !== t11 || $[26] !== t12 || $[27] !== t17) {
-      t18 = /* @__PURE__ */ jsxRuntime.jsx("input", { value: t10, ref: inputRef, onClick, placeholder, readOnly: t11, onChange: t12, autoFocus, onFocus: t13, onBlur: t14, className: t17 });
-      $[20] = autoFocus;
-      $[21] = inputRef;
-      $[22] = onClick;
-      $[23] = placeholder;
-      $[24] = t10;
-      $[25] = t11;
-      $[26] = t12;
-      $[27] = t17;
-      $[28] = t18;
+    let t20;
+    if ($[28] !== autoFocus || $[29] !== inputRef || $[30] !== onClick || $[31] !== placeholder || $[32] !== t11 || $[33] !== t12 || $[34] !== t13 || $[35] !== t19) {
+      t20 = /* @__PURE__ */ jsxRuntime.jsx("input", { value: t11, ref: inputRef, onClick, placeholder, readOnly: t12, onChange: t13, autoFocus, onFocus: t14, onBlur: t15, className: t19 });
+      $[28] = autoFocus;
+      $[29] = inputRef;
+      $[30] = onClick;
+      $[31] = placeholder;
+      $[32] = t11;
+      $[33] = t12;
+      $[34] = t13;
+      $[35] = t19;
+      $[36] = t20;
     } else {
-      t18 = $[28];
+      t20 = $[36];
     }
-    let t19;
-    if ($[29] !== clearText || $[30] !== large || $[31] !== searchText) {
-      t19 = searchText ? /* @__PURE__ */ jsxRuntime.jsx(IconButton, { className: `${large ? "mr-2 top-1" : "mr-1 top-0"} absolute right-0 z-10`, onClick: clearText, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: "small" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    let t21;
+    if ($[37] !== clearText || $[38] !== searchText || $[39] !== size) {
+      t21 = searchText ? /* @__PURE__ */ jsxRuntime.jsx(IconButton, { className: `${size === "small" ? "mr-0 top-0" : "mr-1 top-0"} absolute right-0 z-10`, size: "small", onClick: clearText, children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { size: "smallest" }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
         width: 26
       } });
-      $[29] = clearText;
-      $[30] = large;
-      $[31] = searchText;
-      $[32] = t19;
+      $[37] = clearText;
+      $[38] = searchText;
+      $[39] = size;
+      $[40] = t21;
     } else {
-      t19 = $[32];
+      t21 = $[40];
     }
-    let t20;
-    if ($[33] !== onClick || $[34] !== t18 || $[35] !== t19 || $[36] !== t8 || $[37] !== t9) {
-      t20 = /* @__PURE__ */ jsxRuntime.jsxs("div", { onClick, className: t8, children: [
-        t9,
-        t18,
-        t19
+    let t22;
+    if ($[41] !== onClick || $[42] !== t10 || $[43] !== t20 || $[44] !== t21 || $[45] !== t7) {
+      t22 = /* @__PURE__ */ jsxRuntime.jsxs("div", { onClick, className: t7, children: [
+        t10,
+        t20,
+        t21
       ] });
-      $[33] = onClick;
-      $[34] = t18;
-      $[35] = t19;
-      $[36] = t8;
-      $[37] = t9;
-      $[38] = t20;
+      $[41] = onClick;
+      $[42] = t10;
+      $[43] = t20;
+      $[44] = t21;
+      $[45] = t7;
+      $[46] = t22;
     } else {
-      t20 = $[38];
+      t22 = $[46];
     }
-    return t20;
+    return t22;
   }
-  const Select = React.forwardRef(({
-    inputRef,
-    open,
-    name,
-    fullWidth = false,
-    id,
-    onOpenChange,
-    value,
-    onChange,
-    onValueChange,
-    className,
-    inputClassName,
-    viewportClassName,
-    placeholder,
-    renderValue,
-    label,
-    size = "large",
-    error,
-    disabled,
-    padding = true,
-    position = "item-aligned",
-    endAdornment,
-    invisible,
-    children,
-    dataType = "string",
-    ...props
-  }, ref) => {
-    const [openInternal, setOpenInternal] = React.useState(open ?? false);
+  const SearchableSelect = React__namespace.forwardRef((t0, ref) => {
+    const $ = reactCompilerRuntime.c(106);
+    const {
+      value,
+      onValueChange,
+      placeholder: t1,
+      label,
+      size: t2,
+      disabled,
+      error,
+      invisible,
+      className,
+      inputClassName,
+      renderValue,
+      modalPopover: t3,
+      allowCustomValues: t4,
+      portalContainer,
+      autoFocus,
+      children
+    } = t0;
+    const placeholder = t1 === void 0 ? "Select..." : t1;
+    const size = t2 === void 0 ? "large" : t2;
+    const modalPopover = t3 === void 0 ? false : t3;
+    const allowCustomValues = t4 === void 0 ? true : t4;
+    const [isMounted, setIsMounted] = React.useState(false);
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    const [search, setSearch] = React.useState("");
+    const inputRef = React.useRef(null);
+    const contextContainer = usePortalContainer();
+    const finalContainer = portalContainer ?? contextContainer ?? void 0;
+    let t5;
+    let t6;
+    if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t5 = () => {
+        setIsMounted(true);
+      };
+      t6 = [];
+      $[0] = t5;
+      $[1] = t6;
+    } else {
+      t5 = $[0];
+      t6 = $[1];
+    }
+    React.useEffect(t5, t6);
+    let t7;
+    if ($[2] !== autoFocus || $[3] !== isMounted) {
+      t7 = [autoFocus, isMounted];
+      $[2] = autoFocus;
+      $[3] = isMounted;
+      $[4] = t7;
+    } else {
+      t7 = $[4];
+    }
     React.useEffect(() => {
-      setOpenInternal(open ?? false);
-    }, [open]);
-    const onValueChangeInternal = React.useCallback((newValue) => {
-      let typedValue = newValue;
-      if (dataType === "boolean") {
-        if (newValue === "true") typedValue = true;
-        else if (newValue === "false") typedValue = false;
-      } else if (dataType === "number") {
-        if (!isNaN(Number(newValue)) && newValue.trim() !== "") typedValue = Number(newValue);
+      if (autoFocus && isMounted) {
+        onPopoverOpenChange(true);
+      }
+    }, t7);
+    let t8;
+    let map;
+    if ($[5] !== children) {
+      map = /* @__PURE__ */ new Map();
+      React__namespace.Children.forEach(children, (child) => {
+        if (React__namespace.isValidElement(child) && child.props.value != null) {
+          map.set(String(child.props.value), child.props.children ?? child.props.value);
+        }
+      });
+      $[5] = children;
+      $[6] = map;
+    } else {
+      map = $[6];
+    }
+    t8 = map;
+    const itemsMap = t8;
+    const onPopoverOpenChange = (open) => {
+      setIsPopoverOpen(open);
+      if (open) {
+        setSearch(value ?? "");
+        setTimeout(() => inputRef.current?.focus(), 0);
+      }
+    };
+    let t9;
+    if ($[7] !== onValueChange) {
+      t9 = (selectedValue) => {
+        onValueChange?.(selectedValue);
+        setIsPopoverOpen(false);
+        setSearch("");
+      };
+      $[7] = onValueChange;
+      $[8] = t9;
+    } else {
+      t9 = $[8];
+    }
+    const handleSelect = t9;
+    let t10;
+    if ($[9] !== allowCustomValues || $[10] !== handleSelect || $[11] !== itemsMap || $[12] !== search) {
+      t10 = (e) => {
+        if (e.key === "Enter" && allowCustomValues) {
+          const trimmed = search.trim();
+          if (trimmed) {
+            const isExistingItem = itemsMap.has(trimmed);
+            if (!isExistingItem) {
+              e.preventDefault();
+              handleSelect(trimmed);
+            }
+          }
+        } else {
+          if (e.key === "Escape") {
+            setIsPopoverOpen(false);
+          }
+        }
+      };
+      $[9] = allowCustomValues;
+      $[10] = handleSelect;
+      $[11] = itemsMap;
+      $[12] = search;
+      $[13] = t10;
+    } else {
+      t10 = $[13];
+    }
+    const handleInputKeyDown = t10;
+    let t11;
+    bb0: {
+      if (!value) {
+        t11 = null;
+        break bb0;
+      }
+      if (renderValue) {
+        let t123;
+        if ($[14] !== renderValue || $[15] !== value) {
+          t123 = renderValue(value);
+          $[14] = renderValue;
+          $[15] = value;
+          $[16] = t123;
+        } else {
+          t123 = $[16];
+        }
+        t11 = t123;
+        break bb0;
+      }
+      let t122;
+      if ($[17] !== itemsMap || $[18] !== value) {
+        t122 = itemsMap.get(value);
+        $[17] = itemsMap;
+        $[18] = value;
+        $[19] = t122;
+      } else {
+        t122 = $[19];
+      }
+      const itemLabel = t122;
+      if (itemLabel) {
+        t11 = itemLabel;
+        break bb0;
+      }
+      let t132;
+      if ($[20] !== value) {
+        t132 = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value });
+        $[20] = value;
+        $[21] = t132;
+      } else {
+        t132 = $[21];
       }
-      onValueChange?.(typedValue);
-      if (onChange) {
-        const event = {
-          target: {
-            name,
-            value: typedValue
+      t11 = t132;
+    }
+    const displayLabel = t11;
+    useInjectStyles("SearchableSelect", `
+[cmdk-group] {
+  max-height: 45vh;
+  overflow-y: auto;
+}`);
+    let t12;
+    if ($[22] !== error || $[23] !== label) {
+      t12 = label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("text-sm font-medium ml-3.5 mb-1", error ? "text-red-500 dark:text-red-600" : "text-surface-accent-500 dark:text-surface-accent-300"), children: label }) : label);
+      $[22] = error;
+      $[23] = label;
+      $[24] = t12;
+    } else {
+      t12 = $[24];
+    }
+    const t13 = isMounted && isPopoverOpen;
+    let t14;
+    if ($[25] !== disabled || $[26] !== isPopoverOpen || $[27] !== onPopoverOpenChange) {
+      t14 = () => !disabled && onPopoverOpenChange(!isPopoverOpen);
+      $[25] = disabled;
+      $[26] = isPopoverOpen;
+      $[27] = onPopoverOpenChange;
+      $[28] = t14;
+    } else {
+      t14 = $[28];
+    }
+    const t15 = size === "smallest";
+    const t16 = size === "small";
+    const t17 = size === "medium";
+    const t18 = size === "large";
+    let t19;
+    if ($[29] !== className || $[30] !== disabled || $[31] !== inputClassName || $[32] !== invisible || $[33] !== size || $[34] !== t15 || $[35] !== t16 || $[36] !== t17 || $[37] !== t18) {
+      t19 = cls({
+        "min-h-[28px]": t15,
+        "min-h-[32px]": t16,
+        "min-h-[44px]": t17,
+        "min-h-[64px]": t18
+      }, {
+        "py-0.5": size === "smallest",
+        "py-1": size === "small",
+        "py-2": size === "medium" || size === "large"
+      }, {
+        "px-2": size === "small" || size === "smallest",
+        "px-4": size === "medium" || size === "large"
+      }, "select-none rounded-md text-sm w-full text-start", "focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, inputClassName);
+      $[29] = className;
+      $[30] = disabled;
+      $[31] = inputClassName;
+      $[32] = invisible;
+      $[33] = size;
+      $[34] = t15;
+      $[35] = t16;
+      $[36] = t17;
+      $[37] = t18;
+      $[38] = t19;
+    } else {
+      t19 = $[38];
+    }
+    let t20;
+    if ($[39] !== displayLabel || $[40] !== placeholder) {
+      t20 = displayLabel ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-surface-accent-500 dark:text-surface-accent-400", children: placeholder });
+      $[39] = displayLabel;
+      $[40] = placeholder;
+      $[41] = t20;
+    } else {
+      t20 = $[41];
+    }
+    let t21;
+    if ($[42] !== t20) {
+      t21 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow min-w-0 truncate", children: t20 });
+      $[42] = t20;
+      $[43] = t21;
+    } else {
+      t21 = $[43];
+    }
+    let t22;
+    if ($[44] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t22 = cls("flex-shrink-0 flex items-center");
+      $[44] = t22;
+    } else {
+      t22 = $[44];
+    }
+    const t23 = size === "large" ? "medium" : "small";
+    const t24 = isPopoverOpen ? "rotate-180" : "";
+    let t25;
+    if ($[45] !== t24) {
+      t25 = cls("transition", t24);
+      $[45] = t24;
+      $[46] = t25;
+    } else {
+      t25 = $[46];
+    }
+    let t26;
+    if ($[47] !== t23 || $[48] !== t25) {
+      t26 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t22, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowDownIcon, { size: t23, className: t25 }) });
+      $[47] = t23;
+      $[48] = t25;
+      $[49] = t26;
+    } else {
+      t26 = $[49];
+    }
+    let t27;
+    if ($[50] !== t21 || $[51] !== t26) {
+      t27 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full gap-1", children: [
+        t21,
+        t26
+      ] });
+      $[50] = t21;
+      $[51] = t26;
+      $[52] = t27;
+    } else {
+      t27 = $[52];
+    }
+    let t28;
+    if ($[53] !== disabled || $[54] !== ref || $[55] !== t14 || $[56] !== t19 || $[57] !== t27) {
+      t28 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { ref, disabled, onClick: t14, className: t19, children: t27 }) });
+      $[53] = disabled;
+      $[54] = ref;
+      $[55] = t14;
+      $[56] = t19;
+      $[57] = t27;
+      $[58] = t28;
+    } else {
+      t28 = $[58];
+    }
+    let t29;
+    if ($[59] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t29 = cls("z-50 overflow-hidden border bg-white dark:bg-surface-900 rounded-lg", defaultBorderMixin);
+      $[59] = t29;
+    } else {
+      t29 = $[59];
+    }
+    let t30;
+    if ($[60] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t30 = {
+        width: "var(--radix-popover-trigger-width)",
+        minWidth: 180
+      };
+      $[60] = t30;
+    } else {
+      t30 = $[60];
+    }
+    let t31;
+    if ($[61] !== onPopoverOpenChange) {
+      t31 = () => onPopoverOpenChange(false);
+      $[61] = onPopoverOpenChange;
+      $[62] = t31;
+    } else {
+      t31 = $[62];
+    }
+    const t32 = size === "smallest" || size === "small";
+    const t33 = size === "medium" || size === "large";
+    let t34;
+    if ($[63] !== t32 || $[64] !== t33) {
+      t34 = cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full text-surface-accent-900 dark:text-white", {
+        "m-2 text-xs": t32,
+        "m-3 text-sm": t33
+      });
+      $[63] = t32;
+      $[64] = t33;
+      $[65] = t34;
+    } else {
+      t34 = $[65];
+    }
+    let t35;
+    if ($[66] !== handleInputKeyDown || $[67] !== search || $[68] !== t34) {
+      t35 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center", children: /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Input, { ref: inputRef, value: search, onValueChange: setSearch, className: t34, placeholder: "Search...", onKeyDown: handleInputKeyDown }) });
+      $[66] = handleInputKeyDown;
+      $[67] = search;
+      $[68] = t34;
+      $[69] = t35;
+    } else {
+      t35 = $[69];
+    }
+    let t36;
+    if ($[70] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t36 = /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "horizontal", className: "my-0" });
+      $[70] = t36;
+    } else {
+      t36 = $[70];
+    }
+    let t37;
+    if ($[71] !== allowCustomValues || $[72] !== handleSelect || $[73] !== itemsMap || $[74] !== search) {
+      t37 = allowCustomValues && search.trim() && !itemsMap.has(search.trim()) ? /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Empty, { className: "px-3 py-2 text-xs cursor-pointer text-primary hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", onClick: () => handleSelect(search.trim()), children: [
+        "Use “",
+        search.trim(),
+        "”"
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { className: "px-3 py-2 text-xs text-text-secondary dark:text-text-secondary-dark", children: "No results found." });
+      $[71] = allowCustomValues;
+      $[72] = handleSelect;
+      $[73] = itemsMap;
+      $[74] = search;
+      $[75] = t37;
+    } else {
+      t37 = $[75];
+    }
+    let t38;
+    if ($[76] !== children || $[77] !== handleSelect || $[78] !== value) {
+      let t392;
+      if ($[80] !== handleSelect || $[81] !== value) {
+        t392 = (child_0) => {
+          if (!React__namespace.isValidElement(child_0)) {
+            return child_0;
           }
+          const itemValue = child_0.props.value;
+          const isSelected = String(value) === String(itemValue);
+          return /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Item, { value: String(itemValue), onMouseDown: _temp$2, onSelect: () => handleSelect(String(itemValue)), className: cls("flex flex-row items-center gap-1.5", isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "", "cursor-pointer", "m-0.5", "ring-offset-transparent", "p-1.5 rounded", "aria-[selected=true]:outline-none", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "text-surface-accent-700 dark:text-surface-accent-300", child_0.props.className), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("w-4 h-4 flex items-center justify-center flex-shrink-0", isSelected ? "text-primary" : "text-transparent"), children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: 14 }) }),
+            child_0.props.children ?? child_0.props.value
+          ] }, String(itemValue));
         };
-        onChange(event);
+        $[80] = handleSelect;
+        $[81] = value;
+        $[82] = t392;
+      } else {
+        t392 = $[82];
       }
-    }, [onChange, onValueChange, name]);
+      t38 = React__namespace.Children.map(children, t392);
+      $[76] = children;
+      $[77] = handleSelect;
+      $[78] = value;
+      $[79] = t38;
+    } else {
+      t38 = $[79];
+    }
+    let t39;
+    if ($[83] !== t38) {
+      t39 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Group, { children: t38 });
+      $[83] = t38;
+      $[84] = t39;
+    } else {
+      t39 = $[84];
+    }
+    let t40;
+    if ($[85] !== t37 || $[86] !== t39) {
+      t40 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { children: [
+        t37,
+        t39
+      ] });
+      $[85] = t37;
+      $[86] = t39;
+      $[87] = t40;
+    } else {
+      t40 = $[87];
+    }
+    let t41;
+    if ($[88] !== t35 || $[89] !== t40) {
+      t41 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command, { shouldFilter: true, children: [
+        t35,
+        t36,
+        t40
+      ] });
+      $[88] = t35;
+      $[89] = t40;
+      $[90] = t41;
+    } else {
+      t41 = $[90];
+    }
+    let t42;
+    if ($[91] !== t31 || $[92] !== t41) {
+      t42 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Content, { className: t29, align: "start", sideOffset: 4, style: t30, onEscapeKeyDown: t31, children: t41 });
+      $[91] = t31;
+      $[92] = t41;
+      $[93] = t42;
+    } else {
+      t42 = $[93];
+    }
+    let t43;
+    if ($[94] !== finalContainer || $[95] !== t42) {
+      t43 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { container: finalContainer, children: t42 });
+      $[94] = finalContainer;
+      $[95] = t42;
+      $[96] = t43;
+    } else {
+      t43 = $[96];
+    }
+    let t44;
+    if ($[97] !== modalPopover || $[98] !== onPopoverOpenChange || $[99] !== t13 || $[100] !== t28 || $[101] !== t43) {
+      t44 = /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, { open: t13, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
+        t28,
+        t43
+      ] });
+      $[97] = modalPopover;
+      $[98] = onPopoverOpenChange;
+      $[99] = t13;
+      $[100] = t28;
+      $[101] = t43;
+      $[102] = t44;
+    } else {
+      t44 = $[102];
+    }
+    let t45;
+    if ($[103] !== t12 || $[104] !== t44) {
+      t45 = /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        t12,
+        t44
+      ] });
+      $[103] = t12;
+      $[104] = t44;
+      $[105] = t45;
+    } else {
+      t45 = $[105];
+    }
+    return t45;
+  });
+  SearchableSelect.displayName = "SearchableSelect";
+  function SearchableSelectItem(_props) {
+    return null;
+  }
+  function _temp$2(e_0) {
+    e_0.preventDefault();
+    e_0.stopPropagation();
+  }
+  const Select = React.forwardRef((t0, ref) => {
+    const $ = reactCompilerRuntime.c(121);
+    let children;
+    let className;
+    let disabled;
+    let endAdornment;
+    let error;
+    let id;
+    let inputClassName;
+    let inputRef;
+    let invisible;
+    let label;
+    let manualContainer;
+    let name;
+    let onChange;
+    let onOpenChange;
+    let onValueChange;
+    let open;
+    let placeholder;
+    let props;
+    let renderValue;
+    let t1;
+    let t2;
+    let t3;
+    let t4;
+    let t5;
+    let value;
+    let viewportClassName;
+    if ($[0] !== t0) {
+      ({
+        inputRef,
+        open,
+        name,
+        fullWidth: t1,
+        id,
+        onOpenChange,
+        value,
+        onChange,
+        onValueChange,
+        className,
+        inputClassName,
+        viewportClassName,
+        placeholder,
+        renderValue,
+        label,
+        size: t2,
+        error,
+        disabled,
+        padding: t3,
+        position: t4,
+        endAdornment,
+        invisible,
+        children,
+        dataType: t5,
+        portalContainer: manualContainer,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = children;
+      $[2] = className;
+      $[3] = disabled;
+      $[4] = endAdornment;
+      $[5] = error;
+      $[6] = id;
+      $[7] = inputClassName;
+      $[8] = inputRef;
+      $[9] = invisible;
+      $[10] = label;
+      $[11] = manualContainer;
+      $[12] = name;
+      $[13] = onChange;
+      $[14] = onOpenChange;
+      $[15] = onValueChange;
+      $[16] = open;
+      $[17] = placeholder;
+      $[18] = props;
+      $[19] = renderValue;
+      $[20] = t1;
+      $[21] = t2;
+      $[22] = t3;
+      $[23] = t4;
+      $[24] = t5;
+      $[25] = value;
+      $[26] = viewportClassName;
+    } else {
+      children = $[1];
+      className = $[2];
+      disabled = $[3];
+      endAdornment = $[4];
+      error = $[5];
+      id = $[6];
+      inputClassName = $[7];
+      inputRef = $[8];
+      invisible = $[9];
+      label = $[10];
+      manualContainer = $[11];
+      name = $[12];
+      onChange = $[13];
+      onOpenChange = $[14];
+      onValueChange = $[15];
+      open = $[16];
+      placeholder = $[17];
+      props = $[18];
+      renderValue = $[19];
+      t1 = $[20];
+      t2 = $[21];
+      t3 = $[22];
+      t4 = $[23];
+      t5 = $[24];
+      value = $[25];
+      viewportClassName = $[26];
+    }
+    const fullWidth = t1 === void 0 ? false : t1;
+    const size = t2 === void 0 ? "large" : t2;
+    const padding = t3 === void 0 ? true : t3;
+    const position = t4 === void 0 ? "item-aligned" : t4;
+    const dataType = t5 === void 0 ? "string" : t5;
+    const [openInternal, setOpenInternal] = React.useState(open ?? false);
+    let t6;
+    let t7;
+    if ($[27] !== open) {
+      t6 = () => {
+        setOpenInternal(open ?? false);
+      };
+      t7 = [open];
+      $[27] = open;
+      $[28] = t6;
+      $[29] = t7;
+    } else {
+      t6 = $[28];
+      t7 = $[29];
+    }
+    React.useEffect(t6, t7);
+    const contextContainer = usePortalContainer();
+    const finalContainer = manualContainer ?? contextContainer ?? void 0;
+    let t8;
+    if ($[30] !== dataType || $[31] !== name || $[32] !== onChange || $[33] !== onValueChange) {
+      t8 = (newValue) => {
+        let typedValue = newValue;
+        if (dataType === "boolean") {
+          if (newValue === "true") {
+            typedValue = true;
+          } else {
+            if (newValue === "false") {
+              typedValue = false;
+            }
+          }
+        } else {
+          if (dataType === "number") {
+            if (!isNaN(Number(newValue)) && newValue.trim() !== "") {
+              typedValue = Number(newValue);
+            }
+          }
+        }
+        onValueChange?.(typedValue);
+        if (onChange) {
+          const event = {
+            target: {
+              name,
+              value: typedValue
+            }
+          };
+          onChange(event);
+        }
+      };
+      $[30] = dataType;
+      $[31] = name;
+      $[32] = onChange;
+      $[33] = onValueChange;
+      $[34] = t8;
+    } else {
+      t8 = $[34];
+    }
+    const onValueChangeInternal = t8;
     const hasValue = Array.isArray(value) ? value.length > 0 : value != null && value !== "" && value !== void 0;
     const stringValue = value !== void 0 ? String(value) : void 0;
-    const selectedChild = React.useMemo(() => {
-      if (!hasValue || renderValue) return null;
-      const childrenProps = React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-          return child.props;
-        }
-      }).filter(Boolean);
-      const option = childrenProps.find((o) => String(o.value) === String(value));
-      return option?.children;
-    }, [children, hasValue, renderValue, value]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Root, { name, value: stringValue, open: openInternal, disabled, onValueChange: onValueChangeInternal, onOpenChange: (open_0) => {
-      onOpenChange?.(open_0);
-      setOpenInternal(open_0);
-    }, ...props, children: [
-      typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(SelectInputLabel, { error, children: label }) : label,
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls("select-none rounded-md text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, {
+    let t9;
+    bb0: {
+      if (!hasValue || renderValue) {
+        t9 = null;
+        break bb0;
+      }
+      let found;
+      if ($[35] !== children || $[36] !== value) {
+        found = null;
+        React.Children.forEach(children, (child) => {
+          if (React.isValidElement(child) && String(child.props.value) === String(value)) {
+            found = child.props.children;
+          }
+        });
+        $[35] = children;
+        $[36] = value;
+        $[37] = found;
+      } else {
+        found = $[37];
+      }
+      t9 = found;
+    }
+    const displayChildren = t9;
+    let t10;
+    if ($[38] !== onOpenChange) {
+      t10 = (open_0) => {
+        onOpenChange?.(open_0);
+        setOpenInternal(open_0);
+      };
+      $[38] = onOpenChange;
+      $[39] = t10;
+    } else {
+      t10 = $[39];
+    }
+    let t11;
+    if ($[40] !== error || $[41] !== label) {
+      t11 = typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(SelectInputLabel, { error, children: label }) : label;
+      $[40] = error;
+      $[41] = label;
+      $[42] = t11;
+    } else {
+      t11 = $[42];
+    }
+    const t12 = invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin;
+    const t13 = disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin;
+    const t14 = size === "smallest";
+    const t15 = size === "small";
+    const t16 = size === "medium";
+    const t17 = size === "large";
+    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, {
+        "min-h-[28px]": t14,
+        "min-h-[32px]": t15,
+        "min-h-[44px]": t16,
+        "min-h-[64px]": t17,
+        "w-fit": t18,
+        "w-full": fullWidth
+      });
+      $[43] = className;
+      $[44] = fullWidth;
+      $[45] = t12;
+      $[46] = t13;
+      $[47] = t14;
+      $[48] = t15;
+      $[49] = t16;
+      $[50] = t17;
+      $[51] = t18;
+      $[52] = t19;
+    } else {
+      t19 = $[52];
+    }
+    let t20;
+    if ($[53] !== disabled || $[54] !== error || $[55] !== fullWidth || $[56] !== inputClassName || $[57] !== padding || $[58] !== size) {
+      t20 = 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", {
         "min-h-[28px]": size === "smallest",
         "min-h-[32px]": size === "small",
         "min-h-[44px]": size === "medium",
         "min-h-[64px]": size === "large",
-        "w-fit": !fullWidth,
-        "w-full": fullWidth
-      }), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Trigger, { ref: inputRef, id, asChild: false, type: "button", className: cls("h-full", padding ? {
-          "px-4": size === "large",
-          "px-3": size === "medium",
-          "px-2": size === "small" || size === "smallest"
-        } : "", "outline-none focus:outline-none", "select-none rounded-md text-sm", error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark", error ? "border border-red-500 dark:border-red-600" : "", disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white", "relative flex flex-row items-center", {
-          "min-h-[28px]": size === "smallest",
-          "min-h-[32px]": size === "small",
-          "min-h-[44px]": size === "medium",
-          "min-h-[64px]": size === "large",
-          "w-full": fullWidth,
-          "w-fit": !fullWidth
-        }, inputClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", {
-            "min-h-[28px]": size === "smallest",
-            "min-h-[32px]": size === "small",
-            "min-h-[44px]": size === "medium",
-            "min-h-[64px]": size === "large"
-          }), children: /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Value, { onClick: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          }, placeholder, className: "w-full", children: [
-            hasValue && value !== void 0 && renderValue ? renderValue(value) : placeholder,
-            hasValue && !renderValue && selectedChild
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", open ? "rotate-180" : "", {
-            "px-2": size === "large",
-            "px-1": size === "medium" || size === "small"
-          }) }) })
-        ] }),
-        endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("h-full flex items-center absolute right-0 pr-12"), onClick: (e_0) => {
-          e_0.preventDefault();
-          e_0.stopPropagation();
-        }, children: endAdornment })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Content, { position, className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin), children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: cls("p-1", viewportClassName), style: {
+        "w-full": fullWidth,
+        "w-fit": !fullWidth
+      }, inputClassName);
+      $[53] = disabled;
+      $[54] = error;
+      $[55] = fullWidth;
+      $[56] = inputClassName;
+      $[57] = padding;
+      $[58] = size;
+      $[59] = t20;
+    } else {
+      t20 = $[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
+      });
+      $[60] = t21;
+      $[61] = t22;
+      $[62] = t23;
+      $[63] = t24;
+      $[64] = t25;
+    } else {
+      t25 = $[64];
+    }
+    let t26;
+    if ($[65] !== displayChildren || $[66] !== hasValue || $[67] !== placeholder || $[68] !== renderValue || $[69] !== value) {
+      t26 = hasValue && value !== void 0 && renderValue ? renderValue(value) : displayChildren || placeholder;
+      $[65] = displayChildren;
+      $[66] = hasValue;
+      $[67] = placeholder;
+      $[68] = renderValue;
+      $[69] = value;
+      $[70] = t26;
+    } else {
+      t26 = $[70];
+    }
+    let t27;
+    if ($[71] !== placeholder || $[72] !== t26) {
+      t27 = /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { onClick: _temp$1, placeholder, className: "w-full", children: t26 });
+      $[71] = placeholder;
+      $[72] = t26;
+      $[73] = t27;
+    } else {
+      t27 = $[73];
+    }
+    let t28;
+    if ($[74] !== ref || $[75] !== t25 || $[76] !== t27) {
+      t28 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: t25, children: t27 });
+      $[74] = ref;
+      $[75] = t25;
+      $[76] = t27;
+      $[77] = t28;
+    } else {
+      t28 = $[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
+      });
+      $[78] = t30;
+      $[79] = t31;
+      $[80] = t32;
+      $[81] = t33;
+    } else {
+      t33 = $[81];
+    }
+    let t34;
+    if ($[82] !== t29 || $[83] !== t33) {
+      t34 = /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowDownIcon, { size: t29, className: t33 }) });
+      $[82] = t29;
+      $[83] = t33;
+      $[84] = t34;
+    } else {
+      t34 = $[84];
+    }
+    let t35;
+    if ($[85] !== id || $[86] !== inputRef || $[87] !== t20 || $[88] !== t28 || $[89] !== t34) {
+      t35 = /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Trigger, { ref: inputRef, id, asChild: false, type: "button", className: t20, children: [
+        t28,
+        t34
+      ] });
+      $[85] = id;
+      $[86] = inputRef;
+      $[87] = t20;
+      $[88] = t28;
+      $[89] = t34;
+      $[90] = t35;
+    } else {
+      t35 = $[90];
+    }
+    let t36;
+    if ($[91] !== endAdornment) {
+      t36 = endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("h-full flex items-center absolute right-0 pr-12"), onClick: _temp2, children: endAdornment });
+      $[91] = endAdornment;
+      $[92] = t36;
+    } else {
+      t36 = $[92];
+    }
+    let t37;
+    if ($[93] !== t19 || $[94] !== t35 || $[95] !== t36) {
+      t37 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t19, children: [
+        t35,
+        t36
+      ] });
+      $[93] = t19;
+      $[94] = t35;
+      $[95] = t36;
+      $[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;
+    } else {
+      t38 = $[97];
+    }
+    let t39;
+    if ($[98] !== viewportClassName) {
+      t39 = cls("p-1", viewportClassName);
+      $[98] = viewportClassName;
+      $[99] = t39;
+    } else {
+      t39 = $[99];
+    }
+    let t40;
+    if ($[100] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t40 = {
         maxHeight: "var(--radix-select-content-available-height)"
-      }, children }) }) })
-    ] });
+      };
+      $[100] = t40;
+    } else {
+      t40 = $[100];
+    }
+    let t41;
+    if ($[101] !== children || $[102] !== t39) {
+      t41 = /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: t39, style: t40, children });
+      $[101] = children;
+      $[102] = t39;
+      $[103] = t41;
+    } else {
+      t41 = $[103];
+    }
+    let t42;
+    if ($[104] !== position || $[105] !== t41) {
+      t42 = /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Content, { position, className: t38, children: t41 });
+      $[104] = position;
+      $[105] = t41;
+      $[106] = t42;
+    } else {
+      t42 = $[106];
+    }
+    let t43;
+    if ($[107] !== finalContainer || $[108] !== t42) {
+      t43 = /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { container: finalContainer, children: t42 });
+      $[107] = finalContainer;
+      $[108] = t42;
+      $[109] = t43;
+    } else {
+      t43 = $[109];
+    }
+    let t44;
+    if ($[110] !== disabled || $[111] !== name || $[112] !== onValueChangeInternal || $[113] !== openInternal || $[114] !== props || $[115] !== stringValue || $[116] !== t10 || $[117] !== t11 || $[118] !== t37 || $[119] !== t43) {
+      t44 = /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Root, { name, value: stringValue, open: openInternal, disabled, onValueChange: onValueChangeInternal, onOpenChange: t10, ...props, children: [
+        t11,
+        t37,
+        t43
+      ] });
+      $[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;
   });
   Select.displayName = "Select";
   const SelectItem = React.memo(function SelectItem2(t0) {
@@ -35543,6 +37142,14 @@
     }
     return t3;
   });
+  function _temp$1(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  function _temp2(e_0) {
+    e_0.preventDefault();
+    e_0.stopPropagation();
+  }
   function SliderThumb(props) {
     const $ = reactCompilerRuntime.c(13);
     const t0 = props.hovered;
@@ -35552,7 +37159,7 @@
       t2 = cls({
         "border-primary bg-primary outline-none": t1,
         "border-surface-accent-300 bg-surface-accent-300 dark:border-surface-700 dark:bg-surface-700": props.props.disabled
-      }, props.classes, "focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-opacity-50", "hover:ring-4 hover:ring-primary hover:ring-opacity-25", "block rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50");
+      }, props.classes, "focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-opacity-50 focus-visible:ring-primary/50", "hover:ring-4 hover:ring-primary hover:ring-opacity-25 hover:ring-primary/25", "block rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50");
       $[0] = props.classes;
       $[1] = props.props.disabled;
       $[2] = t1;
@@ -35570,7 +37177,7 @@
     }
     let t4;
     if ($[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-      t4 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100");
+      t4 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100");
       $[6] = t4;
     } else {
       t4 = $[6];
@@ -35675,7 +37282,7 @@
     }
     let t10;
     if ($[15] !== t6 || $[16] !== t9) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { style: t6, className: "relative w-full grow overflow-hidden rounded-full bg-surface-accent-300 bg-opacity-40 dark:bg-surface-700 dark:bg-opacity-40", children: t9 });
+      t10 = /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { style: t6, className: "relative w-full grow overflow-hidden rounded-full bg-surface-accent-300 bg-opacity-40 bg-surface-accent-300/40 dark:bg-surface-700 dark:bg-opacity-40 dark:bg-surface-700/40", children: t9 });
       $[15] = t6;
       $[16] = t9;
       $[17] = t10;
@@ -35730,13 +37337,14 @@
   });
   Slider.displayName = "Slider";
   const Sheet = (t0) => {
-    const $ = reactCompilerRuntime.c(66);
+    const $ = reactCompilerRuntime.c(70);
     let children;
     let className;
     let onOpenChange;
     let open;
     let overlayClassName;
     let overlayStyle;
+    let portalContainer;
     let props;
     let style;
     let t1;
@@ -35758,6 +37366,7 @@
         style,
         overlayClassName,
         overlayStyle,
+        portalContainer,
         ...props
       } = t0);
       $[0] = t0;
@@ -35767,13 +37376,14 @@
       $[4] = open;
       $[5] = overlayClassName;
       $[6] = overlayStyle;
-      $[7] = props;
-      $[8] = style;
-      $[9] = t1;
-      $[10] = t2;
-      $[11] = t3;
-      $[12] = title;
-      $[13] = transparent;
+      $[7] = portalContainer;
+      $[8] = props;
+      $[9] = style;
+      $[10] = t1;
+      $[11] = t2;
+      $[12] = t3;
+      $[13] = title;
+      $[14] = transparent;
     } else {
       children = $[1];
       className = $[2];
@@ -35781,21 +37391,24 @@
       open = $[4];
       overlayClassName = $[5];
       overlayStyle = $[6];
-      props = $[7];
-      style = $[8];
-      t1 = $[9];
-      t2 = $[10];
-      t3 = $[11];
-      title = $[12];
-      transparent = $[13];
+      portalContainer = $[7];
+      props = $[8];
+      style = $[9];
+      t1 = $[10];
+      t2 = $[11];
+      t3 = $[12];
+      title = $[13];
+      transparent = $[14];
     }
     const side = t1 === void 0 ? "right" : t1;
     const modal = t2 === void 0 ? true : t2;
     const includeBackgroundOverlay = t3 === void 0 ? true : t3;
     const [displayed, setDisplayed] = React.useState(false);
+    const contextContainer = usePortalContainer();
+    const finalContainer = portalContainer ?? contextContainer ?? void 0;
     let t4;
     let t5;
-    if ($[14] !== open) {
+    if ($[15] !== open) {
       t4 = () => {
         const timeout = setTimeout(() => {
           setDisplayed(open);
@@ -35803,12 +37416,12 @@
         return () => clearTimeout(timeout);
       };
       t5 = [open];
-      $[14] = open;
-      $[15] = t4;
-      $[16] = t5;
+      $[15] = open;
+      $[16] = t4;
+      $[17] = t5;
     } else {
-      t4 = $[15];
-      t5 = $[16];
+      t4 = $[16];
+      t5 = $[17];
     }
     React.useEffect(t4, t5);
     let T0;
@@ -35818,11 +37431,12 @@
     let t11;
     let t12;
     let t13;
+    let t14;
     let t6;
     let t7;
     let t8;
     let t9;
-    if ($[17] !== className || $[18] !== displayed || $[19] !== includeBackgroundOverlay || $[20] !== modal || $[21] !== onOpenChange || $[22] !== open || $[23] !== overlayClassName || $[24] !== overlayStyle || $[25] !== props || $[26] !== side || $[27] !== title || $[28] !== transparent) {
+    if ($[18] !== className || $[19] !== displayed || $[20] !== finalContainer || $[21] !== includeBackgroundOverlay || $[22] !== modal || $[23] !== onOpenChange || $[24] !== open || $[25] !== overlayClassName || $[26] !== overlayStyle || $[27] !== props || $[28] !== side || $[29] !== title || $[30] !== transparent) {
       const transformValue = {
         top: "-translate-y-full",
         bottom: "translate-y-full",
@@ -35836,113 +37450,118 @@
         right: "border-l"
       };
       T2 = DialogPrimitive__namespace.Root;
-      t11 = displayed || open;
-      t12 = modal;
-      t13 = onOpenChange;
+      t12 = displayed || open;
+      t13 = modal;
+      t14 = onOpenChange;
       T1 = DialogPrimitive__namespace.Portal;
-      const t142 = title ?? "Sheet";
-      if ($[40] !== t142) {
-        t9 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { autoFocus: true, tabIndex: 0, children: t142 });
-        $[40] = t142;
-        $[41] = t9;
+      t9 = finalContainer;
+      const t152 = title ?? "Sheet";
+      if ($[43] !== t152) {
+        t10 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { autoFocus: true, tabIndex: 0, children: t152 });
+        $[43] = t152;
+        $[44] = t10;
       } else {
-        t9 = $[41];
+        t10 = $[44];
       }
-      if ($[42] !== displayed || $[43] !== includeBackgroundOverlay || $[44] !== open || $[45] !== overlayClassName || $[46] !== overlayStyle) {
-        t10 = includeBackgroundOverlay && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: cls("outline-none", "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm", "bg-black bg-opacity-50", "dark:bg-surface-900 dark:bg-opacity-60", displayed && open ? "opacity-100" : "opacity-0", overlayClassName), style: {
+      if ($[45] !== displayed || $[46] !== includeBackgroundOverlay || $[47] !== open || $[48] !== overlayClassName || $[49] !== overlayStyle) {
+        t11 = includeBackgroundOverlay && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: cls("outline-none", "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm", "bg-black bg-opacity-50 bg-black/50", "dark:bg-surface-900 dark:bg-opacity-60 dark:bg-surface-900/60", displayed && open ? "opacity-100" : "opacity-0", overlayClassName), style: {
           pointerEvents: displayed ? "auto" : "none",
           ...overlayStyle
         } });
-        $[42] = displayed;
-        $[43] = includeBackgroundOverlay;
-        $[44] = open;
-        $[45] = overlayClassName;
-        $[46] = overlayStyle;
-        $[47] = t10;
+        $[45] = displayed;
+        $[46] = includeBackgroundOverlay;
+        $[47] = open;
+        $[48] = overlayClassName;
+        $[49] = overlayStyle;
+        $[50] = t11;
       } else {
-        t10 = $[47];
+        t11 = $[50];
       }
       T0 = DialogPrimitive__namespace.Content;
       t6 = props;
       t7 = _temp;
       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);
-      $[17] = className;
-      $[18] = displayed;
-      $[19] = includeBackgroundOverlay;
-      $[20] = modal;
-      $[21] = onOpenChange;
-      $[22] = open;
-      $[23] = overlayClassName;
-      $[24] = overlayStyle;
-      $[25] = props;
-      $[26] = side;
-      $[27] = title;
-      $[28] = transparent;
-      $[29] = T0;
-      $[30] = T1;
-      $[31] = T2;
-      $[32] = t10;
-      $[33] = t11;
-      $[34] = t12;
-      $[35] = t13;
-      $[36] = t6;
-      $[37] = t7;
-      $[38] = t8;
-      $[39] = t9;
-    } else {
-      T0 = $[29];
-      T1 = $[30];
-      T2 = $[31];
-      t10 = $[32];
-      t11 = $[33];
-      t12 = $[34];
-      t13 = $[35];
-      t6 = $[36];
-      t7 = $[37];
-      t8 = $[38];
-      t9 = $[39];
-    }
-    let t14;
-    if ($[48] !== T0 || $[49] !== children || $[50] !== style || $[51] !== t6 || $[52] !== t7 || $[53] !== t8) {
-      t14 = /* @__PURE__ */ jsxRuntime.jsx(T0, { ...t6, onFocusCapture: t7, className: t8, style, children });
-      $[48] = T0;
-      $[49] = children;
-      $[50] = style;
-      $[51] = t6;
-      $[52] = t7;
-      $[53] = t8;
-      $[54] = t14;
-    } else {
-      t14 = $[54];
+      $[18] = className;
+      $[19] = displayed;
+      $[20] = finalContainer;
+      $[21] = includeBackgroundOverlay;
+      $[22] = modal;
+      $[23] = onOpenChange;
+      $[24] = open;
+      $[25] = overlayClassName;
+      $[26] = overlayStyle;
+      $[27] = props;
+      $[28] = side;
+      $[29] = title;
+      $[30] = transparent;
+      $[31] = T0;
+      $[32] = T1;
+      $[33] = T2;
+      $[34] = t10;
+      $[35] = t11;
+      $[36] = t12;
+      $[37] = t13;
+      $[38] = t14;
+      $[39] = t6;
+      $[40] = t7;
+      $[41] = t8;
+      $[42] = t9;
+    } else {
+      T0 = $[31];
+      T1 = $[32];
+      T2 = $[33];
+      t10 = $[34];
+      t11 = $[35];
+      t12 = $[36];
+      t13 = $[37];
+      t14 = $[38];
+      t6 = $[39];
+      t7 = $[40];
+      t8 = $[41];
+      t9 = $[42];
     }
     let t15;
-    if ($[55] !== T1 || $[56] !== t10 || $[57] !== t14 || $[58] !== t9) {
-      t15 = /* @__PURE__ */ jsxRuntime.jsxs(T1, { children: [
-        t9,
+    if ($[51] !== T0 || $[52] !== children || $[53] !== style || $[54] !== t6 || $[55] !== t7 || $[56] !== t8) {
+      t15 = /* @__PURE__ */ jsxRuntime.jsx(T0, { ...t6, onFocusCapture: t7, className: t8, style, children });
+      $[51] = T0;
+      $[52] = children;
+      $[53] = style;
+      $[54] = t6;
+      $[55] = t7;
+      $[56] = t8;
+      $[57] = t15;
+    } else {
+      t15 = $[57];
+    }
+    let t16;
+    if ($[58] !== T1 || $[59] !== t10 || $[60] !== t11 || $[61] !== t15 || $[62] !== t9) {
+      t16 = /* @__PURE__ */ jsxRuntime.jsxs(T1, { container: t9, children: [
         t10,
-        t14
+        t11,
+        t15
       ] });
-      $[55] = T1;
-      $[56] = t10;
-      $[57] = t14;
-      $[58] = t9;
-      $[59] = t15;
+      $[58] = T1;
+      $[59] = t10;
+      $[60] = t11;
+      $[61] = t15;
+      $[62] = t9;
+      $[63] = t16;
     } else {
-      t15 = $[59];
+      t16 = $[63];
     }
-    let t16;
-    if ($[60] !== T2 || $[61] !== t11 || $[62] !== t12 || $[63] !== t13 || $[64] !== t15) {
-      t16 = /* @__PURE__ */ jsxRuntime.jsx(T2, { open: t11, modal: t12, onOpenChange: t13, children: t15 });
-      $[60] = T2;
-      $[61] = t11;
-      $[62] = t12;
-      $[63] = t13;
-      $[64] = t15;
-      $[65] = t16;
-    } else {
-      t16 = $[65];
-    }
-    return t16;
+    let t17;
+    if ($[64] !== T2 || $[65] !== t12 || $[66] !== t13 || $[67] !== t14 || $[68] !== t16) {
+      t17 = /* @__PURE__ */ jsxRuntime.jsx(T2, { open: t12, modal: t13, onOpenChange: t14, children: t16 });
+      $[64] = T2;
+      $[65] = t12;
+      $[66] = t13;
+      $[67] = t14;
+      $[68] = t16;
+      $[69] = t17;
+    } else {
+      t17 = $[69];
+    }
+    return t17;
   };
   function _temp(event) {
     return event.preventDefault();
@@ -35950,203 +37569,222 @@
   function getStyleValue(value) {
     return parseInt(value, 10) || 0;
   }
-  const styles$1 = {
-    shadow: {
-      // Visibility needed to hide the extra text area on iPads
-      visibility: "hidden",
-      // Remove from the content flow
-      position: "absolute",
-      // Ignore the scrollbar width
-      overflow: "hidden",
-      height: 0,
-      top: 0,
-      left: 0,
-      // Create a new layer, increase the isolation of the computed values
-      transform: "translateZ(0)"
-    }
-  };
-  function isEmpty(obj) {
-    return obj === void 0 || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflow;
-  }
   const TextareaAutosize = React__namespace.forwardRef(function TextareaAutosize2(props, ref) {
-    const {
-      onChange,
-      onScroll,
-      onResize,
-      maxRows,
-      minRows = 1,
-      style,
-      value,
-      onFocus,
-      onBlur,
-      sizeRef,
-      ignoreBoxSizing,
-      ...other
-    } = props;
+    const $ = reactCompilerRuntime.c(38);
+    let ignoreBoxSizing;
+    let maxRows;
+    let onBlur;
+    let onChange;
+    let onFocus;
+    let onResize;
+    let onScroll;
+    let other;
+    let style;
+    let t0;
+    let value;
+    if ($[0] !== props) {
+      const {
+        onChange: t12,
+        onScroll: t22,
+        onResize: t32,
+        maxRows: t42,
+        minRows: t52,
+        style: t62,
+        value: t72,
+        onFocus: t82,
+        onBlur: t9,
+        sizeRef,
+        ignoreBoxSizing: t10,
+        ...t11
+      } = props;
+      onChange = t12;
+      onScroll = t22;
+      onResize = t32;
+      maxRows = t42;
+      t0 = t52;
+      style = t62;
+      value = t72;
+      onFocus = t82;
+      onBlur = t9;
+      ignoreBoxSizing = t10;
+      other = t11;
+      $[0] = props;
+      $[1] = ignoreBoxSizing;
+      $[2] = maxRows;
+      $[3] = onBlur;
+      $[4] = onChange;
+      $[5] = onFocus;
+      $[6] = onResize;
+      $[7] = onScroll;
+      $[8] = other;
+      $[9] = style;
+      $[10] = t0;
+      $[11] = value;
+    } else {
+      ignoreBoxSizing = $[1];
+      maxRows = $[2];
+      onBlur = $[3];
+      onChange = $[4];
+      onFocus = $[5];
+      onResize = $[6];
+      onScroll = $[7];
+      other = $[8];
+      style = $[9];
+      t0 = $[10];
+      value = $[11];
+    }
+    const minRows = t0 === void 0 ? 1 : t0;
     const {
       current: isControlled
     } = React__namespace.useRef(value != null);
     const inputRef = React__namespace.useRef(null);
     const handleRef = useForkRef(ref, inputRef);
-    const shadowRef = React__namespace.useRef(null);
-    const renders = React__namespace.useRef(0);
-    const [state, setState] = React__namespace.useState({
-      outerHeightStyle: 0
-    });
-    const getUpdatedState = React__namespace.useCallback(() => {
-      const input = inputRef.current;
-      if (typeof window === "undefined") {
-        return {
-          outerHeightStyle: 0
-        };
-      }
-      const containerWindow = window;
-      const computedStyle = containerWindow.getComputedStyle(input);
-      if (computedStyle.width === "0px") {
-        return {
-          outerHeightStyle: 0
-        };
-      }
-      const sizeReferenceElement = sizeRef?.current ?? shadowRef.current;
-      const inputShallow = shadowRef.current;
-      sizeReferenceElement.style.width = computedStyle.width;
-      inputShallow.value = input.value || props.placeholder || "x";
-      if (inputShallow.value.slice(-1) === "\n") {
-        inputShallow.value += " ";
-      }
-      const boxSizing = computedStyle.boxSizing;
-      const padding = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
-      const border = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
-      const minHeight = getStyleValue(computedStyle.minHeight);
-      const innerHeight = sizeReferenceElement.scrollHeight;
-      inputShallow.value = "x";
-      const singleRowHeight = sizeReferenceElement.scrollHeight;
-      let outerHeight = innerHeight;
-      if (minRows) {
-        outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
-      }
-      if (maxRows) {
-        outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
-      }
-      outerHeight = Math.max(outerHeight, singleRowHeight, minHeight);
-      const outerHeightStyle = outerHeight + (!ignoreBoxSizing && boxSizing === "border-box" ? padding + border : 0);
-      const overflow = Math.abs(outerHeight - innerHeight) <= 1;
-      return {
-        outerHeightStyle,
-        overflow
-      };
-    }, [maxRows, minRows, props.placeholder]);
-    const updateState = React__namespace.useCallback((prevState, newState) => {
-      const {
-        outerHeightStyle: outerHeightStyle_0,
-        overflow: overflow_0
-      } = newState;
-      if (renders.current < 20 && (outerHeightStyle_0 > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle_0) > 1 || prevState.overflow !== overflow_0)) {
-        renders.current += 1;
-        return {
-          overflow: overflow_0,
-          outerHeightStyle: outerHeightStyle_0
-        };
-      }
-      if (process.env.NODE_ENV !== "production") {
-        if (renders.current === 20) {
-          console.error(["MUI: Too many re-renders. The layout is unstable.", "TextareaAutosize limits the number of renders to prevent an infinite loop."].join("\n"));
+    let t1;
+    if ($[12] !== ignoreBoxSizing || $[13] !== maxRows || $[14] !== minRows || $[15] !== onResize) {
+      t1 = () => {
+        const el = inputRef.current;
+        if (!el || typeof window === "undefined") {
+          return;
         }
-      }
-      return prevState;
-    }, []);
-    const syncHeight = React__namespace.useCallback(() => {
-      const newState_0 = getUpdatedState();
-      if (isEmpty(newState_0)) {
-        return;
-      }
-      if (onResize) {
-        onResize(newState_0);
-      }
-      setState((prevState_0) => {
-        return updateState(prevState_0, newState_0);
-      });
-    }, [getUpdatedState, onResize, updateState]);
-    const syncHeightWithFlushSync = React__namespace.useCallback(() => {
-      const newState_1 = getUpdatedState();
-      if (isEmpty(newState_1)) {
-        return;
-      }
-      ReactDOM__namespace.flushSync(() => {
-        setState((prevState_1) => {
-          return updateState(prevState_1, newState_1);
-        });
-      });
-    }, [getUpdatedState, updateState]);
-    React__namespace.useEffect(() => {
-      const handleResize = debounce(() => {
-        renders.current = 0;
-        if (inputRef.current) {
-          syncHeightWithFlushSync();
+        if (el.offsetWidth === 0) {
+          return;
         }
-      });
-      let resizeObserver;
-      const input_0 = inputRef.current;
-      const containerWindow_0 = window;
-      if (typeof window === "undefined") {
-        return;
-      }
-      containerWindow_0.addEventListener("resize", handleResize);
-      if (typeof ResizeObserver !== "undefined") {
-        resizeObserver = new ResizeObserver(handleResize);
-        resizeObserver.observe(input_0);
-      }
-      return () => {
-        handleResize.clear();
-        containerWindow_0.removeEventListener("resize", handleResize);
-        if (resizeObserver) {
-          resizeObserver.disconnect();
+        const cs = window.getComputedStyle(el);
+        const paddingY = getStyleValue(cs.paddingTop) + getStyleValue(cs.paddingBottom);
+        const borderY = getStyleValue(cs.borderTopWidth) + getStyleValue(cs.borderBottomWidth);
+        const boxSizing = cs.boxSizing;
+        const prevHeight = el.style.height;
+        const prevOverflow = el.style.overflowY;
+        el.style.overflowY = "hidden";
+        el.style.height = "0px";
+        const scrollH = el.scrollHeight;
+        const prevValue = el.value;
+        el.value = "x";
+        const singleRowScrollH = el.scrollHeight;
+        el.value = prevValue;
+        el.style.height = prevHeight;
+        el.style.overflowY = prevOverflow;
+        const lineHeight = singleRowScrollH - paddingY;
+        let targetHeight = scrollH;
+        if (minRows) {
+          targetHeight = Math.max(Number(minRows) * lineHeight + paddingY, targetHeight);
+        }
+        const unclampedHeight = targetHeight;
+        if (maxRows) {
+          targetHeight = Math.min(Number(maxRows) * lineHeight + paddingY, targetHeight);
+        }
+        const extra = !ignoreBoxSizing && boxSizing === "border-box" ? borderY : 0;
+        const finalHeight = Math.ceil(targetHeight + extra);
+        const shouldScroll = Math.abs(unclampedHeight - targetHeight) > 1;
+        el.style.height = `${finalHeight}px`;
+        el.style.overflowY = shouldScroll ? "auto" : "hidden";
+        if (onResize) {
+          onResize({
+            outerHeightStyle: finalHeight,
+            overflow: !shouldScroll
+          });
         }
       };
-    }, [syncHeightWithFlushSync]);
-    React.useLayoutEffect(() => {
-      syncHeight();
-    });
-    React__namespace.useEffect(() => {
-      renders.current = 0;
-    }, [value]);
-    const handleChange = (event) => {
-      renders.current = 0;
-      if (!isControlled) {
+      $[12] = ignoreBoxSizing;
+      $[13] = maxRows;
+      $[14] = minRows;
+      $[15] = onResize;
+      $[16] = t1;
+    } else {
+      t1 = $[16];
+    }
+    const syncHeight = t1;
+    let t2;
+    if ($[17] !== syncHeight) {
+      t2 = () => {
         syncHeight();
-      }
-      if (onChange) {
-        onChange(event);
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "textarea",
-        {
-          value,
-          onChange: handleChange,
-          className: props.className,
-          ref: handleRef,
-          onFocus,
-          onBlur,
-          rows: minRows,
-          style: {
-            height: state.outerHeightStyle,
-            // Need a large enough difference to allow scrolling.
-            // This prevents infinite rendering loop.
-            overflow: state.overflow ? "hidden" : void 0,
-            ...style
-          },
-          onScroll,
-          ...other
+      };
+      $[17] = syncHeight;
+      $[18] = t2;
+    } else {
+      t2 = $[18];
+    }
+    React.useLayoutEffect(t2);
+    let t3;
+    let t4;
+    if ($[19] !== syncHeight) {
+      t3 = () => {
+        const handleResize = debounce(() => {
+          if (inputRef.current) {
+            syncHeight();
+          }
+        });
+        const input = inputRef.current;
+        if (typeof window === "undefined") {
+          return;
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("textarea", { "aria-hidden": true, className: cls(props.className, props.shadowClassName), readOnly: true, ref: shadowRef, tabIndex: -1, style: {
-        padding: 0,
-        ...styles$1.shadow,
+        window.addEventListener("resize", handleResize);
+        let resizeObserver;
+        if (typeof ResizeObserver !== "undefined") {
+          resizeObserver = new ResizeObserver(handleResize);
+          resizeObserver.observe(input);
+        }
+        return () => {
+          handleResize.clear();
+          window.removeEventListener("resize", handleResize);
+          resizeObserver?.disconnect();
+        };
+      };
+      t4 = [syncHeight];
+      $[19] = syncHeight;
+      $[20] = t3;
+      $[21] = t4;
+    } else {
+      t3 = $[20];
+      t4 = $[21];
+    }
+    React__namespace.useEffect(t3, t4);
+    let t5;
+    if ($[22] !== onChange || $[23] !== syncHeight) {
+      t5 = (event) => {
+        if (!isControlled) {
+          syncHeight();
+        }
+        if (onChange) {
+          onChange(event);
+        }
+      };
+      $[22] = onChange;
+      $[23] = syncHeight;
+      $[24] = t5;
+    } else {
+      t5 = $[24];
+    }
+    const handleChange = t5;
+    const t6 = minRows;
+    let t7;
+    if ($[25] !== style) {
+      t7 = {
         ...style
-      } })
-    ] });
+      };
+      $[25] = style;
+      $[26] = t7;
+    } else {
+      t7 = $[26];
+    }
+    let t8;
+    if ($[27] !== handleChange || $[28] !== handleRef || $[29] !== onBlur || $[30] !== onFocus || $[31] !== onScroll || $[32] !== other || $[33] !== props.className || $[34] !== t6 || $[35] !== t7 || $[36] !== value) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx("textarea", { value, onChange: handleChange, className: props.className, ref: handleRef, onFocus, onBlur, rows: t6, style: t7, onScroll, ...other });
+      $[27] = handleChange;
+      $[28] = handleRef;
+      $[29] = onBlur;
+      $[30] = onFocus;
+      $[31] = onScroll;
+      $[32] = other;
+      $[33] = props.className;
+      $[34] = t6;
+      $[35] = t7;
+      $[36] = value;
+      $[37] = t8;
+    } else {
+      t8 = $[37];
+    }
+    return t8;
   });
   function useForkRef(...refs) {
     return React__namespace.useMemo(() => {
@@ -36190,8 +37828,13 @@
     ...inputProps
   }, ref) => {
     const inputRef = inputRefProp ?? React.useRef(null);
-    const [focused, setFocused] = React.useState(document.activeElement === inputRef.current);
+    const [focused, setFocused] = React.useState(false);
     const hasValue = value !== void 0 && value !== null && value !== "";
+    React.useEffect(() => {
+      if (inputRef.current && document.activeElement === inputRef.current) {
+        setFocused(true);
+      }
+    }, []);
     React.useEffect(() => {
       if (type !== "number") return;
       const handleWheel = (event) => {
@@ -36203,12 +37846,12 @@
         element?.removeEventListener("wheel", handleWheel);
       };
     }, [inputRef, type]);
-    const input = multiline ? /* @__PURE__ */ jsxRuntime.jsx(TextareaAutosize, { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, minRows, maxRows, value: value ?? "", onChange, style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName) }) : /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, ref: inputRef, disabled, style: inputStyle, className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
+    const input = multiline ? /* @__PURE__ */ jsxRuntime.jsx("textarea", { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, rows: typeof minRows === "string" ? parseInt(minRows) : minRows ?? 3, value: value ?? "", onChange, onFocus: () => setFocused(true), onBlur: () => setFocused(false), style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3", label ? "pt-8 pb-2" : "py-2", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName) }) : /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, ref: inputRef, disabled, style: inputStyle, className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
       "min-h-[28px]": size === "smallest",
       "min-h-[32px]": size === "small",
       "min-h-[44px]": size === "medium",
       "min-h-[64px]": size === "large"
-    }, label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : "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 });
+    }, label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : size === "smallest" ? "py-0.5" : size === "small" ? "py-1" : "py-2", endAdornment ? "pr-12" : "pr-3", disabled && "outline-none opacity-65 dark:opacity-60 text-surface-accent-800 dark:text-white", inputClassName), placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, onFocus: () => setFocused(true), onBlur: () => setFocused(false), type, value: type === "number" && Number.isNaN(value) ? "" : value ?? "", onChange });
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cls("rounded-md relative max-w-full", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, error ? "border border-red-500 dark:border-red-600" : "", {
       "min-h-[28px]": size === "smallest",
       "min-h-[32px]": size === "small",
@@ -36225,215 +37868,183 @@
     ] });
   });
   TextField.displayName = "TextField";
-  const Tooltip = (t0) => {
-    const $ = reactCompilerRuntime.c(28);
+  const TabsModeContext = React.createContext("primary");
+  function Tabs(t0) {
+    const $ = reactCompilerRuntime.c(35);
     const {
-      open,
-      defaultOpen,
-      side: t1,
-      delayDuration: t2,
-      sideOffset,
-      align,
-      onOpenChange,
-      title,
-      tooltipClassName,
-      tooltipStyle,
-      children,
-      asChild: t3,
-      container,
+      value,
+      onValueChange,
       className,
-      style
+      innerClassName,
+      children,
+      mode: t1
     } = t0;
-    const side = t1 === void 0 ? "bottom" : t1;
-    const delayDuration = t2 === void 0 ? 200 : t2;
-    const asChild = t3 === void 0 ? false : t3;
-    useInjectStyles("Tooltip", styles);
-    if (!title) {
-      let t42;
-      if ($[0] !== children) {
-        t42 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-        $[0] = children;
-        $[1] = t42;
-      } else {
-        t42 = $[1];
-      }
-      return t42;
+    const mode = t1 === void 0 ? "primary" : t1;
+    const scrollContainerRef = React.useRef(null);
+    const [showLeftScroll, setShowLeftScroll] = React.useState(false);
+    const [showRightScroll, setShowRightScroll] = React.useState(false);
+    const [isScrollable, setIsScrollable] = React.useState(false);
+    let t2;
+    if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t2 = () => {
+        if (scrollContainerRef.current) {
+          const {
+            scrollLeft,
+            scrollWidth,
+            clientWidth
+          } = scrollContainerRef.current;
+          setShowLeftScroll(scrollLeft > 0);
+          setShowRightScroll(Math.ceil(scrollLeft + clientWidth) < scrollWidth);
+          setIsScrollable(scrollWidth > clientWidth);
+        }
+      };
+      $[0] = t2;
+    } else {
+      t2 = $[0];
+    }
+    const checkScroll = t2;
+    let t3;
+    if ($[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t3 = () => {
+        checkScroll();
+        window.addEventListener("resize", checkScroll);
+        let observer;
+        if (scrollContainerRef.current) {
+          observer = new ResizeObserver(checkScroll);
+          observer.observe(scrollContainerRef.current);
+          if (scrollContainerRef.current.firstElementChild) {
+            observer.observe(scrollContainerRef.current.firstElementChild);
+          }
+        }
+        return () => {
+          window.removeEventListener("resize", checkScroll);
+          observer?.disconnect();
+        };
+      };
+      $[1] = t3;
+    } else {
+      t3 = $[1];
     }
     let t4;
-    if ($[2] !== asChild || $[3] !== children || $[4] !== className || $[5] !== style) {
-      t4 = asChild ? /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { asChild: true, children }) : /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style, className, children }) });
-      $[2] = asChild;
-      $[3] = children;
-      $[4] = className;
-      $[5] = style;
-      $[6] = t4;
+    if ($[2] !== children) {
+      t4 = [children];
+      $[2] = children;
+      $[3] = t4;
     } else {
-      t4 = $[6];
+      t4 = $[3];
     }
-    const trigger = t4;
+    React.useEffect(t3, t4);
     let t5;
-    if ($[7] !== tooltipClassName) {
-      t5 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName);
-      $[7] = tooltipClassName;
-      $[8] = t5;
+    if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t5 = (direction) => {
+        if (scrollContainerRef.current) {
+          const container = scrollContainerRef.current;
+          const scrollAmount = Math.max(container.clientWidth / 2, 200);
+          const targetScroll = container.scrollLeft + (direction === "left" ? -scrollAmount : scrollAmount);
+          container.scrollTo({
+            left: targetScroll,
+            behavior: "smooth"
+          });
+        }
+      };
+      $[4] = t5;
     } else {
-      t5 = $[8];
+      t5 = $[4];
+    }
+    const scroll = t5;
+    let t6;
+    if ($[5] !== className) {
+      t6 = cls("flex flex-row items-center min-w-0", className);
+      $[5] = className;
+      $[6] = t6;
+    } else {
+      t6 = $[6];
     }
-    const t6 = sideOffset === void 0 ? 4 : sideOffset;
     let t7;
-    if ($[9] !== align || $[10] !== side || $[11] !== t5 || $[12] !== t6 || $[13] !== title || $[14] !== tooltipStyle) {
-      t7 = /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Content, { className: t5, style: tooltipStyle, sideOffset: t6, align, side, children: title });
-      $[9] = align;
-      $[10] = side;
-      $[11] = t5;
-      $[12] = t6;
-      $[13] = title;
-      $[14] = tooltipStyle;
-      $[15] = t7;
+    if ($[7] !== isScrollable || $[8] !== mode || $[9] !== showLeftScroll) {
+      t7 = isScrollable && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", disabled: !showLeftScroll, onClick: () => scroll("left"), className: cls("flex-shrink-0 z-10 flex items-center justify-center rounded-md px-0.5 py-1.5 transition-all h-10 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", "disabled:pointer-events-none disabled:opacity-0", "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800", mode === "primary" && "mr-1 bg-surface-50 dark:bg-surface-900 border", mode === "primary" && defaultBorderMixin, mode === "secondary" && "mr-1"), children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: "small" }) });
+      $[7] = isScrollable;
+      $[8] = mode;
+      $[9] = showLeftScroll;
+      $[10] = t7;
     } else {
-      t7 = $[15];
+      t7 = $[10];
     }
     let t8;
-    if ($[16] !== container || $[17] !== t7) {
-      t8 = /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { container, children: t7 });
-      $[16] = container;
-      $[17] = t7;
-      $[18] = t8;
+    if ($[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t8 = {
+        scrollbarWidth: "none",
+        msOverflowStyle: "none"
+      };
+      $[11] = t8;
     } else {
-      t8 = $[18];
+      t8 = $[11];
     }
-    let t9;
-    if ($[19] !== defaultOpen || $[20] !== onOpenChange || $[21] !== open || $[22] !== t8 || $[23] !== trigger) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, { open, onOpenChange, defaultOpen, children: [
-        trigger,
-        t8
-      ] });
-      $[19] = defaultOpen;
-      $[20] = onOpenChange;
-      $[21] = open;
-      $[22] = t8;
-      $[23] = trigger;
-      $[24] = t9;
+    const t9 = mode === "primary" && "border";
+    const t10 = mode === "primary" && defaultBorderMixin;
+    const t11 = mode === "primary" && "gap-2 inline-flex h-10 items-center justify-center rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400";
+    const t12 = mode === "secondary" && "gap-1 inline-flex h-9 items-center text-surface-500 dark:text-surface-400";
+    let t13;
+    if ($[12] !== innerClassName || $[13] !== t10 || $[14] !== t11 || $[15] !== t12 || $[16] !== t9) {
+      t13 = cls(t9, t10, t11, t12, innerClassName);
+      $[12] = innerClassName;
+      $[13] = t10;
+      $[14] = t11;
+      $[15] = t12;
+      $[16] = t9;
+      $[17] = t13;
     } else {
-      t9 = $[24];
+      t13 = $[17];
     }
-    let t10;
-    if ($[25] !== delayDuration || $[26] !== t9) {
-      t10 = /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Provider, { delayDuration, children: t9 });
-      $[25] = delayDuration;
-      $[26] = t9;
-      $[27] = t10;
+    let t14;
+    if ($[18] !== children || $[19] !== t13) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollContainerRef, className: "flex-1 overflow-x-auto no-scrollbar min-w-0", onScroll: checkScroll, style: t8, children: /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.List, { className: t13, children }) });
+      $[18] = children;
+      $[19] = t13;
+      $[20] = t14;
     } else {
-      t10 = $[27];
+      t14 = $[20];
     }
-    return t10;
-  };
-  const styles = `
-
-.TooltipContent {
-  animation-duration: 220ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  will-change: transform, opacity;
-}
-
-.TooltipContent[data-state='delayed-open'][data-side='top'] {
-  animation-name: slideDownAndFade;
-}
-.TooltipContent[data-state='delayed-open'][data-side='right'] {
-  animation-name: slideLeftAndFade;
-}
-.TooltipContent[data-state='delayed-open'][data-side='bottom'] {
-  animation-name: slideUpAndFade;
-}
-.TooltipContent[data-state='delayed-open'][data-side='left'] {
-  animation-name: slideRightAndFade;
-}
-
-
-@keyframes slideUpAndFade {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideRightAndFade {
-  from {
-    opacity: 0;
-    transform: translateX(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideDownAndFade {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideLeftAndFade {
-  from {
-    opacity: 0;
-    transform: translateX(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}`;
-  function Tabs(t0) {
-    const $ = reactCompilerRuntime.c(10);
-    const {
-      value,
-      onValueChange,
-      className,
-      innerClassName,
-      children
-    } = t0;
-    let t1;
-    if ($[0] !== innerClassName) {
-      t1 = cls("w-max", "flex text-sm font-medium text-center text-surface-accent-800 dark:text-white max-w-full overflow-auto no-scrollbar items-end", innerClassName);
-      $[0] = innerClassName;
-      $[1] = t1;
+    let t15;
+    if ($[21] !== isScrollable || $[22] !== mode || $[23] !== showRightScroll) {
+      t15 = isScrollable && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", disabled: !showRightScroll, onClick: () => scroll("right"), className: cls("flex-shrink-0 z-10 flex items-center justify-center rounded-md px-0.5 py-1.5 transition-all h-10 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", "disabled:pointer-events-none disabled:opacity-0", "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800", mode === "primary" && "ml-1 bg-surface-50 dark:bg-surface-900 border", mode === "primary" && defaultBorderMixin, mode === "secondary" && "ml-1"), children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { size: "small" }) });
+      $[21] = isScrollable;
+      $[22] = mode;
+      $[23] = showRightScroll;
+      $[24] = t15;
     } else {
-      t1 = $[1];
+      t15 = $[24];
     }
-    let t2;
-    if ($[2] !== children || $[3] !== t1) {
-      t2 = /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.List, { className: t1, children });
-      $[2] = children;
-      $[3] = t1;
-      $[4] = t2;
+    let t16;
+    if ($[25] !== onValueChange || $[26] !== t14 || $[27] !== t15 || $[28] !== t6 || $[29] !== t7 || $[30] !== value) {
+      t16 = /* @__PURE__ */ jsxRuntime.jsxs(TabsPrimitive__namespace.Root, { value, onValueChange, className: t6, children: [
+        t7,
+        t14,
+        t15
+      ] });
+      $[25] = onValueChange;
+      $[26] = t14;
+      $[27] = t15;
+      $[28] = t6;
+      $[29] = t7;
+      $[30] = value;
+      $[31] = t16;
     } else {
-      t2 = $[4];
+      t16 = $[31];
     }
-    let t3;
-    if ($[5] !== className || $[6] !== onValueChange || $[7] !== t2 || $[8] !== value) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { value, onValueChange, className, children: t2 });
-      $[5] = className;
-      $[6] = onValueChange;
-      $[7] = t2;
-      $[8] = value;
-      $[9] = t3;
+    let t17;
+    if ($[32] !== mode || $[33] !== t16) {
+      t17 = /* @__PURE__ */ jsxRuntime.jsx(TabsModeContext.Provider, { value: mode, children: t16 });
+      $[32] = mode;
+      $[33] = t16;
+      $[34] = t17;
     } else {
-      t3 = $[9];
+      t17 = $[34];
     }
-    return t3;
+    return t17;
   }
   function Tab(t0) {
-    const $ = reactCompilerRuntime.c(13);
+    const $ = reactCompilerRuntime.c(15);
     const {
       value,
       className,
@@ -36441,42 +38052,44 @@
       children,
       disabled
     } = t0;
+    const mode = React.useContext(TabsModeContext);
+    let T0;
     let t1;
-    if ($[0] !== className || $[1] !== disabled) {
-      t1 = cls("border-b-2 border-transparent", "data-[state=active]:border-secondary", disabled ? "text-surface-accent-400 dark:text-surface-accent-500" : cls("text-surface-accent-700 dark:text-surface-accent-300", "data-[state=active]:text-surface-accent-900 data-[state=active]:dark:text-white", "hover:text-surface-accent-800 dark:hover:text-surface-accent-200"), className);
-      $[0] = className;
-      $[1] = disabled;
-      $[2] = t1;
-    } else {
-      t1 = $[2];
-    }
     let t2;
-    if ($[3] !== innerClassName) {
-      t2 = cls("line-clamp-1", "uppercase inline-block p-2 px-4 rounded", "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800", innerClassName);
-      $[3] = innerClassName;
-      $[4] = t2;
-    } else {
-      t2 = $[4];
-    }
     let t3;
-    if ($[5] !== children || $[6] !== t2) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t2, children });
-      $[5] = children;
-      $[6] = t2;
-      $[7] = t3;
+    if ($[0] !== className || $[1] !== disabled || $[2] !== innerClassName || $[3] !== mode || $[4] !== value) {
+      const primaryClasses = cls("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", "data-[state=active]:bg-white data-[state=active]:text-surface-900 dark:data-[state=active]:bg-surface-950 dark:data-[state=active]:text-surface-50");
+      const secondaryClasses = cls("inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all", "border-b-2 border-transparent -mb-px", "focus-visible:outline-none", "disabled:pointer-events-none disabled:opacity-50", "hover:text-surface-700 dark:hover:text-surface-300", "data-[state=active]:border-b-primary data-[state=active]:text-primary dark:data-[state=active]:border-b-primary dark:data-[state=active]:text-primary-dark");
+      T0 = TabsPrimitive__namespace.Trigger;
+      t1 = value;
+      t2 = disabled;
+      t3 = cls(mode === "secondary" ? secondaryClasses : primaryClasses, className, innerClassName);
+      $[0] = className;
+      $[1] = disabled;
+      $[2] = innerClassName;
+      $[3] = mode;
+      $[4] = value;
+      $[5] = T0;
+      $[6] = t1;
+      $[7] = t2;
+      $[8] = t3;
     } else {
-      t3 = $[7];
+      T0 = $[5];
+      t1 = $[6];
+      t2 = $[7];
+      t3 = $[8];
     }
     let t4;
-    if ($[8] !== disabled || $[9] !== t1 || $[10] !== t3 || $[11] !== value) {
-      t4 = /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, { value, disabled, className: t1, children: t3 });
-      $[8] = disabled;
-      $[9] = t1;
-      $[10] = t3;
-      $[11] = value;
-      $[12] = t4;
+    if ($[9] !== T0 || $[10] !== children || $[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsx(T0, { value: t1, disabled: t2, className: t3, children });
+      $[9] = T0;
+      $[10] = children;
+      $[11] = t1;
+      $[12] = t2;
+      $[13] = t3;
+      $[14] = t4;
     } else {
-      t4 = $[12];
+      t4 = $[14];
     }
     return t4;
   }
@@ -36547,7 +38160,7 @@
     }
     let t1;
     if ($[4] !== className) {
-      t1 = cls("bg-white dark:bg-surface-950 text-sm divide-y divide-surface-100 dark:divide-surface-700 dark:divide-opacity-70", className);
+      t1 = cls("bg-white dark:bg-surface-950 text-sm divide-y divide-surface-100 dark:divide-surface-700 dark:divide-opacity-70 dark:divide-surface-700/70", className);
       $[4] = className;
       $[5] = t1;
     } else {
@@ -36722,6 +38335,8 @@
     const enabled = t2 === void 0 ? true : t2;
     const modal = t3 === void 0 ? false : t3;
     useInjectStyles("Popover", popoverStyles);
+    const contextContainer = usePortalContainer();
+    const finalContainer = portalContainer ?? contextContainer ?? void 0;
     if (!enabled) {
       let t42;
       if ($[0] !== trigger) {
@@ -36777,9 +38392,9 @@
       t7 = $[17];
     }
     let t8;
-    if ($[18] !== portalContainer || $[19] !== t7) {
-      t8 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { container: portalContainer, children: t7 });
-      $[18] = portalContainer;
+    if ($[18] !== finalContainer || $[19] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { container: finalContainer, children: t7 });
+      $[18] = finalContainer;
       $[19] = t7;
       $[20] = t8;
     } else {
@@ -36803,7 +38418,7 @@
     return t9;
   }
   const popoverStyles = `
-
+/* ... (styles remain unchanged) ... */
 .PopoverContent {
   animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
@@ -36822,7 +38437,6 @@
   animation-name: slideRightAndFade;
 }
 
-
 @keyframes slideUpAndFade {
   from {
     opacity: 0;
@@ -36920,7 +38534,7 @@
   Badge.displayName = "Badge";
   function DebouncedTextField(props) {
     const $ = reactCompilerRuntime.c(13);
-    const previousEventRef = React.useRef();
+    const previousEventRef = React.useRef(void 0);
     const [internalValue, setInternalValue] = React.useState(props.value);
     const deferredValue = React.useDeferredValue(internalValue);
     let t0;
@@ -36988,14 +38602,14 @@
     return t5;
   }
   function Skeleton(t0) {
-    const $ = reactCompilerRuntime.c(8);
+    const $ = reactCompilerRuntime.c(10);
     const {
       width,
       height,
       className
     } = t0;
-    const t1 = width ? `${width}px` : "100%";
-    const t2 = height ? `${height}px` : "12px";
+    const t1 = width !== void 0 ? `${width}px` : void 0;
+    const t2 = height !== void 0 ? `${height}px` : void 0;
     let t3;
     if ($[0] !== t1 || $[1] !== t2) {
       t3 = {
@@ -37008,24 +38622,82 @@
     } else {
       t3 = $[2];
     }
-    let t4;
-    if ($[3] !== className) {
-      t4 = cls("block", "bg-surface-accent-200 dark:bg-surface-accent-800 rounded-md", "animate-pulse", "max-w-full max-h-full", className);
+    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);
       $[3] = className;
       $[4] = t4;
+      $[5] = t5;
+      $[6] = t6;
     } else {
-      t4 = $[4];
+      t6 = $[6];
     }
-    let t5;
-    if ($[5] !== t3 || $[6] !== t4) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx("span", { style: t3, className: t4 });
-      $[5] = t3;
-      $[6] = t4;
-      $[7] = t5;
+    let t7;
+    if ($[7] !== t3 || $[8] !== t6) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsx("span", { style: t3, className: t6 });
+      $[7] = t3;
+      $[8] = t6;
+      $[9] = t7;
     } else {
-      t5 = $[7];
+      t7 = $[9];
     }
-    return t5;
+    return t7;
+  }
+  function ToggleButtonGroup(t0) {
+    const $ = reactCompilerRuntime.c(12);
+    const {
+      value,
+      onValueChange,
+      options,
+      className
+    } = 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);
+      $[0] = className;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    let t2;
+    if ($[2] !== onValueChange || $[3] !== options || $[4] !== value) {
+      let t32;
+      if ($[6] !== onValueChange || $[7] !== value) {
+        t32 = (option) => /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", 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: [
+          option.icon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: option.label })
+        ] }, option.value);
+        $[6] = onValueChange;
+        $[7] = value;
+        $[8] = t32;
+      } else {
+        t32 = $[8];
+      }
+      t2 = options.map(t32);
+      $[2] = onValueChange;
+      $[3] = options;
+      $[4] = value;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    let t3;
+    if ($[9] !== t1 || $[10] !== t2) {
+      t3 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t1, children: t2 });
+      $[9] = t1;
+      $[10] = t2;
+      $[11] = t3;
+    } else {
+      t3 = $[11];
+    }
+    return t3;
   }
   exports2.AbcIcon = AbcIcon;
   exports2.AcUnitIcon = AcUnitIcon;
@@ -37414,6 +39086,7 @@
   exports2.CollectionsBookmarkIcon = CollectionsBookmarkIcon;
   exports2.CollectionsIcon = CollectionsIcon;
   exports2.ColorLensIcon = ColorLensIcon;
+  exports2.ColorPicker = ColorPicker;
   exports2.ColorizeIcon = ColorizeIcon;
   exports2.CommentBankIcon = CommentBankIcon;
   exports2.CommentIcon = CommentIcon;
@@ -37503,6 +39176,7 @@
   exports2.DataSaverOnIcon = DataSaverOnIcon;
   exports2.DataThresholdingIcon = DataThresholdingIcon;
   exports2.DataUsageIcon = DataUsageIcon;
+  exports2.DatabaseIcon = DatabaseIcon;
   exports2.DatasetIcon = DatasetIcon;
   exports2.DatasetLinkedIcon = DatasetLinkedIcon;
   exports2.DateRangeIcon = DateRangeIcon;
@@ -37775,6 +39449,7 @@
   exports2.FireHydrantAltIcon = FireHydrantAltIcon;
   exports2.FireTruckIcon = FireTruckIcon;
   exports2.FireplaceIcon = FireplaceIcon;
+  exports2.FirestoreIcon = FirestoreIcon;
   exports2.FirstPageIcon = FirstPageIcon;
   exports2.FitScreenIcon = FitScreenIcon;
   exports2.FitbitIcon = FitbitIcon;
@@ -38530,6 +40205,7 @@
   exports2.PoolIcon = PoolIcon;
   exports2.Popover = Popover;
   exports2.PortableWifiOffIcon = PortableWifiOffIcon;
+  exports2.PortalContainerProvider = PortalContainerProvider;
   exports2.PortraitIcon = PortraitIcon;
   exports2.PostAddIcon = PostAddIcon;
   exports2.PowerIcon = PowerIcon;
@@ -38633,6 +40309,7 @@
   exports2.RequestPageIcon = RequestPageIcon;
   exports2.RequestQuoteIcon = RequestQuoteIcon;
   exports2.ResetTvIcon = ResetTvIcon;
+  exports2.ResizablePanels = ResizablePanels;
   exports2.RestartAltIcon = RestartAltIcon;
   exports2.RestaurantIcon = RestaurantIcon;
   exports2.RestaurantMenuIcon = RestaurantMenuIcon;
@@ -38707,6 +40384,8 @@
   exports2.SearchBar = SearchBar;
   exports2.SearchIcon = SearchIcon;
   exports2.SearchOffIcon = SearchOffIcon;
+  exports2.SearchableSelect = SearchableSelect;
+  exports2.SearchableSelectItem = SearchableSelectItem;
   exports2.SecurityIcon = SecurityIcon;
   exports2.SecurityUpdateGoodIcon = SecurityUpdateGoodIcon;
   exports2.SecurityUpdateIcon = SecurityUpdateIcon;
@@ -39036,6 +40715,7 @@
   exports2.TitleIcon = TitleIcon;
   exports2.TocIcon = TocIcon;
   exports2.TodayIcon = TodayIcon;
+  exports2.ToggleButtonGroup = ToggleButtonGroup;
   exports2.ToggleOffIcon = ToggleOffIcon;
   exports2.ToggleOnIcon = ToggleOnIcon;
   exports2.TokenIcon = TokenIcon;
@@ -39326,6 +41006,7 @@
   exports2.useIconStyles = useIconStyles;
   exports2.useInjectStyles = useInjectStyles;
   exports2.useOutsideAlerter = useOutsideAlerter;
+  exports2.usePortalContainer = usePortalContainer;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 }));
 //# sourceMappingURL=index.umd.js.map