@dimasbaguspm/versaur 0.0.42 → 0.0.44

package/dist/js/{bottom-sheet-DHMq1-Di.js → bottom-sheet-BSN0J8ji.js}

@@ -1,6 +1,6 @@
 import { c as f, j as r, a as l } from "./index-DOdDlCoL.js";
 import j, { useState as p, useEffect as x, createContext as V, useContext as B, forwardRef as u, useRef as z, useMemo as M } from "react";
-import { O as S, n as P, k as N, H as D } from "./image-rectangle-DPZAgdEa.js";
+import { O as S, n as P, k as N, H as D } from "./image-rectangle-DjuCYHbk.js";
 import { XIcon as R } from "lucide-react";
 import "./snackbar-DH8jCh2V.js";
 function F() {

package/dist/js/{bottom-sheet-input-IzuwB7Zy.js → bottom-sheet-input-C9Ht9cxQ.js}

@@ -1,9 +1,9 @@
 import { c as v, j as e, a as m } from "./index-DOdDlCoL.js";
 import x, { createContext as N, useContext as z, useId as F, forwardRef as j, useRef as B, useState as R, useEffect as U, useMemo as E } from "react";
-import { I as C } from "./image-rectangle-DPZAgdEa.js";
+import { I as C } from "./image-rectangle-DjuCYHbk.js";
 import { Calendar as X, SearchIcon as Y, Clock as Z, Banknote as ee, MailIcon as re, Check as P } from "lucide-react";
 import "./snackbar-DH8jCh2V.js";
-import { M as O, D as M, B as V } from "./bottom-sheet-DHMq1-Di.js";
+import { M as O, D as M, B as V } from "./bottom-sheet-BSN0J8ji.js";
 const te = v("space-y-2", {
   variants: {
     direction: {

package/dist/js/forms/index.js

@@ -1,4 +1,4 @@
-import { B as a, C as n, b as p, a as u, D as s, k as I, E as i, M as l, P as S, R as c, d as r, c as g, S as h, e as o, j as m, i as M, h as b, f as k, T as x, g as C } from "../bottom-sheet-input-IzuwB7Zy.js";
+import { B as a, C as n, b as p, a as u, D as s, k as I, E as i, M as l, P as S, R as c, d as r, c as g, S as h, e as o, j as m, i as M, h as b, f as k, T as x, g as C } from "../bottom-sheet-input-C9Ht9cxQ.js";
 export {
   a as BottomSheetInput,
   n as CheckboxInput,

package/dist/js/{image-rectangle-DPZAgdEa.js → image-rectangle-DjuCYHbk.js}

@@ -145,13 +145,13 @@ const AccordionContext = createContext(
     hasUnderline: r = !1,
     isCapitalize: i = !1,
     hasMargin: s = !1,
-    align: o = "left",
+    align: n = "left",
     italic: a = !1,
     clamp: l = "none",
     ellipsis: u = !1,
     className: c,
     children: f,
-    ...n
+    ...o
   }, d) => {
     const h = `h${e}`;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -164,7 +164,7 @@ const AccordionContext = createContext(
             hasUnderline: r,
             isCapitalize: i,
             hasMargin: s,
-            align: o,
+            align: n,
             italic: a,
             clamp: l,
             ellipsis: u,
@@ -172,7 +172,7 @@ const AccordionContext = createContext(
           }),
           c
         ),
-        ...n,
+        ...o,
         children: f
       }
     );
@@ -209,13 +209,13 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     size: "md",
     color: "primary"
   }
-}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: i = "md", className: s, ...o }, a) {
+}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: i = "md", className: s, ...n }, a) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     t,
     {
       ref: a,
       className: iconVariants({ color: r, size: i, className: s }),
-      ...o
+      ...n
     }
   );
 }), AccordionTitle = forwardRef(function({ className: t, children: r, ...i }, s) {
@@ -231,12 +231,12 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     }
   );
 }), AccordionContent = forwardRef(function({ className: t, children: r, ...i }, s) {
-  const { isOpen: o } = useAccordionContext();
+  const { isOpen: n } = useAccordionContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       ref: s,
-      className: cn(accordionContentVariants({ isOpen: o }), t),
+      className: cn(accordionContentVariants({ isOpen: n }), t),
       ...i,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: accordionContentInnerVariants(), children: r })
     }
@@ -260,13 +260,13 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     subtitle: r,
     isDefaultOpen: i = !1,
     disabled: s = !1,
