@bobbykim/mcl-header 0.7.9 → 0.8.0

package/dist/mcl-header.js

@@ -1,1553 +1,99 @@
-(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.nav__decorator[data-v-21c9812e]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-21c9812e]:before,.nav__text:hover+.nav__decorator[data-v-21c9812e]:before{width:100%}.nav__decorator[data-v-f1056ea0]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-f1056ea0]:before,.nav__text:hover+.nav__decorator[data-v-f1056ea0]:before{width:100%}.nav__decorator[data-v-d99c76b1]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-d99c76b1]:before,.nav__text:hover+.nav__decorator[data-v-d99c76b1]:before{width:100%}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as S, computed as O, h as ae, ref as D, openBlock as n, createElementBlock as u, createElementVNode as o, withDirectives as J, normalizeClass as B, toDisplayString as G, unref as w, createCommentVNode as A, createVNode as M, withCtx as R, Fragment as N, renderList as X, withKeys as Y, useSlots as Q, createBlock as V, renderSlot as $ } from "vue";
-import r, { Collapse as Z, DropdownContainer as se, DropdownContent as ie, HeaderHorizontal as oe, HeaderVertical as ne } from "@bobbykim/manguito-theme";
-class de {
-  // 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 ce {
-  // 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 ge {
-  // 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 he {
-  // 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 ue = 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"
-  };
-};
-class be {
-  // 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"
-  };
-}
-let xe = class {
-  classType;
-  constructor(t) {
-    this.classType = t;
-  }
-  validateColorType(t) {
-    return typeof t != "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(t) ? !1 : E.colorType.includes(this.classType);
-  }
-  validateSpaceType(t) {
-    return typeof t != "string" || !/(0|3xs|2xs|xs|sm|md|lg|xl|2xl|3xl)/.test(t) ? !1 : E.spacingType.includes(this.classType);
-  }
-  validateHeadingTextSizeType(t) {
-    return typeof t != "string" || !/(sm|md|lg|xl)/.test(t) ? !1 : E.headingSizeType.includes(
-      this.classType
-    );
-  }
-  validateBodyTextSizeType(t) {
-    return typeof t != "string" || !/(xs|sm|md|lg|xl)/.test(t) ? !1 : E.textType.includes(this.classType);
-  }
-  validateFontWeightType(t) {
-    return typeof t != "string" || !/(light|normal|bold)/.test(t) ? !1 : E.fontWeightType.includes(
-      this.classType
-    );
-  }
-  validateOpacityType(t) {
-    return typeof t != "number" || !/\b(0|[1-9]0|100)\b/.test(t.toString()) ? !1 : E.scaleType.includes(this.classType);
-  }
-  validateRangeType(t) {
-    return typeof t != "number" || !/\b([1-9]|1[0-2])\b/.test(t.toString()) ? !1 : E.borderWidthType.includes(
-      this.classType
-    );
-  }
-  validateAlignment(t) {
-    return typeof t != "string" || !/(left|center|right)/.test(t) ? !1 : E.textAlignType.includes(
-      this.classType
-    );
-  }
-};
-const E = {
-  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 fe {
-  classType;
-  classValue;
-  colorClass;
-  headingSizeClass;
-  borderWidthClass;
-  opacityClass;
-  spacingClass;
-  textClass;
-  validator;
-  constructor(t, a) {
-    this.classType = t, this.classValue = a, this.colorClass = new ge(), this.headingSizeClass = new he(), this.borderWidthClass = new ce(), this.opacityClass = new ue(), this.spacingClass = new be(), this.textClass = new de(), this.validator = new xe(t);
-  }
-  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 P = (e, t) => new fe(e, t).generateClass(), j = {
-  left: "tooltip-left",
-  top: "tooltip-top",
-  bottom: "tooltip-bottom",
-  right: "tooltip-right"
-};
-S({
-  name: "Tooltip",
-  props: {
-    direction: {
-      type: String,
-      default: "right"
-    },
-    color: {
-      type: String,
-      default: "dark-3"
-    },
-    textColor: {
-      type: String,
-      default: "white"
-    },
-    width: {
-      type: [Number, String],
-      default: 80
-    },
-    customClass: {
-      type: String,
-      default: ""
-    },
-    title: {
-      type: String,
-      required: !0
-    }
-  },
-  setup(e) {
-    const t = "invisible opacity-0 group-hover:visible group-hover:opacity-100 z-[100] tooltip", a = O(() => [
-      P("BGCOLOR", e.color),
-      P("TEXTCOLOR", e.textColor)
-    ].join(" ")), b = O(() => ({ width: `${e.width}px` })), c = O(() => j[e.direction] || j.right), m = O(() => [
-      t,
-      c.value,
-      a.value,
-      e.customClass
-    ]);
-    return () => ae("div", {
-      class: m.value,
-      role: "tooltip",
-      innerHTML: e.title,
-      style: [b.value]
-    });
-  }
-});
-const me = (e, t) => {
-  if (e.tagName === "A") {
-    const a = e.getAttribute("href");
-    return a ? a.charAt(0) === "#" ? a.substring(1) : a : null;
-  }
-  return t || null;
-}, Ce = (e) => e ? document.getElementById(e) : null, ke = (e) => e.hasAttribute("visible"), _ = (e) => {
-  const t = e.getAttribute("visible") === "true" ? "false" : "true";
-  e.setAttribute("visible", t);
-}, pe = (e) => {
-  const t = `div[accordion="${e}"]`;
-  return Array.from(document.querySelectorAll(t));
-}, ve = (e, t) => {
-  pe(t).forEach((a) => {
-    a.id === e.id ? _(a) : a.getAttribute("visible") === "true" && a.setAttribute("visible", "false");
-  });
-}, ye = (e) => {
-  _(e);
-}, Te = (e) => (t) => {
-  t.preventDefault();
-  const a = t.target, b = me(a, e), c = Ce(b);
-  if (!c) {
-    console.warn(`[v-collapse] Target element not found: ${b}`);
-    return;
-  }
-  if (!ke(c)) {
-    console.warn(
-      `[v-collapse] Target element missing 'visible' attribute: ${b}`
-    );
-    return;
-  }
-  const m = c.getAttribute("accordion");
-  m ? ve(c, m) : ye(c);
-}, ee = {
-  mounted(e, t) {
-    e.__HandleToggler = Te(t.arg), e.addEventListener("click", e.__HandleToggler);
-  },
-  unmounted(e) {
-    e.__HandleToggler && (e.removeEventListener("click", e.__HandleToggler), delete e.__HandleToggler);
-  }
-}, Be = { class: "flex w-full flex-col" }, we = { class: "self-center" }, Oe = { class: "pt-2xs relative" }, Re = { class: "relative flex flex-col" }, Le = ["href", "target", "onClick"], Ve = /* @__PURE__ */ S({
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.nav__decorator[data-v-df8e19a8]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-df8e19a8]:before,.nav__text:hover+.nav__decorator[data-v-df8e19a8]:before{width:100%}.nav__decorator[data-v-4dc15d31]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-4dc15d31]:before,.nav__text:hover+.nav__decorator[data-v-4dc15d31]:before{width:100%}.nav__decorator[data-v-d390be01]:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:0;transition:width .3s linear}.nav__text:focus+.nav__decorator[data-v-d390be01]:before,.nav__text:hover+.nav__decorator[data-v-d390be01]:before{width:100%}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { defineComponent as R, ref as H, computed as S, openBlock as r, createElementBlock as d, createElementVNode as o, normalizeClass as y, toDisplayString as M, unref as w, createCommentVNode as $, createVNode as D, withCtx as I, Fragment as N, renderList as j, withKeys as G, useSlots as P, createBlock as V, renderSlot as E } from "vue";
+import { generateClass as t, Collapse as Q, DropdownContainer as p, DropdownContent as _, HeaderHorizontal as ee, AccordionGroup as W, HeaderVertical as te } from "@bobbykim/manguito-theme";
+const le = { class: "flex w-full flex-col" }, oe = { class: "self-center" }, ne = { class: "pt-2xs relative" }, ie = { class: "relative flex flex-col" }, ae = ["href", "target", "onClick"], re = /* @__PURE__ */ R({
   __name: "NavCollapse",
   props: {
     navId: {},
-    navAccordionGroup: {},
     navItem: {},
     bgColor: { default: "light-2" },
     hoverBgColor: { default: "dark-1" },
     menuTextSize: { default: "md" },
     menuTextColor: { default: "dark-3" },
     menuTextBold: { type: Boolean, default: !1 },
-    displayHighlight: { type: Boolean, default: !0 },
+    showHighlight: { type: Boolean, default: !0 },
     highlightColor: { default: "primary" },
     asLink: { type: Boolean, default: !0 }
   },
   emits: ["child-click", "label-click"],
-  setup(e, { emit: t }) {
-    const a = e, b = t, c = D(!1), m = O(() => {
-      const { navId: s } = a;
-      return `nav-${s.toLowerCase().replaceAll(" ", "-")}`;
-    }), C = O(() => {
-      const { navAccordionGroup: s } = a;
-      return `accordion-${s.toLocaleLowerCase().replaceAll(" ", "-")}`;
-    }), x = (s) => {
-      c.value = s;
-    }, p = (s, d) => {
-      b("label-click", s, d, c.value);
-    }, y = (s, d) => {
-      const { asLink: i } = a;
-      !i && s.preventDefault(), b("child-click", s, d);
-    }, T = (s, d, i) => {
-      const f = [
-        r("BODYTEXT", s),
-        r("TEXTCOLOR", d)
+  setup(e, { emit: L }) {
+    const T = e, k = L, g = H(!1), C = S(() => {
+      const { navId: a } = T;
+      return `nav-${a.toLowerCase().replaceAll(" ", "-")}`;
+    }), f = H(), c = (a) => {
+      g.value = a;
+    }, x = (a, s) => {
+      f.value?.toggle(), k("label-click", a, s, g.value);
+    }, v = (a, s) => {
+      const { asLink: n } = T;
+      !n && a.preventDefault(), k("child-click", a, s);
+    }, b = (a, s, n) => {
+      const m = [
+        t.bodyTextVariant({ size: a }),
+        t.textColorVariant({ color: s })
       ];
-      return i && f.push("font-bold"), f.join(" ");
+      return n && m.push("font-bold"), m.join(" ");
     };
-    return (s, d) => (n(), u("div", Be, [
-      o("div", we, [
-        J((n(), u("button", {
-          class: B(["nav__text gap-3xs flex items-center align-middle tracking-wider outline-none", T(e.menuTextSize, e.menuTextColor, e.menuTextBold)]),
-          onClick: d[0] || (d[0] = (i) => p(i, e.navItem.title))
+    return (a, s) => (r(), d("div", le, [
+      o("div", oe, [
+        o("button", {
+          class: y(["nav__text gap-3xs flex items-center align-middle tracking-wider outline-none", b(e.menuTextSize, e.menuTextColor, e.menuTextBold)]),
+          onClick: s[0] || (s[0] = (n) => x(n, e.navItem.title))
         }, [
-          o("span", null, G(e.navItem.title), 1),
-          (n(), u("svg", {
+          o("span", null, M(e.navItem.title), 1),
+          (r(), d("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             viewBox: "0 0 448 512",
-            class: B(["h-[0.8rem] fill-current", [
-              c.value ? "rotate-180" : "rotate-0",
+            class: y(["h-[0.8rem] fill-current", [
+              g.value ? "rotate-180" : "rotate-0",
               "transition-transform duration-300 ease-in"
             ]])
-          }, [...d[1] || (d[1] = [
+          }, [...s[1] || (s[1] = [
             o("path", { d: "M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z" }, null, -1)
           ])], 2))
-        ], 2)), [
-          [w(ee), void 0, m.value]
-        ]),
-        e.displayHighlight ? (n(), u("div", {
+        ], 2),
+        e.showHighlight ? (r(), d("div", {
           key: 0,
-          class: B(["nav__decorator relative -top-0.5 h-1.5", w(r)("BEFOREBG", e.highlightColor)])
-        }, null, 2)) : A("", !0)
+          class: y(["nav__decorator relative -top-0.5 h-1.5", w(t).beforeBgColorVariant({ color: e.highlightColor })])
+        }, null, 2)) : $("", !0)
       ]),
-      M(w(Z), {
-        id: m.value,
-        visible: !1,
-        accordion: C.value,
-        onOpen: x,
-        onClose: x
+      D(w(Q), {
+        ref_key: "collapseRef",
+        ref: f,
+        id: C.value,
+        onOpen: c,
+        onClose: c
       }, {
-        default: R(() => [
-          o("div", Oe, [
-            e.displayHighlight ? (n(), u("div", {
+        default: I(() => [
+          o("div", ne, [
+            e.showHighlight ? (r(), d("div", {
               key: 0,
-              class: B(["w-md absolute -left-4 h-full bg-opacity-25", w(r)("BGCOLOR", e.highlightColor)])
-            }, null, 2)) : A("", !0),
-            o("div", Re, [
-              (n(!0), u(N, null, X(e.navItem.children, (i, f) => (n(), u("a", {
-                href: i.url,
-                target: i.target,
-                class: B(["pb-2xs w-full last:pb-0", [
-                  w(r)("TEXTCOLOR", e.menuTextColor),
-                  w(r)("BODYTEXT", e.menuTextSize)
+              class: y(["w-md absolute -left-4 h-full bg-opacity-25", w(t).bgColorVariant({ color: e.highlightColor })])
+            }, null, 2)) : $("", !0),
+            o("div", ie, [
+              (r(!0), d(N, null, j(e.navItem.children, (n, m) => (r(), d("a", {
+                href: n.url,
+                target: n.target,
+                class: y(["pb-2xs w-full last:pb-0", [
+                  w(t).textColorVariant({ color: e.menuTextColor }),
+                  w(t).bodyTextVariant({ size: e.menuTextSize })
                 ]]),
-                key: f,
-                onClick: (v) => y(v, i)
-              }, G(i.title), 11, Le))), 128))
+                key: m,
+                onClick: (i) => v(i, n)
+              }, M(n.title), 11, ae))), 128))
             ])
           ])
         ]),
         _: 1
-      }, 8, ["id", "accordion"])
+      }, 8, ["id"])
     ]));
   }
-}), F = (e, t) => {
-  const a = e.__vccOpts || e;
-  for (const [b, c] of t)
-    a[b] = c;
-  return a;
-}, Ie = /* @__PURE__ */ F(Ve, [["__scopeId", "data-v-21c9812e"]]), Ae = ["onClick"], Ee = ["href", "target", "onClick"], De = /* @__PURE__ */ S({
+}), F = (e, L) => {
+  const T = e.__vccOpts || e;
+  for (const [k, g] of L)
+    T[k] = g;
+  return T;
+}, se = /* @__PURE__ */ F(re, [["__scopeId", "data-v-df8e19a8"]]), ce = ["onClick"], ue = ["href", "target", "onClick"], de = /* @__PURE__ */ R({
   __name: "NavDropdown",
   props: {
     navItem: {},
@@ -1555,77 +101,77 @@ const me = (e, t) => {
     menuTextSize: { default: "md" },
     menuTextColor: { default: "dark-3" },
     menuTextBold: { type: Boolean, default: !1 },
-    displayHighlight: { type: Boolean, default: !0 },
+    showHighlight: { type: Boolean, default: !0 },
     highlightColor: { default: "primary" },
     asLink: { type: Boolean, default: !0 }
   },
   emits: ["label-click", "child-click"],
-  setup(e, { emit: t }) {
-    const a = e, b = t, c = D(-1), m = D(), C = (T, s, d) => {
-      const i = [
-        r("BODYTEXT", T),
-        r("TEXTCOLOR", s)
+  setup(e, { emit: L }) {
+    const T = e, k = L, g = H(-1), C = H(), f = (b, a, s) => {
+      const n = [
+        t.bodyTextVariant({ size: b }),
+        t.textColorVariant({ color: a })
       ];
-      return d && i.push("font-bold"), i.join(" ");
-    }, x = (T) => {
-      const s = a.navItem.children.length;
-      m.value !== void 0 && (T === "down" && c.value < s - 1 && c.value++, T === "up" && c.value > 0 && c.value--, m.value[c.value].focus());
-    }, p = (T, s, d) => {
-      c.value = -1, b("label-click", T, s, d);
-    }, y = (T, s) => {
-      const { asLink: d } = a;
-      !d && T.preventDefault(), b("child-click", T, s);
+      return s && n.push("font-bold"), n.join(" ");
+    }, c = (b) => {
+      const a = T.navItem.children.length;
+      C.value !== void 0 && (b === "down" && g.value < a - 1 && g.value++, b === "up" && g.value > 0 && g.value--, C.value[g.value].focus());
+    }, x = (b, a, s) => {
+      g.value = -1, k("label-click", b, a, s);
+    }, v = (b, a) => {
+      const { asLink: s } = T;
+      !s && b.preventDefault(), k("child-click", b, a);
     };
-    return (T, s) => (n(), u("div", {
+    return (b, a) => (r(), d("div", {
       onKeyup: [
-        s[0] || (s[0] = Y((d) => x("down"), ["down"])),
-        s[1] || (s[1] = Y((d) => x("up"), ["up"]))
+        a[0] || (a[0] = G((s) => c("down"), ["down"])),
+        a[1] || (a[1] = G((s) => c("up"), ["up"]))
       ]
     }, [
-      M(w(se), null, {
-        toggler: R(({ toggle: d, dropdownState: i }) => [
+      D(w(p), null, {
+        toggler: I(({ toggle: s, dropdownState: n }) => [
           o("div", null, [
             o("button", {
-              class: B(["nav__text gap-3xs flex items-center align-middle tracking-wider outline-none", C(e.menuTextSize, e.menuTextColor, e.menuTextBold)]),
-              onClick: (f) => (d(f), p(f, e.navItem.title, i))
+              class: y(["nav__text gap-3xs flex items-center align-middle tracking-wider outline-none", f(e.menuTextSize, e.menuTextColor, e.menuTextBold)]),
+              onClick: (m) => (s(m), x(m, e.navItem.title, n))
             }, [
-              o("span", null, G(e.navItem.title), 1),
-              (n(), u("svg", {
+              o("span", null, M(e.navItem.title), 1),
+              (r(), d("svg", {
                 xmlns: "http://www.w3.org/2000/svg",
                 viewBox: "0 0 448 512",
-                class: B(["h-[0.8rem] fill-current", [
-                  i ? "rotate-180" : "rotate-0",
+                class: y(["h-[0.8rem] fill-current", [
+                  n ? "rotate-180" : "rotate-0",
                   "transition-transform duration-300 ease-in"
                 ]])
-              }, [...s[2] || (s[2] = [
+              }, [...a[2] || (a[2] = [
                 o("path", { d: "M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z" }, null, -1)
               ])], 2))
-            ], 10, Ae),
-            e.displayHighlight ? (n(), u("div", {
+            ], 10, ce),
+            e.showHighlight ? (r(), d("div", {
               key: 0,
-              class: B(["nav__decorator relative -top-0.5 h-1.5", w(r)("BEFOREBG", e.highlightColor)])
-            }, null, 2)) : A("", !0)
+              class: y(["nav__decorator relative -top-0.5 h-1.5", w(t).beforeBgColorVariant({ color: e.highlightColor })])
+            }, null, 2)) : $("", !0)
           ])
         ]),
-        default: R(() => [
-          M(w(ie), { className: "border drop-shadow-sm" }, {
-            default: R(({ itemClick: d }) => [
-              (n(!0), u(N, null, X(e.navItem.children, (i, f) => (n(), u("a", {
-                href: i.url,
-                target: i.target,
-                key: f,
+        default: I(() => [
+          D(w(_), { "custom-class": "border drop-shadow-sm" }, {
+            default: I(({ itemClick: s }) => [
+              (r(!0), d(N, null, j(e.navItem.children, (n, m) => (r(), d("a", {
+                href: n.url,
+                target: n.target,
+                key: m,
                 ref_for: !0,
                 ref_key: "navItemRef",
-                ref: m,
-                class: B(["px-xs py-2xs block w-full transition-all duration-200 ease-linear hover:bg-opacity-50 focus:bg-opacity-50", [
-                  w(r)("BGCOLOR", e.bgColor),
-                  w(r)("HVBGCOLOR", e.highlightColor),
-                  w(r)("FCBGCOLOR", e.highlightColor),
-                  w(r)("TEXTCOLOR", e.menuTextColor),
-                  w(r)("BODYTEXT", e.menuTextSize)
+                ref: C,
+                class: y(["px-xs py-2xs block w-full transition-all duration-200 ease-linear hover:bg-opacity-50 focus:bg-opacity-50", [
+                  w(t).bgColorVariant({ color: e.bgColor }),
+                  w(t).hoverBgColorVariant({ color: e.highlightColor }),
+                  w(t).focusBgColorVariant({ color: e.highlightColor }),
+                  w(t).textColorVariant({ color: e.menuTextColor }),
+                  w(t).bodyTextVariant({ size: e.menuTextSize })
                 ]]),
-                onClick: (v) => (d(), y(v, i))
-              }, G(i.title), 11, Ee))), 128))
+                onClick: (i) => (s(), v(i, n))
+              }, M(n.title), 11, ue))), 128))
             ]),
             _: 1
           })
@@ -1634,47 +180,47 @@ const me = (e, t) => {
       })
     ], 32));
   }
-}), Se = /* @__PURE__ */ F(De, [["__scopeId", "data-v-f1056ea0"]]), He = ["href", "target", "innerHTML"], Ge = /* @__PURE__ */ S({
+}), he = /* @__PURE__ */ F(de, [["__scopeId", "data-v-4dc15d31"]]), fe = ["href", "target", "innerHTML"], me = /* @__PURE__ */ R({
   __name: "NavLink",
   props: {
     navItem: {},
     menuTextSize: { default: "md" },
     menuTextColor: { default: "dark-3" },
     menuTextBold: { type: Boolean, default: !1 },
-    displayHighlight: { type: Boolean, default: !0 },
+    showHighlight: { type: Boolean, default: !0 },
     highlightColor: { default: "primary" },
     asLink: { type: Boolean, default: !0 }
   },
   emits: ["nav-link"],
-  setup(e, { emit: t }) {
-    const a = e, b = t, c = (C, x, p) => {
-      const y = [
-        r("BODYTEXT", C),
-        r("TEXTCOLOR", x)
+  setup(e, { emit: L }) {
+    const T = e, k = L, g = (f, c, x) => {
+      const v = [
+        t.bodyTextVariant({ size: f }),
+        t.textColorVariant({ color: c })
       ];
-      return p && y.push("font-bold"), y.join(" ");
-    }, m = (C, x) => {
-      const { asLink: p } = a;
-      !p && C.preventDefault(), b("nav-link", C, x);
+      return x && v.push("font-bold"), v.join(" ");
+    }, C = (f, c) => {
+      const { asLink: x } = T;
+      !x && f.preventDefault(), k("nav-link", f, c);
     };
-    return (C, x) => (n(), u("div", null, [
+    return (f, c) => (r(), d("div", null, [
       o("a", {
         href: e.navItem.url,
         target: e.navItem.target,
         innerHTML: e.navItem.title,
-        class: B(["nav__text tracking-wider outline-none", c(e.menuTextSize, e.menuTextColor, e.menuTextBold)]),
-        onClick: x[0] || (x[0] = (p) => m(p, e.navItem))
-      }, null, 10, He),
-      e.displayHighlight ? (n(), u("div", {
+        class: y(["nav__text tracking-wider outline-none", g(e.menuTextSize, e.menuTextColor, e.menuTextBold)]),
+        onClick: c[0] || (c[0] = (x) => C(x, e.navItem))
+      }, null, 10, fe),
+      e.showHighlight ? (r(), d("div", {
         key: 0,
-        class: B(["nav__decorator relative -top-0.5 h-1.5", w(r)("BEFOREBG", e.highlightColor)])
-      }, null, 2)) : A("", !0)
+        class: y(["nav__decorator relative -top-0.5 h-1.5", w(t).beforeBgColorVariant({ color: e.highlightColor })])
+      }, null, 2)) : $("", !0)
     ]));
   }
-}), U = /* @__PURE__ */ F(Ge, [["__scopeId", "data-v-d99c76b1"]]), Ne = { class: "flex flex-shrink-0 items-center self-center" }, Xe = { class: "h-md md:h-lg lg:h-xl mr-2xs md:mr-sm align-middle" }, ze = ["href", "target"], We = ["src", "alt"], $e = ["src", "alt"], Me = { class: "flex flex-col justify-center ml-2" }, Fe = ["href", "target"], Ye = ["innerHTML"], Pe = { class: "hidden lg:flex flex-wrap" }, je = {
+}), U = /* @__PURE__ */ F(me, [["__scopeId", "data-v-d390be01"]]), ge = { class: "flex flex-shrink-0 items-center self-center" }, ke = { class: "h-md md:h-lg lg:h-xl mr-2xs md:mr-sm align-middle" }, xe = ["href", "target"], Ce = ["src", "alt"], ve = ["src", "alt"], be = { class: "flex flex-col justify-center ml-2" }, ye = ["href", "target"], we = ["innerHTML"], Te = { class: "hidden lg:flex flex-wrap" }, Be = {
   key: 0,
   class: "hidden lg:block"
-}, Ue = { class: "flex flex-col items-center justify-center p-xs" }, Ke = { key: 0 }, kt = /* @__PURE__ */ S({
+}, Le = { class: "flex flex-col items-center justify-center p-xs" }, Ie = { key: 0 }, Xe = /* @__PURE__ */ R({
   __name: "MclHeaderA",
   props: {
     logo: {},
@@ -1691,161 +237,164 @@ const me = (e, t) => {
     menuTextSize: { default: "md" },
     menuTextColor: { default: "dark-3" },
     menuTextBold: { type: Boolean, default: !1 },
-    displayHighlight: { type: Boolean, default: !0 },
+    showHighlight: { type: Boolean, default: !0 },
     highlightColor: { default: "primary" },
     bgColor: { default: "light-1" },
     mobileMenuBgColor: { default: "light-2" },
     drawerBtnColor: { default: "dark-1" },
-    drawerBtnBorder: { type: Boolean, default: !0 },
+    showDrawerBorder: { type: Boolean, default: !0 },
     fadeInOnScroll: { type: Boolean, default: !0 },
     scrollDistance: { default: 50 }
   },
   emits: ["toggle-drawer", "title-click", "menu-click", "collapse-click"],
-  setup(e, { expose: t, emit: a }) {
-    const b = e, c = D(), m = Q(), C = a, x = () => {
-      c.value?.headerClose();
-    }, p = (i) => {
-      const { titleBlockAsLink: f, titleBlockLink: v, titleBlockLinkTarget: l } = b;
-      f || i.preventDefault(), C("title-click", i, v, l), x();
-    }, y = (i, f) => {
-      const { menuItemAsLink: v } = b;
-      v || i.preventDefault(), C("menu-click", i, f), x();
-    }, T = (i, f, v) => {
-      C("collapse-click", i, f, v);
-    }, s = (i, f) => [
-      r("H2", i),
-      r("TEXTCOLOR", f)
-    ].join(" "), d = (i) => {
-      const f = i;
-      return typeof f.children > "u" ? !1 : f.children.length > 0;
+  setup(e, { expose: L, emit: T }) {
+    const k = e, g = H(), C = P(), f = T, c = () => {
+      g.value?.headerClose();
+    }, x = (n) => {
+      const { titleBlockAsLink: m, titleBlockLink: i, titleBlockLinkTarget: l } = k;
+      m || n.preventDefault(), f("title-click", n, i, l), c();
+    }, v = (n, m) => {
+      const { menuItemAsLink: i } = k;
+      i || n.preventDefault(), f("menu-click", n, m), c();
+    }, b = (n, m, i) => {
+      f("collapse-click", n, m, i);
+    }, a = (n, m) => [
+      t.h2Variant({ size: n }),
+      t.textColorVariant({ color: m })
+    ].join(" "), s = (n) => {
+      const m = n;
+      return typeof m.children > "u" ? !1 : m.children.length > 0;
     };
-    return t({
-      headerClose: x
-    }), (i, f) => (n(), V(w(oe), {
+    return L({
+      headerClose: c
+    }), (n, m) => (r(), V(w(ee), {
       ref_key: "componentRef",
-      ref: c,
+      ref: g,
       "bg-color": e.bgColor,
-      "drawer-btn-border": e.drawerBtnBorder,
+      "drawer-btn-border": e.showDrawerBorder,
       "drawer-btn-color": e.drawerBtnColor,
       "fade-in-on-scroll": e.fadeInOnScroll,
       "mobile-menu-bg-color": e.mobileMenuBgColor
     }, {
-      content: R(() => [
-        o("div", Ne, [
-          o("div", Xe, [
+      content: I(() => [
+        o("div", ge, [
+          o("div", ke, [
             o("a", {
               href: e.titleBlockLink,
               target: e.titleBlockLinkTarget,
-              onClick: p
+              onClick: x
             }, [
               o("img", {
                 src: e.logo,
                 alt: e.logoAlt,
-                class: B(["h-full", [e.logoSmall ? "hidden lg:inline-block" : "inline-block"]])
-              }, null, 10, We),
-              e.logoSmall ? (n(), u("img", {
+                class: y(["h-full", [e.logoSmall ? "hidden lg:inline-block" : "inline-block"]])
+              }, null, 10, Ce),
+              e.logoSmall ? (r(), d("img", {
                 key: 0,
                 src: e.logoSmall,
                 alt: e.logoAlt,
                 class: "inline-block lg:hidden h-full"
-              }, null, 8, $e)) : A("", !0)
-            ], 8, ze)
+              }, null, 8, ve)) : $("", !0)
+            ], 8, xe)
           ]),
-          o("div", Me, [
+          o("div", be, [
             o("a", {
               href: e.titleBlockLink,
               target: e.titleBlockLinkTarget,
-              onClick: p
+              onClick: x
             }, [
               o("h2", {
-                class: B(["inline-block align-middle tracking-wider", s(e.titleSize, e.titleColor)]),
+                class: y(["inline-block align-middle tracking-wider", a(e.titleSize, e.titleColor)]),
                 innerHTML: e.title
-              }, null, 10, Ye)
-            ], 8, Fe),
-            o("ul", Pe, [
-              (n(!0), u(N, null, X(e.menuItems, (v, l) => (n(), u("li", {
+              }, null, 10, we)
+            ], 8, ye),
+            o("ul", Te, [
+              (r(!0), d(N, null, j(e.menuItems, (i, l) => (r(), d("li", {
                 class: "mr-xs last:mr-0",
                 key: `menu-${l}`
               }, [
-                d(v) ? (n(), V(Se, {
+                s(i) ? (r(), V(he, {
                   key: 1,
-                  "nav-item": v,
+                  "nav-item": i,
                   "menu-text-color": e.menuTextColor,
                   "menu-text-size": e.menuTextSize,
                   "menu-text-bold": e.menuTextBold,
-                  "display-highlight": e.displayHighlight,
+                  "display-highlight": e.showHighlight,
                   "highlight-color": e.highlightColor,
                   "bg-color": e.bgColor,
                   "as-link": e.menuItemAsLink,
-                  onChildClick: y,
-                  onLabelClick: T
-                }, null, 8, ["nav-item", "menu-text-color", "menu-text-size", "menu-text-bold", "display-highlight", "highlight-color", "bg-color", "as-link"])) : (n(), V(U, {
+                  onChildClick: v,
+                  onLabelClick: b
+                }, null, 8, ["nav-item", "menu-text-color", "menu-text-size", "menu-text-bold", "display-highlight", "highlight-color", "bg-color", "as-link"])) : (r(), V(U, {
                   key: 0,
-                  "nav-item": v,
+                  "nav-item": i,
                   "menu-text-color": e.menuTextColor,
                   "menu-text-size": e.menuTextSize,
                   "menu-text-bold": e.menuTextBold,
-                  "display-highlight": e.displayHighlight,
+                  "display-highlight": e.showHighlight,
                   "highlight-color": e.highlightColor,
                   "as-link": e.menuItemAsLink,
-                  onNavLink: y
+                  onNavLink: v
                 }, null, 8, ["nav-item", "menu-text-color", "menu-text-size", "menu-text-bold", "display-highlight", "highlight-color", "as-link"]))
               ]))), 128))
             ])
           ])
         ])
       ]),
-      "content-right": R(() => [
-        m["content-right"] ? (n(), u("div", je, [
-          $(i.$slots, "content-right")
-        ])) : A("", !0)
+      "content-right": I(() => [
+        C["content-right"] ? (r(), d("div", Be, [
+          E(n.$slots, "content-right")
+        ])) : $("", !0)
       ]),
-      "mobile-content": R(() => [
+      "mobile-content": I(() => [
         o("div", null, [
-          o("ul", Ue, [
-            (n(!0), u(N, null, X(e.menuItems, (v, l) => (n(), u("li", {
-              class: "mb-2xs last:mb-0",
-              key: `mobile-${l}`
-            }, [
-              d(v) ? (n(), V(Ie, {
-                key: 1,
-                "nav-id": v.title,
-                "nav-item": v,
-                "menu-text-color": e.menuTextColor,
-                "menu-text-size": e.menuTextSize,
-                "menu-text-bold": e.menuTextBold,
-                "display-highlight": e.displayHighlight,
-                "highlight-color": e.highlightColor,
-                "nav-accordion-group": e.title,
-                "as-link": e.menuItemAsLink,
-                onChildClick: y,
-                onLabelClick: T
-              }, null, 8, ["nav-id", "nav-item", "menu-text-color", "menu-text-size", "menu-text-bold", "display-highlight", "highlight-color", "nav-accordion-group", "as-link"])) : (n(), V(U, {
-                key: 0,
-                "nav-item": v,
-                "menu-text-color": e.menuTextColor,
-                "menu-text-size": e.menuTextSize,
-                "menu-text-bold": e.menuTextBold,
-                "display-highlight": e.displayHighlight,
-                "highlight-color": e.highlightColor,
-                "as-link": e.menuItemAsLink,
-                onNavLink: y
-              }, null, 8, ["nav-item", "menu-text-color", "menu-text-size", "menu-text-bold", "display-highlight", "highlight-color", "as-link"]))
-            ]))), 128))
-          ]),
-          m["mobile-bottom"] ? (n(), u("div", Ke, [
-            $(i.$slots, "mobile-bottom", { headerClose: x })
-          ])) : A("", !0)
+          D(w(W), null, {
+            default: I(() => [
+              o("ul", Le, [
+                (r(!0), d(N, null, j(e.menuItems, (i, l) => (r(), d("li", {
+                  class: "mb-2xs last:mb-0",
+                  key: `mobile-${l}`
+                }, [
+                  s(i) ? (r(), V(se, {
+                    key: 1,
+                    "nav-id": i.title,
+                    "nav-item": i,
+                    "menu-text-color": e.menuTextColor,
+                    "menu-text-size": e.menuTextSize,
+                    "menu-text-bold": e.menuTextBold,
+                    "display-highlight": e.showHighlight,
+                    "highlight-color": e.highlightColor,
+                    "as-link": e.menuItemAsLink,
+                    onChildClick: v,
+                    onLabelClick: b
+                  }, null, 8, ["nav-id", "nav-item", "menu-text-color", "menu-text-size", "menu-text-bold", "display-highlight", "highlight-color", "as-link"])) : (r(), V(U, {
+                    key: 0,
+                    "nav-item": i,
+                    "menu-text-color": e.menuTextColor,
+                    "menu-text-size": e.menuTextSize,
+                    "menu-text-bold": e.menuTextBold,
+                    "display-highlight": e.showHighlight,
+                    "highlight-color": e.highlightColor,
+                    "as-link": e.menuItemAsLink,
+                    onNavLink: v
+                  }, null, 8, ["nav-item", "menu-text-color", "menu-text-size", "menu-text-bold", "display-highlight", "highlight-color", "as-link"]))
+                ]))), 128))
+              ])
+            ]),
+            _: 1
+          }),
+          C["mobile-bottom"] ? (r(), d("div", Ie, [
+            E(n.$slots, "mobile-bottom", { headerClose: c })
+          ])) : $("", !0)
         ])
       ]),
       _: 3
     }, 8, ["bg-color", "drawer-btn-border", "drawer-btn-color", "fade-in-on-scroll", "mobile-menu-bg-color"]));
   }
-}), qe = { class: "relative flex items-center justify-center gap-2" }, Je = ["href", "target", "onClick"], Qe = { class: "relative" }, K = /* @__PURE__ */ S({
+}), ze = { class: "relative flex items-center justify-center gap-2" }, Ve = ["href", "target", "onClick"], $e = { class: "relative" }, q = /* @__PURE__ */ R({
   __name: "NavCollapseVertical",
   props: {
     navId: {},
-    navAccordionGroup: {},
     navLocation: {},
     menuItem: {},
     textColor: { default: "dark-3" },
@@ -1856,131 +405,125 @@ const me = (e, t) => {
     asLink: { type: Boolean, default: !0 }
   },
   emits: ["label-click", "child-click"],
-  setup(e, { expose: t, emit: a }) {
-    const b = e, c = D(!1), m = D(), C = a, x = (l) => {
-      c.value = l;
-    }, p = () => {
-      m.value?.close();
-    }, y = (l, g) => {
-      C("label-click", l, g, c.value);
-    }, T = (l, g) => {
-      const { asLink: h } = b;
-      h || l.preventDefault(), C("child-click", l, g), m.value?.close(), p();
-    }, s = O(() => {
-      const { navId: l, navLocation: g } = b, k = l.toLowerCase().replaceAll(" ", "-");
-      return `nav-${g}-${k}`;
-    }), d = O(() => {
-      const { navAccordionGroup: l, navLocation: g } = b, h = l.toLowerCase().replaceAll(" ", "-");
-      return `nav-accordion-group-${g}-${h}`;
-    }), i = O(() => {
-      const { textColor: l, textSize: g, dHl: h, hlColor: k, fontBold: I } = b, L = [r("BODYTEXT", g)];
-      if (!h) {
-        const z = [
-          r("TEXTCOLOR", l),
-          r("HVTEXTCOLOR", k),
-          r("FCTEXTCOLOR", k)
+  setup(e, { expose: L, emit: T }) {
+    const k = e, g = H(!1), C = H(), f = T, c = (i) => {
+      g.value = i;
+    }, x = () => {
+      C.value?.close();
+    }, v = (i, l) => {
+      C.value?.toggle(), f("label-click", i, l, g.value);
+    }, b = (i, l) => {
+      const { asLink: u } = k;
+      u || i.preventDefault(), f("child-click", i, l), C.value?.close(), x();
+    }, a = S(() => {
+      const { navId: i, navLocation: l } = k, h = i.toLowerCase().replaceAll(" ", "-");
+      return `nav-${l}-${h}`;
+    }), s = S(() => {
+      const { textColor: i, textSize: l, dHl: u, hlColor: h, fontBold: B } = k, z = [t.bodyTextVariant({ size: l })];
+      if (!u) {
+        const K = [
+          t.textColorVariant({ color: i }),
+          t.hoverTextColorVariant({ color: h }),
+          t.focusTextColorVariant({ color: h })
         ];
-        L.push(z.join(" "));
+        z.push(K.join(" "));
       }
-      if (h) {
-        const z = r("BEFOREBG", k);
-        L.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full " + z);
-        const W = [
-          r("TEXTCOLOR", k),
-          r("HVTEXTCOLOR", l),
-          r("FCTEXTCOLOR", l)
+      if (u) {
+        const K = t.beforeBgColorVariant({ color: h });
+        z.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full " + K);
+        const O = [
+          t.textColorVariant({ color: h }),
+          t.hoverTextColorVariant({ color: i }),
+          t.focusTextColorVariant({ color: i })
         ];
-        L.push(W.join(" "));
+        z.push(O.join(" "));
       }
-      return I && L.push("font-bold"), L.join(" ");
-    }), f = O(() => {
-      const { dHl: l, hlColor: g, navLocation: h } = b, k = [];
-      if (!l)
+      return B && z.push("font-bold"), z.join(" ");
+    }), n = S(() => {
+      const { dHl: i, hlColor: l, navLocation: u } = k, h = [];
+      if (!i)
         return "";
-      const I = "before:absolute before:w-xs before:h-full before:bg-primary before:bg-opacity-70 ", L = h === "desktop" ? "before:left-0 " : "before:right-0 ";
-      return k.push(I + L + r("BEFOREBG", g)), k.join(" ");
-    }), v = O(() => {
-      const { textColor: l, textSize: g, dHl: h, hlColor: k, fontBold: I, navLocation: L } = b;
-      let z = g === "xl" ? "lg" : g === "lg" ? "md" : g === "md" ? "sm" : "xs";
-      const H = [
-        r("TEXTCOLOR", l),
-        r("BODYTEXT", z)
+      const B = "before:absolute before:w-xs before:h-full before:mcl-bg-primary before:bg-opacity-70 ", z = u === "desktop" ? "before:left-0 " : "before:right-0 ";
+      return h.push(B + z + t.beforeBgColorVariant({ color: l })), h.join(" ");
+    }), m = S(() => {
+      const { textColor: i, textSize: l, dHl: u, hlColor: h, fontBold: B, navLocation: z } = k;
+      let K = l === "xl" ? "lg" : l === "lg" ? "md" : l === "md" ? "sm" : "xs";
+      const A = [
+        t.textColorVariant({ color: i }),
+        t.bodyTextVariant({ size: K })
       ];
-      if (L === "mobile" && H.push("text-end"), !h) {
-        const W = [
-          r("TEXTCOLOR", l),
-          r("HVTEXTCOLOR", k),
-          r("FCTEXTCOLOR", k)
+      if (z === "mobile" && A.push("text-end"), !u) {
+        const O = [
+          t.textColorVariant({ color: i }),
+          t.hoverTextColorVariant({ color: h }),
+          t.focusTextColorVariant({ color: h })
         ];
-        H.push(W.join(" "));
+        A.push(O.join(" "));
       }
-      if (h) {
-        const W = r("BEFOREBG", k), te = "before:inset-y-0 before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full before:bg-opacity-70 ", le = L === "desktop" ? "before:left-0 before:transition-[width] " : "before:left-full hover:before:left-0 focus:before:left-0 before:transition-[all] ";
-        H.push(te + le + W);
-        const re = [
-          r("TEXTCOLOR", k),
-          r("HVTEXTCOLOR", l),
-          r("FCTEXTCOLOR", l)
+      if (u) {
+        const O = t.beforeBgColorVariant({ color: h }), X = "before:inset-y-0 before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full before:bg-opacity-70 ", Y = z === "desktop" ? "before:left-0 before:transition-[width] " : "before:left-full hover:before:left-0 focus:before:left-0 before:transition-[all] ";
+        A.push(X + Y + O);
+        const Z = [
+          t.textColorVariant({ color: h }),
+          t.hoverTextColorVariant({ color: i }),
+          t.focusTextColorVariant({ color: i })
         ];
-        H.push(re.join(" "));
+        A.push(Z.join(" "));
       }
-      return I && H.push("font-bold"), H.join(" ");
+      return B && A.push("font-bold"), A.join(" ");
     });
-    return t({
-      closeCollapse: p
-    }), (l, g) => (n(), u("div", null, [
-      J((n(), u("button", {
-        class: B(["px-xs py-2xs relative block w-full text-center transition-colors duration-300 ease-linear before:absolute", [i.value]]),
-        onClick: g[0] || (g[0] = (h) => y(h, e.menuItem.title))
+    return L({
+      closeCollapse: x
+    }), (i, l) => (r(), d("div", null, [
+      o("button", {
+        class: y(["px-xs py-2xs relative block w-full text-center transition-colors duration-300 ease-linear before:absolute", [s.value]]),
+        onClick: l[0] || (l[0] = (u) => v(u, e.menuItem.title))
       }, [
-        o("div", qe, [
-          o("span", null, G(e.menuItem.title), 1),
-          (n(), u("svg", {
+        o("div", ze, [
+          o("span", null, M(e.menuItem.title), 1),
+          (r(), d("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             viewBox: "0 0 448 512",
-            class: B(["h-[0.8rem] fill-current", [
-              c.value ? "rotate-180" : "rotate-0",
+            class: y(["h-[0.8rem] fill-current", [
+              g.value ? "rotate-180" : "rotate-0",
               "transition-transform duration-300 ease-in"
             ]])
-          }, [...g[1] || (g[1] = [
+          }, [...l[1] || (l[1] = [
             o("path", { d: "M224 416c-8.188 0-16.38-3.125-22.62-9.375l-192-192c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 338.8l169.4-169.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-192 192C240.4 412.9 232.2 416 224 416z" }, null, -1)
           ])], 2))
         ])
-      ], 2)), [
-        [w(ee), void 0, s.value]
-      ]),
-      M(w(Z), {
+      ], 2),
+      D(w(Q), {
         ref_key: "collapseRef",
-        ref: m,
-        id: s.value,
-        accordion: d.value,
-        onOpen: x,
-        onClose: x
+        ref: C,
+        id: a.value,
+        onOpen: c,
+        onClose: c
       }, {
-        default: R(() => [
+        default: I(() => [
           o("ul", {
-            class: B(["relative", [f.value]])
+            class: y(["relative", [n.value]])
           }, [
-            (n(!0), u(N, null, X(e.menuItem.children, (h, k) => (n(), u("li", {
-              key: k,
-              class: B([e.navLocation === "desktop" ? "ml-xs" : "mr-xs"])
+            (r(!0), d(N, null, j(e.menuItem.children, (u, h) => (r(), d("li", {
+              key: h,
+              class: y([e.navLocation === "desktop" ? "ml-xs" : "mr-xs"])
             }, [
               o("a", {
-                href: h.url,
-                target: h.target,
-                onClick: (I) => T(I, h),
-                class: B(["px-2xs py-3xs relative block w-full overflow-x-hidden transition-colors duration-300 ease-linear before:absolute", [v.value]])
+                href: u.url,
+                target: u.target,
+                onClick: (B) => b(B, u),
+                class: y(["px-2xs py-3xs relative block w-full overflow-x-hidden transition-colors duration-300 ease-linear before:absolute", [m.value]])
               }, [
-                o("span", Qe, G(h.title), 1)
-              ], 10, Je)
+                o("span", $e, M(u.title), 1)
+              ], 10, Ve)
             ], 2))), 128))
           ], 2)
         ]),
         _: 1
-      }, 8, ["id", "accordion"])
+      }, 8, ["id"])
     ]));
   }
-}), Ze = ["href", "target"], _e = { class: "relative" }, q = /* @__PURE__ */ S({
+}), He = ["href", "target"], Ae = { class: "relative" }, J = /* @__PURE__ */ R({
   __name: "NavLinkVertical",
   props: {
     menuItem: {},
@@ -1992,42 +535,42 @@ const me = (e, t) => {
     asLink: { type: Boolean, default: !0 }
   },
   emits: ["menu-click"],
-  setup(e, { emit: t }) {
-    const a = e, b = t, c = (C, x) => {
-      const { asLink: p } = a;
-      p || C.preventDefault(), b("menu-click", C, x);
-    }, m = O(() => {
-      const { textColor: C, textSize: x, dHl: p, hlColor: y, fontBold: T } = a, s = [r("BODYTEXT", x)];
-      if (!p) {
-        const d = [
-          r("TEXTCOLOR", C),
-          r("HVTEXTCOLOR", y),
-          r("FCTEXTCOLOR", y)
+  setup(e, { emit: L }) {
+    const T = e, k = L, g = (f, c) => {
+      const { asLink: x } = T;
+      x || f.preventDefault(), k("menu-click", f, c);
+    }, C = S(() => {
+      const { textColor: f, textSize: c, dHl: x, hlColor: v, fontBold: b } = T, a = [t.bodyTextVariant({ size: c })];
+      if (!x) {
+        const s = [
+          t.textColorVariant({ color: f }),
+          t.hoverTextColorVariant({ color: v }),
+          t.focusTextColorVariant({ color: v })
         ];
-        s.push(d.join(" "));
+        a.push(s.join(" "));
       }
-      if (p) {
-        const d = r("BEFOREBG", y);
-        s.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full " + d);
-        const f = [
-          r("TEXTCOLOR", y),
-          r("HVTEXTCOLOR", C),
-          r("FCTEXTCOLOR", C)
+      if (x) {
+        const s = t.beforeBgColorVariant({ color: v });
+        a.push("before:inset-y-0 before:left-0 before:transition-[width] before:duration-300 before:ease-linear before:w-0 hover:before:w-full focus:before:w-full " + s);
+        const m = [
+          t.textColorVariant({ color: v }),
+          t.hoverTextColorVariant({ color: f }),
+          t.focusTextColorVariant({ color: f })
         ];
-        s.push(f.join(" "));
+        a.push(m.join(" "));
       }
-      return T && s.push("font-bold"), s.join(" ");
+      return b && a.push("font-bold"), a.join(" ");
     });
-    return (C, x) => (n(), u("a", {
-      class: B([[m.value], "px-xs py-2xs relative text-center block w-full before:absolute transition-colors duration-300 ease-linear"]),
+    return (f, c) => (r(), d("a", {
+      class: y([[C.value], "px-xs py-2xs relative text-center block w-full before:absolute transition-colors duration-300 ease-linear"]),
       href: e.menuItem.url,
       target: e.menuItem.target ? e.menuItem.target : "_self",
-      onClick: x[0] || (x[0] = (p) => c(p, e.menuItem))
+      onClick: c[0] || (c[0] = (x) => g(x, e.menuItem))
     }, [
-      o("span", _e, G(e.menuItem.title), 1)
-    ], 10, Ze));
+      o("span", Ae, M(e.menuItem.title), 1)
+    ], 10, He));
   }
-}), et = { class: "p-md text-center" }, tt = ["href", "target"], lt = ["src", "alt"], rt = ["href", "target"], at = ["innerHTML"], st = { class: "flex flex-col" }, it = { key: 0 }, ot = { class: "flex flex-col justify-between h-full" }, nt = { class: "p-md text-center" }, dt = ["href", "target"], ct = ["src", "alt"], gt = ["href", "target"], ht = ["innerHTML"], ut = { class: "flex flex-col" }, bt = { key: 0 }, pt = /* @__PURE__ */ S({
+}), Se = { class: "p-md text-center" }, Me = ["href", "target"], De = ["src", "alt"], Ne = ["href", "target"], je = ["innerHTML"], Re = { class: "flex flex-col" }, Ke = { key: 0 }, Oe = { class: "flex flex-col justify-between h-full" }, Ee = { class: "p-md text-center" }, We = ["href", "target"], Fe = ["src", "alt"], Ge = ["href", "target"], Ue = ["innerHTML"], qe = { class: "flex flex-col" }, Je = { key: 0 }, Ye = /* @__PURE__ */ R({
   __name: "MclHeaderB",
   props: {
     logo: {},
@@ -2043,185 +586,193 @@ const me = (e, t) => {
     menuTextSize: { default: "md" },
     menuTextColor: { default: "dark-3" },
     menuTextBold: { type: Boolean, default: !1 },
-    displayHighlight: { type: Boolean, default: !0 },
+    showHighlight: { type: Boolean, default: !0 },
     highlightColor: { default: "primary" },
     bgColor: { default: "light-1" },
     drawerBtnColor: { default: "dark-1" },
-    drawerBtnBorder: { type: Boolean, default: !0 },
+    showDrawerBorder: { type: Boolean, default: !0 },
     headerWidth: { default: 160 }
   },
   emits: ["toggle-drawer", "title-click", "menu-click", "collapse-click"],
-  setup(e, { expose: t, emit: a }) {
-    const b = e, c = Q(), m = a, C = D(), x = D(), p = (l, g) => {
-      m("toggle-drawer", l, g);
-    }, y = () => {
-      C.value?.headerClose();
-    }, T = () => {
-      for (let l = 0; l < x.value.length; l++)
-        x.value[l].closeCollapse();
-    }, s = (l) => {
-      const { titleBlockAsLink: g, titleBlockLink: h, titleBlockLinkTarget: k } = b;
-      g || l.preventDefault(), m("title-click", l, h, k), y(), T();
-    }, d = (l, g) => {
-      const { menuItemAsLink: h } = b;
-      h || l.preventDefault(), m("menu-click", l, g), y(), T();
-    }, i = (l, g, h) => {
-      m("collapse-click", l, g, h);
-    }, f = O(() => {
-      const { titleSize: l, titleColor: g } = b;
+  setup(e, { expose: L, emit: T }) {
+    const k = e, g = P(), C = T, f = H(), c = H(), x = (l, u) => {
+      C("toggle-drawer", l, u);
+    }, v = () => {
+      f.value?.headerClose();
+    }, b = () => {
+      for (let l = 0; l < c.value.length; l++)
+        c.value[l].closeCollapse();
+    }, a = (l) => {
+      const { titleBlockAsLink: u, titleBlockLink: h, titleBlockLinkTarget: B } = k;
+      u || l.preventDefault(), C("title-click", l, h, B), v(), b();
+    }, s = (l, u) => {
+      const { menuItemAsLink: h } = k;
+      h || l.preventDefault(), C("menu-click", l, u), v(), b();
+    }, n = (l, u, h) => {
+      C("collapse-click", l, u, h);
+    }, m = S(() => {
+      const { titleSize: l, titleColor: u } = k;
       return [
-        r("H3", l),
-        r("TEXTCOLOR", g)
+        t.h3Variant({ size: l }),
+        t.textColorVariant({ color: u })
       ].join(" ");
-    }), v = (l) => {
-      const g = l;
-      return typeof g.children > "u" ? !1 : g.children.length > 0;
+    }), i = (l) => {
+      const u = l;
+      return typeof u.children > "u" ? !1 : u.children.length > 0;
     };
-    return t({
-      headerClose: y
-    }), (l, g) => (n(), V(w(ne), {
+    return L({
+      headerClose: v
+    }), (l, u) => (r(), V(w(te), {
       "bg-color": e.bgColor,
       "drawer-btn-color": e.drawerBtnColor,
-      "drawer-btn-border": e.drawerBtnBorder,
+      "drawer-btn-border": e.showDrawerBorder,
       "header-width": e.headerWidth,
-      onToggleDrawer: p,
+      onToggleDrawer: x,
       ref_key: "componentRef",
-      ref: C
+      ref: f
     }, {
-      default: R(() => [
-        $(l.$slots, "default")
+      default: I(() => [
+        E(l.$slots, "default")
       ]),
-      content: R(() => [
+      content: I(() => [
         o("div", null, [
-          o("div", et, [
+          o("div", Se, [
             o("a", {
               href: e.titleBlockLink,
               target: e.titleBlockLinkTarget,
-              onClick: s
+              onClick: a
             }, [
               o("img", {
                 src: e.logo,
                 alt: e.logoAlt,
                 class: "h-full inline-block max-h-xl"
-              }, null, 8, lt)
-            ], 8, tt)
+              }, null, 8, De)
+            ], 8, Me)
           ]),
           o("div", null, [
             o("a", {
               href: e.titleBlockLink,
               target: e.titleBlockLinkTarget,
-              onClick: s
+              onClick: a
             }, [
               o("h3", {
-                class: B([f.value, "text-center mb-md"]),
+                class: y([m.value, "text-center mb-md"]),
                 innerHTML: e.title
-              }, null, 10, at)
-            ], 8, rt)
+              }, null, 10, je)
+            ], 8, Ne)
           ]),
-          o("ul", st, [
-            (n(!0), u(N, null, X(e.menuItems, (h, k) => (n(), u("li", {
-              key: `menu-${k}`
-            }, [
-              v(h) ? (n(), V(K, {
-                key: 1,
-                ref_for: !0,
-                ref_key: "collapseRef",
-                ref: x,
-                "nav-id": h.title,
-                "nav-location": "desktop",
-                "nav-accordion-group": e.title,
-                "menu-item": h,
-                "as-link": e.menuItemAsLink,
-                "text-color": e.menuTextColor,
-                "text-size": e.menuTextSize,
-                "font-bold": e.menuTextBold,
-                "d-hl": e.displayHighlight,
-                "hl-color": e.highlightColor,
-                onChildClick: d,
-                onLabelClick: i
-              }, null, 8, ["nav-id", "nav-accordion-group", "menu-item", "as-link", "text-color", "text-size", "font-bold", "d-hl", "hl-color"])) : (n(), V(q, {
-                key: 0,
-                "menu-item": h,
-                "as-link": e.menuItemAsLink,
-                "text-color": e.menuTextColor,
-                "text-size": e.menuTextSize,
-                "font-bold": e.menuTextBold,
-                "d-hl": e.displayHighlight,
-                "hl-color": e.highlightColor,
-                onMenuClick: d
-              }, null, 8, ["menu-item", "as-link", "text-color", "text-size", "font-bold", "d-hl", "hl-color"]))
-            ]))), 128))
-          ])
+          D(w(W), null, {
+            default: I(() => [
+              o("ul", Re, [
+                (r(!0), d(N, null, j(e.menuItems, (h, B) => (r(), d("li", {
+                  key: `menu-${B}`
+                }, [
+                  i(h) ? (r(), V(q, {
+                    key: 1,
+                    ref_for: !0,
+                    ref_key: "collapseRef",
+                    ref: c,
+                    "nav-id": h.title,
+                    "nav-location": "desktop",
+                    "menu-item": h,
+                    "as-link": e.menuItemAsLink,
+                    "text-color": e.menuTextColor,
+                    "text-size": e.menuTextSize,
+                    "font-bold": e.menuTextBold,
+                    "d-hl": e.showHighlight,
+                    "hl-color": e.highlightColor,
+                    onChildClick: s,
+                    onLabelClick: n
+                  }, null, 8, ["nav-id", "menu-item", "as-link", "text-color", "text-size", "font-bold", "d-hl", "hl-color"])) : (r(), V(J, {
+                    key: 0,
+                    "menu-item": h,
+                    "as-link": e.menuItemAsLink,
+                    "text-color": e.menuTextColor,
+                    "text-size": e.menuTextSize,
+                    "font-bold": e.menuTextBold,
+                    "d-hl": e.showHighlight,
+                    "hl-color": e.highlightColor,
+                    onMenuClick: s
+                  }, null, 8, ["menu-item", "as-link", "text-color", "text-size", "font-bold", "d-hl", "hl-color"]))
+                ]))), 128))
+              ])
+            ]),
+            _: 1
+          })
         ])
       ]),
-      "content-bottom": R(() => [
-        c["content-bottom"] ? (n(), u("div", it, [
-          $(l.$slots, "content-bottom")
-        ])) : A("", !0)
+      "content-bottom": I(() => [
+        g["content-bottom"] ? (r(), d("div", Ke, [
+          E(l.$slots, "content-bottom")
+        ])) : $("", !0)
       ]),
-      "mobile-content": R(({ headerClose: h }) => [
-        o("div", ot, [
+      "mobile-content": I(({ headerClose: h }) => [
+        o("div", Oe, [
           o("div", null, [
-            o("div", nt, [
+            o("div", Ee, [
               o("a", {
                 href: e.titleBlockLink,
                 target: e.titleBlockLinkTarget,
-                onClick: s
+                onClick: a
               }, [
                 o("img", {
                   src: e.logo,
                   alt: e.logoAlt,
                   class: "h-full inline-block max-h-xl"
-                }, null, 8, ct)
-              ], 8, dt)
+                }, null, 8, Fe)
+              ], 8, We)
             ]),
             o("div", null, [
               o("a", {
                 href: e.titleBlockLink,
                 target: e.titleBlockLinkTarget,
-                onClick: s
+                onClick: a
               }, [
                 o("h3", {
-                  class: B([f.value, "text-center mb-md"]),
+                  class: y([m.value, "text-center mb-md"]),
                   innerHTML: e.title
-                }, null, 10, ht)
-              ], 8, gt)
+                }, null, 10, Ue)
+              ], 8, Ge)
             ]),
-            o("ul", ut, [
-              (n(!0), u(N, null, X(e.menuItems, (k, I) => (n(), u("li", {
-                key: `menu-${I}`
-              }, [
-                v(k) ? (n(), V(K, {
-                  key: 1,
-                  "nav-id": k.title,
-                  "nav-location": "mobile",
-                  "nav-accordion-group": e.title,
-                  "menu-item": k,
-                  "as-link": e.menuItemAsLink,
-                  "text-color": e.menuTextColor,
-                  "text-size": e.menuTextSize,
-                  "font-bold": e.menuTextBold,
-                  "d-hl": e.displayHighlight,
-                  "hl-color": e.highlightColor,
-                  onChildClick: d,
-                  onLabelClick: i
-                }, null, 8, ["nav-id", "nav-accordion-group", "menu-item", "as-link", "text-color", "text-size", "font-bold", "d-hl", "hl-color"])) : (n(), V(q, {
-                  key: 0,
-                  "menu-item": k,
-                  "as-link": e.menuItemAsLink,
-                  "text-color": e.menuTextColor,
-                  "text-size": e.menuTextSize,
-                  "font-bold": e.menuTextBold,
-                  "d-hl": e.displayHighlight,
-                  "hl-color": e.highlightColor,
-                  onMenuClick: d
-                }, null, 8, ["menu-item", "as-link", "text-color", "text-size", "font-bold", "d-hl", "hl-color"]))
-              ]))), 128))
-            ])
+            D(w(W), null, {
+              default: I(() => [
+                o("ul", qe, [
+                  (r(!0), d(N, null, j(e.menuItems, (B, z) => (r(), d("li", {
+                    key: `menu-${z}`
+                  }, [
+                    i(B) ? (r(), V(q, {
+                      key: 1,
+                      "nav-id": B.title,
+                      "nav-location": "mobile",
+                      "menu-item": B,
+                      "as-link": e.menuItemAsLink,
+                      "text-color": e.menuTextColor,
+                      "text-size": e.menuTextSize,
+                      "font-bold": e.menuTextBold,
+                      "d-hl": e.showHighlight,
+                      "hl-color": e.highlightColor,
+                      onChildClick: s,
+                      onLabelClick: n
+                    }, null, 8, ["nav-id", "menu-item", "as-link", "text-color", "text-size", "font-bold", "d-hl", "hl-color"])) : (r(), V(J, {
+                      key: 0,
+                      "menu-item": B,
+                      "as-link": e.menuItemAsLink,
+                      "text-color": e.menuTextColor,
+                      "text-size": e.menuTextSize,
+                      "font-bold": e.menuTextBold,
+                      "d-hl": e.showHighlight,
+                      "hl-color": e.highlightColor,
+                      onMenuClick: s
+                    }, null, 8, ["menu-item", "as-link", "text-color", "text-size", "font-bold", "d-hl", "hl-color"]))
+                  ]))), 128))
+                ])
+              ]),
+              _: 1
+            })
           ]),
-          c["mobile-bottom"] ? (n(), u("div", bt, [
-            $(l.$slots, "mobile-bottom", { headerClose: h })
-          ])) : A("", !0)
+          g["mobile-bottom"] ? (r(), d("div", Je, [
+            E(l.$slots, "mobile-bottom", { headerClose: h })
+          ])) : $("", !0)
         ])
       ]),
       _: 3
@@ -2229,6 +780,6 @@ const me = (e, t) => {
   }
 });
 export {
-  kt as MclHeaderA,
-  pt as MclHeaderB
+  Xe as MclHeaderA,
+  Ye as MclHeaderB
 };