@dimasbaguspm/versaur 0.0.34 → 0.0.36

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

@@ -1,10 +1,324 @@
 import { c as cva, j as jsxRuntimeExports, a as cn } from "./index-DOdDlCoL.js";
 import * as React from "react";
-import React__default, { forwardRef, useState, useEffect, useCallback, useRef, useId, cloneElement, createContext, useContext } 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 ReactDOM from "react-dom";
-import { EllipsisVerticalIcon, X, XIcon, ImageOff } from "lucide-react";
 import { S as Skeleton } from "./skeleton-BNZyaRjo.js";
-const alertVariants = cva(
+const AccordionContext = createContext(
+  null
+), useAccordionContext = () => {
+  const e = useContext(AccordionContext);
+  if (!e)
+    throw new Error(
+      "Accordion compound components must be used within Accordion"
+    );
+  return e;
+}, accordionVariants = cva(
+  "border-b border-border bg-background overflow-hidden",
+  {
+    variants: {
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: !1
+    }
+  }
+), accordionHeaderVariants = cva(
+  "flex items-center justify-between w-full p-4 text-left transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-light focus-visible:ring-inset",
+  {
+    variants: {
+      disabled: {
+        true: "cursor-not-allowed",
+        false: "cursor-pointer hover:bg-neutral-soft"
+      },
+      isOpen: {
+        true: "",
+        false: "bg-background"
+      }
+    },
+    defaultVariants: {
+      disabled: !1,
+      isOpen: !1
+    }
+  }
+), accordionContentVariants = cva(
+  "overflow-hidden transition-all duration-300",
+  {
+    variants: {
+      isOpen: {
+        true: "max-h-screen opacity-100",
+        false: "max-h-0 opacity-0"
+      }
+    },
+    defaultVariants: {
+      isOpen: !1
+    }
+  }
+), accordionContentInnerVariants = cva("p-4 pt-0"), accordionIconVariants = cva("transition-transform duration-200", {
+  variants: {
+    isOpen: {
+      true: "rotate-180",
+      false: "rotate-0"
+    }
+  },
+  defaultVariants: {
+    isOpen: !1
+  }
+}), headingVariants = cva("", {
+  variants: {
+    color: {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      tertiary: "text-tertiary",
+      ghost: "text-ghost",
+      neutral: "text-ghost",
+      success: "text-success",
+      info: "text-info",
+      warning: "text-warning",
+      danger: "text-danger",
+      inherit: "",
+      gray: "text-gray-500",
+      black: "text-black",
+      white: "text-white"
+    },
+    hasUnderline: {
+      true: "underline",
+      false: ""
+    },
+    isCapitalize: {
+      true: "capitalize",
+      false: ""
+    },
+    hasMargin: {
+      true: "mb-4",
+      false: ""
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify"
+    },
+    italic: {
+      true: "italic",
+      false: ""
+    },
+    clamp: {
+      1: "line-clamp-1",
+      2: "line-clamp-2",
+      3: "line-clamp-3",
+      4: "line-clamp-4",
+      5: "line-clamp-5",
+      none: ""
+    },
+    ellipsis: {
+      true: "truncate",
+      false: ""
+    },
+    level: {
+      1: "font-bold text-2xl leading-loose",
+      2: "font-semibold text-xl leading-relaxed",
+      3: "font-medium text-base leading-relaxed",
+      4: "font-bold text-sm leading-normal",
+      5: "font-semibold text-sm leading-normal",
+      6: "font-medium text-xs leading-normal"
+    }
+  },
+  defaultVariants: {
+    color: "ghost",
+    hasUnderline: !1,
+    isCapitalize: !1,
+    hasMargin: !1,
+    align: "left",
+    italic: !1,
+    clamp: "none",
+    ellipsis: !1,
+    level: 1
+  }
+}), Heading = forwardRef(
+  ({
+    level: e = 3,
+    color: t = "ghost",
+    hasUnderline: r = !1,
+    isCapitalize: i = !1,
+    hasMargin: s = !1,
+    align: o = "left",
+    italic: n = !1,
+    clamp: l = "none",
+    ellipsis: u = !1,
+    className: c,
+    children: f,
+    ...a
+  }, d) => {
+    const b = `h${e}`;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      b,
+      {
+        ref: d,
+        className: cn(
+          headingVariants({
+            color: t,
+            hasUnderline: r,
+            isCapitalize: i,
+            hasMargin: s,
+            align: o,
+            italic: n,
+            clamp: l,
+            ellipsis: u,
+            level: e
+          }),
+          c
+        ),
+        ...a,
+        children: f
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+const iconVariants = cva("inline-flex items-center justify-center", {
+  variants: {
+    size: {
+      xs: "w-3 h-3",
+      sm: "w-4 h-4",
+      md: "w-5 h-5",
+      lg: "w-6 h-6",
+      xl: "w-8 h-8",
+      inherit: "w-auto h-auto"
+    },
+    color: {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      tertiary: "text-tertiary",
+      ghost: "text-ghost",
+      neutral: "text-neutral",
+      success: "text-success",
+      info: "text-info",
+      warning: "text-warning",
+      danger: "text-danger",
+      gray: "text-gray-500",
+      black: "text-black",
+      white: "text-white",
+      inherit: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: i = "md", className: s, ...o }, n) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    t,
+    {
+      ref: n,
+      className: iconVariants({ color: r, size: i, className: s }),
+      ...o
+    }
+  );
+}), AccordionTitle = forwardRef(function({ className: t, children: r, ...i }, s) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Heading,
+    {
+      ref: s,
+      level: 4,
+      className: cn("font-medium", t),
+      ...i,
+      color: "black",
+      children: r
+    }
+  );
+}), AccordionContent = forwardRef(function({ className: t, children: r, ...i }, s) {
+  const { isOpen: o } = useAccordionContext();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: s,
+      className: cn(accordionContentVariants({ isOpen: o }), t),
+      ...i,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: accordionContentInnerVariants(), children: r })
+    }
+  );
+}), AccordionIcon = forwardRef(function({ as: t, ...r }, i) {
+  const { isOpen: s } = useAccordionContext();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Icon,
+    {
+      ref: i,
+      as: t,
+      color: "ghost",
+      size: "sm",
+      className: accordionIconVariants({ isOpen: s }),
+      ...r
+    }
+  );
+}), AccordionRoot = forwardRef(
+  function({
+    title: t,
+    subtitle: r,
+    isDefaultOpen: i = !1,
+    disabled: s = !1,
+    hasMargin: o,
+    className: n,
+    children: l,
+    ...u
+  }, c) {
+    const [f, a] = useState(i), d = () => {
+      s || a((v) => !v);
+    }, b = {
+      isOpen: f,
+      toggle: d,
+      disabled: s
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionContext.Provider, { value: b, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        ref: c,
+        className: cn(
+          accordionVariants({ disabled: s }),
+          n,
+          o && "mb-4"
+        ),
+        ...u,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              role: "button",
+              className: accordionHeaderVariants({ disabled: s, isOpen: f }),
+              onClick: d,
+              "aria-disabled": s,
+              "aria-expanded": f,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between w-full gap-2", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 flex-grow", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: t }),
+                  r && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: r })
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIcon, { as: ChevronDown })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: cn(
+                "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 })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+), Accordion = Object.assign(AccordionRoot, {
+  Title: AccordionTitle,
+  Content: AccordionContent,
+  Icon: AccordionIcon
+}), alertVariants = cva(
   "relative flex items-center gap-2 rounded-md p-2 text-sm transition-all duration-200",
   {
     variants: {
@@ -140,25 +454,25 @@ const alertVariants = cva(
     }
   }
 ), AlertIcon = forwardRef(
-  ({ className: e, children: t, ...r }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: s, className: cn(alertIconVariants(), e), ...r, children: t })
+  ({ className: e, children: t, ...r }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: i, className: cn(alertIconVariants(), e), ...r, children: t })
 ), AlertRoot = forwardRef(
   ({
     variant: e = "default",
     color: t = "neutral",
     icon: r,
-    className: s,
-    children: i,
+    className: i,
+    children: s,
     ...o
   }, n) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
       ref: n,
       role: "alert",
-      className: cn(alertVariants({ variant: e, color: t }), s),
+      className: cn(alertVariants({ variant: e, color: t }), i),
       ...o,
       children: [
         r && /* @__PURE__ */ jsxRuntimeExports.jsx(AlertIcon, { children: r }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: i })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: s })
       ]
     }
   )
