@firecms/ui 3.1.0-canary.24c8270 → 3.1.0-canary.501d471

package/dist/index.es.js

@@ -23,7 +23,6 @@ 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 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 focus:bg-surface-accent-100/70 dark:focus:bg-surface-800/60";
@@ -812,6 +811,7 @@ const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
   className,
   fullWidth = true,
   inputClassName,
+  switchAdornment,
   ...props
 }) {
   const ref = React__default.useRef(null);
@@ -837,6 +837,7 @@ const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
     }
   }, children: [
     /* @__PURE__ */ jsx(BooleanSwitch, { value, ref: refInput, size, className: cls(invisible && focus ? focusedClasses : "", inputClassName), disabled, ...props }),
+    switchAdornment,
     /* @__PURE__ */ jsx("div", { className: cls("flex-grow", position === "end" ? "mr-4" : "ml-4", size === "small" || size === "smallest" ? "text-sm" : "text-base"), children: label })
   ] });
 };
@@ -853,18 +854,29 @@ const ButtonInner = React__default.memo(React__default.forwardRef((t0, ref) => {
   let t5;
   let t6;
   if ($[0] !== t0) {
-    ({
-      children,
-      className,
-      variant: t1,
-      disabled: t2,
-      size: t3,
-      startIcon: t4,
-      fullWidth: t5,
-      component: Component,
-      color: t6,
-      ...props
-    } = t0);
+    const {
+      children: t72,
+      className: t82,
+      variant: t92,
+      disabled: t102,
+      size: t112,
+      startIcon: t122,
+      fullWidth: t132,
+      component: t142,
+      color: t152,
+      loading,
+      ...t162
+    } = t0;
+    children = t72;
+    className = t82;
+    t1 = t92;
+    t2 = t102;
+    t3 = t112;
+    t4 = t122;
+    t5 = t132;
+    Component = t142;
+    t6 = t152;
+    props = t162;
     $[0] = t0;
     $[1] = Component;
     $[2] = children;
@@ -942,7 +954,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 bg-surface-300/40 dark:bg-surface-500/40": t25
+        "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-70 bg-surface-300/70 dark:bg-surface-500/70": t25
       });
       const sizeClasses2 = cls({
         "py-1 px-2": size === "small",
@@ -1408,6 +1420,50 @@ function HandleIcon() {
   }
   return t0;
 }
+const sizeMap = {
+  smallest: 16,
+  small: 20,
+  medium: 24,
+  large: 28
+};
+function FirestoreIcon(props) {
+  const $ = c(7);
+  const s = typeof props.size === "number" ? props.size : sizeMap[props.size ?? "medium"] ?? 24;
+  let t0;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t0 = /* @__PURE__ */ jsx("path", { d: "M22.575 87.933A52.16 52.16 0 0034.787 90.513c5.84.204 11.395-1.004 16.359-3.298a70.68 70.68 0 01-15.948-10.013c-2.98 4.778-7.393 8.548-12.623 10.731z", opacity: ".7" });
+    t1 = /* @__PURE__ */ jsx("path", { d: "M35.2 77.205c-10.505-9.714-16.878-23.776-16.339-39.2.018-.499.045-1.001.075-1.5a39.51 39.51 0 00-5.866-.855 38.77 38.77 0 00-8.34.997A53.07 53.07 0 00.022 53.236c-.544 15.58 8.884 29.191 22.553 34.697 5.23-2.18 9.642-5.948 12.625-10.728z", opacity: ".6" });
+    t2 = /* @__PURE__ */ jsx("path", { d: "M35.2 77.205a31.63 31.63 0 004.096-13.428c.452-12.985-8.278-24.155-20.36-27.273-.03.5-.058 1.002-.076 1.502-.536 15.421 5.835 29.483 16.34 39.199z", opacity: ".7" });
+    t3 = /* @__PURE__ */ jsx("path", { d: "M37.944 0a73.99 73.99 0 00-15.603 21.156 72.82 72.82 0 00-3.41 15.349c12.082 3.117 20.812 14.288 20.36 27.275a31.58 31.58 0 01-4.098 13.425 70.76 70.76 0 0015.948 10.013c11.951-5.523 20.43-17.41 20.919-31.467.318-9.11-3.181-17.228-8.126-24.081C58.711 24.424 37.944 0 37.944 0z" });
+    $[0] = t0;
+    $[1] = t1;
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+    t2 = $[2];
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== props.className || $[5] !== s) {
+    t4 = /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", className: props.className, fill: "currentColor", width: s, height: s, viewBox: "0 0 73 91", children: [
+      t0,
+      t1,
+      t2,
+      t3
+    ] });
+    $[4] = props.className;
+    $[5] = s;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  return t4;
+}
 const _10kIcon = React__default.forwardRef((props, ref) => {
   const $ = c(3);
   let t0;
@@ -8674,6 +8730,20 @@ const DatasetLinkedIcon = React__default.forwardRef((props, ref) => {
   return t0;
 });
 DatasetLinkedIcon.displayName = "DatasetLinkedIcon";
+const DatabaseIcon = React__default.forwardRef((props, ref) => {
+  const $ = c(3);
+  let t0;
+  if ($[0] !== props || $[1] !== ref) {
+    t0 = /* @__PURE__ */ jsx(Icon, { ...props, iconKey: "database", ref });
+    $[0] = props;
+    $[1] = ref;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+});
+DatabaseIcon.displayName = "DatabaseIcon";
 const DateRangeIcon = React__default.forwardRef((props, ref) => {
   const $ = c(3);
   let t0;
@@ -32284,8 +32354,8 @@ const sizeClassNames = {
   medium: "px-3 py-1 text-sm",
   large: "px-4 py-1.5 text-sm"
 };
-function Chip(t0) {
-  const $ = c(18);
+const Chip = React__default.forwardRef(function Chip2(t0, ref) {
+  const $ = c(19);
   const {
     children,
     colorScheme,
@@ -32340,128 +32410,184 @@ function Chip(t0) {
     t10 = $[11];
   }
   let t11;
-  if ($[12] !== children || $[13] !== icon || $[14] !== onClick || $[15] !== t10 || $[16] !== t7) {
-    t11 = /* @__PURE__ */ jsxs("div", { className: t7, onClick, style: t10, children: [
+  if ($[12] !== children || $[13] !== icon || $[14] !== onClick || $[15] !== ref || $[16] !== t10 || $[17] !== t7) {
+    t11 = /* @__PURE__ */ jsxs("div", { ref, className: t7, onClick, style: t10, children: [
       children,
       icon
     ] });
     $[12] = children;
     $[13] = icon;
     $[14] = onClick;
-    $[15] = t10;
-    $[16] = t7;
-    $[17] = t11;
+    $[15] = ref;
+    $[16] = t10;
+    $[17] = t7;
+    $[18] = t11;
   } else {
-    t11 = $[17];
+    t11 = $[18];
   }
   return t11;
-}
-const Tooltip = (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 Tooltip = React__default.forwardRef((t0, ref) => {
+  const $ = c(47);
+  let align;
+  let children;
+  let className;
+  let container;
+  let defaultOpen;
+  let onOpenChange;
+  let open;
+  let props;
+  let sideOffset;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  let title;
+  let tooltipClassName;
+  let tooltipStyle;
+  if ($[0] !== t0) {
+    ({
+      open,
+      defaultOpen,
+      side: t1,
+      delayDuration: t2,
+      sideOffset,
+      align,
+      onOpenChange,
+      title,
+      tooltipClassName,
+      tooltipStyle,
+      children,
+      asChild: t3,
+      container,
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = align;
+    $[2] = children;
+    $[3] = className;
+    $[4] = container;
+    $[5] = defaultOpen;
+    $[6] = onOpenChange;
+    $[7] = open;
+    $[8] = props;
+    $[9] = sideOffset;
+    $[10] = style;
+    $[11] = t1;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = title;
+    $[15] = tooltipClassName;
+    $[16] = tooltipStyle;
+  } else {
+    align = $[1];
+    children = $[2];
+    className = $[3];
+    container = $[4];
+    defaultOpen = $[5];
+    onOpenChange = $[6];
+    open = $[7];
+    props = $[8];
+    sideOffset = $[9];
+    style = $[10];
+    t1 = $[11];
+    t2 = $[12];
+    t3 = $[13];
+    title = $[14];
+    tooltipClassName = $[15];
+    tooltipStyle = $[16];
+  }
   const side = t1 === void 0 ? "bottom" : t1;
   const delayDuration = t2 === void 0 ? 200 : t2;
   const asChild = t3 === void 0 ? false : t3;
-  useInjectStyles("Tooltip", styles$1);
+  useInjectStyles("Tooltip", styles);
   const contextContainer = usePortalContainer();
   const finalContainer = container ?? contextContainer ?? void 0;
   if (!title) {
     let t42;
-    if ($[0] !== children) {
+    if ($[17] !== children) {
       t42 = /* @__PURE__ */ jsx(Fragment, { children });
-      $[0] = children;
-      $[1] = t42;
+      $[17] = children;
+      $[18] = t42;
     } else {
-      t42 = $[1];
+      t42 = $[18];
     }
     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];
+  if ($[19] !== asChild || $[20] !== children || $[21] !== className || $[22] !== props || $[23] !== ref || $[24] !== style) {
+    t4 = asChild ? /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }) : /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { style, className, ref, ...props, children }) });
+    $[19] = asChild;
+    $[20] = children;
+    $[21] = className;
+    $[22] = props;
+    $[23] = ref;
+    $[24] = style;
+    $[25] = t4;
+  } else {
+    t4 = $[25];
   }
   const trigger = t4;
   let t5;
-  if ($[7] !== tooltipClassName) {
+  if ($[26] !== tooltipClassName) {
     t5 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName);
-    $[7] = tooltipClassName;
-    $[8] = t5;
+    $[26] = tooltipClassName;
+    $[27] = t5;
   } else {
-    t5 = $[8];
+    t5 = $[27];
   }
   const t6 = sideOffset === void 0 ? 4 : sideOffset;
   let t7;
-  if ($[9] !== align || $[10] !== side || $[11] !== t5 || $[12] !== t6 || $[13] !== title || $[14] !== tooltipStyle) {
+  if ($[28] !== align || $[29] !== side || $[30] !== t5 || $[31] !== t6 || $[32] !== title || $[33] !== 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;
+    $[28] = align;
+    $[29] = side;
+    $[30] = t5;
+    $[31] = t6;
+    $[32] = title;
+    $[33] = tooltipStyle;
+    $[34] = t7;
   } else {
-    t7 = $[15];
+    t7 = $[34];
   }
   let t8;
-  if ($[16] !== finalContainer || $[17] !== t7) {
+  if ($[35] !== finalContainer || $[36] !== t7) {
     t8 = /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: finalContainer, children: t7 });
-    $[16] = finalContainer;
-    $[17] = t7;
-    $[18] = t8;
+    $[35] = finalContainer;
+    $[36] = t7;
+    $[37] = t8;
   } else {
-    t8 = $[18];
+    t8 = $[37];
   }
   let t9;
-  if ($[19] !== defaultOpen || $[20] !== onOpenChange || $[21] !== open || $[22] !== t8 || $[23] !== trigger) {
+  if ($[38] !== defaultOpen || $[39] !== onOpenChange || $[40] !== open || $[41] !== t8 || $[42] !== trigger) {
     t9 = /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { open, onOpenChange, defaultOpen, children: [
       trigger,
       t8
     ] });
-    $[19] = defaultOpen;
-    $[20] = onOpenChange;
-    $[21] = open;
-    $[22] = t8;
-    $[23] = trigger;
-    $[24] = t9;
+    $[38] = defaultOpen;
+    $[39] = onOpenChange;
+    $[40] = open;
+    $[41] = t8;
+    $[42] = trigger;
+    $[43] = t9;
   } else {
-    t9 = $[24];
+    t9 = $[43];
   }
   let t10;
-  if ($[25] !== delayDuration || $[26] !== t9) {
+  if ($[44] !== delayDuration || $[45] !== t9) {
     t10 = /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: t9 });
-    $[25] = delayDuration;
-    $[26] = t9;
-    $[27] = t10;
+    $[44] = delayDuration;
+    $[45] = t9;
+    $[46] = t10;
   } else {
-    t10 = $[27];
+    t10 = $[46];
   }
   return t10;
-};
-const styles$1 = `
+});
+const styles = `
 
 .TooltipContent {
   animation-duration: 220ms;
@@ -32933,7 +33059,7 @@ const DateTimeField = ({
   const [focused, setFocused] = useState(false);
   const [internalValue, setInternalValue] = useState("");
   const [isTyping, setIsTyping] = useState(false);
-  const invalidValue = value !== void 0 && value !== null && !(value instanceof Date);
+  const invalidValue = value !== void 0 && value !== null && (!(value instanceof Date) || isNaN(value.getTime()));
   useInjectStyles("DateTimeField", inputStyles);
   const handleClear = (e) => {
     e.preventDefault();
@@ -32956,7 +33082,12 @@ const DateTimeField = ({
       // undefined = local timezone
     };
     const formatter = new Intl.DateTimeFormat("en-CA", options);
-    const parts = formatter.formatToParts(dateValue);
+    let parts;
+    try {
+      parts = formatter.formatToParts(dateValue);
+    } catch {
+      return "";
+    }
     const getPart = (type) => parts.find((p) => p.type === type)?.value ?? "";
     const year = getPart("year");
     const month = getPart("month");
@@ -33148,7 +33279,7 @@ const Dialog = (t0) => {
         return () => clearTimeout(timeout);
       } else {
         setDisplayed(true);
-        return _temp$3;
+        return _temp$4;
       }
     };
     t7 = [open];
@@ -33295,7 +33426,7 @@ const Dialog = (t0) => {
   }
   return t28;
 };
-function _temp$3() {
+function _temp$4() {
 }
 function DialogActions(t0) {
   const $ = c(7);
@@ -34825,7 +34956,7 @@ function SelectInputLabel(t0) {
 }
 const MultiSelectContext = React.createContext({});
 const MultiSelect = React.forwardRef((t0, ref) => {
-  const $ = c(111);
+  const $ = c(112);
   const {
     value,
     size: t1,
@@ -34846,7 +34977,8 @@ const MultiSelect = React.forwardRef((t0, ref) => {
     renderValues,
     open,
     onOpenChange,
-    portalContainer
+    portalContainer,
+    endAdornment
   } = t0;
   const size = t1 === void 0 ? "large" : t1;
   const modalPopover = t2 === void 0 ? true : t2;
@@ -34910,7 +35042,7 @@ const MultiSelect = React.forwardRef((t0, ref) => {
   let t12;
   let t13;
   if ($[9] !== children) {
-    t13 = children ? Children.map(children, _temp$2)?.filter(Boolean) ?? [] : [];
+    t13 = children ? Children.map(children, _temp$3)?.filter(Boolean) ?? [] : [];
     $[9] = children;
     $[10] = t13;
   } else {
@@ -35111,7 +35243,7 @@ const MultiSelect = React.forwardRef((t0, ref) => {
     t30 = $[53];
   }
   let t31;
-  if ($[54] !== handleClear || $[55] !== includeClear || $[56] !== isPopoverOpen || $[57] !== optionsMap || $[58] !== placeholder || $[59] !== renderValues || $[60] !== selectedValues || $[61] !== size || $[62] !== toggleOption || $[63] !== useChips) {
+  if ($[54] !== endAdornment || $[55] !== handleClear || $[56] !== includeClear || $[57] !== isPopoverOpen || $[58] !== optionsMap || $[59] !== placeholder || $[60] !== renderValues || $[61] !== selectedValues || $[62] !== size || $[63] !== toggleOption || $[64] !== useChips) {
     t31 = selectedValues.length > 0 ? /* @__PURE__ */ 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),
@@ -35130,122 +35262,127 @@ const MultiSelect = React.forwardRef((t0, ref) => {
         })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        includeClear && /* @__PURE__ */ jsx(CloseIcon, { className: "ml-4", size: "small", onClick: (event_1) => {
+        includeClear && !endAdornment && /* @__PURE__ */ jsx(CloseIcon, { className: "ml-4", size: "small", onClick: (event_1) => {
           event_1.stopPropagation();
           handleClear();
         } }),
+        endAdornment && /* @__PURE__ */ jsx("div", { className: "ml-4 flex items-center", onClick: _temp2$1, children: endAdornment }),
         /* @__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" : "") }) })
       ] })
     ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full mx-auto", children: [
       /* @__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" : "") }) })
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        endAdornment && /* @__PURE__ */ jsx("div", { className: "ml-4 flex items-center", onClick: _temp3, children: endAdornment }),
+        /* @__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" : "") }) })
+      ] })
     ] });
-    $[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];
+    $[54] = endAdornment;
+    $[55] = handleClear;
+    $[56] = includeClear;
+    $[57] = isPopoverOpen;
+    $[58] = optionsMap;
+    $[59] = placeholder;
+    $[60] = renderValues;
+    $[61] = selectedValues;
+    $[62] = size;
+    $[63] = toggleOption;
+    $[64] = useChips;
+    $[65] = t31;
+  } else {
+    t31 = $[65];
   }
   let t32;
-  if ($[65] !== handleTogglePopover || $[66] !== t25 || $[67] !== t30 || $[68] !== t31) {
+  if ($[66] !== handleTogglePopover || $[67] !== t25 || $[68] !== t30 || $[69] !== 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;
+    $[66] = handleTogglePopover;
+    $[67] = t25;
+    $[68] = t30;
+    $[69] = t31;
+    $[70] = t32;
   } else {
-    t32 = $[69];
+    t32 = $[70];
   }
   let t33;
-  if ($[70] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+  if ($[71] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
     t33 = cls("z-50 overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin);
-    $[70] = t33;
+    $[71] = t33;
   } else {
-    t33 = $[70];
+    t33 = $[71];
   }
   let t34;
-  if ($[71] !== onPopoverOpenChange) {
+  if ($[72] !== onPopoverOpenChange) {
     t34 = () => onPopoverOpenChange(false);
-    $[71] = onPopoverOpenChange;
-    $[72] = t34;
+    $[72] = onPopoverOpenChange;
+    $[73] = t34;
   } else {
-    t34 = $[72];
+    t34 = $[73];
   }
   let t35;
-  if ($[73] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+  if ($[74] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
     t35 = cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow text-surface-accent-900 dark:text-white");
-    $[73] = t35;
+    $[74] = t35;
   } else {
-    t35 = $[73];
+    t35 = $[74];
   }
   let t36;
-  if ($[74] !== handleInputKeyDown) {
+  if ($[75] !== handleInputKeyDown) {
     t36 = /* @__PURE__ */ jsx(Command.Input, { className: t35, placeholder: "Search...", onKeyDown: handleInputKeyDown });
-    $[74] = handleInputKeyDown;
-    $[75] = t36;
+    $[75] = handleInputKeyDown;
+    $[76] = t36;
   } else {
-    t36 = $[75];
+    t36 = $[76];
   }
   let t37;
-  if ($[76] !== handleClear || $[77] !== selectedValues.length) {
+  if ($[77] !== handleClear || $[78] !== 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;
+    $[77] = handleClear;
+    $[78] = selectedValues.length;
+    $[79] = t37;
   } else {
-    t37 = $[78];
+    t37 = $[79];
   }
   let t38;
-  if ($[79] !== t36 || $[80] !== t37) {
+  if ($[80] !== t36 || $[81] !== t37) {
     t38 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       t36,
       t37
     ] });
-    $[79] = t36;
-    $[80] = t37;
-    $[81] = t38;
+    $[80] = t36;
+    $[81] = t37;
+    $[82] = t38;
   } else {
-    t38 = $[81];
+    t38 = $[82];
   }
   let t39;
-  if ($[82] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+  if ($[83] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
     t39 = /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "my-0" });
-    $[82] = t39;
+    $[83] = t39;
   } else {
-    t39 = $[82];
+    t39 = $[83];
   }
   let t40;
-  if ($[83] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+  if ($[84] === /* @__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;
+    $[84] = t40;
   } else {
-    t40 = $[83];
+    t40 = $[84];
   }
   let t41;
-  if ($[84] !== allValues.length || $[85] !== includeSelectAll || $[86] !== selectedValues.length || $[87] !== toggleAll) {
+  if ($[85] !== allValues.length || $[86] !== includeSelectAll || $[87] !== selectedValues.length || $[88] !== 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");
-    $[84] = allValues.length;
-    $[85] = includeSelectAll;
-    $[86] = selectedValues.length;
-    $[87] = toggleAll;
-    $[88] = t41;
+    $[85] = allValues.length;
+    $[86] = includeSelectAll;
+    $[87] = selectedValues.length;
+    $[88] = toggleAll;
+    $[89] = t41;
   } else {
-    t41 = $[88];
+    t41 = $[89];
   }
   let t42;
-  if ($[89] !== children || $[90] !== t41) {
+  if ($[90] !== children || $[91] !== t41) {
     t42 = /* @__PURE__ */ jsxs(Command.List, { children: [
       t40,
       /* @__PURE__ */ jsxs(Command.Group, { children: [
@@ -35253,70 +35390,70 @@ const MultiSelect = React.forwardRef((t0, ref) => {
         children
       ] })
     ] });
-    $[89] = children;
-    $[90] = t41;
-    $[91] = t42;
+    $[90] = children;
+    $[91] = t41;
+    $[92] = t42;
   } else {
-    t42 = $[91];
+    t42 = $[92];
   }
   let t43;
-  if ($[92] !== t38 || $[93] !== t42) {
+  if ($[93] !== t38 || $[94] !== t42) {
     t43 = /* @__PURE__ */ jsxs(Command, { children: [
       t38,
       t39,
       t42
     ] });
-    $[92] = t38;
-    $[93] = t42;
-    $[94] = t43;
+    $[93] = t38;
+    $[94] = t42;
+    $[95] = t43;
   } else {
-    t43 = $[94];
+    t43 = $[95];
   }
   let t44;
-  if ($[95] !== t34 || $[96] !== t43) {
+  if ($[96] !== t34 || $[97] !== t43) {
     t44 = /* @__PURE__ */ jsx(PopoverPrimitive.Content, { className: t33, align: "start", sideOffset: 8, onEscapeKeyDown: t34, children: t43 });
-    $[95] = t34;
-    $[96] = t43;
-    $[97] = t44;
+    $[96] = t34;
+    $[97] = t43;
+    $[98] = t44;
   } else {
-    t44 = $[97];
+    t44 = $[98];
   }
   let t45;
-  if ($[98] !== finalContainer || $[99] !== t44) {
+  if ($[99] !== finalContainer || $[100] !== t44) {
     t45 = /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container: finalContainer, children: t44 });
-    $[98] = finalContainer;
-    $[99] = t44;
-    $[100] = t45;
+    $[99] = finalContainer;
+    $[100] = t44;
+    $[101] = t45;
   } else {
-    t45 = $[100];
+    t45 = $[101];
   }
   let t46;
-  if ($[101] !== modalPopover || $[102] !== onPopoverOpenChange || $[103] !== t24 || $[104] !== t32 || $[105] !== t45) {
+  if ($[102] !== modalPopover || $[103] !== onPopoverOpenChange || $[104] !== t24 || $[105] !== t32 || $[106] !== t45) {
     t46 = /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: t24, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
       t32,
       t45
     ] });
-    $[101] = modalPopover;
-    $[102] = onPopoverOpenChange;
-    $[103] = t24;
-    $[104] = t32;
-    $[105] = t45;
-    $[106] = t46;
+    $[102] = modalPopover;
+    $[103] = onPopoverOpenChange;
+    $[104] = t24;
+    $[105] = t32;
+    $[106] = t45;
+    $[107] = t46;
   } else {
-    t46 = $[106];
+    t46 = $[107];
   }
   let t47;
-  if ($[107] !== t22 || $[108] !== t23 || $[109] !== t46) {
+  if ($[108] !== t22 || $[109] !== t23 || $[110] !== t46) {
     t47 = /* @__PURE__ */ jsxs(MultiSelectContext.Provider, { value: t22, children: [
       t23,
       t46
     ] });
-    $[107] = t22;
-    $[108] = t23;
-    $[109] = t46;
-    $[110] = t47;
+    $[108] = t22;
+    $[109] = t23;
+    $[110] = t46;
+    $[111] = t47;
   } else {
-    t47 = $[110];
+    t47 = $[111];
   }
   return t47;
 });
@@ -35393,7 +35530,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$1, onSelect: t3, className: t5, children: [
+    t7 = /* @__PURE__ */ jsxs(Command.Item, { onMouseDown: _temp4, onSelect: t3, className: t5, children: [
       t6,
       children
     ] });
@@ -35451,7 +35588,7 @@ const InnerCheckBox = React.memo(function InnerCheckBox2(t0) {
   }
   return t7;
 });
-function _temp$2(child) {
+function _temp$3(child) {
   if (React.isValidElement(child)) {
     return child.props.value;
   }
@@ -35461,6 +35598,14 @@ function _temp2$1(e) {
   e.preventDefault();
   e.stopPropagation();
 }
+function _temp3(e_0) {
+  e_0.preventDefault();
+  e_0.stopPropagation();
+}
+function _temp4(e) {
+  e.preventDefault();
+  e.stopPropagation();
+}
 function Paper(t0) {
   const $ = c(6);
   const {
@@ -35569,6 +35714,214 @@ const RadioGroupItem = React.forwardRef((t0, ref) => {
   return t3;
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+function ResizablePanels(t0) {
+  const $ = c(40);
+  const {
+    firstPanel,
+    secondPanel,
+    showFirstPanel: t1,
+    showSecondPanel: t2,
+    panelSizePercent,
+    onPanelSizeChange,
+    minPanelSizePx: t3,
+    orientation: t4,
+    className
+  } = t0;
+  const showFirstPanel = t1 === void 0 ? true : t1;
+  const showSecondPanel = t2 === void 0 ? true : t2;
+  const minPanelSizePx = t3 === void 0 ? 200 : t3;
+  const orientation = t4 === void 0 ? "horizontal" : t4;
+  const containerRef = useRef(null);
+  const isResizingRef = useRef(false);
+  const firstPanelRef = useRef(null);
+  const startPosRef = useRef(0);
+  const startSizeRef = useRef(0);
+  const [, setIsResizing] = useState(false);
+  const isHorizontal = orientation === "horizontal";
+  let t5;
+  if ($[0] !== isHorizontal || $[1] !== showFirstPanel || $[2] !== showSecondPanel) {
+    t5 = (e) => {
+      if (!showFirstPanel || !showSecondPanel) {
+        return;
+      }
+      e.preventDefault();
+      isResizingRef.current = true;
+      setIsResizing(true);
+      startPosRef.current = isHorizontal ? e.clientX : e.clientY;
+      if (firstPanelRef.current) {
+        const rect = firstPanelRef.current.getBoundingClientRect();
+        startSizeRef.current = isHorizontal ? rect.width : rect.height;
+      }
+      document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
+      document.body.style.userSelect = "none";
+    };
+    $[0] = isHorizontal;
+    $[1] = showFirstPanel;
+    $[2] = showSecondPanel;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  const handleResizeStart = t5;
+  let t6;
+  let t7;
+  if ($[4] !== isHorizontal || $[5] !== minPanelSizePx || $[6] !== onPanelSizeChange) {
+    t6 = () => {
+      const handleMouseMove = (e_0) => {
+        if (!isResizingRef.current || !containerRef.current) {
+          return;
+        }
+        const currentPos = isHorizontal ? e_0.clientX : e_0.clientY;
+        const delta = currentPos - startPosRef.current;
+        let newSize = startSizeRef.current + delta;
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const containerTotal = isHorizontal ? containerRect.width : containerRect.height;
+        const maxSize = containerTotal - minPanelSizePx;
+        newSize = Math.max(minPanelSizePx, Math.min(newSize, maxSize));
+        if (firstPanelRef.current) {
+          if (isHorizontal) {
+            firstPanelRef.current.style.width = `${newSize}px`;
+          } else {
+            firstPanelRef.current.style.height = `${newSize}px`;
+          }
+        }
+      };
+      const handleMouseUp = () => {
+        if (isResizingRef.current && containerRef.current && firstPanelRef.current) {
+          isResizingRef.current = false;
+          setIsResizing(false);
+          document.body.style.cursor = "";
+          document.body.style.userSelect = "";
+          const containerRect_0 = containerRef.current.getBoundingClientRect();
+          const firstPanelRect = firstPanelRef.current.getBoundingClientRect();
+          const containerSize = isHorizontal ? containerRect_0.width : containerRect_0.height;
+          const finalSize = isHorizontal ? firstPanelRect.width : firstPanelRect.height;
+          if (containerSize > 0) {
+            const newPercent = finalSize / containerSize * 100;
+            onPanelSizeChange(Math.max(0, Math.min(100, newPercent)));
+          }
+        }
+      };
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+    };
+    t7 = [onPanelSizeChange, isHorizontal, minPanelSizePx];
+    $[4] = isHorizontal;
+    $[5] = minPanelSizePx;
+    $[6] = onPanelSizeChange;
+    $[7] = t6;
+    $[8] = t7;
+  } else {
+    t6 = $[7];
+    t7 = $[8];
+  }
+  useEffect(t6, t7);
+  const appliedBasis = !showFirstPanel ? "0%" : showSecondPanel ? `${panelSizePercent}%` : "100%";
+  const t8 = isHorizontal ? "flex-row" : "flex-col";
+  let t9;
+  if ($[9] !== className || $[10] !== t8) {
+    t9 = cls("relative w-full h-full flex overflow-hidden", t8, className);
+    $[9] = className;
+    $[10] = t8;
+    $[11] = t9;
+  } else {
+    t9 = $[11];
+  }
+  const t10 = !showFirstPanel && "hidden";
+  let t11;
+  if ($[12] !== t10) {
+    t11 = cls("relative flex-shrink-0 flex flex-col overflow-hidden", t10);
+    $[12] = t10;
+    $[13] = t11;
+  } else {
+    t11 = $[13];
+  }
+  const t12 = isHorizontal ? appliedBasis : "100%";
+  const t13 = !isHorizontal ? appliedBasis : "100%";
+  const t14 = isHorizontal && showFirstPanel && showSecondPanel ? `${minPanelSizePx}px` : void 0;
+  const t15 = !isHorizontal && showFirstPanel && showSecondPanel ? `${minPanelSizePx}px` : void 0;
+  const t16 = showSecondPanel ? void 0 : "100%";
+  const t17 = showSecondPanel ? void 0 : "100%";
+  let t18;
+  if ($[14] !== t12 || $[15] !== t13 || $[16] !== t14 || $[17] !== t15 || $[18] !== t16 || $[19] !== t17) {
+    t18 = {
+      width: t12,
+      height: t13,
+      minWidth: t14,
+      minHeight: t15,
+      maxWidth: t16,
+      maxHeight: t17
+    };
+    $[14] = t12;
+    $[15] = t13;
+    $[16] = t14;
+    $[17] = t15;
+    $[18] = t16;
+    $[19] = t17;
+    $[20] = t18;
+  } else {
+    t18 = $[20];
+  }
+  let t19;
+  if ($[21] !== firstPanel || $[22] !== t11 || $[23] !== t18) {
+    t19 = /* @__PURE__ */ jsx("div", { ref: firstPanelRef, className: t11, style: t18, children: firstPanel });
+    $[21] = firstPanel;
+    $[22] = t11;
+    $[23] = t18;
+    $[24] = t19;
+  } else {
+    t19 = $[24];
+  }
+  let t20;
+  if ($[25] !== handleResizeStart || $[26] !== isHorizontal || $[27] !== showFirstPanel || $[28] !== showSecondPanel) {
+    t20 = showFirstPanel && showSecondPanel && /* @__PURE__ */ jsx("div", { className: cls("relative z-10 flex flex-shrink-0 items-center justify-center", isHorizontal ? "w-px h-full cursor-col-resize" : "h-px w-full cursor-row-resize"), onMouseDown: handleResizeStart, children: /* @__PURE__ */ jsx("div", { className: cls("absolute flex items-center justify-center group", isHorizontal ? "w-4 h-full cursor-col-resize top-0" : "h-4 w-full cursor-row-resize left-0"), children: /* @__PURE__ */ jsx("div", { className: cls("bg-primary/60 dark:bg-primary rounded-full opacity-0 group-hover:opacity-100 transition-all duration-200", isHorizontal ? "w-1 h-8" : "h-1 w-8") }) }) });
+    $[25] = handleResizeStart;
+    $[26] = isHorizontal;
+    $[27] = showFirstPanel;
+    $[28] = showSecondPanel;
+    $[29] = t20;
+  } else {
+    t20 = $[29];
+  }
+  const t21 = !showSecondPanel && "hidden";
+  let t22;
+  if ($[30] !== t21) {
+    t22 = cls("flex-grow relative flex flex-col overflow-hidden min-w-0 min-h-0", t21);
+    $[30] = t21;
+    $[31] = t22;
+  } else {
+    t22 = $[31];
+  }
+  let t23;
+  if ($[32] !== secondPanel || $[33] !== t22) {
+    t23 = /* @__PURE__ */ jsx("div", { className: t22, children: secondPanel });
+    $[32] = secondPanel;
+    $[33] = t22;
+    $[34] = t23;
+  } else {
+    t23 = $[34];
+  }
+  let t24;
+  if ($[35] !== t19 || $[36] !== t20 || $[37] !== t23 || $[38] !== t9) {
+    t24 = /* @__PURE__ */ jsxs("div", { ref: containerRef, className: t9, children: [
+      t19,
+      t20,
+      t23
+    ] });
+    $[35] = t19;
+    $[36] = t20;
+    $[37] = t23;
+    $[38] = t9;
+    $[39] = t24;
+  } else {
+    t24 = $[39];
+  }
+  return t24;
+}
 function SearchBar(t0) {
   const $ = c(47);
   const {
@@ -35753,6 +36106,483 @@ function SearchBar(t0) {
   }
   return t22;
 }
+const SearchableSelect = React.forwardRef((t0, ref) => {
+  const $ = c(106);
+  const {
+    value,
+    onValueChange,
+    placeholder: t1,
+    label,
+    size: t2,
+    disabled,
+    error,
+    invisible,
+    className,
+    inputClassName,
+    renderValue,
+    modalPopover: t3,
+    allowCustomValues: t4,
+    portalContainer,
+    autoFocus,
+    children
+  } = t0;
+  const placeholder = t1 === void 0 ? "Select..." : t1;
+  const size = t2 === void 0 ? "large" : t2;
+  const modalPopover = t3 === void 0 ? false : t3;
+  const allowCustomValues = t4 === void 0 ? true : t4;
+  const [isMounted, setIsMounted] = useState(false);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const inputRef = useRef(null);
+  const contextContainer = usePortalContainer();
+  const finalContainer = portalContainer ?? contextContainer ?? void 0;
+  let t5;
+  let t6;
+  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => {
+      setIsMounted(true);
+    };
+    t6 = [];
+    $[0] = t5;
+    $[1] = t6;
+  } else {
+    t5 = $[0];
+    t6 = $[1];
+  }
+  useEffect(t5, t6);
+  let t7;
+  if ($[2] !== autoFocus || $[3] !== isMounted) {
+    t7 = [autoFocus, isMounted];
+    $[2] = autoFocus;
+    $[3] = isMounted;
+    $[4] = t7;
+  } else {
+    t7 = $[4];
+  }
+  useEffect(() => {
+    if (autoFocus && isMounted) {
+      onPopoverOpenChange(true);
+    }
+  }, t7);
+  let t8;
+  let map;
+  if ($[5] !== children) {
+    map = /* @__PURE__ */ new Map();
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child) && child.props.value != null) {
+        map.set(String(child.props.value), child.props.children ?? child.props.value);
+      }
+    });
+    $[5] = children;
+    $[6] = map;
+  } else {
+    map = $[6];
+  }
+  t8 = map;
+  const itemsMap = t8;
+  const onPopoverOpenChange = (open) => {
+    setIsPopoverOpen(open);
+    if (open) {
+      setSearch(value ?? "");
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  };
+  let t9;
+  if ($[7] !== onValueChange) {
+    t9 = (selectedValue) => {
+      onValueChange?.(selectedValue);
+      setIsPopoverOpen(false);
+      setSearch("");
+    };
+    $[7] = onValueChange;
+    $[8] = t9;
+  } else {
+    t9 = $[8];
+  }
+  const handleSelect = t9;
+  let t10;
+  if ($[9] !== allowCustomValues || $[10] !== handleSelect || $[11] !== itemsMap || $[12] !== search) {
+    t10 = (e) => {
+      if (e.key === "Enter" && allowCustomValues) {
+        const trimmed = search.trim();
+        if (trimmed) {
+          const isExistingItem = itemsMap.has(trimmed);
+          if (!isExistingItem) {
+            e.preventDefault();
+            handleSelect(trimmed);
+          }
+        }
+      } else {
+        if (e.key === "Escape") {
+          setIsPopoverOpen(false);
+        }
+      }
+    };
+    $[9] = allowCustomValues;
+    $[10] = handleSelect;
+    $[11] = itemsMap;
+    $[12] = search;
+    $[13] = t10;
+  } else {
+    t10 = $[13];
+  }
+  const handleInputKeyDown = t10;
+  let t11;
+  bb0: {
+    if (!value) {
+      t11 = null;
+      break bb0;
+    }
+    if (renderValue) {
+      let t123;
+      if ($[14] !== renderValue || $[15] !== value) {
+        t123 = renderValue(value);
+        $[14] = renderValue;
+        $[15] = value;
+        $[16] = t123;
+      } else {
+        t123 = $[16];
+      }
+      t11 = t123;
+      break bb0;
+    }
+    let t122;
+    if ($[17] !== itemsMap || $[18] !== value) {
+      t122 = itemsMap.get(value);
+      $[17] = itemsMap;
+      $[18] = value;
+      $[19] = t122;
+    } else {
+      t122 = $[19];
+    }
+    const itemLabel = t122;
+    if (itemLabel) {
+      t11 = itemLabel;
+      break bb0;
+    }
+    let t132;
+    if ($[20] !== value) {
+      t132 = /* @__PURE__ */ jsx("span", { className: "text-sm", children: value });
+      $[20] = value;
+      $[21] = t132;
+    } else {
+      t132 = $[21];
+    }
+    t11 = t132;
+  }
+  const displayLabel = t11;
+  useInjectStyles("SearchableSelect", `
+[cmdk-group] {
+  max-height: 45vh;
+  overflow-y: auto;
+}`);
+  let t12;
+  if ($[22] !== error || $[23] !== label) {
+    t12 = label && (typeof label === "string" ? /* @__PURE__ */ jsx("div", { className: cls("text-sm font-medium ml-3.5 mb-1", error ? "text-red-500 dark:text-red-600" : "text-surface-accent-500 dark:text-surface-accent-300"), children: label }) : label);
+    $[22] = error;
+    $[23] = label;
+    $[24] = t12;
+  } else {
+    t12 = $[24];
+  }
+  const t13 = isMounted && isPopoverOpen;
+  let t14;
+  if ($[25] !== disabled || $[26] !== isPopoverOpen || $[27] !== onPopoverOpenChange) {
+    t14 = () => !disabled && onPopoverOpenChange(!isPopoverOpen);
+    $[25] = disabled;
+    $[26] = isPopoverOpen;
+    $[27] = onPopoverOpenChange;
+    $[28] = t14;
+  } else {
+    t14 = $[28];
+  }
+  const t15 = size === "smallest";
+  const t16 = size === "small";
+  const t17 = size === "medium";
+  const t18 = size === "large";
+  let t19;
+  if ($[29] !== className || $[30] !== disabled || $[31] !== inputClassName || $[32] !== invisible || $[33] !== size || $[34] !== t15 || $[35] !== t16 || $[36] !== t17 || $[37] !== t18) {
+    t19 = cls({
+      "min-h-[28px]": t15,
+      "min-h-[32px]": t16,
+      "min-h-[44px]": t17,
+      "min-h-[64px]": t18
+    }, {
+      "py-0.5": size === "smallest",
+      "py-1": size === "small",
+      "py-2": size === "medium" || size === "large"
+    }, {
+      "px-2": size === "small" || size === "smallest",
+      "px-4": size === "medium" || size === "large"
+    }, "select-none rounded-md text-sm w-full text-start", "focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, inputClassName);
+    $[29] = className;
+    $[30] = disabled;
+    $[31] = inputClassName;
+    $[32] = invisible;
+    $[33] = size;
+    $[34] = t15;
+    $[35] = t16;
+    $[36] = t17;
+    $[37] = t18;
+    $[38] = t19;
+  } else {
+    t19 = $[38];
+  }
+  let t20;
+  if ($[39] !== displayLabel || $[40] !== placeholder) {
+    t20 = displayLabel ?? /* @__PURE__ */ jsx("span", { className: "text-sm text-surface-accent-500 dark:text-surface-accent-400", children: placeholder });
+    $[39] = displayLabel;
+    $[40] = placeholder;
+    $[41] = t20;
+  } else {
+    t20 = $[41];
+  }
+  let t21;
+  if ($[42] !== t20) {
+    t21 = /* @__PURE__ */ jsx("div", { className: "flex-grow min-w-0 truncate", children: t20 });
+    $[42] = t20;
+    $[43] = t21;
+  } else {
+    t21 = $[43];
+  }
+  let t22;
+  if ($[44] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t22 = cls("flex-shrink-0 flex items-center");
+    $[44] = t22;
+  } else {
+    t22 = $[44];
+  }
+  const t23 = size === "large" ? "medium" : "small";
+  const t24 = isPopoverOpen ? "rotate-180" : "";
+  let t25;
+  if ($[45] !== t24) {
+    t25 = cls("transition", t24);
+    $[45] = t24;
+    $[46] = t25;
+  } else {
+    t25 = $[46];
+  }
+  let t26;
+  if ($[47] !== t23 || $[48] !== t25) {
+    t26 = /* @__PURE__ */ jsx("div", { className: t22, children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: t23, className: t25 }) });
+    $[47] = t23;
+    $[48] = t25;
+    $[49] = t26;
+  } else {
+    t26 = $[49];
+  }
+  let t27;
+  if ($[50] !== t21 || $[51] !== t26) {
+    t27 = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full gap-1", children: [
+      t21,
+      t26
+    ] });
+    $[50] = t21;
+    $[51] = t26;
+    $[52] = t27;
+  } else {
+    t27 = $[52];
+  }
+  let t28;
+  if ($[53] !== disabled || $[54] !== ref || $[55] !== t14 || $[56] !== t19 || $[57] !== t27) {
+    t28 = /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { ref, disabled, onClick: t14, className: t19, children: t27 }) });
+    $[53] = disabled;
+    $[54] = ref;
+    $[55] = t14;
+    $[56] = t19;
+    $[57] = t27;
+    $[58] = t28;
+  } else {
+    t28 = $[58];
+  }
+  let t29;
+  if ($[59] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t29 = cls("z-50 overflow-hidden border bg-white dark:bg-surface-900 rounded-lg", defaultBorderMixin);
+    $[59] = t29;
+  } else {
+    t29 = $[59];
+  }
+  let t30;
+  if ($[60] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t30 = {
+      width: "var(--radix-popover-trigger-width)",
+      minWidth: 180
+    };
+    $[60] = t30;
+  } else {
+    t30 = $[60];
+  }
+  let t31;
+  if ($[61] !== onPopoverOpenChange) {
+    t31 = () => onPopoverOpenChange(false);
+    $[61] = onPopoverOpenChange;
+    $[62] = t31;
+  } else {
+    t31 = $[62];
+  }
+  const t32 = size === "smallest" || size === "small";
+  const t33 = size === "medium" || size === "large";
+  let t34;
+  if ($[63] !== t32 || $[64] !== t33) {
+    t34 = cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full text-surface-accent-900 dark:text-white", {
+      "m-2 text-xs": t32,
+      "m-3 text-sm": t33
+    });
+    $[63] = t32;
+    $[64] = t33;
+    $[65] = t34;
+  } else {
+    t34 = $[65];
+  }
+  let t35;
+  if ($[66] !== handleInputKeyDown || $[67] !== search || $[68] !== t34) {
+    t35 = /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center", children: /* @__PURE__ */ jsx(Command.Input, { ref: inputRef, value: search, onValueChange: setSearch, className: t34, placeholder: "Search...", onKeyDown: handleInputKeyDown }) });
+    $[66] = handleInputKeyDown;
+    $[67] = search;
+    $[68] = t34;
+    $[69] = t35;
+  } else {
+    t35 = $[69];
+  }
+  let t36;
+  if ($[70] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t36 = /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "my-0" });
+    $[70] = t36;
+  } else {
+    t36 = $[70];
+  }
+  let t37;
+  if ($[71] !== allowCustomValues || $[72] !== handleSelect || $[73] !== itemsMap || $[74] !== search) {
+    t37 = allowCustomValues && search.trim() && !itemsMap.has(search.trim()) ? /* @__PURE__ */ jsxs(Command.Empty, { className: "px-3 py-2 text-xs cursor-pointer text-primary hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", onClick: () => handleSelect(search.trim()), children: [
+      "Use “",
+      search.trim(),
+      "”"
+    ] }) : /* @__PURE__ */ jsx(Command.Empty, { className: "px-3 py-2 text-xs text-text-secondary dark:text-text-secondary-dark", children: "No results found." });
+    $[71] = allowCustomValues;
+    $[72] = handleSelect;
+    $[73] = itemsMap;
+    $[74] = search;
+    $[75] = t37;
+  } else {
+    t37 = $[75];
+  }
+  let t38;
+  if ($[76] !== children || $[77] !== handleSelect || $[78] !== value) {
+    let t392;
+    if ($[80] !== handleSelect || $[81] !== value) {
+      t392 = (child_0) => {
+        if (!React.isValidElement(child_0)) {
+          return child_0;
+        }
+        const itemValue = child_0.props.value;
+        const isSelected = String(value) === String(itemValue);
+        return /* @__PURE__ */ jsxs(Command.Item, { value: String(itemValue), onMouseDown: _temp$2, onSelect: () => handleSelect(String(itemValue)), className: cls("flex flex-row items-center gap-1.5", isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "", "cursor-pointer", "m-0.5", "ring-offset-transparent", "p-1.5 rounded", "aria-[selected=true]:outline-none", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "text-surface-accent-700 dark:text-surface-accent-300", child_0.props.className), children: [
+          /* @__PURE__ */ jsx("div", { className: cls("w-4 h-4 flex items-center justify-center flex-shrink-0", isSelected ? "text-primary" : "text-transparent"), children: isSelected && /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) }),
+          child_0.props.children ?? child_0.props.value
+        ] }, String(itemValue));
+      };
+      $[80] = handleSelect;
+      $[81] = value;
+      $[82] = t392;
+    } else {
+      t392 = $[82];
+    }
+    t38 = React.Children.map(children, t392);
+    $[76] = children;
+    $[77] = handleSelect;
+    $[78] = value;
+    $[79] = t38;
+  } else {
+    t38 = $[79];
+  }
+  let t39;
+  if ($[83] !== t38) {
+    t39 = /* @__PURE__ */ jsx(Command.Group, { children: t38 });
+    $[83] = t38;
+    $[84] = t39;
+  } else {
+    t39 = $[84];
+  }
+  let t40;
+  if ($[85] !== t37 || $[86] !== t39) {
+    t40 = /* @__PURE__ */ jsxs(Command.List, { children: [
+      t37,
+      t39
+    ] });
+    $[85] = t37;
+    $[86] = t39;
+    $[87] = t40;
+  } else {
+    t40 = $[87];
+  }
+  let t41;
+  if ($[88] !== t35 || $[89] !== t40) {
+    t41 = /* @__PURE__ */ jsxs(Command, { shouldFilter: true, children: [
+      t35,
+      t36,
+      t40
+    ] });
+    $[88] = t35;
+    $[89] = t40;
+    $[90] = t41;
+  } else {
+    t41 = $[90];
+  }
+  let t42;
+  if ($[91] !== t31 || $[92] !== t41) {
+    t42 = /* @__PURE__ */ jsx(PopoverPrimitive.Content, { className: t29, align: "start", sideOffset: 4, style: t30, onEscapeKeyDown: t31, children: t41 });
+    $[91] = t31;
+    $[92] = t41;
+    $[93] = t42;
+  } else {
+    t42 = $[93];
+  }
+  let t43;
+  if ($[94] !== finalContainer || $[95] !== t42) {
+    t43 = /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container: finalContainer, children: t42 });
+    $[94] = finalContainer;
+    $[95] = t42;
+    $[96] = t43;
+  } else {
+    t43 = $[96];
+  }
+  let t44;
+  if ($[97] !== modalPopover || $[98] !== onPopoverOpenChange || $[99] !== t13 || $[100] !== t28 || $[101] !== t43) {
+    t44 = /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: t13, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
+      t28,
+      t43
+    ] });
+    $[97] = modalPopover;
+    $[98] = onPopoverOpenChange;
+    $[99] = t13;
+    $[100] = t28;
+    $[101] = t43;
+    $[102] = t44;
+  } else {
+    t44 = $[102];
+  }
+  let t45;
+  if ($[103] !== t12 || $[104] !== t44) {
+    t45 = /* @__PURE__ */ jsxs("div", { children: [
+      t12,
+      t44
+    ] });
+    $[103] = t12;
+    $[104] = t44;
+    $[105] = t45;
+  } else {
+    t45 = $[105];
+  }
+  return t45;
+});
+SearchableSelect.displayName = "SearchableSelect";
+function SearchableSelectItem(_props) {
+  return null;
+}
+function _temp$2(e_0) {
+  e_0.preventDefault();
+  e_0.stopPropagation();
+}
 const Select = forwardRef((t0, ref) => {
   const $ = c(121);
   let children;
@@ -36729,203 +37559,222 @@ function _temp(event) {
 function getStyleValue(value) {
   return parseInt(value, 10) || 0;
 }
-const styles = {
-  shadow: {
-    // Visibility needed to hide the extra text area on iPads
-    visibility: "hidden",
-    // Remove from the content flow
-    position: "absolute",
-    // Ignore the scrollbar width
-    overflow: "hidden",
-    height: 0,
-    top: 0,
-    left: 0,
-    // Create a new layer, increase the isolation of the computed values
-    transform: "translateZ(0)"
-  }
-};
-function isEmpty(obj) {
-  return obj === void 0 || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflow;
-}
 const TextareaAutosize = React.forwardRef(function TextareaAutosize2(props, ref) {
-  const {
-    onChange,
-    onScroll,
-    onResize,
-    maxRows,
-    minRows = 1,
-    style,
-    value,
-    onFocus,
-    onBlur,
-    sizeRef,
-    ignoreBoxSizing,
-    ...other
-  } = props;
+  const $ = c(38);
+  let ignoreBoxSizing;
+  let maxRows;
+  let onBlur;
+  let onChange;
+  let onFocus;
+  let onResize;
+  let onScroll;
+  let other;
+  let style;
+  let t0;
+  let value;
+  if ($[0] !== props) {
+    const {
+      onChange: t12,
+      onScroll: t22,
+      onResize: t32,
+      maxRows: t42,
+      minRows: t52,
+      style: t62,
+      value: t72,
+      onFocus: t82,
+      onBlur: t9,
+      sizeRef,
+      ignoreBoxSizing: t10,
+      ...t11
+    } = props;
+    onChange = t12;
+    onScroll = t22;
+    onResize = t32;
+    maxRows = t42;
+    t0 = t52;
+    style = t62;
+    value = t72;
+    onFocus = t82;
+    onBlur = t9;
+    ignoreBoxSizing = t10;
+    other = t11;
+    $[0] = props;
+    $[1] = ignoreBoxSizing;
+    $[2] = maxRows;
+    $[3] = onBlur;
+    $[4] = onChange;
+    $[5] = onFocus;
+    $[6] = onResize;
+    $[7] = onScroll;
+    $[8] = other;
+    $[9] = style;
+    $[10] = t0;
+    $[11] = value;
+  } else {
+    ignoreBoxSizing = $[1];
+    maxRows = $[2];
+    onBlur = $[3];
+    onChange = $[4];
+    onFocus = $[5];
+    onResize = $[6];
+    onScroll = $[7];
+    other = $[8];
+    style = $[9];
+    t0 = $[10];
+    value = $[11];
+  }
+  const minRows = t0 === void 0 ? 1 : t0;
   const {
     current: isControlled
   } = React.useRef(value != null);
   const inputRef = React.useRef(null);
   const handleRef = useForkRef(ref, inputRef);
-  const shadowRef = React.useRef(null);
-  const renders = React.useRef(0);
-  const [state, setState] = React.useState({
-    outerHeightStyle: 0
-  });
-  const getUpdatedState = React.useCallback(() => {
-    const input = inputRef.current;
-    if (typeof window === "undefined") {
-      return {
-        outerHeightStyle: 0
-      };
-    }
-    const containerWindow = window;
-    const computedStyle = containerWindow.getComputedStyle(input);
-    if (computedStyle.width === "0px") {
-      return {
-        outerHeightStyle: 0
-      };
-    }
-    const sizeReferenceElement = sizeRef?.current ?? shadowRef.current;
-    const inputShallow = shadowRef.current;
-    sizeReferenceElement.style.width = computedStyle.width;
-    inputShallow.value = input.value || props.placeholder || "x";
-    if (inputShallow.value.slice(-1) === "\n") {
-      inputShallow.value += " ";
-    }
-    const boxSizing = computedStyle.boxSizing;
-    const padding = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
-    const border = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
-    const minHeight = getStyleValue(computedStyle.minHeight);
-    const innerHeight = sizeReferenceElement.scrollHeight;
-    inputShallow.value = "x";
-    const singleRowHeight = sizeReferenceElement.scrollHeight;
-    let outerHeight = innerHeight;
-    if (minRows) {
-      outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
-    }
-    if (maxRows) {
-      outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
-    }
-    outerHeight = Math.max(outerHeight, singleRowHeight, minHeight);
-    const outerHeightStyle = outerHeight + (!ignoreBoxSizing && boxSizing === "border-box" ? padding + border : 0);
-    const overflow = Math.abs(outerHeight - innerHeight) <= 1;
-    return {
-      outerHeightStyle,
-      overflow
-    };
-  }, [maxRows, minRows, props.placeholder]);
-  const updateState = React.useCallback((prevState, newState) => {
-    const {
-      outerHeightStyle: outerHeightStyle_0,
-      overflow: overflow_0
-    } = newState;
-    if (renders.current < 20 && (outerHeightStyle_0 > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle_0) > 1 || prevState.overflow !== overflow_0)) {
-      renders.current += 1;
-      return {
-        overflow: overflow_0,
-        outerHeightStyle: outerHeightStyle_0
-      };
-    }
-    if (process.env.NODE_ENV !== "production") {
-      if (renders.current === 20) {
-        console.error(["MUI: Too many re-renders. The layout is unstable.", "TextareaAutosize limits the number of renders to prevent an infinite loop."].join("\n"));
+  let t1;
+  if ($[12] !== ignoreBoxSizing || $[13] !== maxRows || $[14] !== minRows || $[15] !== onResize) {
+    t1 = () => {
+      const el = inputRef.current;
+      if (!el || typeof window === "undefined") {
+        return;
       }
-    }
-    return prevState;
-  }, []);
-  const syncHeight = React.useCallback(() => {
-    const newState_0 = getUpdatedState();
-    if (isEmpty(newState_0)) {
-      return;
-    }
-    if (onResize) {
-      onResize(newState_0);
-    }
-    setState((prevState_0) => {
-      return updateState(prevState_0, newState_0);
-    });
-  }, [getUpdatedState, onResize, updateState]);
-  const syncHeightWithFlushSync = React.useCallback(() => {
-    const newState_1 = getUpdatedState();
-    if (isEmpty(newState_1)) {
-      return;
-    }
-    ReactDOM.flushSync(() => {
-      setState((prevState_1) => {
-        return updateState(prevState_1, newState_1);
-      });
-    });
-  }, [getUpdatedState, updateState]);
-  React.useEffect(() => {
-    const handleResize = debounce(() => {
-      renders.current = 0;
-      if (inputRef.current) {
-        syncHeightWithFlushSync();
+      if (el.offsetWidth === 0) {
+        return;
       }
-    });
-    let resizeObserver;
-    const input_0 = inputRef.current;
-    const containerWindow_0 = window;
-    if (typeof window === "undefined") {
-      return;
-    }
-    containerWindow_0.addEventListener("resize", handleResize);
-    if (typeof ResizeObserver !== "undefined") {
-      resizeObserver = new ResizeObserver(handleResize);
-      resizeObserver.observe(input_0);
-    }
-    return () => {
-      handleResize.clear();
-      containerWindow_0.removeEventListener("resize", handleResize);
-      if (resizeObserver) {
-        resizeObserver.disconnect();
+      const cs = window.getComputedStyle(el);
+      const paddingY = getStyleValue(cs.paddingTop) + getStyleValue(cs.paddingBottom);
+      const borderY = getStyleValue(cs.borderTopWidth) + getStyleValue(cs.borderBottomWidth);
+      const boxSizing = cs.boxSizing;
+      const prevHeight = el.style.height;
+      const prevOverflow = el.style.overflowY;
+      el.style.overflowY = "hidden";
+      el.style.height = "0px";
+      const scrollH = el.scrollHeight;
+      const prevValue = el.value;
+      el.value = "x";
+      const singleRowScrollH = el.scrollHeight;
+      el.value = prevValue;
+      el.style.height = prevHeight;
+      el.style.overflowY = prevOverflow;
+      const lineHeight = singleRowScrollH - paddingY;
+      let targetHeight = scrollH;
+      if (minRows) {
+        targetHeight = Math.max(Number(minRows) * lineHeight + paddingY, targetHeight);
+      }
+      const unclampedHeight = targetHeight;
+      if (maxRows) {
+        targetHeight = Math.min(Number(maxRows) * lineHeight + paddingY, targetHeight);
+      }
+      const extra = !ignoreBoxSizing && boxSizing === "border-box" ? borderY : 0;
+      const finalHeight = Math.ceil(targetHeight + extra);
+      const shouldScroll = Math.abs(unclampedHeight - targetHeight) > 1;
+      el.style.height = `${finalHeight}px`;
+      el.style.overflowY = shouldScroll ? "auto" : "hidden";
+      if (onResize) {
+        onResize({
+          outerHeightStyle: finalHeight,
+          overflow: !shouldScroll
+        });
       }
     };
-  }, [syncHeightWithFlushSync]);
-  useLayoutEffect(() => {
-    syncHeight();
-  });
-  React.useEffect(() => {
-    renders.current = 0;
-  }, [value]);
-  const handleChange = (event) => {
-    renders.current = 0;
-    if (!isControlled) {
+    $[12] = ignoreBoxSizing;
+    $[13] = maxRows;
+    $[14] = minRows;
+    $[15] = onResize;
+    $[16] = t1;
+  } else {
+    t1 = $[16];
+  }
+  const syncHeight = t1;
+  let t2;
+  if ($[17] !== syncHeight) {
+    t2 = () => {
       syncHeight();
-    }
-    if (onChange) {
-      onChange(event);
-    }
-  };
-  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        value,
-        onChange: handleChange,
-        className: props.className,
-        ref: handleRef,
-        onFocus,
-        onBlur,
-        rows: minRows,
-        style: {
-          height: state.outerHeightStyle,
-          // Need a large enough difference to allow scrolling.
-          // This prevents infinite rendering loop.
-          overflow: state.overflow ? "hidden" : void 0,
-          ...style
-        },
-        onScroll,
-        ...other
+    };
+    $[17] = syncHeight;
+    $[18] = t2;
+  } else {
+    t2 = $[18];
+  }
+  useLayoutEffect(t2);
+  let t3;
+  let t4;
+  if ($[19] !== syncHeight) {
+    t3 = () => {
+      const handleResize = debounce(() => {
+        if (inputRef.current) {
+          syncHeight();
+        }
+      });
+      const input = inputRef.current;
+      if (typeof window === "undefined") {
+        return;
+      }
+      window.addEventListener("resize", handleResize);
+      let resizeObserver;
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(handleResize);
+        resizeObserver.observe(input);
       }
-    ),
-    /* @__PURE__ */ jsx("textarea", { "aria-hidden": true, className: cls(props.className, props.shadowClassName), readOnly: true, ref: shadowRef, tabIndex: -1, style: {
-      padding: 0,
-      ...styles.shadow,
+      return () => {
+        handleResize.clear();
+        window.removeEventListener("resize", handleResize);
+        resizeObserver?.disconnect();
+      };
+    };
+    t4 = [syncHeight];
+    $[19] = syncHeight;
+    $[20] = t3;
+    $[21] = t4;
+  } else {
+    t3 = $[20];
+    t4 = $[21];
+  }
+  React.useEffect(t3, t4);
+  let t5;
+  if ($[22] !== onChange || $[23] !== syncHeight) {
+    t5 = (event) => {
+      if (!isControlled) {
+        syncHeight();
+      }
+      if (onChange) {
+        onChange(event);
+      }
+    };
+    $[22] = onChange;
+    $[23] = syncHeight;
+    $[24] = t5;
+  } else {
+    t5 = $[24];
+  }
+  const handleChange = t5;
+  const t6 = minRows;
+  let t7;
+  if ($[25] !== style) {
+    t7 = {
       ...style
-    } })
-  ] });
+    };
+    $[25] = style;
+    $[26] = t7;
+  } else {
+    t7 = $[26];
+  }
+  let t8;
+  if ($[27] !== handleChange || $[28] !== handleRef || $[29] !== onBlur || $[30] !== onFocus || $[31] !== onScroll || $[32] !== other || $[33] !== props.className || $[34] !== t6 || $[35] !== t7 || $[36] !== value) {
+    t8 = /* @__PURE__ */ jsx("textarea", { value, onChange: handleChange, className: props.className, ref: handleRef, onFocus, onBlur, rows: t6, style: t7, onScroll, ...other });
+    $[27] = handleChange;
+    $[28] = handleRef;
+    $[29] = onBlur;
+    $[30] = onFocus;
+    $[31] = onScroll;
+    $[32] = other;
+    $[33] = props.className;
+    $[34] = t6;
+    $[35] = t7;
+    $[36] = value;
+    $[37] = t8;
+  } else {
+    t8 = $[37];
+  }
+  return t8;
 });
 function useForkRef(...refs) {
   return React.useMemo(() => {
@@ -37009,22 +37858,25 @@ const TextField = forwardRef(({
   ] });
 });
 TextField.displayName = "TextField";
+const TabsModeContext = createContext("primary");
 function Tabs(t0) {
-  const $ = c(26);
+  const $ = c(35);
   const {
     value,
     onValueChange,
     className,
     innerClassName,
-    children
+    children,
+    mode: t1
   } = t0;
+  const mode = t1 === void 0 ? "primary" : t1;
   const scrollContainerRef = useRef(null);
   const [showLeftScroll, setShowLeftScroll] = useState(false);
   const [showRightScroll, setShowRightScroll] = useState(false);
   const [isScrollable, setIsScrollable] = useState(false);
-  let t1;
+  let t2;
   if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
+    t2 = () => {
       if (scrollContainerRef.current) {
         const {
           scrollLeft,
@@ -37036,14 +37888,14 @@ function Tabs(t0) {
         setIsScrollable(scrollWidth > clientWidth);
       }
     };
-    $[0] = t1;
+    $[0] = t2;
   } else {
-    t1 = $[0];
+    t2 = $[0];
   }
-  const checkScroll = t1;
-  let t2;
+  const checkScroll = t2;
+  let t3;
   if ($[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t2 = () => {
+    t3 = () => {
       checkScroll();
       window.addEventListener("resize", checkScroll);
       let observer;
@@ -37059,22 +37911,22 @@ function Tabs(t0) {
         observer?.disconnect();
       };
     };
-    $[1] = t2;
+    $[1] = t3;
   } else {
-    t2 = $[1];
+    t3 = $[1];
   }
-  let t3;
+  let t4;
   if ($[2] !== children) {
-    t3 = [children];
+    t4 = [children];
     $[2] = children;
-    $[3] = t3;
+    $[3] = t4;
   } else {
-    t3 = $[3];
+    t4 = $[3];
   }
-  useEffect(t2, t3);
-  let t4;
+  useEffect(t3, t4);
+  let t5;
   if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t4 = (direction) => {
+    t5 = (direction) => {
       if (scrollContainerRef.current) {
         const container = scrollContainerRef.current;
         const scrollAmount = Math.max(container.clientWidth / 2, 200);
@@ -37085,85 +37937,104 @@ function Tabs(t0) {
         });
       }
     };
-    $[4] = t4;
+    $[4] = t5;
   } else {
-    t4 = $[4];
+    t5 = $[4];
   }
-  const scroll = t4;
-  let t5;
+  const scroll = t5;
+  let t6;
   if ($[5] !== className) {
-    t5 = cls("flex flex-row items-center min-w-0", className);
+    t6 = cls("flex flex-row items-center min-w-0", className);
     $[5] = className;
-    $[6] = t5;
+    $[6] = t6;
   } else {
-    t5 = $[6];
+    t6 = $[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" }) });
+  let t7;
+  if ($[7] !== isScrollable || $[8] !== mode || $[9] !== showLeftScroll) {
+    t7 = 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", mode === "primary" && "mr-1 bg-surface-50 dark:bg-surface-900 border", mode === "primary" && defaultBorderMixin, mode === "secondary" && "mr-1"), children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: "small" }) });
     $[7] = isScrollable;
-    $[8] = showLeftScroll;
-    $[9] = t6;
+    $[8] = mode;
+    $[9] = showLeftScroll;
+    $[10] = t7;
   } else {
-    t6 = $[9];
+    t7 = $[10];
   }
-  let t7;
-  if ($[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t7 = {
+  let t8;
+  if ($[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t8 = {
       scrollbarWidth: "none",
       msOverflowStyle: "none"
     };
-    $[10] = t7;
+    $[11] = t8;
   } else {
-    t7 = $[10];
+    t8 = $[11];
   }
-  let 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;
+  const t9 = mode === "primary" && "border";
+  const t10 = mode === "primary" && defaultBorderMixin;
+  const t11 = mode === "primary" && "gap-2 inline-flex h-10 items-center justify-center rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400";
+  const t12 = mode === "secondary" && "gap-1 inline-flex h-9 items-center text-surface-500 dark:text-surface-400";
+  let t13;
+  if ($[12] !== innerClassName || $[13] !== t10 || $[14] !== t11 || $[15] !== t12 || $[16] !== t9) {
+    t13 = cls(t9, t10, t11, t12, innerClassName);
+    $[12] = innerClassName;
+    $[13] = t10;
+    $[14] = t11;
+    $[15] = t12;
+    $[16] = t9;
+    $[17] = t13;
   } else {
-    t8 = $[12];
+    t13 = $[17];
   }
-  let 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;
+  let t14;
+  if ($[18] !== children || $[19] !== t13) {
+    t14 = /* @__PURE__ */ jsx("div", { ref: scrollContainerRef, className: "flex-1 overflow-x-auto no-scrollbar min-w-0", onScroll: checkScroll, style: t8, children: /* @__PURE__ */ jsx(TabsPrimitive.List, { className: t13, children }) });
+    $[18] = children;
+    $[19] = t13;
+    $[20] = t14;
   } else {
-    t9 = $[15];
+    t14 = $[20];
   }
-  let t10;
-  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;
+  let t15;
+  if ($[21] !== isScrollable || $[22] !== mode || $[23] !== showRightScroll) {
+    t15 = 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", mode === "primary" && "ml-1 bg-surface-50 dark:bg-surface-900 border", mode === "primary" && defaultBorderMixin, mode === "secondary" && "ml-1"), children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: "small" }) });
+    $[21] = isScrollable;
+    $[22] = mode;
+    $[23] = showRightScroll;
+    $[24] = t15;
   } else {
-    t10 = $[18];
+    t15 = $[24];
   }
-  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
+  let t16;
+  if ($[25] !== onValueChange || $[26] !== t14 || $[27] !== t15 || $[28] !== t6 || $[29] !== t7 || $[30] !== value) {
+    t16 = /* @__PURE__ */ jsxs(TabsPrimitive.Root, { value, onValueChange, className: t6, children: [
+      t7,
+      t14,
+      t15
     ] });
-    $[19] = onValueChange;
-    $[20] = t10;
-    $[21] = t5;
-    $[22] = t6;
-    $[23] = t9;
-    $[24] = value;
-    $[25] = t11;
+    $[25] = onValueChange;
+    $[26] = t14;
+    $[27] = t15;
+    $[28] = t6;
+    $[29] = t7;
+    $[30] = value;
+    $[31] = t16;
   } else {
-    t11 = $[25];
+    t16 = $[31];
   }
-  return t11;
+  let t17;
+  if ($[32] !== mode || $[33] !== t16) {
+    t17 = /* @__PURE__ */ jsx(TabsModeContext.Provider, { value: mode, children: t16 });
+    $[32] = mode;
+    $[33] = t16;
+    $[34] = t17;
+  } else {
+    t17 = $[34];
+  }
+  return t17;
 }
 function Tab(t0) {
-  const $ = c(8);
+  const $ = c(15);
   const {
     value,
     className,
@@ -37171,27 +38042,46 @@ function Tab(t0) {
     children,
     disabled
   } = t0;
+  const mode = useContext(TabsModeContext);
+  let T0;
   let t1;
-  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] = innerClassName;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
   let t2;
-  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;
+  let t3;
+  if ($[0] !== className || $[1] !== disabled || $[2] !== innerClassName || $[3] !== mode || $[4] !== value) {
+    const primaryClasses = cls("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", "data-[state=active]:bg-white data-[state=active]:text-surface-900 dark:data-[state=active]:bg-surface-950 dark:data-[state=active]:text-surface-50");
+    const secondaryClasses = cls("inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all", "border-b-2 border-transparent -mb-px", "focus-visible:outline-none", "disabled:pointer-events-none disabled:opacity-50", "hover:text-surface-700 dark:hover:text-surface-300", "data-[state=active]:border-b-primary data-[state=active]:text-primary dark:data-[state=active]:border-b-primary dark:data-[state=active]:text-primary-dark");
+    T0 = TabsPrimitive.Trigger;
+    t1 = value;
+    t2 = disabled;
+    t3 = cls(mode === "secondary" ? secondaryClasses : primaryClasses, className, innerClassName);
+    $[0] = className;
+    $[1] = disabled;
+    $[2] = innerClassName;
+    $[3] = mode;
+    $[4] = value;
+    $[5] = T0;
+    $[6] = t1;
     $[7] = t2;
+    $[8] = t3;
   } else {
+    T0 = $[5];
+    t1 = $[6];
     t2 = $[7];
+    t3 = $[8];
   }
-  return t2;
+  let t4;
+  if ($[9] !== T0 || $[10] !== children || $[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
+    t4 = /* @__PURE__ */ jsx(T0, { value: t1, disabled: t2, className: t3, children });
+    $[9] = T0;
+    $[10] = children;
+    $[11] = t1;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  return t4;
 }
 const Table = React__default.memo((t0) => {
   const $ = c(12);
@@ -37702,14 +38592,14 @@ function DebouncedTextField(props) {
   return t5;
 }
 function Skeleton(t0) {
-  const $ = c(8);
+  const $ = c(10);
   const {
     width,
     height,
     className
   } = t0;
-  const t1 = width ? `${width}px` : "100%";
-  const t2 = height ? `${height}px` : "12px";
+  const t1 = width !== void 0 ? `${width}px` : void 0;
+  const t2 = height !== void 0 ? `${height}px` : void 0;
   let t3;
   if ($[0] !== t1 || $[1] !== t2) {
     t3 = {
@@ -37722,24 +38612,28 @@ function Skeleton(t0) {
   } else {
     t3 = $[2];
   }
-  let t4;
-  if ($[3] !== className) {
-    t4 = cls("block", "bg-surface-accent-200 dark:bg-surface-accent-800 rounded-md", "animate-pulse", "max-w-full max-h-full", className);
+  const t4 = width === void 0 ? "w-full" : "";
+  const t5 = height === void 0 ? "h-3" : "";
+  let t6;
+  if ($[3] !== className || $[4] !== t4 || $[5] !== t5) {
+    t6 = cls("block", "bg-surface-accent-200 dark:bg-surface-accent-800 rounded-md", "animate-pulse", "max-w-full max-h-full", t4, t5, className);
     $[3] = className;
     $[4] = t4;
+    $[5] = t5;
+    $[6] = t6;
   } else {
-    t4 = $[4];
+    t6 = $[6];
   }
-  let t5;
-  if ($[5] !== t3 || $[6] !== t4) {
-    t5 = /* @__PURE__ */ jsx("span", { style: t3, className: t4 });
-    $[5] = t3;
-    $[6] = t4;
-    $[7] = t5;
+  let t7;
+  if ($[7] !== t3 || $[8] !== t6) {
+    t7 = /* @__PURE__ */ jsx("span", { style: t3, className: t6 });
+    $[7] = t3;
+    $[8] = t6;
+    $[9] = t7;
   } else {
-    t5 = $[7];
+    t7 = $[9];
   }
-  return t5;
+  return t7;
 }
 function ToggleButtonGroup(t0) {
   const $ = c(12);
@@ -38273,6 +39167,7 @@ export {
   DataSaverOnIcon,
   DataThresholdingIcon,
   DataUsageIcon,
+  DatabaseIcon,
   DatasetIcon,
   DatasetLinkedIcon,
   DateRangeIcon,
@@ -38545,6 +39440,7 @@ export {
   FireHydrantAltIcon,
   FireTruckIcon,
   FireplaceIcon,
+  FirestoreIcon,
   FirstPageIcon,
   FitScreenIcon,
   FitbitIcon,
@@ -39404,6 +40300,7 @@ export {
   RequestPageIcon,
   RequestQuoteIcon,
   ResetTvIcon,
+  ResizablePanels,
   RestartAltIcon,
   RestaurantIcon,
   RestaurantMenuIcon,
@@ -39478,6 +40375,8 @@ export {
   SearchBar,
   SearchIcon,
   SearchOffIcon,
+  SearchableSelect,
+  SearchableSelectItem,
   SecurityIcon,
   SecurityUpdateGoodIcon,
   SecurityUpdateIcon,