@dimasbaguspm/versaur 0.0.28 → 0.0.30

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

@@ -241,7 +241,224 @@ const alertVariants = cva(
       children: e
     }
   )
-), avatarVariants = cva(
+), textVariants = cva("", {
+  variants: {
+    color: {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      tertiary: "text-tertiary",
+      ghost: "text-ghost",
+      neutral: "text-ghost",
+      success: "text-success",
+      info: "text-info",
+      warning: "text-warning",
+      danger: "text-danger",
+      inherit: "",
+      gray: "text-gray-500",
+      black: "text-black",
+      white: "text-white"
+    },
+    hasUnderline: {
+      true: "underline",
+      false: ""
+    },
+    isCapitalize: {
+      true: "capitalize",
+      false: ""
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify"
+    },
+    italic: {
+      true: "italic",
+      false: ""
+    },
+    clamp: {
+      1: "line-clamp-1",
+      2: "line-clamp-2",
+      3: "line-clamp-3",
+      4: "line-clamp-4",
+      5: "line-clamp-5",
+      none: ""
+    },
+    ellipsis: {
+      true: "truncate",
+      false: ""
+    },
+    as: {
+      h1: "font-bold text-4xl leading-loose",
+      h2: "font-semibold text-3xl leading-relaxed",
+      h3: "font-medium text-2xl leading-relaxed",
+      h4: "font-bold text-xl leading-normal",
+      h5: "font-semibold text-lg leading-normal",
+      h6: "font-medium text-base leading-normal",
+      p: "font-normal text-base leading-normal",
+      span: "font-normal text-base leading-normal",
+      label: "font-normal text-xs leading-normal"
+    }
+  },
+  defaultVariants: {
+    color: "neutral",
+    hasUnderline: !1,
+    isCapitalize: !1,
+    align: "left",
+    italic: !1,
+    clamp: "none",
+    ellipsis: !1,
+    as: "span"
+  }
+}), Text = forwardRef(
+  ({
+    as: e = "span",
+    color: t = "ghost",
+    hasUnderline: r = !1,
+    isCapitalize: s = !1,
+    align: i = "left",
+    italic: n = !1,
+    clamp: o = "none",
+    ellipsis: a = !1,
+    fontSize: l,
+    fontWeight: c,
+    className: h,
+    children: b,
+    ...d
+  }, p) => {
+    const f = [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "p",
+      "span",
+      "label"
+    ].includes(e) ? e : "span", v = l ? `text-${l}` : "", w = c ? `font-${c}` : "";
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      e,
+      {
+        ref: p,
+        className: cn(
+          textVariants({
+            color: t,
+            hasUnderline: r,
+            isCapitalize: s,
+            align: i,
+            italic: n,
+            clamp: o,
+            ellipsis: a,
+            // @ts-expect-error - `as` is not a valid variant
+            as: f
+          }),
+          v,
+          w,
+          h
+        ),
+        ...d,
+        children: b
+      }
+    );
+  }
+), Attribute = forwardRef(
+  function({ title: t, children: r, className: s, ...i }, n) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: n, className: cn("space-y-1", s), ...i, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Text,
+        {
+          as: "h4",
+          fontSize: "sm",
+          fontWeight: "normal",
+          color: "gray",
+          className: "leading-none",
+          children: t
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "base", fontWeight: "normal", children: r })
+    ] });
+  }
+);
+function getColSpan$1(e = 1) {
+  switch (e) {
+    case 1:
+      return "col-span-1";
+    case 2:
+      return "col-span-2";
+    case 3:
+      return "col-span-3";
+    case 4:
+      return "col-span-4";
+    case 5:
+      return "col-span-5";
+    case 6:
+      return "col-span-6";
+    case 7:
+      return "col-span-7";
+    case 8:
+      return "col-span-8";
+    case 9:
+      return "col-span-9";
+    case 10:
+      return "col-span-10";
+    case 11:
+      return "col-span-11";
+    case 12:
+      return "col-span-12";
+    default:
+      return "col-span-1";
+  }
+}
+function getGridCols(e = 4) {
+  switch (e) {
+    case 1:
+      return "grid-cols-1";
+    case 2:
+      return "grid-cols-2";
+    case 3:
+      return "grid-cols-3";
+    case 4:
+      return "grid-cols-4";
+    case 5:
+      return "grid-cols-5";
+    case 6:
+      return "grid-cols-6";
+    case 7:
+      return "grid-cols-7";
+    case 8:
+      return "grid-cols-8";
+    case 9:
+      return "grid-cols-9";
+    case 10:
+      return "grid-cols-10";
+    case 11:
+      return "grid-cols-11";
+    case 12:
+      return "grid-cols-12";
+    default:
+      return "grid-cols-4";
+  }
+}
+const AttributeListItem = forwardRef(function({ children: t, className: r, span: s = 1, title: i, ...n }, o) {
+  const a = getColSpan$1(s);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: o, className: cn(a, r), ...n, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Attribute, { title: i, children: t }) });
+}), AttributeListRoot = forwardRef(
+  function({ children: t, className: r, columns: s = 4, ...i }, n) {
+    const o = getGridCols(s);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "ul",
+      {
+        ref: n,
+        className: cn("grid gap-4", o, r),
+        ...i,
+        children: t
+      }
+    );
+  }
+), AttributeList = Object.assign(AttributeListRoot, {
+  Item: AttributeListItem
+}), avatarVariants = cva(
   "inline-flex items-center justify-center font-medium text-white overflow-hidden transition-all duration-200 select-none relative",
   {
     variants: {
@@ -348,7 +565,7 @@ const alertVariants = cva(
       },
       shape: {
         rounded: "rounded-full",
-        square: "rounded-md"
+        square: "rounded-xs"
       },
       size: {
         sm: "text-xs px-1 py-0.25 h-3",
@@ -365,47 +582,47 @@ const alertVariants = cva(
       {
         variant: "default",
         color: "primary",
-        className: "bg-primary-light text-primary"
+        className: "bg-primary-light/60 text-primary"
       },
       {
         variant: "default",
         color: "secondary",
-        className: "bg-secondary-light text-secondary"
+        className: "bg-secondary-light/70 text-secondary"
       },
       {
         variant: "default",
         color: "tertiary",
-        className: "bg-tertiary-light text-tertiary"
+        className: "bg-tertiary-light/50 text-tertiary"
       },
       {
         variant: "default",
         color: "ghost",
-        className: "bg-ghost-light text-ghost"
+        className: "bg-ghost/05 text-ghost"
       },
       {
         variant: "default",
         color: "neutral",
-        className: "bg-neutral text-foreground"
+        className: "bg-neutral-light text-foreground"
       },
       {
         variant: "default",
         color: "success",
-        className: "bg-success-light text-success"
+        className: "bg-success-light/40 text-success"
       },
       {
         variant: "default",
         color: "info",
-        className: "bg-info-light text-info"
+        className: "bg-info-light/50 text-info"
       },
       {
         variant: "default",
         color: "warning",
-        className: "bg-warning-light text-warning"
+        className: "bg-warning-light/50 text-warning"
       },
       {
         variant: "default",
         color: "danger",
-        className: "bg-danger-light text-danger"
+        className: "bg-danger-light/40 text-danger"
       },
       // Outline variant color combinations
       {
@@ -520,9 +737,7 @@ const alertVariants = cva(
       }
     );
   }
-);
-Badge.displayName = "Badge";
-const 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" }))), brandSizeClass = cva("", {
   variants: {
     size: {
       xs: "h-6 w-6",
@@ -577,7 +792,7 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
         "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",
+        "neutral-outline": "border border-border 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/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",
@@ -670,7 +885,7 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
         "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",
+        "neutral-outline": "border border-border 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",
@@ -706,9 +921,9 @@ function useFloatingPosition(e, t = "1rem") {
   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;
+    const b = c.getBoundingClientRect().height > window.innerHeight;
     let d = {}, p = "";
-    h ? (d = {
+    b ? (d = {
       position: "fixed",
       bottom: t,
       zIndex: 50,
@@ -743,10 +958,10 @@ const ButtonFloat = forwardRef(
     offset: n = "1rem",
     ...o
   }, a) {
-    const [l, c, x] = useFloatingPosition(
+    const [l, c, h] = useFloatingPosition(
       i,
       n
-    ), [h, d] = useState(!1);
+    ), [b, d] = useState(!1);
     return useEffect(() => {
       d(!0);
     }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: l, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -756,8 +971,8 @@ const ButtonFloat = forwardRef(
         type: o.type || "button",
         className: cn(
           buttonFloatVariants({ variant: r, size: s }),
-          x,
-          h && "animate-fab-in",
+          h,
+          b && "animate-fab-in",
           t
         ),
         style: c,
@@ -815,7 +1030,7 @@ const buttonIconVariants = cva(
         "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",
+        "neutral-outline": "border border-border 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",
@@ -1075,7 +1290,7 @@ const BUTTONS = [
               "aria-label": "Calculator input"
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((x, h) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: x.map((d) => d === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((h, b) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: h.map((d) => d === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             ButtonIcon,
             {
               as: X,
@@ -1096,135 +1311,14 @@ const BUTTONS = [
               children: d
             },
             d
-          )) }, h)) })
+          )) }, b)) })
         ]
       }
     );
   }
 );
 Calculator.displayName = "Calculator";