@@ -226,16 +540,16 @@ const alertVariants = cva(
     children: e,
     className: t,
     color: r = "primary",
-    fontSize: s = "base",
-    fontWeight: i = "medium",
+    fontSize: i = "base",
+    fontWeight: s = "medium",
     quiet: o = !1,
     ...n
-  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, l) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "a",
     {
-      ref: a,
+      ref: l,
       className: cn(
-        anchorVariants({ color: r, fontSize: s, fontWeight: i, quiet: o }),
+        anchorVariants({ color: r, fontSize: i, fontWeight: s, quiet: o }),
         t
       ),
       ...n,
@@ -316,18 +630,18 @@ const alertVariants = cva(
     as: e = "span",
     color: t = "ghost",
     hasUnderline: r = !1,
-    isCapitalize: s = !1,
-    align: i = "left",
+    isCapitalize: i = !1,
+    align: s = "left",
     italic: o = !1,
     clamp: n = "none",
-    ellipsis: a = !1,
-    fontSize: l,
-    fontWeight: u,
-    className: c,
-    children: f,
+    ellipsis: l = !1,
+    fontSize: u,
+    fontWeight: c,
+    className: f,
+    children: a,
     ...d
   }, b) => {
-    const h = [
+    const j = [
       "h1",
       "h2",
       "h3",
@@ -337,7 +651,7 @@ const alertVariants = cva(
       "p",
       "span",
       "label"
-    ].includes(e) ? e : "span", y = l ? `text-${l}` : "", v = u ? `font-${u}` : "";
+    ].includes(e) ? e : "span", w = u ? `text-${u}` : "", R = c ? `font-${c}` : "";
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       e,
       {
@@ -346,39 +660,47 @@ const alertVariants = cva(
           textVariants({
             color: t,
             hasUnderline: r,
-            isCapitalize: s,
-            align: i,
+            isCapitalize: i,
+            align: s,
             italic: o,
             clamp: n,
-            ellipsis: a,
+            ellipsis: l,
             // @ts-expect-error - `as` is not a valid variant
-            as: h
+            as: j
           }),
-          y,
-          v,
-          c
+          w,
+          R,
+          f
         ),
         ...d,
-        children: f
+        children: a
       }
     );
   }
 ), Attribute = forwardRef(
-  function({ title: t, children: r, className: s, ...i }, o) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: o, className: cn("space-y-1", s), ...i, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Text,
-        {
-          as: "h4",
-          fontSize: "sm",
-          fontWeight: "normal",
-          color: "gray",
-          className: "leading-none",
-          children: t
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "base", fontWeight: "normal", children: r })
-    ] });
+  function({ title: t, children: r, className: i, hasMargin: s, ...o }, n) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        ref: n,
+        className: cn("space-y-1", i, s && "mb-4"),
+        ...o,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Text,
+            {
+              as: "h4",
+              fontSize: "sm",
+              fontWeight: "normal",
+              color: "gray",
+              className: "leading-none",
+              children: t
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "base", fontWeight: "normal", children: r })
+        ]
+      }
+    );
   }
 );
 function getColSpan(e = 1) {
@@ -441,18 +763,18 @@ function getGridCols(e = 4) {
       return "grid-cols-4";
   }
 }
