@dimasbaguspm/versaur 0.0.44 → 0.0.45

package/dist/js/{image-rectangle-DjuCYHbk.js → image-rectangle-BijhERaV.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, CheckIcon, EllipsisVerticalIcon, X, XIcon, ImageOff } from "lucide-react";
+import { ChevronDown, ChevronRight, 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,12 +146,12 @@ const AccordionContext = createContext(
     isCapitalize: i = !1,
     hasMargin: s = !1,
     align: n = "left",
-    italic: a = !1,
+    italic: o = !1,
     clamp: l = "none",
     ellipsis: u = !1,
     className: c,
     children: f,
-    ...o
+    ...a
   }, d) => {
     const h = `h${e}`;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -165,14 +165,14 @@ const AccordionContext = createContext(
             isCapitalize: i,
             hasMargin: s,
             align: n,
-            italic: a,
+            italic: o,
             clamp: l,
             ellipsis: u,
             level: e
           }),
           c
         ),
-        ...o,
+        ...a,
         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, ...n }, a) {
+}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: i = "md", className: s, ...n }, o) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     t,
     {
-      ref: a,
+      ref: o,
       className: iconVariants({ color: r, size: i, className: s }),
       ...n
     }
@@ -261,12 +261,12 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     isDefaultOpen: i = !1,
     disabled: s = !1,
     hasMargin: n,
-    className: a,
+    className: o,
     children: l,
     ...u
   }, c) {
-    const [f, o] = useState(i), d = () => {
-      s || o((m) => !m);
+    const [f, a] = useState(i), d = () => {
+      s || a((x) => !x);
     }, h = {
       isOpen: f,
       toggle: d,
@@ -278,7 +278,7 @@ const iconVariants = cva("inline-flex items-center justify-center", {
         ref: c,
         className: cn(
           accordionVariants({ disabled: s }),
-          a,
+          o,
           n && "mb-4"
         ),
         ...u,
@@ -318,6 +318,256 @@ const iconVariants = cva("inline-flex items-center justify-center", {
   Title: AccordionTitle,
   Content: AccordionContent,
   Icon: AccordionIcon
+}), actionCardVariants = cva(
+  "group flex items-center justify-between transition-all duration-200 w-full",
+  {
+    variants: {
+      size: {
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-5"
+      },
+      as: {
+        button: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light hover:bg-gray-50 cursor-pointer",
+        div: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      as: "button"
+    }
+  }
+), iconContainerVariants = cva(
+  "bg-gradient-to-br from-gray-100 to-gray-200 rounded-xl flex items-center justify-center group-hover:from-primary-soft group-hover:to-primary-light duration-200",
+  {
+    variants: {
+      size: {
+        sm: "w-8 h-8",
+        md: "w-10 h-10",
+        lg: "w-12 h-12"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), arrowVariants = cva(
+  "inline-flex items-center justify-center text-ghost-bold transition-colors duration-200",
+  {
+    variants: {
+      size: {
+        sm: "w-3 h-3",
+        md: "w-4 h-4",
+        lg: "w-5 h-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), textVariants = 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: ""
+    },
+    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: ""
+    },
+    as: {
+      h1: "font-bold text-4xl leading-loose",
+      h2: "font-semibold text-3xl leading-relaxed",
+      h3: "font-medium text-2xl leading-relaxed",
+      h4: "font-bold text-xl leading-normal",
+      h5: "font-semibold text-lg leading-normal",
+      h6: "font-medium text-base leading-normal",
+      p: "font-normal text-base leading-normal",
+      span: "font-normal text-base leading-normal",
+      label: "font-normal text-xs leading-normal"
+    }
+  },
+  defaultVariants: {
+    color: "neutral",
+    hasUnderline: !1,
+    isCapitalize: !1,
+    align: "left",
+    italic: !1,
+    clamp: "none",
+    ellipsis: !1,
+    as: "span"
+  }
+}), Text = forwardRef(
+  ({
+    as: e = "span",
+    color: t = "ghost",
+    hasUnderline: r = !1,
+    isCapitalize: i = !1,
+    align: s = "left",
+    italic: n = !1,
+    clamp: o = "none",
+    ellipsis: l = !1,
+    fontSize: u,
+    fontWeight: c,
+    className: f,
+    children: a,
+    ...d
+  }, h) => {
+    const y = [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "p",
+      "span",
+      "label"
+    ].includes(e) ? e : "span", w = u ? `text-${u}` : "", j = c ? `font-${c}` : "";
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      e,
+      {
+        ref: h,
+        className: cn(
+          textVariants({
+            color: t,
+            hasUnderline: r,
+            isCapitalize: i,
+            align: s,
+            italic: n,
+            clamp: o,
+            ellipsis: l,
+            // @ts-expect-error - `as` is not a valid variant
+            as: y
+          }),
+          w,
+          j,
+          f
+        ),
+        ...d,
+        children: a
+      }
+    );
+  }
+), ActionCardGroup = forwardRef(
+  ({ children: e, className: t }, r) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: r,
+      className: cn(
+        "bg-background border border-border rounded-lg overflow-hidden",
+        "divide-y divide-border",
+        t
+      ),
+      role: "group",
+      children: e
+    }
+  )
+), ActionCardRoot = forwardRef(
+  ({
+    size: e = "md",
+    icon: t,
+    title: r,
+    subtitle: i,
+    badge: s,
+    showArrow: n = !0,
+    as: o = "button",
+    className: l,
+    ...u
+  }, c) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    o,
+    {
+      ref: c,
+      className: cn(actionCardVariants({ size: e, as: o }), l),
+      ...u,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 flex-1", children: [
+          t && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(iconContainerVariants({ size: e })), children: t }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 mb-1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Text,
+                {
+                  as: "span",
+                  fontSize: e === "sm" ? "sm" : "base",
+                  fontWeight: "semibold",
+                  color: "ghost",
+                  className: "text-left leading-normal",
+                  children: r
+                }
+              ),
+              s && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: "flex flex-wrap items-center flex-row justify-start gap-3",
+                  role: "group",
+                  children: s
+                }
+              )
+            ] }),
+            i && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Text,
+              {
+                as: "p",
+                fontSize: "sm",
+                color: "gray",
+                className: "text-left leading-normal",
+                children: i
+              }
+            )
+          ] })
+        ] }),
+        n && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Icon,
+          {
+            as: ChevronRight,
+            className: cn(arrowVariants({ size: e })),
+            color: "ghost",
+            "aria-hidden": "true"
+          }
+        ) })
+      ]
+    }
+  )
+), ActionCard = Object.assign(ActionCardRoot, {
+  Group: ActionCardGroup
 }), alertVariants = cva(
   "relative flex items-center gap-2 rounded-md p-2 text-sm transition-all duration-200",
   {
@@ -463,10 +713,10 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     className: i,
     children: s,
     ...n
-  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  }, o) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      ref: a,
+      ref: o,
       role: "alert",
       className: cn(alertVariants({ variant: e, color: t }), i),
       ...n,
