@firecms/ui 3.0.0-beta.11 → 3.0.0-beta.12

package/dist/index.umd.js

@@ -624,7 +624,7 @@
     return t7;
   };
   const AvatarInner = (t0, ref) => {
-    const $ = reactCompilerRuntime.c(23);
+    const $ = reactCompilerRuntime.c(25);
     let alt;
     let children;
     let className;
@@ -632,6 +632,7 @@
     let props;
     let src;
     let style;
+    let t1;
     if ($[0] !== t0) {
       ({
         src,
@@ -640,6 +641,7 @@
         className,
         style,
         outerClassName,
+        hover: t1,
         ...props
       } = t0);
       $[0] = t0;
@@ -650,6 +652,7 @@
       $[5] = props;
       $[6] = src;
       $[7] = style;
+      $[8] = t1;
     } else {
       alt = $[1];
       children = $[2];
@@ -658,51 +661,55 @@
       props = $[5];
       src = $[6];
       style = $[7];
+      t1 = $[8];
     }
+    const hover = t1 === void 0 ? true : t1;
     const [isImageError, setIsImageError] = React.useState(false);
-    let t1;
-    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-      t1 = () => {
+    let t2;
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = () => {
         setIsImageError(true);
       };
-      $[8] = t1;
+      $[9] = t2;
     } else {
-      t1 = $[8];
+      t2 = $[9];
     }
-    const handleImageError = t1;
-    let t2;
-    if ($[9] !== outerClassName) {
-      t2 = cls("rounded-full flex items-center justify-center overflow-hidden", "p-1 hover:bg-surface-accent-200 hover:dark:bg-surface-accent-700 w-12 h-12 min-w-12 min-h-12", outerClassName);
-      $[9] = outerClassName;
-      $[10] = t2;
+    const handleImageError = t2;
+    const t3 = hover && "hover:bg-surface-accent-200 hover:dark:bg-surface-accent-700";
+    let t4;
+    if ($[10] !== outerClassName || $[11] !== t3) {
+      t4 = cls("rounded-full flex items-center justify-center overflow-hidden", "p-1 w-12 h-12 min-w-12 min-h-12", t3, outerClassName);
+      $[10] = outerClassName;
+      $[11] = t3;
+      $[12] = t4;
     } else {
-      t2 = $[10];
+      t4 = $[12];
     }
-    let t3;
-    if ($[11] !== alt || $[12] !== children || $[13] !== className || $[14] !== isImageError || $[15] !== src) {
-      t3 = src && !isImageError ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "w-full h-full object-cover rounded-full", className), src, alt, onError: handleImageError }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "flex items-center justify-center", "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-white rounded-full", className), children });
-      $[11] = alt;
-      $[12] = children;
-      $[13] = className;
-      $[14] = isImageError;
-      $[15] = src;
-      $[16] = t3;
+    let t5;
+    if ($[13] !== alt || $[14] !== children || $[15] !== className || $[16] !== isImageError || $[17] !== src) {
+      t5 = src && !isImageError ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "w-full h-full object-cover rounded-full", className), src, alt, onError: handleImageError }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "flex items-center justify-center", "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-white rounded-full", className), children });
+      $[13] = alt;
+      $[14] = children;
+      $[15] = className;
+      $[16] = isImageError;
+      $[17] = src;
+      $[18] = t5;
     } else {
-      t3 = $[16];
+      t5 = $[18];
     }