-    hasMargin: o,
+    hasMargin: n,
     className: a,
     children: l,
     ...u
   }, c) {
-    const [f, n] = useState(i), d = () => {
-      s || n((m) => !m);
+    const [f, o] = useState(i), d = () => {
+      s || o((m) => !m);
     }, h = {
       isOpen: f,
       toggle: d,
@@ -279,7 +279,7 @@ const iconVariants = cva("inline-flex items-center justify-center", {
         className: cn(
           accordionVariants({ disabled: s }),
           a,
-          o && "mb-4"
+          n && "mb-4"
         ),
         ...u,
         children: [
@@ -462,14 +462,14 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     icon: r,
     className: i,
     children: s,
-    ...o
+    ...n
   }, a) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
       ref: a,
       role: "alert",
       className: cn(alertVariants({ variant: e, color: t }), i),
-      ...o,
+      ...n,
       children: [
         r && /* @__PURE__ */ jsxRuntimeExports.jsx(AlertIcon, { children: r }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: s })
@@ -542,14 +542,14 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     color: r = "primary",
     fontSize: i = "base",
     fontWeight: s = "medium",
-    quiet: o = !1,
+    quiet: n = !1,
     ...a
   }, l) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "a",
     {
       ref: l,
       className: cn(
-        anchorVariants({ color: r, fontSize: i, fontWeight: s, quiet: o }),
+        anchorVariants({ color: r, fontSize: i, fontWeight: s, quiet: n }),
         t
       ),
       ...a,
@@ -632,13 +632,13 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     hasUnderline: r = !1,
     isCapitalize: i = !1,
     align: s = "left",
-    italic: o = !1,
+    italic: n = !1,
     clamp: a = "none",
     ellipsis: l = !1,
     fontSize: u,
     fontWeight: c,
     className: f,
-    children: n,
+    children: o,
     ...d
   }, h) => {
     const y = [
@@ -651,7 +651,7 @@ const iconVariants = cva("inline-flex items-center justify-center", {
       "p",
       "span",
       "label"
-    ].includes(e) ? e : "span", w = u ? `text-${u}` : "", R = c ? `font-${c}` : "";
+    ].includes(e) ? e : "span", w = u ? `text-${u}` : "", j = c ? `font-${c}` : "";
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       e,
       {
@@ -662,29 +662,29 @@ const iconVariants = cva("inline-flex items-center justify-center", {
             hasUnderline: r,
             isCapitalize: i,
             align: s,
-            italic: o,
+            italic: n,
             clamp: a,
             ellipsis: l,
             // @ts-expect-error - `as` is not a valid variant
             as: y
           }),
           w,
-          R,
+          j,
           f
         ),
         ...d,
-        children: n
+        children: o
       }
     );
   }
 ), Attribute = forwardRef(
-  function({ title: t, children: r, className: i, hasMargin: s, ...o }, a) {
+  function({ title: t, children: r, className: i, hasMargin: s, ...n }, a) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
         ref: a,
         className: cn("space-y-1", i, s && "mb-4"),
-        ...o,
+        ...n,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Text,
@@ -763,16 +763,16 @@ function getGridCols(e = 4) {
       return "grid-cols-4";
   }
 }
-const AttributeListItem = forwardRef(function({ children: t, className: r, span: i = 1, title: s, ...o }, a) {
+const AttributeListItem = forwardRef(function({ children: t, className: r, span: i = 1, title: s, ...n }, a) {
   const l = getColSpan(i);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: a, className: cn(l, r), ...o, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Attribute, { title: s, children: t }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: a, 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 }, o) {
+  function({ children: t, className: r, columns: i = 4, ...s }, n) {
     const a = getGridCols(i);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "ul",
       {
-        ref: o,
+        ref: n,
         className: cn("grid gap-4", a, r),
         ...s,
         children: t
@@ -830,18 +830,18 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     shape: r = "circle",
     className: i,
     children: s,
-    ...o
+    ...n
   }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       ref: a,
       className: cn(avatarVariants({ variant: e, size: t, shape: r }), i),
-      ...o,
+      ...n,
       children: s
     }
   )
 ), AvatarImage = forwardRef(
-  ({ src: e, alt: t, className: r, onError: i, ...s }, o) => {
+  ({ src: e, alt: t, className: r, onError: i, ...s }, n) => {
     const [a, l] = useState(!1);
     useEffect(() => {
       l(!1);
@@ -855,7 +855,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     return a ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
-        ref: o,
+        ref: n,
         src: e,
         alt: t,
         className: cn(avatarImageVariants(), r),
@@ -1063,12 +1063,12 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     color: r = "primary",
     size: i = "md",
     iconLeft: s,
-    iconRight: o,
+    iconRight: n,
     className: a,
     children: l,
     ...u
   }, c) => {
-    const d = !(l != null && l !== "") && !!(s || o);
+    const d = !(l != null && l !== "") && !!(s || n);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "span",
       {
@@ -1086,19 +1086,19 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
         ...u,
         children: d ? (
           // Icon-only mode: display only the icon
-          s || o
+          s || n
         ) : (
           // Normal mode: display icon(s) and text
           /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             s,
             l,
-            o
+            n
           ] })
         )
       }
     );
   }
-), 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" }))), 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: 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("", {
   variants: {
     size: {
       xs: "h-6 w-6",
@@ -1112,17 +1112,24 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     size: "md"
   }
 }), BrandLogo = forwardRef(
-  ({ shape: e = "square", size: t, ...r }, i) => {
-    const o = {
-      square: SvgSpenicleSquare,
-      rounded: SvgSpenicleRounded,
-      circle: SvgSpenicleCircle
-    }[e] || SvgSpenicleSquare;
+  ({ shape: e = "square", size: t, name: r = "spenicle", ...i }, s) => {
+    const n = {
+      spenicle: {
+        square: SvgSpenicleSquare,
+        rounded: SvgSpenicleRounded,
+        circle: SvgSpenicleCircle
+      },
+      hub: {
+        square: SvgHubSquare,
+        rounded: SvgHubRounded,
+        circle: SvgHubCircle
+      }
+    }, l = (n[r] || n.spenicle)[e || "square"] || SvgSpenicleSquare;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      o,
+      l,
       {
-        ref: i,
-        ...r,
+        ref: s,
+        ...i,
         className: cn("inline-block", brandSizeClass({ size: t }))
       }
     );
@@ -1134,7 +1141,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
       ref: s,
       className: cn("inline-flex items-center gap-2"),
       ...i,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(BrandLogo, { shape: r, size: t, "aria-hidden": "true" })
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(BrandLogo, { name: e, shape: r, size: t, "aria-hidden": "true" })
     }
   )
 ), buttonVariants = cva(
@@ -1202,7 +1209,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     variant: r = "primary",
     size: i = "md",
     disabled: s = !1,
-    type: o = "button",
+    type: n = "button",
     children: a,
     ...l
   }, u) {
@@ -1210,7 +1217,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
       "button",
       {
         ref: u,
-        type: o,
+        type: n,
         className: cn(buttonVariants({ variant: r, size: i }), t),
         disabled: s,
         "aria-disabled": s,
@@ -1250,8 +1257,8 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
 function useMenuOutsideClick(e, t, r, i) {
   useEffect(() => {
     if (!e) return;
-    function s(o) {
-      !t.current?.contains(o.target) && !r.current?.contains(o.target) && i();
+    function s(n) {
+      !t.current?.contains(n.target) && !r.current?.contains(n.target) && i();
     }
     return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
   }, [e, i, t, r]);
@@ -1278,7 +1285,7 @@ function isTriggerVisible(e, t) {
   return !0;
 }
 function useMenuPosition(e, t, r, i = "bottom-start", s) {
-  const [o, a] = useState({ isReady: !1 }), l = useCallback(() => {
+  const [n, a] = useState({ isReady: !1 }), l = useCallback(() => {
     if (!e || !t.current) {
       a({ isReady: !1 });
       return;
@@ -1294,14 +1301,14 @@ function useMenuPosition(e, t, r, i = "bottom-start", s) {
       a({ isReady: !1 });
       return;
     }
-    const n = u.getBoundingClientRect(), d = window.innerWidth, h = window.innerHeight;
+    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(), R = c.style.visibility, E = c.style.position, C = c.style.opacity;
+    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;
     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 - n.bottom - 8, I = n.top - w.top - 8, V = w.right - n.left - 8, k = n.right - w.left - 8;
+    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;
     let p = i;
     if (i === "auto") {
       const b = [
@@ -1330,46 +1337,46 @@ function useMenuPosition(e, t, r, i = "bottom-start", s) {
           spaceUsed: I,
           priority: 4
         }
-      ].filter((j) => j.fits);
+      ].filter((R) => R.fits);
       b.length > 0 ? p = b.sort(
-        (j, B) => j.priority - B.priority
+        (R, S) => R.priority - S.priority
       )[0].name : N >= I ? p = V >= k ? "bottom-start" : "bottom-end" : p = V >= k ? "top-start" : "top-end";
     }
     const g = {};
     if (s)
       switch (g.position = "fixed", p) {
         case "bottom-start":
-          g.top = n.bottom + 4, g.left = n.left;
+          g.top = o.bottom + 4, g.left = o.left;
           break;
         case "bottom-end":
-          g.top = n.bottom + 4, g.right = window.innerWidth - n.right;
+          g.top = o.bottom + 4, g.right = window.innerWidth - o.right;
           break;
         case "top-start":
-          g.bottom = window.innerHeight - n.top + 4, g.left = n.left;
+          g.bottom = window.innerHeight - o.top + 4, g.left = o.left;
           break;
         case "top-end":
-          g.bottom = window.innerHeight - n.top + 4, g.right = window.innerWidth - n.right;
+          g.bottom = window.innerHeight - o.top + 4, g.right = window.innerWidth - o.right;
           break;
       }
     else
       switch (g.position = "absolute", p) {
         case "bottom-start":
-          g.top = n.height + 4, g.left = 0;
+          g.top = o.height + 4, g.left = 0;
           break;
         case "bottom-end":
-          g.top = n.height + 4, g.right = 0;
+          g.top = o.height + 4, g.right = 0;
           break;
         case "top-start":
-          g.bottom = n.height + 4, g.left = 0;
+          g.bottom = o.height + 4, g.left = 0;
           break;
         case "top-end":
-          g.bottom = n.height + 4, g.right = 0;
+          g.bottom = o.height + 4, g.right = 0;
           break;
       }
     if (s) {
       const v = {
-        top: p.startsWith("bottom") ? n.bottom + 4 : n.top - x.height - 4,
-        left: p.endsWith("start") ? n.left : n.right - x.width,
+        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
       };
@@ -1383,34 +1390,34 @@ function useMenuPosition(e, t, r, i = "bottom-start", s) {
       if (p.startsWith("bottom")) {
         const b = Math.max(
           50,
-          w.bottom - n.bottom - 16
+          w.bottom - o.bottom - 16
         );
         x.height > b && (g.maxHeight = b);
       } else {
         const b = Math.max(
           50,
-          n.top - w.top - 16
+          o.top - w.top - 16
         );
         x.height > b && (g.maxHeight = b);
       }
     } else {
       const v = {
-        top: p.startsWith("bottom") ? n.height + 4 : -x.height - 4,
+        top: p.startsWith("bottom") ? o.height + 4 : -x.height - 4,
         left: p.endsWith("start") ? 0 : -x.width,
         width: x.width,
         height: x.height
       }, b = {
-        left: n.left,
-        right: n.right,
-        top: n.top,
-        bottom: n.bottom
+        left: o.left,
+        right: o.right,
+        top: o.top,
+        bottom: o.bottom
       };
       if (b.left + v.left < 8) {
-        const j = 8 - (b.left + v.left);
-        p.endsWith("start") ? g.left = (g.left || 0) + j : g.right = (g.right || 0) - j;
+        const R = 8 - (b.left + v.left);
+        p.endsWith("start") ? g.left = (g.left || 0) + R : g.right = (g.right || 0) - R;
       } else if (b.left + v.left + v.width > d - 8) {
-        const j = b.left + v.left + v.width - (d - 8);
-        p.endsWith("start") ? g.left = (g.left || 0) - j : g.right = (g.right || 0) + j;
+        const R = b.left + v.left + v.width - (d - 8);
+        p.endsWith("start") ? g.left = (g.left || 0) - R : g.right = (g.right || 0) + R;
       }
     }
     g.isReady = !0, a(g);
@@ -1421,19 +1428,19 @@ 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 n = () => {
+    const o = () => {
       f || (requestAnimationFrame(() => {
         l(), f = !1;
       }), f = !0);
     };
     return c.forEach((d) => {
-      d === document.documentElement ? (window.addEventListener("scroll", n, { passive: !0 }), window.addEventListener("resize", n, { passive: !0 })) : d.addEventListener("scroll", n, { passive: !0 });
+      d === document.documentElement ? (window.addEventListener("scroll", o, { passive: !0 }), window.addEventListener("resize", o, { passive: !0 })) : d.addEventListener("scroll", o, { passive: !0 });
     }), () => {
       c.forEach((d) => {
-        d === document.documentElement ? (window.removeEventListener("scroll", n), window.removeEventListener("resize", n)) : d.removeEventListener("scroll", n);
+        d === document.documentElement ? (window.removeEventListener("scroll", o), window.removeEventListener("resize", o)) : d.removeEventListener("scroll", o);
       });
     };
-  }, [e, l, t]), o;
+  }, [e, l, t]), n;
 }
 const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider, useMenuProvider = () => {
   const e = useContext(MenuContext);
@@ -1443,11 +1450,11 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
 }, MenuContent = forwardRef(
   ({ children: e }, t) => /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: t, className: "flex flex-col gap-1", children: e })
 ), MenuItem = forwardRef(
-  ({ children: e, disabled: t, onClick: r, active: i, ...s }, o) => {
+  ({ children: e, disabled: t, onClick: r, active: i, ...s }, n) => {
     const { preserve: a, onClose: l } = useMenuProvider(), u = (c) => {
       r?.(c), a || l();
     };
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: o, ...s, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: n, ...s, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Button,
       {
         variant: "ghost",
@@ -1475,24 +1482,24 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
   size: r = "md",
   content: i,
   children: s,
-  placement: o = "auto",
+  placement: n = "auto",
   container: a,
   preserve: l
 }) => {
   const u = useRef(null), c = useRef(null), f = useId();
   useMenuOutsideClick(e, c, u, t);
-  const n = useMenuPosition(
+  const o = useMenuPosition(
     e,
     u,
     c,
-    o,
+    n,
     a || null
   ), d = {
-    ...n,
-    position: n.position || "absolute",
-    overflowY: n.maxHeight ? "auto" : void 0,
-    overflowX: n.maxWidth ? "auto" : void 0
-  }, h = e && n.isReady, m = /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ...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(
     "div",
     {
       id: f,
@@ -1517,7 +1524,7 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
           "aria-controls": f
         }),
         e && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          !n.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          !o.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
             {
               ref: c,
@@ -1533,7 +1540,7 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
               children: i
             }
           ),
-          n.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: n.position === "fixed" ? /* @__PURE__ */ jsxRuntimeExports.jsx(OverlayPortal, { children: m }) : m })
+          o.isReady && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: o.position === "fixed" ? /* @__PURE__ */ jsxRuntimeExports.jsx(OverlayPortal, { children: m }) : m })
         ] })
       ] })
     }