@@ -543,7 +793,7 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     fontSize: i = "base",
     fontWeight: s = "medium",
     quiet: n = !1,
-    ...a
+    ...o
   }, l) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "a",
     {
@@ -552,137 +802,16 @@ const iconVariants = cva("inline-flex items-center justify-center", {
         anchorVariants({ color: r, fontSize: i, fontWeight: s, quiet: n }),
         t
       ),
-      ...a,
+      ...o,
       children: e
     }
   )
-), textVariants = 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: ""
-    },
-    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: ""
-    },
-    as: {
-      h1: "font-bold text-4xl leading-loose",
-      h2: "font-semibold text-3xl leading-relaxed",
-      h3: "font-medium text-2xl leading-relaxed",
-      h4: "font-bold text-xl leading-normal",
-      h5: "font-semibold text-lg leading-normal",
-      h6: "font-medium text-base leading-normal",
-      p: "font-normal text-base leading-normal",
-      span: "font-normal text-base leading-normal",
-      label: "font-normal text-xs leading-normal"
-    }
-  },
-  defaultVariants: {
-    color: "neutral",
-    hasUnderline: !1,
-    isCapitalize: !1,
-    align: "left",
-    italic: !1,
-    clamp: "none",
-    ellipsis: !1,
-    as: "span"
-  }
-}), Text = forwardRef(
-  ({
-    as: e = "span",
-    color: t = "ghost",
-    hasUnderline: r = !1,
-    isCapitalize: i = !1,
-    align: s = "left",
-    italic: n = !1,
-    clamp: a = "none",
-    ellipsis: l = !1,
-    fontSize: u,
-    fontWeight: c,
-    className: f,
-    children: o,
-    ...d
-  }, h) => {
-    const y = [
-      "h1",
-      "h2",
-      "h3",
-      "h4",
-      "h5",
-      "h6",
-      "p",
-      "span",
-      "label"
-    ].includes(e) ? e : "span", w = u ? `text-${u}` : "", j = c ? `font-${c}` : "";
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      e,
-      {
-        ref: h,
-        className: cn(
-          textVariants({
-            color: t,
-            hasUnderline: r,
-            isCapitalize: i,
-            align: s,
-            italic: n,
-            clamp: a,
-            ellipsis: l,
-            // @ts-expect-error - `as` is not a valid variant
-            as: y
-          }),
-          w,
-          j,
-          f
-        ),
-        ...d,
-        children: o
-      }
-    );
-  }
 ), Attribute = forwardRef(
-  function({ title: t, children: r, className: i, hasMargin: s, ...n }, a) {
+  function({ title: t, children: r, className: i, hasMargin: s, ...n }, o) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        ref: a,
+        ref: o,
         className: cn("space-y-1", i, s && "mb-4"),
         ...n,
         children: [
@@ -763,17 +892,17 @@ function getGridCols(e = 4) {
       return "grid-cols-4";
   }
 }
-const AttributeListItem = forwardRef(function({ children: t, className: r, span: i = 1, title: s, ...n }, a) {
+const AttributeListItem = forwardRef(function({ children: t, className: r, span: i = 1, title: s, ...n }, o) {
   const l = getColSpan(i);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: a, className: cn(l, r), ...n, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Attribute, { title: s, children: t }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: o, className: cn(l, r), ...n, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Attribute, { title: s, children: t }) });
 }), AttributeListRoot = forwardRef(
   function({ children: t, className: r, columns: i = 4, ...s }, n) {
-    const a = getGridCols(i);
+    const o = getGridCols(i);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "ul",
       {
         ref: n,
-        className: cn("grid gap-4", a, r),
+        className: cn("grid gap-4", o, r),
         ...s,
         children: t
       }
@@ -831,10 +960,10 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     className: i,
     children: s,
     ...n
-  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      ref: a,
+      ref: o,
       className: cn(avatarVariants({ variant: e, size: t, shape: r }), i),
       ...n,
       children: s
@@ -842,7 +971,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
   )
 ), AvatarImage = forwardRef(
   ({ src: e, alt: t, className: r, onError: i, ...s }, n) => {
-    const [a, l] = useState(!1);
+    const [o, l] = useState(!1);
     useEffect(() => {
       l(!1);
     }, [e]);
@@ -852,7 +981,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
       },
       [i]
     );
-    return a ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return o ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
         ref: n,
@@ -1064,7 +1193,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     size: i = "md",
     iconLeft: s,
     iconRight: n,
-    className: a,
+    className: o,
     children: l,
     ...u
   }, c) => {
@@ -1081,7 +1210,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
             size: i,
             iconOnly: d
           }),
