@dimasbaguspm/versaur 0.0.36 → 0.0.38

package/dist/js/{image-rectangle-B48Z5AzG.js → image-rectangle-C1ydvFGL.js}

@@ -1,7 +1,7 @@
 import { c as cva, j as jsxRuntimeExports, a as cn } from "./index-DOdDlCoL.js";
 import * as React from "react";
 import React__default, { createContext, useContext, forwardRef, useState, useEffect, useCallback, useRef, useId, cloneElement } from "react";
-import { ChevronDown, EllipsisVerticalIcon, X, XIcon, ImageOff } from "lucide-react";
+import { ChevronDown, CheckIcon, EllipsisVerticalIcon, X, XIcon, ImageOff } from "lucide-react";
 import ReactDOM from "react-dom";
 import { S as Skeleton } from "./skeleton-BNZyaRjo.js";
 const AccordionContext = createContext(
@@ -146,16 +146,16 @@ const AccordionContext = createContext(
     isCapitalize: i = !1,
     hasMargin: s = !1,
     align: o = "left",
-    italic: n = !1,
-    clamp: l = "none",
+    italic: l = !1,
+    clamp: a = "none",
     ellipsis: u = !1,
     className: c,
     children: f,
-    ...a
+    ...n
   }, d) => {
-    const b = `h${e}`;
+    const h = `h${e}`;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      b,
+      h,
       {
         ref: d,
         className: cn(
@@ -165,14 +165,14 @@ const AccordionContext = createContext(
             isCapitalize: i,
             hasMargin: s,
             align: o,
-            italic: n,
-            clamp: l,
+            italic: l,
+            clamp: a,
             ellipsis: u,
             level: e
           }),
           c
         ),
-        ...a,
+        ...n,
         children: f
       }
     );
@@ -209,11 +209,11 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     size: "md",
     color: "primary"
   }
-}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: i = "md", className: s, ...o }, n) {
+}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: i = "md", className: s, ...o }, l) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     t,
     {
-      ref: n,
+      ref: l,
       className: iconVariants({ color: r, size: i, className: s }),
       ...o
     }
@@ -261,24 +261,24 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     isDefaultOpen: i = !1,
     disabled: s = !1,
     hasMargin: o,
-    className: n,
-    children: l,
+    className: l,
+    children: a,
     ...u
   }, c) {
-    const [f, a] = useState(i), d = () => {
-      s || a((v) => !v);
-    }, b = {
+    const [f, n] = useState(i), d = () => {
+      s || n((m) => !m);
+    }, h = {
       isOpen: f,
       toggle: d,
       disabled: s
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContext.Provider, { value: b, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContext.Provider, { value: h, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
         ref: c,
         className: cn(
           accordionVariants({ disabled: s }),
-          n,
+          l,
           o && "mb-4"
         ),
         ...u,
@@ -307,7 +307,7 @@ const iconVariants = cva("inline-flex items-center justify-center", {
                 "overflow-hidden transition-all duration-300",
                 f ? "max-h-screen opacity-100" : "max-h-0 opacity-0"
               ),
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 pt-2", children: l })
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 pt-2", children: a })
             }
           )
         ]
@@ -463,10 +463,10 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     className: i,
     children: s,
     ...o
-  }, n) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  }, l) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      ref: n,
+      ref: l,
       role: "alert",
       className: cn(alertVariants({ variant: e, color: t }), i),
       ...o,
@@ -543,16 +543,16 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     fontSize: i = "base",
     fontWeight: s = "medium",
     quiet: o = !1,
-    ...n
-  }, l) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ...l
+  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "a",
     {
-      ref: l,
+      ref: a,
       className: cn(
         anchorVariants({ color: r, fontSize: i, fontWeight: s, quiet: o }),
         t
       ),
-      ...n,
+      ...l,
       children: e
     }
   )
@@ -633,15 +633,15 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     isCapitalize: i = !1,
     align: s = "left",
     italic: o = !1,
-    clamp: n = "none",
-    ellipsis: l = !1,
+    clamp: l = "none",
+    ellipsis: a = !1,
     fontSize: u,
     fontWeight: c,
     className: f,
-    children: a,
+    children: n,
     ...d