-    let t4;
-    if ($[17] !== props || $[18] !== ref || $[19] !== style || $[20] !== t2 || $[21] !== t3) {
-      t4 = /* @__PURE__ */ jsxRuntime.jsx("button", { ref, style, ...props, className: t2, children: t3 });
-      $[17] = props;
-      $[18] = ref;
-      $[19] = style;
-      $[20] = t2;
-      $[21] = t3;
+    let t6;
+    if ($[19] !== props || $[20] !== ref || $[21] !== style || $[22] !== t4 || $[23] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("button", { ref, style, ...props, className: t4, children: t5 });
+      $[19] = props;
+      $[20] = ref;
+      $[21] = style;
       $[22] = t4;
+      $[23] = t5;
+      $[24] = t6;
     } else {
-      t4 = $[22];
+      t6 = $[24];
     }
-    return t4;
+    return t6;
   };
   const Avatar = React.forwardRef(AvatarInner);
   const BooleanSwitch = React.forwardRef(function BooleanSwitch2({
@@ -876,7 +883,7 @@
           "text-text-disabled dark:text-text-disabled-dark": disabled,
           "border border-transparent opacity-50": t23,
           "border border-surface-500 opacity-50": t24,
-          "border border-surface-500 bg-surface-500 opacity-50": t25
+          "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40": t25
         });
         const sizeClasses2 = cls({
           "py-1 px-2": size === "small",
@@ -1162,23 +1169,31 @@
     } = t0;
     const size = t1 === void 0 ? "medium" : t1;
     let sizeClasses2;
-    if (size === "small") {
+    if (size === "smallest") {
       sizeClasses2 = "w-4 h-4";
     } else {
-      if (size === "medium") {
-        sizeClasses2 = "w-8 h-8 m-1";
+      if (size === "small") {
+        sizeClasses2 = "w-6 h-6";
       } else {
-        sizeClasses2 = "w-10 h-10 m-1";
+        if (size === "medium") {
+          sizeClasses2 = "w-8 h-8 m-1";
+        } else {
+          sizeClasses2 = "w-10 h-10 m-1";
+        }
       }
     }
     let borderClasses;
-    if (size === "small") {
+    if (size === "smallest") {
       borderClasses = "border-[3px]";
     } else {
-      if (size === "medium") {
-        borderClasses = "border-4";
+      if (size === "small") {
+        borderClasses = "border-[4px]";
       } else {
-        borderClasses = "border-[6px]";
+        if (size === "medium") {
+          borderClasses = "border-4";
+        } else {
+          borderClasses = "border-[6px]";
+        }
       }
     }
     let t2;
@@ -27328,7 +27343,7 @@
     const t6 = error ? "text-red-500 dark:text-red-400" : "";
     let t7;
     if ($[2] !== className || $[3] !== t3 || $[4] !== t4 || $[5] !== t5 || $[6] !== t6) {
-      t7 = cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1", "text-ellipsis", t3, t4, t5, t6, className);
+      t7 = cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1", "text-ellipsis", "items-center", t3, t4, t5, t6, className);
       $[2] = className;
       $[3] = t3;
       $[4] = t4;
@@ -28161,7 +28176,7 @@
     }
     let t2;
     if ($[2] !== className || $[3] !== includeMargin) {
-      t2 = cls("h-full flex-grow", {
+      t2 = cls("flex-grow", {
         "my-6 mx-6": includeMargin
       }, className);
       $[2] = className;
@@ -28565,7 +28580,7 @@
     }
     let t12;
     if ($[23] !== uploadDescription) {
-      t12 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow h-28 box-border flex flex-col items-center justify-center text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { align: "center", variant: "label", children: uploadDescription }) });
+      t12 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow h-28 box-border flex flex-col items-center justify-center text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { align: "center", variant: "label", className: "flex flex-row gap-2 justify-center", children: uploadDescription }) });
       $[23] = uploadDescription;
       $[24] = t12;
     } else {
@@ -28796,7 +28811,7 @@
     return t7;
   }, equal);
   const Menu = React.forwardRef((t0, ref) => {
-    const $ = reactCompilerRuntime.c(17);
+    const $ = reactCompilerRuntime.c(20);
     const {
       children,
       trigger,
@@ -28805,90 +28820,98 @@
       side,
       align,
       onOpenChange,
-      portalContainer
+      portalContainer,
+      sideOffset: t1,
+      className
     } = t0;
-    let t1;
+    const sideOffset = t1 === void 0 ? 4 : t1;
+    let t2;
     if ($[0] !== ref || $[1] !== trigger) {
-      t1 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { ref, asChild: true, children: trigger });
+      t2 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { ref, asChild: true, children: trigger });
       $[0] = ref;
       $[1] = trigger;
-      $[2] = t1;
-    } else {
-      t1 = $[2];
-    }
-    let t2;
-    if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-      t2 = cls(paperMixin, focusedDisabled, "shadow py-2 z-30");
-      $[3] = t2;
+      $[2] = t2;
     } else {
-      t2 = $[3];
+      t2 = $[2];
     }
     let t3;