-          a
+          o
         ),
         ...u,
         children: d ? (
@@ -1098,7 +1227,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
       }
     );
   }
-), SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), SvgSpenicleRounded = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), SvgSpenicleCircle = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), SvgHubSquare = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Hub (Square)"), /* @__PURE__ */ React.createElement("rect", { x: 0, y: 0, width: 32, height: 32, rx: 0, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), SvgHubRounded = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Hub (Rounded)"), /* @__PURE__ */ React.createElement("rect", { x: 2, y: 2, width: 28, height: 28, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), SvgHubCircle = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Hub (Circle)"), /* @__PURE__ */ React.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), brandSizeClass = cva("", {
+), SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), SvgSpenicleRounded = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), SvgSpenicleCircle = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), SvgHubSquare = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Hub (Square)"), /* @__PURE__ */ React.createElement("rect", { x: 0, y: 0, width: 32, height: 32, rx: 0, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), SvgHubRounded = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Hub (Rounded)"), /* @__PURE__ */ React.createElement("rect", { x: 0, y: 0, width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), SvgHubCircle = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Hub (Circle)"), /* @__PURE__ */ React.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M20.341 6.484A10 10 0 0 1 10.266 21.85", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("path", { d: "M3.659 17.516A10 10 0 0 1 13.74 2.152", stroke: "white", strokeWidth: 2, fill: "none" }), /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 12, r: 3, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 19, cy: 5, r: 2, fill: "white" }), /* @__PURE__ */ React.createElement("circle", { cx: 5, cy: 19, r: 2, fill: "white" }))), SvgNotunicSquare = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Notunic"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 6h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 10h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 14h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 18h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z", fill: "white" }))), SvgNotunicRounded = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Notunic"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 6h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 10h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 14h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 18h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z", fill: "white" }))), SvgNotunicCircle = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Notunic"), /* @__PURE__ */ React.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 6h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 10h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 14h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M2 18h4", fill: "none", stroke: "white", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { d: "M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z", fill: "white" }))), brandSizeClass = cva("", {
   variants: {
     size: {
       xs: "h-6 w-6",
@@ -1123,6 +1252,11 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
         square: SvgHubSquare,
         rounded: SvgHubRounded,
         circle: SvgHubCircle
+      },
+      notunic: {
+        square: SvgNotunicSquare,
+        rounded: SvgNotunicRounded,
+        circle: SvgNotunicCircle
       }
     }, l = (n[r] || n.spenicle)[e || "square"] || SvgSpenicleSquare;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1210,7 +1344,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     size: i = "md",
     disabled: s = !1,
     type: n = "button",
-    children: a,
+    children: o,
     ...l
   }, u) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1223,7 +1357,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
         "aria-disabled": s,
         inert: s ? !0 : void 0,
         ...l,