-  }, b) => {
-    const j = [
+  }, h) => {
+    const y = [
       "h1",
       "h2",
       "h3",
@@ -655,7 +655,7 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       e,
       {
-        ref: b,
+        ref: h,
         className: cn(
           textVariants({
             color: t,
@@ -663,26 +663,26 @@ const iconVariants = cva("inline-flex items-center justify-center", {
             isCapitalize: i,
             align: s,
             italic: o,
-            clamp: n,
-            ellipsis: l,
+            clamp: l,
+            ellipsis: a,
             // @ts-expect-error - `as` is not a valid variant
-            as: j
+            as: y
           }),
           w,
           R,
           f
         ),
         ...d,
-        children: a
+        children: n
       }
     );
   }
 ), Attribute = forwardRef(
-  function({ title: t, children: r, className: i, hasMargin: s, ...o }, n) {
+  function({ title: t, children: r, className: i, hasMargin: s, ...o }, l) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        ref: n,
+        ref: l,
         className: cn("space-y-1", i, s && "mb-4"),
         ...o,
         children: [
@@ -763,17 +763,17 @@ function getGridCols(e = 4) {
       return "grid-cols-4";
   }
 }
-const AttributeListItem = forwardRef(function({ children: t, className: r, span: i = 1, title: s, ...o }, n) {
-  const l = getColSpan(i);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: n, className: cn(l, r), ...o, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Attribute, { title: s, children: t }) });
+const AttributeListItem = forwardRef(function({ children: t, className: r, span: i = 1, title: s, ...o }, l) {
+  const a = getColSpan(i);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: l, className: cn(a, r), ...o, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Attribute, { title: s, children: t }) });
 }), AttributeListRoot = forwardRef(
   function({ children: t, className: r, columns: i = 4, ...s }, o) {
-    const n = getGridCols(i);
+    const l = getGridCols(i);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "ul",
       {
         ref: o,
-        className: cn("grid gap-4", n, r),
+        className: cn("grid gap-4", l, r),
         ...s,
         children: t
       }
@@ -827,10 +827,10 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     className: i,
     children: s,
     ...o
-  }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, l) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      ref: n,
+      ref: l,
       className: cn(avatarVariants({ variant: e, size: t, shape: r }), i),
       ...o,
       children: s
@@ -838,17 +838,17 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
   )
 ), AvatarImage = forwardRef(
   ({ src: e, alt: t, className: r, onError: i, ...s }, o) => {
-    const [n, l] = useState(!1);
+    const [l, a] = useState(!1);
     useEffect(() => {
-      l(!1);
+      a(!1);
     }, [e]);
     const u = useCallback(
       (c) => {
-        l(!0), i?.(c);
+        a(!0), i?.(c);
       },
       [i]
     );
-    return n ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return l ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
         ref: o,
@@ -1026,11 +1026,11 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     size: i = "md",
     iconLeft: s,
     iconRight: o,
-    className: n,
-    children: l,
+    className: l,
+    children: a,
     ...u
   }, c) => {
-    const d = !(l != null && l !== "") && !!(s || o);
+    const d = !(a != null && a !== "") && !!(s || o);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "span",
       {
@@ -1043,7 +1043,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
             size: i,
             iconOnly: d
           }),
-          n
+          l
         ),
         ...u,
         children: d ? (
@@ -1053,7 +1053,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
           // Normal mode: display icon(s) and text
           /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             s,
-            l,
+            a,
             o
           ] })
         )
@@ -1156,8 +1156,8 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     size: i = "md",
     disabled: s = !1,
     type: o = "button",
-    children: n,
-    ...l
+    children: l,
+    ...a
   }, u) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
@@ -1168,8 +1168,8 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
         disabled: s,
         "aria-disabled": s,
         inert: s ? !0 : void 0,
-        ...l,
-        children: n
+        ...a,
+        children: l
       }
     );
   }
