@dimasbaguspm/versaur 0.0.27 → 0.0.28

package/dist/js/{image-rectangle-BGLYH2Gl.js → image-rectangle-C1zMt0DR.js}

@@ -1,7 +1,7 @@
 import { c as cva, j as jsxRuntimeExports, a as cn } from "./index-DOdDlCoL.js";
 import * as React from "react";
 import React__default, { forwardRef, useState, useEffect, useCallback, useRef, createContext, useContext } from "react";
-import { X, ChevronLeft, ChevronRight, ImageOff } from "lucide-react";
+import { X, ChevronLeft, ChevronRight, XIcon, ImageOff } from "lucide-react";
 import { S as Skeleton } from "./skeleton-BNZyaRjo.js";
 const alertVariants = cva(
   "relative flex items-center gap-2 rounded-md p-2 text-sm transition-all duration-200",
@@ -146,18 +146,18 @@ const alertVariants = cva(
     color: t = "neutral",
     icon: r,
     className: s,
-    children: n,
-    ...i
+    children: i,
+    ...n
   }, o) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
       ref: o,
       role: "alert",
       className: cn(alertVariants({ variant: e, color: t }), s),
-      ...i,
+      ...n,
       children: [
         r && /* @__PURE__ */ jsxRuntimeExports.jsx(AlertIcon, { children: r }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: n })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: i })
       ]
     }
   )
@@ -226,15 +226,15 @@ const alertVariants = cva(
     className: t,
     color: r = "primary",
     fontSize: s = "base",
-    fontWeight: n = "medium",
-    quiet: i = !1,
+    fontWeight: i = "medium",
+    quiet: n = !1,
     ...o
   }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "a",
     {
       ref: a,
       className: cn(
-        anchorVariants({ color: r, fontSize: s, fontWeight: n, quiet: i }),
+        anchorVariants({ color: r, fontSize: s, fontWeight: i, quiet: n }),
         t
       ),
       ...o,
@@ -285,19 +285,19 @@ const alertVariants = cva(
     size: t = "md",
     shape: r = "circle",
     className: s,
-    children: n,
-    ...i
+    children: i,
+    ...n
   }, o) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       ref: o,
       className: cn(avatarVariants({ variant: e, size: t, shape: r }), s),
