@bobbykim/mcl-cards 0.10.2 → 0.10.3

package/dist/mcl-cards.js

@@ -1,45 +1,45 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.perspective[data-v-eac7e2f0]{-webkit-perspective:1800px;perspective:1800px}.card[data-v-eac7e2f0]{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(0deg);transform:rotateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-card[data-v-eac7e2f0]{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}.card[data-v-8bf2cac0]{background-size:cover;background-position:center center;background-repeat:no-repeat;padding:var(--border-width);background:conic-gradient(from var(--border-angle, 0deg),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via),var(--tw-gradient-to));animation:bg-spin-8bf2cac0 4s linear infinite}@keyframes bg-spin-8bf2cac0{0%{--border-angle: 0deg}to{--border-angle: 360deg}}.card[data-v-8bf2cac0]:hover{animation-play-state:paused}@property --border-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-import { defineComponent as B, ref as $, onMounted as R, useSlots as L, computed as f, openBlock as k, createElementBlock as y, normalizeClass as h, createElementVNode as b, createCommentVNode as V, unref as S, withModifiers as z, renderSlot as A, toDisplayString as T, normalizeStyle as D } from "vue";
+import { defineComponent as B, ref as $, onMounted as E, useSlots as L, computed as f, openBlock as k, createElementBlock as y, normalizeClass as h, createElementVNode as b, createCommentVNode as V, unref as S, withModifiers as z, renderSlot as A, toDisplayString as T, normalizeStyle as D } from "vue";
 import { generateClass as g } from "@bobbykim/manguito-theme";
 function H(r) {
-  var n, a, i = "";
-  if (typeof r == "string" || typeof r == "number") i += r;
+  var n, a, l = "";
+  if (typeof r == "string" || typeof r == "number") l += r;
   else if (typeof r == "object") if (Array.isArray(r)) {
-    var m = r.length;
-    for (n = 0; n < m; n++) r[n] && (a = H(r[n])) && (i && (i += " "), i += a);
-  } else for (a in r) r[a] && (i && (i += " "), i += a);
-  return i;
+    var x = r.length;
+    for (n = 0; n < x; n++) r[n] && (a = H(r[n])) && (l && (l += " "), l += a);
+  } else for (a in r) r[a] && (l && (l += " "), l += a);
+  return l;
 }
 function I() {
-  for (var r, n, a = 0, i = "", m = arguments.length; a < m; a++) (r = arguments[a]) && (n = H(r)) && (i && (i += " "), i += n);
-  return i;
+  for (var r, n, a = 0, l = "", x = arguments.length; a < x; a++) (r = arguments[a]) && (n = H(r)) && (l && (l += " "), l += n);
+  return l;
 }
 const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t = (r, n) => (a) => {
-  var i;
+  var l;
   if (n?.variants == null) return O(r, a?.class, a?.className);
-  const { variants: m, defaultVariants: x } = n, v = Object.keys(m).map((c) => {
-    const e = a?.[c], o = x?.[c];
+  const { variants: x, defaultVariants: u } = n, v = Object.keys(x).map((c) => {
+    const e = a?.[c], o = u?.[c];
     if (e === null) return null;
-    const l = M(e) || M(o);
-    return m[c][l];
+    const i = M(e) || M(o);
+    return x[c][i];
   }), w = a && Object.entries(a).reduce((c, e) => {
-    let [o, l] = e;
-    return l === void 0 || (c[o] = l), c;
-  }, {}), d = n == null || (i = n.compoundVariants) === null || i === void 0 ? void 0 : i.reduce((c, e) => {
-    let { class: o, className: l, ...s } = e;
+    let [o, i] = e;
+    return i === void 0 || (c[o] = i), c;
+  }, {}), d = n == null || (l = n.compoundVariants) === null || l === void 0 ? void 0 : l.reduce((c, e) => {
+    let { class: o, className: i, ...s } = e;
     return Object.entries(s).every((p) => {
-      let [u, C] = p;
+      let [m, C] = p;
       return Array.isArray(C) ? C.includes({
-        ...x,
+        ...u,
         ...w
-      }[u]) : {
-        ...x,
+      }[m]) : {
+        ...u,
         ...w
-      }[u] === C;
+      }[m] === C;
     }) ? [
       ...c,
       o,
-      l
+      i
     ] : c;
   }, []);
   return O(r, v, d, a?.class, a?.className);
@@ -109,7 +109,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "focus:bg-transparent"
     }
   }
