@dimasbaguspm/versaur 0.0.20 → 0.0.22

package/dist/js/{image-rectangle-DH7v2xvp.js → image-rectangle-C6cgL8R9.js}

@@ -147,18 +147,18 @@ const alertVariants = cva(
     color: t = "neutral",
     icon: r,
     className: s,
-    children: o,
-    ...n
+    children: n,
+    ...o
   }, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
       ref: i,
       role: "alert",
       className: cn(alertVariants({ variant: e, color: t }), s),
-      ...n,
+      ...o,
       children: [
         r && /* @__PURE__ */ jsxRuntimeExports.jsx(AlertIcon, { children: r }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: o })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: n })
       ]
     }
   )
@@ -227,15 +227,15 @@ const alertVariants = cva(
     className: t,
     color: r = "primary",
     fontSize: s = "base",
-    fontWeight: o = "medium",
-    quiet: n = !1,
+    fontWeight: n = "medium",
+    quiet: o = !1,
     ...i
   }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "a",
     {
       ref: a,
       className: cn(
-        anchorVariants({ color: r, fontSize: s, fontWeight: o, quiet: n }),
+        anchorVariants({ color: r, fontSize: s, fontWeight: n, quiet: o }),
         t
       ),
       ...i,
@@ -286,38 +286,38 @@ const alertVariants = cva(
     size: t = "md",
     shape: r = "circle",
     className: s,
-    children: o,
-    ...n
+    children: n,
+    ...o
   }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       ref: i,
       className: cn(avatarVariants({ variant: e, size: t, shape: r }), s),
-      ...n,
-      children: o
+      ...o,
+      children: n
     }
   )
 ), AvatarImage = forwardRef(
-  ({ src: e, alt: t, className: r, onError: s, ...o }, n) => {
+  ({ src: e, alt: t, className: r, onError: s, ...n }, o) => {
     const [i, a] = useState(!1);
     useEffect(() => {
       a(!1);
     }, [e]);
-    const g = useCallback(
-      (c) => {
-        a(!0), s?.(c);
+    const c = useCallback(
+      (u) => {
+        a(!0), s?.(u);
       },
       [s]
     );
     return i ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
-        ref: n,
+        ref: o,
         src: e,
         alt: t,
         className: cn(avatarImageVariants(), r),
-        onError: g,
-        ...o
+        onError: c,
+        ...n
       }
     );
   }
@@ -485,37 +485,37 @@ const alertVariants = cva(
     shape: t = "square",
     color: r = "primary",
     size: s = "md",
-    iconLeft: o,
-    iconRight: n,
+    iconLeft: n,
+    iconRight: o,
     className: i,
     children: a,
-    ...g
-  }, c) => {
-    const f = !(a != null && a !== "") && !!(o || n);
+    ...c
+  }, u) => {
+    const d = !(a != null && a !== "") && !!(n || o);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "span",
       {
-        ref: c,
+        ref: u,
         className: cn(
           badgeVariants({
             variant: e,
             color: r,
             shape: t,
             size: s,
-            iconOnly: f
+            iconOnly: d
           }),
           i
         ),
-        ...g,
-        children: f ? (
+        ...c,
+        children: d ? (
           // Icon-only mode: display only the icon
-          o || n
+          n || o
         ) : (
           // Normal mode: display icon(s) and text
           /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            o,
+            n,
             a,
-            n
+            o
           ] })
         )
       }