@@ -1231,33 +1231,33 @@ function isTriggerVisible(e, t) {
   return !0;
 }
 function useMenuPosition(e, t, r, i = "bottom-start", s) {
-  const [o, n] = useState({ isReady: !1 }), l = useCallback(() => {
+  const [o, l] = useState({ isReady: !1 }), a = useCallback(() => {
     if (!e || !t.current) {
-      n({ isReady: !1 });
+      l({ isReady: !1 });
       return;
     }
     if (!r.current) {
-      const m = setTimeout(() => {
-        n({ isReady: !1 });
+      const v = setTimeout(() => {
+        l({ isReady: !1 });
       }, 0);
-      return () => clearTimeout(m);
+      return () => clearTimeout(v);
     }
     const u = t.current, c = r.current, f = getScrollableAncestors(u);
     if (!isTriggerVisible(u, f)) {
-      n({ isReady: !1 });
+      l({ isReady: !1 });
       return;
     }
-    const a = u.getBoundingClientRect(), d = window.innerWidth, b = window.innerHeight;
-    let v = null;
-    s && ("getBoundingClientRect" in s ? v = s : "current" in s && (v = s.current));
-    const j = v || document.documentElement, w = j === document.documentElement ? { top: 0, bottom: b, left: 0, right: d } : j.getBoundingClientRect(), R = c.style.visibility, E = c.style.position, C = c.style.opacity;
+    const n = u.getBoundingClientRect(), d = window.innerWidth, h = window.innerHeight;
+    let m = null;
+    s && ("getBoundingClientRect" in s ? m = s : "current" in s && (m = s.current));
+    const y = m || document.documentElement, w = y === document.documentElement ? { top: 0, bottom: h, left: 0, right: d } : y.getBoundingClientRect(), R = c.style.visibility, E = c.style.position, C = c.style.opacity;
     c.style.visibility = "hidden", c.style.position = "absolute", c.style.opacity = "0";
     const x = c.getBoundingClientRect();
     c.style.visibility = R, c.style.position = E, c.style.opacity = C;
-    const N = w.bottom - a.bottom - 8, I = a.top - w.top - 8, V = w.right - a.left - 8, A = a.right - w.left - 8;
+    const N = w.bottom - n.bottom - 8, I = n.top - w.top - 8, V = w.right - n.left - 8, B = n.right - w.left - 8;
     let p = i;
     if (i === "auto") {
-      const h = [
+      const b = [
         {
           name: "bottom-start",
           fits: N >= x.height && V >= x.width,
@@ -1267,7 +1267,7 @@ function useMenuPosition(e, t, r, i = "bottom-start", s) {
         },
         {
           name: "bottom-end",
-          fits: N >= x.height && A >= x.width,
+          fits: N >= x.height && B >= x.width,
           spaceUsed: N,
           priority: 2
         },
@@ -1279,114 +1279,114 @@ function useMenuPosition(e, t, r, i = "bottom-start", s) {
         },
         {
           name: "top-end",
-          fits: I >= x.height && A >= x.width,
+          fits: I >= x.height && B >= x.width,
           spaceUsed: I,
           priority: 4
         }
-      ].filter((y) => y.fits);
-      h.length > 0 ? p = h.sort(
-        (y, S) => y.priority - S.priority
-      )[0].name : N >= I ? p = V >= A ? "bottom-start" : "bottom-end" : p = V >= A ? "top-start" : "top-end";
+      ].filter((j) => j.fits);
+      b.length > 0 ? p = b.sort(
+        (j, k) => j.priority - k.priority
+      )[0].name : N >= I ? p = V >= B ? "bottom-start" : "bottom-end" : p = V >= B ? "top-start" : "top-end";
     }
     const g = {};
     if (s)
       switch (g.position = "fixed", p) {
         case "bottom-start":
-          g.top = a.bottom + 4, g.left = a.left;
+          g.top = n.bottom + 4, g.left = n.left;
           break;
         case "bottom-end":
-          g.top = a.bottom + 4, g.right = window.innerWidth - a.right;
+          g.top = n.bottom + 4, g.right = window.innerWidth - n.right;
           break;
         case "top-start":
-          g.bottom = window.innerHeight - a.top + 4, g.left = a.left;
+          g.bottom = window.innerHeight - n.top + 4, g.left = n.left;
           break;
         case "top-end":
-          g.bottom = window.innerHeight - a.top + 4, g.right = window.innerWidth - a.right;
+          g.bottom = window.innerHeight - n.top + 4, g.right = window.innerWidth - n.right;
           break;
       }
     else
       switch (g.position = "absolute", p) {
         case "bottom-start":
-          g.top = a.height + 4, g.left = 0;
+          g.top = n.height + 4, g.left = 0;
           break;
         case "bottom-end":
-          g.top = a.height + 4, g.right = 0;
+          g.top = n.height + 4, g.right = 0;
           break;
         case "top-start":
-          g.bottom = a.height + 4, g.left = 0;
+          g.bottom = n.height + 4, g.left = 0;
           break;
         case "top-end":
-          g.bottom = a.height + 4, g.right = 0;
+          g.bottom = n.height + 4, g.right = 0;
           break;
       }
     if (s) {
-      const m = {
-        top: p.startsWith("bottom") ? a.bottom + 4 : a.top - x.height - 4,
-        left: p.endsWith("start") ? a.left : a.right - x.width,
+      const v = {
+        top: p.startsWith("bottom") ? n.bottom + 4 : n.top - x.height - 4,
+        left: p.endsWith("start") ? n.left : n.right - x.width,
         width: x.width,
         height: x.height
       };
-      if (m.left < w.left + 8) {
-        const h = w.left + 8 - m.left;
-        p.endsWith("start") ? g.left = (g.left || 0) + h : g.right = (g.right || 0) - h;
-      } else if (m.left + m.width > w.right - 8) {
-        const h = m.left + m.width - (w.right - 8);
-        p.endsWith("start") ? g.left = (g.left || 0) - h : g.right = (g.right || 0) + h;
+      if (v.left < w.left + 8) {
+        const b = w.left + 8 - v.left;
+        p.endsWith("start") ? g.left = (g.left || 0) + b : g.right = (g.right || 0) - b;
+      } else if (v.left + v.width > w.right - 8) {
+        const b = v.left + v.width - (w.right - 8);
+        p.endsWith("start") ? g.left = (g.left || 0) - b : g.right = (g.right || 0) + b;
       }
       if (p.startsWith("bottom")) {
-        const h = Math.max(
+        const b = Math.max(
           50,
-          w.bottom - a.bottom - 16
+          w.bottom - n.bottom - 16
         );
-        x.height > h && (g.maxHeight = h);
+        x.height > b && (g.maxHeight = b);
       } else {
-        const h = Math.max(
+        const b = Math.max(
           50,
-          a.top - w.top - 16
+          n.top - w.top - 16
         );
-        x.height > h && (g.maxHeight = h);
+        x.height > b && (g.maxHeight = b);
       }
     } else {
-      const m = {
-        top: p.startsWith("bottom") ? a.height + 4 : -x.height - 4,
+      const v = {
+        top: p.startsWith("bottom") ? n.height + 4 : -x.height - 4,
         left: p.endsWith("start") ? 0 : -x.width,
         width: x.width,
         height: x.height
-      }, h = {
-        left: a.left,
-        right: a.right,
-        top: a.top,
-        bottom: a.bottom
+      }, b = {
+        left: n.left,
+        right: n.right,
+        top: n.top,
+        bottom: n.bottom
       };
-      if (h.left + m.left < 8) {
-        const y = 8 - (h.left + m.left);
-        p.endsWith("start") ? g.left = (g.left || 0) + y : g.right = (g.right || 0) - y;
-      } else if (h.left + m.left + m.width > d - 8) {
-        const y = h.left + m.left + m.width - (d - 8);
-        p.endsWith("start") ? g.left = (g.left || 0) - y : g.right = (g.right || 0) + y;
+      if (b.left + v.left < 8) {
+        const j = 8 - (b.left + v.left);
+        p.endsWith("start") ? g.left = (g.left || 0) + j : g.right = (g.right || 0) - j;
+      } else if (b.left + v.left + v.width > d - 8) {
+        const j = b.left + v.left + v.width - (d - 8);
+        p.endsWith("start") ? g.left = (g.left || 0) - j : g.right = (g.right || 0) + j;
       }
     }
-    g.isReady = !0, n(g);
+    g.isReady = !0, l(g);
   }, [e, i, t, r, s]);
   return useEffect(() => {
-    l();
-  }, [l]), useEffect(() => {
+    a();
+  }, [a]), useEffect(() => {
     if (!e || !t.current) return;
     const u = t.current, c = getScrollableAncestors(u);
     let f = !1;
-    const a = () => {
+    const n = () => {
       f || (requestAnimationFrame(() => {
-        l(), f = !1;
+        a(), f = !1;
       }), f = !0);
     };
     return c.forEach((d) => {
-      d === document.documentElement ? (window.addEventListener("scroll", a, { passive: !0 }), window.addEventListener("resize", a, { passive: !0 })) : d.addEventListener("scroll", a, { passive: !0 });
+      d === document.documentElement ? (window.addEventListener("scroll", n, { passive: !0 }), window.addEventListener("resize", n, { passive: !0 })) : d.addEventListener("scroll", n, { passive: !0 });
     }), () => {
       c.forEach((d) => {
-        d === document.documentElement ? (window.removeEventListener("scroll", a), window.removeEventListener("resize", a)) : d.removeEventListener("scroll", a);
+        d === document.documentElement ? (window.removeEventListener("scroll", n), window.removeEventListener("resize", n)) : d.removeEventListener("scroll", n);
       });
     };
-  }, [e, l, t]), o;
+  }, [e, a, t]), o;
 }
 const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider, useMenuProvider = () => {
   const e = useContext(MenuContext);
@@ -1396,18 +1396,29 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
 }, MenuContent = forwardRef(
   ({ children: e }, t) => /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: t, className: "flex flex-col gap-1", children: e })
 ), MenuItem = forwardRef(
-  ({ children: e, disabled: t, onClick: r, ...i }, s) => {
-    const { preserve: o, onClose: n } = useMenuProvider(), l = (u) => {
-      r?.(u), o || n();
+  ({ children: e, disabled: t, onClick: r, active: i, ...s }, o) => {
+    const { preserve: l, onClose: a } = useMenuProvider(), u = (c) => {
+      r?.(c), l || a();
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: s, ...i, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: o, ...s, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Button,
       {
         variant: "ghost",
         className: cn("justify-start w-full gap-2"),
         disabled: t,
-        onClick: l,
-        children: e
+        onClick: u,
+        children: [
+          e,
+          i && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Icon,
+            {
+              as: CheckIcon,
+              color: "inherit",
+              className: "ml-auto",
+              size: "sm"
+            }
+          )
+        ]
       }
     ) });
   }
@@ -1418,38 +1429,38 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
   content: i,
   children: s,
   placement: o = "auto",
-  container: n,
-  preserve: l
+  container: l,
+  preserve: a
 }) => {
   const u = useRef(null), c = useRef(null), f = useId();
   useMenuOutsideClick(e, c, u, t);
-  const a = useMenuPosition(
+  const n = useMenuPosition(
     e,
     u,
     c,
     o,
-    n || null
+    l || null
   ), d = {
-    ...a,
-    position: a.position || "absolute",
-    overflowY: a.maxHeight ? "auto" : void 0,
-    overflowX: a.maxWidth ? "auto" : void 0
-  }, b = e && a.isReady, v = /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ...n,
+    position: n.position || "absolute",
+    overflowY: n.maxHeight ? "auto" : void 0,
+    overflowX: n.maxWidth ? "auto" : void 0
+  }, h = e && n.isReady, m = /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       id: f,
       ref: c,
-      className: cn(menuVariants({ size: r, open: b })),
+      className: cn(menuVariants({ size: r, open: h })),
       style: d,
       role: "menu",
-      "aria-hidden": !b,
+      "aria-hidden": !h,
       children: i
     }
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     MenuProvider,
     {
-      value: { onClose: t, preserve: !!l },
+      value: { onClose: t, preserve: !!a },
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-fit", children: [
         cloneElement(s, {
           // @ts-expect-error: ref is valid for button or forwardRef components
@@ -1459,7 +1470,7 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
           "aria-controls": f
         }),
         e && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          !a.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          !n.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
               ref: c,
@@ -1475,7 +1486,7 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
               children: i
             }
           ),
-          a.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: a.position === "fixed" ? /* @__PURE__ */ jsxRuntimeExports.jsx(OverlayPortal, { children: v }) : v })
+          n.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: n.position === "fixed" ? /* @__PURE__ */ jsxRuntimeExports.jsx(OverlayPortal, { children: m }) : m })
         ] })
       ] })
     }