-const textVariants = cva("", {
-  variants: {
-    color: {
-      primary: "text-primary",
-      secondary: "text-secondary",
-      tertiary: "text-tertiary",
-      ghost: "text-ghost",
-      neutral: "text-ghost",
-      success: "text-success",
-      info: "text-info",
-      warning: "text-warning",
-      danger: "text-danger",
-      inherit: "",
-      gray: "text-gray-500",
-      black: "text-black",
-      white: "text-white"
-    },
-    hasUnderline: {
-      true: "underline",
-      false: ""
-    },
-    isCapitalize: {
-      true: "capitalize",
-      false: ""
-    },
-    align: {
-      left: "text-left",
-      center: "text-center",
-      right: "text-right",
-      justify: "text-justify"
-    },
-    italic: {
-      true: "italic",
-      false: ""
-    },
-    clamp: {
-      1: "line-clamp-1",
-      2: "line-clamp-2",
-      3: "line-clamp-3",
-      4: "line-clamp-4",
-      5: "line-clamp-5",
-      none: ""
-    },
-    ellipsis: {
-      true: "truncate",
-      false: ""
-    },
-    as: {
-      h1: "font-bold text-4xl leading-loose",
-      h2: "font-semibold text-3xl leading-relaxed",
-      h3: "font-medium text-2xl leading-relaxed",
-      h4: "font-bold text-xl leading-normal",
-      h5: "font-semibold text-lg leading-normal",
-      h6: "font-medium text-base leading-normal",
-      p: "font-normal text-base leading-normal",
-      span: "font-normal text-base leading-normal",
-      label: "font-normal text-xs leading-normal"
-    }
-  },
-  defaultVariants: {
-    color: "neutral",
-    hasUnderline: !1,
-    isCapitalize: !1,
-    align: "left",
-    italic: !1,
-    clamp: "none",
-    ellipsis: !1,
-    as: "span"
-  }
-}), Text = forwardRef(
-  ({
-    as: e = "span",
-    color: t = "ghost",
-    hasUnderline: r = !1,
-    isCapitalize: s = !1,
-    align: i = "left",
-    italic: n = !1,
-    clamp: o = "none",
-    ellipsis: a = !1,
-    fontSize: l,
-    fontWeight: c,
-    className: x,
-    children: h,
-    ...d
-  }, p) => {
-    const f = [
-      "h1",
-      "h2",
-      "h3",
-      "h4",
-      "h5",
-      "h6",
-      "p",
-      "span",
-      "label"
-    ].includes(e) ? e : "span", v = l ? `text-${l}` : "", w = c ? `font-${c}` : "";
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      e,
-      {
-        ref: p,
-        className: cn(
-          textVariants({
-            color: t,
-            hasUnderline: r,
-            isCapitalize: s,
-            align: i,
-            italic: n,
-            clamp: o,
-            ellipsis: a,
-            // @ts-expect-error - `as` is not a valid variant
-            as: f
-          }),
-          v,
-          w,
-          x
-        ),
-        ...d,
-        children: h
-      }
-    );
-  }
-), CalendarContext = createContext(null);
+const CalendarContext = createContext(null);
 function useCalendarContext() {
   const e = useContext(CalendarContext);
   if (!e)
@@ -1267,7 +1361,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: 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 = [];
+  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), h = 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 < c; g++) {
     const m = p - c + g + 1;
     v.push(
@@ -1279,14 +1373,14 @@ const CalendarHeader = () => {
           "aria-label": "Previous month day",
           variant: "ghost",
           onClick: () => {
-            i?.(new Date(d, h, m)), n(h), o(d);
+            i?.(new Date(d, b, m)), n(b), o(d);
           }
         },
         "prev-" + g
       )
     );
   }