@@ -1547,26 +1554,26 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
       children: r,
       onOpenChange: i,
       onClick: s,
-      placement: o,
+      placement: n,
       container: a,
       preserve: l,
       label: u,
       ...c
-    } = e ?? {}, [f, n] = useState(!1);
+    } = e ?? {}, [f, o] = useState(!1);
     useEffect(() => {
       i?.(f);
     }, [f, i]);
     const d = () => {
-      n(!1);
+      o(!1);
     }, h = (m) => {
-      n((y) => !y), s?.(m);
+      o((y) => !y), s?.(m);
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Menu,
       {
         isOpen: f,
         onOutsideClick: d,
-        placement: o,
+        placement: n,
         container: a,
         preserve: l,
         content: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Content, { children: r }),
@@ -1671,7 +1678,7 @@ const buttonIconVariants = cva(
     variant: r = "primary",
     size: i = "md",
     shape: s = "rounded",
-    disabled: o = !1,
+    disabled: n = !1,
     as: a,
     "aria-label": l,
     ...u
@@ -1689,10 +1696,10 @@ const buttonIconVariants = cva(
           }),
           t
         ),
-        disabled: o,
-        "aria-disabled": o,
+        disabled: n,
+        "aria-disabled": n,
         "aria-label": l,
-        inert: o ? !0 : void 0,
+        inert: n ? !0 : void 0,
         ...u,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Icon,
