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

package/dist/components/CircularProgress.d.ts

@@ -1,5 +1,5 @@
 export type CircularProgressProps = {
-    size?: "small" | "medium" | "large";
+    size?: "smallest" | "small" | "medium" | "large";
     className?: string;
 };
 export declare function CircularProgress({ size, className }: CircularProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu.d.ts

@@ -8,6 +8,8 @@ export type MenuProps = {
     portalContainer?: HTMLElement | null;
     side?: "top" | "right" | "bottom" | "left";
     align?: "start" | "center" | "end";
+    sideOffset?: number;
+    className?: string;
 };
 declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLButtonElement>>;
 export { Menu };
@@ -15,6 +17,7 @@ export type MenuItemProps = {
     children: React.ReactNode;
     dense?: boolean;
     onClick?: (event: React.MouseEvent) => void;
+    className?: string;
 };
 export declare function MenuItem({ children, dense, // Default value is false if not provided
-onClick }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+onClick, className }: MenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Sheet.d.ts

@@ -10,7 +10,9 @@ interface SheetProps {
     transparent?: boolean;
     onOpenChange?: (open: boolean) => void;
     className?: string;
+    style?: React.CSSProperties;
     overlayClassName?: string;
+    overlayStyle?: React.CSSProperties;
 }
 export declare const Sheet: React.FC<SheetProps>;
 export {};

package/dist/index.es.js

@@ -866,7 +866,7 @@ const ButtonInner = 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-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",
@@ -1152,23 +1152,31 @@ function CircularProgress(t0) {
   } = 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;
@@ -27318,7 +27326,7 @@ function Chip(t0) {
   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;
@@ -28786,7 +28794,7 @@ const Markdown = React__default.memo(function Markdown2(t0) {
   return t7;
 }, equal);
 const Menu = React__default.forwardRef((t0, ref) => {
-  const $ = c(17);
+  const $ = c(20);
   const {
     children,
     trigger,
@@ -28795,90 +28803,98 @@ const Menu = React__default.forwardRef((t0, ref) => {
     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__ */ jsx(DropdownMenu.Trigger, { ref, asChild: true, children: trigger });
+    t2 = /* @__PURE__ */ jsx(DropdownMenu.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__ */ jsx(DropdownMenu.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__ */ jsx(DropdownMenu.Portal, { container: portalContainer, children: t3 });
-    $[8] = portalContainer;
+  if ($[5] !== align || $[6] !== children || $[7] !== side || $[8] !== sideOffset || $[9] !== t3) {
+    t4 = /* @__PURE__ */ jsx(DropdownMenu.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__ */ jsxs(DropdownMenu.Root, { open, defaultOpen, onOpenChange, children: [
-      t1,
-      t4
+  if ($[11] !== portalContainer || $[12] !== t4) {
+    t5 = /* @__PURE__ */ jsx(DropdownMenu.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__ */ jsxs(DropdownMenu.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 $ = c(7);
+  const $ = 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__ */ jsx(DropdownMenu.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;
 }
@@ -30349,7 +30365,7 @@ function SearchBar(t0) {
   }
   let t9;
   if ($[10] !== loading) {
-    t9 = /* @__PURE__ */ jsx("div", { className: "absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0", children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) : /* @__PURE__ */ jsx(SearchIcon, { className: "text-text-disabled dark:text-text-disabled-dark" }) });
+    t9 = /* @__PURE__ */ jsx("div", { className: "absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0", children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsx(SearchIcon, { className: "text-text-disabled dark:text-text-disabled-dark" }) });
     $[10] = loading;
     $[11] = t9;
   } else {
@@ -30807,13 +30823,15 @@ const Slider = React.forwardRef((t0, ref) => {
 });
 Slider.displayName = "Slider";
 const Sheet = (t0) => {
-  const $ = c(61);
+  const $ = c(66);
   let children;
   let className;
   let onOpenChange;
   let open;
   let overlayClassName;
+  let overlayStyle;
   let props;
+  let style;
   let t1;
   let t2;
   let t3;
@@ -30830,7 +30848,9 @@ const Sheet = (t0) => {
       onOpenChange,
       transparent,
       className,
+      style,
       overlayClassName,
+      overlayStyle,
       ...props
     } = t0);
     $[0] = t0;
@@ -30839,24 +30859,28 @@ const Sheet = (t0) => {
     $[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;
@@ -30864,7 +30888,7 @@ const Sheet = (t0) => {
   const [displayed, setDisplayed] = useState(false);
   let t4;
   let t5;
-  if ($[12] !== open) {
+  if ($[14] !== open) {
     t4 = () => {
       const timeout = setTimeout(() => {
         setDisplayed(open);
@@ -30872,12 +30896,12 @@ const Sheet = (t0) => {
       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];
   }
   useEffect(t4, t5);
   let T0;
@@ -30891,7 +30915,7 @@ const Sheet = (t0) => {
   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",
@@ -30910,102 +30934,106 @@ const Sheet = (t0) => {
     t13 = onOpenChange;
     T1 = DialogPrimitive.Portal;
     const t142 = title ?? "Sheet";
-    if ($[37] !== t142) {
+    if ($[40] !== t142) {
       t9 = /* @__PURE__ */ jsx(DialogPrimitive.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__ */ jsx(DialogPrimitive.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__ */ jsx(DialogPrimitive.Overlay, { className: cls("outline-none", "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm", "bg-black bg-opacity-50", "dark:bg-surface-900 dark:bg-opacity-60", displayed && open ? "opacity-100" : "opacity-0", overlayClassName), style: {
+        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.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__ */ 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__ */ 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__ */ 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__ */ 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;
 };
@@ -31207,9 +31235,9 @@ const TextareaAutosize = React.forwardRef(function TextareaAutosize2(props, ref)
       }
     ),
     /* @__PURE__ */ jsx("textarea", { "aria-hidden": true, className: cls(props.className, props.shadowClassName), readOnly: true, ref: shadowRef, tabIndex: -1, style: {
+      padding: 0,
       ...styles$1.shadow,
-      ...style,
-      padding: 0
+      ...style
     } })
   ] });
 });
@@ -31270,7 +31298,7 @@ function TextField({
   const numberInputOnWheelPreventChange = useCallback((e) => {
     e.preventDefault();
   }, []);
-  const input = multiline ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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",
@@ -31464,7 +31492,7 @@ function Tabs(t0) {
   } = 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 {
@@ -31512,7 +31540,7 @@ function Tab(t0) {
   }
   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 {