-      ...i,
-      children: n
+      ...n,
+      children: i
     }
   )
 ), AvatarImage = forwardRef(
-  ({ src: e, alt: t, className: r, onError: s, ...n }, i) => {
+  ({ src: e, alt: t, className: r, onError: s, ...i }, n) => {
     const [o, a] = useState(!1);
     useEffect(() => {
       a(!1);
@@ -311,12 +311,12 @@ const alertVariants = cva(
     return o ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
-        ref: i,
+        ref: n,
         src: e,
         alt: t,
         className: cn(avatarImageVariants(), r),
         onError: l,
-        ...n
+        ...i
       }
     );
   }
@@ -484,13 +484,13 @@ const alertVariants = cva(
     shape: t = "square",
     color: r = "primary",
     size: s = "md",
-    iconLeft: n,
-    iconRight: i,
+    iconLeft: i,
+    iconRight: n,
     className: o,
     children: a,
     ...l
   }, c) => {
-    const d = !(a != null && a !== "") && !!(n || i);
+    const d = !(a != null && a !== "") && !!(i || n);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "span",
       {
@@ -508,13 +508,13 @@ const alertVariants = cva(
         ...l,
         children: d ? (
           // Icon-only mode: display only the icon
-          n || i
+          i || n
         ) : (
           // Normal mode: display icon(s) and text
           /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            n,
+            i,
             a,
-            i
+            n
           ] })
         )
       }
@@ -537,13 +537,13 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
   }
 }), BrandLogo = forwardRef(
   ({ shape: e = "square", size: t, ...r }, s) => {
-    const i = {
+    const n = {
       square: SvgSpenicleSquare,
       rounded: SvgSpenicleRounded,
       circle: SvgSpenicleCircle
     }[e] || SvgSpenicleSquare;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      i,
+      n,
       {
         ref: s,
         ...r,
@@ -552,10 +552,10 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
     );
   }
 ), Brand = forwardRef(
-  ({ name: e = "spenicle", size: t = "md", shape: r, ...s }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ({ name: e = "spenicle", size: t = "md", shape: r, ...s }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "span",
     {
-      ref: n,
+      ref: i,
       className: cn("inline-flex items-center gap-2"),
       ...s,
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(BrandLogo, { shape: r, size: t, "aria-hidden": "true" })
@@ -616,8 +616,8 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
     className: t,
     variant: r = "primary",
     size: s = "md",
-    disabled: n = !1,
-    type: i = "button",
+    disabled: i = !1,
+    type: n = "button",
     children: o,
     ...a
   }, l) {
@@ -625,11 +625,11 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
       "button",
       {
         ref: l,
-        type: i,
+        type: n,
         className: cn(buttonVariants({ variant: r, size: s }), t),
-        disabled: n,
-        "aria-disabled": n,
-        inert: n ? !0 : void 0,
+        disabled: i,
+        "aria-disabled": i,
+        inert: i ? !0 : void 0,
         ...a,
         children: o
       }
@@ -703,7 +703,7 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
   }
 );
 function useFloatingPosition(e, t = "1rem") {
-  const r = useRef(null), [s, n] = useState({}), [i, o] = useState("fixed bottom-4 right-4"), a = useCallback(() => {
+  const r = useRef(null), [s, i] = useState({}), [n, o] = useState("fixed bottom-4 right-4"), a = useCallback(() => {
     const c = r.current;
     if (!c) return;
     const h = c.getBoundingClientRect().height > window.innerHeight;
@@ -717,7 +717,7 @@ function useFloatingPosition(e, t = "1rem") {
       position: "fixed",
       bottom: t,
       zIndex: 50
-    }, p = `fixed bottom-4 ${e}-4`), n(d), o(p);
+    }, p = `fixed bottom-4 ${e}-4`), i(d), o(p);
   }, [e, t]);
   return useEffect(() => {
     a();
@@ -732,20 +732,20 @@ function useFloatingPosition(e, t = "1rem") {
       r.current = c, c && a();
     },
     [a]
-  ), s, i];
+  ), s, n];
 }
 const ButtonFloat = forwardRef(
   function({
     className: t,
     variant: r = "primary",
     size: s = "md",
-    side: n = "right",
-    offset: i = "1rem",
+    side: i = "right",
+    offset: n = "1rem",
     ...o
   }, a) {
     const [l, c, x] = useFloatingPosition(
-      n,
-      i
+      i,
+      n
     ), [h, d] = useState(!1);
     return useEffect(() => {
       d(!0);
@@ -883,13 +883,13 @@ const buttonIconVariants = cva(
     size: "md",
     color: "primary"
   }
-}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: n, ...i }, o) {
+}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: s = "md", className: i, ...n }, o) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     t,
     {
       ref: o,
-      className: iconVariants({ color: r, size: s, className: n }),
-      ...i
+      className: iconVariants({ color: r, size: s, className: i }),
+      ...n
     }
   );
 }), ButtonIcon = React__default.forwardRef(
@@ -897,8 +897,8 @@ const buttonIconVariants = cva(
     className: t,
     variant: r = "primary",
     size: s = "md",
-    shape: n = "rounded",
-    disabled: i = !1,
+    shape: i = "rounded",
+    disabled: n = !1,
     as: o,
     "aria-label": a,
     ...l
@@ -912,14 +912,14 @@ const buttonIconVariants = cva(
           buttonIconVariants({
             variant: r,
             size: s,
-            shape: n
+            shape: i
           }),
           t
         ),
-        disabled: i,
-        "aria-disabled": i,
+        disabled: n,
+        "aria-disabled": n,
         "aria-label": a,
-        inert: i ? !0 : void 0,
+        inert: n ? !0 : void 0,
         ...l,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Icon,
@@ -1048,8 +1048,8 @@ const BUTTONS = [
     onChange: t,
     disabled: r,
     className: s,
-    "aria-label": n
-  }, i) => {
+    "aria-label": i
+  }, n) => {
     const { input: o, inputRef: a, handleButton: l, handleInput: c } = useCalculator({
       initialValue: e,
       disabled: r,
@@ -1058,9 +1058,9 @@ const BUTTONS = [
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        ref: i,
+        ref: n,
         className: cn(calculatorRootVariants({ disabled: r }), s),
-        "aria-label": n || "Calculator",
+        "aria-label": i || "Calculator",
         role: "region",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1178,8 +1178,8 @@ const textVariants = cva("", {
     color: t = "ghost",
     hasUnderline: r = !1,
     isCapitalize: s = !1,
-    align: n = "left",
-    italic: i = !1,
+    align: i = "left",
+    italic: n = !1,
     clamp: o = "none",
     ellipsis: a = !1,
     fontSize: l,
@@ -1208,8 +1208,8 @@ const textVariants = cva("", {
             color: t,
             hasUnderline: r,
             isCapitalize: s,
-            align: n,
-            italic: i,
+            align: i,
+            italic: n,
             clamp: o,
             ellipsis: a,
             // @ts-expect-error - `as` is not a valid variant
@@ -1267,7 +1267,7 @@ 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: n, setMonth: i, setYear: o } = e, a = (g, m) => new Date(g, m + 1, 0).getDate(), c = ((g, m) => new Date(g, m, 1).getDay())(t, r), x = a(t, r), h = r - 1 < 0 ? 11 : r - 1, d = r === 0 ? t - 1 : t, p = a(t, h), y = r === 11 ? 0 : r + 1, f = r === 11 ? t + 1 : t, v = [];
+  const e = useCalendarContext(), { year: t, month: r, value: s, onChange: i, setMonth: n, setYear: o } = e, a = (g, m) => new Date(g, m + 1, 0).getDate(), c = ((g, m) => new Date(g, m, 1).getDay())(t, r), x = a(t, r), h = r - 1 < 0 ? 11 : r - 1, d = r === 0 ? t - 1 : t, p = a(t, h), y = r === 11 ? 0 : r + 1, f = r === 11 ? t + 1 : t, v = [];
   for (let g = 0; g < c; g++) {
     const m = p - c + g + 1;
     v.push(
@@ -1279,7 +1279,7 @@ const CalendarHeader = () => {
           "aria-label": "Previous month day",
           variant: "ghost",
           onClick: () => {
-            n?.(new Date(d, h, m)), i(h), o(d);
+            i?.(new Date(d, h, m)), n(h), o(d);
           }
         },
         "prev-" + g
@@ -1307,7 +1307,7 @@ const CalendarHeader = () => {
           "aria-label": `Select ${t}-${r + 1}-${g}`,
           "aria-current": m ? "date" : void 0,
           onClick: () => {
-            n?.(new Date(t, r, g));
+            i?.(new Date(t, r, g));
           }
         },
         g
@@ -1325,7 +1325,7 @@ const CalendarHeader = () => {
           "aria-label": "Next month day",
           variant: "ghost",
           onClick: () => {
-            n?.(new Date(f, y, g + 1)), i(y), o(f);
+            i?.(new Date(f, y, g + 1)), n(y), o(f);
           }
         },
         "next-" + g
@@ -1333,7 +1333,7 @@ const CalendarHeader = () => {
     );
   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: n, setYear: i } = useCalendarContext(), o = (u, b) => new Date(u, b + 1, 0).getDate(), l = ((u, b) => new Date(u, b, 1).getDay())(e, t), c = o(e, t), x = t - 1 < 0 ? 11 : t - 1, h = t === 0 ? e - 1 : e, d = o(e, x), p = t === 11 ? 0 : t + 1, y = t === 11 ? e + 1 : e, f = [], v = () => {
+  const { year: e, month: t, value: r, onChange: s, setMonth: i, setYear: n } = useCalendarContext(), o = (u, b) => new Date(u, b + 1, 0).getDate(), l = ((u, b) => new Date(u, b, 1).getDay())(e, t), c = o(e, t), x = t - 1 < 0 ? 11 : t - 1, h = t === 0 ? e - 1 : e, d = o(e, x), p = t === 11 ? 0 : t + 1, y = t === 11 ? e + 1 : e, f = [], v = () => {
     if (!Array.isArray(r)) return [null, null];
     const [u, b] = r;
     return !u && !b ? [null, null] : u && b ? u <= b ? [u, b] : [b, u] : [u, b];
@@ -1353,7 +1353,7 @@ const CalendarHeader = () => {
           "aria-label": "Previous month day",
           variant: "ghost",
           onClick: () => {
-            s?.([null, null]), n(x), i(h);
+            s?.([null, null]), i(x), n(h);
           }
         },
         "prev-" + u
@@ -1408,7 +1408,7 @@ const CalendarHeader = () => {
           "aria-label": "Next month day",
           variant: "ghost",
           onClick: () => {
-            s?.([null, null]), n(p), i(y);
+            s?.([null, null]), i(p), n(y);
           }
         },
         "next-" + u
@@ -1424,21 +1424,21 @@ function useCalendar({
   type: t,
   onChange: r,
   initialYear: s,
-  initialMonth: n
+  initialMonth: i
 }) {
-  const [i, o] = useState(n), [a, l] = useState(s), [c, x] = useState([
+  const [n, o] = useState(i), [a, l] = useState(s), [c, x] = useState([
     null,
     null
   ]);
   let h = e;
   t === "range" && !e && (h = c);
   const d = useCallback(() => {
-    const f = i === 0 ? 11 : i - 1, v = i === 0 ? a - 1 : a;
+    const f = n === 0 ? 11 : n - 1, v = n === 0 ? a - 1 : a;
     o(f), l(v), t === "single" && r?.(new Date(v, f, 1));
-  }, [i, a, t, r]), p = useCallback(() => {
-    const f = i === 11 ? 0 : i + 1, v = i === 11 ? a + 1 : a;
+  }, [n, a, t, r]), p = useCallback(() => {
+    const f = n === 11 ? 0 : n + 1, v = n === 11 ? a + 1 : a;
     o(f), l(v), t === "single" && r?.(new Date(v, f, 1));
-  }, [i, a, t, r]), y = useCallback(
+  }, [n, a, t, r]), y = useCallback(
     (f) => {
       t === "single" ? r?.(f) : t === "range" && (x(f), r?.(f));
     },
@@ -1446,7 +1446,7 @@ function useCalendar({
   );
   return {
     year: a,
-    month: i,
+    month: n,
     value: h,
     setMonth: o,
     setYear: l,
@@ -1460,14 +1460,14 @@ const CalendarRoot = ({
   onChange: t,
   className: r,
   type: s = "single",
-  ...n
+  ...i
 }) => {
-  const i = /* @__PURE__ */ new Date(), o = useCalendar({
+  const n = /* @__PURE__ */ new Date(), o = useCalendar({
     value: e,
     onChange: t,
     type: s,
-    initialYear: i.getFullYear(),
-    initialMonth: i.getMonth()
+    initialYear: n.getFullYear(),
+    initialMonth: n.getMonth()
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     CalendarContext.Provider,
@@ -1481,7 +1481,7 @@ const CalendarRoot = ({
         setYear: o.setYear,
         onChange: o.onChange
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("select-none", r), ...n, children: [
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("select-none", r), ...i, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarHeader, {}),
         /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarWeekdays, {}),
         /* @__PURE__ */ jsxRuntimeExports.jsx(CalendarDays, {})
@@ -1545,12 +1545,12 @@ const CalendarRoot = ({
     }
   }
 ), Tile = forwardRef(
-  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...n }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...i }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      ref: i,
+      ref: n,
       className: cn(tileVariants({ variant: e, size: t, shape: r }), s),
-      ...n
+      ...i
     }
   )
 ), Card = forwardRef(
@@ -1559,8 +1559,8 @@ const CalendarRoot = ({
     shape: t = "rounded",
     avatar: r,
     title: s,
-    subtitle: n,
-    badge: i,
+    subtitle: i,
+    badge: n,
     supplementaryInfo: o,
     className: a,
     ...l
@@ -1573,18 +1573,83 @@ const CalendarRoot = ({
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4", children: [
         r && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: r }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("mb-4", !i && !o && "mb-0"), children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("mb-4", !n && !o && "mb-0"), children: [
             s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h3", fontSize: "base", fontWeight: "semibold", children: s }),
-            n && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "xs", color: "gray", children: n })
+            i && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "xs", color: "gray", children: i })
           ] }),
-          (i || o) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
-            i,
+          (n || o) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center", children: [
+            n,
             o && o
           ] })
         ] })
       ] })
     }
   )
+), filterChipVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-full font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none select-none cursor-pointer text-sm leading-none",
+  {
+    variants: {
+      variant: {
+        // Core variants using Versaur color system
+        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-light focus-visible:ring-offset-white shadow-sm",
+        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-light focus-visible:ring-offset-white shadow-sm",
+        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-light focus-visible:ring-offset-white shadow-sm",
+        ghost: "bg-ghost-soft text-foreground hover:bg-ghost-light focus-visible:ring-ghost-light focus-visible:ring-offset-white",
+        neutral: "bg-neutral text-foreground hover:bg-neutral/80 focus-visible:ring-foreground-light focus-visible:ring-offset-white",
+        // Outline variants
+        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary-soft focus-visible:ring-primary-light focus-visible:ring-offset-white",
+        "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary-soft focus-visible:ring-secondary-light focus-visible:ring-offset-white",
+        "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary-soft focus-visible:ring-tertiary-light focus-visible:ring-offset-white",
+        "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
+        "neutral-outline": "border border-neutral text-foreground bg-white hover:bg-neutral/20 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-light focus-visible:ring-offset-white shadow-sm",
+        "success-outline": "border border-success text-success bg-white hover:bg-success-soft 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",
+        "info-outline": "border border-info text-info bg-white hover:bg-info-soft 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",
+        "warning-outline": "border border-warning text-warning bg-white hover:bg-warning-soft 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",
+        "danger-outline": "border border-danger text-danger bg-white hover:bg-danger-soft focus-visible:ring-danger-light focus-visible:ring-offset-white"
+      },
+      size: {
+        sm: "h-7 px-3 text-xs",
+        md: "h-8 px-4 text-sm",
+        lg: "h-9 px-5 text-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral-outline",
+      size: "md"
+    }
+  }
+), FilterChip = React__default.forwardRef(
+  function e({
+    className: t,
+    variant: r = "neutral-outline",
+    size: s = "md",
+    disabled: i = !1,
+    children: n,
+    ...o
+  }, a) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        ref: a,
+        type: "button",
+        className: cn(filterChipVariants({ variant: r, size: s }), t),
+        disabled: i,
+        "aria-disabled": i,
+        "aria-label": `${n}, removable`,
+        inert: i ? !0 : void 0,
+        ...o,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0", children: n }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: XIcon, color: "inherit", size: s === "lg" ? "md" : "sm" })
+        ]
+      }
+    );
+  }
 ), noResultsVariants = cva(
   "flex flex-col items-center justify-center text-center border border-border rounded-lg bg-background",
   {
@@ -1611,12 +1676,12 @@ const CalendarRoot = ({
 ), 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: i, hasGrayBackground: o, ...a }, l) {
+  function e({ icon: t, title: r, subtitle: s, action: i, className: n, hasGrayBackground: o, ...a }, l) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "section",
       {
         ref: l,
-        className: cn(noResultsVariants({ hasGrayBackground: o }), i),
+        className: cn(noResultsVariants({ hasGrayBackground: o }), n),
         role: "status",
         "aria-label": "No results found",
         ...a,
@@ -1626,7 +1691,7 @@ const CalendarRoot = ({
             /* @__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 })
+          i && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "group", "aria-label": "Available actions", children: i })
         ]
       }
     );
@@ -1702,7 +1767,7 @@ const getTableColumnClass = (e) => {
   }
 }, TableHeader = forwardRef(
   ({ children: e, className: t, ...r }, s) => {
-    const { columns: n } = useTableContext();
+    const { columns: i } = useTableContext();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -1714,7 +1779,7 @@ const getTableColumnClass = (e) => {
           "div",
           {
             role: "row",
-            className: cn("grid gap-4", getTableColumnClass(n)),
+            className: cn("grid gap-4", getTableColumnClass(i)),
             children: e
           }
         )
@@ -1725,7 +1790,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: n } = useTableContext();
+    const { columns: i } = useTableContext();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -1737,7 +1802,7 @@ const getTableColumnClass = (e) => {
           "div",
           {
             role: "row",
-            className: cn("grid gap-4", getTableColumnClass(n)),
+            className: cn("grid gap-4", getTableColumnClass(i)),
             children: e
           }
         )
@@ -1746,14 +1811,14 @@ const getTableColumnClass = (e) => {
   }
 ), TableRow = forwardRef(
   ({ children: e, className: t, ...r }, s) => {
-    const { columns: n } = useTableContext();
+    const { columns: i } = useTableContext();
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         role: "row",
         className: cn(
           "grid gap-4",
-          getTableColumnClass(n),
+          getTableColumnClass(i),
           "border-b border-border last:border-0",
           t
         ),
@@ -1764,7 +1829,7 @@ const getTableColumnClass = (e) => {
     );
   }
 ), TableColumn = forwardRef(
-  ({ as: e = "td", span: t, align: r = "left", children: s, className: n, ...i }, o) => {
+  ({ as: e = "td", span: t, align: r = "left", children: s, className: i, ...n }, o) => {
     const a = e === "th" ? "columnheader" : "cell";
     let l = "text-left";
     return r === "center" ? l = "text-center" : r === "right" && (l = "text-right"), /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1778,9 +1843,9 @@ const getTableColumnClass = (e) => {
           getRowSpanClass(t),
           l,
           "truncate overflow-hidden whitespace-nowrap",
-          n
+          i
         ),
-        ...i,
+        ...n,
         children: s
       }
     );
@@ -1812,10 +1877,10 @@ const getTableColumnClass = (e) => {
     }
   )
 ), TableRoot = forwardRef(
-  ({ children: e, className: t, columns: r = 12, ...s }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableProvider, { value: { columns: r }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ({ children: e, className: t, columns: r = 12, ...s }, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(TableProvider, { value: { columns: r }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      ref: n,
+      ref: i,
       role: "table",
       className: cn(
         // Versaur design system: border, background, shadow, rounded, spacing
@@ -1867,19 +1932,19 @@ function getColSpan(e = 4) {
       return "col-span-4";
   }
 }
-const DescriptionListItem = forwardRef(function e({ children: t, className: r, span: s = 4, ...n }, i) {
+const DescriptionListItem = forwardRef(function e({ children: t, className: r, span: s = 4, ...i }, n) {
   const o = getColSpan(s);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: i, className: cn(o, r), ...n, children: t });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: n, className: cn(o, r), ...i, 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 }, n) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("dd", { ref: n, ...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 }, i) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("dd", { ref: i, ...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 }, n) {
+  function e({ children: t, className: r, ...s }, i) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "dl",
       {
-        ref: n,
+        ref: i,
         className: cn("grid grid-cols-12 gap-y-4", r),
         ...s,
         children: t
@@ -1892,20 +1957,20 @@ const DescriptionListItem = forwardRef(function e({ children: t, className: r, s
   Details: DescriptionListDetails
 });
 function useImage({ src: e }) {
-  const [t, r] = useState(!1), [s, n] = useState(!1), i = useRef(!1), o = () => {
+  const [t, r] = useState(!1), [s, i] = useState(!1), n = useRef(!1), o = () => {
     r(!0);
   }, a = () => {
-    n(!0);
+    i(!0);
   };
   return useEffect(() => {
     if (!e) return;
     const l = new Image();
     return l.src = e, l.onload = () => {
-      i.current || r(!0);
+      n.current || r(!0);
     }, l.onerror = () => {
-      i.current || n(!0);
+      n.current || i(!0);
     }, () => {
-      i.current = !0;
+      n.current = !0;
     };
   }, [e]), {
     loaded: t,
@@ -1972,13 +2037,13 @@ function BaseImageSkeleton({
   shape: t,
   size: r,
   height: s,
-  width: n
+  width: i
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Skeleton,
     {
       className: cn(imageAtomVariants({ shape: t, size: r }), e),
-      style: { height: s, width: n }
+      style: { height: s, width: i }
     }
   );
 }
@@ -1987,15 +2052,15 @@ function BaseImageFallback({
   width: t,
   height: r,
   className: s,
-  style: n,
-  shape: i,
+  style: i,
+  shape: n,
   size: o
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: imageAtomVariants({ shape: i, size: o, className: s }),
-      style: { width: t, height: r, ...n },
+      className: imageAtomVariants({ shape: n, size: o, className: s }),
+      style: { width: t, height: r, ...i },
       "aria-label": e,
       role: "img",
       children: [
@@ -2018,8 +2083,8 @@ const BaseImage = forwardRef(
     alt: t,
     onLoad: r,
     onError: s,
-    width: n,
-    height: i,
+    width: i,
+    height: n,
     loading: o = "lazy",
     position: a = "cover",
     size: l = "auto",
@@ -2029,7 +2094,7 @@ const BaseImage = forwardRef(
   }, d) => {
     const { loaded: p, errored: y, handleLoad: f, handleError: v } = useImage({
       src: e
-    }), w = typeof n == "number" ? n : Number(n), g = typeof i == "number" ? i : Number(i);
+    }), w = typeof i == "number" ? i : Number(i), g = typeof n == "number" ? n : Number(n);
     return !p && !y ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       BaseImageSkeleton,
       {
@@ -2078,6 +2143,7 @@ export {
   Badge as B,
   Calculator as C,
   DescriptionList as D,
+  FilterChip as F,
   Icon as I,
   NoResults as N,
   Table as T,