@@ -538,13 +538,13 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
   }
 }), BrandLogo = forwardRef(
   ({ shape: e = "square", size: t, ...r }, s) => {
-    const n = {
+    const o = {
       square: SvgSpenicleSquare,
       rounded: SvgSpenicleRounded,
       circle: SvgSpenicleCircle
     }[e] || SvgSpenicleSquare;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      n,
+      o,
       {
         ref: s,
         ...r,
@@ -553,10 +553,10 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
     );
   }
 ), Brand = forwardRef(
-  ({ name: e = "spenicle", size: t = "md", shape: r, ...s }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ({ name: e = "spenicle", size: t = "md", shape: r, ...s }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "span",
     {
-      ref: o,
+      ref: n,
       className: cn("inline-flex items-center gap-2"),
       ...s,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(BrandLogo, { shape: r, size: t, "aria-hidden": "true" })
@@ -568,35 +568,35 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
     variants: {
       variant: {
         // Core variants using Versaur color system
-        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-soft focus-visible:ring-offset-white",
-        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-soft focus-visible:ring-offset-white shadow-sm",
+        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
+        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-light focus-visible:ring-offset-white shadow-sm",
         // Outline variants
-        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-soft focus-visible:ring-offset-white transition-all",
-        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-soft focus-visible:ring-offset-white transition-all",
-        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-soft focus-visible:ring-offset-white transition-all",
-        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-soft focus-visible:ring-offset-white transition-all",
-        "neutral-outline": "border border-neutral text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-soft focus-visible:ring-offset-white transition-all",
+        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-light focus-visible:ring-offset-white transition-all",
+        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-light focus-visible:ring-offset-white transition-all",
+        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-light focus-visible:ring-offset-white transition-all",
+        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-light focus-visible:ring-offset-white transition-all",
+        "neutral-outline": "border border-neutral text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-light focus-visible:ring-offset-white transition-all",
         // Ghost variants (subtle)
-        "primary-ghost": "text-primary bg-white hover:bg-primary-light focus-visible:ring-primary-light focus-visible:ring-offset-white",
-        "secondary-ghost": "text-secondary bg-white hover:bg-secondary-light focus-visible:ring-secondary-light focus-visible:ring-offset-white",
-        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary-light focus-visible:ring-tertiary-light focus-visible:ring-offset-white",
-        "neutral-ghost": "text-foreground bg-white hover:bg-neutral/70 focus-visible:ring-foreground-soft focus-visible:ring-offset-white",
+        "primary-ghost": "text-primary bg-white hover:bg-primary/20 focus-visible:ring-primary focus-visible:ring-offset-white",
+        "secondary-ghost": "text-secondary bg-white hover:bg-secondary/20 focus-visible:ring-secondary focus-visible:ring-offset-white",
+        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary/20 focus-visible:ring-tertiary focus-visible:ring-offset-white",
+        "neutral-ghost": "text-foreground bg-white hover:bg-neutral/50 focus-visible:ring-foreground focus-visible:ring-offset-white",
         // Semantic variants
-        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "success-outline": "border border-success text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-soft focus-visible:ring-offset-white transition-all",
-        "success-ghost": "text-success bg-white hover:bg-success-light focus-visible:ring-success-light focus-visible:ring-offset-white",
-        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "info-outline": "border border-info text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-soft focus-visible:ring-offset-white transition-all",
-        "info-ghost": "text-info bg-white hover:bg-info-light focus-visible:ring-info-light focus-visible:ring-offset-white",
-        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "warning-outline": "border border-warning text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-soft focus-visible:ring-offset-white transition-all",
-        "warning-ghost": "text-warning bg-white hover:bg-warning-light focus-visible:ring-warning-light focus-visible:ring-offset-white",
-        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "danger-outline": "border border-danger text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-soft focus-visible:ring-offset-white transition-all",
-        "danger-ghost": "text-danger bg-white hover:bg-danger-light focus-visible:ring-danger-light focus-visible:ring-offset-white",
+        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "success-outline": "border border-success text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-light focus-visible:ring-offset-white transition-all",
+        "success-ghost": "text-success bg-white hover:bg-success/20 focus-visible:ring-success-light focus-visible:ring-offset-white",
+        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "info-outline": "border border-info text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-light focus-visible:ring-offset-white transition-all",
+        "info-ghost": "text-info bg-white hover:bg-info/20 focus-visible:ring-info-light focus-visible:ring-offset-white",
+        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "warning-outline": "border border-warning text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-light focus-visible:ring-offset-white transition-all",
+        "warning-ghost": "text-warning bg-white hover:bg-warning/20 focus-visible:ring-warning-light focus-visible:ring-offset-white",
+        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "danger-outline": "border border-danger text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-light focus-visible:ring-offset-white transition-all",
+        "danger-ghost": "text-danger bg-white hover:bg-danger/20 focus-visible:ring-danger-light focus-visible:ring-offset-white",
         // Utility variants
         outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white transition-all",
         destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md"
@@ -617,20 +617,20 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
     className: t,
     variant: r = "primary",
     size: s = "md",
-    disabled: o = !1,
-    type: n = "button",
+    disabled: n = !1,
+    type: o = "button",
     children: i,
     ...a
-  }, g) {
+  }, c) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
-        ref: g,
-        type: n,
+        ref: c,
+        type: o,
         className: cn(buttonVariants({ variant: r, size: s }), t),
-        disabled: o,
-        "aria-disabled": o,
-        inert: o ? !0 : void 0,
+        disabled: n,
+        "aria-disabled": n,
+        inert: n ? !0 : void 0,
         ...a,
         children: i
       }
@@ -662,34 +662,34 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
   {
     variants: {
       variant: {
-        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-soft focus-visible:ring-offset-white",
-        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-soft focus-visible:ring-offset-white",
-        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-soft focus-visible:ring-offset-white",
-        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-soft focus-visible:ring-offset-white",
-        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-soft focus-visible:ring-offset-white",
-        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-soft focus-visible:ring-offset-white",
-        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-soft focus-visible:ring-offset-white",
-        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-soft focus-visible:ring-offset-white",
-        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-soft focus-visible:ring-offset-white",
-        "neutral-outline": "border border-neutral text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-soft focus-visible:ring-offset-white",
-        "primary-ghost": "text-primary bg-white hover:bg-primary-soft focus-visible:ring-primary-soft focus-visible:ring-offset-white",
-        "secondary-ghost": "text-secondary bg-white hover:bg-secondary-soft focus-visible:ring-secondary-soft focus-visible:ring-offset-white",
-        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary-soft focus-visible:ring-tertiary-soft focus-visible:ring-offset-white",
-        "neutral-ghost": "text-foreground bg-white hover:bg-neutral/70 focus-visible:ring-foreground-soft focus-visible:ring-offset-white",
-        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-soft focus-visible:ring-offset-white",
-        "success-outline": "border border-success text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-soft focus-visible:ring-offset-white",
-        "success-ghost": "text-success bg-white hover:bg-success-soft focus-visible:ring-success-soft focus-visible:ring-offset-white",
-        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-soft focus-visible:ring-offset-white",
-        "info-outline": "border border-info text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-soft focus-visible:ring-offset-white",
-        "info-ghost": "text-info bg-white hover:bg-info-soft focus-visible:ring-info-soft focus-visible:ring-offset-white",
-        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-soft focus-visible:ring-offset-white",
-        "warning-outline": "border border-warning text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-soft focus-visible:ring-offset-white",
-        "warning-ghost": "text-warning bg-white hover:bg-warning-soft focus-visible:ring-warning-soft focus-visible:ring-offset-white",
-        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white",
-        "danger-outline": "border border-danger text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-soft focus-visible:ring-offset-white",
-        "danger-ghost": "text-danger bg-white hover:bg-danger-soft focus-visible:ring-danger-soft focus-visible:ring-offset-white",
-        outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white",
-        destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white"
+        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
+        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-light focus-visible:ring-offset-white shadow-sm",
+        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-light focus-visible:ring-offset-white transition-all",
+        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-light focus-visible:ring-offset-white transition-all",
+        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-light focus-visible:ring-offset-white transition-all",
+        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-light focus-visible:ring-offset-white transition-all",
+        "neutral-outline": "border border-neutral text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-light focus-visible:ring-offset-white transition-all",
+        "primary-ghost": "text-primary bg-white hover:bg-primary/20 focus-visible:ring-primary focus-visible:ring-offset-white",
+        "secondary-ghost": "text-secondary bg-white hover:bg-secondary/20 focus-visible:ring-secondary focus-visible:ring-offset-white",
+        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary/20 focus-visible:ring-tertiary focus-visible:ring-offset-white",
+        "neutral-ghost": "text-foreground bg-white hover:bg-neutral/50 focus-visible:ring-foreground focus-visible:ring-offset-white",
+        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "success-outline": "border border-success text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-light focus-visible:ring-offset-white transition-all",
+        "success-ghost": "text-success bg-white hover:bg-success/20 focus-visible:ring-success-light focus-visible:ring-offset-white",
+        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "info-outline": "border border-info text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-light focus-visible:ring-offset-white transition-all",
+        "info-ghost": "text-info bg-white hover:bg-info/20 focus-visible:ring-info-light focus-visible:ring-offset-white",
+        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "warning-outline": "border border-warning text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-light focus-visible:ring-offset-white transition-all",
+        "warning-ghost": "text-warning bg-white hover:bg-warning/20 focus-visible:ring-warning-light focus-visible:ring-offset-white",
+        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "danger-outline": "border border-danger text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-light focus-visible:ring-offset-white transition-all",
+        "danger-ghost": "text-danger bg-white hover:bg-danger/20 focus-visible:ring-danger-light focus-visible:ring-offset-white",
+        outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white transition-all",
+        destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md"
       },
       size: {
         sm: "h-12 w-12 min-w-12 min-h-12 text-base",
@@ -704,53 +704,53 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
   }
 );
 function useFloatingPosition(e, t = "1rem") {
-  const r = useRef(null), [s, o] = useState({}), [n, i] = useState("fixed bottom-4 right-4"), a = useCallback(() => {
-    const c = r.current;
-    if (!c) return;
-    const b = c.getBoundingClientRect().height > window.innerHeight;
-    let f = {}, p = "";
-    b ? (f = {
+  const r = useRef(null), [s, n] = useState({}), [o, i] = useState("fixed bottom-4 right-4"), a = useCallback(() => {
+    const u = r.current;
+    if (!u) return;
+    const b = u.getBoundingClientRect().height > window.innerHeight;
+    let d = {}, p = "";
+    b ? (d = {
       position: "fixed",
       bottom: t,
       zIndex: 50,
-      transform: `translateY(${c.scrollTop}px)`
-    }, p = `fixed bottom-4 ${e}-4`) : (f = {
+      transform: `translateY(${u.scrollTop}px)`
+    }, p = `fixed bottom-4 ${e}-4`) : (d = {
       position: "fixed",
       bottom: t,
       zIndex: 50
-    }, p = `fixed bottom-4 ${e}-4`), o(f), i(p);
+    }, p = `fixed bottom-4 ${e}-4`), n(d), i(p);
   }, [e, t]);
   return useEffect(() => {
     a();
-    const c = r.current;
-    return c && c.addEventListener("scroll", a), window.addEventListener("resize", a), () => {
-      c && c.removeEventListener("scroll", a), window.removeEventListener("resize", a);
+    const u = r.current;
+    return u && u.addEventListener("scroll", a), window.addEventListener("resize", a), () => {
+      u && u.removeEventListener("scroll", a), window.removeEventListener("resize", a);
     };
   }, [a]), useEffect(() => {
     r.current && a();
   }, [e, t, a]), [useCallback(
-    (c) => {
-      r.current = c, c && a();
+    (u) => {
+      r.current = u, u && a();
     },
     [a]
-  ), s, n];
+  ), s, o];
 }
 const ButtonFloat = forwardRef(
   function({
     className: t,
     variant: r = "primary",
     size: s = "md",
-    side: o = "right",
-    offset: n = "1rem",
+    side: n = "right",
+    offset: o = "1rem",
     ...i
   }, a) {
-    const [g, c, m] = useFloatingPosition(
-      o,
-      n
-    ), [b, f] = useState(!1);
+    const [c, u, m] = useFloatingPosition(
+      n,
+      o
+    ), [b, d] = useState(!1);
     return useEffect(() => {
-      f(!0);
-    }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: g, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      d(!0);
+    }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: c, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
         ref: a,
@@ -761,7 +761,7 @@ const ButtonFloat = forwardRef(
           b && "animate-fab-in",
           t
         ),
-        style: c,
+        style: u,
         ...i
       }
     ) });
@@ -807,37 +807,32 @@ const buttonIconVariants = cva(
   {
     variants: {
       variant: {
-        // Core variants using Versaur color system
-        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-soft focus-visible:ring-offset-white",
-        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-soft focus-visible:ring-offset-white shadow-sm",
-        // Outline variants
-        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-soft focus-visible:ring-offset-white transition-all",
-        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-soft focus-visible:ring-offset-white transition-all",
-        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-soft focus-visible:ring-offset-white transition-all",
-        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-soft focus-visible:ring-offset-white transition-all",
-        "neutral-outline": "border border-neutral text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-soft focus-visible:ring-offset-white transition-all",
-        // Ghost variants (subtle)
-        "primary-ghost": "text-primary bg-white hover:bg-primary-light focus-visible:ring-primary-light focus-visible:ring-offset-white",
-        "secondary-ghost": "text-secondary bg-white hover:bg-secondary-light focus-visible:ring-secondary-light focus-visible:ring-offset-white",
-        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary-light focus-visible:ring-tertiary-light focus-visible:ring-offset-white",
-        "neutral-ghost": "text-foreground bg-white hover:bg-neutral-light focus-visible:ring-foreground-light focus-visible:ring-offset-white",
-        // Semantic variants
-        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "success-outline": "border border-success text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-soft focus-visible:ring-offset-white transition-all",
-        "success-ghost": "text-success bg-white hover:bg-success-light focus-visible:ring-success-light focus-visible:ring-offset-white",
-        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "info-outline": "border border-info text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-soft focus-visible:ring-offset-white transition-all",
-        "info-ghost": "text-info bg-white hover:bg-info-light focus-visible:ring-info-light focus-visible:ring-offset-white",
-        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "warning-outline": "border border-warning text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-soft focus-visible:ring-offset-white transition-all",
-        "warning-ghost": "text-warning bg-white hover:bg-warning-light focus-visible:ring-warning-light focus-visible:ring-offset-white",
-        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        "danger-outline": "border border-danger text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-soft focus-visible:ring-offset-white transition-all",
-        "danger-ghost": "text-danger bg-white hover:bg-danger-light focus-visible:ring-danger-light focus-visible:ring-offset-white",
-        // Utility variants
+        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
+        neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-light focus-visible:ring-offset-white shadow-sm",
+        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-light focus-visible:ring-offset-white transition-all",
+        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-light focus-visible:ring-offset-white transition-all",
+        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-light focus-visible:ring-offset-white transition-all",
+        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-light focus-visible:ring-offset-white transition-all",
+        "neutral-outline": "border border-neutral text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-light focus-visible:ring-offset-white transition-all",
+        "primary-ghost": "text-primary bg-white hover:bg-primary/20 focus-visible:ring-primary focus-visible:ring-offset-white",
+        "secondary-ghost": "text-secondary bg-white hover:bg-secondary/20 focus-visible:ring-secondary focus-visible:ring-offset-white",
+        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary/20 focus-visible:ring-tertiary focus-visible:ring-offset-white",
+        "neutral-ghost": "text-foreground bg-white hover:bg-neutral/50 focus-visible:ring-foreground focus-visible:ring-offset-white",
+        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "success-outline": "border border-success text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-light focus-visible:ring-offset-white transition-all",
+        "success-ghost": "text-success bg-white hover:bg-success/20 focus-visible:ring-success-light focus-visible:ring-offset-white",
+        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "info-outline": "border border-info text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-light focus-visible:ring-offset-white transition-all",
+        "info-ghost": "text-info bg-white hover:bg-info/20 focus-visible:ring-info-light focus-visible:ring-offset-white",
+        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "warning-outline": "border border-warning text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-light focus-visible:ring-offset-white transition-all",
+        "warning-ghost": "text-warning bg-white hover:bg-warning/20 focus-visible:ring-warning-light focus-visible:ring-offset-white",
+        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        "danger-outline": "border border-danger text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-light focus-visible:ring-offset-white transition-all",
+        "danger-ghost": "text-danger bg-white hover:bg-danger/20 focus-visible:ring-danger-light focus-visible:ring-offset-white",
         outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white transition-all",
         destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md"
       },
@@ -879,6 +874,9 @@ const buttonIconVariants = cva(
       info: "text-info",
       warning: "text-warning",
       danger: "text-danger",
+      gray: "text-gray-500",
+      black: "text-black",
+      white: "text-white",
       inherit: ""
     }
   },
@@ -886,13 +884,13 @@ const buttonIconVariants = cva(
     size: "md",
     color: "primary"
   }
-}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: o, ...n }, i) {
+}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: n, ...o }, i) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     t,
     {
       ref: i,
-      className: iconVariants({ color: r, size: s, className: o }),
-      ...n
+      className: iconVariants({ color: r, size: s, className: n }),
+      ...o
     }
   );
 }), ButtonIcon = React__default.forwardRef(
@@ -900,30 +898,30 @@ const buttonIconVariants = cva(
     className: t,
     variant: r = "primary",
     size: s = "md",
-    shape: o = "rounded",
-    disabled: n = !1,
+    shape: n = "rounded",
+    disabled: o = !1,
     as: i,
     "aria-label": a,
-    ...g
-  }, c) {
+    ...c
+  }, u) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
-        ref: c,
+        ref: u,
         type: "button",
         className: cn(
           buttonIconVariants({
             variant: r,
             size: s,
-            shape: o
+            shape: n
           }),
           t
         ),