-    if ($[4] !== align || $[5] !== children || $[6] !== side) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Content, { side, align, className: t2, children });
-      $[4] = align;
-      $[5] = children;
-      $[6] = side;
-      $[7] = t3;
+    if ($[3] !== className) {
+      t3 = cls(paperMixin, focusedDisabled, "shadow py-2 z-30", className);
+      $[3] = className;
+      $[4] = t3;
     } else {
-      t3 = $[7];
+      t3 = $[4];
     }
     let t4;
-    if ($[8] !== portalContainer || $[9] !== t3) {
-      t4 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalContainer, children: t3 });
-      $[8] = portalContainer;
+    if ($[5] !== align || $[6] !== children || $[7] !== side || $[8] !== sideOffset || $[9] !== t3) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Content, { side, sideOffset, align, className: t3, children });
+      $[5] = align;
+      $[6] = children;
+      $[7] = side;
+      $[8] = sideOffset;
       $[9] = t3;
       $[10] = t4;
     } else {
       t4 = $[10];
     }
     let t5;
-    if ($[11] !== defaultOpen || $[12] !== onOpenChange || $[13] !== open || $[14] !== t1 || $[15] !== t4) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Root, { open, defaultOpen, onOpenChange, children: [
-        t1,
-        t4
+    if ($[11] !== portalContainer || $[12] !== t4) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalContainer, children: t4 });
+      $[11] = portalContainer;
+      $[12] = t4;
+      $[13] = t5;
+    } else {
+      t5 = $[13];
+    }
+    let t6;
+    if ($[14] !== defaultOpen || $[15] !== onOpenChange || $[16] !== open || $[17] !== t2 || $[18] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Root, { open, defaultOpen, onOpenChange, children: [
+        t2,
+        t5
       ] });
-      $[11] = defaultOpen;
-      $[12] = onOpenChange;
-      $[13] = open;
-      $[14] = t1;
-      $[15] = t4;
-      $[16] = t5;
+      $[14] = defaultOpen;
+      $[15] = onOpenChange;
+      $[16] = open;
+      $[17] = t2;
+      $[18] = t5;
+      $[19] = t6;
     } else {
-      t5 = $[16];
+      t6 = $[19];
     }
-    return t5;
+    return t6;
   });
   Menu.displayName = "Menu";
   function MenuItem(t0) {
-    const $ = reactCompilerRuntime.c(7);
+    const $ = reactCompilerRuntime.c(8);
     const {
       children,
       dense: t1,
-      onClick
+      onClick,
+      className
     } = t0;
     const dense = t1 === void 0 ? false : t1;
     const t2 = onClick && "cursor-pointer";
     const t3 = dense ? "px-3 py-1.5" : "px-4 py-2";
     let t4;
-    if ($[0] !== t2 || $[1] !== 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);
-      $[0] = t2;
-      $[1] = t3;
-      $[2] = 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);
+      $[0] = className;
+      $[1] = t2;
+      $[2] = t3;
+      $[3] = t4;
     } else {
-      t4 = $[2];
+      t4 = $[3];
     }
     const classNames = t4;
     let t5;
-    if ($[3] !== children || $[4] !== classNames || $[5] !== onClick) {
+    if ($[4] !== children || $[5] !== classNames || $[6] !== onClick) {
       t5 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Item, { className: classNames, onClick, children });
-      $[3] = children;
-      $[4] = classNames;
-      $[5] = onClick;
-      $[6] = t5;
+      $[4] = children;
+      $[5] = classNames;
+      $[6] = onClick;
+      $[7] = t5;
     } else {
-      t5 = $[6];
+      t5 = $[7];
     }
     return t5;
   }
@@ -30359,7 +30382,7 @@
     }
     let t9;
     if ($[10] !== loading) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0", children: loading ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, { size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "text-text-disabled dark:text-text-disabled-dark" }) });