-const AttributeListItem = forwardRef(function({ children: t, className: r, span: s = 1, title: i, ...o }, n) {
-  const a = getColSpan(s);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: n, className: cn(a, r), ...o, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Attribute, { title: i, children: t }) });
+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 }) });
 }), AttributeListRoot = forwardRef(
-  function({ children: t, className: r, columns: s = 4, ...i }, o) {
-    const n = getGridCols(s);
+  function({ children: t, className: r, columns: i = 4, ...s }, o) {
+    const n = getGridCols(i);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "ul",
       {
         ref: o,
         className: cn("grid gap-4", n, r),
-        ...i,
+        ...s,
         children: t
       }
     );
@@ -502,29 +824,29 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     variant: e = "primary",
     size: t = "md",
     shape: r = "circle",
-    className: s,
-    children: i,
+    className: i,
+    children: s,
     ...o
   }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       ref: n,
-      className: cn(avatarVariants({ variant: e, size: t, shape: r }), s),
+      className: cn(avatarVariants({ variant: e, size: t, shape: r }), i),
       ...o,
-      children: i
+      children: s
     }
   )
 ), AvatarImage = forwardRef(
-  ({ src: e, alt: t, className: r, onError: s, ...i }, o) => {
-    const [n, a] = useState(!1);
+  ({ src: e, alt: t, className: r, onError: i, ...s }, o) => {
+    const [n, l] = useState(!1);
     useEffect(() => {
-      a(!1);
+      l(!1);
     }, [e]);
-    const l = useCallback(
-      (u) => {
-        a(!0), s?.(u);
+    const u = useCallback(
+      (c) => {
+        l(!0), i?.(c);
       },
-      [s]
+      [i]
     );
     return n ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
@@ -533,8 +855,8 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
         src: e,
         alt: t,
         className: cn(avatarImageVariants(), r),
-        onError: l,
-        ...i
+        onError: u,
+        ...s
       }
     );
   }
@@ -701,37 +1023,37 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     variant: e = "default",
     shape: t = "square",
     color: r = "primary",
-    size: s = "md",
-    iconLeft: i,
+    size: i = "md",
+    iconLeft: s,
     iconRight: o,
     className: n,
-    children: a,
-    ...l
-  }, u) => {
-    const d = !(a != null && a !== "") && !!(i || o);
+    children: l,
+    ...u
+  }, c) => {
+    const d = !(l != null && l !== "") && !!(s || o);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "span",
       {
-        ref: u,
+        ref: c,
         className: cn(
           badgeVariants({
             variant: e,
             color: r,
             shape: t,
-            size: s,
+            size: i,
             iconOnly: d
           }),
           n
         ),
-        ...l,
+        ...u,
         children: d ? (
           // Icon-only mode: display only the icon
-          i || o
+          s || o
         ) : (
           // Normal mode: display icon(s) and text
           /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            i,
-            a,
+            s,
+            l,
             o
           ] })
         )
@@ -752,7 +1074,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     size: "md"
   }
 }), BrandLogo = forwardRef(
-  ({ shape: e = "square", size: t, ...r }, s) => {
+  ({ shape: e = "square", size: t, ...r }, i) => {
     const o = {
       square: SvgSpenicleSquare,
       rounded: SvgSpenicleRounded,
@@ -761,19 +1083,19 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       o,
       {
-        ref: s,
+        ref: i,
         ...r,
         className: cn("inline-block", brandSizeClass({ size: t }))
       }
     );
   }
 ), Brand = forwardRef(
-  ({ name: e = "spenicle", size: t = "md", shape: r, ...s }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ({ name: e = "spenicle", size: t = "md", shape: r, ...i }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "span",
     {
-      ref: i,
+      ref: s,
       className: cn("inline-flex items-center gap-2"),
-      ...s,
+      ...i,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(BrandLogo, { shape: r, size: t, "aria-hidden": "true" })
     }
   )
@@ -831,22 +1153,22 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
   function({
     className: t,
     variant: r = "primary",
-    size: s = "md",
-    disabled: i = !1,
+    size: i = "md",
+    disabled: s = !1,
     type: o = "button",
     children: n,
-    ...a
-  }, l) {
+    ...l
+  }, u) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
-        ref: l,
+        ref: u,
         type: o,
-        className: cn(buttonVariants({ variant: r, size: s }), t),
-        disabled: i,
-        "aria-disabled": i,
-        inert: i ? !0 : void 0,
-        ...a,
+        className: cn(buttonVariants({ variant: r, size: i }), t),
+        disabled: s,
+        "aria-disabled": s,
+        inert: s ? !0 : void 0,
+        ...l,
         children: n
       }
     );
@@ -878,185 +1200,286 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     }
   }
 );
-function useMenuOutsideClick(e, t, r, s) {
+function useMenuOutsideClick(e, t, r, i) {
   useEffect(() => {
     if (!e) return;
-    function i(o) {
-      !t.current?.contains(o.target) && !r.current?.contains(o.target) && s();
+    function s(o) {
+      !t.current?.contains(o.target) && !r.current?.contains(o.target) && i();
     }
-    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
-  }, [e, s, t, r]);
+    return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
+  }, [e, i, t, r]);
 }