-        disabled: n,
-        "aria-disabled": n,
+        disabled: o,
+        "aria-disabled": o,
         "aria-label": a,
-        inert: n ? !0 : void 0,
-        ...g,
+        inert: o ? !0 : void 0,
+        ...c,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Icon,
           {
@@ -1051,9 +1049,9 @@ const BUTTONS = [
     onChange: t,
     disabled: r,
     className: s,
-    "aria-label": o
-  }, n) => {
-    const { input: i, inputRef: a, handleButton: g, handleInput: c } = useCalculator({
+    "aria-label": n
+  }, o) => {
+    const { input: i, inputRef: a, handleButton: c, handleInput: u } = useCalculator({
       initialValue: e,
       disabled: r,
       onChange: t
@@ -1061,9 +1059,9 @@ const BUTTONS = [
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        ref: n,
+        ref: o,
         className: cn(calculatorRootVariants({ disabled: r }), s),
-        "aria-label": o || "Calculator",
+        "aria-label": n || "Calculator",
         role: "region",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1072,33 +1070,33 @@ const BUTTONS = [
               ref: a,
               className: "w-full mb-3 px-3 py-2 rounded border border-[var(--color-neutral)] bg-[var(--color-neutral-soft)] text-right text-xl font-mono focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]",
               value: i,
-              onChange: c,
+              onChange: u,
               disabled: r,
               inputMode: "decimal",
               "aria-label": "Calculator input"
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((m, b) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: m.map((f) => f === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((m, b) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: m.map((d) => d === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             ButtonIcon,
             {
               as: X,
               variant: "danger-ghost",
               "aria-label": "Backspace",
               size: "md",
-              onClick: () => g("⌫"),
+              onClick: () => c("⌫"),
               disabled: r
             },
             "backspace"
           ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
             CalculatorButton,
             {
-              variant: f === "=" ? "action" : f === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(f) ? "operator" : "default",
-              onClick: () => g(f),
+              variant: d === "=" ? "action" : d === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(d) ? "operator" : "default",
+              onClick: () => c(d),
               disabled: r,
-              "aria-label": f,
-              children: f
+              "aria-label": d,
+              children: d
             },
-            f
+            d
           )) }, b)) })
         ]
       }
@@ -1149,9 +1147,9 @@ const CalendarHeader = () => {
     ] })
   ] });
 }, CalendarWeekdays = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 px-4 text-ghost-500 mb-3", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((e) => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fontSize: "xs", color: "ghost", align: "center", children: e }, e)) }), CalendarDaysSingle = () => {