+      t9 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0", children: loading ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "text-text-disabled dark:text-text-disabled-dark" }) });
       $[10] = loading;
       $[11] = t9;
     } else {
@@ -30817,13 +30840,15 @@
   });
   Slider.displayName = "Slider";
   const Sheet = (t0) => {
-    const $ = reactCompilerRuntime.c(61);
+    const $ = reactCompilerRuntime.c(66);
     let children;
     let className;
     let onOpenChange;
     let open;
     let overlayClassName;
+    let overlayStyle;
     let props;
+    let style;
     let t1;
     let t2;
     let t3;
@@ -30840,7 +30865,9 @@
         onOpenChange,
         transparent,
         className,
+        style,
         overlayClassName,
+        overlayStyle,
         ...props
       } = t0);
       $[0] = t0;
@@ -30849,24 +30876,28 @@
       $[3] = onOpenChange;
       $[4] = open;
       $[5] = overlayClassName;
-      $[6] = props;
-      $[7] = t1;
-      $[8] = t2;
-      $[9] = t3;
-      $[10] = title;
-      $[11] = transparent;
+      $[6] = overlayStyle;
+      $[7] = props;
+      $[8] = style;
+      $[9] = t1;
+      $[10] = t2;
+      $[11] = t3;
+      $[12] = title;
+      $[13] = transparent;
     } else {
       children = $[1];
       className = $[2];
       onOpenChange = $[3];
       open = $[4];
       overlayClassName = $[5];
-      props = $[6];
-      t1 = $[7];
-      t2 = $[8];
-      t3 = $[9];
-      title = $[10];
-      transparent = $[11];
+      overlayStyle = $[6];
+      props = $[7];
+      style = $[8];
+      t1 = $[9];
+      t2 = $[10];
+      t3 = $[11];
+      title = $[12];
+      transparent = $[13];
     }
     const side = t1 === void 0 ? "right" : t1;
     const modal = t2 === void 0 ? true : t2;
@@ -30874,7 +30905,7 @@
     const [displayed, setDisplayed] = React.useState(false);
     let t4;
     let t5;
