@dimasbaguspm/versaur 0.0.10 → 0.0.11

package/dist/{tile-BinjKW_i.js → js/tile-6SeBYc08.js}

@@ -1,9 +1,9 @@
-import { c as b, j as a, a as l } from "./index-DOdDlCoL.js";
+import { c as f, j as a, a as l } from "./index-DOdDlCoL.js";
 import * as u from "react";
-import { forwardRef as d, useState as v, useEffect as w, useCallback as y, useRef as S, createContext as V, useContext as T, useMemo as B } from "react";
-import { a as A } from "./calendar-DwRERSxq.js";
-import { X as I } from "lucide-react";
-const R = b(
+import { forwardRef as g, useState as v, useEffect as w, useCallback as y, useRef as S, createContext as V, useContext as T, useMemo as B } from "react";
+import { a as A } from "./calendar-De5dCVnE.js";
+import { X as k } from "lucide-react";
+const I = f(
   "relative flex items-center gap-2 rounded-md p-2 text-sm transition-all duration-200",
   {
     variants: {
@@ -30,22 +30,22 @@ const R = b(
       {
         variant: "default",
         color: "primary",
-        class: "bg-coral-soft text-coral border border-coral"
+        class: "bg-primary-soft text-primary border border-primary"
       },
       {
         variant: "default",
         color: "secondary",
-        class: "bg-sage-soft text-sage border border-sage"
+        class: "bg-secondary-soft text-secondary border border-secondary"
       },
       {
         variant: "default",
         color: "tertiary",
-        class: "bg-mist-soft text-mist border border-mist"
+        class: "bg-tertiary-soft text-tertiary border border-tertiary"
       },
       {
         variant: "default",
         color: "ghost",
-        class: "bg-slate-soft text-slate border border-slate"
+        class: "bg-ghost-soft text-ghost border border-ghost"
       },
       {
         variant: "default",
@@ -76,22 +76,22 @@ const R = b(
       {
         variant: "outline",
         color: "primary",
-        class: "bg-transparent text-coral border-coral"
+        class: "bg-transparent text-primary border-primary"
       },
       {
         variant: "outline",
         color: "secondary",
-        class: "bg-transparent text-sage border-sage"
+        class: "bg-transparent text-secondary border-secondary"
       },
       {
         variant: "outline",
         color: "tertiary",
-        class: "bg-transparent text-mist border-mist"
+        class: "bg-transparent text-tertiary border-tertiary"
       },
       {
         variant: "outline",
         color: "ghost",
-        class: "bg-transparent text-slate border-slate"
+        class: "bg-transparent text-ghost border-ghost"
       },
       {
         variant: "outline",
@@ -124,7 +124,7 @@ const R = b(
       color: "neutral"
     }
   }
-), k = b(
+), R = f(
   "flex-shrink-0 flex justify-center items-center ",
   {
     variants: {
@@ -138,47 +138,47 @@ const R = b(
       size: "md"
     }
   }
-), C = d(
-  ({ className: e, children: t, ...r }, s) => /* @__PURE__ */ a.jsx("div", { ref: s, className: l(k(), e), ...r, children: t })
-), O = d(
+), C = g(
+  ({ className: e, children: r, ...t }, s) => /* @__PURE__ */ a.jsx("div", { ref: s, className: l(R(), e), ...t, children: r })
+), O = g(
   ({
     variant: e = "default",
-    color: t = "neutral",
-    icon: r,
+    color: r = "neutral",
+    icon: t,
     className: s,
     children: o,
     ...n
-  }, g) => /* @__PURE__ */ a.jsxs(
+  }, d) => /* @__PURE__ */ a.jsxs(
     "div",
     {
-      ref: g,
+      ref: d,
       role: "alert",
-      className: l(R({ variant: e, color: t }), s),
+      className: l(I({ variant: e, color: r }), s),
       ...n,
       children: [
-        r && /* @__PURE__ */ a.jsx(C, { children: r }),
+        t && /* @__PURE__ */ a.jsx(C, { children: t }),
         /* @__PURE__ */ a.jsx("div", { className: "flex-1", children: o })
       ]
     }
   )
-), de = Object.assign(O, {
+), ge = Object.assign(O, {
   Icon: C
-}), q = b(
+}), q = f(
   "inline-flex items-center justify-center font-medium text-white overflow-hidden transition-all duration-200 select-none relative",
   {
     variants: {
       variant: {
         // Core variants using Versaur color system
-        primary: "bg-coral-soft text-coral",
-        secondary: "bg-sage-soft text-sage",
-        tertiary: "bg-mist-soft text-mist",
-        ghost: "bg-slate-soft text-slate",
-        neutral: "bg-neutral-soft text-foreground border border-border",
+        primary: "bg-primary-light text-primary",
+        secondary: "bg-secondary-light text-secondary",
+        tertiary: "bg-tertiary-light text-tertiary",
+        ghost: "bg-ghost-light text-ghost",
+        neutral: "bg-neutral-light text-foreground border border-border",
         // Semantic variants
-        success: "bg-success-soft text-success",
-        info: "bg-info-soft text-info",
-        warning: "bg-warning-soft text-warning",
-        danger: "bg-danger-soft text-danger"
+        success: "bg-success-light text-success",
+        info: "bg-info-light text-info",
+        warning: "bg-warning-light text-warning",
+        danger: "bg-danger-light text-danger"
       },
       size: {
         xs: "h-6 w-6 text-xs",
@@ -199,45 +199,45 @@ const R = b(
       shape: "circle"
     }
   }
-), F = b(
+), F = f(
   "absolute inset-0 h-full w-full object-cover"
-), L = d(
+), L = g(
   ({
     variant: e = "primary",
-    size: t = "md",
-    shape: r = "circle",
+    size: r = "md",
+    shape: t = "circle",
     className: s,
     children: o,
     ...n
-  }, g) => /* @__PURE__ */ a.jsx(
+  }, d) => /* @__PURE__ */ a.jsx(
     "div",
     {
-      ref: g,
-      className: l(q({ variant: e, size: t, shape: r }), s),
+      ref: d,
+      className: l(q({ variant: e, size: r, shape: t }), s),
       ...n,
       children: o
     }
   )
-), M = d(
-  ({ src: e, alt: t, className: r, onError: s, ...o }, n) => {
-    const [g, i] = v(!1);
+), M = g(
+  ({ src: e, alt: r, className: t, onError: s, ...o }, n) => {
+    const [d, i] = v(!1);
     w(() => {
       i(!1);
     }, [e]);
-    const f = y(
+    const b = y(
       (c) => {
         i(!0), s?.(c);
       },
       [s]
     );
-    return g ? null : /* @__PURE__ */ a.jsx(
+    return d ? null : /* @__PURE__ */ a.jsx(
       "img",
       {
         ref: n,
         src: e,
-        alt: t,
-        className: l(F(), r),
-        onError: f,
+        alt: r,
+        className: l(F(), t),
+        onError: b,
         ...o
       }
     );
@@ -247,13 +247,13 @@ const R = b(
    * AvatarImage sub-component for displaying images with fallback behavior
    */
   Image: M
-}), P = b(
+}), P = f(
   "inline-flex items-center justify-center font-medium transition-all duration-200 select-none gap-1 min-h-[1.25rem]",
   {
     variants: {
       variant: {
         default: "",
-        outline: "border bg-transparent"
+        outline: "border bg-background"
       },
       color: {
         // Core colors
@@ -287,22 +287,22 @@ const R = b(
       {
         variant: "default",
         color: "primary",
-        className: "bg-coral-soft text-coral"
+        className: "bg-primary-light text-primary"
       },
       {
         variant: "default",
         color: "secondary",
-        className: "bg-sage-soft text-sage"
+        className: "bg-secondary-light text-secondary"
       },
       {
         variant: "default",
         color: "tertiary",
-        className: "bg-mist-soft text-mist"
+        className: "bg-tertiary-light text-tertiary"
       },
       {
         variant: "default",
         color: "ghost",
-        className: "bg-slate-soft text-slate"
+        className: "bg-ghost-light text-ghost"
       },
       {
         variant: "default",
@@ -312,43 +312,43 @@ const R = b(
       {
         variant: "default",
         color: "success",
-        className: "bg-success-soft text-success"
+        className: "bg-success-light text-success"
       },
       {
         variant: "default",
         color: "info",
-        className: "bg-info-soft text-info"
+        className: "bg-info-light text-info"
       },
       {
         variant: "default",
         color: "warning",
-        className: "bg-warning-soft text-warning"
+        className: "bg-warning-light text-warning"
       },
       {
         variant: "default",
         color: "danger",
-        className: "bg-danger-soft text-danger"
+        className: "bg-danger-light text-danger"
       },
       // Outline variant color combinations
       {
         variant: "outline",
         color: "primary",
-        className: "border-coral text-coral"
+        className: "border-primary text-primary"
       },
       {
         variant: "outline",
         color: "secondary",
-        className: "border-sage text-sage"
+        className: "border-secondary text-secondary"
       },
       {
         variant: "outline",
         color: "tertiary",
-        className: "border-mist text-mist"
+        className: "border-tertiary text-tertiary"
       },
       {
         variant: "outline",
         color: "ghost",
-        className: "border-slate text-slate"
+        className: "border-ghost text-ghost"
       },
       {
         variant: "outline",
@@ -400,17 +400,17 @@ const R = b(
       iconOnly: !1
     }
   }
-), H = d(
+), H = g(
   ({
     variant: e = "default",
-    shape: t = "square",
-    color: r = "primary",
+    shape: r = "square",
+    color: t = "primary",
     size: s = "md",
     iconLeft: o,
     iconRight: n,
-    className: g,
+    className: d,
     children: i,
-    ...f
+    ...b
   }, c) => {
     const h = !(i != null && i !== "") && !!(o || n);
     return /* @__PURE__ */ a.jsx(
@@ -420,14 +420,14 @@ const R = b(
         className: l(
           P({
             variant: e,
-            color: r,
-            shape: t,
+            color: t,
+            shape: r,
             size: s,
             iconOnly: h
           }),
-          g
+          d
         ),
-        ...f,
+        ...b,
         children: h ? (
           // Icon-only mode: display only the icon
           o || n
@@ -444,7 +444,7 @@ const R = b(
   }
 );
 H.displayName = "Badge";
-const E = (e) => /* @__PURE__ */ u.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("title", null, "Spenicle"), /* @__PURE__ */ u.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ u.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ u.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" }))), $ = (e) => /* @__PURE__ */ u.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("title", null, "Spenicle"), /* @__PURE__ */ u.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ u.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ u.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" }))), X = (e) => /* @__PURE__ */ u.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("title", null, "Spenicle"), /* @__PURE__ */ u.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ u.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ u.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" }))), Y = b("", {
+const E = (e) => /* @__PURE__ */ u.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("title", null, "Spenicle"), /* @__PURE__ */ u.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ u.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ u.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" }))), $ = (e) => /* @__PURE__ */ u.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("title", null, "Spenicle"), /* @__PURE__ */ u.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ u.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ u.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" }))), X = (e) => /* @__PURE__ */ u.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ u.createElement("title", null, "Spenicle"), /* @__PURE__ */ u.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ u.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ u.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" }))), Y = f("", {
   variants: {
     size: {
       xs: "h-6 w-6",
@@ -457,8 +457,8 @@ const E = (e) => /* @__PURE__ */ u.createElement("svg", { width: 32, height: 32,
   defaultVariants: {
     size: "md"
   }
-}), _ = d(
-  ({ shape: e = "square", size: t, ...r }, s) => {
+}), _ = g(
+  ({ shape: e = "square", size: r, ...t }, s) => {
     const n = {
       square: E,
       rounded: $,
@@ -468,22 +468,22 @@ const E = (e) => /* @__PURE__ */ u.createElement("svg", { width: 32, height: 32,
       n,
       {
         ref: s,
-        ...r,
-        className: l("inline-block", Y({ size: t }))
+        ...t,
+        className: l("inline-block", Y({ size: r }))
       }
     );
   }
-), fe = d(
-  ({ name: e = "spenicle", size: t = "md", shape: r, ...s }, o) => /* @__PURE__ */ a.jsx(
+), be = g(
+  ({ name: e = "spenicle", size: r = "md", shape: t, ...s }, o) => /* @__PURE__ */ a.jsx(
     "span",
     {
       ref: o,
       className: l("inline-flex items-center gap-2"),
       ...s,
-      children: /* @__PURE__ */ a.jsx(_, { shape: r, size: t, "aria-hidden": "true" })
+      children: /* @__PURE__ */ a.jsx(_, { shape: t, size: r, "aria-hidden": "true" })
     }
   )
-), D = b(
+), D = f(
   [
     "inline-flex items-center justify-center gap-2",
     "rounded-lg",
@@ -509,19 +509,19 @@ const E = (e) => /* @__PURE__ */ u.createElement("svg", { width: 32, height: 32,
   {
     variants: {
       variant: {
-        primary: "bg-coral text-white hover:bg-coral/90 focus-visible:ring-coral-soft focus-visible:ring-offset-white",
-        secondary: "bg-sage text-white hover:bg-sage/90 focus-visible:ring-sage-soft focus-visible:ring-offset-white",
-        tertiary: "bg-mist text-white hover:bg-mist/90 focus-visible:ring-mist-soft focus-visible:ring-offset-white",
-        ghost: "bg-white text-foreground hover:bg-slate-soft focus-visible:ring-slate-soft focus-visible:ring-offset-white",
+        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-coral text-coral bg-white hover:bg-coral hover:text-white focus-visible:ring-coral-soft focus-visible:ring-offset-white",
-        "secondary-outline": "border border-sage text-sage bg-white hover:bg-sage hover:text-white focus-visible:ring-sage-soft focus-visible:ring-offset-white",
-        "tertiary-outline": "border border-mist text-mist bg-white hover:bg-mist hover:text-white focus-visible:ring-mist-soft focus-visible:ring-offset-white",
-        "ghost-outline": "border border-slate text-slate bg-white hover:bg-slate hover:text-white focus-visible:ring-slate-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-coral bg-white hover:bg-coral-soft focus-visible:ring-coral-soft focus-visible:ring-offset-white",
-        "secondary-ghost": "text-sage bg-white hover:bg-sage-soft focus-visible:ring-sage-soft focus-visible:ring-offset-white",
-        "tertiary-ghost": "text-mist bg-white hover:bg-mist-soft focus-visible:ring-mist-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",
@@ -550,72 +550,72 @@ const E = (e) => /* @__PURE__ */ u.createElement("svg", { width: 32, height: 32,
     }
   }
 );
-function G(e, t = "1rem") {
-  const r = S(null), [s, o] = v({}), [n, g] = v(
+function G(e, r = "1rem") {
+  const t = S(null), [s, o] = v({}), [n, d] = v(
     "absolute bottom-4 right-4"
   ), i = y(() => {
-    const c = r.current;
+    const c = t.current;
     if (!c) return;
     const m = c.getBoundingClientRect().height > window.innerHeight;
     let h = {}, p = "";
     m ? (h = {
       position: "absolute",
-      bottom: t,
+      bottom: r,
       zIndex: 50,
       transform: `translateY(${c.scrollTop}px)`
     }, p = `absolute bottom-4 ${e}-4`) : (h = {
       position: "absolute",
-      bottom: t,
+      bottom: r,
       zIndex: 50
-    }, p = `absolute bottom-4 ${e}-4`), o(h), g(p);
-  }, [e, t]);
+    }, p = `absolute bottom-4 ${e}-4`), o(h), d(p);
+  }, [e, r]);
   return w(() => {
     i();
-    const c = r.current;
+    const c = t.current;
     return c && c.addEventListener("scroll", i), window.addEventListener("resize", i), () => {
       c && c.removeEventListener("scroll", i), window.removeEventListener("resize", i);
     };
   }, [i]), w(() => {
-    r.current && i();
-  }, [e, t, i]), [y(
+    t.current && i();
+  }, [e, r, i]), [y(
     (c) => {
-      r.current = c, c && i();
+      t.current = c, c && i();
     },
     [i]
   ), s, n];
 }
-const be = d(
+const fe = g(
   function({
-    className: t,
-    variant: r = "primary",
+    className: r,
+    variant: t = "primary",
     size: s = "md",
     side: o = "right",
     offset: n = "1rem",
-    ...g
+    ...d
   }, i) {
-    const [f, c, x] = G(
+    const [b, c, x] = G(
       o,
       n
     ), [m, h] = v(!1);
     return w(() => {
       h(!0);
-    }, []), /* @__PURE__ */ a.jsx("div", { ref: f, children: /* @__PURE__ */ a.jsx(
+    }, []), /* @__PURE__ */ a.jsx("div", { ref: b, children: /* @__PURE__ */ a.jsx(
       "button",
       {
         ref: i,
-        type: g.type || "button",
+        type: d.type || "button",
         className: l(
-          D({ variant: r, size: s }),
+          D({ variant: t, size: s }),
           x,
           m && "animate-fab-in",
-          t
+          r
         ),
         style: c,
-        ...g
+        ...d
       }
     ) });
   }
-), J = b(
+), J = f(
   "flex items-center gap-2 px-4 py-2 rounded-sm w-fit max-w-sm relative bg-white shadow-sm",
   {
     variants: {
@@ -646,39 +646,39 @@ function K(e) {
 }
 const Q = ({
   children: e,
-  ...t
+  ...r
 }) => /* @__PURE__ */ a.jsx(
   "span",
   {
     className: "flex-1 truncate text-base font-medium",
     "data-testid": "snackbar-text",
-    ...t,
+    ...r,
     children: e
   }
 ), U = ({
   children: e,
-  ...t
-}) => /* @__PURE__ */ a.jsx("span", { className: "ml-2", "data-testid": "snackbar-action", ...t, children: e }), he = d(
-  ({ children: e, action: t, onClose: r, color: s, className: o, ...n }, g) => /* @__PURE__ */ a.jsxs(
+  ...r
+}) => /* @__PURE__ */ a.jsx("span", { className: "ml-2", "data-testid": "snackbar-action", ...r, children: e }), he = g(
+  ({ children: e, action: r, onClose: t, color: s, className: o, ...n }, d) => /* @__PURE__ */ a.jsxs(
     "div",
     {
-      ref: g,
+      ref: d,
       role: "status",
       "aria-live": "polite",
       className: l(J({ color: s }), o),
       ...n,
       children: [
         /* @__PURE__ */ a.jsx(Q, { children: e }),
-        t && /* @__PURE__ */ a.jsx(U, { children: t }),
+        r && /* @__PURE__ */ a.jsx(U, { children: r }),
         /* @__PURE__ */ a.jsx(
           A,
           {
-            as: I,
+            as: k,
             variant: K(s),
             size: "sm",
             shape: "rounded",
             "aria-label": "Close",
-            onClick: r,
+            onClick: t,
             className: "ml-2"
           }
         )
@@ -754,15 +754,15 @@ const j = (e) => {
     default:
       return "col-span-2";
   }
-}, ee = d(
-  ({ children: e, className: t, ...r }, s) => {
+}, ee = g(
+  ({ children: e, className: r, ...t }, s) => {
     const { maxColumns: o } = N();
     return /* @__PURE__ */ a.jsx(
       "div",
       {
         role: "rowgroup",
-        className: l("bg-neutral-soft", t),
-        ...r,
+        className: l("bg-neutral-soft", r),
+        ...t,
         ref: s,
         children: /* @__PURE__ */ a.jsx(
           "div",
@@ -775,17 +775,17 @@ const j = (e) => {
       }
     );
   }
-), te = d(
-  ({ children: e, className: t, ...r }, s) => /* @__PURE__ */ a.jsx("div", { role: "rowgroup", ref: s, className: l(t), ...r, children: e })
-), re = d(
-  ({ children: e, className: t, ...r }, s) => {
+), re = g(
+  ({ children: e, className: r, ...t }, s) => /* @__PURE__ */ a.jsx("div", { role: "rowgroup", ref: s, className: l(r), ...t, children: e })
+), te = g(
+  ({ children: e, className: r, ...t }, s) => {
     const { maxColumns: o } = N();
     return /* @__PURE__ */ a.jsx(
       "div",
       {
         role: "rowgroup",
-        className: l("bg-neutral-soft", t),
-        ...r,
+        className: l("bg-neutral-soft", r),
+        ...t,
         ref: s,
         children: /* @__PURE__ */ a.jsx(
           "div",
@@ -798,8 +798,8 @@ const j = (e) => {
       }
     );
   }
-), se = d(
-  ({ children: e, className: t, ...r }, s) => {
+), se = g(
+  ({ children: e, className: r, ...t }, s) => {
     const { maxColumns: o } = N();
     return /* @__PURE__ */ a.jsx(
       "div",
@@ -809,28 +809,28 @@ const j = (e) => {
           "grid gap-4",
           j(o),
           "border-b border-border last:border-0",
-          t
+          r
         ),
         ref: s,
-        ...r,
+        ...t,
         children: e
       }
     );
   }
-), oe = d(
-  ({ as: e = "td", span: t, align: r = "left", children: s, className: o, ...n }, g) => {
+), oe = g(
+  ({ as: e = "td", span: r, align: t = "left", children: s, className: o, ...n }, d) => {
     const i = e === "th" ? "columnheader" : "cell";
-    let f = "text-left";
-    return r === "center" ? f = "text-center" : r === "right" && (f = "text-right"), /* @__PURE__ */ a.jsx(
+    let b = "text-left";
+    return t === "center" ? b = "text-center" : t === "right" && (b = "text-right"), /* @__PURE__ */ a.jsx(
       "div",
       {
-        ref: g,
+        ref: d,
         role: i,
         className: l(
           "px-4 py-2",
           "[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border",
-          Z(t),
-          f,
+          Z(r),
+          b,
           o
         ),
         ...n,
@@ -838,11 +838,11 @@ const j = (e) => {
       }
     );
   }
-), ae = d(
-  ({ children: e, className: t, maxColumns: r = 12, ...s }, o) => {
+), ae = g(
+  ({ children: e, className: r, maxColumns: t = 12, ...s }, o) => {
     const n = B(
-      () => ({ maxColumns: r }),
-      [r]
+      () => ({ maxColumns: t }),
+      [t]
     );
     return /* @__PURE__ */ a.jsx(W, { value: n, children: /* @__PURE__ */ a.jsx(
       "div",
@@ -851,7 +851,7 @@ const j = (e) => {
         role: "table",
         className: l(
           "w-full overflow-x-auto rounded-lg border border-border",
-          t
+          r
         ),
         ...s,
         children: e
@@ -860,11 +860,11 @@ const j = (e) => {
   }
 ), me = Object.assign(ae, {
   Header: ee,
-  Body: te,
-  Footer: re,
+  Body: re,
+  Footer: te,
   Row: se,
   Column: oe
-}), ne = b(
+}), ne = f(
   // Base classes
   "block transition-colors duration-200",
   {
@@ -872,10 +872,10 @@ const j = (e) => {
       variant: {
         white: "bg-white border border-border",
         neutral: "bg-neutral border border-gray-200",
-        primary: "bg-coral-soft border border-coral",
-        secondary: "bg-sage-soft border border-sage",
-        tertiary: "bg-mist-soft border border-mist",
-        ghost: "bg-transparent border border-slate",
+        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",
@@ -899,23 +899,23 @@ const j = (e) => {
       shape: "rounded"
     }
   }
-), ve = d(
-  ({ variant: e = "white", size: t = "md", shape: r = "rounded", className: s, ...o }, n) => /* @__PURE__ */ a.jsx(
+), ve = g(
+  ({ variant: e = "white", size: r = "md", shape: t = "rounded", className: s, ...o }, n) => /* @__PURE__ */ a.jsx(
     "div",
     {
       ref: n,
-      className: l(ne({ variant: e, size: t, shape: r }), s),
+      className: l(ne({ variant: e, size: r, shape: t }), s),
       ...o
     }
   )
 );
 export {
-  de as A,
+  ge as A,
   H as B,
   he as S,
   me as T,
   ue as a,
-  fe as b,
-  be as c,
+  be as b,
+  fe as c,
   ve as d
 };