-function useMenuPosition(e, t, r, s = "bottom-start", i) {
-  const [o, n] = useState({ isReady: !1 });
-  return useEffect(() => {
+function getScrollableAncestors(e) {
+  const t = [];
+  let r = e.parentElement;
+  for (; r && r !== document.documentElement; ) {
+    const i = getComputedStyle(r);
+    (i.overflow === "auto" || i.overflow === "scroll" || i.overflowY === "auto" || i.overflowY === "scroll" || i.overflowX === "auto" || i.overflowX === "scroll") && t.push(r), r = r.parentElement;
+  }
+  return t.push(document.documentElement), t;
+}
+function isTriggerVisible(e, t) {
+  const r = e.getBoundingClientRect();
+  if (r.bottom < 0 || r.top > window.innerHeight || r.right < 0 || r.left > window.innerWidth)
+    return !1;
+  for (const i of t) {
+    if (i === document.documentElement) continue;
+    const s = i.getBoundingClientRect();
+    if (r.bottom < s.top || r.top > s.bottom || r.right < s.left || r.left > s.right)
+      return !1;
+  }
+  return !0;
+}
+function useMenuPosition(e, t, r, i = "bottom-start", s) {
+  const [o, n] = useState({ isReady: !1 }), l = useCallback(() => {
     if (!e || !t.current) {
       n({ isReady: !1 });
       return;
     }
     if (!r.current) {
-      const w = setTimeout(() => {
+      const m = setTimeout(() => {
         n({ isReady: !1 });
       }, 0);
-      return () => clearTimeout(w);
+      return () => clearTimeout(m);
+    }
+    const u = t.current, c = r.current, f = getScrollableAncestors(u);
+    if (!isTriggerVisible(u, f)) {
+      n({ 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;
+    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;
+    let p = i;
+    if (i === "auto") {
+      const h = [
+        {
+          name: "bottom-start",
+          fits: N >= x.height && V >= x.width,
+          spaceUsed: N,
+          priority: 1
+          // Prefer bottom-start as default
+        },
+        {
+          name: "bottom-end",
+          fits: N >= x.height && A >= x.width,
+          spaceUsed: N,
+          priority: 2
+        },
+        {
+          name: "top-start",
+          fits: I >= x.height && V >= x.width,
+          spaceUsed: I,
+          priority: 3
+        },
+        {
+          name: "top-end",
+          fits: I >= x.height && A >= 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";
     }
-    const a = t.current, l = r.current, u = i || document.documentElement, c = a.getBoundingClientRect(), f = u.getBoundingClientRect(), d = l.style.visibility, b = l.style.position, p = l.style.opacity;
-    l.style.visibility = "hidden", l.style.position = "absolute", l.style.opacity = "0";
-    const h = l.getBoundingClientRect();
-    l.style.visibility = d, l.style.position = b, l.style.opacity = p;
-    const y = f.bottom - c.bottom - 8, v = c.top - f.top - 8, R = f.right - c.left - 8, j = c.right - f.left - 8;
-    let x = s;
-    s === "auto" && (y >= h.height && R >= h.width ? x = "bottom-start" : y >= h.height && j >= h.width ? x = "bottom-end" : v >= h.height && R >= h.width ? x = "top-start" : v >= h.height && j >= h.width ? x = "top-end" : x = y >= v ? "bottom-start" : "top-start");
     const g = {};
-    if (i)
-      switch (g.position = "fixed", x) {
+    if (s)
+      switch (g.position = "fixed", p) {
         case "bottom-start":
-          g.top = c.bottom + 4, g.left = c.left;
+          g.top = a.bottom + 4, g.left = a.left;
           break;
         case "bottom-end":
-          g.top = c.bottom + 4, g.right = window.innerWidth - c.right;
+          g.top = a.bottom + 4, g.right = window.innerWidth - a.right;
           break;
         case "top-start":
-          g.bottom = window.innerHeight - c.top + 4, g.left = c.left;
+          g.bottom = window.innerHeight - a.top + 4, g.left = a.left;
           break;
         case "top-end":
-          g.bottom = window.innerHeight - c.top + 4, g.right = window.innerWidth - c.right;
+          g.bottom = window.innerHeight - a.top + 4, g.right = window.innerWidth - a.right;
           break;
       }
     else
-      switch (g.position = "absolute", x) {
+      switch (g.position = "absolute", p) {
         case "bottom-start":
-          g.top = c.height + 4, g.left = 0;
+          g.top = a.height + 4, g.left = 0;
           break;
         case "bottom-end":
-          g.top = c.height + 4, g.right = 0;
+          g.top = a.height + 4, g.right = 0;
           break;
         case "top-start":
-          g.bottom = c.height + 4, g.left = 0;
+          g.bottom = a.height + 4, g.left = 0;
           break;
         case "top-end":
-          g.bottom = c.height + 4, g.right = 0;
+          g.bottom = a.height + 4, g.right = 0;
           break;
       }
-    if (i) {
-      const w = {
-        top: x.startsWith("bottom") ? c.bottom + 4 : c.top - h.height - 4,
-        left: x.endsWith("start") ? c.left : c.right - h.width,
-        width: h.width,
-        height: h.height
+    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,
+        width: x.width,
+        height: x.height
       };
-      if (w.left < f.left + 8) {
-        const m = f.left + 8 - w.left;
-        x.endsWith("start") ? g.left = (g.left || 0) + m : g.right = (g.right || 0) - m;
-      } else if (w.left + w.width > f.right - 8) {
-        const m = w.left + w.width - (f.right - 8);
-        x.endsWith("start") ? g.left = (g.left || 0) - m : g.right = (g.right || 0) + m;
+      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 (x.startsWith("bottom")) {
-        const m = Math.max(
+      if (p.startsWith("bottom")) {
+        const h = Math.max(
           50,
-          f.bottom - c.bottom - 16
+          w.bottom - a.bottom - 16
         );
-        h.height > m && (g.maxHeight = m);
+        x.height > h && (g.maxHeight = h);
       } else {
-        const m = Math.max(
+        const h = Math.max(
           50,
-          c.top - f.top - 16
+          a.top - w.top - 16
         );
-        h.height > m && (g.maxHeight = m);
+        x.height > h && (g.maxHeight = h);
+      }
+    } else {
+      const m = {
+        top: p.startsWith("bottom") ? a.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
+      };
+      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;
       }
     }
     g.isReady = !0, n(g);
-  }, [e, s, i, t, r]), o;
-}
-const 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, ...r }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: s, ...r, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Button,
-    {
-      variant: "ghost",
-      className: cn("block text-left w-full"),
-      disabled: t,
-      children: e
-    }
-  ) })
-);
-function useEscapeClose(e, t, r) {
-  const s = useRef(null);
+  }, [e, i, t, r, s]);
   return useEffect(() => {
-    s.current && s.current.focus();
-  }, []), useEffect(() => {
-    const i = (o) => {
-      o.key === "Escape" && e && s.current && s.current.contains(document.activeElement) && !r && t();
+    l();
+  }, [l]), useEffect(() => {
+    if (!e || !t.current) return;
+    const u = t.current, c = getScrollableAncestors(u);
+    let f = !1;
+    const a = () => {
+      f || (requestAnimationFrame(() => {
+        l(), f = !1;
+      }), f = !0);
     };
-    return e && (document.addEventListener("keydown", i), document.body.style.overflow = "hidden"), () => {
-      document.removeEventListener("keydown", i), document.body.style.overflow = "unset";
+    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 });
+    }), () => {
+      c.forEach((d) => {
+        d === document.documentElement ? (window.removeEventListener("scroll", a), window.removeEventListener("resize", a)) : d.removeEventListener("scroll", a);
+      });
     };
-  }, [e, t, r, s]), s;
+  }, [e, l, t]), o;
 }
-const MenuRoot = ({
+const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider, useMenuProvider = () => {
+  const e = useContext(MenuContext);
+  if (!e)
+    throw new Error("useMenuProvider must be used within a MenuProvider");
+  return e;
+}, 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();
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: s, ...i, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        variant: "ghost",
+        className: cn("justify-start w-full gap-2"),
+        disabled: t,
+        onClick: l,
+        children: e
+      }
+    ) });
+  }
+), MenuRoot = ({
   isOpen: e,
   onOutsideClick: t,
   size: r = "md",
-  content: s,
-  children: i,
-  placement: o = "bottom-start",
-  container: n
+  content: i,
+  children: s,
+  placement: o = "auto",
+  container: n,
+  preserve: l
 }) => {
-  const a = useRef(null), l = useRef(null), u = useId();
-  useMenuOutsideClick(e, l, a, t), useEscapeClose(e, t);
-  const c = useMenuPosition(
+  const u = useRef(null), c = useRef(null), f = useId();
+  useMenuOutsideClick(e, c, u, t);
+  const a = useMenuPosition(
     e,
-    a,
-    l,
+    u,
+    c,
     o,
-    n
-  ), f = {
-    ...c,
-    position: c.position || "absolute",
-    overflowY: c.maxHeight ? "auto" : void 0,
-    overflowX: c.maxWidth ? "auto" : void 0
-  }, d = e && c.isReady, b = /* @__PURE__ */ jsxRuntimeExports.jsx(
+    n || 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(
     "div",
     {
-      id: u,
-      ref: l,
-      className: cn(menuVariants({ size: r, open: d })),
-      style: f,
+      id: f,
+      ref: c,
+      className: cn(menuVariants({ size: r, open: b })),
+      style: d,
       role: "menu",
-      "aria-hidden": !d,
-      children: s
+      "aria-hidden": !b,
+      children: i
+    }
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    MenuProvider,
+    {
+      value: { onClose: t, preserve: !!l },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-fit", children: [
+        cloneElement(s, {
+          // @ts-expect-error: ref is valid for button or forwardRef components
+          ref: u,
+          "aria-haspopup": "menu",
+          "aria-expanded": e,
+          "aria-controls": f
+        }),
+        e && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          !a.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              ref: c,
+              className: cn(menuVariants({ size: r, open: !1 })),
+              style: {
+                position: "absolute",
+                visibility: "hidden",
+                opacity: 0,
+                pointerEvents: "none"
+              },
+              role: "menu",
+              "aria-hidden": !0,
+              children: i
+            }
+          ),
+          a.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: a.position === "fixed" ? /* @__PURE__ */ jsxRuntimeExports.jsx(OverlayPortal, { children: v }) : v })
+        ] })
+      ] })
     }
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-fit", children: [
-    cloneElement(i, {
-      // @ts-expect-error: ref is valid for button or forwardRef components
-      ref: a,
-      "aria-haspopup": "menu",
-      "aria-expanded": e,
-      "aria-controls": u
-    }),
-    e && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      !c.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          ref: l,
-          className: cn(menuVariants({ size: r, open: !1 })),
-          style: {
-            position: "absolute",
-            visibility: "hidden",
-            opacity: 0,
-            pointerEvents: "none"
-          },
-          role: "menu",
-          "aria-hidden": !0,
-          children: s
-        }
-      ),
-      c.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: c.position === "fixed" ? /* @__PURE__ */ jsxRuntimeExports.jsx(OverlayPortal, { children: b }) : b })
-    ] })
-  ] });
 }, Menu = Object.assign(MenuRoot, {
   Content: MenuContent,
   Item: MenuItem
@@ -1070,7 +1493,7 @@ function getIconColorFromVariant(e = "primary") {
       case "outline":
         return "ghost";
       default:
-        return "neutral";
+        return "white";
     }
   if (t?.[1] === "outline") return "inherit";
   switch (t[0]) {
@@ -1149,73 +1572,35 @@ const buttonIconVariants = cva(
       shape: "rounded"
     }
   }
-), iconVariants = cva("inline-flex items-center justify-center", {
-  variants: {
-    size: {
-      xs: "w-3 h-3",
-      sm: "w-4 h-4",
-      md: "w-5 h-5",
-      lg: "w-6 h-6",
-      xl: "w-8 h-8"
-    },
-    color: {
-      primary: "text-primary",
-      secondary: "text-secondary",
-      tertiary: "text-tertiary",
-      ghost: "text-ghost",
-      neutral: "text-neutral",
-      success: "text-success",
-      info: "text-info",
-      warning: "text-warning",
-      danger: "text-danger",
-      gray: "text-gray-500",
-      black: "text-black",
-      white: "text-white",
-      inherit: ""
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    color: "primary"
-  }
-}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: i, ...o }, n) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    t,
-    {
-      ref: n,
-      className: iconVariants({ color: r, size: s, className: i }),
-      ...o
-    }
-  );
-}), ButtonIcon = React__default.forwardRef(
+), ButtonIcon = React__default.forwardRef(
   function({
     className: t,
     variant: r = "primary",
-    size: s = "md",
-    shape: i = "rounded",
+    size: i = "md",
+    shape: s = "rounded",
     disabled: o = !1,
     as: n,
-    "aria-label": a,
-    ...l
-  }, u) {
+    "aria-label": l,
+    ...u
+  }, c) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
-        ref: u,
+        ref: c,
         type: "button",
         className: cn(
           buttonIconVariants({
             variant: r,
-            size: s,
-            shape: i
+            size: i,
+            shape: s
           }),
           t
         ),
         disabled: o,
         "aria-disabled": o,