-    if ($[12] !== open) {
+    if ($[14] !== open) {
       t4 = () => {
         const timeout = setTimeout(() => {
           setDisplayed(open);
@@ -30882,12 +30913,12 @@
         return () => clearTimeout(timeout);
       };
       t5 = [open];
-      $[12] = open;
-      $[13] = t4;
-      $[14] = t5;
+      $[14] = open;
+      $[15] = t4;
+      $[16] = t5;
     } else {
-      t4 = $[13];
-      t5 = $[14];
+      t4 = $[15];
+      t5 = $[16];
     }
     React.useEffect(t4, t5);
     let T0;
@@ -30901,7 +30932,7 @@
     let t7;
     let t8;
     let t9;
-    if ($[15] !== className || $[16] !== displayed || $[17] !== includeBackgroundOverlay || $[18] !== modal || $[19] !== onOpenChange || $[20] !== open || $[21] !== overlayClassName || $[22] !== props || $[23] !== side || $[24] !== title || $[25] !== transparent) {
+    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) {
       const transformValue = {
         top: "-translate-y-full",
         bottom: "translate-y-full",
@@ -30920,102 +30951,106 @@
       t13 = onOpenChange;
       T1 = DialogPrimitive__namespace.Portal;
       const t142 = title ?? "Sheet";
-      if ($[37] !== t142) {
+      if ($[40] !== t142) {
         t9 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { autoFocus: true, tabIndex: 0, children: t142 });
-        $[37] = t142;
-        $[38] = t9;
+        $[40] = t142;
+        $[41] = t9;
       } else {
-        t9 = $[38];
+        t9 = $[41];
       }
-      if ($[39] !== displayed || $[40] !== includeBackgroundOverlay || $[41] !== open || $[42] !== overlayClassName) {
-        t10 = includeBackgroundOverlay && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: cls("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: {
-          pointerEvents: displayed ? "auto" : "none"
+      if ($[42] !== displayed || $[43] !== includeBackgroundOverlay || $[44] !== open || $[45] !== overlayClassName || $[46] !== overlayStyle) {
+        t10 = includeBackgroundOverlay && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: cls("outline-none", "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm", "bg-black bg-opacity-50", "dark:bg-surface-900 dark:bg-opacity-60", displayed && open ? "opacity-100" : "opacity-0", overlayClassName), style: {
+          pointerEvents: displayed ? "auto" : "none",
+          ...overlayStyle
         } });
-        $[39] = displayed;
-        $[40] = includeBackgroundOverlay;
-        $[41] = open;
-        $[42] = overlayClassName;
-        $[43] = t10;
+        $[42] = displayed;
+        $[43] = includeBackgroundOverlay;
+        $[44] = open;
+        $[45] = overlayClassName;
+        $[46] = overlayStyle;
+        $[47] = t10;
       } else {
-        t10 = $[43];
+        t10 = $[47];
       }
       T0 = DialogPrimitive__namespace.Content;
       t6 = props;
       t7 = _temp;
-      t8 = cls(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);
-      $[15] = className;
-      $[16] = displayed;
-      $[17] = includeBackgroundOverlay;
-      $[18] = modal;
-      $[19] = onOpenChange;
-      $[20] = open;
-      $[21] = overlayClassName;
-      $[22] = props;
-      $[23] = side;
-      $[24] = title;
-      $[25] = transparent;
-      $[26] = T0;
-      $[27] = T1;
-      $[28] = T2;
-      $[29] = t10;
-      $[30] = t11;
-      $[31] = t12;
-      $[32] = t13;
-      $[33] = t6;
-      $[34] = t7;
-      $[35] = t8;
-      $[36] = t9;
-    } else {
-      T0 = $[26];
-      T1 = $[27];
-      T2 = $[28];
-      t10 = $[29];
-      t11 = $[30];
-      t12 = $[31];
-      t13 = $[32];
-      t6 = $[33];
-      t7 = $[34];
-      t8 = $[35];
-      t9 = $[36];
+      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 ($[44] !== T0 || $[45] !== children || $[46] !== t6 || $[47] !== t7 || $[48] !== t8) {
-      t14 = /* @__PURE__ */ jsxRuntime.jsx(T0, { ...t6, onFocusCapture: t7, className: t8, children });
-      $[44] = T0;
-      $[45] = children;
-      $[46] = t6;
-      $[47] = t7;
-      $[48] = t8;
-      $[49] = t14;
-    } else {
-      t14 = $[49];
+    if ($[48] !== T0 || $[49] !== children || $[50] !== style || $[51] !== t6 || $[52] !== t7 || $[53] !== t8) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsx(T0, { ...t6, onFocusCapture: t7, className: t8, style, children });
+      $[48] = T0;
+      $[49] = children;
+      $[50] = style;
+      $[51] = t6;
+      $[52] = t7;
+      $[53] = t8;
+      $[54] = t14;
+    } else {
+      t14 = $[54];
     }
     let t15;
-    if ($[50] !== T1 || $[51] !== t10 || $[52] !== t14 || $[53] !== t9) {
+    if ($[55] !== T1 || $[56] !== t10 || $[57] !== t14 || $[58] !== t9) {
       t15 = /* @__PURE__ */ jsxRuntime.jsxs(T1, { children: [
         t9,
         t10,
         t14
       ] });
-      $[50] = T1;
-      $[51] = t10;
-      $[52] = t14;
-      $[53] = t9;
-      $[54] = t15;
+      $[55] = T1;
+      $[56] = t10;
+      $[57] = t14;
+      $[58] = t9;
+      $[59] = t15;
     } else {
-      t15 = $[54];
+      t15 = $[59];
     }
     let t16;
-    if ($[55] !== T2 || $[56] !== t11 || $[57] !== t12 || $[58] !== t13 || $[59] !== t15) {
+    if ($[60] !== T2 || $[61] !== t11 || $[62] !== t12 || $[63] !== t13 || $[64] !== t15) {
       t16 = /* @__PURE__ */ jsxRuntime.jsx(T2, { open: t11, modal: t12, onOpenChange: t13, children: t15 });
-      $[55] = T2;
-      $[56] = t11;
-      $[57] = t12;
-      $[58] = t13;
-      $[59] = t15;
-      $[60] = t16;
+      $[60] = T2;
+      $[61] = t11;
+      $[62] = t12;
+      $[63] = t13;
+      $[64] = t15;
+      $[65] = t16;
     } else {
-      t16 = $[60];
+      t16 = $[65];
     }
     return t16;
   };
@@ -31217,9 +31252,9 @@
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("textarea", { "aria-hidden": true, className: cls(props.className, props.shadowClassName), readOnly: true, ref: shadowRef, tabIndex: -1, style: {
+        padding: 0,
         ...styles$1.shadow,
-        ...style,
-        padding: 0
+        ...style
       } })
     ] });
   });
@@ -31242,7 +31277,7 @@
       ref.current = value;
     }
   }
