@bobbykim/mcl-collapse 0.8.8 → 0.9.0

package/dist/mcl-collapse.js

@@ -1,1460 +1,12 @@
-import { defineComponent as B, computed as f, h as W, ref as O, useSlots as V, watch as A, openBlock as b, createElementBlock as p, normalizeClass as c, withDirectives as v, unref as d, createElementVNode as x, toDisplayString as L, withModifiers as N, renderSlot as k, createCommentVNode as H, createVNode as E, withCtx as I } from "vue";
-import a, { Collapse as D } from "@bobbykim/manguito-theme";
-class F {
-  // 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 X {
-  // Border width class
-  borderWidth = {
-    1: "border-[1px]",
-    2: "border-[2px]",
-    3: "border-[3px]",
-    4: "border-[4px]",
-    5: "border-[5px]",
-    6: "border-[6px]",
-    7: "border-[7px]",
-    8: "border-[8px]",
-    9: "border-[9px]",
-    10: "border-[10px]",
-    11: "border-[11px]",
-    12: "border-[12px]"
-  };
-  borderXWidth = {
-    1: "border-x-[1px]",
-    2: "border-x-[2px]",
-    3: "border-x-[3px]",
-    4: "border-x-[4px]",
-    5: "border-x-[5px]",
-    6: "border-x-[6px]",
-    7: "border-x-[7px]",
-    8: "border-x-[8px]",
-    9: "border-x-[9px]",
-    10: "border-x-[10px]",
-    11: "border-x-[11px]",
-    12: "border-x-[12px]"
-  };
-  borderYWidth = {
-    1: "border-y-[1px]",
-    2: "border-y-[2px]",
-    3: "border-y-[3px]",
-    4: "border-y-[4px]",
-    5: "border-y-[5px]",
-    6: "border-y-[6px]",
-    7: "border-y-[7px]",
-    8: "border-y-[8px]",
-    9: "border-y-[9px]",
-    10: "border-y-[10px]",
-    11: "border-y-[11px]",
-    12: "border-y-[12px]"
-  };
-  borderTopWidth = {
-    1: "border-t-[1px]",
-    2: "border-t-[2px]",
-    3: "border-t-[3px]",
-    4: "border-t-[4px]",
-    5: "border-t-[5px]",
-    6: "border-t-[6px]",
-    7: "border-t-[7px]",
-    8: "border-t-[8px]",
-    9: "border-t-[9px]",
-    10: "border-t-[10px]",
-    11: "border-t-[11px]",
-    12: "border-t-[12px]"
-  };
-  borderBottomWidth = {
-    1: "border-b-[1px]",
-    2: "border-b-[2px]",
-    3: "border-b-[3px]",
-    4: "border-b-[4px]",
-    5: "border-b-[5px]",
-    6: "border-b-[6px]",
-    7: "border-b-[7px]",
-    8: "border-b-[8px]",
-    9: "border-b-[9px]",
-    10: "border-b-[10px]",
-    11: "border-b-[11px]",
-    12: "border-b-[12px]"
-  };
-  borderLeftWidth = {
-    1: "border-l-[1px]",
-    2: "border-l-[2px]",
-    3: "border-l-[3px]",
-    4: "border-l-[4px]",
-    5: "border-l-[5px]",
-    6: "border-l-[6px]",
-    7: "border-l-[7px]",
-    8: "border-l-[8px]",
-    9: "border-l-[9px]",
-    10: "border-l-[10px]",
-    11: "border-l-[11px]",
-    12: "border-l-[12px]"
-  };
-  borderRightWidth = {
-    1: "border-r-[1px]",
-    2: "border-r-[2px]",
-    3: "border-r-[3px]",
-    4: "border-r-[4px]",
-    5: "border-r-[5px]",
-    6: "border-r-[6px]",
-    7: "border-r-[7px]",
-    8: "border-r-[8px]",
-    9: "border-r-[9px]",
-    10: "border-r-[10px]",
-    11: "border-r-[11px]",
-    12: "border-r-[12px]"
-  };
-}
-class M {
-  // bg color class
-  bgColor = {
-    primary: "bg-primary",
-    secondary: "bg-secondary",
-    success: "bg-success",
-    danger: "bg-danger",
-    info: "bg-info",
-    warning: "bg-warning",
-    "light-1": "bg-light-1",
-    "light-2": "bg-light-2",
-    "light-3": "bg-light-3",
-    "light-4": "bg-light-4",
-    "dark-1": "bg-dark-1",
-    "dark-2": "bg-dark-2",
-    "dark-3": "bg-dark-3",
-    "dark-4": "bg-dark-4",
-    black: "bg-black",
-    white: "bg-white",
-    transparent: "bg-transparent"
-  };
-  // hover: bg color class
-  hoverBgColor = {
-    primary: "hover:bg-primary",
-    secondary: "hover:bg-secondary",
-    success: "hover:bg-success",
-    danger: "hover:bg-danger",
-    info: "hover:bg-info",
-    warning: "hover:bg-warning",
-    "light-1": "hover:bg-light-1",
-    "light-2": "hover:bg-light-2",
-    "light-3": "hover:bg-light-3",
-    "light-4": "hover:bg-light-4",
-    "dark-1": "hover:bg-dark-1",
-    "dark-2": "hover:bg-dark-2",
-    "dark-3": "hover:bg-dark-3",
-    "dark-4": "hover:bg-dark-4",
-    black: "hover:bg-black",
-    white: "hover:bg-white",
-    transparent: "hover:bg-transparent"
-  };
-  // focus: bg color class
-  focusBgColor = {
-    primary: "focus:bg-primary",
-    secondary: "focus:bg-secondary",
-    success: "focus:bg-success",
-    danger: "focus:bg-danger",
-    info: "focus:bg-info",
-    warning: "focus:bg-warning",
-    "light-1": "focus:bg-light-1",
-    "light-2": "focus:bg-light-2",
-    "light-3": "focus:bg-light-3",
-    "light-4": "focus:bg-light-4",
-    "dark-1": "focus:bg-dark-1",
-    "dark-2": "focus:bg-dark-2",
-    "dark-3": "focus:bg-dark-3",
-    "dark-4": "focus:bg-dark-4",
-    black: "focus:bg-black",
-    white: "focus:bg-white",
-    transparent: "focus:bg-transparent"
-  };
-  // ::before bg color class
-  beforeBgColor = {
-    primary: "before:bg-primary",
-    secondary: "before:bg-secondary",
-    success: "before:bg-success",
-    danger: "before:bg-danger",
-    info: "before:bg-info",
-    warning: "before:bg-warning",
-    "light-1": "before:bg-light-1",
-    "light-2": "before:bg-light-2",
-    "light-3": "before:bg-light-3",
-    "light-4": "before:bg-light-4",
-    "dark-1": "before:bg-dark-1",
-    "dark-2": "before:bg-dark-2",
-    "dark-3": "before:bg-dark-3",
-    "dark-4": "before:bg-dark-4",
-    black: "before:bg-black",
-    white: "before:bg-white",
-    transparent: "before:bg-transparent"
-  };
-  // ::after bg color class
-  afterBgColor = {
-    primary: "after:bg-primary",
-    secondary: "after:bg-secondary",
-    success: "after:bg-success",
-    danger: "after:bg-danger",
-    info: "after:bg-info",
-    warning: "after:bg-warning",
-    "light-1": "after:bg-light-1",
-    "light-2": "after:bg-light-2",
-    "light-3": "after:bg-light-3",
-    "light-4": "after:bg-light-4",
-    "dark-1": "after:bg-dark-1",
-    "dark-2": "after:bg-dark-2",
-    "dark-3": "after:bg-dark-3",
-    "dark-4": "after:bg-dark-4",
-    black: "after:bg-black",
-    white: "after:bg-white",
-    transparent: "after:bg-transparent"
-  };
-  // active:bg color class
-  bgActiveColor = {
-    primary: "active:bg-primary",
-    secondary: "active:bg-secondary",
-    success: "active:bg-success",
-    danger: "active:bg-danger",
-    info: "active:bg-info",
-    warning: "active:bg-warning",
-    "light-1": "active:bg-light-1",
-    "light-2": "active:bg-light-2",
-    "light-3": "active:bg-light-3",
-    "light-4": "active:bg-light-4",
-    "dark-1": "active:bg-dark-1",
-    "dark-2": "active:bg-dark-2",
-    "dark-3": "active:bg-dark-3",
-    "dark-4": "active:bg-dark-4",
-    black: "active:bg-black",
-    white: "active:bg-white",
-    transparent: "active:bg-transparent"
-  };
-  // text color class
-  textColor = {
-    primary: "text-primary",
-    secondary: "text-secondary",
-    success: "text-success",
-    danger: "text-danger",
-    info: "text-info",
-    warning: "text-warning",
-    "light-1": "text-light-1",
-    "light-2": "text-light-2",
-    "light-3": "text-light-3",
-    "light-4": "text-light-4",
-    "dark-1": "text-dark-1",
-    "dark-2": "text-dark-2",
-    "dark-3": "text-dark-3",
-    "dark-4": "text-dark-4",
-    black: "text-black",
-    white: "text-white",
-    transparent: "text-transparent"
-  };
-  // hover text color class
-  hoverTextColor = {
-    primary: "hover:text-primary",
-    secondary: "hover:text-secondary",
-    success: "hover:text-success",
-    danger: "hover:text-danger",
-    info: "hover:text-info",
-    warning: "hover:text-warning",
-    "light-1": "hover:text-light-1",
-    "light-2": "hover:text-light-2",
-    "light-3": "hover:text-light-3",
-    "light-4": "hover:text-light-4",
-    "dark-1": "hover:text-dark-1",
-    "dark-2": "hover:text-dark-2",
-    "dark-3": "hover:text-dark-3",
-    "dark-4": "hover:text-dark-4",
-    black: "hover:text-black",
-    white: "hover:text-white",
-    transparent: "hover:text-transparent"
-  };
-  // focus text color class
-  focusTextColor = {
-    primary: "focus:text-primary",
-    secondary: "focus:text-secondary",
-    success: "focus:text-success",
-    danger: "focus:text-danger",
-    info: "focus:text-info",
-    warning: "focus:text-warning",
-    "light-1": "focus:text-light-1",
-    "light-2": "focus:text-light-2",
-    "light-3": "focus:text-light-3",
-    "light-4": "focus:text-light-4",
-    "dark-1": "focus:text-dark-1",
-    "dark-2": "focus:text-dark-2",
-    "dark-3": "focus:text-dark-3",
-    "dark-4": "focus:text-dark-4",
-    black: "focus:text-black",
-    white: "focus:text-white",
-    transparent: "focus:text-transparent"
-  };
-  // disabled text color class
-  disabledTextColor = {
-    primary: "disabled:text-primary",
-    secondary: "disabled:text-secondary",
-    success: "disabled:text-success",
-    danger: "disabled:text-danger",
-    info: "disabled:text-info",
-    warning: "disabled:text-warning",
-    "light-1": "disabled:text-light-1",
-    "light-2": "disabled:text-light-2",
-    "light-3": "disabled:text-light-3",
-    "light-4": "disabled:text-light-4",
-    "dark-1": "disabled:text-dark-1",
-    "dark-2": "disabled:text-dark-2",
-    "dark-3": "disabled:text-dark-3",
-    "dark-4": "disabled:text-dark-4",
-    black: "disabled:text-black",
-    white: "disabled:text-white",
-    transparent: "disabled:text-transparent"
-  };
-  // SVG fill color class
-  svgFillColor = {
-    primary: "fill-primary",
-    secondary: "fill-secondary",
-    success: "fill-success",
-    danger: "fill-danger",
-    info: "fill-info",
-    warning: "fill-warning",
-    "light-1": "fill-light-1",
-    "light-2": "fill-light-2",
-    "light-3": "fill-light-3",
-    "light-4": "fill-light-4",
-    "dark-1": "fill-dark-1",
-    "dark-2": "fill-dark-2",
-    "dark-3": "fill-dark-3",
-    "dark-4": "fill-dark-4",
-    black: "fill-black",
-    white: "fill-white",
-    transparent: "fill-transparent"
-  };
-  // ring color class
-  ringColor = {
-    primary: "ring-primary",
-    secondary: "ring-secondary",
-    success: "ring-success",
-    danger: "ring-danger",
-    info: "ring-info",
-    warning: "ring-warning",
-    "light-1": "ring-light-1",
-    "light-2": "ring-light-2",
-    "light-3": "ring-light-3",
-    "light-4": "ring-light-4",
-    "dark-1": "ring-dark-1",
-    "dark-2": "ring-dark-2",
-    "dark-3": "ring-dark-3",
-    "dark-4": "ring-dark-4",
-    black: "ring-black",
-    white: "ring-white",
-    transparent: "ring-transparent"
-  };
-  // focus:ring color class
-  ringFocusColor = {
-    primary: "focus:ring-primary",
-    secondary: "focus:ring-secondary",
-    success: "focus:ring-success",
-    danger: "focus:ring-danger",
-    info: "focus:ring-info",
-    warning: "focus:ring-warning",
-    "light-1": "focus:ring-light-1",
-    "light-2": "focus:ring-light-2",
-    "light-3": "focus:ring-light-3",
-    "light-4": "focus:ring-light-4",
-    "dark-1": "focus:ring-dark-1",
-    "dark-2": "focus:ring-dark-2",
-    "dark-3": "focus:ring-dark-3",
-    "dark-4": "focus:ring-dark-4",
-    black: "focus:ring-black",
-    white: "focus:ring-white",
-    transparent: "focus:ring-transparent"
-  };
-  // active:ring color class
-  ringActiveColor = {
-    primary: "active:ring-primary",
-    secondary: "active:ring-secondary",
-    success: "active:ring-success",
-    danger: "active:ring-danger",
-    info: "active:ring-info",
-    warning: "active:ring-warning",
-    "light-1": "active:ring-light-1",
-    "light-2": "active:ring-light-2",
-    "light-3": "active:ring-light-3",
-    "light-4": "active:ring-light-4",
-    "dark-1": "active:ring-dark-1",
-    "dark-2": "active:ring-dark-2",
-    "dark-3": "active:ring-dark-3",
-    "dark-4": "active:ring-dark-4",
-    black: "active:ring-black",
-    white: "active:ring-white",
-    transparent: "active:ring-transparent"
-  };
-  // ring-offset color class
-  ringOffsetColor = {
-    primary: "ring-offset-primary",
-    secondary: "ring-offset-secondary",
-    success: "ring-offset-success",
-    danger: "ring-offset-danger",
-    info: "ring-offset-info",
-    warning: "ring-offset-warning",
-    "light-1": "ring-offset-light-1",
-    "light-2": "ring-offset-light-2",
-    "light-3": "ring-offset-light-3",
-    "light-4": "ring-offset-light-4",
-    "dark-1": "ring-offset-dark-1",
-    "dark-2": "ring-offset-dark-2",
-    "dark-3": "ring-offset-dark-3",
-    "dark-4": "ring-offset-dark-4",
-    black: "ring-offset-black",
-    white: "ring-offset-white",
-    transparent: "ring-offset-transparent"
-  };
-  // outline class
-  outlineColor = {
-    primary: "outline-primary",
-    secondary: "outline-secondary",
-    success: "outline-success",
-    danger: "outline-danger",
-    info: "outline-info",
-    warning: "outline-warning",
-    "light-1": "outline-light-1",
-    "light-2": "outline-light-2",
-    "light-3": "outline-light-3",
-    "light-4": "outline-light-4",
-    "dark-1": "outline-dark-1",
-    "dark-2": "outline-dark-2",
-    "dark-3": "outline-dark-3",
-    "dark-4": "outline-dark-4",
-    black: "outline-black",
-    white: "outline-white",
-    transparent: "outline-transparent"
-  };
-  // focus:outline class
-  focusOutlineColor = {
-    primary: "focus:outline-primary",
-    secondary: "focus:outline-secondary",
-    success: "focus:outline-success",
-    danger: "focus:outline-danger",
-    info: "focus:outline-info",
-    warning: "focus:outline-warning",
-    "light-1": "focus:outline-light-1",
-    "light-2": "focus:outline-light-2",
-    "light-3": "focus:outline-light-3",
-    "light-4": "focus:outline-light-4",
-    "dark-1": "focus:outline-dark-1",
-    "dark-2": "focus:outline-dark-2",
-    "dark-3": "focus:outline-dark-3",
-    "dark-4": "focus:outline-dark-4",
-    black: "focus:outline-black",
-    white: "focus:outline-white",
-    transparent: "focus:outline-transparent"
-  };
-  // active:outline class
-  activeOutlineColor = {
-    primary: "active:outline-primary",
-    secondary: "active:outline-secondary",
-    success: "active:outline-success",
-    danger: "active:outline-danger",
-    info: "active:outline-info",
-    warning: "active:outline-warning",
-    "light-1": "active:outline-light-1",
-    "light-2": "active:outline-light-2",
-    "light-3": "active:outline-light-3",
-    "light-4": "active:outline-light-4",
-    "dark-1": "active:outline-dark-1",
-    "dark-2": "active:outline-dark-2",
-    "dark-3": "active:outline-dark-3",
-    "dark-4": "active:outline-dark-4",
-    black: "active:outline-black",
-    white: "active:outline-white",
-    transparent: "active:outline-transparent"
-  };
-  // btn color class
-  btnColor = {
-    primary: "btn-primary",
-    secondary: "btn-secondary",
-    success: "btn-success",
-    danger: "btn-danger",
-    info: "btn-info",
-    warning: "btn-warning",
-    "light-1": "btn-light-1",
-    "light-2": "btn-light-2",
-    "light-3": "btn-light-3",
-    "light-4": "btn-light-4",
-    "dark-1": "btn-dark-1",
-    "dark-2": "btn-dark-2",
-    "dark-3": "btn-dark-3",
-    "dark-4": "btn-dark-4",
-    black: "btn-black",
-    white: "btn-white",
-    transparent: "btn-transparent"
-  };
-  // list color class
-  listColor = {
-    primary: "mcl-list-primary",
-    secondary: "mcl-list-secondary",
-    success: "mcl-list-success",
-    danger: "mcl-list-danger",
-    info: "mcl-list-info",
-    warning: "mcl-list-warning",
-    "light-1": "mcl-list-light-1",
-    "light-2": "mcl-list-light-2",
-    "light-3": "mcl-list-light-3",
-    "light-4": "mcl-list-light-4",
-    "dark-1": "mcl-list-dark-1",
-    "dark-2": "mcl-list-dark-2",
-    "dark-3": "mcl-list-dark-3",
-    "dark-4": "mcl-list-dark-4",
-    black: "mcl-list-black",
-    white: "mcl-list-white",
-    transparent: "mcl-list-transparent"
-  };
-  // border color classes
-  borderColor = {
-    primary: "border-primary",
-    secondary: "border-secondary",
-    success: "border-success",
-    danger: "border-danger",
-    info: "border-info",
-    warning: "border-warning",
-    "light-1": "border-light-1",
-    "light-2": "border-light-2",
-    "light-3": "border-light-3",
-    "light-4": "border-light-4",
-    "dark-1": "border-dark-1",
-    "dark-2": "border-dark-2",
-    "dark-3": "border-dark-3",
-    "dark-4": "border-dark-4",
-    black: "border-black",
-    white: "border-white",
-    transparent: "border-transparent"
-  };
-  borderXColor = {
-    primary: "border-x-primary",
-    secondary: "border-x-secondary",
-    success: "border-x-success",
-    danger: "border-x-danger",
-    info: "border-x-info",
-    warning: "border-x-warning",
-    "light-1": "border-x-light-1",
-    "light-2": "border-x-light-2",
-    "light-3": "border-x-light-3",
-    "light-4": "border-x-light-4",
-    "dark-1": "border-x-dark-1",
-    "dark-2": "border-x-dark-2",
-    "dark-3": "border-x-dark-3",
-    "dark-4": "border-x-dark-4",
-    black: "border-x-black",
-    white: "border-x-white",
-    transparent: "border-x-transparent"
-  };
-  borderYColor = {
-    primary: "border-y-primary",
-    secondary: "border-y-secondary",
-    success: "border-y-success",
-    danger: "border-y-danger",
-    info: "border-y-info",
-    warning: "border-y-warning",
-    "light-1": "border-y-light-1",
-    "light-2": "border-y-light-2",
-    "light-3": "border-y-light-3",
-    "light-4": "border-y-light-4",
-    "dark-1": "border-y-dark-1",
-    "dark-2": "border-y-dark-2",
-    "dark-3": "border-y-dark-3",
-    "dark-4": "border-y-dark-4",
-    black: "border-y-black",
-    white: "border-y-white",
-    transparent: "border-y-transparent"
-  };
-  borderTopColor = {
-    primary: "border-t-primary",
-    secondary: "border-t-secondary",
-    success: "border-t-success",
-    danger: "border-t-danger",
-    info: "border-t-info",
-    warning: "border-t-warning",
-    "light-1": "border-t-light-1",
-    "light-2": "border-t-light-2",
-    "light-3": "border-t-light-3",
-    "light-4": "border-t-light-4",
-    "dark-1": "border-t-dark-1",
-    "dark-2": "border-t-dark-2",
-    "dark-3": "border-t-dark-3",
-    "dark-4": "border-t-dark-4",
-    black: "border-t-black",
-    white: "border-t-white",
-    transparent: "border-t-transparent"
-  };
-  borderBottomColor = {
-    primary: "border-b-primary",
-    secondary: "border-b-secondary",
-    success: "border-b-success",
-    danger: "border-b-danger",
-    info: "border-b-info",
-    warning: "border-b-warning",
-    "light-1": "border-b-light-1",
-    "light-2": "border-b-light-2",
-    "light-3": "border-b-light-3",
-    "light-4": "border-b-light-4",
-    "dark-1": "border-b-dark-1",
-    "dark-2": "border-b-dark-2",
-    "dark-3": "border-b-dark-3",
-    "dark-4": "border-b-dark-4",
-    black: "border-b-black",
-    white: "border-b-white",
-    transparent: "border-b-transparent"
-  };
-  borderLeftColor = {
-    primary: "border-l-primary",
-    secondary: "border-l-secondary",
-    success: "border-l-success",
-    danger: "border-l-danger",
-    info: "border-l-info",
-    warning: "border-l-warning",
-    "light-1": "border-l-light-1",
-    "light-2": "border-l-light-2",
-    "light-3": "border-l-light-3",
-    "light-4": "border-l-light-4",
-    "dark-1": "border-l-dark-1",
-    "dark-2": "border-l-dark-2",
-    "dark-3": "border-l-dark-3",
-    "dark-4": "border-l-dark-4",
-    black: "border-l-black",
-    white: "border-l-white",
-    transparent: "border-l-transparent"
-  };
-  borderRightColor = {
-    primary: "border-r-primary",
-    secondary: "border-r-secondary",
-    success: "border-r-success",
-    danger: "border-r-danger",
-    info: "border-r-info",
-    warning: "border-r-warning",
-    "light-1": "border-r-light-1",
-    "light-2": "border-r-light-2",
-    "light-3": "border-r-light-3",
-    "light-4": "border-r-light-4",
-    "dark-1": "border-r-dark-1",
-    "dark-2": "border-r-dark-2",
-    "dark-3": "border-r-dark-3",
-    "dark-4": "border-r-dark-4",
-    black: "border-r-black",
-    white: "border-r-white",
-    transparent: "border-r-transparent"
-  };
-}
-class P {
-  // 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 Y = 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 z {
-  // 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 $ = class {
-  classType;
-  constructor(r) {
-    this.classType = r;
-  }
-  validateColorType(r) {
-    return typeof r != "string" || !/(primary|secondary|success|info|warning|danger|light-1|light-2|light-3|light-4|dark-1|dark-2|dark-3|dark-4|black|white|transparent)/.test(r) ? !1 : u.colorType.includes(this.classType);
-  }
-  validateSpaceType(r) {
-    return typeof r != "string" || !/(0|3xs|2xs|xs|sm|md|lg|xl|2xl|3xl)/.test(r) ? !1 : u.spacingType.includes(this.classType);
-  }
-  validateHeadingTextSizeType(r) {
-    return typeof r != "string" || !/(sm|md|lg|xl)/.test(r) ? !1 : u.headingSizeType.includes(
-      this.classType
-    );
-  }
-  validateBodyTextSizeType(r) {
-    return typeof r != "string" || !/(xs|sm|md|lg|xl)/.test(r) ? !1 : u.textType.includes(this.classType);
-  }
-  validateFontWeightType(r) {
-    return typeof r != "string" || !/(light|normal|bold)/.test(r) ? !1 : u.fontWeightType.includes(
-      this.classType
-    );
-  }
-  validateOpacityType(r) {
-    return typeof r != "number" || !/\b(0|[1-9]0|100)\b/.test(r.toString()) ? !1 : u.scaleType.includes(this.classType);
-  }
-  validateRangeType(r) {
-    return typeof r != "number" || !/\b([1-9]|1[0-2])\b/.test(r.toString()) ? !1 : u.borderWidthType.includes(
-      this.classType
-    );
-  }
-  validateAlignment(r) {
-    return typeof r != "string" || !/(left|center|right)/.test(r) ? !1 : u.textAlignType.includes(
-      this.classType
-    );
-  }
-};
-const u = {
-  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 U {
-  classType;
-  classValue;
-  colorClass;
-  headingSizeClass;
-  borderWidthClass;
-  opacityClass;
-  spacingClass;
-  textClass;
-  validator;
-  constructor(r, e) {
-    this.classType = r, this.classValue = e, this.colorClass = new M(), this.headingSizeClass = new P(), this.borderWidthClass = new X(), this.opacityClass = new Y(), this.spacingClass = new z(), this.textClass = new F(), this.validator = new $(r);
-  }
-  generateClass() {
-    switch (this.classType) {
-      // case: color classes
-      case "BGCOLOR":
-        return this.getBgColorClass();
-      case "HVBGCOLOR":
-        return this.getHoverBgColorClass();
-      case "FCBGCOLOR":
-        return this.getFocusBgColorClass();
-      case "BEFOREBG":
-        return this.getBeforeBgColorClass();
-      case "AFTERBG":
-        return this.getAfterBgColorClass();
-      case "ACTIVEBG":
-        return this.getActiveBgColorClass();
-      case "TEXTCOLOR":
-        return this.getTextColorClass();
-      case "HVTEXTCOLOR":
-        return this.getHoverTextColorClass();
-      case "FCTEXTCOLOR":
-        return this.getFocusTextColorClass();
-      case "DISABLEDTEXTCOLOR":
-        return this.getDisabledTextColorClass();
-      case "SVGFILL":
-        return this.getSvgFillColorClass();
-      case "RINGCOLOR":
-        return this.getRingColorClass();
-      case "FOCUSRING":
-        return this.getFocusRingColorClass();
-      case "ACTIVERING":
-        return this.getActiveRingColorClass();
-      case "OFFSETRING":
-        return this.getRingOffsetColorClass();
-      case "OUTLINE":
-        return this.getOutlineColorClass();
-      case "FOCUSOUTLINE":
-        return this.getFocusOutlineColorClass();
-      case "ACTIVEOUTLINE":
-        return this.getActiveOutlineColorClass();
-      case "BTNCOLOR":
-        return this.getBtnColorClass();
-      case "LISTCOLOR":
-        return this.getListColorClass();
-      case "BORDER":
-        return this.getBorderColorClass();
-      case "BORDERX":
-        return this.getBorderXColorClass();
-      case "BORDERY":
-        return this.getBorderYColorClass();
-      case "BORDERT":
-        return this.getBorderTopColorClass();
-      case "BORDERB":
-        return this.getBorderBottomColorClass();
-      case "BORDERL":
-        return this.getBorderLeftColorClass();
-      case "BORDERR":
-        return this.getBorderRightColorClass();
-      // case: heading classes
-      case "H1":
-        return this.getH1Class();
-      case "H2":
-        return this.getH2Class();
-      case "H3":
-        return this.getH3Class();
-      case "H4":
-        return this.getH4Class();
-      // case: body text class
-      case "BODYTEXT":
-        return this.getBodyTextSizeClass();
-      // case: font weight class
-      case "FONTWEIGHT":
-        return this.getFontWeightClass();
-      // case: text alignment class
-      case "TEXTALIGN":
-        return this.getTextAlignClass();
-      // case: border width classes
-      case "BORDERW":
-        return this.getBorderWidthClass();
-      case "BORDERXW":
-        return this.getBorderXWidthClass();
-      case "BORDERYW":
-        return this.getBorderYWidthClass();
-      case "BORDERTW":
-        return this.getBorderTopWidthClass();
-      case "BORDERBW":
-        return this.getBorderBottomWidthClass();
-      case "BORDERLW":
-        return this.getBorderLeftWidthClass();
-      case "BORDERRW":
-        return this.getBorderRightWidthClass();
-      // case: opacity classes
-      case "OPACITY":
-        return this.getOpacityClass();
-      case "BGOPACITY":
-        return this.getBgOpacityClass();
-      case "OUTLINEOPACITY":
-        return this.getOutlineOpacityClass();
-      // case: margins
-      case "MARGIN":
-        return this.getMarginClass();
-      case "MARGINX":
-        return this.getMarginXClass();
-      case "MARGINY":
-        return this.getMarginYClass();
-      case "MARGINT":
-        return this.getMarginTopClass();
-      case "MARGINB":
-        return this.getMarginBottomClass();
-      case "MARGINL":
-        return this.getMarginLeftClass();
-      case "MARGINR":
-        return this.getMarginRightClass();
-      // case: paddings
-      case "PADDING":
-        return this.getPaddingClass();
-      case "PADDINGX":
-        return this.getPaddingXClass();
-      case "PADDINGY":
-        return this.getPaddingYClass();
-      case "PADDINGT":
-        return this.getPaddingTopClass();
-      case "PADDINGB":
-        return this.getPaddingBottomClass();
-      case "PADDINGL":
-        return this.getPaddingLeftClass();
-      case "PADDINGR":
-        return this.getPaddingRightClass();
-      // case: gap
-      case "GAP":
-        return this.getGapClass();
-      default:
-        return " ";
-    }
-  }
-  // handle color class
-  // bg color
-  getBgColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.bgColor[this.classValue] : " ";
-  }
-  getHoverBgColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.hoverBgColor[this.classValue] : " ";
-  }
-  getFocusBgColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.focusBgColor[this.classValue] : " ";
-  }
-  getBeforeBgColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.beforeBgColor[this.classValue] : " ";
-  }
-  getAfterBgColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.afterBgColor[this.classValue] : " ";
-  }
-  getActiveBgColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.bgActiveColor[this.classValue] : " ";
-  }
-  // text color
-  getTextColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.textColor[this.classValue] : " ";
-  }
-  getHoverTextColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.hoverTextColor[this.classValue] : " ";
-  }
-  getFocusTextColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.focusTextColor[this.classValue] : " ";
-  }
-  getDisabledTextColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.disabledTextColor[this.classValue] : " ";
-  }
-  // svg color
-  getSvgFillColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.svgFillColor[this.classValue] : " ";
-  }
-  // ring color
-  getRingColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.ringColor[this.classValue] : " ";
-  }
-  getFocusRingColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.ringFocusColor[this.classValue] : " ";
-  }
-  getActiveRingColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.ringActiveColor[this.classValue] : " ";
-  }
-  getRingOffsetColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.ringOffsetColor[this.classValue] : " ";
-  }
-  // outline color
-  getOutlineColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.outlineColor[this.classValue] : " ";
-  }
-  getFocusOutlineColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.focusOutlineColor[this.classValue] : " ";
-  }
-  getActiveOutlineColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.activeOutlineColor[this.classValue] : " ";
-  }
-  // btn & list
-  getBtnColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.btnColor[this.classValue] : " ";
-  }
-  getListColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.listColor[this.classValue] : " ";
-  }
-  // border color
-  getBorderColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderColor[this.classValue] : " ";
-  }
-  getBorderXColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderXColor[this.classValue] : " ";
-  }
-  getBorderYColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderYColor[this.classValue] : " ";
-  }
-  getBorderTopColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderTopColor[this.classValue] : " ";
-  }
-  getBorderBottomColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderBottomColor[this.classValue] : " ";
-  }
-  getBorderLeftColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderLeftColor[this.classValue] : " ";
-  }
-  getBorderRightColorClass() {
-    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderRightColor[this.classValue] : " ";
-  }
-  // handle heading classes
-  getH1Class() {
-    return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading1[this.classValue] : " ";
-  }
-  getH2Class() {
-    return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading2[this.classValue] : " ";
-  }
-  getH3Class() {
-    return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading3[this.classValue] : " ";
-  }
-  getH4Class() {
-    return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading4[this.classValue] : " ";
-  }
-  // handle body text size classes
-  getBodyTextSizeClass() {
-    return this.validator.validateBodyTextSizeType(this.classValue) ? this.textClass.bodyText[this.classValue] : " ";
-  }
-  // handle font weight classes
-  getFontWeightClass() {
-    return this.validator.validateFontWeightType(this.classValue) ? this.textClass.fontweight[this.classValue] : " ";
-  }
-  // handle text align classes
-  getTextAlignClass() {
-    return this.validator.validateAlignment(this.classValue) ? this.textClass.textAlign[this.classValue] : " ";
-  }
-  // handle border width class
-  getBorderWidthClass() {
-    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderWidth[this.classValue] : " ";
-  }
-  getBorderXWidthClass() {
-    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderXWidth[this.classValue] : " ";
-  }
-  getBorderYWidthClass() {
-    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderYWidth[this.classValue] : " ";
-  }
-  getBorderTopWidthClass() {
-    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderTopWidth[this.classValue] : " ";
-  }
-  getBorderBottomWidthClass() {
-    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderBottomWidth[this.classValue] : " ";
-  }
-  getBorderLeftWidthClass() {
-    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderLeftWidth[this.classValue] : " ";
-  }
-  getBorderRightWidthClass() {
-    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderRightWidth[this.classValue] : " ";
-  }
-  // handle opacity classes
-  getOpacityClass() {
-    return this.validator.validateOpacityType(this.classValue) ? this.opacityClass.opacity[this.classValue] : " ";
-  }
-  getBgOpacityClass() {
-    return this.validator.validateOpacityType(this.classValue) ? this.opacityClass.backgroundOpacity[this.classValue] : " ";
-  }
-  getOutlineOpacityClass() {
-    return this.validator.validateOpacityType(this.classValue) ? this.opacityClass.outlineOpacity[this.classValue] : " ";
-  }
-  // spacing classes
-  // margins
-  getMarginClass() {
-    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.margin[this.classValue] : " ";
-  }
-  getMarginXClass() {
-    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginX[this.classValue] : " ";
-  }
-  getMarginYClass() {
-    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginY[this.classValue] : " ";
-  }
-  getMarginTopClass() {
-    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginTop[this.classValue] : " ";
-  }
-  getMarginBottomClass() {
-    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginBottom[this.classValue] : " ";
-  }
-  getMarginLeftClass() {
-    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginLeft[this.classValue] : " ";
-  }
-  getMarginRightClass() {
-    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginRight[this.classValue] : " ";
-  }
-  // paddings
-  getPaddingClass() {
-    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.padding[this.classValue] : " ";
-  }
-  getPaddingXClass() {
-    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingX[this.classValue] : " ";
-  }
-  getPaddingYClass() {
-    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingY[this.classValue] : " ";
-  }
-  getPaddingTopClass() {
-    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingTop[this.classValue] : " ";
-  }
-  getPaddingBottomClass() {
-    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingBottom[this.classValue] : " ";
-  }
-  getPaddingLeftClass() {
-    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingLeft[this.classValue] : " ";
-  }
-  getPaddingRightClass() {
-    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingRight[this.classValue] : " ";
-  }
-  // gaps
-  getGapClass() {
-    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.gap[this.classValue] : " ";
-  }
-}
-const R = (t, r) => new U(t, r).generateClass(), w = {
-  left: "tooltip-left",
-  top: "tooltip-top",
-  bottom: "tooltip-bottom",
-  right: "tooltip-right"
-};
-B({
-  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(t) {
-    const r = "invisible opacity-0 group-hover:visible group-hover:opacity-100 z-[100] tooltip", e = f(() => [
-      R("BGCOLOR", t.color),
-      R("TEXTCOLOR", t.textColor)
-    ].join(" ")), l = f(() => ({ width: `${t.width}px` })), n = f(() => w[t.direction] || w.right), g = f(() => [
-      r,
-      n.value,
-      e.value,
-      t.customClass
-    ]);
-    return () => W("div", {
-      class: g.value,
-      role: "tooltip",
-      innerHTML: t.title,
-      style: [l.value]
-    });
-  }
-});
-const j = (t, r) => {
-  if (t.tagName === "A") {
-    const e = t.getAttribute("href");
-    return e ? e.charAt(0) === "#" ? e.substring(1) : e : null;
-  }
-  return r || null;
-}, q = (t) => t ? document.getElementById(t) : null, J = (t) => t.hasAttribute("visible"), G = (t) => {
-  const r = t.getAttribute("visible") === "true" ? "false" : "true";
-  t.setAttribute("visible", r);
-}, K = (t) => {
-  const r = `div[accordion="${t}"]`;
-  return Array.from(document.querySelectorAll(r));
-}, Q = (t, r) => {
-  K(r).forEach((e) => {
-    e.id === t.id ? G(e) : e.getAttribute("visible") === "true" && e.setAttribute("visible", "false");
-  });
-}, Z = (t) => {
-  G(t);
-}, _ = (t) => (r) => {
-  r.preventDefault();
-  const e = r.target, l = j(e, t), n = q(l);
-  if (!n) {
-    console.warn(`[v-collapse] Target element not found: ${l}`);
-    return;
-  }
-  if (!J(n)) {
-    console.warn(
-      `[v-collapse] Target element missing 'visible' attribute: ${l}`
-    );
-    return;
-  }
-  const g = n.getAttribute("accordion");
-  g ? Q(n, g) : Z(n);
-}, T = {
-  mounted(t, r) {
-    t.__HandleToggler = _(r.arg), t.addEventListener("click", t.__HandleToggler);
-  },
-  unmounted(t) {
-    t.__HandleToggler && (t.removeEventListener("click", t.__HandleToggler), delete t.__HandleToggler);
-  }
-}, tt = { class: "flex items-center justify-between" }, dt = /* @__PURE__ */ B({
+import { defineComponent as B, useSlots as V, ref as h, openBlock as C, createElementBlock as b, normalizeClass as s, createElementVNode as r, unref as a, toDisplayString as $, withModifiers as j, renderSlot as w, createCommentVNode as z, createVNode as k, withCtx as I } from "vue";
+import { generateClass as o, Collapse as A } from "@bobbykim/manguito-theme";
+const M = { class: "flex items-center justify-between" }, O = ["id", "aria-expanded", "aria-controls"], H = /* @__PURE__ */ B({
   __name: "MclCollapseA",
   props: {
     collapseId: {},
     borderColor: { default: "light-4" },
     rounded: { type: Boolean, default: !1 },
-    displayHighlight: { type: Boolean, default: !0 },
+    showHighlight: { type: Boolean, default: !0 },
     highlightColor: { default: "secondary" },
     title: {},
     titleSize: { default: "sm" },
@@ -1462,96 +14,104 @@ const j = (t, r) => {
     visible: { type: Boolean, default: !1 },
     iconColor: { default: "dark-3" },
     bgColor: { default: "white" },
-    slotBgColor: { default: "light-2" },
-    accordion: {}
+    contentBgColor: { default: "light-2" }
   },
   emits: ["collapse-open", "collapse-close"],
-  setup(t, { emit: r }) {
-    const e = t, l = O(e.visible), n = V(), g = r, C = (s) => {
-      const { title: o } = e;
-      l.value = s, g(s === !0 ? "collapse-open" : "collapse-close", s, o);
-    }, m = (s, o, y) => {
-      const h = ["border", a("BORDER", s)];
-      return o && [a("BORDERL", y)].forEach((S) => {
-        h.push(S), h.push("border-l-8");
-      }), h.join(" ");
-    }, i = (s, o) => [
-      a("H3", s),
-      a("TEXTCOLOR", o)
+  setup(e, { emit: v }) {
+    const d = e, m = V(), g = v, i = h(), c = h(d.visible), y = () => {
+      c.value = !0, g("collapse-open", !0, d.title);
+    }, x = () => {
+      c.value = !1, g("collapse-close", !1, d.title);
+    }, p = (t, l, f) => {
+      const n = ["border", o.borderColorVariant({ color: t })];
+      return l && [o.borderLeftColorVariant({ color: f })].forEach((S) => {
+        n.push(S), n.push("border-l-8");
+      }), n.join(" ");
+    }, u = (t, l) => [
+      o.h3Variant({ size: t }),
+      o.textColorVariant({ color: l })
     ].join(" ");
-    return A(
-      () => e.visible,
-      (s) => {
-        l.value = s;
-      }
-    ), (s, o) => (b(), p("div", {
-      class: c(["w-full overflow-hidden", [
-        t.rounded ? "rounded-lg" : "rounded-sm",
-        m(t.borderColor, t.displayHighlight, t.highlightColor)
+    return (t, l) => (C(), b("div", {
+      class: s(["w-full overflow-hidden", [
+        e.rounded ? "rounded-lg" : "rounded-sm",
+        p(e.borderColor, e.showHighlight, e.highlightColor)
       ]])
     }, [
-      v((b(), p("div", {
-        class: c(["py-xs px-sm cursor-pointer transition-[border] duration-500", [
-          l.value ? `border-b ${d(a)("BORDERB", t.borderColor)} ease-in` : "ease-out",
-          d(a)("BGCOLOR", t.bgColor)
+      r("div", {
+        class: s(["px-sm transition-[border] duration-500", [
+          c.value ? `border-b ${a(o).borderBottomColorVariant({ color: e.borderColor })} ease-in` : "ease-out",
+          a(o).bgColorVariant({ color: e.bgColor })
         ]])
       }, [
-        x("div", tt, [
-          x("h3", {
-            class: c(i(t.titleSize, t.titleColor))
-          }, L(t.title), 3),
-          n.tab ? (b(), p("div", {
+        r("div", M, [
+          r("button", {
+            type: "button",
+            id: `${e.collapseId}-trigger`,
+            "aria-expanded": c.value,
+            "aria-controls": e.collapseId,
+            onClick: l[0] || (l[0] = (f) => i.value?.toggle()),
+            class: "flex flex-1 cursor-pointer items-center bg-transparent text-left py-xs"
+          }, [
+            r("h3", {
+              class: s(u(e.titleSize, e.titleColor))
+            }, $(e.title), 3)
+          ], 8, O),
+          m.tab ? (C(), b("div", {
             key: 0,
-            onClick: o[0] || (o[0] = N(() => {
+            onClick: l[1] || (l[1] = j(() => {
             }, ["stop"])),
             class: "cursor-default"
           }, [
-            k(s.$slots, "tab")
-          ])) : H("", !0)
+            w(t.$slots, "tab")
+          ])) : z("", !0)
         ])
-      ], 2)), [
-        [d(T), void 0, t.collapseId]
-      ]),
-      x("div", {
-        class: c(["overflow-hidden", d(a)("BGCOLOR", t.slotBgColor)])
+      ], 2),
+      r("div", {
+        class: s(["overflow-hidden", a(o).bgColorVariant({ color: e.contentBgColor })])
       }, [
-        E(d(D), {
-          id: t.collapseId,
-          visible: t.visible,
-          "class-name": "py-sm px-xs",
-          onOpen: C,
-          onClose: C,
-          accordion: t.accordion
+        k(a(A), {
+          ref_key: "collapseRef",
+          ref: i,
+          id: e.collapseId,
+          visible: e.visible,
+          "custom-class": "py-sm px-xs",
+          role: "region",
+          "aria-labelledby": `${e.collapseId}-trigger`,
+          onOpen: y,
+          onClose: x
         }, {
           default: I(() => [
-            k(s.$slots, "content")
+            w(t.$slots, "content")
           ]),
           _: 3
-        }, 8, ["id", "visible", "accordion"])
+        }, 8, ["id", "visible", "aria-labelledby"])
       ], 2),
-      v((b(), p("div", {
-        class: c(["px-sm flex cursor-pointer items-center justify-center border-t py-1.5 transition-all duration-500", [
-          d(a)("BGCOLOR", t.bgColor),
-          d(a)("BORDERT", t.borderColor)
-        ]])
+      r("div", {
+        "aria-hidden": "true",
+        class: s(["px-sm flex cursor-pointer items-center justify-center border-t py-1.5 transition-all duration-500", [
+          a(o).bgColorVariant({ color: e.bgColor }),
+          a(o).borderTopColorVariant({ color: e.borderColor })
+        ]]),
+        onClick: l[2] || (l[2] = (f) => i.value?.toggle())
       }, [
-        (b(), p("svg", {
+        (C(), b("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           viewBox: "0 0 448 512",
-          class: c(["h-xs", [
-            l.value ? "rotate-180" : "rotate-0",
+          class: s(["h-xs", [
+            c.value ? "rotate-180" : "rotate-0",
             "transition-transform duration-300 ease-in",
-            d(a)("SVGFILL", t.iconColor)
+            a(o).svgFillColorVariant({ color: e.iconColor })
           ]])
-        }, [...o[1] || (o[1] = [
-          x("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)
+        }, [...l[3] || (l[3] = [
+          r("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)), [
-        [d(T), void 0, t.collapseId]
-      ])
+      ], 2)
     ], 2));
   }
-}), rt = { class: "ml-xs md:ml-sm lg:ml-md flex items-center justify-center" }, et = { class: "overflow-hidden" }, nt = /* @__PURE__ */ B({
+}), R = ["id", "aria-expanded", "aria-controls"], E = {
+  "aria-hidden": "true",
+  class: "ml-xs md:ml-sm lg:ml-md flex items-center justify-center"
+}, L = { class: "overflow-hidden" }, D = /* @__PURE__ */ B({
   __name: "MclCollapseB",
   props: {
     collapseId: {},
@@ -1560,82 +120,83 @@ const j = (t, r) => {
     titleSize: { default: "md" },
     borderColor: { default: "light-3" },
     bgColor: { default: "light-1" },
-    btnColor: { default: "primary" },
+    triggerBgColor: { default: "primary" },
     iconColor: { default: "light-1" },
     rounded: { type: Boolean, default: !0 },
-    displayShadow: { type: Boolean, default: !0 },
-    visible: { type: Boolean, default: !1 },
-    accordion: {}
+    showShadow: { type: Boolean, default: !0 },
+    visible: { type: Boolean, default: !1 }
   },
   emits: ["collapse-open", "collapse-close"],
-  setup(t, { emit: r }) {
-    const e = t;
+  setup(e, { emit: v }) {
+    const d = e;
     V();
-    const l = O(e.visible), n = r, g = (i) => {
-      const { title: s } = e;
-      l.value = i, n(i === !0 ? "collapse-open" : "collapse-close", i, s);
-    }, C = (i, s, o, y) => {
-      let h = [
+    const m = v, g = h(), i = h(d.visible), c = () => {
+      i.value = !0, m("collapse-open", !0, d.title);
+    }, y = () => {
+      i.value = !1, m("collapse-close", !1, d.title);
+    }, x = (u, t, l, f) => {
+      let n = [
         "border",
-        a("BORDER", i),
-        a("BGCOLOR", s)
+        o.borderColorVariant({ color: u }),
+        o.bgColorVariant({ color: t })
       ];
-      return y && h.push("shadow-md"), o ? h.push("rounded-2xl") : h.push("rounded-sm"), h.join(" ");
-    }, m = (i, s) => [
-      a("H3", i),
-      a("TEXTCOLOR", s)
+      return f && n.push("shadow-md"), l ? n.push("rounded-2xl") : n.push("rounded-sm"), n.join(" ");
+    }, p = (u, t) => [
+      o.h3Variant({ size: u }),
+      o.textColorVariant({ color: t })
     ].join(" ");
-    return A(
-      () => e.visible,
-      (i) => {
-        l.value = i;
-      }
-    ), (i, s) => (b(), p("div", {
-      class: c(["p-2xs w-full overflow-hidden", C(t.borderColor, t.bgColor, t.rounded, t.displayShadow)])
+    return (u, t) => (C(), b("div", {
+      class: s(["p-2xs w-full overflow-hidden", x(e.borderColor, e.bgColor, e.rounded, e.showShadow)])
     }, [
-      v((b(), p("div", {
-        class: c(["flex w-full cursor-pointer items-center justify-between px-4 py-2 transition duration-200 ease-in hover:bg-opacity-70", [
-          t.rounded ? "rounded-lg" : "rounded-sm",
-          d(a)("BGCOLOR", t.btnColor)
+      r("button", {
+        type: "button",
+        id: `${e.collapseId}-trigger`,
+        "aria-expanded": i.value,
+        "aria-controls": e.collapseId,
+        onClick: t[0] || (t[0] = (l) => g.value?.toggle()),
+        class: s(["flex w-full cursor-pointer items-center justify-between px-4 py-2 transition duration-200 ease-in hover:bg-opacity-70", [
+          e.rounded ? "rounded-lg" : "rounded-sm",
+          a(o).bgColorVariant({ color: e.triggerBgColor })
         ]])
       }, [
-        x("h3", {
-          class: c(m(t.titleSize, t.titleColor))
-        }, L(t.title), 3),
-        x("div", rt, [
-          (b(), p("svg", {
+        r("span", {
+          class: s(p(e.titleSize, e.titleColor))
+        }, $(e.title), 3),
+        r("div", E, [
+          (C(), b("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             viewBox: "0 0 448 512",
-            class: c(["h-xs transition-transform duration-300 ease-in", [
-              l.value ? "rotate-180" : "rotate-0",
-              d(a)("SVGFILL", t.iconColor)
+            class: s(["h-xs transition-transform duration-300 ease-in", [
+              i.value ? "rotate-180" : "rotate-0",
+              a(o).svgFillColorVariant({ color: e.iconColor })
             ]])
-          }, [...s[0] || (s[0] = [
-            x("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)
+          }, [...t[1] || (t[1] = [
+            r("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)), [
-        [d(T), void 0, t.collapseId]
-      ]),
-      x("div", et, [
-        E(d(D), {
-          id: t.collapseId,
-          visible: t.visible,
-          "class-name": "px-xs pt-xs pb-2xs",
-          accordion: t.accordion,
-          onOpen: g,
-          onClose: g
+      ], 10, R),
+      r("div", L, [
+        k(a(A), {
+          ref_key: "collapseRef",
+          ref: g,
+          id: e.collapseId,
+          visible: e.visible,
+          "custom-class": "px-xs pt-xs pb-2xs",
+          role: "region",
+          "aria-labelledby": `${e.collapseId}-trigger`,
+          onOpen: c,
+          onClose: y
         }, {
           default: I(() => [
-            k(i.$slots, "default")
+            w(u.$slots, "default")
           ]),
           _: 3
-        }, 8, ["id", "visible", "accordion"])
+        }, 8, ["id", "visible", "aria-labelledby"])
       ])
     ], 2));
   }
 });
 export {
-  dt as MclCollapseA,
-  nt as MclCollapseB
+  H as MclCollapseA,
+  D as MclCollapseB
 };