-        "aria-label": a,
+        "aria-label": l,
         inert: o ? !0 : void 0,
-        ...l,
+        ...u,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Icon,
           {
@@ -1231,31 +1616,32 @@ const buttonIconVariants = cva(
   (e, t) => {
     const {
       as: r = EllipsisVerticalIcon,
-      children: s,
-      onOpenChange: i,
+      children: i,
+      onOpenChange: s,
       onClick: o,
-      placement: n = "bottom-start",
-      container: a,
-      ...l
-    } = e ?? {}, [u, c] = useState(!1);
+      placement: n,
+      container: l,
+      preserve: u,
+      ...c
+    } = e ?? {}, [f, a] = useState(!1);
     useEffect(() => {
-      i?.(u);
-    }, [u, i]);
-    const f = () => {
-      c(!1);
-    }, d = (b) => {
-      c((p) => !p), o?.(b);
+      s?.(f);
+    }, [f, s]);
+    const d = () => {
+      a(!1);
+    }, b = (v) => {
+      a((j) => !j), o?.(v);
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Menu,
       {
-        isOpen: u,
-        onOutsideClick: f,
-        size: "md",
+        isOpen: f,
+        onOutsideClick: d,
         placement: n,
-        container: a,
-        content: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Content, { children: s }),
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { ref: t, as: r, onClick: d, ...l })
+        container: l,
+        preserve: u,
+        content: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Content, { children: i }),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { ref: t, as: r, onClick: b, ...c })
       }
     );
   }