@@ -1711,19 +1718,19 @@ const buttonIconVariants = cva(
       as: r = EllipsisVerticalIcon,
       children: i,
       onOpenChange: s,
-      onClick: o,
+      onClick: n,
       placement: a,
       container: l,
       preserve: u,
       ...c
-    } = e ?? {}, [f, n] = useState(!1);
+    } = e ?? {}, [f, o] = useState(!1);
     useEffect(() => {
       s?.(f);
     }, [f, s]);
     const d = () => {
-      n(!1);
+      o(!1);
     }, h = (m) => {
-      n((y) => !y), o?.(m);
+      o((y) => !y), n?.(m);
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Menu,
@@ -1808,12 +1815,12 @@ const buttonIconVariants = cva(
   }
 );
 function useFloatingPosition(e, t = "1rem") {
-  const r = useRef(null), [i, s] = useState({}), [o, a] = useState("fixed bottom-4 right-4"), l = useCallback(() => {
+  const r = useRef(null), [i, s] = useState({}), [n, a] = useState("fixed bottom-4 right-4"), l = useCallback(() => {
     const c = r.current;
     if (!c) return;
-    const n = c.getBoundingClientRect().height > window.innerHeight;
+    const o = c.getBoundingClientRect().height > window.innerHeight;
     let d = {}, h = "";
-    n ? (d = {
+    o ? (d = {
       position: "fixed",
       bottom: t,
       zIndex: 50,
@@ -1837,7 +1844,7 @@ function useFloatingPosition(e, t = "1rem") {
       r.current = c, c && l();
     },
     [l]
-  ), i, o];
+  ), i, n];
 }
 const ButtonFloat = forwardRef(
   function({
@@ -1845,13 +1852,13 @@ const ButtonFloat = forwardRef(
     variant: r = "primary",
     size: i = "md",
     side: s = "right",
-    offset: o = "1rem",
+    offset: n = "1rem",
     ...a
   }, l) {
     const [u, c, f] = useFloatingPosition(
       s,
-      o
-    ), [n, d] = useState(!1);
+      n
+    ), [o, d] = useState(!1);
     return useEffect(() => {
       d(!0);
     }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: u, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1862,7 +1869,7 @@ const ButtonFloat = forwardRef(
         className: cn(
           buttonFloatVariants({ variant: r, size: i }),
           f,
-          n && "animate-fab-in",
+          o && "animate-fab-in",
           t
         ),
         style: c,
@@ -1987,7 +1994,7 @@ const BUTTONS = [
     disabled: r,
     className: i,
     "aria-label": s
-  }, o) => {
+  }, n) => {
     const { input: a, inputRef: l, handleButton: u, handleInput: c } = useCalculator({
       initialValue: e,
       disabled: r,
@@ -1996,7 +2003,7 @@ const BUTTONS = [
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        ref: o,
+        ref: n,
         className: cn(calculatorRootVariants({ disabled: r }), i),
         "aria-label": s || "Calculator",
         role: "region",
@@ -2013,7 +2020,7 @@ const BUTTONS = [
               "aria-label": "Calculator input"
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((f, n) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: f.map((d) => d === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__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(
             ButtonIcon,
             {
               as: X,
@@ -2034,7 +2041,7 @@ const BUTTONS = [
               children: d
             },
             d
-          )) }, n)) })
+          )) }, o)) })
         ]
       }
     );
