@firecms/ui 3.0.1 → 3.1.0-canary.24c8270

package/dist/index.es.js

@@ -2,12 +2,13 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
 import * as React from "react";
-import React__default, { useEffect, useState, useRef, Children, forwardRef, useCallback, useLayoutEffect, useDeferredValue } from "react";
+import React__default, { createContext, useContext, useEffect, useState, useRef, Children, forwardRef, useLayoutEffect, useDeferredValue } from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import "@material-design-icons/font/filled.css";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { useDropzone } from "react-dropzone";
@@ -22,21 +23,20 @@ import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as ReactDOM from "react-dom";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
-const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60";
-const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
-const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 dark:bg-surface-800 dark:bg-opacity-60";
-const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0";
-const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90";
-const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40";
-const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
-const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
-const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40";
-const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer";
-const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
+const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-800/60";
+const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-75 ring-primary/75 ring-offset-2 ring-offset-transparent ";
+const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-800 dark:bg-opacity-60 dark:bg-surface-800/60";
+const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0 bg-surface-accent-200/0 dark:bg-surface-800/0";
+const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-800/90";
+const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";
+const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40 border-surface-200/40 dark:border-surface-700/40 ";
+const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40 border-surface-200/40 dark:border-surface-700/40";
+const cardMixin = "bg-white dark:bg-surface-950 rounded-md border border-surface-200/40 dark:border-surface-700/40 m-1 -p-1";
+const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer hover:bg-primary/20 dark:hover:bg-primary/10 ";
+const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 bg-primary-bg/30 dark:bg-opacity-10 dark:bg-primary-bg/10 ring-1 ring-primary ring-opacity-75 ring-primary/75 bg-primary/10 dark:bg-primary/10 ring-1 ring-primary/75";
 function cls(...classes) {
   return twMerge(clsx(classes));
 }
@@ -247,31 +247,69 @@ function keyToIconComponent(key) {
   }).join("") + "Icon";
   return componentName;
 }
+const PortalContainerContext = createContext(void 0);
+function PortalContainerProvider(t0) {
+  const $ = 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__ */ jsx(PortalContainerContext.Provider, { value: t1, children });
+    $[2] = children;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+function usePortalContainer() {
+  const context = useContext(PortalContainerContext);
+  return context?.container ?? null;
+}
 function useInjectStyles(key, styles2) {
-  const $ = c(4);
+  const $ = 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];
   }
   useEffect(t0, t1);
 }
