@bobbykim/mcl-cards 0.10.3 → 0.10.4

package/dist/mcl-cards.js

@@ -1,1241 +1,11 @@
 (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 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, l = "";
-  if (typeof r == "string" || typeof r == "number") l += r;
-  else if (typeof r == "object") if (Array.isArray(r)) {
-    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, 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 l;
-  if (n?.variants == null) return O(r, a?.class, a?.className);
-  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 i = M(e) || M(o);
-    return x[c][i];
-  }), w = a && Object.entries(a).reduce((c, 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 [m, C] = p;
-      return Array.isArray(C) ? C.includes({
-        ...u,
-        ...w
-      }[m]) : {
-        ...u,
-        ...w
-      }[m] === C;
-    }) ? [
-      ...c,
-      o,
-      i
-    ] : c;
-  }, []);
-  return O(r, v, d, a?.class, a?.className);
-}, N = t("", {
-  variants: {
-    color: {
-      primary: "mcl-bg-primary",
-      secondary: "mcl-bg-secondary",
-      success: "mcl-bg-success",
-      danger: "mcl-bg-danger",
-      info: "mcl-bg-info",
-      warning: "mcl-bg-warning",
-      "light-1": "mcl-bg-light-1",
-      "light-2": "mcl-bg-light-2",
-      "light-3": "mcl-bg-light-3",
-      "light-4": "mcl-bg-light-4",
-      "dark-1": "mcl-bg-dark-1",
-      "dark-2": "mcl-bg-dark-2",
-      "dark-3": "mcl-bg-dark-3",
-      "dark-4": "mcl-bg-dark-4",
-      black: "mcl-bg-black",
-      white: "mcl-bg-white",
-      transparent: "mcl-bg-transparent"
-    }
-  }
-}), X = t("", {
-  variants: {
-    color: {
-      primary: "hover:bg-primary",
-      secondary: "hover:bg-secondary",
-      success: "hover:bg-success",
-      danger: "hover:bg-danger",
-      info: "hover:bg-info",
-      warning: "hover:bg-warning",
-      "light-1": "hover:bg-light-1",
-      "light-2": "hover:bg-light-2",
-      "light-3": "hover:bg-light-3",
-      "light-4": "hover:bg-light-4",
-      "dark-1": "hover:bg-dark-1",
-      "dark-2": "hover:bg-dark-2",
-      "dark-3": "hover:bg-dark-3",
-      "dark-4": "hover:bg-dark-4",
-      black: "hover:bg-black",
-      white: "hover:bg-white",
-      transparent: "hover:bg-transparent"
-    }
-  }
-}), Y = t("", {
-  variants: {
-    color: {
-      primary: "focus:bg-primary",
-      secondary: "focus:bg-secondary",
-      success: "focus:bg-success",
-      danger: "focus:bg-danger",
-      info: "focus:bg-info",
-      warning: "focus:bg-warning",
-      "light-1": "focus:bg-light-1",
-      "light-2": "focus:bg-light-2",
-      "light-3": "focus:bg-light-3",
-      "light-4": "focus:bg-light-4",
-      "dark-1": "focus:bg-dark-1",
-      "dark-2": "focus:bg-dark-2",
-      "dark-3": "focus:bg-dark-3",
-      "dark-4": "focus:bg-dark-4",
-      black: "focus:bg-black",
-      white: "focus:bg-white",
-      transparent: "focus:bg-transparent"
-    }
-  }
-}), F = t("", {
-  variants: {
-    color: {
-      primary: "before:bg-primary",
-      secondary: "before:bg-secondary",
-      success: "before:bg-success",
-      danger: "before:bg-danger",
-      info: "before:bg-info",
-      warning: "before:bg-warning",
-      "light-1": "before:bg-light-1",
-      "light-2": "before:bg-light-2",
-      "light-3": "before:bg-light-3",
-      "light-4": "before:bg-light-4",
-      "dark-1": "before:bg-dark-1",
-      "dark-2": "before:bg-dark-2",
-      "dark-3": "before:bg-dark-3",
-      "dark-4": "before:bg-dark-4",
-      black: "before:bg-black",
-      white: "before:bg-white",
-      transparent: "before:bg-transparent"
-    }
-  }
-}), q = t("", {
-  variants: {
-    color: {
-      primary: "after:bg-primary",
-      secondary: "after:bg-secondary",
-      success: "after:bg-success",
-      danger: "after:bg-danger",
-      info: "after:bg-info",
-      warning: "after:bg-warning",
-      "light-1": "after:bg-light-1",
-      "light-2": "after:bg-light-2",
-      "light-3": "after:bg-light-3",
-      "light-4": "after:bg-light-4",
-      "dark-1": "after:bg-dark-1",
-      "dark-2": "after:bg-dark-2",
-      "dark-3": "after:bg-dark-3",
-      "dark-4": "after:bg-dark-4",
-      black: "after:bg-black",
-      white: "after:bg-white",
-      transparent: "after:bg-transparent"
-    }
-  }
-}), G = t("", {
-  variants: {
-    color: {
-      primary: "active:bg-primary",
-      secondary: "active:bg-secondary",
-      success: "active:bg-success",
-      danger: "active:bg-danger",
-      info: "active:bg-info",
-      warning: "active:bg-warning",
-      "light-1": "active:bg-light-1",
-      "light-2": "active:bg-light-2",
-      "light-3": "active:bg-light-3",
-      "light-4": "active:bg-light-4",
-      "dark-1": "active:bg-dark-1",
-      "dark-2": "active:bg-dark-2",
-      "dark-3": "active:bg-dark-3",
-      "dark-4": "active:bg-dark-4",
-      black: "active:bg-black",
-      white: "active:bg-white",
-      transparent: "active:bg-transparent"
-    }
-  }
-}), P = t("", {
-  variants: {
-    color: {
-      primary: "text-primary",
-      secondary: "text-secondary",
-      success: "text-success",
-      danger: "text-danger",
-      info: "text-info",
-      warning: "text-warning",
-      "light-1": "text-light-1",
-      "light-2": "text-light-2",
-      "light-3": "text-light-3",
-      "light-4": "text-light-4",
-      "dark-1": "text-dark-1",
-      "dark-2": "text-dark-2",
-      "dark-3": "text-dark-3",
-      "dark-4": "text-dark-4",
-      black: "text-black",
-      white: "text-white",
-      transparent: "text-transparent"
-    }
-  }
-}), J = t("", {
-  variants: {
-    color: {
-      primary: "hover:text-primary",
-      secondary: "hover:text-secondary",
-      success: "hover:text-success",
-      danger: "hover:text-danger",
-      info: "hover:text-info",
-      warning: "hover:text-warning",
-      "light-1": "hover:text-light-1",
-      "light-2": "hover:text-light-2",
-      "light-3": "hover:text-light-3",
-      "light-4": "hover:text-light-4",
-      "dark-1": "hover:text-dark-1",
-      "dark-2": "hover:text-dark-2",
-      "dark-3": "hover:text-dark-3",
-      "dark-4": "hover:text-dark-4",
-      black: "hover:text-black",
-      white: "hover:text-white",
-      transparent: "hover:text-transparent"
-    }
-  }
-}), K = t("", {
-  variants: {
-    color: {
-      primary: "focus:text-primary",
-      secondary: "focus:text-secondary",
-      success: "focus:text-success",
-      danger: "focus:text-danger",
-      info: "focus:text-info",
-      warning: "focus:text-warning",
-      "light-1": "focus:text-light-1",
-      "light-2": "focus:text-light-2",
-      "light-3": "focus:text-light-3",
-      "light-4": "focus:text-light-4",
-      "dark-1": "focus:text-dark-1",
-      "dark-2": "focus:text-dark-2",
-      "dark-3": "focus:text-dark-3",
-      "dark-4": "focus:text-dark-4",
-      black: "focus:text-black",
-      white: "focus:text-white",
-      transparent: "focus:text-transparent"
-    }
-  }
-}), Q = t("", {
-  variants: {
-    color: {
-      primary: "disabled:text-primary",
-      secondary: "disabled:text-secondary",
-      success: "disabled:text-success",
-      danger: "disabled:text-danger",
-      info: "disabled:text-info",
-      warning: "disabled:text-warning",
-      "light-1": "disabled:text-light-1",
-      "light-2": "disabled:text-light-2",
-      "light-3": "disabled:text-light-3",
-      "light-4": "disabled:text-light-4",
-      "dark-1": "disabled:text-dark-1",
-      "dark-2": "disabled:text-dark-2",
-      "dark-3": "disabled:text-dark-3",
-      "dark-4": "disabled:text-dark-4",
-      black: "disabled:text-black",
-      white: "disabled:text-white",
-      transparent: "disabled:text-transparent"
-    }
-  }
-}), U = t("", {
-  variants: {
-    color: {
-      primary: "fill-primary",
-      secondary: "fill-secondary",
-      success: "fill-success",
-      danger: "fill-danger",
-      info: "fill-info",
-      warning: "fill-warning",
-      "light-1": "fill-light-1",
-      "light-2": "fill-light-2",
-      "light-3": "fill-light-3",
-      "light-4": "fill-light-4",
-      "dark-1": "fill-dark-1",
-      "dark-2": "fill-dark-2",
-      "dark-3": "fill-dark-3",
-      "dark-4": "fill-dark-4",
-      black: "fill-black",
-      white: "fill-white",
-      transparent: "fill-transparent"
-    }
-  }
-}), Z = t("", {
-  variants: {
-    color: {
-      primary: "ring-primary",
-      secondary: "ring-secondary",
-      success: "ring-success",
-      danger: "ring-danger",
-      info: "ring-info",
-      warning: "ring-warning",
-      "light-1": "ring-light-1",
-      "light-2": "ring-light-2",
-      "light-3": "ring-light-3",
-      "light-4": "ring-light-4",
-      "dark-1": "ring-dark-1",
-      "dark-2": "ring-dark-2",
-      "dark-3": "ring-dark-3",
-      "dark-4": "ring-dark-4",
-      black: "ring-black",
-      white: "ring-white",
-      transparent: "ring-transparent"
-    }
-  }
-}), _ = t("", {
-  variants: {
-    color: {
-      primary: "focus:ring-primary",
-      secondary: "focus:ring-secondary",
-      success: "focus:ring-success",
-      danger: "focus:ring-danger",
-      info: "focus:ring-info",
-      warning: "focus:ring-warning",
-      "light-1": "focus:ring-light-1",
-      "light-2": "focus:ring-light-2",
-      "light-3": "focus:ring-light-3",
-      "light-4": "focus:ring-light-4",
-      "dark-1": "focus:ring-dark-1",
-      "dark-2": "focus:ring-dark-2",
-      "dark-3": "focus:ring-dark-3",
-      "dark-4": "focus:ring-dark-4",
-      black: "focus:ring-black",
-      white: "focus:ring-white",
-      transparent: "focus:ring-transparent"
-    }
-  }
-}), rr = t("", {
-  variants: {
-    color: {
-      primary: "active:ring-primary",
-      secondary: "active:ring-secondary",
-      success: "active:ring-success",
-      danger: "active:ring-danger",
-      info: "active:ring-info",
-      warning: "active:ring-warning",
-      "light-1": "active:ring-light-1",
-      "light-2": "active:ring-light-2",
-      "light-3": "active:ring-light-3",
-      "light-4": "active:ring-light-4",
-      "dark-1": "active:ring-dark-1",
-      "dark-2": "active:ring-dark-2",
-      "dark-3": "active:ring-dark-3",
-      "dark-4": "active:ring-dark-4",
-      black: "active:ring-black",
-      white: "active:ring-white",
-      transparent: "active:ring-transparent"
-    }
-  }
-}), 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",
-      secondary: "ring-offset-secondary",
-      success: "ring-offset-success",
-      danger: "ring-offset-danger",
-      info: "ring-offset-info",
-      warning: "ring-offset-warning",
-      "light-1": "ring-offset-light-1",
-      "light-2": "ring-offset-light-2",
-      "light-3": "ring-offset-light-3",
-      "light-4": "ring-offset-light-4",
-      "dark-1": "ring-offset-dark-1",
-      "dark-2": "ring-offset-dark-2",
-      "dark-3": "ring-offset-dark-3",
-      "dark-4": "ring-offset-dark-4",
-      black: "ring-offset-black",
-      white: "ring-offset-white",
-      transparent: "ring-offset-transparent"
-    }
-  }
-}), lr = t("", {
-  variants: {
-    color: {
-      primary: "mcl-outline-primary",
-      secondary: "mcl-outline-secondary",
-      success: "mcl-outline-success",
-      danger: "mcl-outline-danger",
-      info: "mcl-outline-info",
-      warning: "mcl-outline-warning",
-      "light-1": "mcl-outline-light-1",
-      "light-2": "mcl-outline-light-2",
-      "light-3": "mcl-outline-light-3",
-      "light-4": "mcl-outline-light-4",
-      "dark-1": "mcl-outline-dark-1",
-      "dark-2": "mcl-outline-dark-2",
-      "dark-3": "mcl-outline-dark-3",
-      "dark-4": "mcl-outline-dark-4",
-      black: "mcl-outline-black",
-      white: "mcl-outline-white",
-      transparent: "mcl-outline-transparent"
-    }
-  }
-}), or = t("", {
-  variants: {
-    color: {
-      primary: "focus:mcl-outline-primary",
-      secondary: "focus:mcl-outline-secondary",
-      success: "focus:mcl-outline-success",
-      danger: "focus:mcl-outline-danger",
-      info: "focus:mcl-outline-info",
-      warning: "focus:mcl-outline-warning",
-      "light-1": "focus:mcl-outline-light-1",
-      "light-2": "focus:mcl-outline-light-2",
-      "light-3": "focus:mcl-outline-light-3",
-      "light-4": "focus:mcl-outline-light-4",
-      "dark-1": "focus:mcl-outline-dark-1",
-      "dark-2": "focus:mcl-outline-dark-2",
-      "dark-3": "focus:mcl-outline-dark-3",
-      "dark-4": "focus:mcl-outline-dark-4",
-      black: "focus:mcl-outline-black",
-      white: "focus:mcl-outline-white",
-      transparent: "focus:mcl-outline-transparent"
-    }
-  }
-}), nr = t("", {
-  variants: {
-    color: {
-      primary: "active:mcl-outline-primary",
-      secondary: "active:mcl-outline-secondary",
-      success: "active:mcl-outline-success",
-      danger: "active:mcl-outline-danger",
-      info: "active:mcl-outline-info",
-      warning: "active:mcl-outline-warning",
-      "light-1": "active:mcl-outline-light-1",
-      "light-2": "active:mcl-outline-light-2",
-      "light-3": "active:mcl-outline-light-3",
-      "light-4": "active:mcl-outline-light-4",
-      "dark-1": "active:mcl-outline-dark-1",
-      "dark-2": "active:mcl-outline-dark-2",
-      "dark-3": "active:mcl-outline-dark-3",
-      "dark-4": "active:mcl-outline-dark-4",
-      black: "active:mcl-outline-black",
-      white: "active:mcl-outline-white",
-      transparent: "active:mcl-outline-transparent"
-    }
-  }
-}), sr = t("", {
-  variants: {
-    color: {
-      primary: "btn-primary",
-      secondary: "btn-secondary",
-      success: "btn-success",
-      danger: "btn-danger",
-      info: "btn-info",
-      warning: "btn-warning",
-      "light-1": "btn-light-1",
-      "light-2": "btn-light-2",
-      "light-3": "btn-light-3",
-      "light-4": "btn-light-4",
-      "dark-1": "btn-dark-1",
-      "dark-2": "btn-dark-2",
-      "dark-3": "btn-dark-3",
-      "dark-4": "btn-dark-4",
-      black: "btn-black",
-      white: "btn-white",
-      transparent: "btn-transparent"
-    }
-  }
-}), dr = t("", {
-  variants: {
-    color: {
-      primary: "mcl-list-primary",
-      secondary: "mcl-list-secondary",
-      success: "mcl-list-success",
-      danger: "mcl-list-danger",
-      info: "mcl-list-info",
-      warning: "mcl-list-warning",
-      "light-1": "mcl-list-light-1",
-      "light-2": "mcl-list-light-2",
-      "light-3": "mcl-list-light-3",
-      "light-4": "mcl-list-light-4",
-      "dark-1": "mcl-list-dark-1",
-      "dark-2": "mcl-list-dark-2",
-      "dark-3": "mcl-list-dark-3",
-      "dark-4": "mcl-list-dark-4",
-      black: "mcl-list-black",
-      white: "mcl-list-white",
-      transparent: "mcl-list-transparent"
-    }
-  }
-}), cr = t("", {
-  variants: {
-    color: {
-      primary: "border-primary",
-      secondary: "border-secondary",
-      success: "border-success",
-      danger: "border-danger",
-      info: "border-info",
-      warning: "border-warning",
-      "light-1": "border-light-1",
-      "light-2": "border-light-2",
-      "light-3": "border-light-3",
-      "light-4": "border-light-4",
-      "dark-1": "border-dark-1",
-      "dark-2": "border-dark-2",
-      "dark-3": "border-dark-3",
-      "dark-4": "border-dark-4",
-      black: "border-black",
-      white: "border-white",
-      transparent: "border-transparent"
-    }
-  }
-}), gr = t("", {
-  variants: {
-    color: {
-      primary: "border-x-primary",
-      secondary: "border-x-secondary",
-      success: "border-x-success",
-      danger: "border-x-danger",
-      info: "border-x-info",
-      warning: "border-x-warning",
-      "light-1": "border-x-light-1",
-      "light-2": "border-x-light-2",
-      "light-3": "border-x-light-3",
-      "light-4": "border-x-light-4",
-      "dark-1": "border-x-dark-1",
-      "dark-2": "border-x-dark-2",
-      "dark-3": "border-x-dark-3",
-      "dark-4": "border-x-dark-4",
-      black: "border-x-black",
-      white: "border-x-white",
-      transparent: "border-x-transparent"
-    }
-  }
-}), br = t("", {
-  variants: {
-    color: {
-      primary: "border-y-primary",
-      secondary: "border-y-secondary",
-      success: "border-y-success",
-      danger: "border-y-danger",
-      info: "border-y-info",
-      warning: "border-y-warning",
-      "light-1": "border-y-light-1",
-      "light-2": "border-y-light-2",
-      "light-3": "border-y-light-3",
-      "light-4": "border-y-light-4",
-      "dark-1": "border-y-dark-1",
-      "dark-2": "border-y-dark-2",
-      "dark-3": "border-y-dark-3",
-      "dark-4": "border-y-dark-4",
-      black: "border-y-black",
-      white: "border-y-white",
-      transparent: "border-y-transparent"
-    }
-  }
-}), hr = t("", {
-  variants: {
-    color: {
-      primary: "border-t-primary",
-      secondary: "border-t-secondary",
-      success: "border-t-success",
-      danger: "border-t-danger",
-      info: "border-t-info",
-      warning: "border-t-warning",
-      "light-1": "border-t-light-1",
-      "light-2": "border-t-light-2",
-      "light-3": "border-t-light-3",
-      "light-4": "border-t-light-4",
-      "dark-1": "border-t-dark-1",
-      "dark-2": "border-t-dark-2",
-      "dark-3": "border-t-dark-3",
-      "dark-4": "border-t-dark-4",
-      black: "border-t-black",
-      white: "border-t-white",
-      transparent: "border-t-transparent"
-    }
-  }
-}), ur = t("", {
-  variants: {
-    color: {
-      primary: "border-b-primary",
-      secondary: "border-b-secondary",
-      success: "border-b-success",
-      danger: "border-b-danger",
-      info: "border-b-info",
-      warning: "border-b-warning",
-      "light-1": "border-b-light-1",
-      "light-2": "border-b-light-2",
-      "light-3": "border-b-light-3",
-      "light-4": "border-b-light-4",
-      "dark-1": "border-b-dark-1",
-      "dark-2": "border-b-dark-2",
-      "dark-3": "border-b-dark-3",
-      "dark-4": "border-b-dark-4",
-      black: "border-b-black",
-      white: "border-b-white",
-      transparent: "border-b-transparent"
-    }
-  }
-}), xr = t("", {
-  variants: {
-    color: {
-      primary: "border-l-primary",
-      secondary: "border-l-secondary",
-      success: "border-l-success",
-      danger: "border-l-danger",
-      info: "border-l-info",
-      warning: "border-l-warning",
-      "light-1": "border-l-light-1",
-      "light-2": "border-l-light-2",
-      "light-3": "border-l-light-3",
-      "light-4": "border-l-light-4",
-      "dark-1": "border-l-dark-1",
-      "dark-2": "border-l-dark-2",
-      "dark-3": "border-l-dark-3",
-      "dark-4": "border-l-dark-4",
-      black: "border-l-black",
-      white: "border-l-white",
-      transparent: "border-l-transparent"
-    }
-  }
-}), mr = t("", {
-  variants: {
-    color: {
-      primary: "border-r-primary",
-      secondary: "border-r-secondary",
-      success: "border-r-success",
-      danger: "border-r-danger",
-      info: "border-r-info",
-      warning: "border-r-warning",
-      "light-1": "border-r-light-1",
-      "light-2": "border-r-light-2",
-      "light-3": "border-r-light-3",
-      "light-4": "border-r-light-4",
-      "dark-1": "border-r-dark-1",
-      "dark-2": "border-r-dark-2",
-      "dark-3": "border-r-dark-3",
-      "dark-4": "border-r-dark-4",
-      black: "border-r-black",
-      white: "border-r-white",
-      transparent: "border-r-transparent"
-    }
-  }
-}), pr = t("", {
-  variants: {
-    size: {
-      xs: "text-xs",
-      sm: "text-sm",
-      md: "text-md",
-      lg: "text-lg",
-      xl: "text-xl"
-    }
-  }
-}), fr = t("", {
-  variants: {
-    weight: {
-      light: "font-light",
-      normal: "font-normal",
-      bold: "font-bold"
-    }
-  }
-}), kr = t("", {
-  variants: {
-    align: {
-      left: "text-left",
-      center: "text-center",
-      right: "text-right"
-    }
-  }
-}), yr = t("", {
-  variants: {
-    size: {
-      sm: "h1-sm",
-      md: "h1-md",
-      lg: "h1-lg",
-      xl: "h1-xl"
-    }
-  }
-}), vr = t("", {
-  variants: {
-    size: {
-      sm: "h2-sm",
-      md: "h2-md",
-      lg: "h2-lg",
-      xl: "h2-xl"
-    }
-  }
-}), wr = t("", {
-  variants: {
-    size: {
-      sm: "h3-sm",
-      md: "h3-md",
-      lg: "h3-lg",
-      xl: "h3-xl"
-    }
-  }
-}), Cr = t("", {
-  variants: {
-    size: {
-      sm: "h4-sm",
-      md: "h4-md",
-      lg: "h4-lg",
-      xl: "h4-xl"
-    }
-  }
-}), Vr = {
-  1: "border-[1px]",
-  2: "border-[2px]",
-  3: "border-[3px]",
-  4: "border-[4px]",
-  5: "border-[5px]",
-  6: "border-[6px]",
-  7: "border-[7px]",
-  8: "border-[8px]",
-  9: "border-[9px]",
-  10: "border-[10px]",
-  11: "border-[11px]",
-  12: "border-[12px]"
-}, Br = {
-  1: "border-x-[1px]",
-  2: "border-x-[2px]",
-  3: "border-x-[3px]",
-  4: "border-x-[4px]",
-  5: "border-x-[5px]",
-  6: "border-x-[6px]",
-  7: "border-x-[7px]",
-  8: "border-x-[8px]",
-  9: "border-x-[9px]",
-  10: "border-x-[10px]",
-  11: "border-x-[11px]",
-  12: "border-x-[12px]"
-}, Tr = {
-  1: "border-y-[1px]",
-  2: "border-y-[2px]",
-  3: "border-y-[3px]",
-  4: "border-y-[4px]",
-  5: "border-y-[5px]",
-  6: "border-y-[6px]",
-  7: "border-y-[7px]",
-  8: "border-y-[8px]",
-  9: "border-y-[9px]",
-  10: "border-y-[10px]",
-  11: "border-y-[11px]",
-  12: "border-y-[12px]"
-}, Lr = {
-  1: "border-t-[1px]",
-  2: "border-t-[2px]",
-  3: "border-t-[3px]",
-  4: "border-t-[4px]",
-  5: "border-t-[5px]",
-  6: "border-t-[6px]",
-  7: "border-t-[7px]",
-  8: "border-t-[8px]",
-  9: "border-t-[9px]",
-  10: "border-t-[10px]",
-  11: "border-t-[11px]",
-  12: "border-t-[12px]"
-}, Ar = {
-  1: "border-b-[1px]",
-  2: "border-b-[2px]",
-  3: "border-b-[3px]",
-  4: "border-b-[4px]",
-  5: "border-b-[5px]",
-  6: "border-b-[6px]",
-  7: "border-b-[7px]",
-  8: "border-b-[8px]",
-  9: "border-b-[9px]",
-  10: "border-b-[10px]",
-  11: "border-b-[11px]",
-  12: "border-b-[12px]"
-}, jr = {
-  1: "border-l-[1px]",
-  2: "border-l-[2px]",
-  3: "border-l-[3px]",
-  4: "border-l-[4px]",
-  5: "border-l-[5px]",
-  6: "border-l-[6px]",
-  7: "border-l-[7px]",
-  8: "border-l-[8px]",
-  9: "border-l-[9px]",
-  10: "border-l-[10px]",
-  11: "border-l-[11px]",
-  12: "border-l-[12px]"
-}, Sr = {
-  1: "border-r-[1px]",
-  2: "border-r-[2px]",
-  3: "border-r-[3px]",
-  4: "border-r-[4px]",
-  5: "border-r-[5px]",
-  6: "border-r-[6px]",
-  7: "border-r-[7px]",
-  8: "border-r-[8px]",
-  9: "border-r-[9px]",
-  10: "border-r-[10px]",
-  11: "border-r-[11px]",
-  12: "border-r-[12px]"
-}, 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",
-  40: "opacity-40",
-  50: "opacity-50",
-  60: "opacity-60",
-  70: "opacity-70",
-  80: "opacity-80",
-  90: "opacity-90",
-  100: "opacity-100"
-}, Dr = {
-  10: "bg-opacity-10",
-  20: "bg-opacity-20",
-  30: "bg-opacity-30",
-  40: "bg-opacity-40",
-  50: "bg-opacity-50",
-  60: "bg-opacity-60",
-  70: "bg-opacity-70",
-  80: "bg-opacity-80",
-  90: "bg-opacity-90",
-  100: "bg-opacity-100"
-}, Ir = {
-  10: "outline-opacity-10",
-  20: "outline-opacity-20",
-  30: "outline-opacity-30",
-  40: "outline-opacity-40",
-  50: "outline-opacity-50",
-  60: "outline-opacity-60",
-  70: "outline-opacity-70",
-  80: "outline-opacity-80",
-  90: "outline-opacity-90",
-  100: "outline-opacity-100"
-}, Nr = (r) => Er[r.opacity] ?? "", Xr = (r) => Dr[r.opacity] ?? "", Yr = (r) => Ir[r.opacity] ?? "", Fr = t("", {
-  variants: {
-    spacing: {
-      0: "m-0",
-      "3xs": "m-3xs",
-      "2xs": "m-2xs",
-      xs: "m-xs",
-      sm: "m-sm",
-      md: "m-md",
-      lg: "m-lg",
-      xl: "m-xl",
-      "2xl": "m-2xl",
-      "3xl": "m-3xl"
-    }
-  }
-}), qr = t("", {
-  variants: {
-    spacing: {
-      0: "mx-0",
-      "3xs": "mx-3xs",
-      "2xs": "mx-2xs",
-      xs: "mx-xs",
-      sm: "mx-sm",
-      md: "mx-md",
-      lg: "mx-lg",
-      xl: "mx-xl",
-      "2xl": "mx-2xl",
-      "3xl": "mx-3xl"
-    }
-  }
-}), Gr = t("", {
-  variants: {
-    spacing: {
-      0: "my-0",
-      "3xs": "my-3xs",
-      "2xs": "my-2xs",
-      xs: "my-xs",
-      sm: "my-sm",
-      md: "my-md",
-      lg: "my-lg",
-      xl: "my-xl",
-      "2xl": "my-2xl",
-      "3xl": "my-3xl"
-    }
-  }
-}), Pr = t("", {
-  variants: {
-    spacing: {
-      0: "mt-0",
-      "3xs": "mt-3xs",
-      "2xs": "mt-2xs",
-      xs: "mt-xs",
-      sm: "mt-sm",
-      md: "mt-md",
-      lg: "mt-lg",
-      xl: "mt-xl",
-      "2xl": "mt-2xl",
-      "3xl": "mt-3xl"
-    }
-  }
-}), Jr = t("", {
-  variants: {
-    spacing: {
-      0: "mb-0",
-      "3xs": "mb-3xs",
-      "2xs": "mb-2xs",
-      xs: "mb-xs",
-      sm: "mb-sm",
-      md: "mb-md",
-      lg: "mb-lg",
-      xl: "mb-xl",
-      "2xl": "mb-2xl",
-      "3xl": "mb-3xl"
-    }
-  }
-}), Kr = t("", {
-  variants: {
-    spacing: {
-      0: "ml-0",
-      "3xs": "ml-3xs",
-      "2xs": "ml-2xs",
-      xs: "ml-xs",
-      sm: "ml-sm",
-      md: "ml-md",
-      lg: "ml-lg",
-      xl: "ml-xl",
-      "2xl": "ml-2xl",
-      "3xl": "ml-3xl"
-    }
-  }
-}), Qr = t("", {
-  variants: {
-    spacing: {
-      0: "mr-0",
-      "3xs": "mr-3xs",
-      "2xs": "mr-2xs",
-      xs: "mr-xs",
-      sm: "mr-sm",
-      md: "mr-md",
-      lg: "mr-lg",
-      xl: "mr-xl",
-      "2xl": "mr-2xl",
-      "3xl": "mr-3xl"
-    }
-  }
-}), Ur = t("", {
-  variants: {
-    spacing: {
-      0: "p-0",
-      "3xs": "p-3xs",
-      "2xs": "p-2xs",
-      xs: "p-xs",
-      sm: "p-sm",
-      md: "p-md",
-      lg: "p-lg",
-      xl: "p-xl",
-      "2xl": "p-2xl",
-      "3xl": "p-3xl"
-    }
-  }
-}), Zr = t("", {
-  variants: {
-    spacing: {
-      0: "px-0",
-      "3xs": "px-3xs",
-      "2xs": "px-2xs",
-      xs: "px-xs",
-      sm: "px-sm",
-      md: "px-md",
-      lg: "px-lg",
-      xl: "px-xl",
-      "2xl": "px-2xl",
-      "3xl": "px-3xl"
-    }
-  }
-}), _r = t("", {
-  variants: {
-    spacing: {
-      0: "py-0",
-      "3xs": "py-3xs",
-      "2xs": "py-2xs",
-      xs: "py-xs",
-      sm: "py-sm",
-      md: "py-md",
-      lg: "py-lg",
-      xl: "py-xl",
-      "2xl": "py-2xl",
-      "3xl": "py-3xl"
-    }
-  }
-}), rt = t("", {
-  variants: {
-    spacing: {
-      0: "pt-0",
-      "3xs": "pt-3xs",
-      "2xs": "pt-2xs",
-      xs: "pt-xs",
-      sm: "pt-sm",
-      md: "pt-md",
-      lg: "pt-lg",
-      xl: "pt-xl",
-      "2xl": "pt-2xl",
-      "3xl": "pt-3xl"
-    }
-  }
-}), tt = t("", {
-  variants: {
-    spacing: {
-      0: "pb-0",
-      "3xs": "pb-3xs",
-      "2xs": "pb-2xs",
-      xs: "pb-xs",
-      sm: "pb-sm",
-      md: "pb-md",
-      lg: "pb-lg",
-      xl: "pb-xl",
-      "2xl": "pb-2xl",
-      "3xl": "pb-3xl"
-    }
-  }
-}), at = t("", {
-  variants: {
-    spacing: {
-      0: "pl-0",
-      "3xs": "pl-3xs",
-      "2xs": "pl-2xs",
-      xs: "pl-xs",
-      sm: "pl-sm",
-      md: "pl-md",
-      lg: "pl-lg",
-      xl: "pl-xl",
-      "2xl": "pl-2xl",
-      "3xl": "pl-3xl"
-    }
-  }
-}), et = t("", {
-  variants: {
-    spacing: {
-      0: "pr-0",
-      "3xs": "pr-3xs",
-      "2xs": "pr-2xs",
-      xs: "pr-xs",
-      sm: "pr-sm",
-      md: "pr-md",
-      lg: "pr-lg",
-      xl: "pr-xl",
-      "2xl": "pr-2xl",
-      "3xl": "pr-3xl"
-    }
-  }
-}), it = t("", {
-  variants: {
-    spacing: {
-      0: "gap-0",
-      "3xs": "gap-3xs",
-      "2xs": "gap-2xs",
-      xs: "gap-xs",
-      sm: "gap-sm",
-      md: "gap-md",
-      lg: "gap-lg",
-      xl: "gap-xl",
-      "2xl": "gap-2xl",
-      "3xl": "gap-3xl"
-    }
-  }
-}), lt = {
-  // color
-  bgColorVariant: N,
-  hoverBgColorVariant: X,
-  focusBgColorVariant: Y,
-  beforeBgColorVariant: F,
-  afterBgColorVariant: q,
-  activeBgColorVariant: G,
-  textColorVariant: P,
-  hoverTextColorVariant: J,
-  focusTextColorVariant: K,
-  disabledTextColorVariant: Q,
-  svgFillColorVariant: U,
-  ringColorVariant: Z,
-  focusRingColorVariant: _,
-  activeRingColorVariant: rr,
-  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: pr,
-  fontWeightVariant: fr,
-  textAlignVariant: kr,
-  h1Variant: yr,
-  h2Variant: vr,
-  h3Variant: wr,
-  h4Variant: Cr,
-  // border width
-  borderWidthVariant: zr,
-  borderXWidthVariant: Mr,
-  borderYWidthVariant: Or,
-  borderTopWidthVariant: $r,
-  borderBottomWidthVariant: Hr,
-  borderLeftWidthVariant: Wr,
-  borderRightWidthVariant: Rr,
-  // opacity
-  opacityVariant: Nr,
-  bgOpacityVariant: Xr,
-  outlineOpacityVariant: Yr,
-  // spacing
-  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 E(() => {
-      a.value = !0;
-    }), () => a.value && n.default ? n.default() : null;
-  }
-});
-const ot = {
-  xs: "backdrop-blur-xs",
-  sm: "backdrop-blur-sm",
-  md: "backdrop-blur-md",
-  lg: "backdrop-blur-lg",
-  xl: "backdrop-blur-xl"
-}, nt = {
-  primary: "mcl-glass-primary",
-  secondary: "mcl-glass-secondary",
-  success: "mcl-glass-success",
-  info: "mcl-glass-info",
-  danger: "mcl-glass-danger",
-  warning: "mcl-glass-warning",
-  "light-1": "mcl-glass-light-1",
-  "light-2": "mcl-glass-light-2",
-  "light-3": "mcl-glass-light-3",
-  "light-4": "mcl-glass-light-4",
-  "dark-1": "mcl-glass-dark-1",
-  "dark-2": "mcl-glass-dark-2",
-  "dark-3": "mcl-glass-dark-3",
-  "dark-4": "mcl-glass-dark-4",
-  black: "mcl-glass-black",
-  white: "mcl-glass-white",
-  transparent: "mcl-glass-transparent"
-}, st = {
-  10: "mcl-depth-10",
-  20: "mcl-depth-20",
-  30: "mcl-depth-30",
-  40: "mcl-depth-40",
-  50: "mcl-depth-50",
-  60: "mcl-depth-60",
-  70: "mcl-depth-70",
-  80: "mcl-depth-80",
-  90: "mcl-depth-90",
-  100: "mcl-depth-100"
-}, dt = (r, n, a, l = 10) => [
-  "mcl-glassmorphism",
-  nt[r],
-  ot[n],
-  lt.bgOpacityVariant({ opacity: a }),
-  st[l]
-].filter(Boolean).join(" "), ct = {
+import { defineComponent as L, useSlots as T, computed as g, openBlock as m, createElementBlock as C, normalizeClass as c, createElementVNode as s, createCommentVNode as x, unref as S, withModifiers as j, renderSlot as A, toDisplayString as B, ref as z, normalizeStyle as $ } from "vue";
+import { generateClass as i } from "@bobbykim/manguito-theme";
+import { getGlassmorphismClass as E } from "@bobbykim/manguito-theme/util";
+const O = {
   key: 0,
   class: "relative"
-}, 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({
+}, D = ["src", "alt"], I = ["innerHTML"], W = { class: "flex h-full flex-col justify-between" }, G = { class: "flex-1 px-xs pt-sm" }, q = ["innerHTML"], N = ["innerHTML"], F = { class: "w-full px-xs" }, R = ["href", "target"], ot = /* @__PURE__ */ L({
   __name: "MclCardA",
   props: {
     title: {},
@@ -1267,123 +37,123 @@ const ot = {
     showShadow: { type: Boolean, default: !0 }
   },
   emits: ["card-click", "card-btn-click"],
-  setup(r, { emit: n }) {
-    const a = r;
-    L();
-    const l = n, x = f(() => {
+  setup(t, { emit: v }) {
+    const n = t;
+    T();
+    const u = v, b = g(() => {
       const {
         borderColor: e,
-        bgColor: o,
-        rounded: i,
-        enlargeOnHover: s,
-        showShadow: p,
-        glass: m,
-        glassBlur: C,
-        glassOpacity: j,
-        fullWidth: R
-      } = a;
+        bgColor: l,
+        rounded: a,
+        enlargeOnHover: o,
+        showShadow: k,
+        glass: f,
+        glassBlur: p,
+        glassOpacity: V,
+        fullWidth: M
+      } = n;
       return [
-        g.borderColorVariant({ color: e }),
-        g.bgColorVariant({ color: o }),
-        !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",
-        m && dt(o, C, j)
+        i.borderColorVariant({ color: e }),
+        i.bgColorVariant({ color: l }),
+        !M && "max-w-[450px] sm:max-w-[350px]",
+        a ? "rounded-lg" : "rounded-sm",
+        o && "hover:scale-105 transition ease-in duration-300",
+        k && "drop-shadow-md",
+        f && E(l, p, V)
       ].filter(Boolean).join(" ");
-    }), u = f(() => {
-      const { titleSize: e, titleColor: o, showHighlight: i } = a;
+    }), h = g(() => {
+      const { titleSize: e, titleColor: l, showHighlight: a } = n;
       return [
-        g.h3Variant({ size: e }),
-        g.textColorVariant({ color: o }),
-        i ? "mb-2xs" : "mb-xs"
+        i.h3Variant({ size: e }),
+        i.textColorVariant({ color: l }),
+        a ? "mb-2xs" : "mb-xs"
       ].filter(Boolean).join(" ");
-    }), v = f(() => {
-      const { labelTextColor: e, labelColor: o } = a;
+    }), y = g(() => {
+      const { labelTextColor: e, labelColor: l } = n;
       return [
-        g.textColorVariant({ color: e }),
-        g.bgColorVariant({ color: o })
+        i.textColorVariant({ color: e }),
+        i.bgColorVariant({ color: l })
       ].filter(Boolean).join(" ");
-    }), w = f(() => {
-      const { ctaColor: e, rounded: o } = a, i = ["light-1", "light-2", "light-3", "light-4"];
+    }), w = g(() => {
+      const { ctaColor: e, rounded: l } = n, a = ["light-1", "light-2", "light-3", "light-4"];
       return [
-        g.btnColorVariant({ color: e }),
-        i.includes(e) ? "text-black" : "text-white",
-        o && "btn-round"
+        i.btnColorVariant({ color: e }),
+        a.includes(e) ? "text-black" : "text-white",
+        l && "btn-round"
       ].filter(Boolean).join(" ");
-    }), d = (e) => {
-      const { title: o, ctaLink: i, ctaTarget: s, ctaAsLink: p } = a, m = {
-        title: o,
-        url: i,
-        target: s || "_self"
+    }), r = (e) => {
+      const { title: l, ctaLink: a, ctaTarget: o, ctaAsLink: k } = n, f = {
+        title: l,
+        url: a,
+        target: o || "_self"
       };
-      !p && e.preventDefault(), l("card-btn-click", e, m);
-    }, c = (e) => {
-      const { title: o, ctaLink: i, ctaTarget: s } = a;
-      l("card-click", e, {
-        title: o,
-        url: i,
-        target: s || "_self"
+      !k && e.preventDefault(), u("card-btn-click", e, f);
+    }, d = (e) => {
+      const { title: l, ctaLink: a, ctaTarget: o } = n;
+      u("card-click", e, {
+        title: l,
+        url: a,
+        target: o || "_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", x.value]),
-      onClick: c
+    return (e, l) => (m(), C("div", {
+      class: c(["xs:w-auto flex w-full flex-shrink-0 flex-grow cursor-pointer flex-col overflow-hidden border", b.value]),
+      onClick: d
     }, [
-      r.showImage ? (k(), y("div", ct, [
-        b("img", {
-          src: r.imageSource,
-          alt: r.imageAlt,
+      t.showImage ? (m(), C("div", O, [
+        s("img", {
+          src: t.imageSource,
+          alt: t.imageAlt,
           class: "aspect-video min-w-full object-cover object-top"
-        }, null, 8, gt),
-        r.showLabel ? (k(), y("span", {
+        }, null, 8, D),
+        t.showLabel ? (m(), C("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, bt)) : V("", !0)
-      ])) : V("", !0),
-      b("div", ht, [
-        b("div", ut, [
-          !r.showImage && r.showLabel ? (k(), y("span", {
+          class: c(["absolute bottom-0 ml-xs inline-block translate-y-[50%] px-2xs py-3xs text-xs font-bold", y.value]),
+          innerHTML: t.labelText
+        }, null, 10, I)) : x("", !0)
+      ])) : x("", !0),
+      s("div", W, [
+        s("div", G, [
+          !t.showImage && t.showLabel ? (m(), C("span", {
             key: 0,
-            class: h(["mb-2xs inline-block px-2xs py-3xs text-xs font-bold", v.value]),
-            innerHTML: r.labelText
-          }, null, 10, xt)) : V("", !0),
-          b("h3", {
-            class: h(u.value),
-            innerHTML: r.title
-          }, null, 10, mt),
-          r.showHighlight ? (k(), y("div", {
+            class: c(["mb-2xs inline-block px-2xs py-3xs text-xs font-bold", y.value]),
+            innerHTML: t.labelText
+          }, null, 10, q)) : x("", !0),
+          s("h3", {
+            class: c(h.value),
+            innerHTML: t.title
+          }, null, 10, N),
+          t.showHighlight ? (m(), C("div", {
             key: 1,
-            class: h(["mb-xs h-3xs w-md", S(g).bgColorVariant({ color: r.highlightColor })])
-          }, null, 2)) : V("", !0),
-          b("div", {
+            class: c(["mb-xs h-3xs w-md", S(i).bgColorVariant({ color: t.highlightColor })])
+          }, null, 2)) : x("", !0),
+          s("div", {
             class: "mb-sm cursor-default",
-            onClick: o[0] || (o[0] = z(() => {
+            onClick: l[0] || (l[0] = j(() => {
             }, ["stop"]))
           }, [
             A(e.$slots, "default")
           ])
         ]),
-        r.showCta ? (k(), y("div", {
+        t.showCta ? (m(), C("div", {
           key: 0,
           class: "cursor-default border-0 pb-sm",
-          onClick: o[2] || (o[2] = z(() => {
+          onClick: l[2] || (l[2] = j(() => {
           }, ["stop"]))
         }, [
-          b("div", pt, [
-            b("a", {
-              href: r.ctaLink,
-              target: r.ctaTarget,
-              class: h(["btn btn-full", w.value]),
-              onClick: o[1] || (o[1] = (i) => d(i))
-            }, T(r.ctaText), 11, ft)
+          s("div", F, [
+            s("a", {
+              href: t.ctaLink,
+              target: t.ctaTarget,
+              class: c(["btn btn-full", w.value]),
+              onClick: l[1] || (l[1] = (a) => r(a))
+            }, B(t.ctaText), 11, R)
           ])
-        ])) : V("", !0)
+        ])) : x("", !0)
       ])
     ], 2));
   }
-}), 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({
+}), J = ["href", "target"], K = { 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" }, P = ["innerHTML"], Q = ["src", "alt"], rt = /* @__PURE__ */ L({
   __name: "MclCardB",
   props: {
     title: {},
@@ -1400,58 +170,58 @@ const ot = {
     rounded: { type: Boolean, default: !1 }
   },
   emits: ["card-click"],
-  setup(r, { emit: n }) {
-    const a = r;
-    L();
-    const l = n, x = f(() => {
-      const { borderColor: d, rounded: c } = a, e = [
-        g.borderColorVariant({ color: d })
+  setup(t, { emit: v }) {
+    const n = t;
+    T();
+    const u = v, b = g(() => {
+      const { borderColor: r, rounded: d } = n, e = [
+        i.borderColorVariant({ color: r })
       ];
-      return e.push(c ? "rounded-md" : "rounded-sm"), e.join(" ");
-    }), u = f(() => {
-      const { showGrayScale: d } = a;
-      return d ? "[@media(hover:hover)]:grayscale peer-hover:grayscale-0" : "";
-    }), v = f(() => {
-      const { titleSize: d, titleColor: c, titleBlockColor: e } = a;
+      return e.push(d ? "rounded-md" : "rounded-sm"), e.join(" ");
+    }), h = g(() => {
+      const { showGrayScale: r } = n;
+      return r ? "[@media(hover:hover)]:grayscale peer-hover:grayscale-0" : "";
+    }), y = g(() => {
+      const { titleSize: r, titleColor: d, titleBlockColor: e } = n;
       return [
-        g.h3Variant({ size: d }),
-        g.textColorVariant({ color: c }),
-        g.bgColorVariant({ color: e })
+        i.h3Variant({ size: r }),
+        i.textColorVariant({ color: d }),
+        i.bgColorVariant({ color: e })
       ].join(" ");
-    }), w = (d) => {
-      const { title: c, ctaLink: e, ctaTarget: o, ctaAsLink: i } = a;
-      !i && d.preventDefault();
-      const s = {
-        title: c,
+    }), w = (r) => {
+      const { title: d, ctaLink: e, ctaTarget: l, ctaAsLink: a } = n;
+      !a && r.preventDefault();
+      const o = {
+        title: d,
         url: e,
-        target: o || "_self"
+        target: l || "_self"
       };
-      console.log(s), l("card-click", d, s);
+      console.log(o), u("card-click", r, o);
     };
-    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", x.value])
+    return (r, d) => (m(), C("div", {
+      class: c(["xs:w-auto relative w-full max-w-112.5 shrink-0 grow cursor-pointer overflow-hidden border sm:max-w-87.5", b.value])
     }, [
-      b("a", {
-        href: r.ctaLink,
-        target: r.ctaTarget,
-        onClick: c[0] || (c[0] = (e) => w(e))
+      s("a", {
+        href: t.ctaLink,
+        target: t.ctaTarget,
+        onClick: d[0] || (d[0] = (e) => w(e))
       }, [
-        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, vt),
-          A(d.$slots, "default")
+        s("div", K, [
+          s("h3", {
+            innerHTML: t.title,
+            class: c(["pointer-events-none mb-2xs inline-block px-xs py-2xs tracking-wide", y.value])
+          }, null, 10, P),
+          A(r.$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", u.value])
-        }, null, 10, wt)
-      ], 8, kt)
+        s("img", {
+          src: t.imageSource,
+          alt: t.imageAlt,
+          class: c(["relative z-10 aspect-3/4 h-full w-full object-cover object-center transition-all duration-200", h.value])
+        }, null, 10, Q)
+      ], 8, J)
     ], 2));
   }
-}), Ct = ["src", "alt"], Vt = /* @__PURE__ */ B({
+}), U = ["src", "alt"], X = /* @__PURE__ */ L({
   __name: "MclCardC",
   props: {
     imageSource: {},
@@ -1466,65 +236,65 @@ const ot = {
     cardColor: { default: "primary" }
   },
   emits: ["card-click"],
-  setup(r, { emit: n }) {
-    const a = r;
-    L();
-    const l = $(!1), x = n, u = f(() => {
-      const d = [
-        g.bgColorVariant({ color: a.cardColor })
+  setup(t, { emit: v }) {
+    const n = t;
+    T();
+    const u = z(!1), b = v, h = g(() => {
+      const r = [
+        i.bgColorVariant({ color: n.cardColor })
       ];
-      return l.value && d.push("flip-card"), d.join(" ");
-    }), v = f(() => {
+      return u.value && r.push("flip-card"), r.join(" ");
+    }), y = g(() => {
       const {
-        titleSize: d,
-        titleColor: c,
+        titleSize: r,
+        titleColor: d,
         showHighlight: e,
-        highlightColor: o,
-        highlightOpacity: i
-      } = a, s = [
-        g.h3Variant({ size: d }),
-        g.textColorVariant({ color: c })
+        highlightColor: l,
+        highlightOpacity: a
+      } = n, o = [
+        i.h3Variant({ size: r }),
+        i.textColorVariant({ color: d })
       ];
-      return e && (s.push("px-xs py-2xs mb-2xs rounded"), s.push(g.bgColorVariant({ color: o })), s.push(
-        g.bgOpacityVariant({ opacity: i })
-      )), s.join(" ");
-    }), w = (d) => {
-      d.preventDefault(), l.value && x("card-click", d), l.value = !0;
+      return e && (o.push("px-xs py-2xs mb-2xs rounded"), o.push(i.bgColorVariant({ color: l })), o.push(
+        i.bgOpacityVariant({ opacity: a })
+      )), o.join(" ");
+    }), w = (r) => {
+      r.preventDefault(), u.value && b("card-click", r), u.value = !0;
     };
-    return (d, c) => (k(), y("div", {
-      class: h(["card relative aspect-square max-h-100 overflow-hidden transition duration-1600", u.value]),
+    return (r, d) => (m(), C("div", {
+      class: c(["card relative aspect-square max-h-100 overflow-hidden transition duration-1600", h.value]),
       onClick: w
     }, [
-      b("img", {
-        src: r.imageSource,
-        alt: r.imageAlt,
-        class: h([
-          l.value ? "opacity-100" : "opacity-0",
+      s("img", {
+        src: t.imageSource,
+        alt: t.imageAlt,
+        class: c([
+          u.value ? "opacity-100" : "opacity-0",
           "absolute aspect-square h-full w-full object-cover object-center transition-opacity delay-500 duration-800"
         ])
-      }, null, 10, Ct),
-      b("div", {
-        class: h([
-          l.value ? "cursor-pointer opacity-100" : "opacity-0",
+      }, null, 10, U),
+      s("div", {
+        class: c([
+          u.value ? "cursor-pointer opacity-100" : "opacity-0",
           "relative flex h-full flex-col justify-end p-sm transition delay-500 duration-800"
         ])
       }, [
-        r.showTitle ? (k(), y("h3", {
+        t.showTitle ? (m(), C("h3", {
           key: 0,
-          class: h(["relative self-start", v.value])
+          class: c(["relative self-start", y.value])
         }, [
-          b("span", null, T(r.title), 1)
-        ], 2)) : V("", !0),
-        A(d.$slots, "card-body", {}, void 0, !0)
+          s("span", null, B(t.title), 1)
+        ], 2)) : x("", !0),
+        A(r.$slots, "card-body", {}, void 0, !0)
       ], 2)
     ], 2));
   }
-}), W = (r, n) => {
-  const a = r.__vccOpts || r;
-  for (const [l, x] of n)
-    a[l] = x;
-  return a;
-}, 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({
+}), H = (t, v) => {
+  const n = t.__vccOpts || t;
+  for (const [u, b] of v)
+    n[u] = b;
+  return n;
+}, it = /* @__PURE__ */ H(X, [["__scopeId", "data-v-eac7e2f0"]]), Y = { class: "flex flex-col overflow-hidden rounded-md" }, Z = ["src", "alt"], _ = ["href", "target"], tt = /* @__PURE__ */ L({
   __name: "MclCardD",
   props: {
     showImage: { type: Boolean, default: !0 },
@@ -1550,8 +320,8 @@ const ot = {
     customColor: {}
   },
   emits: ["card-click"],
-  setup(r, { emit: n }) {
-    const a = {
+  setup(t, { emit: v }) {
+    const n = {
       primary: "from-primary",
       secondary: "from-secondary",
       success: "from-success",
@@ -1569,7 +339,7 @@ const ot = {
       black: "from-black",
       white: "from-white",
       transparent: "from-transparent"
-    }, l = {
+    }, u = {
       primary: "via-primary",
       secondary: "via-secondary",
       success: "via-success",
@@ -1587,7 +357,7 @@ const ot = {
       black: "via-black",
       white: "via-white",
       transparent: "via-transparent"
-    }, x = {
+    }, b = {
       primary: "to-primary",
       secondary: "to-secondary",
       success: "to-success",
@@ -1605,80 +375,80 @@ const ot = {
       black: "to-black",
       white: "to-white",
       transparent: "to-transparent"
-    }, u = r;
-    L();
-    const v = n, w = f(() => {
-      const { titleSize: i, titleColor: s } = u;
+    }, h = t;
+    T();
+    const y = v, w = g(() => {
+      const { titleSize: a, titleColor: o } = h;
       return [
-        g.h2Variant({ size: i }),
-        g.textColorVariant({ color: s })
+        i.h2Variant({ size: a }),
+        i.textColorVariant({ color: o })
       ].join(" ");
-    }), d = f(() => {
-      const { ctaButton: i, ctaButtonColor: s, ctaButtonBlock: p } = u, m = [], C = ["light-1", "light-2", "light-3", "light-4"];
-      return i ? m.push(
+    }), r = g(() => {
+      const { ctaButton: a, ctaButtonColor: o, ctaButtonBlock: k } = h, f = [], p = ["light-1", "light-2", "light-3", "light-4"];
+      return a ? f.push(
         "btn",
-        g.btnColorVariant({ color: s })
-      ) : m.push("mcl-link"), i && p && m.push("btn-full"), i && !C.includes(s) && m.push("text-white"), m.join(" ");
-    }), c = f(() => ({
-      "--border-width": `${u.borderWidth}px`
-    })), e = f(() => {
-      const i = a[u.borderColor], s = l[u.gradient1], p = x[u.gradient2];
+        i.btnColorVariant({ color: o })
+      ) : f.push("mcl-link"), a && k && f.push("btn-full"), a && !p.includes(o) && f.push("text-white"), f.join(" ");
+    }), d = g(() => ({
+      "--border-width": `${h.borderWidth}px`
+    })), e = g(() => {
+      const a = n[h.borderColor], o = u[h.gradient1], k = b[h.gradient2];
       return [
-        g.borderColorVariant({ color: u.borderColor }),
-        i,
-        s,
-        p
+        i.borderColorVariant({ color: h.borderColor }),
+        a,
+        o,
+        k
       ].join(" ");
-    }), o = (i) => {
-      const { title: s, ctaLink: p, ctaLinkTarget: m, ctaAsLink: C } = u, j = {
-        title: s,
-        url: p,
-        target: m || "_self"
+    }), l = (a) => {
+      const { title: o, ctaLink: k, ctaLinkTarget: f, ctaAsLink: p } = h, V = {
+        title: o,
+        url: k,
+        target: f || "_self"
       };
-      !C && i.preventDefault(), v("card-click", i, j);
+      !p && a.preventDefault(), y("card-click", a, V);
     };
-    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)
+    return (a, o) => (m(), C("div", {
+      class: c(["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.value)
     }, [
-      b("div", Bt, [
-        r.showImage ? (k(), y("img", {
+      s("div", Y, [
+        t.showImage ? (m(), C("img", {
           key: 0,
-          src: r.imageSource,
+          src: t.imageSource,
           class: "max-h-50 min-w-full object-cover object-top",
-          alt: r.imageAlt
-        }, null, 8, Tt)) : V("", !0),
-        b("div", {
-          class: h(["p-xs", S(g).bgColorVariant({ color: r.bgColor })])
+          alt: t.imageAlt
+        }, null, 8, Z)) : x("", !0),
+        s("div", {
+          class: c(["p-xs", S(i).bgColorVariant({ color: t.bgColor })])
         }, [
-          b("h3", {
-            class: h(["mb-xs", w.value])
-          }, T(r.title), 3),
-          r.showHighlight ? (k(), y("div", {
+          s("h3", {
+            class: c(["mb-xs", w.value])
+          }, B(t.title), 3),
+          t.showHighlight ? (m(), C("div", {
             key: 0,
-            class: h(["mb-xs h-3xs w-md", S(g).bgColorVariant({ color: r.highlightColor })])
-          }, null, 2)) : V("", !0),
-          b("div", null, [
-            A(i.$slots, "default", {}, void 0, !0)
+            class: c(["mb-xs h-3xs w-md", S(i).bgColorVariant({ color: t.highlightColor })])
+          }, null, 2)) : x("", !0),
+          s("div", null, [
+            A(a.$slots, "default", {}, void 0, !0)
           ]),
-          b("div", {
-            class: h(["mt-xs", { "mb-2xs": !r.ctaButton }])
+          s("div", {
+            class: c(["mt-xs", { "mb-2xs": !t.ctaButton }])
           }, [
-            b("a", {
-              href: r.ctaLink,
-              target: r.ctaLinkTarget,
-              class: h(d.value),
-              onClick: o
-            }, T(r.ctaText), 11, Lt)
+            s("a", {
+              href: t.ctaLink,
+              target: t.ctaLinkTarget,
+              class: c(r.value),
+              onClick: l
+            }, B(t.ctaText), 11, _)
           ], 2)
         ], 2)
       ])
     ], 6));
   }
-}), $t = /* @__PURE__ */ W(At, [["__scopeId", "data-v-8bf2cac0"]]);
+}), st = /* @__PURE__ */ H(tt, [["__scopeId", "data-v-8bf2cac0"]]);
 export {
-  zt as MclCardA,
-  Mt as MclCardB,
-  Ot as MclCardC,
-  $t as MclCardD
+  ot as MclCardA,
+  rt as MclCardB,
+  it as MclCardC,
+  st as MclCardD
 };