-  const e = useCalendarContext(), { year: t, month: r, value: s, onChange: o, setMonth: n, setYear: i } = e, a = (u, x) => new Date(u, x + 1, 0).getDate(), c = ((u, x) => new Date(u, x, 1).getDay())(t, r), m = a(t, r), b = r - 1 < 0 ? 11 : r - 1, f = r === 0 ? t - 1 : t, p = a(t, b), y = r === 11 ? 0 : r + 1, d = r === 11 ? t + 1 : t, v = [];
-  for (let u = 0; u < c; u++) {
-    const x = p - c + u + 1;
+  const e = useCalendarContext(), { year: t, month: r, value: s, onChange: n, setMonth: o, setYear: i } = e, a = (g, x) => new Date(g, x + 1, 0).getDate(), u = ((g, x) => new Date(g, x, 1).getDay())(t, r), m = a(t, r), b = r - 1 < 0 ? 11 : r - 1, d = r === 0 ? t - 1 : t, p = a(t, b), y = r === 11 ? 0 : r + 1, f = r === 11 ? t + 1 : t, v = [];
+  for (let g = 0; g < u; g++) {
+    const x = p - u + g + 1;
     v.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
@@ -1161,15 +1159,15 @@ const CalendarHeader = () => {
           "aria-label": "Previous month day",
           variant: "ghost",
           onClick: () => {
-            o?.(new Date(f, b, x)), n(b), i(f);
+            n?.(new Date(d, b, x)), o(b), i(d);
           }
         },
-        "prev-" + u
+        "prev-" + g
       )
     );
   }