-        children: a
+        children: o
       }
     );
   }
@@ -1285,100 +1419,100 @@ function isTriggerVisible(e, t) {
   return !0;
 }
 function useMenuPosition(e, t, r, i = "bottom-start", s) {
-  const [n, a] = useState({ isReady: !1 }), l = useCallback(() => {
+  const [n, o] = useState({ isReady: !1 }), l = useCallback(() => {
     if (!e || !t.current) {
-      a({ isReady: !1 });
+      o({ isReady: !1 });
       return;
     }
     if (!r.current) {
       const v = setTimeout(() => {
-        a({ isReady: !1 });
+        o({ isReady: !1 });
       }, 0);
       return () => clearTimeout(v);
     }
     const u = t.current, c = r.current, f = getScrollableAncestors(u);
     if (!isTriggerVisible(u, f)) {
-      a({ isReady: !1 });
+      o({ isReady: !1 });
       return;
     }
-    const o = 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(), j = c.style.visibility, E = c.style.position, C = c.style.opacity;
+    const a = u.getBoundingClientRect(), d = window.innerWidth, h = window.innerHeight;
+    let x = null;
+    s && ("getBoundingClientRect" in s ? x = s : "current" in s && (x = s.current));
+    const y = x || document.documentElement, w = y === document.documentElement ? { top: 0, bottom: h, left: 0, right: d } : y.getBoundingClientRect(), j = 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();
+    const m = c.getBoundingClientRect();
     c.style.visibility = j, c.style.position = E, c.style.opacity = C;
-    const N = w.bottom - o.bottom - 8, I = o.top - w.top - 8, V = w.right - o.left - 8, k = o.right - w.left - 8;
+    const k = w.bottom - a.bottom - 8, N = a.top - w.top - 8, I = w.right - a.left - 8, V = a.right - w.left - 8;
     let p = i;
     if (i === "auto") {
       const b = [
         {
           name: "bottom-start",
-          fits: N >= x.height && V >= x.width,
-          spaceUsed: N,
+          fits: k >= m.height && I >= m.width,
+          spaceUsed: k,
           priority: 1
           // Prefer bottom-start as default
         },
         {
           name: "bottom-end",
-          fits: N >= x.height && k >= x.width,
-          spaceUsed: N,
+          fits: k >= m.height && V >= m.width,
+          spaceUsed: k,
           priority: 2
         },
         {
           name: "top-start",
-          fits: I >= x.height && V >= x.width,
-          spaceUsed: I,
+          fits: N >= m.height && I >= m.width,
+          spaceUsed: N,
           priority: 3
         },
         {
           name: "top-end",
-          fits: I >= x.height && k >= x.width,
-          spaceUsed: I,
+          fits: N >= m.height && V >= m.width,
+          spaceUsed: N,
           priority: 4
         }
       ].filter((R) => R.fits);
       b.length > 0 ? p = b.sort(
         (R, S) => R.priority - S.priority
-      )[0].name : N >= I ? p = V >= k ? "bottom-start" : "bottom-end" : p = V >= k ? "top-start" : "top-end";
+      )[0].name : k >= N ? p = I >= V ? "bottom-start" : "bottom-end" : p = I >= V ? "top-start" : "top-end";
     }
     const g = {};
     if (s)
       switch (g.position = "fixed", p) {
         case "bottom-start":
-          g.top = o.bottom + 4, g.left = o.left;
+          g.top = a.bottom + 4, g.left = a.left;
           break;
         case "bottom-end":
-          g.top = o.bottom + 4, g.right = window.innerWidth - o.right;
+          g.top = a.bottom + 4, g.right = window.innerWidth - a.right;
           break;
         case "top-start":
-          g.bottom = window.innerHeight - o.top + 4, g.left = o.left;
+          g.bottom = window.innerHeight - a.top + 4, g.left = a.left;
           break;
         case "top-end":
-          g.bottom = window.innerHeight - o.top + 4, g.right = window.innerWidth - o.right;
+          g.bottom = window.innerHeight - a.top + 4, g.right = window.innerWidth - a.right;
           break;
       }
     else
       switch (g.position = "absolute", p) {
         case "bottom-start":
-          g.top = o.height + 4, g.left = 0;
+          g.top = a.height + 4, g.left = 0;
           break;
         case "bottom-end":
-          g.top = o.height + 4, g.right = 0;
+          g.top = a.height + 4, g.right = 0;
           break;
         case "top-start":
-          g.bottom = o.height + 4, g.left = 0;
+          g.bottom = a.height + 4, g.left = 0;
           break;
         case "top-end":
-          g.bottom = o.height + 4, g.right = 0;
+          g.bottom = a.height + 4, g.right = 0;
           break;
       }
     if (s) {
       const v = {
-        top: p.startsWith("bottom") ? o.bottom + 4 : o.top - x.height - 4,
-        left: p.endsWith("start") ? o.left : o.right - x.width,
-        width: x.width,
-        height: x.height
+        top: p.startsWith("bottom") ? a.bottom + 4 : a.top - m.height - 4,
+        left: p.endsWith("start") ? a.left : a.right - m.width,
+        width: m.width,
+        height: m.height
       };
       if (v.left < w.left + 8) {
         const b = w.left + 8 - v.left;
@@ -1390,27 +1524,27 @@ function useMenuPosition(e, t, r, i = "bottom-start", s) {
       if (p.startsWith("bottom")) {
         const b = Math.max(
           50,
-          w.bottom - o.bottom - 16
+          w.bottom - a.bottom - 16
         );
-        x.height > b && (g.maxHeight = b);
+        m.height > b && (g.maxHeight = b);
       } else {
         const b = Math.max(
           50,
-          o.top - w.top - 16
+          a.top - w.top - 16
         );
-        x.height > b && (g.maxHeight = b);
+        m.height > b && (g.maxHeight = b);
       }
     } else {
       const v = {
-        top: p.startsWith("bottom") ? o.height + 4 : -x.height - 4,
-        left: p.endsWith("start") ? 0 : -x.width,
-        width: x.width,
-        height: x.height
+        top: p.startsWith("bottom") ? a.height + 4 : -m.height - 4,
+        left: p.endsWith("start") ? 0 : -m.width,
+        width: m.width,
+        height: m.height
       }, b = {
-        left: o.left,
-        right: o.right,
-        top: o.top,
-        bottom: o.bottom
+        left: a.left,
+        right: a.right,
+        top: a.top,
+        bottom: a.bottom
       };
       if (b.left + v.left < 8) {
         const R = 8 - (b.left + v.left);
@@ -1420,7 +1554,7 @@ function useMenuPosition(e, t, r, i = "bottom-start", s) {
         p.endsWith("start") ? g.left = (g.left || 0) - R : g.right = (g.right || 0) + R;
       }
     }
-    g.isReady = !0, a(g);
+    g.isReady = !0, o(g);
   }, [e, i, t, r, s]);
   return useEffect(() => {
     l();
@@ -1428,16 +1562,16 @@ function useMenuPosition(e, t, r, i = "bottom-start", s) {
     if (!e || !t.current) return;
     const u = t.current, c = getScrollableAncestors(u);
     let f = !1;
-    const o = () => {
+    const a = () => {
       f || (requestAnimationFrame(() => {
         l(), f = !1;
       }), f = !0);
     };
     return c.forEach((d) => {
-      d === document.documentElement ? (window.addEventListener("scroll", o, { passive: !0 }), window.addEventListener("resize", o, { passive: !0 })) : d.addEventListener("scroll", o, { passive: !0 });
+      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", o), window.removeEventListener("resize", o)) : d.removeEventListener("scroll", o);
+        d === document.documentElement ? (window.removeEventListener("scroll", a), window.removeEventListener("resize", a)) : d.removeEventListener("scroll", a);
       });
     };
   }, [e, l, t]), n;
@@ -1451,8 +1585,8 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
   ({ 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, active: i, ...s }, n) => {
-    const { preserve: a, onClose: l } = useMenuProvider(), u = (c) => {
-      r?.(c), a || l();
+    const { preserve: o, onClose: l } = useMenuProvider(), u = (c) => {
+      r?.(c), o || l();
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: n, ...s, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Button,
@@ -1483,23 +1617,23 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
   content: i,
   children: s,
   placement: n = "auto",
-  container: a,
+  container: o,
   preserve: l
 }) => {
   const u = useRef(null), c = useRef(null), f = useId();
   useMenuOutsideClick(e, c, u, t);
-  const o = useMenuPosition(
+  const a = useMenuPosition(
     e,
     u,
     c,
     n,
-    a || null
+    o || null
   ), d = {
-    ...o,
-    position: o.position || "absolute",
-    overflowY: o.maxHeight ? "auto" : void 0,
-    overflowX: o.maxWidth ? "auto" : void 0
-  }, h = e && o.isReady, m = /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ...a,
+    position: a.position || "absolute",
+    overflowY: a.maxHeight ? "auto" : void 0,
+    overflowX: a.maxWidth ? "auto" : void 0
+  }, h = e && a.isReady, x = /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       id: f,
@@ -1524,7 +1658,7 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
           "aria-controls": f
         }),
         e && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          !o.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          !a.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
               ref: c,
@@ -1540,7 +1674,7 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
               children: i
             }
           ),
-          o.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: o.position === "fixed" ? /* @__PURE__ */ jsxRuntimeExports.jsx(OverlayPortal, { children: m }) : m })
+          a.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: a.position === "fixed" ? /* @__PURE__ */ jsxRuntimeExports.jsx(OverlayPortal, { children: x }) : x })
         ] })
       ] })
     }