@@ -1483,6 +1494,41 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
 }, Menu = Object.assign(MenuRoot, {
   Content: MenuContent,
   Item: MenuItem
+}), ButtonMenuRoot = forwardRef(
+  (e, t) => {
+    const {
+      children: r,
+      onOpenChange: i,
+      onClick: s,
+      placement: o,
+      container: l,
+      preserve: a,
+      label: u,
+      ...c
+    } = e ?? {}, [f, n] = useState(!1);
+    useEffect(() => {
+      i?.(f);
+    }, [f, i]);
+    const d = () => {
+      n(!1);
+    }, h = (m) => {
+      n((y) => !y), s?.(m);
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Menu,
+      {
+        isOpen: f,
+        onOutsideClick: d,
+        placement: o,
+        container: l,
+        preserve: a,
+        content: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Content, { children: r }),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { ref: t, onClick: h, ...c, children: u })
+      }
+    );
+  }
+), ButtonMenu = Object.assign(ButtonMenuRoot, {
+  Item: Menu.Item
 });
 function getIconColorFromVariant(e = "primary") {
   const t = e.split("-");
@@ -1579,8 +1625,8 @@ const buttonIconVariants = cva(
     size: i = "md",
     shape: s = "rounded",
     disabled: o = !1,
-    as: n,
-    "aria-label": l,
+    as: l,
+    "aria-label": a,
     ...u
   }, c) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1598,13 +1644,13 @@ const buttonIconVariants = cva(
         ),
         disabled: o,
         "aria-disabled": o,