@@ -1329,64 +1715,64 @@ const buttonIconVariants = cva(
   }
 );
 function useFloatingPosition(e, t = "1rem") {
-  const r = useRef(null), [s, i] = useState({}), [o, n] = useState("fixed bottom-4 right-4"), a = useCallback(() => {
-    const u = r.current;
-    if (!u) return;
-    const f = u.getBoundingClientRect().height > window.innerHeight;
+  const r = useRef(null), [i, s] = useState({}), [o, n] = useState("fixed bottom-4 right-4"), l = useCallback(() => {
+    const c = r.current;
+    if (!c) return;
+    const a = c.getBoundingClientRect().height > window.innerHeight;
     let d = {}, b = "";
-    f ? (d = {
+    a ? (d = {
       position: "fixed",
       bottom: t,
       zIndex: 50,
-      transform: `translateY(${u.scrollTop}px)`
+      transform: `translateY(${c.scrollTop}px)`
     }, b = `fixed bottom-4 ${e}-4`) : (d = {
       position: "fixed",
       bottom: t,
       zIndex: 50
-    }, b = `fixed bottom-4 ${e}-4`), i(d), n(b);
+    }, b = `fixed bottom-4 ${e}-4`), s(d), n(b);
   }, [e, t]);
   return useEffect(() => {
-    a();
-    const u = r.current;
-    return u && u.addEventListener("scroll", a), window.addEventListener("resize", a), () => {
-      u && u.removeEventListener("scroll", a), window.removeEventListener("resize", a);
+    l();
+    const c = r.current;
+    return c && c.addEventListener("scroll", l), window.addEventListener("resize", l), () => {
+      c && c.removeEventListener("scroll", l), window.removeEventListener("resize", l);
     };
-  }, [a]), useEffect(() => {
-    r.current && a();
-  }, [e, t, a]), [useCallback(
-    (u) => {
-      r.current = u, u && a();
+  }, [l]), useEffect(() => {
+    r.current && l();
+  }, [e, t, l]), [useCallback(
+    (c) => {
+      r.current = c, c && l();
     },
-    [a]
-  ), s, o];
+    [l]
+  ), i, o];
 }
 const ButtonFloat = forwardRef(
   function({
     className: t,
     variant: r = "primary",
-    size: s = "md",
-    side: i = "right",
+    size: i = "md",
+    side: s = "right",
     offset: o = "1rem",
     ...n
-  }, a) {
-    const [l, u, c] = useFloatingPosition(
-      i,
+  }, l) {
+    const [u, c, f] = useFloatingPosition(
+      s,
       o
-    ), [f, d] = useState(!1);
+    ), [a, d] = useState(!1);
     return useEffect(() => {
       d(!0);
-    }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: l, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: u, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
-        ref: a,
+        ref: l,
         type: n.type || "button",
         className: cn(
-          buttonFloatVariants({ variant: r, size: s }),
-          c,
-          f && "animate-fab-in",
+          buttonFloatVariants({ variant: r, size: i }),
+          f,
+          a && "animate-fab-in",
           t
         ),
-        style: u,
+        style: c,
         ...n
       }
     ) });
@@ -1424,10 +1810,10 @@ const ButtonFloat = forwardRef(
       disabled: !1
     }
   }
-), CalculatorButton = forwardRef(({ variant: e = "default", className: t, ...r }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+), CalculatorButton = forwardRef(({ variant: e = "default", className: t, ...r }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   "button",
   {
-    ref: s,
+    ref: i,
     type: "button",
     className: cn(
       calculatorButtonVariants({ variant: e, disabled: r.disabled }),
@@ -1506,10 +1892,10 @@ const BUTTONS = [
     initialValue: e = "",
     onChange: t,
     disabled: r,
-    className: s,
-    "aria-label": i
+    className: i,
+    "aria-label": s
   }, o) => {
-    const { input: n, inputRef: a, handleButton: l, handleInput: u } = useCalculator({
+    const { input: n, inputRef: l, handleButton: u, handleInput: c } = useCalculator({
       initialValue: e,
       disabled: r,
       onChange: t
@@ -1518,30 +1904,30 @@ const BUTTONS = [
       "div",
       {
         ref: o,
-        className: cn(calculatorRootVariants({ disabled: r }), s),
-        "aria-label": i || "Calculator",
+        className: cn(calculatorRootVariants({ disabled: r }), i),
+        "aria-label": s || "Calculator",
         role: "region",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
-              ref: a,
+              ref: l,
               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,
-              onChange: u,
+              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((c, f) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: c.map((d) => d === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__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(
             ButtonIcon,
             {
               as: X,
               variant: "danger-ghost",
               "aria-label": "Backspace",
               size: "md",
-              onClick: () => l("⌫"),
+              onClick: () => u("⌫"),
               disabled: r
             },
             "backspace"
@@ -1549,13 +1935,13 @@ const BUTTONS = [
             CalculatorButton,
             {
               variant: d === "=" ? "action" : d === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(d) ? "operator" : "default",
-              onClick: () => l(d),
+              onClick: () => u(d),
               disabled: r,
               "aria-label": d,
               children: d
             },
             d
-          )) }, f)) })
+          )) }, a)) })
         ]
       }
     );