-  for (let g = 1; g <= x; g++) {
+  for (let g = 1; g <= h; g++) {
     const m = s instanceof Date && s.getFullYear() === t && s.getMonth() === r && s.getDate() === g;
     v.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1314,7 +1408,7 @@ const CalendarHeader = () => {
       )
     );
   }
-  const w = c + x;
+  const w = c + h;
   for (let g = 0; g < (w % 7 === 0 ? 0 : 7 - w % 7); g++)
     v.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1333,27 +1427,27 @@ 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: 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 = () => {
+  const { year: e, month: t, value: r, onChange: s, setMonth: i, setYear: n } = useCalendarContext(), o = (u, x) => new Date(u, x + 1, 0).getDate(), l = ((u, x) => new Date(u, x, 1).getDay())(e, t), c = o(e, t), h = t - 1 < 0 ? 11 : t - 1, b = t === 0 ? e - 1 : e, d = o(e, h), 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];
+    const [u, x] = r;
+    return !u && !x ? [null, null] : u && x ? u <= x ? [u, x] : [x, u] : [u, x];
   }, [w, g] = v(), m = (u) => {
     if (!w || !g) return !1;
-    const b = new Date(e, t, u);
-    return b >= w && b <= g;
+    const x = new Date(e, t, u);
+    return x >= w && x <= g;
   }, S = (u) => w ? w.getFullYear() === e && w.getMonth() === t && w.getDate() === u : !1, I = (u) => g ? g.getFullYear() === e && g.getMonth() === t && g.getDate() === u : !1;
   for (let u = 0; u < l; u++) {
-    const b = d - l + u + 1;
+    const x = d - l + u + 1;
     f.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
         {
-          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: b }),
+          as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: x }),
           size: "sm",
           "aria-label": "Previous month day",
           variant: "ghost",
           onClick: () => {
-            s?.([null, null]), i(x), n(h);
+            s?.([null, null]), i(h), n(b);
           }
         },
         "prev-" + u