-        "aria-label": l,
+        "aria-label": a,
         inert: o ? !0 : void 0,
         ...u,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Icon,
           {
-            as: n,
+            as: l,
             size: "sm",
             color: getIconColorFromVariant(r)
           }
@@ -1619,29 +1665,29 @@ const buttonIconVariants = cva(
       children: i,
       onOpenChange: s,
       onClick: o,
-      placement: n,
-      container: l,
+      placement: l,
+      container: a,
       preserve: u,
       ...c
-    } = e ?? {}, [f, a] = useState(!1);
+    } = e ?? {}, [f, n] = useState(!1);
     useEffect(() => {
       s?.(f);
     }, [f, s]);
     const d = () => {
-      a(!1);
-    }, b = (v) => {
-      a((j) => !j), o?.(v);
+      n(!1);
+    }, h = (m) => {
+      n((y) => !y), o?.(m);
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Menu,
       {
         isOpen: f,
         onOutsideClick: d,
-        placement: n,
-        container: l,
+        placement: l,
+        container: a,
         preserve: u,
         content: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Content, { children: i }),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { ref: t, as: r, onClick: b, ...c })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { ref: t, as: r, onClick: h, ...c })
       }
     );
   }
@@ -1715,35 +1761,35 @@ const buttonIconVariants = cva(
   }
 );
 function useFloatingPosition(e, t = "1rem") {
-  const r = useRef(null), [i, s] = useState({}), [o, n] = useState("fixed bottom-4 right-4"), l = useCallback(() => {
+  const r = useRef(null), [i, s] = useState({}), [o, l] = useState("fixed bottom-4 right-4"), a = useCallback(() => {
     const c = r.current;
     if (!c) return;
-    const a = c.getBoundingClientRect().height > window.innerHeight;
-    let d = {}, b = "";
-    a ? (d = {
+    const n = c.getBoundingClientRect().height > window.innerHeight;
+    let d = {}, h = "";
+    n ? (d = {
       position: "fixed",
       bottom: t,
       zIndex: 50,
       transform: `translateY(${c.scrollTop}px)`
-    }, b = `fixed bottom-4 ${e}-4`) : (d = {
+    }, h = `fixed bottom-4 ${e}-4`) : (d = {
       position: "fixed",
       bottom: t,
       zIndex: 50
-    }, b = `fixed bottom-4 ${e}-4`), s(d), n(b);
+    }, h = `fixed bottom-4 ${e}-4`), s(d), l(h);
   }, [e, t]);
   return useEffect(() => {
-    l();
+    a();
     const c = r.current;
-    return c && c.addEventListener("scroll", l), window.addEventListener("resize", l), () => {
-      c && c.removeEventListener("scroll", l), window.removeEventListener("resize", l);
+    return c && c.addEventListener("scroll", a), window.addEventListener("resize", a), () => {
+      c && c.removeEventListener("scroll", a), window.removeEventListener("resize", a);
     };
-  }, [l]), useEffect(() => {
-    r.current && l();
-  }, [e, t, l]), [useCallback(
+  }, [a]), useEffect(() => {
+    r.current && a();
+  }, [e, t, a]), [useCallback(
     (c) => {
-      r.current = c, c && l();
+      r.current = c, c && a();
     },
-    [l]
+    [a]
   ), i, o];
 }
 const ButtonFloat = forwardRef(
@@ -1753,27 +1799,27 @@ const ButtonFloat = forwardRef(
     size: i = "md",
     side: s = "right",
     offset: o = "1rem",
-    ...n
-  }, l) {
+    ...l
+  }, a) {
     const [u, c, f] = useFloatingPosition(
       s,
       o
-    ), [a, d] = useState(!1);
+    ), [n, d] = useState(!1);
     return useEffect(() => {
       d(!0);
     }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: u, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
-        ref: l,
-        type: n.type || "button",
+        ref: a,
+        type: l.type || "button",
         className: cn(
           buttonFloatVariants({ variant: r, size: i }),
           f,
-          a && "animate-fab-in",
+          n && "animate-fab-in",
           t
         ),
         style: c,
-        ...n
+        ...l
       }
     ) });
   }