@@ -1604,25 +1990,25 @@ const cardVariants = cva(
     size: e = "md",
     shape: t = "rounded",
     avatar: r,
-    title: s,
-    subtitle: i,
+    title: i,
+    subtitle: s,
     badge: o,
     supplementaryInfo: n,
-    bordered: a = !1,
-    className: l,
-    ...u
-  }, c) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    bordered: l = !1,
+    className: u,
+    ...c
+  }, f) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "button",
     {
-      ref: c,
-      className: cn(cardVariants({ size: e, shape: t, bordered: a }), l),
-      ...u,
+      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: [
         r && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: r }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
-            s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h3", fontSize: "base", fontWeight: "semibold", children: s }),
-            i && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: i })
+            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 })
           ] }),
           (o || n) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
             o,
@@ -1677,29 +2063,48 @@ const cardVariants = cva(
   function e({
     className: t,
     variant: r = "neutral-outline",
-    size: s = "md",
-    disabled: i = !1,
+    size: i = "md",
+    disabled: s = !1,
     children: o,
     ...n
-  }, a) {
+  }, l) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
-        ref: a,
+        ref: l,
         type: "button",
-        className: cn(filterChipVariants({ variant: r, size: s }), t),
-        disabled: i,
-        "aria-disabled": i,
+        className: cn(filterChipVariants({ variant: r, size: i }), t),
+        disabled: s,
+        "aria-disabled": s,
         "aria-label": `${o}, removable`,
-        inert: i ? !0 : void 0,
+        inert: s ? !0 : void 0,
         ...n,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0", children: o }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: XIcon, color: "inherit", size: s === "lg" ? "md" : "sm" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: XIcon, color: "inherit", size: i === "lg" ? "md" : "sm" })
         ]
       }
     );
   }
+), hrVariants = cva("h-px w-full bg-border border-0", {
+  variants: {
+    hasMargin: {
+      true: "mb-4",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    hasMargin: !1
+  }
+}), Hr = forwardRef(
+  ({ hasMargin: e = !1, className: t, ...r }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "hr",
+    {
+      ref: i,
+      className: cn(hrVariants({ hasMargin: e }), t),
+      ...r
+    }
+  )
 ), noResultsVariants = cva(
   "flex flex-col items-center justify-center text-center border border-border rounded-lg bg-background",
   {
@@ -1722,22 +2127,22 @@ 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: s, action: i, className: o, hasGrayBackground: n, ...a }, l) {
+  function e({ icon: t, title: r, subtitle: i, action: s, className: o, hasGrayBackground: n, ...l }, u) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "section",
       {
-        ref: l,
+        ref: u,
         className: cn(noResultsVariants({ hasGrayBackground: n }), o),
         role: "status",
         "aria-label": "No results found",
-        ...a,
+        ...l,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: noResultsHeaderVariants(), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: t, size: "lg", color: "ghost", "aria-hidden": "true" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h2", fontSize: "lg", children: r })
           ] }),
-          s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", align: "center", color: "gray", className: "mb-4", children: s }),
-          i && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "group", "aria-label": "Available actions", children: i })
+          i && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", align: "center", color: "gray", className: "mb-4", children: i }),
+          s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "group", "aria-label": "Available actions", children: s })
         ]
       }
     );
@@ -1812,20 +2217,20 @@ const getTableColumnClass = (e) => {
       return "col-span-2";
   }
 }, TableHeader = forwardRef(
-  ({ children: e, className: t, ...r }, s) => {
-    const { columns: i } = useTableContext();
+  ({ children: e, className: t, ...r }, i) => {
+    const { columns: s } = useTableContext();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         role: "rowgroup",
         className: cn("bg-neutral-soft", t),
         ...r,
-        ref: s,
+        ref: i,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
             role: "row",
-            className: cn("grid gap-4", getTableColumnClass(i)),
+            className: cn("grid gap-4", getTableColumnClass(s)),
             children: e
           }
         )
@@ -1833,22 +2238,22 @@ const getTableColumnClass = (e) => {
     );
   }
 ), TableBody = forwardRef(
-  ({ children: e, className: t, ...r }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "rowgroup", ref: s, className: cn(t), ...r, children: e })
+  ({ children: e, className: t, ...r }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "rowgroup", ref: i, className: cn(t), ...r, children: e })
 ), TableFooter = forwardRef(
-  ({ children: e, className: t, ...r }, s) => {
-    const { columns: i } = useTableContext();
+  ({ children: e, className: t, ...r }, i) => {
+    const { columns: s } = useTableContext();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         role: "rowgroup",
         className: cn("bg-neutral-soft", t),
         ...r,
-        ref: s,
+        ref: i,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
             role: "row",
-            className: cn("grid gap-4", getTableColumnClass(i)),
+            className: cn("grid gap-4", getTableColumnClass(s)),
             children: e
           }
         )
@@ -1856,43 +2261,43 @@ const getTableColumnClass = (e) => {
     );
   }
 ), TableRow = forwardRef(
-  ({ children: e, className: t, ...r }, s) => {
-    const { columns: i } = useTableContext();
+  ({ children: e, className: t, ...r }, i) => {
+    const { columns: s } = useTableContext();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         role: "row",
         className: cn(
           "grid gap-4",
-          getTableColumnClass(i),
+          getTableColumnClass(s),
           "border-b border-border last:border-0",
           t
         ),
-        ref: s,
+        ref: i,
         ...r,
         children: e
       }
     );
   }
 ), TableColumn = forwardRef(
-  ({ as: e = "td", span: t, align: r = "left", children: s, className: i, ...o }, n) => {
-    const a = e === "th" ? "columnheader" : "cell";
-    let l = "text-left";
-    return r === "center" ? l = "text-center" : r === "right" && (l = "text-right"), /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ({ as: e = "td", span: t, align: r = "left", children: i, className: s, ...o }, n) => {
+    const l = 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: a,
+        role: l,
         className: cn(
           "px-4 py-2",
           "[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border",
           getRowSpanClass(t),
-          l,
+          u,
           "truncate overflow-hidden whitespace-nowrap",
-          i
+          s
         ),
         ...o,
-        children: s
+        children: i
       }
     );
   }