-}), q = t("", {
+}), F = t("", {
   variants: {
     color: {
       primary: "before:bg-primary",
@@ -131,7 +131,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "before:bg-transparent"
     }
   }
-}), F = t("", {
+}), q = t("", {
   variants: {
     color: {
       primary: "after:bg-primary",
@@ -175,7 +175,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "active:bg-transparent"
     }
   }
-}), J = t("", {
+}), P = t("", {
   variants: {
     color: {
       primary: "text-primary",
@@ -197,7 +197,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "text-transparent"
     }
   }
-}), K = t("", {
+}), J = t("", {
   variants: {
     color: {
       primary: "hover:text-primary",
@@ -219,7 +219,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "hover:text-transparent"
     }
   }
-}), P = t("", {
+}), K = t("", {
   variants: {
     color: {
       primary: "focus:text-primary",
@@ -352,6 +352,72 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
     }
   }
 }), tr = t("", {
+  variants: {
+    color: {
+      primary: "peer-checked:bg-primary",
+      secondary: "peer-checked:bg-secondary",
+      success: "peer-checked:bg-success",
+      danger: "peer-checked:bg-danger",
+      info: "peer-checked:bg-info",
+      warning: "peer-checked:bg-warning",
+      "light-1": "peer-checked:bg-light-1",
+      "light-2": "peer-checked:bg-light-2",
+      "light-3": "peer-checked:bg-light-3",
+      "light-4": "peer-checked:bg-light-4",
+      "dark-1": "peer-checked:bg-dark-1",
+      "dark-2": "peer-checked:bg-dark-2",
+      "dark-3": "peer-checked:bg-dark-3",
+      "dark-4": "peer-checked:bg-dark-4",
+      black: "peer-checked:bg-black",
+      white: "peer-checked:bg-white",
+      transparent: "peer-checked:bg-transparent"
+    }
+  }
+}), ar = t("", {
+  variants: {
+    color: {
+      primary: "peer-focus-visible:ring-primary",
+      secondary: "peer-focus-visible:ring-secondary",
+      success: "peer-focus-visible:ring-success",
+      danger: "peer-focus-visible:ring-danger",
+      info: "peer-focus-visible:ring-info",
+      warning: "peer-focus-visible:ring-warning",
+      "light-1": "peer-focus-visible:ring-light-1",
+      "light-2": "peer-focus-visible:ring-light-2",
+      "light-3": "peer-focus-visible:ring-light-3",
+      "light-4": "peer-focus-visible:ring-light-4",
+      "dark-1": "peer-focus-visible:ring-dark-1",
+      "dark-2": "peer-focus-visible:ring-dark-2",
+      "dark-3": "peer-focus-visible:ring-dark-3",
+      "dark-4": "peer-focus-visible:ring-dark-4",
+      black: "peer-focus-visible:ring-black",
+      white: "peer-focus-visible:ring-white",
+      transparent: "peer-focus-visible:ring-transparent"
+    }
+  }
+}), er = t("", {
+  variants: {
+    color: {
+      primary: "focus-visible:ring-primary",
+      secondary: "focus-visible:ring-secondary",
+      success: "focus-visible:ring-success",
+      danger: "focus-visible:ring-danger",
+      info: "focus-visible:ring-info",
+      warning: "focus-visible:ring-warning",
+      "light-1": "focus-visible:ring-light-1",
+      "light-2": "focus-visible:ring-light-2",
+      "light-3": "focus-visible:ring-light-3",
+      "light-4": "focus-visible:ring-light-4",
+      "dark-1": "focus-visible:ring-dark-1",
+      "dark-2": "focus-visible:ring-dark-2",
+      "dark-3": "focus-visible:ring-dark-3",
+      "dark-4": "focus-visible:ring-dark-4",
+      black: "focus-visible:ring-black",
+      white: "focus-visible:ring-white",
+      transparent: "focus-visible:ring-transparent"
+    }
+  }
+}), ir = t("", {
   variants: {
     color: {
       primary: "ring-offset-primary",
@@ -373,7 +439,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "ring-offset-transparent"
     }
   }
-}), ar = t("", {
+}), lr = t("", {
   variants: {
     color: {
       primary: "mcl-outline-primary",
@@ -395,7 +461,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "mcl-outline-transparent"
     }
   }
-}), er = t("", {
+}), or = t("", {
   variants: {
     color: {
       primary: "focus:mcl-outline-primary",
@@ -417,7 +483,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "focus:mcl-outline-transparent"
     }
   }
-}), lr = t("", {
+}), nr = t("", {
   variants: {
     color: {
       primary: "active:mcl-outline-primary",
@@ -439,7 +505,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "active:mcl-outline-transparent"
     }
   }
-}), ir = t("", {
+}), sr = t("", {
   variants: {
     color: {
       primary: "btn-primary",
@@ -461,7 +527,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "btn-transparent"
     }
   }
-}), or = t("", {
+}), dr = t("", {
   variants: {
     color: {
       primary: "mcl-list-primary",
@@ -483,7 +549,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "mcl-list-transparent"
     }
   }
-}), nr = t("", {
+}), cr = t("", {
   variants: {
     color: {
       primary: "border-primary",
@@ -505,7 +571,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "border-transparent"
     }
   }
-}), sr = t("", {
+}), gr = t("", {
   variants: {
     color: {
       primary: "border-x-primary",
@@ -527,7 +593,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "border-x-transparent"
     }
   }
-}), dr = t("", {
+}), br = t("", {
   variants: {
     color: {
       primary: "border-y-primary",
@@ -549,7 +615,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "border-y-transparent"
     }
   }
-}), cr = t("", {
+}), hr = t("", {
   variants: {
     color: {
       primary: "border-t-primary",
@@ -571,7 +637,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "border-t-transparent"
     }
   }
-}), gr = t("", {
+}), ur = t("", {
   variants: {
     color: {
       primary: "border-b-primary",
@@ -593,7 +659,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "border-b-transparent"
     }
   }
-}), br = t("", {
+}), xr = t("", {
   variants: {
     color: {
       primary: "border-l-primary",
@@ -615,7 +681,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "border-l-transparent"
     }
   }
-}), hr = t("", {
+}), mr = t("", {
   variants: {
     color: {
       primary: "border-r-primary",
@@ -637,7 +703,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       transparent: "border-r-transparent"
     }
   }
-}), xr = t("", {
+}), pr = t("", {
   variants: {
     size: {
       xs: "text-xs",
@@ -647,7 +713,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       xl: "text-xl"
     }
   }
-}), mr = t("", {
+}), fr = t("", {
   variants: {
     weight: {
       light: "font-light",
@@ -655,7 +721,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       bold: "font-bold"
     }
   }
-}), ur = t("", {
+}), kr = t("", {
   variants: {
     align: {
       left: "text-left",
@@ -663,7 +729,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       right: "text-right"
     }
   }
-}), pr = t("", {
+}), yr = t("", {
   variants: {
     size: {
       sm: "h1-sm",
@@ -672,7 +738,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       xl: "h1-xl"
     }
   }
-}), fr = t("", {
+}), vr = t("", {
   variants: {
     size: {
       sm: "h2-sm",
@@ -681,7 +747,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       xl: "h2-xl"
     }
   }
-}), kr = t("", {
+}), wr = t("", {
   variants: {
     size: {
       sm: "h3-sm",
@@ -690,7 +756,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       xl: "h3-xl"
     }
   }
-}), yr = t("", {
+}), Cr = t("", {
   variants: {
     size: {
       sm: "h4-sm",
@@ -699,7 +765,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       xl: "h4-xl"
     }
   }
-}), vr = {
+}), Vr = {
   1: "border-[1px]",
   2: "border-[2px]",
   3: "border-[3px]",
@@ -712,7 +778,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
   10: "border-[10px]",
   11: "border-[11px]",
   12: "border-[12px]"
-}, wr = {
+}, Br = {
   1: "border-x-[1px]",
   2: "border-x-[2px]",
   3: "border-x-[3px]",
@@ -725,7 +791,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
   10: "border-x-[10px]",
   11: "border-x-[11px]",
   12: "border-x-[12px]"
-}, Cr = {
+}, Tr = {
   1: "border-y-[1px]",
   2: "border-y-[2px]",
   3: "border-y-[3px]",
@@ -738,7 +804,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
   10: "border-y-[10px]",
   11: "border-y-[11px]",
   12: "border-y-[12px]"
-}, Vr = {
+}, Lr = {
   1: "border-t-[1px]",
   2: "border-t-[2px]",
   3: "border-t-[3px]",
@@ -751,7 +817,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
   10: "border-t-[10px]",
   11: "border-t-[11px]",
   12: "border-t-[12px]"
-}, Br = {
+}, Ar = {
   1: "border-b-[1px]",
   2: "border-b-[2px]",
   3: "border-b-[3px]",
@@ -764,7 +830,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
   10: "border-b-[10px]",
   11: "border-b-[11px]",
   12: "border-b-[12px]"
-}, Tr = {
+}, jr = {
   1: "border-l-[1px]",
   2: "border-l-[2px]",
   3: "border-l-[3px]",
@@ -777,7 +843,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
   10: "border-l-[10px]",
   11: "border-l-[11px]",
   12: "border-l-[12px]"
-}, Lr = {
+}, Sr = {
   1: "border-r-[1px]",
   2: "border-r-[2px]",
   3: "border-r-[3px]",
@@ -790,7 +856,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
   10: "border-r-[10px]",
   11: "border-r-[11px]",
   12: "border-r-[12px]"
-}, Ar = (r) => vr[r.width] ?? "", jr = (r) => wr[r.width] ?? "", Sr = (r) => Cr[r.width] ?? "", zr = (r) => Vr[r.width] ?? "", Mr = (r) => Br[r.width] ?? "", Or = (r) => Tr[r.width] ?? "", $r = (r) => Lr[r.width] ?? "", Hr = {
+}, zr = (r) => Vr[r.width] ?? "", Mr = (r) => Br[r.width] ?? "", Or = (r) => Tr[r.width] ?? "", $r = (r) => Lr[r.width] ?? "", Hr = (r) => Ar[r.width] ?? "", Wr = (r) => jr[r.width] ?? "", Rr = (r) => Sr[r.width] ?? "", Er = {
   10: "opacity-10",
   20: "opacity-20",
   30: "opacity-30",
@@ -801,7 +867,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
   80: "opacity-80",
   90: "opacity-90",
   100: "opacity-100"
-}, Wr = {
+}, Dr = {
   10: "bg-opacity-10",
   20: "bg-opacity-20",
   30: "bg-opacity-30",
@@ -812,7 +878,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
   80: "bg-opacity-80",
   90: "bg-opacity-90",
   100: "bg-opacity-100"
-}, Er = {
+}, Ir = {
   10: "outline-opacity-10",
   20: "outline-opacity-20",
   30: "outline-opacity-30",
@@ -823,7 +889,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
   80: "outline-opacity-80",
   90: "outline-opacity-90",
   100: "outline-opacity-100"
-}, Rr = (r) => Hr[r.opacity] ?? "", Dr = (r) => Wr[r.opacity] ?? "", Ir = (r) => Er[r.opacity] ?? "", Nr = t("", {
+}, Nr = (r) => Er[r.opacity] ?? "", Xr = (r) => Dr[r.opacity] ?? "", Yr = (r) => Ir[r.opacity] ?? "", Fr = t("", {
   variants: {
     spacing: {
       0: "m-0",
@@ -838,7 +904,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       "3xl": "m-3xl"
     }
   }
-}), Xr = t("", {
+}), qr = t("", {
   variants: {
     spacing: {
       0: "mx-0",
@@ -853,7 +919,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       "3xl": "mx-3xl"
     }
   }
-}), Yr = t("", {
+}), Gr = t("", {
   variants: {
     spacing: {
       0: "my-0",
@@ -868,7 +934,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       "3xl": "my-3xl"
     }
   }
-}), qr = t("", {
+}), Pr = t("", {
   variants: {
     spacing: {
       0: "mt-0",
@@ -883,7 +949,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       "3xl": "mt-3xl"
     }
   }
-}), Fr = t("", {
+}), Jr = t("", {
   variants: {
     spacing: {
       0: "mb-0",
@@ -898,7 +964,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       "3xl": "mb-3xl"
     }
   }
-}), Gr = t("", {
+}), Kr = t("", {
   variants: {
     spacing: {
       0: "ml-0",
@@ -913,7 +979,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       "3xl": "ml-3xl"
     }
   }
-}), Jr = t("", {
+}), Qr = t("", {
   variants: {
     spacing: {
       0: "mr-0",
@@ -928,7 +994,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       "3xl": "mr-3xl"
     }
   }
-}), Kr = t("", {
+}), Ur = t("", {
   variants: {
     spacing: {
       0: "p-0",
@@ -943,7 +1009,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       "3xl": "p-3xl"
     }
   }
-}), Pr = t("", {
+}), Zr = t("", {
   variants: {
     spacing: {
       0: "px-0",
@@ -958,7 +1024,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       "3xl": "px-3xl"
     }
   }
-}), Qr = t("", {
+}), _r = t("", {
   variants: {
     spacing: {
       0: "py-0",
@@ -973,7 +1039,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       "3xl": "py-3xl"
     }
   }
-}), Ur = t("", {
+}), rt = t("", {
   variants: {
     spacing: {
       0: "pt-0",
@@ -988,7 +1054,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       "3xl": "pt-3xl"
     }
   }
-}), Zr = t("", {
+}), tt = t("", {
   variants: {
     spacing: {
       0: "pb-0",
@@ -1003,7 +1069,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       "3xl": "pb-3xl"
     }
   }
-}), _r = t("", {
+}), at = t("", {
   variants: {
     spacing: {
       0: "pl-0",
@@ -1018,7 +1084,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       "3xl": "pl-3xl"
     }
   }
-}), rt = t("", {
+}), et = t("", {
   variants: {
     spacing: {
       0: "pr-0",
@@ -1033,7 +1099,7 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       "3xl": "pr-3xl"
     }
   }
-}), tt = t("", {
+}), it = t("", {
   variants: {
     spacing: {
       0: "gap-0",
@@ -1048,87 +1114,90 @@ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t =
       "3xl": "gap-3xl"
     }
   }
-}), at = {
+}), lt = {
   // color
   bgColorVariant: N,
   hoverBgColorVariant: X,
   focusBgColorVariant: Y,
-  beforeBgColorVariant: q,
-  afterBgColorVariant: F,
+  beforeBgColorVariant: F,
+  afterBgColorVariant: q,
   activeBgColorVariant: G,
-  textColorVariant: J,
-  hoverTextColorVariant: K,
-  focusTextColorVariant: P,
+  textColorVariant: P,
+  hoverTextColorVariant: J,
+  focusTextColorVariant: K,
   disabledTextColorVariant: Q,
   svgFillColorVariant: U,
   ringColorVariant: Z,
   focusRingColorVariant: _,
   activeRingColorVariant: rr,
-  ringOffsetColorVariant: tr,
-  outlineColorVariant: ar,
-  focusOutlineColorVariant: er,
-  activeOutlineColorVariant: lr,
-  btnColorVariant: ir,
-  listColorVariant: or,
-  borderColorVariant: nr,
-  borderXColorVariant: sr,
-  borderYColorVariant: dr,
-  borderTopColorVariant: cr,
-  borderBottomColorVariant: gr,
-  borderLeftColorVariant: br,
-  borderRightColorVariant: hr,
+  peerCheckedBgColorVariant: tr,
+  peerFocusVisibleRingColorVariant: ar,
+  focusVisibleRingColorVariant: er,
+  ringOffsetColorVariant: ir,
+  outlineColorVariant: lr,
+  focusOutlineColorVariant: or,
+  activeOutlineColorVariant: nr,
+  btnColorVariant: sr,
+  listColorVariant: dr,
+  borderColorVariant: cr,
+  borderXColorVariant: gr,
+  borderYColorVariant: br,
+  borderTopColorVariant: hr,
+  borderBottomColorVariant: ur,
+  borderLeftColorVariant: xr,
+  borderRightColorVariant: mr,
   // typography
-  bodyTextVariant: xr,
-  fontWeightVariant: mr,
-  textAlignVariant: ur,
-  h1Variant: pr,
-  h2Variant: fr,
-  h3Variant: kr,
-  h4Variant: yr,
+  bodyTextVariant: pr,
+  fontWeightVariant: fr,
+  textAlignVariant: kr,
+  h1Variant: yr,
+  h2Variant: vr,
+  h3Variant: wr,
+  h4Variant: Cr,
   // border width
-  borderWidthVariant: Ar,
-  borderXWidthVariant: jr,
-  borderYWidthVariant: Sr,
-  borderTopWidthVariant: zr,
-  borderBottomWidthVariant: Mr,
-  borderLeftWidthVariant: Or,
-  borderRightWidthVariant: $r,
+  borderWidthVariant: zr,
+  borderXWidthVariant: Mr,
+  borderYWidthVariant: Or,
+  borderTopWidthVariant: $r,
+  borderBottomWidthVariant: Hr,
+  borderLeftWidthVariant: Wr,
+  borderRightWidthVariant: Rr,
   // opacity
-  opacityVariant: Rr,
-  bgOpacityVariant: Dr,
-  outlineOpacityVariant: Ir,
+  opacityVariant: Nr,
+  bgOpacityVariant: Xr,
+  outlineOpacityVariant: Yr,
   // spacing
-  marginVariant: Nr,
-  marginXVariant: Xr,
-  marginYVariant: Yr,
-  marginTopVariant: qr,
-  marginBottomVariant: Fr,
-  marginLeftVariant: Gr,
-  marginRightVariant: Jr,
-  paddingVariant: Kr,
-  paddingXVariant: Pr,
-  paddingYVariant: Qr,
-  paddingTopVariant: Ur,
-  paddingBottomVariant: Zr,
-  paddingLeftVariant: _r,
-  paddingRightVariant: rt,
-  gapVariant: tt
+  marginVariant: Fr,
+  marginXVariant: qr,
+  marginYVariant: Gr,
+  marginTopVariant: Pr,
+  marginBottomVariant: Jr,
+  marginLeftVariant: Kr,
+  marginRightVariant: Qr,
+  paddingVariant: Ur,
+  paddingXVariant: Zr,
+  paddingYVariant: _r,
+  paddingTopVariant: rt,
+  paddingBottomVariant: tt,
+  paddingLeftVariant: at,
+  paddingRightVariant: et,
+  gapVariant: it
 };
 B({
   setup(r, { slots: n }) {
     const a = $(!1);
-    return R(() => {
+    return E(() => {
       a.value = !0;
     }), () => a.value && n.default ? n.default() : null;
   }
 });
-const et = {
+const ot = {
   xs: "backdrop-blur-xs",
   sm: "backdrop-blur-sm",
   md: "backdrop-blur-md",
   lg: "backdrop-blur-lg",
   xl: "backdrop-blur-xl"
-}, lt = {
+}, nt = {
   primary: "mcl-glass-primary",
   secondary: "mcl-glass-secondary",
   success: "mcl-glass-success",
@@ -1146,7 +1215,7 @@ const et = {
   black: "mcl-glass-black",
   white: "mcl-glass-white",
   transparent: "mcl-glass-transparent"
-}, it = {
+}, st = {
   10: "mcl-depth-10",
   20: "mcl-depth-20",
   30: "mcl-depth-30",
@@ -1157,16 +1226,16 @@ const et = {
   80: "mcl-depth-80",
   90: "mcl-depth-90",
   100: "mcl-depth-100"
-}, ot = (r, n, a, i = 10) => [
+}, dt = (r, n, a, l = 10) => [
   "mcl-glassmorphism",
-  lt[r],
-  et[n],
-  at.bgOpacityVariant({ opacity: a }),
-  it[i]
-].filter(Boolean).join(" "), nt = {
+  nt[r],
+  ot[n],
+  lt.bgOpacityVariant({ opacity: a }),
+  st[l]
+].filter(Boolean).join(" "), ct = {
   key: 0,
   class: "relative"
-}, st = ["src", "alt"], dt = ["innerHTML"], ct = { class: "flex h-full flex-col justify-between" }, gt = { class: "flex-1 px-xs pt-sm" }, bt = ["innerHTML"], ht = ["innerHTML"], xt = { class: "w-full px-xs" }, mt = ["href", "target"], At = /* @__PURE__ */ B({
+}, gt = ["src", "alt"], bt = ["innerHTML"], ht = { class: "flex h-full flex-col justify-between" }, ut = { class: "flex-1 px-xs pt-sm" }, xt = ["innerHTML"], mt = ["innerHTML"], pt = { class: "w-full px-xs" }, ft = ["href", "target"], zt = /* @__PURE__ */ B({
   __name: "MclCardA",
   props: {
     title: {},
@@ -1201,33 +1270,33 @@ const et = {
   setup(r, { emit: n }) {
     const a = r;
     L();
-    const i = n, m = f(() => {
+    const l = n, x = f(() => {
       const {
         borderColor: e,
         bgColor: o,
-        rounded: l,
+        rounded: i,
         enlargeOnHover: s,
         showShadow: p,
-        glass: u,
+        glass: m,
         glassBlur: C,
         glassOpacity: j,
-        fullWidth: E
+        fullWidth: R
       } = a;
       return [
         g.borderColorVariant({ color: e }),
         g.bgColorVariant({ color: o }),
-        !E && "max-w-[450px] sm:max-w-[350px]",
-        l ? "rounded-lg" : "rounded-sm",
+        !R && "max-w-[450px] sm:max-w-[350px]",
+        i ? "rounded-lg" : "rounded-sm",
         s && "hover:scale-105 transition ease-in duration-300",
         p && "drop-shadow-md",
-        u && ot(o, C, j)
+        m && dt(o, C, j)
       ].filter(Boolean).join(" ");
-    }), x = f(() => {
-      const { titleSize: e, titleColor: o, showHighlight: l } = a;
+    }), u = f(() => {
+      const { titleSize: e, titleColor: o, showHighlight: i } = a;
       return [
         g.h3Variant({ size: e }),
         g.textColorVariant({ color: o }),
-        l ? "mb-2xs" : "mb-xs"
+        i ? "mb-2xs" : "mb-xs"
       ].filter(Boolean).join(" ");
     }), v = f(() => {
       const { labelTextColor: e, labelColor: o } = a;
@@ -1236,54 +1305,54 @@ const et = {
         g.bgColorVariant({ color: o })
       ].filter(Boolean).join(" ");
     }), w = f(() => {
-      const { ctaColor: e, rounded: o } = a, l = ["light-1", "light-2", "light-3", "light-4"];
+      const { ctaColor: e, rounded: o } = a, i = ["light-1", "light-2", "light-3", "light-4"];
       return [
         g.btnColorVariant({ color: e }),
-        l.includes(e) ? "text-black" : "text-white",
+        i.includes(e) ? "text-black" : "text-white",
         o && "btn-round"
       ].filter(Boolean).join(" ");
     }), d = (e) => {
-      const { title: o, ctaLink: l, ctaTarget: s, ctaAsLink: p } = a, u = {
+      const { title: o, ctaLink: i, ctaTarget: s, ctaAsLink: p } = a, m = {
         title: o,
-        url: l,
+        url: i,
         target: s || "_self"
       };
-      !p && e.preventDefault(), i("card-btn-click", e, u);
+      !p && e.preventDefault(), l("card-btn-click", e, m);
     }, c = (e) => {
-      const { title: o, ctaLink: l, ctaTarget: s } = a;
-      i("card-click", e, {
+      const { title: o, ctaLink: i, ctaTarget: s } = a;
+      l("card-click", e, {
         title: o,
-        url: l,
+        url: i,
         target: s || "_self"
       });
     };
     return (e, o) => (k(), y("div", {
-      class: h(["xs:w-auto flex w-full flex-shrink-0 flex-grow cursor-pointer flex-col overflow-hidden border", m.value]),
+      class: h(["xs:w-auto flex w-full flex-shrink-0 flex-grow cursor-pointer flex-col overflow-hidden border", x.value]),
       onClick: c
     }, [
-      r.showImage ? (k(), y("div", nt, [
+      r.showImage ? (k(), y("div", ct, [
         b("img", {
           src: r.imageSource,
           alt: r.imageAlt,
           class: "aspect-video min-w-full object-cover object-top"
-        }, null, 8, st),
+        }, null, 8, gt),
         r.showLabel ? (k(), y("span", {
           key: 0,
           class: h(["absolute bottom-0 ml-xs inline-block translate-y-[50%] px-2xs py-3xs text-xs font-bold", v.value]),
           innerHTML: r.labelText
-        }, null, 10, dt)) : V("", !0)
+        }, null, 10, bt)) : V("", !0)
       ])) : V("", !0),
-      b("div", ct, [
-        b("div", gt, [
+      b("div", ht, [
+        b("div", ut, [
           !r.showImage && r.showLabel ? (k(), y("span", {
             key: 0,
             class: h(["mb-2xs inline-block px-2xs py-3xs text-xs font-bold", v.value]),
             innerHTML: r.labelText
-          }, null, 10, bt)) : V("", !0),
+          }, null, 10, xt)) : V("", !0),
           b("h3", {
-            class: h(x.value),
+            class: h(u.value),
             innerHTML: r.title
-          }, null, 10, ht),
+          }, null, 10, mt),
           r.showHighlight ? (k(), y("div", {
             key: 1,
             class: h(["mb-xs h-3xs w-md", S(g).bgColorVariant({ color: r.highlightColor })])
@@ -1302,19 +1371,19 @@ const et = {
           onClick: o[2] || (o[2] = z(() => {
           }, ["stop"]))
         }, [
-          b("div", xt, [
+          b("div", pt, [
             b("a", {
               href: r.ctaLink,
               target: r.ctaTarget,
               class: h(["btn btn-full", w.value]),
-              onClick: o[1] || (o[1] = (l) => d(l))
-            }, T(r.ctaText), 11, mt)
+              onClick: o[1] || (o[1] = (i) => d(i))
+            }, T(r.ctaText), 11, ft)
           ])
         ])) : V("", !0)
       ])
     ], 2));
   }
-}), ut = ["href", "target"], pt = { class: "peer absolute inset-0 z-15 flex flex-col items-start justify-end p-xs transition-opacity duration-200 hover:opacity-100 [@media(hover:hover)]:opacity-0" }, ft = ["innerHTML"], kt = ["src", "alt"], jt = /* @__PURE__ */ B({
+}), kt = ["href", "target"], yt = { class: "peer absolute inset-0 z-15 flex flex-col items-start justify-end p-xs transition-opacity duration-200 hover:opacity-100 [@media(hover:hover)]:opacity-0" }, vt = ["innerHTML"], wt = ["src", "alt"], Mt = /* @__PURE__ */ B({
   __name: "MclCardB",
   props: {
     title: {},
@@ -1334,12 +1403,12 @@ const et = {
   setup(r, { emit: n }) {
     const a = r;
     L();
-    const i = n, m = f(() => {
+    const l = n, x = f(() => {
       const { borderColor: d, rounded: c } = a, e = [
         g.borderColorVariant({ color: d })
       ];
       return e.push(c ? "rounded-md" : "rounded-sm"), e.join(" ");
-    }), x = f(() => {
+    }), u = f(() => {
       const { showGrayScale: d } = a;
       return d ? "[@media(hover:hover)]:grayscale peer-hover:grayscale-0" : "";
     }), v = f(() => {
@@ -1350,39 +1419,39 @@ const et = {
         g.bgColorVariant({ color: e })
       ].join(" ");
     }), w = (d) => {
-      const { title: c, ctaLink: e, ctaTarget: o, ctaAsLink: l } = a;
-      !l && d.preventDefault();
+      const { title: c, ctaLink: e, ctaTarget: o, ctaAsLink: i } = a;
+      !i && d.preventDefault();
       const s = {
         title: c,
         url: e,
         target: o || "_self"
       };
-      console.log(s), i("card-click", d, s);
+      console.log(s), l("card-click", d, s);
     };
     return (d, c) => (k(), y("div", {
-      class: h(["xs:w-auto relative w-full max-w-112.5 shrink-0 grow cursor-pointer overflow-hidden border sm:max-w-87.5", m.value])
+      class: h(["xs:w-auto relative w-full max-w-112.5 shrink-0 grow cursor-pointer overflow-hidden border sm:max-w-87.5", x.value])
     }, [
       b("a", {
         href: r.ctaLink,
         target: r.ctaTarget,
         onClick: c[0] || (c[0] = (e) => w(e))
       }, [
-        b("div", pt, [
+        b("div", yt, [
           b("h3", {
             innerHTML: r.title,
             class: h(["pointer-events-none mb-2xs inline-block px-xs py-2xs tracking-wide", v.value])
-          }, null, 10, ft),
+          }, null, 10, vt),
           A(d.$slots, "default")
         ]),
         b("img", {
           src: r.imageSource,
           alt: r.imageAlt,
-          class: h(["relative z-10 aspect-3/4 h-full w-full object-cover object-center transition-all duration-200", x.value])
-        }, null, 10, kt)
-      ], 8, ut)
+          class: h(["relative z-10 aspect-3/4 h-full w-full object-cover object-center transition-all duration-200", u.value])
+        }, null, 10, wt)
+      ], 8, kt)
     ], 2));
   }
-}), yt = ["src", "alt"], vt = /* @__PURE__ */ B({
+}), Ct = ["src", "alt"], Vt = /* @__PURE__ */ B({
   __name: "MclCardC",
   props: {
     imageSource: {},
@@ -1400,43 +1469,43 @@ const et = {
   setup(r, { emit: n }) {
     const a = r;
     L();
-    const i = $(!1), m = n, x = f(() => {
+    const l = $(!1), x = n, u = f(() => {
       const d = [
         g.bgColorVariant({ color: a.cardColor })
       ];
-      return i.value && d.push("flip-card"), d.join(" ");
+      return l.value && d.push("flip-card"), d.join(" ");
     }), v = f(() => {
       const {
         titleSize: d,
         titleColor: c,
         showHighlight: e,
         highlightColor: o,
-        highlightOpacity: l
+        highlightOpacity: i
       } = a, s = [
         g.h3Variant({ size: d }),
         g.textColorVariant({ color: c })
       ];
       return e && (s.push("px-xs py-2xs mb-2xs rounded"), s.push(g.bgColorVariant({ color: o })), s.push(
-        g.bgOpacityVariant({ opacity: l })
+        g.bgOpacityVariant({ opacity: i })
       )), s.join(" ");
     }), w = (d) => {
-      d.preventDefault(), i.value && m("card-click", d), i.value = !0;
+      d.preventDefault(), l.value && x("card-click", d), l.value = !0;
     };
     return (d, c) => (k(), y("div", {
-      class: h(["card relative aspect-square max-h-100 overflow-hidden transition duration-1600", x.value]),
+      class: h(["card relative aspect-square max-h-100 overflow-hidden transition duration-1600", u.value]),
       onClick: w
     }, [
       b("img", {
         src: r.imageSource,
         alt: r.imageAlt,
         class: h([
-          i.value ? "opacity-100" : "opacity-0",
+          l.value ? "opacity-100" : "opacity-0",
           "absolute aspect-square h-full w-full object-cover object-center transition-opacity delay-500 duration-800"
         ])
-      }, null, 10, yt),
+      }, null, 10, Ct),
       b("div", {
         class: h([
-          i.value ? "cursor-pointer opacity-100" : "opacity-0",
+          l.value ? "cursor-pointer opacity-100" : "opacity-0",
           "relative flex h-full flex-col justify-end p-sm transition delay-500 duration-800"
         ])
       }, [
@@ -1452,10 +1521,10 @@ const et = {
   }
 }), W = (r, n) => {
   const a = r.__vccOpts || r;
-  for (const [i, m] of n)
-    a[i] = m;
+  for (const [l, x] of n)
+    a[l] = x;
   return a;
-}, St = /* @__PURE__ */ W(vt, [["__scopeId", "data-v-eac7e2f0"]]), wt = { class: "flex flex-col overflow-hidden rounded-md" }, Ct = ["src", "alt"], Vt = ["href", "target"], Bt = /* @__PURE__ */ B({
+}, Ot = /* @__PURE__ */ W(Vt, [["__scopeId", "data-v-eac7e2f0"]]), Bt = { class: "flex flex-col overflow-hidden rounded-md" }, Tt = ["src", "alt"], Lt = ["href", "target"], At = /* @__PURE__ */ B({
   __name: "MclCardD",
   props: {
     showImage: { type: Boolean, default: !0 },
@@ -1500,7 +1569,7 @@ const et = {
       black: "from-black",
       white: "from-white",
       transparent: "from-transparent"
-    }, i = {
+    }, l = {
       primary: "via-primary",
       secondary: "via-secondary",
       success: "via-success",
@@ -1518,7 +1587,7 @@ const et = {
       black: "via-black",
       white: "via-white",
       transparent: "via-transparent"
-    }, m = {
+    }, x = {
       primary: "to-primary",
       secondary: "to-secondary",
       success: "to-success",
@@ -1536,49 +1605,49 @@ const et = {
       black: "to-black",
       white: "to-white",
       transparent: "to-transparent"
-    }, x = r;
+    }, u = r;
     L();
     const v = n, w = f(() => {
-      const { titleSize: l, titleColor: s } = x;
+      const { titleSize: i, titleColor: s } = u;
       return [
-        g.h2Variant({ size: l }),
+        g.h2Variant({ size: i }),
         g.textColorVariant({ color: s })
       ].join(" ");
     }), d = f(() => {
-      const { ctaButton: l, ctaButtonColor: s, ctaButtonBlock: p } = x, u = [], C = ["light-1", "light-2", "light-3", "light-4"];
-      return l ? u.push(
+      const { ctaButton: i, ctaButtonColor: s, ctaButtonBlock: p } = u, m = [], C = ["light-1", "light-2", "light-3", "light-4"];
+      return i ? m.push(
         "btn",
         g.btnColorVariant({ color: s })
-      ) : u.push("mcl-link"), l && p && u.push("btn-full"), l && !C.includes(s) && u.push("text-white"), u.join(" ");
+      ) : m.push("mcl-link"), i && p && m.push("btn-full"), i && !C.includes(s) && m.push("text-white"), m.join(" ");
     }), c = f(() => ({
-      "--border-width": `${x.borderWidth}px`
+      "--border-width": `${u.borderWidth}px`
     })), e = f(() => {
-      const l = a[x.borderColor], s = i[x.gradient1], p = m[x.gradient2];
+      const i = a[u.borderColor], s = l[u.gradient1], p = x[u.gradient2];
       return [
-        g.borderColorVariant({ color: x.borderColor }),
-        l,
+        g.borderColorVariant({ color: u.borderColor }),
+        i,
         s,
         p
       ].join(" ");
-    }), o = (l) => {
-      const { title: s, ctaLink: p, ctaLinkTarget: u, ctaAsLink: C } = x, j = {
+    }), o = (i) => {
+      const { title: s, ctaLink: p, ctaLinkTarget: m, ctaAsLink: C } = u, j = {
         title: s,
         url: p,
-        target: u || "_self"
+        target: m || "_self"
       };
-      !C && l.preventDefault(), v("card-click", l, j);
+      !C && i.preventDefault(), v("card-click", i, j);
     };
-    return (l, s) => (k(), y("div", {
+    return (i, s) => (k(), y("div", {
       class: h(["card xs:w-auto w-full max-w-112.5 shrink-0 grow overflow-hidden rounded-md border from-20% sm:max-w-87.5", e.value]),
       style: D(c.value)
     }, [
-      b("div", wt, [
+      b("div", Bt, [
         r.showImage ? (k(), y("img", {
           key: 0,
           src: r.imageSource,
           class: "max-h-50 min-w-full object-cover object-top",
           alt: r.imageAlt
-        }, null, 8, Ct)) : V("", !0),
+        }, null, 8, Tt)) : V("", !0),
         b("div", {
           class: h(["p-xs", S(g).bgColorVariant({ color: r.bgColor })])
         }, [
@@ -1590,7 +1659,7 @@ const et = {
             class: h(["mb-xs h-3xs w-md", S(g).bgColorVariant({ color: r.highlightColor })])
           }, null, 2)) : V("", !0),
           b("div", null, [
-            A(l.$slots, "default", {}, void 0, !0)
+            A(i.$slots, "default", {}, void 0, !0)
           ]),
           b("div", {
             class: h(["mt-xs", { "mb-2xs": !r.ctaButton }])
@@ -1600,16 +1669,16 @@ const et = {
               target: r.ctaLinkTarget,
               class: h(d.value),
               onClick: o
-            }, T(r.ctaText), 11, Vt)
+            }, T(r.ctaText), 11, Lt)
           ], 2)
         ], 2)
       ])
     ], 6));
   }
-}), zt = /* @__PURE__ */ W(Bt, [["__scopeId", "data-v-8bf2cac0"]]);
+}), $t = /* @__PURE__ */ W(At, [["__scopeId", "data-v-8bf2cac0"]]);
 export {
-  At as MclCardA,
-  jt as MclCardB,
-  St as MclCardC,
-  zt as MclCardD
+  zt as MclCardA,
+  Mt as MclCardB,
+  Ot as MclCardC,
+  $t as MclCardD
 };