@@ -1895,7 +1941,7 @@ const BUTTONS = [
     className: i,
     "aria-label": s
   }, o) => {
-    const { input: n, inputRef: l, handleButton: u, handleInput: c } = useCalculator({
+    const { input: l, inputRef: a, handleButton: u, handleInput: c } = useCalculator({
       initialValue: e,
       disabled: r,
       onChange: t
@@ -1911,16 +1957,16 @@ const BUTTONS = [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
-              ref: l,
+              ref: a,
               className: "w-full mb-3 px-3 py-2 rounded border border-[var(--color-neutral)] bg-[var(--color-neutral-soft)] text-right text-xl font-mono focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]",
-              value: n,
+              value: l,
               onChange: c,
               disabled: r,
               inputMode: "decimal",
               "aria-label": "Calculator input"
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((f, a) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: f.map((d) => d === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((f, n) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: f.map((d) => d === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             ButtonIcon,
             {
               as: X,
@@ -1941,7 +1987,7 @@ const BUTTONS = [
               children: d
             },
             d
-          )) }, a)) })
+          )) }, n)) })
         ]
       }
     );
@@ -1949,7 +1995,7 @@ const BUTTONS = [
 );
 Calculator.displayName = "Calculator";
 const cardVariants = cva(
-  "block transition-colors duration-200 cursor-pointer w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light hover:bg-gray-50",
+  "flex justify-between transition-colors duration-200 cursor-pointer w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light hover:bg-gray-50",
   {
     variants: {
       size: {
@@ -1975,14 +2021,21 @@ const cardVariants = cva(
     }
   }
 ), CardList = forwardRef(
-  ({ children: e }, t) => /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: t, className: "inline-flex items-center", children: e })
+  ({ children: e }, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "ul",
+    {
+      ref: t,
+      className: "flex items-center min-w-0 overflow-hidden w-full",
+      children: e
+    }
+  )
 ), CardListItem = forwardRef(
   ({ children: e }, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "li",
     {
       ref: t,
-      className: "flex items-center after:content-[''] after:inline-block after:mx-2 after:w-1 after:h-1 after:rounded-full after:bg-ghost last:after:hidden",
-      children: e
+      className: "flex items-center min-w-0 flex-shrink after:content-[''] after:inline-block after:mx-2 after:w-1 after:h-1 after:rounded-full after:bg-ghost last:after:hidden after:flex-shrink-0",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate min-w-0", children: e })
     }
   )
 ), CardRoot = forwardRef(
@@ -1993,26 +2046,48 @@ const cardVariants = cva(
     title: i,
     subtitle: s,
     badge: o,
-    supplementaryInfo: n,
-    bordered: l = !1,
-    className: u,
-    ...c
-  }, f) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    actions: l,
+    supplementaryInfo: a,
+    bordered: u = !1,
+    className: c,
+    ...f
+  }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "button",
     {
-      ref: f,
-      className: cn(cardVariants({ size: e, shape: t, bordered: l }), u),
-      ...c,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4", children: [
+      ref: n,
+      className: cn(cardVariants({ size: e, shape: t, bordered: u }), c),
+      ...f,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4 w-full", children: [
         r && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: r }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full min-w-0", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
