@bobbykim/mcl-cards 0.9.0 → 0.9.2

package/dist/mcl-cards.js

@@ -1,10 +1,1414 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.perspective[data-v-0d2f293c]{-webkit-perspective:1800px;perspective:1800px}.card[data-v-0d2f293c]{-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-0d2f293c]{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}.card[data-v-390b5ad7]{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-390b5ad7 4s linear infinite}@keyframes bg-spin-390b5ad7{0%{--border-angle: 0deg}to{--border-angle: 360deg}}.card[data-v-390b5ad7]: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 L, useSlots as T, computed as p, createElementBlock as g, openBlock as h, normalizeClass as n, createCommentVNode as b, createElementVNode as s, unref as _, withModifiers as S, renderSlot as O, toDisplayString as w, ref as H, normalizeStyle as M } from "vue";
-import r, { getGlassmorphismClass as E } from "@bobbykim/manguito-theme";
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.perspective[data-v-f748c495]{-webkit-perspective:1800px;perspective:1800px}.card[data-v-f748c495]{-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-f748c495]{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}.card[data-v-09214c6f]{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-09214c6f 4s linear infinite}@keyframes bg-spin-09214c6f{0%{--border-angle: 0deg}to{--border-angle: 360deg}}.card[data-v-09214c6f]:hover{animation-play-state:paused}@property --border-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
+import { defineComponent as w, ref as I, onMounted as G, useSlots as R, computed as p, openBlock as x, createElementBlock as C, normalizeClass as c, createElementVNode as n, createCommentVNode as v, unref as A, withModifiers as E, renderSlot as V, toDisplayString as O, normalizeStyle as W } from "vue";
+import d from "@bobbykim/manguito-theme";
+class N {
+  // body text class
+  bodyText = {
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-md",
+    lg: "text-lg",
+    xl: "text-xl"
+  };
+  // font weight class
+  fontweight = {
+    light: "font-light",
+    normal: "font-normal",
+    bold: "font-bold"
+  };
+  // text alignment
+  textAlign = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  };
+}
+class H {
+  // Border width class
+  borderWidth = {
+    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]"
+  };
+  borderXWidth = {
+    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]"
+  };
+  borderYWidth = {
+    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]"
+  };
+  borderTopWidth = {
+    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]"
+  };
+  borderBottomWidth = {
+    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]"
+  };
+  borderLeftWidth = {
+    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]"
+  };
+  borderRightWidth = {
+    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]"
+  };
+}
+class M {
+  // bg color class
+  bgColor = {
+    primary: "bg-primary",
+    secondary: "bg-secondary",
+    success: "bg-success",
+    danger: "bg-danger",
+    info: "bg-info",
+    warning: "bg-warning",
+    "light-1": "bg-light-1",
+    "light-2": "bg-light-2",
+    "light-3": "bg-light-3",
+    "light-4": "bg-light-4",
+    "dark-1": "bg-dark-1",
+    "dark-2": "bg-dark-2",
+    "dark-3": "bg-dark-3",
+    "dark-4": "bg-dark-4",
+    black: "bg-black",
+    white: "bg-white",
+    transparent: "bg-transparent"
+  };
+  // hover: bg color class
+  hoverBgColor = {
+    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"
+  };
+  // focus: bg color class
+  focusBgColor = {
+    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"
+  };
+  // ::before bg color class
+  beforeBgColor = {
+    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"
+  };
+  // ::after bg color class
+  afterBgColor = {
+    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"
+  };
+  // active:bg color class
+  bgActiveColor = {
+    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"
+  };
+  // text color class
+  textColor = {
+    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"
+  };
+  // hover text color class
+  hoverTextColor = {
+    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"
+  };
+  // focus text color class
+  focusTextColor = {
+    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"
+  };
+  // disabled text color class
+  disabledTextColor = {
+    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"
+  };
+  // SVG fill color class
+  svgFillColor = {
+    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"
+  };
+  // ring color class
+  ringColor = {
+    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"
+  };
+  // focus:ring color class
+  ringFocusColor = {
+    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"
+  };
+  // active:ring color class
+  ringActiveColor = {
+    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"
+  };
+  // ring-offset color class
+  ringOffsetColor = {
+    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"
+  };
+  // outline class
+  outlineColor = {
+    primary: "outline-primary",
+    secondary: "outline-secondary",
+    success: "outline-success",
+    danger: "outline-danger",
+    info: "outline-info",
+    warning: "outline-warning",
+    "light-1": "outline-light-1",
+    "light-2": "outline-light-2",
+    "light-3": "outline-light-3",
+    "light-4": "outline-light-4",
+    "dark-1": "outline-dark-1",
+    "dark-2": "outline-dark-2",
+    "dark-3": "outline-dark-3",
+    "dark-4": "outline-dark-4",
+    black: "outline-black",
+    white: "outline-white",
+    transparent: "outline-transparent"
+  };
+  // focus:outline class
+  focusOutlineColor = {
+    primary: "focus:outline-primary",
+    secondary: "focus:outline-secondary",
+    success: "focus:outline-success",
+    danger: "focus:outline-danger",
+    info: "focus:outline-info",
+    warning: "focus:outline-warning",
+    "light-1": "focus:outline-light-1",
+    "light-2": "focus:outline-light-2",
+    "light-3": "focus:outline-light-3",
+    "light-4": "focus:outline-light-4",
+    "dark-1": "focus:outline-dark-1",
+    "dark-2": "focus:outline-dark-2",
+    "dark-3": "focus:outline-dark-3",
+    "dark-4": "focus:outline-dark-4",
+    black: "focus:outline-black",
+    white: "focus:outline-white",
+    transparent: "focus:outline-transparent"
+  };
+  // active:outline class
+  activeOutlineColor = {
+    primary: "active:outline-primary",
+    secondary: "active:outline-secondary",
+    success: "active:outline-success",
+    danger: "active:outline-danger",
+    info: "active:outline-info",
+    warning: "active:outline-warning",
+    "light-1": "active:outline-light-1",
+    "light-2": "active:outline-light-2",
+    "light-3": "active:outline-light-3",
+    "light-4": "active:outline-light-4",
+    "dark-1": "active:outline-dark-1",
+    "dark-2": "active:outline-dark-2",
+    "dark-3": "active:outline-dark-3",
+    "dark-4": "active:outline-dark-4",
+    black: "active:outline-black",
+    white: "active:outline-white",
+    transparent: "active:outline-transparent"
+  };
+  // btn color class
+  btnColor = {
+    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"
+  };
+  // list color class
+  listColor = {
+    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"
+  };
+  // border color classes
+  borderColor = {
+    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"
+  };
+  borderXColor = {
+    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"
+  };
+  borderYColor = {
+    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"
+  };
+  borderTopColor = {
+    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"
+  };
+  borderBottomColor = {
+    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"
+  };
+  borderLeftColor = {
+    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"
+  };
+  borderRightColor = {
+    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"
+  };
+}
+class X {
+  // h1 class
+  heading1 = {
+    sm: "h1-sm",
+    md: "h1-md",
+    lg: "h1-lg",
+    xl: "h1-xl"
+  };
+  // h2 class
+  heading2 = {
+    sm: "h2-sm",
+    md: "h2-md",
+    lg: "h2-lg",
+    xl: "h2-xl"
+  };
+  // h3 class
+  heading3 = {
+    sm: "h3-sm",
+    md: "h3-md",
+    lg: "h3-lg",
+    xl: "h3-xl"
+  };
+  // h4 class
+  heading4 = {
+    sm: "h4-sm",
+    md: "h4-md",
+    lg: "h4-lg",
+    xl: "h4-xl"
+  };
+}
+let F = class {
+  // opacity
+  backgroundOpacity = {
+    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"
+  };
+  opacity = {
+    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"
+  };
+  outlineOpacity = {
+    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"
+  };
+}, P = class {
+  // spacing: margin
+  margin = {
+    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"
+  };
+  marginX = {
+    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"
+  };
+  marginY = {
+    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"
+  };
+  marginTop = {
+    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"
+  };
+  marginBottom = {
+    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"
+  };
+  marginLeft = {
+    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"
+  };
+  marginRight = {
+    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"
+  };
+  // spacing: padding
+  padding = {
+    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"
+  };
+  paddingX = {
+    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"
+  };
+  paddingY = {
+    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"
+  };
+  paddingTop = {
+    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"
+  };
+  paddingBottom = {
+    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"
+  };
+  paddingLeft = {
+    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"
+  };
+  paddingRight = {
+    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"
+  };
+  // spacing gap class for flex/grid
+  gap = {
+    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"
+  };
+}, Y = class {
+  classType;
+  constructor(r) {
+    this.classType = r;
+  }
+  validateColorType(r) {
+    return typeof r != "string" || !/(primary|secondary|success|info|warning|danger|light-1|light-2|light-3|light-4|dark-1|dark-2|dark-3|dark-4|black|white|transparent)/.test(r) ? !1 : k.colorType.includes(this.classType);
+  }
+  validateSpaceType(r) {
+    return typeof r != "string" || !/(0|3xs|2xs|xs|sm|md|lg|xl|2xl|3xl)/.test(r) ? !1 : k.spacingType.includes(this.classType);
+  }
+  validateHeadingTextSizeType(r) {
+    return typeof r != "string" || !/(sm|md|lg|xl)/.test(r) ? !1 : k.headingSizeType.includes(
+      this.classType
+    );
+  }
+  validateBodyTextSizeType(r) {
+    return typeof r != "string" || !/(xs|sm|md|lg|xl)/.test(r) ? !1 : k.textType.includes(this.classType);
+  }
+  validateFontWeightType(r) {
+    return typeof r != "string" || !/(light|normal|bold)/.test(r) ? !1 : k.fontWeightType.includes(
+      this.classType
+    );
+  }
+  validateOpacityType(r) {
+    return typeof r != "number" || !/\b(0|[1-9]0|100)\b/.test(r.toString()) ? !1 : k.scaleType.includes(this.classType);
+  }
+  validateRangeType(r) {
+    return typeof r != "number" || !/\b([1-9]|1[0-2])\b/.test(r.toString()) ? !1 : k.borderWidthType.includes(
+      this.classType
+    );
+  }
+  validateAlignment(r) {
+    return typeof r != "string" || !/(left|center|right)/.test(r) ? !1 : k.textAlignType.includes(
+      this.classType
+    );
+  }
+};
+const k = {
+  colorType: [
+    "BGCOLOR",
+    "BEFOREBG",
+    "AFTERBG",
+    "HVBGCOLOR",
+    "FCBGCOLOR",
+    "ACTIVEBG",
+    "TEXTCOLOR",
+    "HVTEXTCOLOR",
+    "FCTEXTCOLOR",
+    "DISABLEDTEXTCOLOR",
+    "SVGFILL",
+    "RINGCOLOR",
+    "FOCUSRING",
+    "ACTIVERING",
+    "OUTLINE",
+    "FOCUSOUTLINE",
+    "ACTIVEOUTLINE",
+    "OFFSETRING",
+    "BTNCOLOR",
+    "LISTCOLOR",
+    "BORDER",
+    "BORDERX",
+    "BORDERY",
+    "BORDERT",
+    "BORDERB",
+    "BORDERL",
+    "BORDERR"
+  ],
+  textType: ["BODYTEXT"],
+  fontWeightType: ["FONTWEIGHT"],
+  textAlignType: ["TEXTALIGN"],
+  headingSizeType: ["H1", "H2", "H3", "H4"],
+  borderWidthType: [
+    "BORDERW",
+    "BORDERXW",
+    "BORDERYW",
+    "BORDERTW",
+    "BORDERBW",
+    "BORDERLW",
+    "BORDERRW"
+  ],
+  scaleType: ["BGOPACITY", "OPACITY", "OUTLINEOPACITY"],
+  spacingType: [
+    "MARGIN",
+    "MARGINX",
+    "MARGINY",
+    "MARGINT",
+    "MARGINB",
+    "MARGINL",
+    "MARGINR",
+    "PADDING",
+    "PADDINGX",
+    "PADDINGY",
+    "PADDINGT",
+    "PADDINGB",
+    "PADDINGL",
+    "PADDINGR",
+    "GAP"
+  ]
+};
+class z {
+  classType;
+  classValue;
+  colorClass;
+  headingSizeClass;
+  borderWidthClass;
+  opacityClass;
+  spacingClass;
+  textClass;
+  validator;
+  constructor(r, e) {
+    this.classType = r, this.classValue = e, this.colorClass = new M(), this.headingSizeClass = new X(), this.borderWidthClass = new H(), this.opacityClass = new F(), this.spacingClass = new P(), this.textClass = new N(), this.validator = new Y(r);
+  }
+  generateClass() {
+    switch (this.classType) {
+      // case: color classes
+      case "BGCOLOR":
+        return this.getBgColorClass();
+      case "HVBGCOLOR":
+        return this.getHoverBgColorClass();
+      case "FCBGCOLOR":
+        return this.getFocusBgColorClass();
+      case "BEFOREBG":
+        return this.getBeforeBgColorClass();
+      case "AFTERBG":
+        return this.getAfterBgColorClass();
+      case "ACTIVEBG":
+        return this.getActiveBgColorClass();
+      case "TEXTCOLOR":
+        return this.getTextColorClass();
+      case "HVTEXTCOLOR":
+        return this.getHoverTextColorClass();
+      case "FCTEXTCOLOR":
+        return this.getFocusTextColorClass();
+      case "DISABLEDTEXTCOLOR":
+        return this.getDisabledTextColorClass();
+      case "SVGFILL":
+        return this.getSvgFillColorClass();
+      case "RINGCOLOR":
+        return this.getRingColorClass();
+      case "FOCUSRING":
+        return this.getFocusRingColorClass();
+      case "ACTIVERING":
+        return this.getActiveRingColorClass();
+      case "OFFSETRING":
+        return this.getRingOffsetColorClass();
+      case "OUTLINE":
+        return this.getOutlineColorClass();
+      case "FOCUSOUTLINE":
+        return this.getFocusOutlineColorClass();
+      case "ACTIVEOUTLINE":
+        return this.getActiveOutlineColorClass();
+      case "BTNCOLOR":
+        return this.getBtnColorClass();
+      case "LISTCOLOR":
+        return this.getListColorClass();
+      case "BORDER":
+        return this.getBorderColorClass();
+      case "BORDERX":
+        return this.getBorderXColorClass();
+      case "BORDERY":
+        return this.getBorderYColorClass();
+      case "BORDERT":
+        return this.getBorderTopColorClass();
+      case "BORDERB":
+        return this.getBorderBottomColorClass();
+      case "BORDERL":
+        return this.getBorderLeftColorClass();
+      case "BORDERR":
+        return this.getBorderRightColorClass();
+      // case: heading classes
+      case "H1":
+        return this.getH1Class();
+      case "H2":
+        return this.getH2Class();
+      case "H3":
+        return this.getH3Class();
+      case "H4":
+        return this.getH4Class();
+      // case: body text class
+      case "BODYTEXT":
+        return this.getBodyTextSizeClass();
+      // case: font weight class
+      case "FONTWEIGHT":
+        return this.getFontWeightClass();
+      // case: text alignment class
+      case "TEXTALIGN":
+        return this.getTextAlignClass();
+      // case: border width classes
+      case "BORDERW":
+        return this.getBorderWidthClass();
+      case "BORDERXW":
+        return this.getBorderXWidthClass();
+      case "BORDERYW":
+        return this.getBorderYWidthClass();
+      case "BORDERTW":
+        return this.getBorderTopWidthClass();
+      case "BORDERBW":
+        return this.getBorderBottomWidthClass();
+      case "BORDERLW":
+        return this.getBorderLeftWidthClass();
+      case "BORDERRW":
+        return this.getBorderRightWidthClass();
+      // case: opacity classes
+      case "OPACITY":
+        return this.getOpacityClass();
+      case "BGOPACITY":
+        return this.getBgOpacityClass();
+      case "OUTLINEOPACITY":
+        return this.getOutlineOpacityClass();
+      // case: margins
+      case "MARGIN":
+        return this.getMarginClass();
+      case "MARGINX":
+        return this.getMarginXClass();
+      case "MARGINY":
+        return this.getMarginYClass();
+      case "MARGINT":
+        return this.getMarginTopClass();
+      case "MARGINB":
+        return this.getMarginBottomClass();
+      case "MARGINL":
+        return this.getMarginLeftClass();
+      case "MARGINR":
+        return this.getMarginRightClass();
+      // case: paddings
+      case "PADDING":
+        return this.getPaddingClass();
+      case "PADDINGX":
+        return this.getPaddingXClass();
+      case "PADDINGY":
+        return this.getPaddingYClass();
+      case "PADDINGT":
+        return this.getPaddingTopClass();
+      case "PADDINGB":
+        return this.getPaddingBottomClass();
+      case "PADDINGL":
+        return this.getPaddingLeftClass();
+      case "PADDINGR":
+        return this.getPaddingRightClass();
+      // case: gap
+      case "GAP":
+        return this.getGapClass();
+      default:
+        return " ";
+    }
+  }
+  // handle color class
+  // bg color
+  getBgColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.bgColor[this.classValue] : " ";
+  }
+  getHoverBgColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.hoverBgColor[this.classValue] : " ";
+  }
+  getFocusBgColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.focusBgColor[this.classValue] : " ";
+  }
+  getBeforeBgColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.beforeBgColor[this.classValue] : " ";
+  }
+  getAfterBgColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.afterBgColor[this.classValue] : " ";
+  }
+  getActiveBgColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.bgActiveColor[this.classValue] : " ";
+  }
+  // text color
+  getTextColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.textColor[this.classValue] : " ";
+  }
+  getHoverTextColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.hoverTextColor[this.classValue] : " ";
+  }
+  getFocusTextColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.focusTextColor[this.classValue] : " ";
+  }
+  getDisabledTextColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.disabledTextColor[this.classValue] : " ";
+  }
+  // svg color
+  getSvgFillColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.svgFillColor[this.classValue] : " ";
+  }
+  // ring color
+  getRingColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.ringColor[this.classValue] : " ";
+  }
+  getFocusRingColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.ringFocusColor[this.classValue] : " ";
+  }
+  getActiveRingColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.ringActiveColor[this.classValue] : " ";
+  }
+  getRingOffsetColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.ringOffsetColor[this.classValue] : " ";
+  }
+  // outline color
+  getOutlineColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.outlineColor[this.classValue] : " ";
+  }
+  getFocusOutlineColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.focusOutlineColor[this.classValue] : " ";
+  }
+  getActiveOutlineColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.activeOutlineColor[this.classValue] : " ";
+  }
+  // btn & list
+  getBtnColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.btnColor[this.classValue] : " ";
+  }
+  getListColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.listColor[this.classValue] : " ";
+  }
+  // border color
+  getBorderColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderColor[this.classValue] : " ";
+  }
+  getBorderXColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderXColor[this.classValue] : " ";
+  }
+  getBorderYColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderYColor[this.classValue] : " ";
+  }
+  getBorderTopColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderTopColor[this.classValue] : " ";
+  }
+  getBorderBottomColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderBottomColor[this.classValue] : " ";
+  }
+  getBorderLeftColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderLeftColor[this.classValue] : " ";
+  }
+  getBorderRightColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderRightColor[this.classValue] : " ";
+  }
+  // handle heading classes
+  getH1Class() {
+    return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading1[this.classValue] : " ";
+  }
+  getH2Class() {
+    return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading2[this.classValue] : " ";
+  }
+  getH3Class() {
+    return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading3[this.classValue] : " ";
+  }
+  getH4Class() {
+    return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading4[this.classValue] : " ";
+  }
+  // handle body text size classes
+  getBodyTextSizeClass() {
+    return this.validator.validateBodyTextSizeType(this.classValue) ? this.textClass.bodyText[this.classValue] : " ";
+  }
+  // handle font weight classes
+  getFontWeightClass() {
+    return this.validator.validateFontWeightType(this.classValue) ? this.textClass.fontweight[this.classValue] : " ";
+  }
+  // handle text align classes
+  getTextAlignClass() {
+    return this.validator.validateAlignment(this.classValue) ? this.textClass.textAlign[this.classValue] : " ";
+  }
+  // handle border width class
+  getBorderWidthClass() {
+    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderWidth[this.classValue] : " ";
+  }
+  getBorderXWidthClass() {
+    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderXWidth[this.classValue] : " ";
+  }
+  getBorderYWidthClass() {
+    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderYWidth[this.classValue] : " ";
+  }
+  getBorderTopWidthClass() {
+    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderTopWidth[this.classValue] : " ";
+  }
+  getBorderBottomWidthClass() {
+    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderBottomWidth[this.classValue] : " ";
+  }
+  getBorderLeftWidthClass() {
+    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderLeftWidth[this.classValue] : " ";
+  }
+  getBorderRightWidthClass() {
+    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderRightWidth[this.classValue] : " ";
+  }
+  // handle opacity classes
+  getOpacityClass() {
+    return this.validator.validateOpacityType(this.classValue) ? this.opacityClass.opacity[this.classValue] : " ";
+  }
+  getBgOpacityClass() {
+    return this.validator.validateOpacityType(this.classValue) ? this.opacityClass.backgroundOpacity[this.classValue] : " ";
+  }
+  getOutlineOpacityClass() {
+    return this.validator.validateOpacityType(this.classValue) ? this.opacityClass.outlineOpacity[this.classValue] : " ";
+  }
+  // spacing classes
+  // margins
+  getMarginClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.margin[this.classValue] : " ";
+  }
+  getMarginXClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginX[this.classValue] : " ";
+  }
+  getMarginYClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginY[this.classValue] : " ";
+  }
+  getMarginTopClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginTop[this.classValue] : " ";
+  }
+  getMarginBottomClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginBottom[this.classValue] : " ";
+  }
+  getMarginLeftClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginLeft[this.classValue] : " ";
+  }
+  getMarginRightClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginRight[this.classValue] : " ";
+  }
+  // paddings
+  getPaddingClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.padding[this.classValue] : " ";
+  }
+  getPaddingXClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingX[this.classValue] : " ";
+  }
+  getPaddingYClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingY[this.classValue] : " ";
+  }
+  getPaddingTopClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingTop[this.classValue] : " ";
+  }
+  getPaddingBottomClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingBottom[this.classValue] : " ";
+  }
+  getPaddingLeftClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingLeft[this.classValue] : " ";
+  }
+  getPaddingRightClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingRight[this.classValue] : " ";
+  }
+  // gaps
+  getGapClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.gap[this.classValue] : " ";
+  }
+}
+const j = (t, r) => new z(t, r).generateClass();
+w({
+  setup(t, { slots: r }) {
+    const e = I(!1);
+    return G(() => {
+      e.value = !0;
+    }), () => e.value && r.default ? r.default() : null;
+  }
+});
 const $ = {
+  xs: "backdrop-blur-xs",
+  sm: "backdrop-blur-sm",
+  md: "backdrop-blur-md",
+  lg: "backdrop-blur-lg",
+  xl: "backdrop-blur-xl"
+}, U = {
+  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"
+}, q = {
+  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"
+}, J = (t, r, e, g = 10) => [
+  "mcl-glassmorphism",
+  U[t],
+  $[r],
+  j("BGOPACITY", e),
+  q[g]
+].filter(Boolean).join(" "), K = {
   key: 0,
   class: "relative"
-}, z = ["src", "alt"], G = ["innerHTML"], D = { class: "flex h-full flex-col justify-between" }, I = { class: "px-xs pt-sm flex-1" }, X = ["innerHTML"], N = ["innerHTML"], W = { class: "px-xs w-full" }, V = ["href", "target"], at = /* @__PURE__ */ L({
+}, Q = ["src", "alt"], Z = ["innerHTML"], _ = { class: "flex h-full flex-col justify-between" }, tt = { class: "px-xs pt-sm flex-1" }, rt = ["innerHTML"], et = ["innerHTML"], at = { class: "px-xs w-full" }, st = ["href", "target"], yt = /* @__PURE__ */ w({
   __name: "MclCardA",
   props: {
     title: {},
@@ -36,123 +1440,123 @@ const $ = {
     displayShadow: { type: Boolean, default: !0 }
   },
   emits: ["card-click", "card-btn-click"],
-  setup(y, { emit: C }) {
-    const i = y;
-    T();
-    const c = C, k = p(() => {
+  setup(t, { emit: r }) {
+    const e = t;
+    R();
+    const g = r, m = p(() => {
       const {
-        borderColor: t,
-        bgColor: a,
-        rounded: e,
-        enlargeOnHover: o,
-        displayShadow: m,
-        glass: f,
-        glassBlur: x,
-        glassOpacity: A,
-        fullWidth: R
-      } = i;
+        borderColor: a,
+        bgColor: l,
+        rounded: s,
+        enlargeOnHover: i,
+        displayShadow: f,
+        glass: b,
+        glassBlur: B,
+        glassOpacity: L,
+        fullWidth: S
+      } = e;
       return [
-        r("BORDER", t),
-        r("BGCOLOR", a),
-        !R && "max-w-[450px] sm:max-w-[350px]",
-        e ? "rounded-lg" : "rounded-sm",
-        o && "hover:scale-105 transition ease-in duration-300",
-        m && "drop-shadow-md",
-        f && E(a, x, A)
+        d("BORDER", a),
+        d("BGCOLOR", l),
+        !S && "max-w-[450px] sm:max-w-[350px]",
+        s ? "rounded-lg" : "rounded-sm",
+        i && "hover:scale-105 transition ease-in duration-300",
+        f && "drop-shadow-md",
+        b && J(l, B, L)
       ].filter(Boolean).join(" ");
     }), u = p(() => {
-      const { titleSize: t, titleColor: a, displayHighlight: e } = i;
+      const { titleSize: a, titleColor: l, displayHighlight: s } = e;
       return [
-        r("H3", t),
-        r("TEXTCOLOR", a),
-        e ? "mb-2xs" : "mb-xs"
+        d("H3", a),
+        d("TEXTCOLOR", l),
+        s ? "mb-2xs" : "mb-xs"
       ].filter(Boolean).join(" ");
-    }), v = p(() => {
-      const { labelTextColor: t, labelColor: a } = i;
+    }), y = p(() => {
+      const { labelTextColor: a, labelColor: l } = e;
       return [
-        r("TEXTCOLOR", t),
-        r("BGCOLOR", a)
+        d("TEXTCOLOR", a),
+        d("BGCOLOR", l)
       ].filter(Boolean).join(" ");
-    }), B = p(() => {
-      const { ctaColor: t, rounded: a } = i, e = ["light-1", "light-2", "light-3", "light-4"];
+    }), T = p(() => {
+      const { ctaColor: a, rounded: l } = e, s = ["light-1", "light-2", "light-3", "light-4"];
       return [
-        r("BTNCOLOR", t),
-        e.includes(t) ? "text-black" : "text-white",
-        a && "btn-round"
+        d("BTNCOLOR", a),
+        s.includes(a) ? "text-black" : "text-white",
+        l && "btn-round"
       ].filter(Boolean).join(" ");
-    }), l = (t) => {
-      const { title: a, ctaLink: e, ctaTarget: o, ctaAsLink: m } = i, f = {
-        title: a,
-        url: e,
-        target: o || "_self"
+    }), o = (a) => {
+      const { title: l, ctaLink: s, ctaTarget: i, ctaAsLink: f } = e, b = {
+        title: l,
+        url: s,
+        target: i || "_self"
       };
-      !m && t.preventDefault(), c("card-btn-click", t, f);
-    }, d = (t) => {
-      const { title: a, ctaLink: e, ctaTarget: o } = i;
-      c("card-click", t, {
-        title: a,
-        url: e,
-        target: o || "_self"
+      !f && a.preventDefault(), g("card-btn-click", a, b);
+    }, h = (a) => {
+      const { title: l, ctaLink: s, ctaTarget: i } = e;
+      g("card-click", a, {
+        title: l,
+        url: s,
+        target: i || "_self"
       });
     };
-    return (t, a) => (h(), g("div", {
-      class: n(["xs:w-auto flex w-full flex-shrink-0 flex-grow cursor-pointer flex-col overflow-hidden border", k.value]),
-      onClick: d
+    return (a, l) => (x(), C("div", {
+      class: c(["xs:w-auto flex w-full flex-shrink-0 flex-grow cursor-pointer flex-col overflow-hidden border", m.value]),
+      onClick: h
     }, [
-      t.displayImage ? (h(), g("div", $, [
-        s("img", {
+      t.displayImage ? (x(), C("div", K, [
+        n("img", {
           src: t.imageSource,
           alt: t.imageAlt,
           class: "aspect-video min-w-full object-cover object-top"
-        }, null, 8, z),
-        t.displayLabel ? (h(), g("span", {
+        }, null, 8, Q),
+        t.displayLabel ? (x(), C("span", {
           key: 0,
-          class: n(["py-3xs px-2xs ml-xs absolute bottom-0 inline-block translate-y-[50%] text-xs font-bold", v.value]),
+          class: c(["py-3xs px-2xs ml-xs absolute bottom-0 inline-block translate-y-[50%] text-xs font-bold", y.value]),
           innerHTML: t.labelText
-        }, null, 10, G)) : b("", !0)
-      ])) : b("", !0),
-      s("div", D, [
-        s("div", I, [
-          !t.displayImage && t.displayLabel ? (h(), g("span", {
+        }, null, 10, Z)) : v("", !0)
+      ])) : v("", !0),
+      n("div", _, [
+        n("div", tt, [
+          !t.displayImage && t.displayLabel ? (x(), C("span", {
             key: 0,
-            class: n(["py-3xs px-2xs mb-2xs inline-block text-xs font-bold", v.value]),
+            class: c(["py-3xs px-2xs mb-2xs inline-block text-xs font-bold", y.value]),
             innerHTML: t.labelText
-          }, null, 10, X)) : b("", !0),
-          s("h3", {
-            class: n(u.value),
+          }, null, 10, rt)) : v("", !0),
+          n("h3", {
+            class: c(u.value),
             innerHTML: t.title
-          }, null, 10, N),
-          t.displayHighlight ? (h(), g("div", {
+          }, null, 10, et),
+          t.displayHighlight ? (x(), C("div", {
             key: 1,
-            class: n(["mb-xs h-3xs w-md", _(r)("BGCOLOR", t.highlightColor)])
-          }, null, 2)) : b("", !0),
-          s("div", {
+            class: c(["mb-xs h-3xs w-md", A(d)("BGCOLOR", t.highlightColor)])
+          }, null, 2)) : v("", !0),
+          n("div", {
             class: "mb-sm cursor-default",
-            onClick: a[0] || (a[0] = S(() => {
+            onClick: l[0] || (l[0] = E(() => {
             }, ["stop"]))
           }, [
-            O(t.$slots, "default")
+            V(a.$slots, "default")
           ])
         ]),
-        t.displayCta ? (h(), g("div", {
+        t.displayCta ? (x(), C("div", {
           key: 0,
           class: "pb-sm cursor-default border-0",
-          onClick: a[2] || (a[2] = S(() => {
+          onClick: l[2] || (l[2] = E(() => {
           }, ["stop"]))
         }, [
-          s("div", W, [
-            s("a", {
+          n("div", at, [
+            n("a", {
               href: t.ctaLink,
               target: t.ctaTarget,
-              class: n(["btn btn-full", B.value]),
-              onClick: a[1] || (a[1] = (e) => l(e))
-            }, w(t.ctaText), 11, V)
+              class: c(["btn btn-full", T.value]),
+              onClick: l[1] || (l[1] = (s) => o(s))
+            }, O(t.ctaText), 11, st)
           ])
-        ])) : b("", !0)
+        ])) : v("", !0)
       ])
     ], 2));
   }
-}), q = ["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"], ot = /* @__PURE__ */ L({
+}), lt = ["href", "target"], it = { class: "z-15 p-xs peer absolute inset-0 flex flex-col items-start justify-end transition-opacity duration-200 hover:opacity-100 [@media(hover:hover)]:opacity-0" }, ot = ["innerHTML"], dt = ["src", "alt"], kt = /* @__PURE__ */ w({
   __name: "MclCardB",
   props: {
     title: {},
@@ -169,56 +1573,56 @@ const $ = {
     rounded: { type: Boolean, default: !1 }
   },
   emits: ["card-click"],
-  setup(y, { emit: C }) {
-    const i = y;
-    T();
-    const c = C, k = p(() => {
-      const { borderColor: l, rounded: d } = i, t = [r("BORDER", l)];
-      return t.push(d ? "rounded-md" : "rounded-sm"), t.join(" ");
+  setup(t, { emit: r }) {
+    const e = t;
+    R();
+    const g = r, m = p(() => {
+      const { borderColor: o, rounded: h } = e, a = [d("BORDER", o)];
+      return a.push(h ? "rounded-md" : "rounded-sm"), a.join(" ");
     }), u = p(() => {
-      const { displayGrayScale: l } = i;
-      return l ? "[@media(hover:hover)]:grayscale peer-hover:grayscale-0" : "";
-    }), v = p(() => {
-      const { titleSize: l, titleColor: d, titleBlockColor: t } = i;
+      const { displayGrayScale: o } = e;
+      return o ? "[@media(hover:hover)]:grayscale peer-hover:grayscale-0" : "";
+    }), y = p(() => {
+      const { titleSize: o, titleColor: h, titleBlockColor: a } = e;
       return [
-        r("H3", l),
-        r("TEXTCOLOR", d),
-        r("BGCOLOR", t)
+        d("H3", o),
+        d("TEXTCOLOR", h),
+        d("BGCOLOR", a)
       ].join(" ");
-    }), B = (l) => {
-      const { title: d, ctaLink: t, ctaTarget: a, ctaAsLink: e } = i;
-      !e && l.preventDefault();
-      const o = {
-        title: d,
-        url: t,
-        target: a || "_self"
+    }), T = (o) => {
+      const { title: h, ctaLink: a, ctaTarget: l, ctaAsLink: s } = e;
+      !s && o.preventDefault();
+      const i = {
+        title: h,
+        url: a,
+        target: l || "_self"
       };
-      console.log(o), c("card-click", l, o);
+      console.log(i), g("card-click", o, i);
     };
-    return (l, d) => (h(), g("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", k.value])
+    return (o, h) => (x(), C("div", {
+      class: c(["max-w-112.5 sm:max-w-87.5 xs:w-auto relative w-full shrink-0 grow cursor-pointer overflow-hidden border", m.value])
     }, [
-      s("a", {
-        href: l.ctaLink,
-        target: l.ctaTarget,
-        onClick: d[0] || (d[0] = (t) => B(t))
+      n("a", {
+        href: t.ctaLink,
+        target: t.ctaTarget,
+        onClick: h[0] || (h[0] = (a) => T(a))
       }, [
-        s("div", F, [
-          s("h3", {
-            innerHTML: l.title,
-            class: n(["inline-block px-xs py-2xs mb-2xs pointer-events-none tracking-wide", v.value])
-          }, null, 10, P),
-          O(l.$slots, "default")
+        n("div", it, [
+          n("h3", {
+            innerHTML: t.title,
+            class: c(["px-xs py-2xs mb-2xs pointer-events-none inline-block tracking-wide", y.value])
+          }, null, 10, ot),
+          V(o.$slots, "default")
         ]),
-        s("img", {
-          src: l.imageSource,
-          alt: l.imageAlt,
-          class: n(["relative h-full w-full z-10 object-cover object-center aspect-[3/4] transition-all duration-200", u.value])
-        }, null, 10, Y)
-      ], 8, q)
+        n("img", {
+          src: t.imageSource,
+          alt: t.imageAlt,
+          class: c(["aspect-3/4 relative z-10 h-full w-full object-cover object-center transition-all duration-200", u.value])
+        }, null, 10, dt)
+      ], 8, lt)
     ], 2));
   }
-}), J = ["src", "alt"], K = /* @__PURE__ */ L({
+}), nt = ["src", "alt"], ct = /* @__PURE__ */ w({
   __name: "MclCardC",
   props: {
     imageSource: {},
@@ -233,61 +1637,61 @@ const $ = {
     cardColor: { default: "primary" }
   },
   emits: ["card-click"],
-  setup(y, { emit: C }) {
-    const i = y;
-    T();
-    const c = H(!1), k = C, u = p(() => {
-      const l = [r("BGCOLOR", i.cardColor)];
-      return c.value && l.push("flip-card"), l.join(" ");
-    }), v = p(() => {
+  setup(t, { emit: r }) {
+    const e = t;
+    R();
+    const g = I(!1), m = r, u = p(() => {
+      const o = [d("BGCOLOR", e.cardColor)];
+      return g.value && o.push("flip-card"), o.join(" ");
+    }), y = p(() => {
       const {
-        titleSize: l,
-        titleColor: d,
-        displayHighlight: t,
-        highlightColor: a,
-        highlightOpacity: e
-      } = i, o = [
-        r("H3", l),
-        r("TEXTCOLOR", d)
+        titleSize: o,
+        titleColor: h,
+        displayHighlight: a,
+        highlightColor: l,
+        highlightOpacity: s
+      } = e, i = [
+        d("H3", o),
+        d("TEXTCOLOR", h)
       ];
-      return t && (o.push("px-xs py-2xs mb-2xs rounded"), o.push(r("BGCOLOR", a)), o.push(r("BGOPACITY", e))), o.join(" ");
-    }), B = (l) => {
-      l.preventDefault(), c.value && k("card-click", l), c.value = !0;
+      return a && (i.push("px-xs py-2xs mb-2xs rounded"), i.push(d("BGCOLOR", l)), i.push(d("BGOPACITY", s))), i.join(" ");
+    }), T = (o) => {
+      o.preventDefault(), g.value && m("card-click", o), g.value = !0;
     };
-    return (l, d) => (h(), g("div", {
-      class: n(["relative aspect-square card transition duration-[1600ms] max-h-[400px] overflow-hidden", u.value]),
-      onClick: B
+    return (o, h) => (x(), C("div", {
+      class: c(["card duration-1600 max-h-100 relative aspect-square overflow-hidden transition", u.value]),
+      onClick: T
     }, [
-      s("img", {
-        src: l.imageSource,
-        alt: l.imageAlt,
-        class: n([
-          c.value ? "opacity-100" : "opacity-0",
-          "absolute w-full h-full object-cover object-center aspect-square transition-opacity delay-500 duration-[800ms]"
+      n("img", {
+        src: t.imageSource,
+        alt: t.imageAlt,
+        class: c([
+          g.value ? "opacity-100" : "opacity-0",
+          "duration-800 absolute aspect-square h-full w-full object-cover object-center transition-opacity delay-500"
         ])
-      }, null, 10, J),
-      s("div", {
-        class: n([
-          c.value ? "cursor-pointer opacity-100" : "opacity-0",
-          "relative flex flex-col justify-end p-sm h-full transition delay-500 duration-[800ms]"
+      }, null, 10, nt),
+      n("div", {
+        class: c([
+          g.value ? "cursor-pointer opacity-100" : "opacity-0",
+          "p-sm duration-800 relative flex h-full flex-col justify-end transition delay-500"
         ])
       }, [
-        l.displayTitle ? (h(), g("h3", {
+        t.displayTitle ? (x(), C("h3", {
           key: 0,
-          class: n(["relative self-start", v.value])
+          class: c(["relative self-start", y.value])
         }, [
-          s("span", null, w(l.title), 1)
-        ], 2)) : b("", !0),
-        O(l.$slots, "card-body", {}, void 0, !0)
+          n("span", null, O(t.title), 1)
+        ], 2)) : v("", !0),
+        V(o.$slots, "card-body", {}, void 0, !0)
       ], 2)
     ], 2));
   }
-}), j = (y, C) => {
-  const i = y.__vccOpts || y;
-  for (const [c, k] of C)
-    i[c] = k;
-  return i;
-}, rt = /* @__PURE__ */ j(K, [["__scopeId", "data-v-0d2f293c"]]), Q = { class: "flex flex-col overflow-hidden rounded-md" }, U = ["src", "alt"], Z = ["href", "target"], tt = /* @__PURE__ */ L({
+}), D = (t, r) => {
+  const e = t.__vccOpts || t;
+  for (const [g, m] of r)
+    e[g] = m;
+  return e;
+}, vt = /* @__PURE__ */ D(ct, [["__scopeId", "data-v-f748c495"]]), gt = { class: "flex flex-col overflow-hidden rounded-md" }, ht = ["src", "alt"], ut = ["href", "target"], bt = /* @__PURE__ */ w({
   __name: "MclCardD",
   props: {
     displayImage: { type: Boolean, default: !0 },
@@ -313,8 +1717,8 @@ const $ = {
     customColor: {}
   },
   emits: ["card-click"],
-  setup(y, { emit: C }) {
-    const i = {
+  setup(t, { emit: r }) {
+    const e = {
       primary: "from-primary",
       secondary: "from-secondary",
       success: "from-success",
@@ -332,7 +1736,7 @@ const $ = {
       black: "from-black",
       white: "from-white",
       transparent: "from-transparent"
-    }, c = {
+    }, g = {
       primary: "via-primary",
       secondary: "via-secondary",
       success: "via-success",
@@ -350,7 +1754,7 @@ const $ = {
       black: "via-black",
       white: "via-white",
       transparent: "via-transparent"
-    }, k = {
+    }, m = {
       primary: "to-primary",
       secondary: "to-secondary",
       success: "to-success",
@@ -368,77 +1772,77 @@ const $ = {
       black: "to-black",
       white: "to-white",
       transparent: "to-transparent"
-    }, u = y;
-    T();
-    const v = C, B = p(() => {
-      const { titleSize: e, titleColor: o } = u;
+    }, u = t;
+    R();
+    const y = r, T = p(() => {
+      const { titleSize: s, titleColor: i } = u;
       return [
-        r("H2", e),
-        r("TEXTCOLOR", o)
+        d("H2", s),
+        d("TEXTCOLOR", i)
       ].join(" ");
-    }), l = p(() => {
-      const { ctaButton: e, ctaButtonColor: o, ctaButtonBlock: m } = u, f = [], x = ["light-1", "light-2", "light-3", "light-4"];
-      return e ? f.push("btn", r("BTNCOLOR", o)) : f.push("mcl-link"), e && m && f.push("btn-full"), e && !x.includes(o) && f.push("text-white"), f.join(" ");
-    }), d = p(() => ({
+    }), o = p(() => {
+      const { ctaButton: s, ctaButtonColor: i, ctaButtonBlock: f } = u, b = [], B = ["light-1", "light-2", "light-3", "light-4"];
+      return s ? b.push("btn", d("BTNCOLOR", i)) : b.push("mcl-link"), s && f && b.push("btn-full"), s && !B.includes(i) && b.push("text-white"), b.join(" ");
+    }), h = p(() => ({
       "--border-width": `${u.borderWidth}px`
-    })), t = p(() => {
-      const e = i[u.borderColor], o = c[u.gradient1], m = k[u.gradient2];
+    })), a = p(() => {
+      const s = e[u.borderColor], i = g[u.gradient1], f = m[u.gradient2];
       return [
-        r("BORDER", u.borderColor),
-        e,
-        o,
-        m
+        d("BORDER", u.borderColor),
+        s,
+        i,
+        f
       ].join(" ");
-    }), a = (e) => {
-      const { title: o, ctaLink: m, ctaLinkTarget: f, ctaAsLink: x } = u, A = {
-        title: o,
-        url: m,
-        target: f || "_self"
+    }), l = (s) => {
+      const { title: i, ctaLink: f, ctaLinkTarget: b, ctaAsLink: B } = u, L = {
+        title: i,
+        url: f,
+        target: b || "_self"
       };
-      !x && e.preventDefault(), v("card-click", e, A);
+      !B && s.preventDefault(), y("card-click", s, L);
     };
-    return (e, o) => (h(), g("div", {
-      class: n(["card xs:w-auto w-full max-w-[450px] flex-shrink-0 flex-grow overflow-hidden rounded-md border from-20% sm:max-w-[350px]", t.value]),
-      style: M(d.value)
+    return (s, i) => (x(), C("div", {
+      class: c(["card xs:w-auto max-w-112.5 sm:max-w-87.5 w-full shrink-0 grow overflow-hidden rounded-md border from-20%", a.value]),
+      style: W(h.value)
     }, [
-      s("div", Q, [
-        e.displayImage ? (h(), g("img", {
+      n("div", gt, [
+        t.displayImage ? (x(), C("img", {
           key: 0,
-          src: e.imageSource,
-          class: "max-h-[200px] min-w-full object-cover object-top",
-          alt: e.imageAlt
-        }, null, 8, U)) : b("", !0),
-        s("div", {
-          class: n(["p-xs", _(r)("BGCOLOR", e.bgColor)])
+          src: t.imageSource,
+          class: "max-h-50 min-w-full object-cover object-top",
+          alt: t.imageAlt
+        }, null, 8, ht)) : v("", !0),
+        n("div", {
+          class: c(["p-xs", A(d)("BGCOLOR", t.bgColor)])
         }, [
-          s("h3", {
-            class: n(["mb-xs", B.value])
-          }, w(e.title), 3),
-          e.displayHighlight ? (h(), g("div", {
+          n("h3", {
+            class: c(["mb-xs", T.value])
+          }, O(t.title), 3),
+          t.displayHighlight ? (x(), C("div", {
             key: 0,
-            class: n(["mb-xs h-3xs w-md", _(r)("BGCOLOR", e.highlightColor)])
-          }, null, 2)) : b("", !0),
-          s("div", null, [
-            O(e.$slots, "default", {}, void 0, !0)
+            class: c(["mb-xs h-3xs w-md", A(d)("BGCOLOR", t.highlightColor)])
+          }, null, 2)) : v("", !0),
+          n("div", null, [
+            V(s.$slots, "default", {}, void 0, !0)
           ]),
-          s("div", {
-            class: n(["mt-xs", { "mb-2xs": !e.ctaButton }])
+          n("div", {
+            class: c(["mt-xs", { "mb-2xs": !t.ctaButton }])
           }, [
-            s("a", {
-              href: e.ctaLink,
-              target: e.ctaLinkTarget,
-              class: n(l.value),
-              onClick: a
-            }, w(e.ctaText), 11, Z)
+            n("a", {
+              href: t.ctaLink,
+              target: t.ctaLinkTarget,
+              class: c(o.value),
+              onClick: l
+            }, O(t.ctaText), 11, ut)
           ], 2)
         ], 2)
       ])
     ], 6));
   }
-}), st = /* @__PURE__ */ j(tt, [["__scopeId", "data-v-390b5ad7"]]);
+}), Tt = /* @__PURE__ */ D(bt, [["__scopeId", "data-v-09214c6f"]]);
 export {
-  at as MclCardA,
-  ot as MclCardB,
-  rt as MclCardC,
-  st as MclCardD
+  yt as MclCardA,
+  kt as MclCardB,
+  vt as MclCardC,
+  Tt as MclCardD
 };