@@ -2087,7 +2094,7 @@ const cardVariants = cva(
     "li",
     {
       ref: t,
-      className: "flex items-center min-w-0 flex-shrink-0 after:content-[''] after:inline-block after:mx-1.5 sm:after:mx-2 after:w-1 after:h-1 after:rounded-full after:bg-ghost last:after:hidden after:flex-shrink-0",
+      className: "flex items-center min-w-0 flex-shrink-0 after:content-[''] after:inline-block after:mx-1.5 @sm/card:after:mx-2 after:w-1 after:h-1 after:rounded-full after:bg-ghost last:after:hidden after:flex-shrink-0",
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "gray", ellipsis: !0, clamp: 1, children: e })
     }
   )
@@ -2098,22 +2105,23 @@ const cardVariants = cva(
     avatar: r,
     title: i,
     subtitle: s,
-    badge: o,
+    badge: n,
     supplementaryInfo: a,
     bordered: l = !1,
     as: u = "button",
     className: c,
     ...f
-  }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     u,
     {
-      ref: n,
+      ref: o,
       className: cn(
         cardVariants({ size: e, shape: t, bordered: l, as: u }),
-        c
+        c,
+        "@container/card"
       ),
       ...f,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3 sm:gap-4 w-full", children: [
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3 @sm/card:gap-4 w-full", children: [
         r && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: r }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full min-w-0", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