-            i && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h3", fontSize: "base", fontWeight: "semibold", children: i }),
-            s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: s })
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Text,
+                {
+                  as: "h3",
+                  fontSize: "base",
+                  fontWeight: "semibold",
+                  className: "truncate",
+                  children: i
+                }
+              ),
+              l && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: l })
+            ] }),
+            s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(l && "-mt-3"), children: typeof s == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: s }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Text,
+              {
+                as: "p",
+                fontSize: "sm",
+                color: "gray",
+                className: "min-w-0",
+                children: s
+              }
+            ) }) })
           ] }),
-          (o || n) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
-            o,
-            typeof n == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: n }) : n
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center gap-2", children: [
+            o && o,
+            a && typeof a == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: a }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: a })
           ] })
         ] })
       ] })
@@ -2066,19 +2141,19 @@ const cardVariants = cva(
     size: i = "md",
     disabled: s = !1,
     children: o,
-    ...n
-  }, l) {
+    ...l
+  }, a) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
-        ref: l,
+        ref: a,
         type: "button",
         className: cn(filterChipVariants({ variant: r, size: i }), t),
         disabled: s,
         "aria-disabled": s,
         "aria-label": `${o}, removable`,
         inert: s ? !0 : void 0,
-        ...n,
+        ...l,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0", children: o }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: XIcon, color: "inherit", size: i === "lg" ? "md" : "sm" })
@@ -2127,15 +2202,15 @@ const cardVariants = cva(
 ), noResultsHeaderVariants = cva(
   "flex flex-row items-center gap-3 mb-2"
 ), NoResults = React__default.forwardRef(
-  function e({ icon: t, title: r, subtitle: i, action: s, className: o, hasGrayBackground: n, ...l }, u) {
+  function e({ icon: t, title: r, subtitle: i, action: s, className: o, hasGrayBackground: l, ...a }, u) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "section",
       {
         ref: u,
-        className: cn(noResultsVariants({ hasGrayBackground: n }), o),
+        className: cn(noResultsVariants({ hasGrayBackground: l }), o),
         role: "status",
         "aria-label": "No results found",
-        ...l,
+        ...a,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: noResultsHeaderVariants(), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: t, size: "lg", color: "ghost", "aria-hidden": "true" }),
@@ -2280,14 +2355,14 @@ const getTableColumnClass = (e) => {
     );
   }
 ), TableColumn = forwardRef(
-  ({ as: e = "td", span: t, align: r = "left", children: i, className: s, ...o }, n) => {
-    const l = e === "th" ? "columnheader" : "cell";
+  ({ as: e = "td", span: t, align: r = "left", children: i, className: s, ...o }, l) => {
+    const a = e === "th" ? "columnheader" : "cell";
     let u = "text-left";
     return r === "center" ? u = "text-center" : r === "right" && (u = "text-right"), /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        ref: n,
-        role: l,
+        ref: l,
+        role: a,
         className: cn(
           "px-4 py-2",
           "[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border",
@@ -2398,9 +2473,9 @@ const getTableColumnClass = (e) => {
   )
 );
 function useImage({ src: e }) {
-  const [t, r] = useState(!1), [i, s] = useState(!1), o = useRef(!1), n = () => {
+  const [t, r] = useState(!1), [i, s] = useState(!1), o = useRef(!1), l = () => {
     r(!0);
-  }, l = () => {
+  }, a = () => {
     s(!0);
   };
   return useEffect(() => {
@@ -2416,8 +2491,8 @@ function useImage({ src: e }) {
   }, [e]), {
     loaded: t,
     errored: i,
-    handleLoad: n,
-    handleError: l
+    handleLoad: l,
+    handleError: a
   };
 }
 const imageVariants = cva("block object-cover", {
@@ -2495,12 +2570,12 @@ function BaseImageFallback({
   className: i,
   style: s,
   shape: o,
-  size: n
+  size: l
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: imageAtomVariants({ shape: o, size: n, className: i }),
+      className: imageAtomVariants({ shape: o, size: l, className: i }),
       style: { width: t, height: r, ...s },
       "aria-label": e,
       role: "img",
@@ -2526,24 +2601,24 @@ const BaseImage = forwardRef(
     onError: i,
     width: s,
     height: o,
-    loading: n = "lazy",
-    position: l = "cover",
+    loading: l = "lazy",
+    position: a = "cover",
     size: u = "auto",
     shape: c,
     className: f,
-    ...a
+    ...n
   }, d) => {
-    const { loaded: b, errored: v, handleLoad: j, handleError: w } = useImage({
+    const { loaded: h, errored: m, handleLoad: y, handleError: w } = useImage({
       src: e
     }), R = typeof s == "number" ? s : Number(s), E = typeof o == "number" ? o : Number(o);
-    return !b && !v ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return !h && !m ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageSkeleton,
       {
         shape: c,
         width: R,
         height: E
       }
-    ) : v ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ) : m ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageFallback,
       {
         shape: c,
@@ -2559,22 +2634,22 @@ const BaseImage = forwardRef(
         alt: t,
         width: R,
         height: E,
-        loading: n,
+        loading: l,
         className: cn(
           imageVariants({
-            position: l,
+            position: a,
             size: u,
             shape: c
           }),
           f
         ),
         onLoad: (C) => {
-          j(), r?.(C);
+          y(), r?.(C);
         },
         onError: (C) => {
           w(), i?.(C);
         },
-        ...a
+        ...n
       }
     );
   }
@@ -2597,15 +2672,16 @@ export {
   Avatar as e,
   Brand as f,
   Button as g,
-  ButtonMenuIcon as h,
-  ButtonFloat as i,
-  ButtonIcon as j,
-  Card as k,
-  Hr as l,
-  Text as m,
-  Tile as n,
-  ImageCircle as o,
-  ImageSquare as p,
-  ImageRectangle as q,
-  BaseImage as r
+  ButtonMenu as h,
+  ButtonMenuIcon as i,
+  ButtonFloat as j,
+  ButtonIcon as k,
+  Card as l,
+  Hr as m,
+  Text as n,
+  Tile as o,
+  ImageCircle as p,
+  ImageSquare as q,
+  ImageRectangle as r,
+  BaseImage as s
 };