@bobbykim/mcl-cards 0.7.4 → 0.8.0

package/dist/mcl-cards.js

@@ -1,10 +1,10 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.content-height[data-v-7bb0ad8b]{height:calc(100% - 200px)}.perspective[data-v-4f321931]{perspective:1800px}.card[data-v-4f321931]{transform-style:preserve-3d;transform:rotateY(0);backface-visibility:hidden}.flip-card[data-v-4f321931]{transform:rotateY(360deg)}.card[data-v-09793bca]{background-size:cover;background-position:center center;background-repeat:no-repeat;padding:var(--border-width);animation:bg-spin-09793bca 4s linear infinite}@keyframes bg-spin-09793bca{to{--border-angle: 360deg}}.card[data-v-09793bca]:hover{animation-play-state:paused}@property --border-angle{syntax: "<angle>"; inherits: true; initial-value: 0deg;}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-import { defineComponent as w, useSlots as L, openBlock as f, createElementBlock as h, normalizeClass as i, createElementVNode as s, createCommentVNode as v, unref as A, withModifiers as R, renderSlot as T, toDisplayString as B, ref as x, computed as S, normalizeStyle as M } from "vue";
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.content-height[data-v-9021bcb6]{height:calc(100% - 200px)}.perspective[data-v-0d2f293c]{perspective:1800px}.card[data-v-0d2f293c]{transform-style:preserve-3d;transform:rotateY(0);backface-visibility:hidden}.flip-card[data-v-0d2f293c]{transform:rotateY(360deg)}.card[data-v-237930d5]{background-size:cover;background-position:center center;background-repeat:no-repeat;padding:var(--border-width);animation:bg-spin-237930d5 4s linear infinite}@keyframes bg-spin-237930d5{to{--border-angle: 360deg}}.card[data-v-237930d5]:hover{animation-play-state:paused}@property --border-angle{syntax: "<angle>"; inherits: true; initial-value: 0deg;}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+import { defineComponent as B, useSlots as L, computed as h, openBlock as g, createElementBlock as m, normalizeClass as n, createElementVNode as s, createCommentVNode as b, unref as A, withModifiers as S, renderSlot as T, toDisplayString as w, ref as R, normalizeStyle as H } from "vue";
 import o from "@bobbykim/manguito-theme";