@@ -1555,18 +1689,18 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
       onOpenChange: i,
       onClick: s,
       placement: n,
-      container: a,
+      container: o,
       preserve: l,
       label: u,
       ...c
-    } = e ?? {}, [f, o] = useState(!1);
+    } = e ?? {}, [f, a] = useState(!1);
     useEffect(() => {
       i?.(f);
     }, [f, i]);
     const d = () => {
-      o(!1);
-    }, h = (m) => {
-      o((y) => !y), s?.(m);
+      a(!1);
+    }, h = (x) => {
+      a((y) => !y), s?.(x);
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Menu,
@@ -1574,7 +1708,7 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
         isOpen: f,
         onOutsideClick: d,
         placement: n,
-        container: a,
+        container: o,
         preserve: l,
         content: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Content, { children: r }),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { ref: t, onClick: h, ...c, children: u })
@@ -1679,7 +1813,7 @@ const buttonIconVariants = cva(
     size: i = "md",
     shape: s = "rounded",
     disabled: n = !1,
-    as: a,
+    as: o,
     "aria-label": l,
     ...u
   }, c) {
@@ -1704,7 +1838,7 @@ const buttonIconVariants = cva(
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Icon,
           {
-            as: a,
+            as: o,
             size: "sm",
             color: getIconColorFromVariant(r)
           }
@@ -1719,25 +1853,25 @@ const buttonIconVariants = cva(
       children: i,
       onOpenChange: s,
       onClick: n,
-      placement: a,
+      placement: o,
       container: l,
       preserve: u,
       ...c
-    } = e ?? {}, [f, o] = useState(!1);
+    } = e ?? {}, [f, a] = useState(!1);
     useEffect(() => {
       s?.(f);
     }, [f, s]);
     const d = () => {
-      o(!1);
-    }, h = (m) => {
-      o((y) => !y), n?.(m);
+      a(!1);
+    }, h = (x) => {
+      a((y) => !y), n?.(x);
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Menu,
       {
         isOpen: f,
         onOutsideClick: d,
-        placement: a,
+        placement: o,
         container: l,
         preserve: u,
         content: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Content, { children: i }),
@@ -1815,12 +1949,12 @@ const buttonIconVariants = cva(
   }
 );
 function useFloatingPosition(e, t = "1rem") {
-  const r = useRef(null), [i, s] = useState({}), [n, a] = useState("fixed bottom-4 right-4"), l = useCallback(() => {
+  const r = useRef(null), [i, s] = useState({}), [n, o] = useState("fixed bottom-4 right-4"), l = useCallback(() => {
     const c = r.current;
     if (!c) return;
-    const o = c.getBoundingClientRect().height > window.innerHeight;
+    const a = c.getBoundingClientRect().height > window.innerHeight;
     let d = {}, h = "";
-    o ? (d = {
+    a ? (d = {
       position: "fixed",
       bottom: t,
       zIndex: 50,
@@ -1829,7 +1963,7 @@ function useFloatingPosition(e, t = "1rem") {
       position: "fixed",
       bottom: t,
       zIndex: 50
-    }, h = `fixed bottom-4 ${e}-4`), s(d), a(h);
+    }, h = `fixed bottom-4 ${e}-4`), s(d), o(h);
   }, [e, t]);
   return useEffect(() => {
     l();
@@ -1853,27 +1987,27 @@ const ButtonFloat = forwardRef(
     size: i = "md",
     side: s = "right",
     offset: n = "1rem",
-    ...a
+    ...o
   }, l) {
     const [u, c, f] = useFloatingPosition(
       s,
       n
-    ), [o, d] = useState(!1);
+    ), [a, d] = useState(!1);
     return useEffect(() => {
       d(!0);
     }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: u, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
         ref: l,
-        type: a.type || "button",
+        type: o.type || "button",
         className: cn(
           buttonFloatVariants({ variant: r, size: i }),
           f,
-          o && "animate-fab-in",
+          a && "animate-fab-in",
           t
         ),
         style: c,
-        ...a
+        ...o
       }
     ) });
   }
@@ -1995,7 +2129,7 @@ const BUTTONS = [
     className: i,
     "aria-label": s
   }, n) => {
-    const { input: a, inputRef: l, handleButton: u, handleInput: c } = useCalculator({
+    const { input: o, inputRef: l, handleButton: u, handleInput: c } = useCalculator({
       initialValue: e,
       disabled: r,
       onChange: t
@@ -2013,14 +2147,14 @@ const BUTTONS = [
             {
               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: a,
+              value: o,
               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, o) => /* @__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, a) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: f.map((d) => d === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             ButtonIcon,
             {
               as: X,
@@ -2041,7 +2175,7 @@ const BUTTONS = [
               children: d
             },
             d
-          )) }, o)) })
+          )) }, a)) })
         ]
       }
     );
@@ -2106,15 +2240,15 @@ const cardVariants = cva(
     title: i,
     subtitle: s,
     badge: n,
-    supplementaryInfo: a,
+    supplementaryInfo: o,
     bordered: l = !1,
     as: u = "button",
     className: c,
     ...f
-  }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     u,
     {
-      ref: o,
+      ref: a,
       className: cn(
         cardVariants({ size: e, shape: t, bordered: l, as: u }),
         c,
@@ -2139,7 +2273,7 @@ const cardVariants = cva(
           ] }) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 @sm/card:flex-row @sm/card:justify-between @sm/card:items-center", children: [
             n && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "order-1 @sm/card:order-none overflow-hidden", children: n }),
-            a && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 order-2 @sm/card:order-none @sm/card:ml-auto", children: typeof a == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            o && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 order-2 @sm/card:order-none @sm/card:ml-auto", children: typeof o == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
               Text,
               {
                 as: "p",
@@ -2147,9 +2281,9 @@ const cardVariants = cva(
                 color: "gray",
                 className: "truncate",
                 align: "right",
-                children: a
+                children: o
               }
-            ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-hidden", children: a }) })
+            ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-hidden", children: o }) })
           ] })
         ] })
       ] })
@@ -2203,7 +2337,7 @@ const cardVariants = cva(
     size: i = "md",
     disabled: s = !1,
     children: n,
-    ...a
+    ...o
   }, l) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
@@ -2215,7 +2349,7 @@ const cardVariants = cva(
         "aria-disabled": s,
         "aria-label": `${n}, removable`,
         inert: s ? !0 : void 0,
-        ...a,
+        ...o,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0", children: n }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: XIcon, color: "inherit", size: i === "lg" ? "md" : "sm" })
@@ -2264,12 +2398,12 @@ 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: n, hasGrayBackground: a, ...l }, u) {
+  function e({ icon: t, title: r, subtitle: i, action: s, className: n, hasGrayBackground: o, ...l }, u) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "section",
       {
         ref: u,
-        className: cn(noResultsVariants({ hasGrayBackground: a }), n),
+        className: cn(noResultsVariants({ hasGrayBackground: o }), n),
         role: "status",
         "aria-label": "No results found",
         ...l,
@@ -2417,13 +2551,13 @@ const getTableColumnClass = (e) => {
     );
   }
 ), TableColumn = forwardRef(
-  ({ as: e = "td", span: t, align: r = "left", children: i, className: s, ...n }, a) => {
+  ({ as: e = "td", span: t, align: r = "left", children: i, className: s, ...n }, o) => {
     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: a,
+        ref: o,
         role: l,
         className: cn(
           "px-4 py-2",
@@ -2535,7 +2669,7 @@ const getTableColumnClass = (e) => {
   )
 );
 function useImage({ src: e }) {
-  const [t, r] = useState(!1), [i, s] = useState(!1), n = useRef(!1), a = () => {
+  const [t, r] = useState(!1), [i, s] = useState(!1), n = useRef(!1), o = () => {
     r(!0);
   }, l = () => {
     s(!0);
@@ -2553,7 +2687,7 @@ function useImage({ src: e }) {
   }, [e]), {
     loaded: t,
     errored: i,
-    handleLoad: a,
+    handleLoad: o,
     handleError: l
   };
 }
@@ -2632,12 +2766,12 @@ function BaseImageFallback({
   className: i,
   style: s,
   shape: n,
-  size: a
+  size: o
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: imageAtomVariants({ shape: n, size: a, className: i }),
+      className: imageAtomVariants({ shape: n, size: o, className: i }),
       style: { width: t, height: r, ...s },
       "aria-label": e,
       role: "img",
@@ -2663,24 +2797,24 @@ const BaseImage = forwardRef(
     onError: i,
     width: s,
     height: n,
-    loading: a = "lazy",
+    loading: o = "lazy",
     position: l = "cover",
     size: u = "auto",
     shape: c,
     className: f,
-    ...o
+    ...a
   }, d) => {
-    const { loaded: h, errored: m, handleLoad: y, handleError: w } = useImage({
+    const { loaded: h, errored: x, handleLoad: y, handleError: w } = useImage({
       src: e
     }), j = typeof s == "number" ? s : Number(s), E = typeof n == "number" ? n : Number(n);
-    return !h && !m ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return !h && !x ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageSkeleton,
       {
         shape: c,
         width: j,
         height: E
       }
-    ) : m ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ) : x ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageFallback,
       {
         shape: c,
@@ -2696,7 +2830,7 @@ const BaseImage = forwardRef(
         alt: t,
         width: j,
         height: E,
-        loading: a,
+        loading: o,
         className: cn(
           imageVariants({
             position: l,
@@ -2711,7 +2845,7 @@ const BaseImage = forwardRef(
         onError: (C) => {
           w(), i?.(C);
         },
-        ...o
+        ...a
       }
     );
   }
@@ -2727,23 +2861,24 @@ export {
   NoResults as N,
   OverlayPortal as O,
   Table as T,
-  Alert as a,
-  Anchor as b,
-  Attribute as c,
-  AttributeList as d,
-  Avatar as e,
-  Brand as f,
-  Button as g,
-  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
+  ActionCard as a,
+  Alert as b,
+  Anchor as c,
+  Attribute as d,
+  AttributeList as e,
+  Avatar as f,
+  Brand as g,
+  Button as h,
+  ButtonMenu as i,
+  ButtonMenuIcon as j,
+  ButtonFloat as k,
+  ButtonIcon as l,
+  Card as m,
+  Hr as n,
+  Text as o,
+  Tile as p,
+  ImageCircle as q,
+  ImageSquare as r,
+  ImageRectangle as s,
+  BaseImage as t
 };