-  function TextField({
+  const TextField = React.forwardRef(({
     value,
     onChange,
     label,
@@ -31262,7 +31297,7 @@
     inputStyle,
     inputRef: inputRefProp,
     ...inputProps
-  }) {
+  }, ref) => {
     const inputRef = inputRefProp ?? React.useRef(null);
     const [focused, setFocused] = React.useState(document.activeElement === inputRef.current);
     const hasValue = value !== void 0 && value !== null && value !== "";
@@ -31272,16 +31307,13 @@
         if (event.target instanceof HTMLElement) event.target.blur();
       };
       const element = "current" in inputRef ? inputRef.current : inputRef;
-      element.addEventListener("wheel", handleWheel);
+      element?.addEventListener("wheel", handleWheel);
       return () => {
-        element.removeEventListener("wheel", handleWheel);
+        element?.removeEventListener("wheel", handleWheel);
       };
     }, [inputRef, type]);
-    const numberInputOnWheelPreventChange = React.useCallback((e) => {
-      e.preventDefault();
-    }, []);
-    const input = multiline ? /* @__PURE__ */ jsxRuntime.jsx(TextareaAutosize, { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, rows, 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 && "border border-transparent outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500") }) : /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, ref: inputRef, onWheel: type === "number" ? numberInputOnWheelPreventChange : void 0, 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, size === "small" ? "min-h-[32px]" : size === "medium" ? "min-h-[48px]" : "min-h-[64px]", label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : "py-2", endAdornment ? "pr-10" : "pr-3", disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white", inputClassName), placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, onFocus: () => setFocused(true), onBlur: () => setFocused(false), type, value: Number.isNaN(value) ? "" : value ?? "", onChange });
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls("rounded-md relative max-w-full", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, error ? "border border-red-500 dark:border-red-600" : "", {
+    const input = multiline ? /* @__PURE__ */ jsxRuntime.jsx(TextareaAutosize, { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, rows, value: value ?? "", onChange, style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName) }) : /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, ref: inputRef, disabled, style: inputStyle, className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, size === "small" ? "min-h-[32px]" : size === "medium" ? "min-h-[48px]" : "min-h-[64px]", label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : "py-2", endAdornment ? "pr-10" : "pr-3", disabled && "outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white", inputClassName), placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, onFocus: () => setFocused(true), onBlur: () => setFocused(false), type, value: type === "number" && Number.isNaN(value) ? "" : value ?? "", onChange });
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cls("rounded-md relative max-w-full", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, error ? "border border-red-500 dark:border-red-600" : "", {
       "min-h-[32px]": !invisible && size === "small",
       "min-h-[48px]": !invisible && size === "medium",
       "min-h-[64px]": !invisible && size === "large"
@@ -31294,7 +31326,8 @@
         "mr-2": size === "small"
       }), children: endAdornment })
     ] });
-  }
+  });
+  TextField.displayName = "TextField";
   const Tooltip = (t0) => {
     const $ = reactCompilerRuntime.c(28);
     const {
@@ -31474,7 +31507,7 @@
     } = t0;
     let t1;
     if ($[0] !== innerClassName) {
-      t1 = cls("flex text-sm font-medium text-center text-surface-accent-800 dark:text-white max-w-full overflow-auto no-scrollbar items-end", 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 {
@@ -31522,7 +31555,7 @@
     }
     let t2;
     if ($[3] !== innerClassName) {
-      t2 = cls("uppercase inline-block p-2 px-4 m-2 rounded", "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800", 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 {