@@ -1361,7 +1455,7 @@ const CalendarHeader = () => {
     );
   }
   for (let u = 1; u <= c; u++) {
-    const b = m(u), E = S(u), C = I(u);
+    const x = m(u), E = S(u), C = I(u);
     f.push(
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
@@ -1371,16 +1465,16 @@ const CalendarHeader = () => {
             {
               as: "span",
               fontSize: "sm",
-              color: b || E || C ? "inherit" : "ghost",
+              color: x || E || C ? "inherit" : "ghost",
               className: cn(
-                b && " bg-primary text-white",
+                x && " bg-primary text-white",
                 E && "rounded-l-full bg-primary text-white",
                 C && "rounded-r-full bg-primary text-white"
               ),
               children: u
             }
           ),
-          variant: E || C || b ? "primary" : "ghost",
+          variant: E || C || x ? "primary" : "ghost",
           size: "sm",
           "aria-label": `Select ${e}-${t + 1}-${u}`,
           "aria-current": E || C ? "date" : void 0,
@@ -1426,12 +1520,12 @@ function useCalendar({
   initialYear: s,
   initialMonth: i
 }) {
-  const [n, o] = useState(i), [a, l] = useState(s), [c, x] = useState([
+  const [n, o] = useState(i), [a, l] = useState(s), [c, h] = useState([
     null,
     null
   ]);
-  let h = e;
-  t === "range" && !e && (h = c);
+  let b = e;
+  t === "range" && !e && (b = c);
   const d = useCallback(() => {
     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));
@@ -1440,14 +1534,14 @@ function useCalendar({
     o(f), l(v), t === "single" && r?.(new Date(v, f, 1));
   }, [n, a, t, r]), y = useCallback(
     (f) => {
-      t === "single" ? r?.(f) : t === "range" && (x(f), r?.(f));
+      t === "single" ? r?.(f) : t === "range" && (h(f), r?.(f));
     },
     [t, r]
   );
   return {
     year: a,
     month: n,
-    value: h,
+    value: b,
     setMonth: o,
     setYear: l,
     onChange: y,
@@ -1489,7 +1583,7 @@ const CalendarRoot = ({
     }
   );
 }, Calendar = Object.assign(CalendarRoot, {}), cardVariants = cva(
-  "block transition-colors duration-200 cursor-pointer",
+  "block transition-colors duration-200 cursor-pointer w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light hover:bg-gray-50",
   {
     variants: {
       size: {
@@ -1502,57 +1596,18 @@ const CalendarRoot = ({
       shape: {
         rounded: "rounded-lg",
         square: "rounded-none"
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      shape: "rounded"
-    }
-  }
-), tileVariants = cva(
-  // Base classes
-  "block transition-colors duration-200",
-  {
-    variants: {
-      variant: {
-        white: "bg-white border border-border",
-        neutral: "bg-neutral border border-gray-200",
-        primary: "bg-primary-soft border border-primary",
-        secondary: "bg-secondary-soft border border-secondary",
-        tertiary: "bg-tertiary-soft border border-tertiary",
-        ghost: "bg-transparent border border-ghost",
-        success: "bg-success-soft border border-success",
-        info: "bg-info-soft border border-info",
-        warning: "bg-warning-soft border border-warning",
-        danger: "bg-danger-soft border border-danger"
-      },
-      size: {
-        xs: "p-2",
-        sm: "p-3",
-        md: "p-4",
-        lg: "p-6",
-        xl: "p-8"
       },
-      shape: {
-        rounded: "rounded-lg",
-        square: "rounded-none"
+      bordered: {
+        true: "border border-border",
+        false: ""
       }
     },
     defaultVariants: {
-      variant: "white",
       size: "md",
-      shape: "rounded"
+      shape: "rounded",
+      bordered: !1
     }
   }
-), Tile = forwardRef(
-  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...i }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      ref: n,
-      className: cn(tileVariants({ variant: e, size: t, shape: r }), s),
-      ...i
-    }
-  )
 ), Card = forwardRef(
   ({
     size: e = "md",
@@ -1562,14 +1617,15 @@ const CalendarRoot = ({
     subtitle: i,
     badge: n,
     supplementaryInfo: o,
-    className: a,
-    ...l
-  }, c) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Tile,
+    bordered: a = !1,
+    className: l,
+    ...c
+  }, h) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
     {
-      ref: c,
-      className: cn(cardVariants({ size: e, shape: t }), a),
-      ...l,
+      ref: h,
+      className: cn(cardVariants({ size: e, shape: t, bordered: a }), l),
+      ...c,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-4", children: [
         r && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: r }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full", children: [
@@ -1591,25 +1647,25 @@ const CalendarRoot = ({
     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",
+        primary: "bg-primary-light text-primary hover:bg-primary-soft focus-visible:ring-primary-light focus-visible:ring-offset-white",
+        secondary: "bg-secondary-light text-secondary hover:bg-secondary-soft focus-visible:ring-secondary-light focus-visible:ring-offset-white",
+        tertiary: "bg-tertiary-light text-tertiary hover:bg-tertiary-soft focus-visible:ring-tertiary-light focus-visible:ring-offset-white",
+        ghost: "bg-white text-foreground hover:bg-ghost-soft 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",
+        "neutral-outline": "border border-border text-foreground bg-white hover:bg-neutral 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: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-light focus-visible:ring-offset-white",
         "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: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-light focus-visible:ring-offset-white",
         "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: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-light focus-visible:ring-offset-white",
         "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: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-light focus-visible:ring-offset-white",
         "danger-outline": "border border-danger text-danger bg-white hover:bg-danger-soft focus-visible:ring-danger-light focus-visible:ring-offset-white"
       },
       size: {
@@ -1655,9 +1711,9 @@ const CalendarRoot = ({
   {
     variants: {
       spacing: {
-        sm: "py-8",
-        md: "py-12",
-        lg: "py-16"
+        sm: "py-8 px-4",
+        md: "py-12 px-6",
+        lg: "py-16 px-8"
       },
       hasGrayBackground: {
         true: "bg-neutral-soft",
@@ -1671,10 +1727,6 @@ const CalendarRoot = ({
   }
 ), 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: i, className: n, hasGrayBackground: o, ...a }, l) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -1688,9 +1740,9 @@ const CalendarRoot = ({
         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 })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h2", fontSize: "lg", children: r })
           ] }),
-          s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", className: noResultsSubtitleVariants(), children: s }),
+          s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", align: "center", color: "gray", className: "mb-4", children: s }),
           i && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "group", "aria-label": "Available actions", children: i })
         ]
       }
@@ -1901,7 +1953,51 @@ const getTableColumnClass = (e) => {
   Footer: TableFooter,
   Row: TableRow,
   RowItem: TableRowItem
-});
+}), tileVariants = cva(
+  // Base classes
+  "block transition-colors duration-200",
+  {
+    variants: {
+      variant: {
+        white: "bg-white border border-border",
+        neutral: "bg-neutral border border-gray-200",
+        primary: "bg-primary-soft border border-primary",
+        secondary: "bg-secondary-soft border border-secondary",
+        tertiary: "bg-tertiary-soft border border-tertiary",
+        ghost: "bg-transparent border border-ghost",
+        success: "bg-success-soft border border-success",
+        info: "bg-info-soft border border-info",
+        warning: "bg-warning-soft border border-warning",
+        danger: "bg-danger-soft border border-danger"
+      },
+      size: {
+        xs: "p-2",
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-6",
+        xl: "p-8"
+      },
+      shape: {
+        rounded: "rounded-lg",
+        square: "rounded-none"
+      }
+    },
+    defaultVariants: {
+      variant: "white",
+      size: "md",
+      shape: "rounded"
+    }
+  }
+), Tile = forwardRef(
+  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...i }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: n,
+      className: cn(tileVariants({ variant: e, size: t, shape: r }), s),
+      ...i
+    }
+  )
+);
 function getColSpan(e = 4) {
   switch (e) {
     case 1:
@@ -2089,8 +2185,8 @@ const BaseImage = forwardRef(
     position: a = "cover",
     size: l = "auto",
     shape: c,
-    className: x,
-    ...h
+    className: h,
+    ...b
   }, d) => {
     const { loaded: p, errored: y, handleLoad: f, handleError: v } = useImage({
       src: e
@@ -2125,7 +2221,7 @@ const BaseImage = forwardRef(
             size: l,
             shape: c
           }),
-          x
+          h
         ),
         onLoad: (m) => {
           f(), r?.(m);
@@ -2133,7 +2229,7 @@ const BaseImage = forwardRef(
         onError: (m) => {
           v(), s?.(m);
         },
-        ...h
+        ...b
       }
     );
   }
@@ -2148,17 +2244,19 @@ export {
   NoResults as N,
   Table as T,
   Anchor as a,
-  Avatar as b,
-  Brand as c,
-  Button as d,
-  ButtonFloat as e,
-  ButtonIcon as f,
-  Calendar as g,
-  Card as h,
-  Text as i,
-  Tile as j,
-  ImageCircle as k,
-  ImageSquare as l,
-  ImageRectangle as m,
-  BaseImage as n
+  Attribute as b,
+  AttributeList as c,
+  Avatar as d,
+  Brand as e,
+  Button as f,
+  ButtonFloat as g,
+  ButtonIcon as h,
+  Calendar as i,
+  Card as j,
+  Text as k,
+  Tile as l,
+  ImageCircle as m,
+  ImageSquare as n,
+  ImageRectangle as o,
+  BaseImage as p
 };