@@ -2129,9 +2137,9 @@ const cardVariants = cva(
             ),
             s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1", children: typeof s == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: s }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 overflow-hidden", children: s }) })
           ] }) }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:justify-between sm:items-center", children: [
-            o && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "order-1 sm:order-none overflow-hidden", children: o }),
-            a && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 order-2 sm:order-none sm:ml-auto", children: typeof a == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__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(
               Text,
               {
                 as: "p",
@@ -2194,7 +2202,7 @@ const cardVariants = cva(
     variant: r = "neutral-outline",
     size: i = "md",
     disabled: s = !1,
-    children: o,
+    children: n,
     ...a
   }, l) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -2205,11 +2213,11 @@ const cardVariants = cva(
         className: cn(filterChipVariants({ variant: r, size: i }), t),
         disabled: s,
         "aria-disabled": s,
-        "aria-label": `${o}, removable`,
+        "aria-label": `${n}, removable`,
         inert: s ? !0 : void 0,
         ...a,
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0", children: o }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0", children: n }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: XIcon, color: "inherit", size: i === "lg" ? "md" : "sm" })
         ]
       }
@@ -2256,12 +2264,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: o, hasGrayBackground: a, ...l }, u) {
+  function e({ icon: t, title: r, subtitle: i, action: s, className: n, hasGrayBackground: a, ...l }, u) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "section",
       {
         ref: u,
-        className: cn(noResultsVariants({ hasGrayBackground: a }), o),
+        className: cn(noResultsVariants({ hasGrayBackground: a }), n),
         role: "status",
         "aria-label": "No results found",
         ...l,
@@ -2409,7 +2417,7 @@ const getTableColumnClass = (e) => {
     );
   }
 ), TableColumn = forwardRef(
-  ({ as: e = "td", span: t, align: r = "left", children: i, className: s, ...o }, a) => {
+  ({ as: e = "td", span: t, align: r = "left", children: i, className: s, ...n }, a) => {
     const l = e === "th" ? "columnheader" : "cell";
     let u = "text-left";
     return r === "center" ? u = "text-center" : r === "right" && (u = "text-right"), /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2425,7 +2433,7 @@ const getTableColumnClass = (e) => {
           "truncate overflow-hidden whitespace-nowrap",
           s
         ),
-        ...o,
+        ...n,
         children: i
       }
     );
@@ -2517,17 +2525,17 @@ const getTableColumnClass = (e) => {
     }
   }
 ), Tile = forwardRef(
-  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: i, ...s }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: i, ...s }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      ref: o,
+      ref: n,
       className: cn(tileVariants({ variant: e, size: t, shape: r }), i),
       ...s
     }
   )
 );
 function useImage({ src: e }) {
-  const [t, r] = useState(!1), [i, s] = useState(!1), o = useRef(!1), a = () => {
+  const [t, r] = useState(!1), [i, s] = useState(!1), n = useRef(!1), a = () => {
     r(!0);
   }, l = () => {
     s(!0);
@@ -2536,11 +2544,11 @@ function useImage({ src: e }) {
     if (!e) return;
     const u = new Image();
     return u.src = e, u.onload = () => {
-      o.current || r(!0);
+      n.current || r(!0);
     }, u.onerror = () => {
-      o.current || s(!0);
+      n.current || s(!0);
     }, () => {
-      o.current = !0;
+      n.current = !0;
     };
   }, [e]), {
     loaded: t,
@@ -2623,13 +2631,13 @@ function BaseImageFallback({
   height: r,
   className: i,
   style: s,
-  shape: o,
+  shape: n,
   size: a
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: imageAtomVariants({ shape: o, size: a, className: i }),
+      className: imageAtomVariants({ shape: n, size: a, className: i }),
       style: { width: t, height: r, ...s },
       "aria-label": e,
       role: "img",
@@ -2654,22 +2662,22 @@ const BaseImage = forwardRef(
     onLoad: r,
     onError: i,
     width: s,
-    height: o,
+    height: n,
     loading: a = "lazy",
     position: l = "cover",
     size: u = "auto",
     shape: c,
     className: f,
-    ...n
+    ...o
   }, d) => {
     const { loaded: h, errored: m, handleLoad: y, handleError: w } = useImage({
       src: e
-    }), R = typeof s == "number" ? s : Number(s), E = typeof o == "number" ? o : Number(o);
+    }), j = typeof s == "number" ? s : Number(s), E = typeof n == "number" ? n : Number(n);
     return !h && !m ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageSkeleton,
       {
         shape: c,
-        width: R,
+        width: j,
         height: E
       }
     ) : m ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2677,7 +2685,7 @@ const BaseImage = forwardRef(
       {
         shape: c,
         alt: t,
-        width: R,
+        width: j,
         height: E
       }
     ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -2686,7 +2694,7 @@ const BaseImage = forwardRef(
         ref: d,
         src: e,
         alt: t,
-        width: R,
+        width: j,
         height: E,
         loading: a,
         className: cn(
@@ -2703,7 +2711,7 @@ const BaseImage = forwardRef(
         onError: (C) => {
           w(), i?.(C);
         },
-        ...n
+        ...o
       }
     );
   }

package/dist/js/index.js

@@ -1,11 +1,11 @@
 import { L as t, P as s, S as r } from "./skeleton-BNZyaRjo.js";
-import { A as n, a as u, B as p, b as i, F as l, f as I, P as c, c as S, d as m, e as B, S as g, T as d } from "./top-bar-BKeQ6yXv.js";
-import { B as T, C as x, b as f, a as h, D as P, k as C, E as M, M as A, P as k, R as F, d as L, c as D, S as H, e as R, j as w, i as G, h as j, f as q, T as v, g as y } from "./bottom-sheet-input-IzuwB7Zy.js";
-import { B as N, D as z, M as J } from "./bottom-sheet-DHMq1-Di.js";
-import { A as O, a as Q, b as U, c as V, d as W, e as X, B as Y, s as Z, f as _, g as $, j as aa, k as ea, h as ta, i as sa, C as ra, l as oa, F as na, H as ua, m as pa, I as ia, p as la, r as Ia, q as ca, M as Sa, N as ma, T as Ba, n as ga, o as da } from "./image-rectangle-DPZAgdEa.js";
-import { T as Ta } from "./tooltip-D_laXWIT.js";
+import { A as n, a as u, B as p, b as i, F as l, f as I, P as c, c as S, d as m, e as B, S as g, T as d } from "./top-bar-CKo6k1eW.js";
+import { B as T, C as x, b as f, a as h, D as P, k as C, E as M, M as A, P as k, R as F, d as L, c as D, S as H, e as R, j as w, i as G, h as j, f as q, T as v, g as y } from "./bottom-sheet-input-C9Ht9cxQ.js";
+import { B as N, D as z, M as J } from "./bottom-sheet-BSN0J8ji.js";
+import { A as O, a as Q, b as U, c as V, d as W, e as X, B as Y, s as Z, f as _, g as $, j as aa, k as ea, h as ta, i as sa, C as ra, l as oa, F as na, H as ua, m as pa, I as ia, p as la, r as Ia, q as ca, M as Sa, N as ma, T as Ba, n as ga, o as da } from "./image-rectangle-DjuCYHbk.js";
+import { T as Ta } from "./tooltip-nOXyn9AX.js";
 import { S as fa } from "./snackbar-DH8jCh2V.js";
-import { B as Pa, T as Ca } from "./tabs-BRMO0ktc.js";
+import { B as Pa, T as Ca } from "./tabs-CiZ2DPDD.js";
 import { S as Aa, u as ka } from "./use-snackbars-Cou8L41F.js";
 export {
   O as Accordion,

package/dist/js/layouts/index.js

@@ -1,4 +1,4 @@
-import { A as e, a as r, B as s, b as t, F as p, f as B, P as u, c as d, d as g, e as P, S as i, T as m } from "../top-bar-BKeQ6yXv.js";
+import { A as e, a as r, B as s, b as t, F as p, f as B, P as u, c as d, d as g, e as P, S as i, T as m } from "../top-bar-CKo6k1eW.js";
 export {
   e as AppBar,
   r as BadgeGroup,

package/dist/js/navigation/index.js

@@ -1,4 +1,4 @@
-import { B as s, T as b } from "../tabs-BRMO0ktc.js";
+import { B as s, T as b } from "../tabs-CiZ2DPDD.js";
 export {
   s as Breadcrumbs,
   b as Tabs

package/dist/js/overlays/index.js

@@ -1,6 +1,6 @@
-import { B as a, D as e, M as t } from "../bottom-sheet-DHMq1-Di.js";
-import { M as m } from "../image-rectangle-DPZAgdEa.js";
-import { T as M } from "../tooltip-D_laXWIT.js";
+import { B as a, D as e, M as t } from "../bottom-sheet-BSN0J8ji.js";
+import { M as m } from "../image-rectangle-DjuCYHbk.js";
+import { T as M } from "../tooltip-nOXyn9AX.js";
 export {
   a as BottomSheet,
   e as Drawer,

package/dist/js/primitive/index.js

@@ -1,4 +1,4 @@
-import { A as t, a as e, b as o, c as r, d as n, e as u, B as c, s as l, f as i, g as B, j as g, k as I, h as m, i as A, C as d, l as b, F as C, H as p, m as T, I as f, p as h, r as x, q as F, N as H, T as S, n as k, o as q } from "../image-rectangle-DPZAgdEa.js";
+import { A as t, a as e, b as o, c as r, d as n, e as u, B as c, s as l, f as i, g as B, j as g, k as I, h as m, i as A, C as d, l as b, F as C, H as p, m as T, I as f, p as h, r as x, q as F, N as H, T as S, n as k, o as q } from "../image-rectangle-DjuCYHbk.js";
 import { S as N } from "../snackbar-DH8jCh2V.js";
 export {
   t as Accordion,

package/dist/js/{tabs-BRMO0ktc.js → tabs-CiZ2DPDD.js}

@@ -1,6 +1,6 @@
 import { c as d, j as s, a as u } from "./index-DOdDlCoL.js";
 import { forwardRef as f, createContext as x, useContext as g, useState as p, useLayoutEffect as y, useRef as h } from "react";
-import { I as w } from "./image-rectangle-DPZAgdEa.js";
+import { I as w } from "./image-rectangle-DjuCYHbk.js";
 import "./snackbar-DH8jCh2V.js";
 import { ChevronRight as T } from "lucide-react";
 const j = d(

package/dist/js/{tooltip-D_laXWIT.js → tooltip-nOXyn9AX.js}

@@ -1,6 +1,6 @@
 import { c as v, j as c, a as w } from "./index-DOdDlCoL.js";
 import { useRef as m, useState as d, useEffect as h, useId as T, cloneElement as j } from "react";
-import { n as y } from "./image-rectangle-DPZAgdEa.js";
+import { n as y } from "./image-rectangle-DjuCYHbk.js";
 function P(e = "auto") {
   const n = m(null), [a, t] = d("bottom");
   return h(() => {

package/dist/js/{top-bar-BKeQ6yXv.js → top-bar-CKo6k1eW.js}

@@ -1,7 +1,7 @@
 import { c as i, j as s, a as l } from "./index-DOdDlCoL.js";
 import * as v from "react";
 import { forwardRef as o } from "react";
-import { n as f } from "./image-rectangle-DPZAgdEa.js";
+import { n as f } from "./image-rectangle-DjuCYHbk.js";
 import "./snackbar-DH8jCh2V.js";
 import { L as h } from "./skeleton-BNZyaRjo.js";
 const j = i(

package/dist/types/primitive/brand/types.d.ts

@@ -6,7 +6,7 @@ export interface BrandProps extends HTMLAttributes<HTMLSpanElement> {
     /**
      * The app name to display (predefined, default: 'spenicle')
      */
-    name: 'spenicle';
+    name: 'spenicle' | 'hub';
     /**
      * The size of the brand icon and text
      * @default 'md'
@@ -14,4 +14,4 @@ export interface BrandProps extends HTMLAttributes<HTMLSpanElement> {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     shape?: 'square' | 'rounded' | 'circle';
 }
-export type BrandAtomProps = Pick<BrandProps, 'shape' | 'size'>;
+export type BrandAtomProps = Pick<BrandProps, 'shape' | 'size' | 'name'>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimasbaguspm/versaur",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "description": "React UI library with Tailwind CSS",
   "author": "Dimas Bagus Prayogo Mukti<dimas.bagus.pm@gmail.com>",
   "license": "MIT",