-  for (let u = 1; u <= m; u++) {
-    const x = s instanceof Date && s.getFullYear() === t && s.getMonth() === r && s.getDate() === u;
+  for (let g = 1; g <= m; g++) {
+    const x = s instanceof Date && s.getFullYear() === t && s.getMonth() === r && s.getDate() === g;
     v.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
@@ -1181,52 +1179,52 @@ const CalendarHeader = () => {
               fontSize: "sm",
               color: x ? "inherit" : "ghost",
               className: x ? "bg-primary text-white rounded-full" : "",
-              children: u
+              children: g
             }
           ),
           variant: x ? "primary" : "ghost",
           size: "sm",
-          "aria-label": `Select ${t}-${r + 1}-${u}`,
+          "aria-label": `Select ${t}-${r + 1}-${g}`,
           "aria-current": x ? "date" : void 0,
           onClick: () => {
-            o?.(new Date(t, r, u));
+            n?.(new Date(t, r, g));
           }
         },
-        u
+        g
       )
     );
   }
-  const w = c + m;
-  for (let u = 0; u < (w % 7 === 0 ? 0 : 7 - w % 7); u++)
+  const w = u + m;
+  for (let g = 0; g < (w % 7 === 0 ? 0 : 7 - w % 7); g++)
     v.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
         {
-          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: u + 1 }),
+          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: g + 1 }),
           size: "sm",
           "aria-label": "Next month day",
           variant: "ghost",
           onClick: () => {
-            o?.(new Date(d, y, u + 1)), n(y), i(d);
+            n?.(new Date(f, y, g + 1)), o(y), i(f);
           }
         },