@@ -1923,10 +2328,10 @@ const getTableColumnClass = (e) => {
     }
   )
 ), TableRoot = forwardRef(
-  ({ children: e, className: t, columns: r = 12, ...s }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableProvider, { value: { columns: r }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ({ children: e, className: t, columns: r = 12, ...i }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableProvider, { value: { columns: r }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      ref: i,
+      ref: s,
       role: "table",
       className: cn(
         // Versaur design system: border, background, shadow, rounded, spacing
@@ -1936,7 +2341,7 @@ const getTableColumnClass = (e) => {
         "transition-colors",
         t
       ),
-      ...s,
+      ...i,
       children: e
     }
   ) })
@@ -1983,36 +2388,36 @@ const getTableColumnClass = (e) => {
     }
   }
 ), Tile = forwardRef(
-  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...i }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: i, ...s }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       ref: o,
-      className: cn(tileVariants({ variant: e, size: t, shape: r }), s),
-      ...i
+      className: cn(tileVariants({ variant: e, size: t, shape: r }), i),
+      ...s
     }
   )
 );
 function useImage({ src: e }) {
-  const [t, r] = useState(!1), [s, i] = useState(!1), o = useRef(!1), n = () => {
+  const [t, r] = useState(!1), [i, s] = useState(!1), o = useRef(!1), n = () => {
     r(!0);
-  }, a = () => {
-    i(!0);
+  }, l = () => {
+    s(!0);
   };
   return useEffect(() => {
     if (!e) return;
-    const l = new Image();
-    return l.src = e, l.onload = () => {
+    const u = new Image();
+    return u.src = e, u.onload = () => {
       o.current || r(!0);
-    }, l.onerror = () => {
-      o.current || i(!0);
+    }, u.onerror = () => {
+      o.current || s(!0);
     }, () => {
       o.current = !0;
     };
   }, [e]), {
     loaded: t,
-    errored: s,
+    errored: i,
     handleLoad: n,
-    handleError: a
+    handleError: l
   };
 }
 const imageVariants = cva("block object-cover", {
@@ -2072,14 +2477,14 @@ function BaseImageSkeleton({
   className: e,
   shape: t,
   size: r,
-  height: s,
-  width: i
+  height: i,
+  width: s
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Skeleton,
     {
       className: cn(imageAtomVariants({ shape: t, size: r }), e),
-      style: { height: s, width: i }
+      style: { height: i, width: s }
     }
   );
 }
@@ -2087,16 +2492,16 @@ function BaseImageFallback({
   alt: e,
   width: t,
   height: r,
-  className: s,
-  style: i,
+  className: i,
+  style: s,
   shape: o,
   size: n
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: imageAtomVariants({ shape: o, size: n, className: s }),
-      style: { width: t, height: r, ...i },
+      className: imageAtomVariants({ shape: o, size: n, className: i }),
+      style: { width: t, height: r, ...s },
       "aria-label": e,
       role: "img",
       children: [
@@ -2118,33 +2523,33 @@ const BaseImage = forwardRef(
     src: e,
     alt: t,
     onLoad: r,
-    onError: s,
-    width: i,
+    onError: i,
+    width: s,
     height: o,
     loading: n = "lazy",
-    position: a = "cover",
-    size: l = "auto",
-    shape: u,
-    className: c,
-    ...f
+    position: l = "cover",
+    size: u = "auto",
+    shape: c,
+    className: f,
+    ...a
   }, d) => {
-    const { loaded: b, errored: p, handleLoad: h, handleError: y } = useImage({
+    const { loaded: b, errored: v, handleLoad: j, handleError: w } = useImage({
       src: e
-    }), v = typeof i == "number" ? i : Number(i), R = typeof o == "number" ? o : Number(o);
-    return !b && !p ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    }), R = typeof s == "number" ? s : Number(s), E = typeof o == "number" ? o : Number(o);
+    return !b && !v ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageSkeleton,
       {
-        shape: u,
-        width: v,
-        height: R
+        shape: c,
+        width: R,
+        height: E
       }
-    ) : p ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ) : v ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageFallback,
       {
-        shape: u,
+        shape: c,
         alt: t,
-        width: v,
-        height: R
+        width: R,
+        height: E
       }
     ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
@@ -2152,53 +2557,55 @@ const BaseImage = forwardRef(
         ref: d,
         src: e,
         alt: t,
-        width: v,
-        height: R,
+        width: R,
+        height: E,
         loading: n,
         className: cn(
           imageVariants({
-            position: a,
-            size: l,
-            shape: u
+            position: l,
+            size: u,
+            shape: c
           }),
-          c
+          f
         ),
-        onLoad: (j) => {
-          h(), r?.(j);
+        onLoad: (C) => {
+          j(), r?.(C);
         },
-        onError: (j) => {
-          y(), s?.(j);
+        onError: (C) => {
+          w(), i?.(C);
         },
-        ...f
+        ...a
       }
     );
   }
 ), ImageCircle = forwardRef((e, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(BaseImage, { ref: t, ...e, shape: "circle" })), ImageSquare = forwardRef((e, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(BaseImage, { ref: t, ...e, shape: "square" })), ImageRectangle = forwardRef((e, t) => /* @__PURE__ */ jsxRuntimeExports.jsx(BaseImage, { ref: t, ...e, shape: "rectangle" }));
 export {
-  Alert as A,
+  Accordion as A,
   Badge as B,
   Calculator as C,
   FilterChip as F,
+  Heading as H,
   Icon as I,
   Menu as M,
   NoResults as N,
   OverlayPortal as O,
   Table as T,
-  Anchor as a,
-  Attribute as b,
-  AttributeList as c,
-  Avatar as d,
-  Brand as e,
-  Button as f,
-  ButtonMenuIcon as g,
-  ButtonFloat as h,
-  ButtonIcon as i,
-  Card as j,
-  Text as k,
-  Tile as l,
-  ImageCircle as m,
-  ImageSquare as n,
-  ImageRectangle as o,
-  BaseImage as p,
-  useEscapeClose as u
+  Alert as a,
+  Anchor as b,
+  Attribute as c,
+  AttributeList as d,
+  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
 };