-const E = {
+const M = {
   key: 0,
   class: "relative"
-}, $ = ["src", "alt", "crossorigin"], z = ["innerHTML"], G = { class: "content-height flex flex-col justify-between" }, D = { class: "min-h-[100px] p-0" }, I = { class: "px-xs pt-sm" }, X = ["innerHTML"], N = ["innerHTML"], V = { class: "w-full px-xs" }, W = ["href", "target"], q = /* @__PURE__ */ w({
+}, E = ["src", "alt"], $ = ["innerHTML"], z = { class: "content-height flex flex-col justify-between" }, G = { class: "min-h-[100px] p-0" }, D = { class: "px-xs pt-sm" }, I = ["innerHTML"], X = ["innerHTML"], N = { class: "w-full px-xs" }, V = ["href", "target"], q = /* @__PURE__ */ B({
   __name: "MclCardA",
   props: {
     title: {},
@@ -15,7 +15,6 @@ const E = {
     displayImage: { type: Boolean, default: !0 },
     imageSource: {},
     imageAlt: {},
-    imageCors: { default: "anonymous" },
     displayCta: { type: Boolean, default: !0 },
     ctaAsLink: { type: Boolean, default: !1 },
     ctaText: { default: "cta text" },
@@ -33,118 +32,111 @@ const E = {
     displayShadow: { type: Boolean, default: !0 }
   },
   emits: ["card-click", "card-btn-click"],
-  setup(m, { emit: C }) {
-    const p = m;
+  setup(y, { emit: C }) {
+    const i = y;
     L();
-    const c = C, y = (e, r, t, l, u) => {
-      const n = [
-        o("BORDER", e),
+    const u = C, v = h(() => {
+      const { borderColor: t, bgColor: r, rounded: e, enlargeOnHover: l, displayShadow: p } = i, d = [
+        o("BORDER", t),
         o("BGCOLOR", r)
       ];
-      return t ? n.push("rounded-md") : n.push("rounded-sm"), l && n.push("hover:scale-105 transition ease-in duration-300"), u && n.push("drop-shadow-md"), n.join(" ");
-    }, g = (e, r, t) => {
-      const l = [
-        o("H3", e),
+      return d.push(e ? "rounded-md" : "rounded-sm"), l && d.push("hover:scale-105 transition ease-in duration-300"), p && d.push("drop-shadow-md"), d.join(" ");
+    }), f = h(() => {
+      const { titleSize: t, titleColor: r, displayHighlight: e } = i, l = [
+        o("H3", t),
         o("TEXTCOLOR", r)
       ];
-      return t ? l.push("mb-2xs") : l.push("mb-xs"), l.join(" ");
-    }, k = (e, r) => [
-      o("TEXTCOLOR", e),
-      o("BGCOLOR", r)
-    ].join(" "), b = (e, r) => {
-      const t = [o("BTNCOLOR", e)];
-      let u = ["light-1", "light-2", "light-3", "light-4"].includes(e) ? "text-black" : "text-white";
-      return t.push(u), r && t.push("btn-round"), t.join(" ");
-    }, a = (e) => {
-      const { title: r, ctaLink: t, ctaTarget: l, ctaAsLink: u } = p, n = {
+      return l.push(e ? "mb-2xs" : "mb-xs"), l.join(" ");
+    }), k = h(() => {
+      const { labelTextColor: t, labelColor: r } = i;
+      return [
+        o("TEXTCOLOR", t),
+        o("BGCOLOR", r)
+      ].join(" ");
+    }), x = h(() => {
+      const { ctaColor: t, rounded: r } = i, e = [o("BTNCOLOR", t)];
+      let p = ["light-1", "light-2", "light-3", "light-4"].includes(t) ? "text-black" : "text-white";
+      return e.push(p), r && e.push("btn-round"), e.join(" ");
+    }), a = (t) => {
+      const { title: r, ctaLink: e, ctaTarget: l, ctaAsLink: p } = i, d = {
         title: r,
-        url: t,
+        url: e,
         target: l || "_self"
       };
-      !u && e.preventDefault(), c("card-btn-click", e, n);
-    }, d = (e) => {
-      const { title: r, ctaLink: t, ctaTarget: l } = p;
-      c("card-click", e, {
+      !p && t.preventDefault(), u("card-btn-click", t, d);
+    }, c = (t) => {
+      const { title: r, ctaLink: e, ctaTarget: l } = i;
+      u("card-click", t, {
         title: r,
-        url: t,
+        url: e,
         target: l || "_self"
       });
     };
-    return (e, r) => (f(), h("div", {
-      class: i([
-        "overflow-hidden border max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 cursor-pointer",
-        y(
-          e.borderColor,
-          e.bgColor,
-          e.rounded,
-          e.enlargeOnHover,
-          e.displayShadow
-        )
-      ]),
-      onClick: d
+    return (t, r) => (g(), m("div", {
+      class: n(["overflow-hidden border max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 cursor-pointer", v.value]),
+      onClick: c
     }, [
-      e.displayImage ? (f(), h("div", E, [
+      t.displayImage ? (g(), m("div", M, [
         s("img", {
-          src: e.imageSource,
-          alt: e.imageAlt,
-          crossorigin: e.imageCors,
+          src: t.imageSource,
+          alt: t.imageAlt,
           class: "object-cover object-top h-[220px] min-w-full"
-        }, null, 8, $),
-        e.displayLabel ? (f(), h("span", {
+        }, null, 8, E),
+        t.displayLabel ? (g(), m("span", {
           key: 0,
-          class: i(["py-3xs px-2xs ml-xs inline-block font-bold text-xs absolute bottom-0 translate-y-[50%]", k(e.labelTextColor, e.labelColor)]),
-          innerHTML: e.labelText
-        }, null, 10, z)) : v("", !0)
-      ])) : v("", !0),
-      s("div", G, [
-        s("div", D, [
-          s("div", I, [
-            !e.displayImage && e.displayLabel ? (f(), h("span", {
+          class: n(["py-3xs px-2xs ml-xs inline-block font-bold text-xs absolute bottom-0 translate-y-[50%]", k.value]),
+          innerHTML: t.labelText
+        }, null, 10, $)) : b("", !0)
+      ])) : b("", !0),
+      s("div", z, [
+        s("div", G, [
+          s("div", D, [
+            !t.displayImage && t.displayLabel ? (g(), m("span", {
               key: 0,
-              class: i(["py-3xs px-2xs mb-2xs inline-block font-bold text-xs", k(e.labelTextColor, e.labelColor)]),
-              innerHTML: e.labelText
-            }, null, 10, X)) : v("", !0),
+              class: n(["py-3xs px-2xs mb-2xs inline-block font-bold text-xs", k.value]),
+              innerHTML: t.labelText
+            }, null, 10, I)) : b("", !0),
             s("h3", {
-              class: i(g(e.titleSize, e.titleColor, e.displayHighlight)),
-              innerHTML: e.title
-            }, null, 10, N),
-            e.displayHighlight ? (f(), h("div", {
+              class: n(f.value),
+              innerHTML: t.title
+            }, null, 10, X),
+            t.displayHighlight ? (g(), m("div", {
               key: 1,
-              class: i(["mb-xs h-3xs w-md", A(o)("BGCOLOR", e.highlightColor)])
-            }, null, 2)) : v("", !0),
+              class: n(["mb-xs h-3xs w-md", A(o)("BGCOLOR", t.highlightColor)])
+            }, null, 2)) : b("", !0),
             s("div", {
               class: "mb-sm cursor-default",
-              onClick: r[0] || (r[0] = R(() => {
+              onClick: r[0] || (r[0] = S(() => {
               }, ["stop"]))
             }, [
-              T(e.$slots, "default", {}, void 0, !0)
+              T(t.$slots, "default", {}, void 0, !0)
             ])
           ])
         ]),
-        e.displayCta ? (f(), h("div", {
+        t.displayCta ? (g(), m("div", {
           key: 0,
           class: "pb-sm border-0 cursor-default",
-          onClick: r[2] || (r[2] = R(() => {
+          onClick: r[2] || (r[2] = S(() => {
           }, ["stop"]))
         }, [
-          s("div", V, [
+          s("div", N, [
             s("a", {
-              href: e.ctaLink,
-              target: e.ctaTarget,
-              class: i(["btn btn-full", b(e.ctaColor, e.rounded)]),
-              onClick: r[1] || (r[1] = (t) => a(t))
-            }, B(e.ctaText), 11, W)
+              href: t.ctaLink,
+              target: t.ctaTarget,
+              class: n(["btn btn-full", x.value]),
+              onClick: r[1] || (r[1] = (e) => a(e))
+            }, w(t.ctaText), 11, V)
           ])
-        ])) : v("", !0)
+        ])) : b("", !0)
       ])
     ], 2));
   }
-}), H = (m, C) => {
-  const p = m.__vccOpts || m;
-  for (const [c, y] of C)
-    p[c] = y;
-  return p;
-}, le = /* @__PURE__ */ H(q, [["__scopeId", "data-v-7bb0ad8b"]]), F = ["href", "target"], P = { class: "absolute z-[15] flex flex-col justify-end items-start inset-0 p-xs [@media(hover:hover)]:opacity-0 hover:opacity-100 peer transition-opacity duration-200" }, Y = ["innerHTML"], J = ["src", "alt", "crossorigin"], re = /* @__PURE__ */ w({
+}), _ = (y, C) => {
+  const i = y.__vccOpts || y;
+  for (const [u, v] of C)
+    i[u] = v;
+  return i;
+}, lt = /* @__PURE__ */ _(q, [["__scopeId", "data-v-9021bcb6"]]), W = ["href", "target"], F = { class: "absolute z-[15] flex flex-col justify-end items-start inset-0 p-xs [@media(hover:hover)]:opacity-0 hover:opacity-100 peer transition-opacity duration-200" }, P = ["innerHTML"], Y = ["src", "alt"], rt = /* @__PURE__ */ B({
   __name: "MclCardB",
   props: {
     title: {},
@@ -154,7 +146,6 @@ const E = {
     borderColor: { default: "light-3" },
     imageSource: {},
     imageAlt: {},
-    imageCors: { default: "anonymous" },
     displayGrayScale: { type: Boolean, default: !0 },
     ctaAsLink: { type: Boolean, default: !1 },
     ctaLink: { default: "#" },
@@ -162,51 +153,56 @@ const E = {
     rounded: { type: Boolean, default: !1 }
   },
   emits: ["card-click"],
-  setup(m, { emit: C }) {
-    const p = m;
+  setup(y, { emit: C }) {
+    const i = y;
     L();
-    const c = C, y = (a, d) => {
-      const e = [o("BORDER", a)];
-      return d ? e.push("rounded-md") : e.push("rounded-sm"), e.join(" ");
-    }, g = (a) => a ? "[@media(hover:hover)]:grayscale peer-hover:grayscale-0" : "", k = (a, d, e) => [
-      o("H3", a),
-      o("TEXTCOLOR", d),
-      o("BGCOLOR", e)
-    ].join(" "), b = (a) => {
-      const { title: d, ctaLink: e, ctaTarget: r, ctaAsLink: t } = p;
-      !t && a.preventDefault();
+    const u = C, v = h(() => {
+      const { borderColor: a, rounded: c } = i, t = [o("BORDER", a)];
+      return t.push(c ? "rounded-md" : "rounded-sm"), t.join(" ");
+    }), f = h(() => {
+      const { displayGrayScale: a } = i;
+      return a ? "[@media(hover:hover)]:grayscale peer-hover:grayscale-0" : "";
+    }), k = h(() => {
+      const { titleSize: a, titleColor: c, titleBlockColor: t } = i;
+      return [
+        o("H3", a),
+        o("TEXTCOLOR", c),
+        o("BGCOLOR", t)
+      ].join(" ");
+    }), x = (a) => {
+      const { title: c, ctaLink: t, ctaTarget: r, ctaAsLink: e } = i;
+      !e && a.preventDefault();
       const l = {
-        title: d,
-        url: e,
+        title: c,
+        url: t,
         target: r || "_self"
       };
-      console.log(l), c("card-click", a, l);
+      console.log(l), u("card-click", a, l);
     };
-    return (a, d) => (f(), h("div", {
-      class: i(["relative max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 cursor-pointer overflow-hidden border border-light-3", y(a.borderColor, a.rounded)])
+    return (a, c) => (g(), m("div", {
+      class: n(["relative max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 cursor-pointer overflow-hidden border", v.value])
     }, [
       s("a", {
         href: a.ctaLink,
         target: a.ctaTarget,
-        onClick: d[0] || (d[0] = (e) => b(e))
+        onClick: c[0] || (c[0] = (t) => x(t))
       }, [
-        s("div", P, [
+        s("div", F, [
           s("h3", {
             innerHTML: a.title,
-            class: i(["inline-block px-xs py-2xs mb-2xs pointer-events-none tracking-wide", k(a.titleSize, a.titleColor, a.titleBlockColor)])
-          }, null, 10, Y),
+            class: n(["inline-block px-xs py-2xs mb-2xs pointer-events-none tracking-wide", k.value])
+          }, null, 10, P),
           T(a.$slots, "default")
         ]),
         s("img", {
           src: a.imageSource,
           alt: a.imageAlt,
-          crossorigin: a.imageCors,
-          class: i(["relative z-10 object-cover aspect-[3/4] transition-all duration-200", g(a.displayGrayScale)])
-        }, null, 10, J)
-      ], 8, F)
+          class: n(["relative h-full w-full z-10 object-cover object-center aspect-[3/4] transition-all duration-200", f.value])
+        }, null, 10, Y)
+      ], 8, W)
     ], 2));
   }
-}), K = ["src", "alt", "crossorigin"], Q = /* @__PURE__ */ w({
+}), J = ["src", "alt"], K = /* @__PURE__ */ B({
   __name: "MclCardC",
   props: {
     imageSource: {},
@@ -218,70 +214,64 @@ const E = {
     highlightColor: { default: "light-3" },
     highlightOpacity: { default: 80 },
     displayTitle: { type: Boolean, default: !1 },
-    cardColor: { default: "primary" },
-    imageCors: { default: "anonymous" }
+    cardColor: { default: "primary" }
   },
   emits: ["card-click"],
-  setup(m, { emit: C }) {
-    const p = m;
+  setup(y, { emit: C }) {
+    const i = y;
     L();
-    const c = x(!1), y = C, g = S(() => {
-      const a = [o("BGCOLOR", p.cardColor)];
-      return c.value && a.push("flip-card"), a.join(" ");
-    }), k = (a, d, e, r, t) => {
-      const l = [
+    const u = R(!1), v = C, f = h(() => {
+      const a = [o("BGCOLOR", i.cardColor)];
+      return u.value && a.push("flip-card"), a.join(" ");
+    }), k = h(() => {
+      const {
+        titleSize: a,
+        titleColor: c,
+        displayHighlight: t,
+        highlightColor: r,
+        highlightOpacity: e
+      } = i, l = [
         o("H3", a),
-        o("TEXTCOLOR", d)
+        o("TEXTCOLOR", c)
       ];
-      return e && (l.push("px-xs py-2xs mb-2xs rounded"), l.push(o("BGCOLOR", r)), l.push(o("BGOPACITY", t))), l.join(" ");
-    }, b = (a) => {
-      a.preventDefault(), c.value && y("card-click", a), c.value = !0;
+      return t && (l.push("px-xs py-2xs mb-2xs rounded"), l.push(o("BGCOLOR", r)), l.push(o("BGOPACITY", e))), l.join(" ");
+    }), x = (a) => {
+      a.preventDefault(), u.value && v("card-click", a), u.value = !0;
     };
-    return (a, d) => (f(), h("div", {
-      class: i(["relative aspect-square card transition duration-[1600ms] max-h-[400px] overflow-hidden", g.value]),
-      onClick: b
+    return (a, c) => (g(), m("div", {
+      class: n(["relative aspect-square card transition duration-[1600ms] max-h-[400px] overflow-hidden", f.value]),
+      onClick: x
     }, [
       s("img", {
         src: a.imageSource,
         alt: a.imageAlt,
-        class: i([
-          c.value ? "opacity-100" : "opacity-0",
-          "absolute inset-0 object-cover object-center transition-opacity delay-500 duration-[800ms] grayscale-0 hover:grayscale"
-        ]),
-        crossorigin: a.imageCors
-      }, null, 10, K),
+        class: n([
+          u.value ? "opacity-100" : "opacity-0",
+          "absolute w-full h-full object-cover object-center aspect-square transition-opacity delay-500 duration-[800ms]"
+        ])
+      }, null, 10, J),
       s("div", {
-        class: i([
-          c.value ? "cursor-pointer opacity-100" : "opacity-0",
+        class: n([
+          u.value ? "cursor-pointer opacity-100" : "opacity-0",
           "relative flex flex-col justify-end p-sm h-full transition delay-500 duration-[800ms]"
         ])
       }, [
-        a.displayTitle ? (f(), h("h3", {
+        a.displayTitle ? (g(), m("h3", {
           key: 0,
-          class: i([
-            "relative self-start",
-            k(
-              a.titleSize,
-              a.titleColor,
-              a.displayHighlight,
-              a.highlightColor,
-              a.highlightOpacity
-            )
-          ])
+          class: n(["relative self-start", k.value])
         }, [
-          s("span", null, B(a.title), 1)
-        ], 2)) : v("", !0),
+          s("span", null, w(a.title), 1)
+        ], 2)) : b("", !0),
         T(a.$slots, "card-body", {}, void 0, !0)
       ], 2)
     ], 2));
   }
-}), oe = /* @__PURE__ */ H(Q, [["__scopeId", "data-v-4f321931"]]), U = { class: "flex flex-col rounded-md overflow-hidden" }, Z = ["src", "crossorigin", "alt"], _ = ["href", "target"], ee = /* @__PURE__ */ w({
+}), ot = /* @__PURE__ */ _(K, [["__scopeId", "data-v-0d2f293c"]]), Q = { class: "flex flex-col rounded-md overflow-hidden" }, U = ["src", "alt"], Z = ["href", "target"], tt = /* @__PURE__ */ B({
   __name: "MclCardD",
   props: {
     displayImage: { type: Boolean, default: !0 },
     imageSource: {},
     imageAlt: { default: "" },
-    imageCors: { default: "anonymous" },
     title: {},
     titleSize: { default: "md" },
     titleColor: { default: "dark-4" },
@@ -302,8 +292,8 @@ const E = {
     customColor: {}
   },
   emits: ["card-click"],
-  setup(m, { emit: C }) {
-    const p = {
+  setup(y, { emit: C }) {
+    const i = {
       primary: "from-primary",
       secondary: "from-secondary",
       success: "from-success",
@@ -321,7 +311,7 @@ const E = {
       black: "from-black",
       white: "from-white",
       transparent: "from-transparent"
-    }, c = {
+    }, u = {
       primary: "via-primary",
       secondary: "via-secondary",
       success: "via-success",
@@ -339,7 +329,7 @@ const E = {
       black: "via-black",
       white: "via-white",
       transparent: "via-transparent"
-    }, y = {
+    }, v = {
       primary: "to-primary",
       secondary: "to-secondary",
       success: "to-success",
@@ -357,75 +347,77 @@ const E = {
       black: "to-black",
       white: "to-white",
       transparent: "to-transparent"
-    }, g = m;
+    }, f = y;
     L();
-    const k = C, b = (t, l) => [
-      o("H2", t),
-      o("TEXTCOLOR", l)
-    ].join(" "), a = (t, l, u) => {
-      const n = [], O = ["light-1", "light-2", "light-3", "light-4"];
-      return t || n.push("mcl-link"), t && (n.push("btn"), n.push(o("BTNCOLOR", l))), t && u && n.push("btn-full"), t && !O.includes(l) && n.push("text-white"), n.join(" ");
-    }, d = S(() => ({
-      "--border-width": `${g.borderWidth}px`
-    })), e = S(() => {
-      const t = p[g.borderColor], l = c[g.gradient1], u = y[g.gradient2];
+    const k = C, x = h(() => {
+      const { titleSize: e, titleColor: l } = f;
       return [
-        o("BORDER", g.borderColor),
-        t,
+        o("H2", e),
+        o("TEXTCOLOR", l)
+      ].join(" ");
+    }), a = h(() => {
+      const { ctaButton: e, ctaButtonColor: l, ctaButtonBlock: p } = f, d = [], O = ["light-1", "light-2", "light-3", "light-4"];
+      return e ? d.push("btn", o("BTNCOLOR", l)) : d.push("mcl-link"), e && p && d.push("btn-full"), e && !O.includes(l) && d.push("text-white"), d.join(" ");
+    }), c = h(() => ({
+      "--border-width": `${f.borderWidth}px`
+    })), t = h(() => {
+      const e = i[f.borderColor], l = u[f.gradient1], p = v[f.gradient2];
+      return [
+        o("BORDER", f.borderColor),
+        e,
         l,
-        u
+        p
       ].join(" ");
-    }), r = (t) => {
-      const { title: l, ctaLink: u, ctaLinkTarget: n, ctaAsLink: O } = g, j = {
+    }), r = (e) => {
+      const { title: l, ctaLink: p, ctaLinkTarget: d, ctaAsLink: O } = f, j = {
         title: l,
-        url: u,
-        target: n || "_self"
+        url: p,
+        target: d || "_self"
       };
-      !O && t.preventDefault(), k("card-click", t, j);
+      !O && e.preventDefault(), k("card-click", e, j);
     };
-    return (t, l) => (f(), h("div", {
-      class: i(["card [--border-angle:0deg] bg-[conic-gradient(from_var(--border-angle),var(--tw-gradient-stops))] from-20% overflow-hidden rounded-md max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 border", e.value]),
-      style: M(d.value)
+    return (e, l) => (g(), m("div", {
+      class: n(["card [--border-angle:0deg] bg-[conic-gradient(from_var(--border-angle),var(--tw-gradient-stops))] from-20% overflow-hidden rounded-md max-w-[450px] sm:max-w-[350px] w-full xs:w-auto flex-grow flex-shrink-0 border", t.value]),
+      style: H(c.value)
     }, [
-      s("div", U, [
-        t.displayImage ? (f(), h("img", {
+      s("div", Q, [
+        e.displayImage ? (g(), m("img", {
           key: 0,
-          src: t.imageSource,
-          crossorigin: t.imageCors,
-          class: "object-cover object-top max-h-[200px]",
-          alt: t.imageAlt
-        }, null, 8, Z)) : v("", !0),
+          src: e.imageSource,
+          class: "object-cover object-top max-h-[200px] min-w-full",
+          alt: e.imageAlt
+        }, null, 8, U)) : b("", !0),
         s("div", {
-          class: i(["p-xs", A(o)("BGCOLOR", t.bgColor)])
+          class: n(["p-xs", A(o)("BGCOLOR", e.bgColor)])
         }, [
           s("h3", {
-            class: i(["mb-xs", b(t.titleSize, t.titleColor)])
-          }, B(t.title), 3),
-          t.displayHighlight ? (f(), h("div", {
+            class: n(["mb-xs", x.value])
+          }, w(e.title), 3),
+          e.displayHighlight ? (g(), m("div", {
             key: 0,
-            class: i(["mb-xs h-3xs w-md", A(o)("BGCOLOR", t.highlightColor)])
-          }, null, 2)) : v("", !0),
+            class: n(["mb-xs h-3xs w-md", A(o)("BGCOLOR", e.highlightColor)])
+          }, null, 2)) : b("", !0),
           s("div", null, [
-            T(t.$slots, "default", {}, void 0, !0)
+            T(e.$slots, "default", {}, void 0, !0)
           ]),
           s("div", {
-            class: i(["mt-xs", { "mb-2xs": !t.ctaButton }])
+            class: n(["mt-xs", { "mb-2xs": !e.ctaButton }])
           }, [
             s("a", {
-              href: t.ctaLink,
-              target: t.ctaLinkTarget,
-              class: i(a(t.ctaButton, t.ctaButtonColor, t.ctaButtonBlock)),
+              href: e.ctaLink,
+              target: e.ctaLinkTarget,
+              class: n(a.value),
               onClick: r
-            }, B(t.ctaText), 11, _)
+            }, w(e.ctaText), 11, Z)
           ], 2)
         ], 2)
       ])
     ], 6));
   }
-}), se = /* @__PURE__ */ H(ee, [["__scopeId", "data-v-09793bca"]]);
+}), st = /* @__PURE__ */ _(tt, [["__scopeId", "data-v-237930d5"]]);
 export {
-  le as MclCardA,
-  re as MclCardB,
-  oe as MclCardC,
-  se as MclCardD
+  lt as MclCardA,
+  rt as MclCardB,
+  ot as MclCardC,
+  st as MclCardD
 };