-        "next-" + u
+        "next-" + g
       )
     );
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-2 px-4 pb-4", children: v });
 }, CalendarDaysRange = () => {
-  const { year: e, month: t, value: r, onChange: s, setMonth: o, setYear: n } = useCalendarContext(), i = (l, h) => new Date(l, h + 1, 0).getDate(), g = ((l, h) => new Date(l, h, 1).getDay())(e, t), c = i(e, t), m = t - 1 < 0 ? 11 : t - 1, b = t === 0 ? e - 1 : e, f = i(e, m), p = t === 11 ? 0 : t + 1, y = t === 11 ? e + 1 : e, d = [], v = () => {
+  const { year: e, month: t, value: r, onChange: s, setMonth: n, setYear: o } = useCalendarContext(), i = (l, h) => new Date(l, h + 1, 0).getDate(), c = ((l, h) => new Date(l, h, 1).getDay())(e, t), u = i(e, t), m = t - 1 < 0 ? 11 : t - 1, b = t === 0 ? e - 1 : e, d = i(e, m), p = t === 11 ? 0 : t + 1, y = t === 11 ? e + 1 : e, f = [], v = () => {
     if (!Array.isArray(r)) return [null, null];
     const [l, h] = r;
     return !l && !h ? [null, null] : l && h ? l <= h ? [l, h] : [h, l] : [l, h];
-  }, [w, u] = v(), x = (l) => {
-    if (!w || !u) return !1;
+  }, [w, g] = v(), x = (l) => {
+    if (!w || !g) return !1;
     const h = new Date(e, t, l);
-    return h >= w && h <= u;
-  }, S = (l) => w ? w.getFullYear() === e && w.getMonth() === t && w.getDate() === l : !1, N = (l) => u ? u.getFullYear() === e && u.getMonth() === t && u.getDate() === l : !1;
-  for (let l = 0; l < g; l++) {
-    const h = f - g + l + 1;
-    d.push(
+    return h >= w && h <= g;
+  }, I = (l) => w ? w.getFullYear() === e && w.getMonth() === t && w.getDate() === l : !1, S = (l) => g ? g.getFullYear() === e && g.getMonth() === t && g.getDate() === l : !1;
+  for (let l = 0; l < c; l++) {
+    const h = d - c + l + 1;
+    f.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
         {
@@ -1235,16 +1233,16 @@ const CalendarHeader = () => {
           "aria-label": "Previous month day",
           variant: "ghost",
           onClick: () => {
-            s?.([null, null]), o(m), n(b);
+            s?.([null, null]), n(m), o(b);
           }
         },
         "prev-" + l
       )
     );
   }
-  for (let l = 1; l <= c; l++) {
-    const h = x(l), E = S(l), C = N(l);
-    d.push(
+  for (let l = 1; l <= u; l++) {
+    const h = x(l), E = I(l), C = S(l);
+    f.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
         {
@@ -1279,9 +1277,9 @@ const CalendarHeader = () => {
       )
     );
   }
-  const I = g + c;
-  for (let l = 0; l < (I % 7 === 0 ? 0 : 7 - I % 7); l++)
-    d.push(
+  const N = c + u;
+  for (let l = 0; l < (N % 7 === 0 ? 0 : 7 - N % 7); l++)
+    f.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
         {
@@ -1290,13 +1288,13 @@ const CalendarHeader = () => {
           "aria-label": "Next month day",
           variant: "ghost",
           onClick: () => {
-            s?.([null, null]), o(p), n(y);
+            s?.([null, null]), n(p), o(y);
           }
         },
         "next-" + l
       )
     );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-2 px-4 pb-4", children: d });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-2 px-4 pb-4", children: f });
 }, CalendarDays = () => {
   const { type: e } = useCalendarContext();
   return e === "range" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDaysRange, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDaysSingle, {});
@@ -1306,34 +1304,34 @@ function useCalendar({
   type: t,
   onChange: r,
   initialYear: s,
-  initialMonth: o
+  initialMonth: n
 }) {
-  const [n, i] = useState(o), [a, g] = useState(s), [c, m] = useState([
+  const [o, i] = useState(n), [a, c] = useState(s), [u, m] = useState([
     null,
     null
   ]);
   let b = e;
-  t === "range" && !e && (b = c);
-  const f = useCallback(() => {
-    const d = n === 0 ? 11 : n - 1, v = n === 0 ? a - 1 : a;
-    i(d), g(v), t === "single" && r?.(new Date(v, d, 1));
-  }, [n, a, t, r]), p = useCallback(() => {
-    const d = n === 11 ? 0 : n + 1, v = n === 11 ? a + 1 : a;
-    i(d), g(v), t === "single" && r?.(new Date(v, d, 1));
-  }, [n, a, t, r]), y = useCallback(
-    (d) => {
-      t === "single" ? r?.(d) : t === "range" && (m(d), r?.(d));
+  t === "range" && !e && (b = u);
+  const d = useCallback(() => {
+    const f = o === 0 ? 11 : o - 1, v = o === 0 ? a - 1 : a;
+    i(f), c(v), t === "single" && r?.(new Date(v, f, 1));
+  }, [o, a, t, r]), p = useCallback(() => {
+    const f = o === 11 ? 0 : o + 1, v = o === 11 ? a + 1 : a;
+    i(f), c(v), t === "single" && r?.(new Date(v, f, 1));
+  }, [o, a, t, r]), y = useCallback(
+    (f) => {
+      t === "single" ? r?.(f) : t === "range" && (m(f), r?.(f));
     },
     [t, r]
   );
   return {
     year: a,
-    month: n,
+    month: o,
     value: b,
     setMonth: i,
-    setYear: g,
+    setYear: c,
     onChange: y,
-    handlePrevMonth: f,
+    handlePrevMonth: d,
     handleNextMonth: p
   };
 }
@@ -1342,14 +1340,14 @@ const CalendarRoot = ({
   onChange: t,
   className: r,
   type: s = "single",
-  ...o
+  ...n
 }) => {
-  const n = /* @__PURE__ */ new Date(), i = useCalendar({
+  const o = /* @__PURE__ */ new Date(), i = useCalendar({
     value: e,
     onChange: t,
     type: s,
-    initialYear: n.getFullYear(),
-    initialMonth: n.getMonth()
+    initialYear: o.getFullYear(),
+    initialMonth: o.getMonth()
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     CalendarContext.Provider,
@@ -1363,14 +1361,60 @@ const CalendarRoot = ({
         setYear: i.setYear,
         onChange: i.onChange
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("select-none", r), ...o, children: [
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("select-none", r), ...n, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarHeader, {}),
         /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarWeekdays, {}),
         /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDays, {})
       ] })
     }
   );
-}, Calendar = Object.assign(CalendarRoot, {}), TableContext = createContext(null), TableProvider = TableContext.Provider;
+}, Calendar = Object.assign(CalendarRoot, {}), noResultsVariants = cva(
+  "flex flex-col items-center justify-center text-center border border-border rounded-lg bg-background",
+  {
+    variants: {
+      spacing: {
+        sm: "py-8",
+        md: "py-12",
+        lg: "py-16"
+      },
+      hasGrayBackground: {
+        true: "bg-neutral-soft",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      spacing: "md",
+      hasGrayBackground: !1
+    }
+  }
+), noResultsHeaderVariants = cva(
+  "flex flex-row items-center gap-3 mb-2"
+), noResultsTitleVariants = cva(
+  "text-lg font-semibold text-foreground"
+), noResultsSubtitleVariants = cva(
+  "text-foreground-light mb-6 max-w-md"
+), NoResults = React__default.forwardRef(
+  function e({ icon: t, title: r, subtitle: s, action: n, className: o, hasGrayBackground: i, ...a }, c) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "section",
+      {
+        ref: c,
+        className: cn(noResultsVariants({ hasGrayBackground: i }), o),
+        role: "status",
+        "aria-label": "No results found",
+        ...a,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: noResultsHeaderVariants(), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: t, size: "lg", color: "ghost", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h2", className: noResultsTitleVariants(), children: r })
+          ] }),
+          s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", className: noResultsSubtitleVariants(), children: s }),
+          n && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "group", "aria-label": "Available actions", children: n })
+        ]
+      }
+    );
+  }
+), TableContext = createContext(null), TableProvider = TableContext.Provider;
 function useTableContext() {
   const e = useContext(TableContext);
   if (!e)
@@ -1441,7 +1485,7 @@ const getTableColumnClass = (e) => {
   }
 }, TableHeader = forwardRef(
   ({ children: e, className: t, ...r }, s) => {
-    const { columns: o } = useTableContext();
+    const { columns: n } = useTableContext();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -1453,7 +1497,7 @@ const getTableColumnClass = (e) => {
           "div",
           {
             role: "row",
-            className: cn("grid gap-4", getTableColumnClass(o)),
+            className: cn("grid gap-4", getTableColumnClass(n)),
             children: e
           }
         )
@@ -1464,7 +1508,7 @@ const getTableColumnClass = (e) => {
   ({ children: e, className: t, ...r }, s) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "rowgroup", ref: s, className: cn(t), ...r, children: e })
 ), TableFooter = forwardRef(
   ({ children: e, className: t, ...r }, s) => {
-    const { columns: o } = useTableContext();
+    const { columns: n } = useTableContext();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -1476,7 +1520,7 @@ const getTableColumnClass = (e) => {
           "div",
           {
             role: "row",
-            className: cn("grid gap-4", getTableColumnClass(o)),
+            className: cn("grid gap-4", getTableColumnClass(n)),
             children: e
           }
         )
@@ -1485,14 +1529,14 @@ const getTableColumnClass = (e) => {
   }
 ), TableRow = forwardRef(
   ({ children: e, className: t, ...r }, s) => {
-    const { columns: o } = useTableContext();
+    const { columns: n } = useTableContext();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         role: "row",
         className: cn(
           "grid gap-4",
-          getTableColumnClass(o),
+          getTableColumnClass(n),
           "border-b border-border last:border-0",
           t
         ),
@@ -1503,10 +1547,10 @@ const getTableColumnClass = (e) => {
     );
   }
 ), TableColumn = forwardRef(
-  ({ as: e = "td", span: t, align: r = "left", children: s, className: o, ...n }, i) => {
+  ({ as: e = "td", span: t, align: r = "left", children: s, className: n, ...o }, i) => {
     const a = e === "th" ? "columnheader" : "cell";
-    let g = "text-left";
-    return r === "center" ? g = "text-center" : r === "right" && (g = "text-right"), /* @__PURE__ */ jsxRuntimeExports.jsx(
+    let c = "text-left";
+    return r === "center" ? c = "text-center" : r === "right" && (c = "text-right"), /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         ref: i,
@@ -1515,11 +1559,11 @@ const getTableColumnClass = (e) => {
           "px-4 py-2",
           "[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border",
           getRowSpanClass(t),
-          g,
+          c,
           "truncate overflow-hidden whitespace-nowrap",
-          o
+          n
         ),
-        ...n,
+        ...o,
         children: s
       }
     );
@@ -1551,10 +1595,10 @@ const getTableColumnClass = (e) => {
     }
   )
 ), TableRoot = forwardRef(
-  ({ children: e, className: t, columns: r = 12, ...s }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableProvider, { value: { columns: r }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ({ children: e, className: t, columns: r = 12, ...s }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableProvider, { value: { columns: r }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      ref: o,
+      ref: n,
       role: "table",
       className: cn(
         // Versaur design system: border, background, shadow, rounded, spacing
@@ -1611,12 +1655,12 @@ const getTableColumnClass = (e) => {
     }
   }
 ), Tile = forwardRef(
-  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...o }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...n }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      ref: n,
+      ref: o,
       className: cn(tileVariants({ variant: e, size: t, shape: r }), s),
-      ...o
+      ...n
     }
   )
 );
@@ -1650,19 +1694,19 @@ function getColSpan(e = 4) {
       return "col-span-4";
   }
 }
