@firecms/ui 3.0.0-canary.167 → 3.0.0-canary.169

package/dist/index.umd.js

@@ -876,7 +876,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 +1162,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 +27336,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;
@@ -28796,7 +28804,7 @@
     return t7;
   }, equal);
   const Menu = React.forwardRef((t0, ref) => {
-    const $ = reactCompilerRuntime.c(17);
+    const $ = reactCompilerRuntime.c(20);
     const {
       children,
       trigger,
@@ -28805,90 +28813,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 +30375,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 +30833,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 +30858,9 @@
         onOpenChange,
         transparent,
         className,
+        style,
         overlayClassName,
+        overlayStyle,
         ...props
       } = t0);
       $[0] = t0;
@@ -30849,24 +30869,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 +30898,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 +30906,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 +30925,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 +30944,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 +31245,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
       } })
     ] });
   });
@@ -31280,7 +31308,7 @@
     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 });
+    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") }) : /* @__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 && "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" : "", {
       "min-h-[32px]": !invisible && size === "small",
       "min-h-[48px]": !invisible && size === "medium",
@@ -31474,7 +31502,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 +31550,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 {