@@ -742,7 +780,7 @@ const BooleanSwitch = React__default.forwardRef(function BooleanSwitch2({
     } else {
       onValueChange?.(!value);
     }
-  }, className: cls(size === "smallest" ? "w-[34px] h-[18px] min-w-[34px] min-h-[18px]" : size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[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__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 transform will-change-auto", disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600", {
       "w-[21px] h-[10px]": size === "medium" || size === "large",
       "w-[19px] h-[8px]": size === "small",
@@ -891,12 +929,12 @@ const ButtonInner = React__default.memo(React__default.forwardRef((t0, ref) => {
         "border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": t10,
         "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow hover:ring-1 hover:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t11,
         "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t12,
-        "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": t13,
-        "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": t14,
-        "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10": t15,
+        "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t13,
+        "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t14,
+        "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10 hover:bg-red-500/10": t15,
         "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": t16,
         "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-700": t17,
-        "border border-primary text-primary hover:text-primary hover:bg-primary-bg": t18,
+        "border border-primary text-primary hover:text-primary hover:bg-primary-bg hover:bg-primary/10": t18,
         "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": t19,
         "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": t20,
         "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-accent-200": t21,
@@ -904,7 +942,7 @@ const ButtonInner = React__default.memo(React__default.forwardRef((t0, ref) => {
         "text-text-disabled dark:text-text-disabled-dark": disabled,
         "border border-transparent opacity-50": t23,
         "border border-surface-500 opacity-50": t24,
-        "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40": t25
+        "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40 bg-surface-300/40 dark:bg-surface-500/40": t25
       });
       const sizeClasses2 = cls({
         "py-1 px-2": size === "small",
@@ -32172,7 +32210,7 @@ const Checkbox = React__default.memo((t0) => {
   const t6 = disabled ? void 0 : onCheckedChange;
   const t7 = padding ? paddingClasses[size] : "";
   const t8 = outerSizeClasses[size];
-  const t9 = onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75" : "";
+  const t9 = onCheckedChange ? "rounded-full hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-700 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-700/75" : "";
   const t10 = onCheckedChange ? "cursor-pointer" : "cursor-default";
   let t11;
   if ($[0] !== t10 || $[1] !== t7 || $[2] !== t8 || $[3] !== t9) {
@@ -32318,7 +32356,258 @@ function Chip(t0) {
   }
   return t11;
 }
-const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 hover:scale-105 transition-transform";
+const Tooltip = (t0) => {
+  const $ = c(28);
+  const {
+    open,
+    defaultOpen,
+    side: t1,
+    delayDuration: t2,
+    sideOffset,
+    align,
+    onOpenChange,
+    title,
+    tooltipClassName,
+    tooltipStyle,
+    children,
+    asChild: t3,
+    container,
+    className,
+    style
+  } = 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$1);
+  const contextContainer = usePortalContainer();
+  const finalContainer = container ?? contextContainer ?? void 0;
+  if (!title) {
+    let t42;
+    if ($[0] !== children) {
+      t42 = /* @__PURE__ */ jsx(Fragment, { children });
+      $[0] = children;
+      $[1] = t42;
+    } else {
+      t42 = $[1];
+    }
+    return t42;
+  }
+  let t4;
+  if ($[2] !== asChild || $[3] !== children || $[4] !== className || $[5] !== style) {
+    t4 = asChild ? /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }) : /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { style, className, children }) });
+    $[2] = asChild;
+    $[3] = children;
+    $[4] = className;
+    $[5] = style;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  const trigger = t4;
+  let t5;
+  if ($[7] !== tooltipClassName) {
+    t5 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName);
+    $[7] = tooltipClassName;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  const t6 = sideOffset === void 0 ? 4 : sideOffset;
+  let t7;
+  if ($[9] !== align || $[10] !== side || $[11] !== t5 || $[12] !== t6 || $[13] !== title || $[14] !== tooltipStyle) {
+    t7 = /* @__PURE__ */ jsx(TooltipPrimitive.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;
+  } else {
+    t7 = $[15];
+  }
+  let t8;
+  if ($[16] !== finalContainer || $[17] !== t7) {
+    t8 = /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: finalContainer, children: t7 });
+    $[16] = finalContainer;
+    $[17] = t7;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== defaultOpen || $[20] !== onOpenChange || $[21] !== open || $[22] !== t8 || $[23] !== trigger) {
+    t9 = /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { open, onOpenChange, defaultOpen, children: [
+      trigger,
+      t8
+    ] });
+    $[19] = defaultOpen;
+    $[20] = onOpenChange;
+    $[21] = open;
+    $[22] = t8;
+    $[23] = trigger;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  let t10;
+  if ($[25] !== delayDuration || $[26] !== t9) {
+    t10 = /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: t9 });
+    $[25] = delayDuration;
+    $[26] = t9;
+    $[27] = t10;
+  } else {
+    t10 = $[27];
+  }
+  return t10;
+};
+const styles$1 = `
+
+.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 $ = 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__ */ 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__ */ 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__ */ jsx(CheckIcon, { size: checkSize }) }),
+      /* @__PURE__ */ 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__ */ jsx(Tooltip, { title: displayName, delayDuration: 300, children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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 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 = {
@@ -32378,7 +32667,7 @@ const IconButtonInner = (t0, ref) => {
   const size = t1 === void 0 ? "medium" : t1;
   const variant = t2 === void 0 ? "ghost" : t2;
   const shape = t3 === void 0 ? "circular" : t3;
-  const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 dark:bg-surface-950 dark:bg-opacity-50";
+  const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 bg-surface-accent-200/50 dark:bg-surface-950 dark:bg-opacity-50 dark:bg-surface-950/50";
   const Component = component || "button";
   const t4 = disabled ? "opacity-50 pointer-events-none" : "cursor-pointer";
   const t5 = toggled ? "outline outline-2 outline-primary" : "";
@@ -32386,7 +32675,7 @@ const IconButtonInner = (t0, ref) => {
   const t7 = sizeClasses[size];
   let t8;
   if ($[10] !== bgClasses || $[11] !== className || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
-    t8 = cls(t4, t5, colorClasses$1, bgClasses, baseClasses, buttonClasses, t6, t7, className);
+    t8 = cls(t4, t5, "text-inherit dark:text-inherit", colorClasses$1, bgClasses, baseClasses, buttonClasses, t6, t7, className);
     $[10] = bgClasses;
     $[11] = className;
     $[12] = t4;
@@ -32637,7 +32926,8 @@ const DateTimeField = ({
   className,
   style,
   inputClassName,
-  invisible
+  invisible,
+  timezone
 }) => {
   const inputRef = useRef(null);
   const [focused, setFocused] = useState(false);
@@ -32655,18 +32945,59 @@ const DateTimeField = ({
     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);
+    const parts = formatter.formatToParts(dateValue);
+    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);
@@ -32676,18 +33007,26 @@ const DateTimeField = ({
       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);
+      }
+      if (isNaN(resultDate.getTime())) {
+        throw new Error("Invalid date");
       }
-      onChange?.(newDate);
+      onChange?.(resultDate);
     } catch (e_1) {
       return;
     }
@@ -32756,21 +33095,21 @@ const inputStyles = `
     }
   `;
 const widthClasses = {
-  xs: "max-w-xs min-w-xs w-xs",
-  sm: "max-w-sm min-w-sm w-sm",
-  md: "max-w-md min-w-md w-md",
-  lg: "max-w-lg min-w-lg w-lg",
-  xl: "max-w-xl min-w-xl w-xl",
-  "2xl": "max-w-2xl min-w-2xl w-2xl",
-  "3xl": "max-w-3xl min-w-3xl w-3xl",
-  "4xl": "max-w-4xl min-w-4xl w-4xl",
-  "5xl": "max-w-5xl min-w-5xl w-5xl",
-  "6xl": "max-w-6xl min-w-6xl w-6xl",
-  "7xl": "max-w-7xl min-w-7xl w-7xl",
-  full: "max-w-full min-w-full w-full"
+  xs: "max-w-xs w-xs",
+  sm: "max-w-sm w-sm",
+  md: "max-w-md w-md",
+  lg: "max-w-lg w-lg",
+  xl: "max-w-xl w-xl",
+  "2xl": "max-w-2xl w-2xl",
+  "3xl": "max-w-3xl w-3xl",
+  "4xl": "max-w-4xl w-4xl",
+  "5xl": "max-w-5xl w-5xl",
+  "6xl": "max-w-6xl w-6xl",
+  "7xl": "max-w-7xl w-7xl",
+  full: "max-w-full w-full"
 };
 const Dialog = (t0) => {
-  const $ = c(42);
+  const $ = c(45);
   const {
     open,
     onOpenChange,
@@ -32787,7 +33126,8 @@ const Dialog = (t0) => {
     onEscapeKeyDown,
     onPointerDownOutside,
     onInteractOutside,
-    disableInitialFocus: t5
+    disableInitialFocus: t5,
+    portalContainer
   } = t0;
   const fullWidth = t1 === void 0 ? true : t1;
   const scrollable = t2 === void 0 ? true : t2;
@@ -32795,6 +33135,8 @@ const Dialog = (t0) => {
   const modal = t4 === void 0 ? true : t4;
   const disableInitialFocus = t5 === void 0 ? true : t5;
   const [displayed, setDisplayed] = useState(false);
+  const contextContainer = usePortalContainer();
+  const finalContainer = portalContainer ?? contextContainer ?? void 0;
   let t6;
   let t7;
   if ($[0] !== open) {
@@ -32802,11 +33144,11 @@ const Dialog = (t0) => {
       if (!open) {
         const timeout = setTimeout(() => {
           setDisplayed(false);
-        }, 150);
+        }, 100);
         return () => clearTimeout(timeout);
       } else {
         setDisplayed(true);
-        return _temp$2;
+        return _temp$3;
       }
     };
     t7 = [open];
@@ -32830,7 +33172,7 @@ const Dialog = (t0) => {
   const t10 = displayed && open ? "opacity-100" : "opacity-0";
   let t11;
   if ($[5] !== t10) {
-    t11 = cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ", t10, "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center");
+    t11 = cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black dark:bg-opacity-60 dark:bg-black/60 bg-opacity-50 bg-black/50 dark: bg-black/60  backdrop-blur-sm ", t10, "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center");
     $[5] = t10;
     $[6] = t11;
   } else {
@@ -32920,10 +33262,10 @@ const Dialog = (t0) => {
   }
   let t26;
   if ($[33] !== t14 || $[34] !== t25 || $[35] !== t9) {
-    t26 = /* @__PURE__ */ jsx(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsxs("div", { className: t9, children: [
+    t26 = /* @__PURE__ */ jsxs("div", { className: t9, children: [
       t14,
       t25
-    ] }) });
+    ] });
     $[33] = t14;
     $[34] = t25;
     $[35] = t9;
@@ -32932,19 +33274,28 @@ const Dialog = (t0) => {
     t26 = $[36];
   }
   let t27;
-  if ($[37] !== modal || $[38] !== onOpenChange || $[39] !== t26 || $[40] !== t8) {
-    t27 = /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: t8, modal, onOpenChange, children: t26 });
-    $[37] = modal;
-    $[38] = onOpenChange;
-    $[39] = t26;
-    $[40] = t8;
-    $[41] = t27;
+  if ($[37] !== finalContainer || $[38] !== t26) {
+    t27 = /* @__PURE__ */ jsx(DialogPrimitive.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__ */ jsx(DialogPrimitive.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$3() {
 }
 function DialogActions(t0) {
   const $ = c(7);
@@ -32959,7 +33310,7 @@ function DialogActions(t0) {
   const t3 = translucent ? "backdrop-blur-sm" : "";
   let t4;
   if ($[0] !== className || $[1] !== position || $[2] !== t3) {
-    t4 = cls(defaultBorderMixin, "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2", position, "bg-white bg-opacity-60 dark:bg-surface-900 dark:bg-opacity-60", t3, className);
+    t4 = cls(defaultBorderMixin, "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2", position, "bg-white bg-opacity-60 bg-white/60 dark:bg-surface-900 dark:bg-opacity-60 dark:bg-surface-900/60", t3, className);
     $[0] = className;
     $[1] = position;
     $[2] = t3;
@@ -33207,7 +33558,7 @@ function ExpandablePanel(t0) {
   const t13 = asField && fieldBackgroundMixin;
   let t14;
   if ($[11] !== t10 || $[12] !== t11 || $[13] !== t12 || $[14] !== t13 || $[15] !== titleClassName) {
-    t14 = cls("rounded-t flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-accent-200 hover:bg-opacity-40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40", t10, t11, "transition-all duration-200", t12, t13, titleClassName, "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;
@@ -33301,7 +33652,7 @@ function ExpandablePanel(t0) {
   return t24;
 }
 function FileUpload(t0) {
-  const $ = c(32);
+  const $ = c(33);
   const {
     accept,
     onFilesAdded,
@@ -33356,15 +33707,17 @@ function FileUpload(t0) {
   }
   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
     });
@@ -33375,60 +33728,61 @@ function FileUpload(t0) {
     $[14] = t6;
     $[15] = t7;
     $[16] = t8;
+    $[17] = t9;
   } else {
-    t8 = $[16];
-  }
-  let t9;
-  if ($[17] !== title) {
-    t9 = /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: "flex-grow h-28 box-border flex flex-col items-center justify-center text-center", children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { ...t3, className: t8, children: [
-      t9,
-      t11,
+  if ($[24] !== uploadDescription) {
+    t13 = /* @__PURE__ */ jsx("div", { className: "flex-grow h-28 box-border flex flex-col items-center justify-center text-center", children: /* @__PURE__ */ 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__ */ 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",
@@ -33649,6 +34003,8 @@ const Menu = React__default.forwardRef((t0, ref) => {
     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__ */ jsx(DropdownMenu.Trigger, { ref, asChild: true, children: trigger });
@@ -33679,9 +34035,9 @@ const Menu = React__default.forwardRef((t0, ref) => {
     t4 = $[10];
   }
   let t5;
-  if ($[11] !== portalContainer || $[12] !== t4) {
-    t5 = /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalContainer, children: t4 });
-    $[11] = portalContainer;
+  if ($[11] !== finalContainer || $[12] !== t4) {
+    t5 = /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: finalContainer, children: t4 });
+    $[11] = finalContainer;
     $[12] = t4;
     $[13] = t5;
   } else {
@@ -33706,38 +34062,46 @@ const Menu = React__default.forwardRef((t0, ref) => {
 });
 Menu.displayName = "Menu";
 const MenuItem = React__default.memo((t0) => {
-  const $ = c(8);
+  const $ = 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__ */ jsx(DropdownMenu.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__ */ jsx(DropdownMenu.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 $ = c(6);
@@ -33790,7 +34154,7 @@ function MenubarTrigger(t0) {
   } = t0;
   let t1;
   if ($[0] !== className) {
-    t1 = cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800", className);
+    t1 = cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800", className);
     $[0] = className;
     $[1] = t1;
   } else {
@@ -33809,17 +34173,21 @@ function MenubarTrigger(t0) {
   return t2;
 }
 function MenubarPortal(t0) {
-  const $ = c(2);
+  const $ = c(3);
   const {
-    children
+    children,
+    portalContainer
   } = t0;
+  const contextContainer = usePortalContainer();
+  const finalContainer = portalContainer ?? contextContainer ?? void 0;
   let t1;
-  if ($[0] !== children) {
-    t1 = /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children });
+  if ($[0] !== children || $[1] !== finalContainer) {
+    t1 = /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { container: finalContainer, children });
     $[0] = children;
-    $[1] = t1;
+    $[1] = finalContainer;
+    $[2] = t1;
   } else {
-    t1 = $[1];
+    t1 = $[2];
   }
   return t1;
 }
@@ -34392,7 +34760,7 @@ function Separator(t0) {
   if (orientation === "horizontal") {
     let t1;
     if ($[0] !== className) {
-      t1 = cls("dark:bg-opacity-80 dark:bg-surface-800 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className);
+      t1 = cls("dark:bg-opacity-80 dark:bg-surface-800 dark:bg-surface-800/80 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className);
       $[0] = className;
       $[1] = t1;
     } else {
@@ -34411,7 +34779,7 @@ function Separator(t0) {
   } else {
     let t1;
     if ($[5] !== className) {
-      t1 = cls("dark:bg-opacity-80 dark:bg-surface-800 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className);
+      t1 = cls("dark:bg-opacity-80 dark:bg-surface-800 dark:bg-surface-800/80 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className);
       $[5] = className;
       $[6] = t1;
     } else {
@@ -34457,7 +34825,7 @@ function SelectInputLabel(t0) {
 }
 const MultiSelectContext = React.createContext({});
 const MultiSelect = React.forwardRef((t0, ref) => {
-  const $ = c(105);
+  const $ = c(111);
   const {
     value,
     size: t1,
@@ -34472,17 +34840,21 @@ const MultiSelect = React.forwardRef((t0, ref) => {
     includeSelectAll: t4,
     useChips: t5,
     className,
+    inputClassName,
+    inputRef,
     children,
     renderValues,
     open,
-    onOpenChange
+    onOpenChange,
+    portalContainer
   } = 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.useState(open ?? false);
+  const [isMounted, setIsMounted] = useState(false);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(open ?? false);
   let t6;
   if ($[0] !== value) {
     t6 = value ?? [];
@@ -34491,79 +34863,95 @@ const MultiSelect = React.forwardRef((t0, ref) => {
   } else {
     t6 = $[1];
   }
-  const [selectedValues, setSelectedValues] = React.useState(t6);
+  const [selectedValues, setSelectedValues] = 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;
+  useEffect(t7, t8);
   let t9;
-  if ($[4] !== open) {
-    t8 = () => {
-      setIsPopoverOpen(open ?? false);
+  if ($[4] !== onOpenChange) {
+    t9 = (open_0) => {
+      setIsPopoverOpen(open_0);
+      onOpenChange?.(open_0);
     };
-    t9 = [open];
-    $[4] = open;
-    $[5] = t8;
-    $[6] = t9;
+    $[4] = onOpenChange;
+    $[5] = t9;
   } else {
-    t8 = $[5];
-    t9 = $[6];
+    t9 = $[5];
   }
-  useEffect(t8, t9);
+  const onPopoverOpenChange = t9;
   let t10;
   let t11;
-  if ($[7] !== children) {
-    t11 = children ? 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;
+  useEffect(t10, t11);
   let t12;
-  let map;
+  let t13;
   if ($[9] !== children) {
+    t13 = children ? Children.map(children, _temp$2)?.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();
     Children.forEach(children, (child_0) => {
       if (React.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.useEffect(t13, t14);
+  React.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))) {
@@ -34577,17 +34965,17 @@ const MultiSelect = React.forwardRef((t0, ref) => {
       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 {
@@ -34598,53 +34986,53 @@ const MultiSelect = React.forwardRef((t0, ref) => {
         }
       }
     };
-    $[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 {
@@ -34652,76 +35040,79 @@ const MultiSelect = React.forwardRef((t0, ref) => {
       }
       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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
+  let t31;
+  if ($[54] !== handleClear || $[55] !== includeClear || $[56] !== isPopoverOpen || $[57] !== optionsMap || $[58] !== placeholder || $[59] !== renderValues || $[60] !== selectedValues || $[61] !== size || $[62] !== toggleOption || $[63] !== useChips) {
+    t31 = selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 text-start", children: [
         renderValues && renderValues(selectedValues),
         !renderValues && selectedValues.map((value_1) => {
@@ -34749,176 +35140,185 @@ const MultiSelect = React.forwardRef((t0, ref) => {
       /* @__PURE__ */ jsx("span", { className: "text-sm", children: placeholder }),
       /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
     ] });
-    $[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] = handleClear;
+    $[55] = includeClear;
+    $[56] = isPopoverOpen;
+    $[57] = optionsMap;
+    $[58] = placeholder;
+    $[59] = renderValues;
+    $[60] = selectedValues;
+    $[61] = size;
+    $[62] = toggleOption;
+    $[63] = useChips;
+    $[64] = t31;
+  } else {
+    t31 = $[64];
   }
-  let t28;
-  if ($[62] !== handleTogglePopover || $[63] !== ref || $[64] !== t26 || $[65] !== t27) {
-    t28 = /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { ref, onClick: handleTogglePopover, className: t26, children: t27 }) });
-    $[62] = handleTogglePopover;
-    $[63] = ref;
-    $[64] = t26;
-    $[65] = t27;
-    $[66] = t28;
+  let t32;
+  if ($[65] !== handleTogglePopover || $[66] !== t25 || $[67] !== t30 || $[68] !== t31) {
+    t32 = /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { ref: t25, onClick: handleTogglePopover, className: t30, children: t31 }) });
+    $[65] = handleTogglePopover;
+    $[66] = t25;
+    $[67] = t30;
+    $[68] = t31;
+    $[69] = t32;
   } else {
-    t28 = $[66];
+    t32 = $[69];
   }
-  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 ($[70] === /* @__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);
+    $[70] = t33;
   } else {
-    t29 = $[67];
+    t33 = $[70];
   }
-  let t30;
-  if ($[68] !== onPopoverOpenChange) {
-    t30 = () => onPopoverOpenChange(false);
-    $[68] = onPopoverOpenChange;
-    $[69] = t30;
+  let t34;
+  if ($[71] !== onPopoverOpenChange) {
+    t34 = () => onPopoverOpenChange(false);
+    $[71] = onPopoverOpenChange;
+    $[72] = t34;
   } else {
-    t30 = $[69];
+    t34 = $[72];
   }
-  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 ($[73] === /* @__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");
+    $[73] = t35;
   } else {
-    t31 = $[70];
+    t35 = $[73];
   }
-  let t32;
-  if ($[71] !== handleInputKeyDown) {
-    t32 = /* @__PURE__ */ jsx(Command.Input, { className: t31, placeholder: "Search...", onKeyDown: handleInputKeyDown });
-    $[71] = handleInputKeyDown;
-    $[72] = t32;
+  let t36;
+  if ($[74] !== handleInputKeyDown) {
+    t36 = /* @__PURE__ */ jsx(Command.Input, { className: t35, placeholder: "Search...", onKeyDown: handleInputKeyDown });
+    $[74] = handleInputKeyDown;
+    $[75] = t36;
   } else {
-    t32 = $[72];
+    t36 = $[75];
   }
-  let t33;
-  if ($[73] !== handleClear || $[74] !== selectedValues.length) {
-    t33 = selectedValues.length > 0 && /* @__PURE__ */ jsx("div", { onClick: handleClear, className: "text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark", children: "Clear" });
-    $[73] = handleClear;
-    $[74] = selectedValues.length;
-    $[75] = t33;
+  let t37;
+  if ($[76] !== handleClear || $[77] !== selectedValues.length) {
+    t37 = selectedValues.length > 0 && /* @__PURE__ */ jsx("div", { onClick: handleClear, className: "text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark", children: "Clear" });
+    $[76] = handleClear;
+    $[77] = selectedValues.length;
+    $[78] = t37;
   } else {
-    t33 = $[75];
+    t37 = $[78];
   }
-  let t34;
-  if ($[76] !== t32 || $[77] !== t33) {
-    t34 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
-      t32,
-      t33
+  let t38;
+  if ($[79] !== t36 || $[80] !== t37) {
+    t38 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
+      t36,
+      t37
     ] });
-    $[76] = t32;
-    $[77] = t33;
-    $[78] = t34;
+    $[79] = t36;
+    $[80] = t37;
+    $[81] = t38;
   } else {
-    t34 = $[78];
+    t38 = $[81];
   }
-  let t35;
-  if ($[79] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t35 = /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "my-0" });
-    $[79] = t35;
+  let t39;
+  if ($[82] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t39 = /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "my-0" });
+    $[82] = t39;
   } else {
-    t35 = $[79];
+    t39 = $[82];
   }
-  let t36;
-  if ($[80] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t36 = /* @__PURE__ */ jsx(Command.Empty, { className: "px-4 py-2", children: "No results found." });
-    $[80] = t36;
+  let t40;
+  if ($[83] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t40 = /* @__PURE__ */ jsx(Command.Empty, { className: "px-4 py-2 text-sm text-text-secondary dark:text-text-secondary-dark", children: "No results found." });
+    $[83] = t40;
   } else {
-    t36 = $[80];
+    t40 = $[83];
   }
-  let t37;
-  if ($[81] !== allValues.length || $[82] !== includeSelectAll || $[83] !== selectedValues.length || $[84] !== toggleAll) {
-    t37 = includeSelectAll && /* @__PURE__ */ jsxs(Command.Item, { onSelect: toggleAll, className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"), children: [
+  let t41;
+  if ($[84] !== allValues.length || $[85] !== includeSelectAll || $[86] !== selectedValues.length || $[87] !== toggleAll) {
+    t41 = includeSelectAll && /* @__PURE__ */ jsxs(Command.Item, { onSelect: toggleAll, className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"), children: [
       /* @__PURE__ */ jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }),
       /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary dark:text-text-secondary-dark", children: "(Select All)" })
     ] }, "all");
-    $[81] = allValues.length;
-    $[82] = includeSelectAll;
-    $[83] = selectedValues.length;
-    $[84] = toggleAll;
-    $[85] = t37;
+    $[84] = allValues.length;
+    $[85] = includeSelectAll;
+    $[86] = selectedValues.length;
+    $[87] = toggleAll;
+    $[88] = t41;
   } else {
-    t37 = $[85];
+    t41 = $[88];
   }
-  let t38;
-  if ($[86] !== children || $[87] !== t37) {
-    t38 = /* @__PURE__ */ jsxs(Command.List, { children: [
-      t36,
+  let t42;
+  if ($[89] !== children || $[90] !== t41) {
+    t42 = /* @__PURE__ */ jsxs(Command.List, { children: [
+      t40,
       /* @__PURE__ */ jsxs(Command.Group, { children: [
-        t37,
+        t41,
         children
       ] })
     ] });
-    $[86] = children;
-    $[87] = t37;
-    $[88] = t38;
-  } else {
-    t38 = $[88];
-  }
-  let t39;
-  if ($[89] !== t34 || $[90] !== t38) {
-    t39 = /* @__PURE__ */ jsxs(Command, { children: [
-      t34,
-      t35,
-      t38
+    $[89] = children;
+    $[90] = t41;
+    $[91] = t42;
+  } else {
+    t42 = $[91];
+  }
+  let t43;
+  if ($[92] !== t38 || $[93] !== t42) {
+    t43 = /* @__PURE__ */ jsxs(Command, { children: [
+      t38,
+      t39,
+      t42
     ] });
-    $[89] = t34;
-    $[90] = t38;
-    $[91] = t39;
+    $[92] = t38;
+    $[93] = t42;
+    $[94] = t43;
   } else {
-    t39 = $[91];
+    t43 = $[94];
   }
-  let t40;
-  if ($[92] !== t30 || $[93] !== t39) {
-    t40 = /* @__PURE__ */ jsx(PopoverPrimitive.Content, { className: t29, align: "start", sideOffset: 8, onEscapeKeyDown: t30, children: t39 });
-    $[92] = t30;
-    $[93] = t39;
-    $[94] = t40;
+  let t44;
+  if ($[95] !== t34 || $[96] !== t43) {
+    t44 = /* @__PURE__ */ jsx(PopoverPrimitive.Content, { className: t33, align: "start", sideOffset: 8, onEscapeKeyDown: t34, children: t43 });
+    $[95] = t34;
+    $[96] = t43;
+    $[97] = t44;
   } else {
-    t40 = $[94];
+    t44 = $[97];
   }
-  let t41;
-  if ($[95] !== isPopoverOpen || $[96] !== modalPopover || $[97] !== onPopoverOpenChange || $[98] !== t28 || $[99] !== t40) {
-    t41 = /* @__PURE__ */ jsxs(PopoverPrimitive.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 ($[98] !== finalContainer || $[99] !== t44) {
+    t45 = /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container: finalContainer, children: t44 });
+    $[98] = finalContainer;
+    $[99] = t44;
+    $[100] = t45;
   } else {
-    t41 = $[100];
+    t45 = $[100];
   }
-  let t42;
-  if ($[101] !== t20 || $[102] !== t21 || $[103] !== t41) {
-    t42 = /* @__PURE__ */ jsxs(MultiSelectContext.Provider, { value: t20, children: [
-      t21,
-      t41
+  let t46;
+  if ($[101] !== modalPopover || $[102] !== onPopoverOpenChange || $[103] !== t24 || $[104] !== t32 || $[105] !== t45) {
+    t46 = /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: t24, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
+      t32,
+      t45
     ] });
-    $[101] = t20;
-    $[102] = t21;
-    $[103] = t41;
-    $[104] = t42;
+    $[101] = modalPopover;
+    $[102] = onPopoverOpenChange;
+    $[103] = t24;
+    $[104] = t32;
+    $[105] = t45;
+    $[106] = t46;
+  } else {
+    t46 = $[106];
+  }
+  let t47;
+  if ($[107] !== t22 || $[108] !== t23 || $[109] !== t46) {
+    t47 = /* @__PURE__ */ jsxs(MultiSelectContext.Provider, { value: t22, children: [
+      t23,
+      t46
+    ] });
+    $[107] = t22;
+    $[108] = t23;
+    $[109] = t46;
+    $[110] = t47;
   } else {
-    t42 = $[104];
+    t47 = $[110];
   }
-  return t42;
+  return t47;
 });
 MultiSelect.displayName = "MultiSelect";
 const MultiSelectItem = React.memo(function MultiSelectItem2(t0) {
@@ -34976,7 +35376,7 @@ const MultiSelectItem = React.memo(function MultiSelectItem2(t0) {
   const t4 = isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "";
   let t5;
   if ($[10] !== className || $[11] !== t4) {
-    t5 = cls("flex flex-row items-center gap-1.5", t4, "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", className);
+    t5 = cls("flex flex-row items-center gap-1.5", t4, "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "text-surface-accent-700 dark:text-surface-accent-300", className);
     $[10] = className;
     $[11] = t4;
     $[12] = t5;
@@ -34993,7 +35393,7 @@ const MultiSelectItem = React.memo(function MultiSelectItem2(t0) {
   }
   let t7;
   if ($[15] !== children || $[16] !== t3 || $[17] !== t5 || $[18] !== t6) {
-    t7 = /* @__PURE__ */ jsxs(Command.Item, { onMouseDown: _temp2, onSelect: t3, className: t5, children: [
+    t7 = /* @__PURE__ */ jsxs(Command.Item, { onMouseDown: _temp2$1, onSelect: t3, className: t5, children: [
       t6,
       children
     ] });
@@ -35051,13 +35451,13 @@ const InnerCheckBox = React.memo(function InnerCheckBox2(t0) {
   }
   return t7;
 });
-function _temp$1(child) {
+function _temp$2(child) {
   if (React.isValidElement(child)) {
     return child.props.value;
   }
   return null;
 }
-function _temp2(e) {
+function _temp2$1(e) {
   e.preventDefault();
   e.stopPropagation();
 }
@@ -35170,13 +35570,13 @@ const RadioGroupItem = React.forwardRef((t0, ref) => {
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 function SearchBar(t0) {
-  const $ = c(39);
+  const $ = c(47);
   const {
     onClick,
     onTextSearch,
     placeholder: t1,
     expandable: t2,
-    large: t3,
+    size: t3,
     innerClassName,
     className,
     autoFocus,
@@ -35186,7 +35586,7 @@ function SearchBar(t0) {
   } = 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] = useState("");
   const [active, setActive] = useState(false);
   const deferredValues = useDebounceValue(searchText, 200);
@@ -35232,217 +35632,586 @@ function SearchBar(t0) {
     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__ */ jsx("div", { className: "absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0", children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsx(SearchIcon, { className: "text-text-disabled dark:text-text-disabled-dark" }) });
-    $[10] = loading;
-    $[11] = t9;
+  if ($[12] !== loading || $[13] !== size) {
+    t9 = loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(IconButton, { className: `${large ? "mr-2 top-1" : "mr-1 top-0"} absolute right-0 z-10`, onClick: clearText, children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) }) : /* @__PURE__ */ jsx("div", { style: {
+  let t21;
+  if ($[37] !== clearText || $[38] !== searchText || $[39] !== size) {
+    t21 = searchText ? /* @__PURE__ */ jsx(IconButton, { className: `${size === "small" ? "mr-0 top-0" : "mr-1 top-0"} absolute right-0 z-10`, size: "small", onClick: clearText, children: /* @__PURE__ */ jsx(CloseIcon, { size: "smallest" }) }) : /* @__PURE__ */ 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__ */ jsxs("div", { onClick, className: t8, children: [
-      t9,
-      t18,
-      t19
+  let t22;
+  if ($[41] !== onClick || $[42] !== t10 || $[43] !== t20 || $[44] !== t21 || $[45] !== t7) {
+    t22 = /* @__PURE__ */ 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 = 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 Select = forwardRef((t0, ref) => {
+  const $ = 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] = useState(open ?? false);
-  useEffect(() => {
-    setOpenInternal(open ?? false);
-  }, [open]);
-  const onValueChangeInternal = 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);
-    }
-    onValueChange?.(typedValue);
-    if (onChange) {
-      const event = {
-        target: {
-          name,
-          value: typedValue
+  let t6;
+  let t7;
+  if ($[27] !== open) {
+    t6 = () => {
+      setOpenInternal(open ?? false);
+    };
+    t7 = [open];
+    $[27] = open;
+    $[28] = t6;
+    $[29] = t7;
+  } else {
+    t6 = $[28];
+    t7 = $[29];
+  }
+  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;
+          }
         }
-      };
-      onChange(event);
-    }
-  }, [onChange, onValueChange, name]);
+      } 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__default.useMemo(() => {
-    if (!hasValue || renderValue) return null;
-    const childrenProps = Children.map(children, (child) => {
-      if (React__default.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__ */ jsxs(SelectPrimitive.Root, { name, value: stringValue, open: openInternal, disabled, onValueChange: onValueChangeInternal, onOpenChange: (open_0) => {
-    onOpenChange?.(open_0);
-    setOpenInternal(open_0);
-  }, ...props, children: [
-    typeof label === "string" ? /* @__PURE__ */ jsx(SelectInputLabel, { error, children: label }) : label,
-    /* @__PURE__ */ 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;
+      Children.forEach(children, (child) => {
+        if (React__default.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__ */ 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__ */ jsxs(SelectPrimitive.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__ */ 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__ */ jsxs(SelectPrimitive.Value, { onClick: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }, placeholder, className: "w-full", children: [
-          hasValue && value !== void 0 && renderValue ? renderValue(value) : placeholder,
-          hasValue && !renderValue && selectedChild
-        ] }) }),
-        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ 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__ */ 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__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(SelectPrimitive.Content, { position, className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin), children: /* @__PURE__ */ jsx(SelectPrimitive.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__ */ jsx(SelectPrimitive.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__ */ 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__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ 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__ */ jsxs(SelectPrimitive.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__ */ 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__ */ 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__ */ jsx(SelectPrimitive.Viewport, { className: t39, style: t40, children });
+    $[101] = children;
+    $[102] = t39;
+    $[103] = t41;
+  } else {
+    t41 = $[103];
+  }
+  let t42;
+  if ($[104] !== position || $[105] !== t41) {
+    t42 = /* @__PURE__ */ jsx(SelectPrimitive.Content, { position, className: t38, children: t41 });
+    $[104] = position;
+    $[105] = t41;
+    $[106] = t42;
+  } else {
+    t42 = $[106];
+  }
+  let t43;
+  if ($[107] !== finalContainer || $[108] !== t42) {
+    t43 = /* @__PURE__ */ jsx(SelectPrimitive.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__ */ jsxs(SelectPrimitive.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__default.memo(function SelectItem2(t0) {
@@ -35533,6 +36302,14 @@ const SelectGroup = React__default.memo(function SelectGroup2(t0) {
   }
   return t3;
 });
+function _temp$1(e) {
+  e.preventDefault();
+  e.stopPropagation();
+}
+function _temp2(e_0) {
+  e_0.preventDefault();
+  e_0.stopPropagation();
+}
 function SliderThumb(props) {
   const $ = c(13);
   const t0 = props.hovered;
@@ -35542,7 +36319,7 @@ function SliderThumb(props) {
     t2 = cls({
       "border-primary bg-primary outline-none": t1,
       "border-surface-accent-300 bg-surface-accent-300 dark:border-surface-700 dark:bg-surface-700": props.props.disabled
-    }, props.classes, "focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-opacity-50", "hover:ring-4 hover:ring-primary hover:ring-opacity-25", "block rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50");
+    }, props.classes, "focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-opacity-50 focus-visible:ring-primary/50", "hover:ring-4 hover:ring-primary hover:ring-opacity-25 hover:ring-primary/25", "block rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50");
     $[0] = props.classes;
     $[1] = props.props.disabled;
     $[2] = t1;
@@ -35560,7 +36337,7 @@ function SliderThumb(props) {
   }
   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];
@@ -35665,7 +36442,7 @@ const Slider = React.forwardRef((t0, ref) => {
   }
   let t10;
   if ($[15] !== t6 || $[16] !== t9) {
-    t10 = /* @__PURE__ */ jsx(SliderPrimitive.Track, { style: t6, className: "relative w-full grow overflow-hidden rounded-full bg-surface-accent-300 bg-opacity-40 dark:bg-surface-700 dark:bg-opacity-40", children: t9 });
+    t10 = /* @__PURE__ */ jsx(SliderPrimitive.Track, { style: t6, className: "relative w-full grow overflow-hidden rounded-full bg-surface-accent-300 bg-opacity-40 bg-surface-accent-300/40 dark:bg-surface-700 dark:bg-opacity-40 dark:bg-surface-700/40", children: t9 });
     $[15] = t6;
     $[16] = t9;
     $[17] = t10;
@@ -35720,13 +36497,14 @@ const Slider = React.forwardRef((t0, ref) => {
 });
 Slider.displayName = "Slider";
 const Sheet = (t0) => {
-  const $ = c(66);
+  const $ = c(70);
   let children;
   let className;
   let onOpenChange;
   let open;
   let overlayClassName;
   let overlayStyle;
+  let portalContainer;
   let props;
   let style;
   let t1;
@@ -35748,6 +36526,7 @@ const Sheet = (t0) => {
       style,
       overlayClassName,
       overlayStyle,
+      portalContainer,
       ...props
     } = t0);
     $[0] = t0;
@@ -35757,13 +36536,14 @@ const Sheet = (t0) => {
     $[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];
@@ -35771,21 +36551,24 @@ const Sheet = (t0) => {
     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] = 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);
@@ -35793,12 +36576,12 @@ const Sheet = (t0) => {
       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];
   }
   useEffect(t4, t5);
   let T0;
@@ -35808,11 +36591,12 @@ const Sheet = (t0) => {
   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",
@@ -35826,113 +36610,118 @@ const Sheet = (t0) => {
       right: "border-l"
     };
     T2 = DialogPrimitive.Root;
-    t11 = displayed || open;
-    t12 = modal;
-    t13 = onOpenChange;
+    t12 = displayed || open;
+    t13 = modal;
+    t14 = onOpenChange;
     T1 = DialogPrimitive.Portal;
-    const t142 = title ?? "Sheet";
-    if ($[40] !== t142) {
-      t9 = /* @__PURE__ */ jsx(DialogPrimitive.Title, { autoFocus: true, tabIndex: 0, children: t142 });
-      $[40] = t142;
-      $[41] = t9;
+    t9 = finalContainer;
+    const t152 = title ?? "Sheet";
+    if ($[43] !== t152) {
+      t10 = /* @__PURE__ */ jsx(DialogPrimitive.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__ */ jsx(DialogPrimitive.Overlay, { className: cls("outline-none", "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm", "bg-black bg-opacity-50", "dark:bg-surface-900 dark:bg-opacity-60", displayed && open ? "opacity-100" : "opacity-0", overlayClassName), style: {
+    if ($[45] !== displayed || $[46] !== includeBackgroundOverlay || $[47] !== open || $[48] !== overlayClassName || $[49] !== overlayStyle) {
+      t11 = includeBackgroundOverlay && /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: cls("outline-none", "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm", "bg-black bg-opacity-50 bg-black/50", "dark:bg-surface-900 dark:bg-opacity-60 dark:bg-surface-900/60", displayed && open ? "opacity-100" : "opacity-0", overlayClassName), style: {
         pointerEvents: displayed ? "auto" : "none",
         ...overlayStyle
       } });
-      $[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.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__ */ 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__ */ jsxs(T1, { children: [
-      t9,
+  if ($[51] !== T0 || $[52] !== children || $[53] !== style || $[54] !== t6 || $[55] !== t7 || $[56] !== t8) {
+    t15 = /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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();
@@ -35940,7 +36729,7 @@ function _temp(event) {
 function getStyleValue(value) {
   return parseInt(value, 10) || 0;
 }
-const styles$1 = {
+const styles = {
   shadow: {
     // Visibility needed to hide the extra text area on iPads
     visibility: "hidden",
@@ -36133,7 +36922,7 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize2(props, ref)
     ),
     /* @__PURE__ */ jsx("textarea", { "aria-hidden": true, className: cls(props.className, props.shadowClassName), readOnly: true, ref: shadowRef, tabIndex: -1, style: {
       padding: 0,
-      ...styles$1.shadow,
+      ...styles.shadow,
       ...style
     } })
   ] });
@@ -36180,8 +36969,13 @@ const TextField = forwardRef(({
   ...inputProps
 }, ref) => {
   const inputRef = inputRefProp ?? useRef(null);
-  const [focused, setFocused] = React__default.useState(document.activeElement === inputRef.current);
+  const [focused, setFocused] = React__default.useState(false);
   const hasValue = value !== void 0 && value !== null && value !== "";
+  useEffect(() => {
+    if (inputRef.current && document.activeElement === inputRef.current) {
+      setFocused(true);
+    }
+  }, []);
   useEffect(() => {
     if (type !== "number") return;
     const handleWheel = (event) => {
@@ -36193,12 +36987,12 @@ const TextField = forwardRef(({
       element?.removeEventListener("wheel", handleWheel);
     };
   }, [inputRef, type]);
-  const input = multiline ? /* @__PURE__ */ jsx(TextareaAutosize, { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, minRows, maxRows, value: value ?? "", onChange, style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName) }) : /* @__PURE__ */ jsx("input", { ...inputProps, ref: inputRef, disabled, style: inputStyle, className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
+  const input = multiline ? /* @__PURE__ */ jsx("textarea", { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, rows: typeof minRows === "string" ? parseInt(minRows) : minRows ?? 3, value: value ?? "", onChange, onFocus: () => setFocused(true), onBlur: () => setFocused(false), style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3", label ? "pt-8 pb-2" : "py-2", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName) }) : /* @__PURE__ */ jsx("input", { ...inputProps, ref: inputRef, disabled, style: inputStyle, className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
     "min-h-[28px]": size === "smallest",
     "min-h-[32px]": size === "small",
     "min-h-[44px]": size === "medium",
     "min-h-[64px]": size === "large"
-  }, label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : "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__ */ 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",
@@ -36215,215 +37009,161 @@ const TextField = forwardRef(({
   ] });
 });
 TextField.displayName = "TextField";
-const Tooltip = (t0) => {
-  const $ = c(28);
+function Tabs(t0) {
+  const $ = c(26);
   const {
-    open,
-    defaultOpen,
-    side: t1,
-    delayDuration: t2,
-    sideOffset,
-    align,
-    onOpenChange,
-    title,
-    tooltipClassName,
-    tooltipStyle,
-    children,
-    asChild: t3,
-    container,
+    value,
+    onValueChange,
     className,
-    style
+    innerClassName,
+    children
   } = 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__ */ jsx(Fragment, { children });
-      $[0] = children;
-      $[1] = t42;
-    } else {
-      t42 = $[1];
-    }
-    return t42;
+  const scrollContainerRef = useRef(null);
+  const [showLeftScroll, setShowLeftScroll] = useState(false);
+  const [showRightScroll, setShowRightScroll] = useState(false);
+  const [isScrollable, setIsScrollable] = useState(false);
+  let t1;
+  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      if (scrollContainerRef.current) {
+        const {
+          scrollLeft,
+          scrollWidth,
+          clientWidth
+        } = scrollContainerRef.current;
+        setShowLeftScroll(scrollLeft > 0);
+        setShowRightScroll(Math.ceil(scrollLeft + clientWidth) < scrollWidth);
+        setIsScrollable(scrollWidth > clientWidth);
+      }
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const checkScroll = t1;
+  let t2;
+  if ($[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      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] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== children) {
+    t3 = [children];
+    $[2] = children;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
   }
+  useEffect(t2, t3);
   let t4;
-  if ($[2] !== asChild || $[3] !== children || $[4] !== className || $[5] !== style) {
-    t4 = asChild ? /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }) : /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { style, className, children }) });
-    $[2] = asChild;
-    $[3] = children;
-    $[4] = className;
-    $[5] = style;
-    $[6] = t4;
+  if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t4 = (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] = t4;
   } else {
-    t4 = $[6];
+    t4 = $[4];
   }
-  const trigger = t4;
+  const scroll = 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 ($[5] !== className) {
+    t5 = cls("flex flex-row items-center min-w-0", className);
+    $[5] = className;
+    $[6] = t5;
   } else {
-    t5 = $[8];
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== isScrollable || $[8] !== showLeftScroll) {
+    t6 = isScrollable && /* @__PURE__ */ 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", "mr-1 bg-surface-50 dark:bg-surface-900 border", defaultBorderMixin), children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: "small" }) });
+    $[7] = isScrollable;
+    $[8] = showLeftScroll;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
   }
-  const t6 = sideOffset === void 0 ? 4 : sideOffset;
   let t7;
-  if ($[9] !== align || $[10] !== side || $[11] !== t5 || $[12] !== t6 || $[13] !== title || $[14] !== tooltipStyle) {
-    t7 = /* @__PURE__ */ jsx(TooltipPrimitive.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 ($[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t7 = {
+      scrollbarWidth: "none",
+      msOverflowStyle: "none"
+    };
+    $[10] = t7;
   } else {
-    t7 = $[15];
+    t7 = $[10];
   }
   let t8;
-  if ($[16] !== container || $[17] !== t7) {
-    t8 = /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container, children: t7 });
-    $[16] = container;
-    $[17] = t7;
-    $[18] = t8;
+  if ($[11] !== innerClassName) {
+    t8 = cls("border", defaultBorderMixin, "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", innerClassName);
+    $[11] = innerClassName;
+    $[12] = t8;
   } else {
-    t8 = $[18];
+    t8 = $[12];
   }
   let t9;
-  if ($[19] !== defaultOpen || $[20] !== onOpenChange || $[21] !== open || $[22] !== t8 || $[23] !== trigger) {
-    t9 = /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { open, onOpenChange, defaultOpen, children: [
-      trigger,
-      t8
-    ] });
-    $[19] = defaultOpen;
-    $[20] = onOpenChange;
-    $[21] = open;
-    $[22] = t8;
-    $[23] = trigger;
-    $[24] = t9;
+  if ($[13] !== children || $[14] !== t8) {
+    t9 = /* @__PURE__ */ jsx("div", { ref: scrollContainerRef, className: "flex-1 overflow-x-auto no-scrollbar min-w-0", onScroll: checkScroll, style: t7, children: /* @__PURE__ */ jsx(TabsPrimitive.List, { className: t8, children }) });
+    $[13] = children;
+    $[14] = t8;
+    $[15] = t9;
   } else {
-    t9 = $[24];
+    t9 = $[15];
   }
   let t10;
-  if ($[25] !== delayDuration || $[26] !== t9) {
-    t10 = /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: t9 });
-    $[25] = delayDuration;
-    $[26] = t9;
-    $[27] = t10;
-  } else {
-    t10 = $[27];
-  }
-  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 $ = 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;
-  } else {
-    t1 = $[1];
-  }
-  let t2;
-  if ($[2] !== children || $[3] !== t1) {
-    t2 = /* @__PURE__ */ jsx(TabsPrimitive.List, { className: t1, children });
-    $[2] = children;
-    $[3] = t1;
-    $[4] = t2;
+  if ($[16] !== isScrollable || $[17] !== showRightScroll) {
+    t10 = isScrollable && /* @__PURE__ */ 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", "ml-1 bg-surface-50 dark:bg-surface-900 border", defaultBorderMixin), children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: "small" }) });
+    $[16] = isScrollable;
+    $[17] = showRightScroll;
+    $[18] = t10;
   } else {
-    t2 = $[4];
+    t10 = $[18];
   }
-  let t3;
-  if ($[5] !== className || $[6] !== onValueChange || $[7] !== t2 || $[8] !== value) {
-    t3 = /* @__PURE__ */ jsx(TabsPrimitive.Root, { value, onValueChange, className, children: t2 });
-    $[5] = className;
-    $[6] = onValueChange;
-    $[7] = t2;
-    $[8] = value;
-    $[9] = t3;
+  let t11;
+  if ($[19] !== onValueChange || $[20] !== t10 || $[21] !== t5 || $[22] !== t6 || $[23] !== t9 || $[24] !== value) {
+    t11 = /* @__PURE__ */ jsxs(TabsPrimitive.Root, { value, onValueChange, className: t5, children: [
+      t6,
+      t9,
+      t10
+    ] });
+    $[19] = onValueChange;
+    $[20] = t10;
+    $[21] = t5;
+    $[22] = t6;
+    $[23] = t9;
+    $[24] = value;
+    $[25] = t11;
   } else {
-    t3 = $[9];
+    t11 = $[25];
   }
-  return t3;
+  return t11;
 }
 function Tab(t0) {
-  const $ = c(13);
+  const $ = c(8);
   const {
     value,
     className,
@@ -36432,43 +37172,26 @@ function Tab(t0) {
     disabled
   } = 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);
+  if ($[0] !== className || $[1] !== innerClassName) {
+    t1 = 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", className, innerClassName);
     $[0] = className;
-    $[1] = disabled;
+    $[1] = innerClassName;
     $[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__ */ jsx("div", { className: t2, children });
-    $[5] = children;
-    $[6] = t2;
-    $[7] = t3;
-  } else {
-    t3 = $[7];
-  }
-  let t4;
-  if ($[8] !== disabled || $[9] !== t1 || $[10] !== t3 || $[11] !== value) {
-    t4 = /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { value, disabled, className: t1, children: t3 });
-    $[8] = disabled;
-    $[9] = t1;
-    $[10] = t3;
-    $[11] = value;
-    $[12] = t4;
+  if ($[3] !== children || $[4] !== disabled || $[5] !== t1 || $[6] !== value) {
+    t2 = /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { value, disabled, className: t1, children });
+    $[3] = children;
+    $[4] = disabled;
+    $[5] = t1;
+    $[6] = value;
+    $[7] = t2;
   } else {
-    t4 = $[12];
+    t2 = $[7];
   }
-  return t4;
+  return t2;
 }
 const Table = React__default.memo((t0) => {
   const $ = c(12);
@@ -36537,7 +37260,7 @@ const TableBody = React__default.memo((t0) => {
   }
   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 {
@@ -36712,6 +37435,8 @@ function Popover(t0) {
   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) {
@@ -36767,9 +37492,9 @@ function Popover(t0) {
     t7 = $[17];
   }
   let t8;
-  if ($[18] !== portalContainer || $[19] !== t7) {
-    t8 = /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container: portalContainer, children: t7 });
-    $[18] = portalContainer;
+  if ($[18] !== finalContainer || $[19] !== t7) {
+    t8 = /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container: finalContainer, children: t7 });
+    $[18] = finalContainer;
     $[19] = t7;
     $[20] = t8;
   } else {
@@ -36793,7 +37518,7 @@ function Popover(t0) {
   return t9;
 }
 const popoverStyles = `
-
+/* ... (styles remain unchanged) ... */
 .PopoverContent {
   animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
@@ -36812,7 +37537,6 @@ const popoverStyles = `
   animation-name: slideRightAndFade;
 }
 
-
 @keyframes slideUpAndFade {
   from {
     opacity: 0;
@@ -36910,7 +37634,7 @@ const Badge = React__default.forwardRef((t0, ref) => {
 Badge.displayName = "Badge";
 function DebouncedTextField(props) {
   const $ = c(13);
-  const previousEventRef = React__default.useRef();
+  const previousEventRef = React__default.useRef(void 0);
   const [internalValue, setInternalValue] = React__default.useState(props.value);
   const deferredValue = useDeferredValue(internalValue);
   let t0;
@@ -37017,6 +37741,60 @@ function Skeleton(t0) {
   }
   return t5;
 }
+function ToggleButtonGroup(t0) {
+  const $ = 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__ */ 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__ */ 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__ */ jsx("div", { className: t1, children: t2 });
+    $[9] = t1;
+    $[10] = t2;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  return t3;
+}
 export {
   AbcIcon,
   AcUnitIcon,
@@ -37405,6 +38183,7 @@ export {
   CollectionsBookmarkIcon,
   CollectionsIcon,
   ColorLensIcon,
+  ColorPicker,
   ColorizeIcon,
   CommentBankIcon,
   CommentIcon,
@@ -38521,6 +39300,7 @@ export {
   PoolIcon,
   Popover,
   PortableWifiOffIcon,
+  PortalContainerProvider,
   PortraitIcon,
   PostAddIcon,
   PowerIcon,
@@ -39027,6 +39807,7 @@ export {
   TitleIcon,
   TocIcon,
   TodayIcon,
+  ToggleButtonGroup,
   ToggleOffIcon,
   ToggleOnIcon,
   TokenIcon,
@@ -39316,6 +40097,7 @@ export {
   useDebounceValue,
   useIconStyles,
   useInjectStyles,
-  useOutsideAlerter
+  useOutsideAlerter,
+  usePortalContainer
 };
 //# sourceMappingURL=index.es.js.map