-const DescriptionListItem = forwardRef(function e({ children: t, className: r, span: s = 4, ...o }, n) {
+const DescriptionListItem = forwardRef(function e({ children: t, className: r, span: s = 4, ...n }, o) {
   const i = getColSpan(s);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: n, className: cn(i, r), ...o, children: t });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: o, className: cn(i, r), ...n, children: t });
 }), DescriptionListTerm = forwardRef(function e({ children: t, ...r }, s) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("dt", { ref: s, ...r, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", fontWeight: "medium", color: "gray", children: t }) });
-}), DescriptionListDetails = forwardRef(function e({ children: t, color: r = "black", ...s }, o) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("dd", { ref: o, ...s, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "base", fontWeight: "medium", color: r, children: t }) });
+}), DescriptionListDetails = forwardRef(function e({ children: t, color: r = "black", ...s }, n) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("dd", { ref: n, ...s, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "base", fontWeight: "medium", color: r, children: t }) });
 }), DescriptionListRoot = forwardRef(
-  function e({ children: t, className: r, ...s }, o) {
+  function e({ children: t, className: r, ...s }, n) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "dl",
       {
-        ref: o,
+        ref: n,
         className: cn("grid grid-cols-12 gap-y-4", r),
         ...s,
         children: t
@@ -1675,20 +1719,20 @@ const DescriptionListItem = forwardRef(function e({ children: t, className: r, s
   Details: DescriptionListDetails
 });
 function useImage({ src: e }) {
-  const [t, r] = useState(!1), [s, o] = useState(!1), n = useRef(!1), i = () => {
+  const [t, r] = useState(!1), [s, n] = useState(!1), o = useRef(!1), i = () => {
     r(!0);
   }, a = () => {
-    o(!0);
+    n(!0);
   };
   return useEffect(() => {
     if (!e) return;
-    const g = new Image();
-    return g.src = e, g.onload = () => {
-      n.current || r(!0);
-    }, g.onerror = () => {
-      n.current || o(!0);
+    const c = new Image();
+    return c.src = e, c.onload = () => {
+      o.current || r(!0);
+    }, c.onerror = () => {
+      o.current || n(!0);
     }, () => {
-      n.current = !0;
+      o.current = !0;
     };
   }, [e]), {
     loaded: t,
@@ -1755,13 +1799,13 @@ function BaseImageSkeleton({
   shape: t,
   size: r,
   height: s,
-  width: o
+  width: n
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Skeleton,
     {
       className: cn(imageAtomVariants({ shape: t, size: r }), e),
-      style: { height: s, width: o }
+      style: { height: s, width: n }
     }
   );
 }
@@ -1770,15 +1814,15 @@ function BaseImageFallback({
   width: t,
   height: r,
   className: s,
-  style: o,
-  shape: n,
+  style: n,
+  shape: o,
   size: i
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: imageAtomVariants({ shape: n, size: i, className: s }),
-      style: { width: t, height: r, ...o },
+      className: imageAtomVariants({ shape: o, size: i, className: s }),
+      style: { width: t, height: r, ...n },
       "aria-label": e,
       role: "img",
       children: [
@@ -1801,52 +1845,52 @@ const BaseImage = forwardRef(
     alt: t,
     onLoad: r,
     onError: s,
-    width: o,
-    height: n,
+    width: n,
+    height: o,
     loading: i = "lazy",
     position: a = "cover",
-    size: g = "auto",
-    shape: c,
+    size: c = "auto",
+    shape: u,
     className: m,
     ...b
-  }, f) => {
-    const { loaded: p, errored: y, handleLoad: d, handleError: v } = useImage({
+  }, d) => {
+    const { loaded: p, errored: y, handleLoad: f, handleError: v } = useImage({
       src: e
-    }), w = typeof o == "number" ? o : Number(o), u = typeof n == "number" ? n : Number(n);
+    }), w = typeof n == "number" ? n : Number(n), g = typeof o == "number" ? o : Number(o);
     return !p && !y ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageSkeleton,
       {
-        shape: c,
+        shape: u,
         width: w,
-        height: u
+        height: g
       }
     ) : y ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageFallback,
       {
-        shape: c,
+        shape: u,
         alt: t,
         width: w,
-        height: u
+        height: g
       }
     ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
-        ref: f,
+        ref: d,
         src: e,
         alt: t,
         width: w,
-        height: u,
+        height: g,
         loading: i,
         className: cn(
           imageVariants({
             position: a,
-            size: g,
-            shape: c
+            size: c,
+            shape: u
           }),
           m
         ),
         onLoad: (x) => {
-          d(), r?.(x);
+          f(), r?.(x);
         },
         onError: (x) => {
           v(), s?.(x);
@@ -1862,6 +1906,7 @@ export {
   Calculator as C,
   DescriptionList as D,
   Icon as I,
+  NoResults as N,
   Table as T,
   Anchor as a,
   Avatar as b,