maz-ui 3.50.1 → 4.0.0-alpha.3

package/dist/components/MazBackdrop.mjs

@@ -0,0 +1,129 @@
+import { defineComponent as L, ref as P, onMounted as V, watch as D, nextTick as C, openBlock as E, createBlock as M, Teleport as N, createVNode as T, Transition as $, withCtx as O, createElementBlock as j, mergeProps as q, createElementVNode as f, normalizeClass as z, withModifiers as F, renderSlot as K, createCommentVNode as I } from "vue";
+import { _ as G } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazBackdrop.C72SNI28.css';const H = {
+  role: "dialog",
+  class: "m-backdrop-container",
+  "aria-modal": "true"
+}, J = { class: "m-backdrop-wrapper" }, g = "--backdrop-present", Q = /* @__PURE__ */ L({
+  inheritAttrs: !1,
+  __name: "MazBackdrop",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    teleportSelector: { default: "body" },
+    beforeClose: { type: Function, default: void 0 },
+    persistent: { type: Boolean, default: !1 },
+    noCloseOnEscKey: { type: Boolean, default: !1 },
+    transitionName: { default: "backdrop-anim" },
+    backdropClass: { default: () => {
+    } },
+    backdropContentClass: { default: () => {
+    } },
+    contentPadding: { type: Boolean, default: !1 },
+    justify: { default: "none" },
+    align: { default: "none" },
+    variant: {}
+  },
+  emits: ["open", "close", "update:model-value", "before-close"],
+  setup(o, { expose: B, emit: h }) {
+    const n = h;
+    function A() {
+      document.documentElement.classList.add(g);
+    }
+    function w() {
+      document.querySelector(".m-backdrop.--present") || document.documentElement.classList.remove(g);
+    }
+    const a = P(o.modelValue);
+    function s() {
+      m(!1);
+    }
+    async function m(e) {
+      var t;
+      e || (n("before-close"), await ((t = o.beforeClose) == null ? void 0 : t.call(o))), a.value = e;
+    }
+    function p() {
+      n("open");
+    }
+    function k() {
+      n("update:model-value", !1), n("close"), c();
+    }
+    function d() {
+      o.persistent || s();
+    }
+    function r(e) {
+      !o.noCloseOnEscKey && e.key === "Escape" && !o.persistent && s();
+    }
+    function v() {
+      A(), document.addEventListener("keyup", r, !1);
+    }
+    function c() {
+      document.removeEventListener("keyup", r), w();
+    }
+    V(() => {
+      o.modelValue ? v() : c();
+    });
+    let l = null;
+    function S(e) {
+      const t = document.querySelector(e), i = t && Array.from(t.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')), u = i == null ? void 0 : i.filter((y) => {
+        const b = window.getComputedStyle(y);
+        return b.display !== "none" && b.visibility !== "hidden" && !y.disabled;
+      });
+      return u && u.length > 0 ? u[0] : null;
+    }
+    return D(
+      () => o.modelValue,
+      async (e) => {
+        if (a.value = e, e) {
+          v(), l = document.activeElement, await C();
+          const t = S(".m-backdrop-content");
+          t == null || t.focus();
+        } else
+          c(), await C(), l == null || l.focus();
+      }
+    ), B({
+      onBackdropAnimationEnter: p,
+      onBackdropAnimationLeave: k,
+      onBackdropClicked: d,
+      close: s,
+      present: a,
+      toggleModal: m,
+      onKeyPress: r
+    }), (e, t) => (E(), M(N, { to: e.teleportSelector }, [
+      T($, {
+        appear: "",
+        name: e.transitionName,
+        onAfterEnter: p,
+        onAfterLeave: k
+      }, {
+        default: O(() => [
+          a.value ? (E(), j("div", q({
+            key: 0,
+            class: "m-backdrop --present m-reset-css"
+          }, e.$attrs, {
+            class: [e.backdropClass, e.variant && `--variant-${e.variant}`, { "--persistent": e.persistent }]
+          }), [
+            f("div", H, [
+              f("div", J, [
+                f("div", {
+                  class: z(["m-backdrop-content", [e.backdropContentClass, `--justify-${e.justify}`, `--align-${e.align}`, { "--padding": e.contentPadding }]]),
+                  role: "button",
+                  tabindex: "-1",
+                  onClick: F(d, ["self"])
+                }, [
+                  K(e.$slots, "default", {
+                    close: s,
+                    onBackdropClicked: d
+                  }, void 0, !0)
+                ], 2)
+              ])
+            ])
+          ], 16)) : I("", !0)
+        ]),
+        _: 3
+      }, 8, ["name"])
+    ], 8, ["to"]));
+  }
+}), X = /* @__PURE__ */ G(Q, [["__scopeId", "data-v-f2ffa088"]]);
+export {
+  X as default
+};
+//# sourceMappingURL=MazBackdrop.mjs.map

package/dist/components/MazBackdrop.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazBackdrop.mjs","sources":["../../src/components/MazBackdrop.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { type HTMLAttributes, nextTick, onMounted, ref, watch } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst {\n  modelValue = false,\n  teleportSelector = 'body',\n  beforeClose = undefined,\n  persistent = false,\n  noCloseOnEscKey = false,\n  transitionName = 'backdrop-anim',\n  backdropClass = undefined,\n  backdropContentClass = undefined,\n  contentPadding = false,\n  justify = 'none',\n  align = 'none',\n} = defineProps<MazBackdropProps>()\n\nconst emits = defineEmits<{\n  /** emitted when modal is open */\n  'open': [value: void]\n  /** emitted when modal is close */\n  'close': [value: void]\n  /** emitted when modal is open or close */\n  'update:model-value': [value: boolean]\n  /** emitted before modal is close */\n  'before-close': [value: void]\n}>()\n\nconst MODAL_OPENED_CLASS = '--backdrop-present'\n\nfunction addClassToDocument() {\n  document.documentElement.classList.add(MODAL_OPENED_CLASS)\n}\n\nfunction removeClassFromDocument() {\n  const backdropPresents = document.querySelector('.m-backdrop.--present')\n\n  if (!backdropPresents) {\n    document.documentElement.classList.remove(MODAL_OPENED_CLASS)\n  }\n}\n\nexport interface MazBackdropProps {\n  /** @model Modal's model value */\n  modelValue?: boolean\n  /** Teleport selector */\n  teleportSelector?: string\n  /** Function called before modal is close */\n  beforeClose?: () => Promise<void> | void\n  /** Persistent dialog (not closable by clicking outside and remove close button) */\n  persistent?: boolean\n  /** Prevent close on escape key */\n  noCloseOnEscKey?: boolean\n  /** Transition name */\n  transitionName?: string\n  /** Backdrop class */\n  backdropClass?: HTMLAttributes['class']\n  /** Backdrop content class */\n  backdropContentClass?: HTMLAttributes['class']\n  /** Add padding to the content */\n  contentPadding?: boolean\n  /** Justify content */\n  justify?: 'center' | 'end' | 'start' | 'space-between' | 'space-around' | 'none'\n  /** Align content */\n  align?: 'center' | 'end' | 'start' | 'none'\n  /** Variant */\n  variant?: 'bottom-sheet' | 'dialog' | 'drawer'\n}\n\nconst present = ref(modelValue)\n\nfunction close() {\n  toggleModal(false)\n}\n\nasync function toggleModal(value) {\n  if (!value) {\n    emits('before-close')\n    await beforeClose?.()\n  }\n\n  present.value = value\n}\n\nfunction onBackdropAnimationEnter() {\n  emits('open')\n}\n\nfunction onBackdropAnimationLeave() {\n  emits('update:model-value', false)\n  emits('close')\n  removeClassAndEventToDocument()\n}\n\nfunction onBackdropClicked() {\n  if (!persistent) {\n    close()\n  }\n}\n\nfunction onKeyPress(event: KeyboardEvent) {\n  if (!noCloseOnEscKey && event.key === 'Escape' && !persistent) {\n    close()\n  }\n}\n\nfunction addClassAndEventToDocument() {\n  addClassToDocument()\n  document.addEventListener('keyup', onKeyPress, false)\n}\n\nfunction removeClassAndEventToDocument() {\n  document.removeEventListener('keyup', onKeyPress)\n  removeClassFromDocument()\n}\n\nonMounted(() => {\n  if (modelValue) {\n    addClassAndEventToDocument()\n  }\n  else {\n    removeClassAndEventToDocument()\n  }\n})\n\nlet initialFocusableElement: HTMLElement | null = null\n\nfunction findFirstFocusableElement(selector: string) {\n  const modal = document.querySelector(selector)\n  const focusableElements = 'a[href], button, textarea, input[type=\"text\"], input[type=\"radio\"], input[type=\"checkbox\"], select'\n\n  const focusableElementsArray = modal && Array.from(modal.querySelectorAll<HTMLLinkElement | HTMLButtonElement | HTMLTextAreaElement | HTMLInputElement | HTMLSelectElement>(focusableElements))\n\n  const visibleFocusableElements = focusableElementsArray?.filter((el) => {\n    const style = window.getComputedStyle(el)\n    return style.display !== 'none' && style.visibility !== 'hidden' && !el.disabled\n  })\n\n  return visibleFocusableElements && visibleFocusableElements.length > 0 ? visibleFocusableElements[0] : null\n}\n\nwatch(\n  () => modelValue,\n  async (value) => {\n    present.value = value\n\n    if (value) {\n      addClassAndEventToDocument()\n\n      initialFocusableElement = document.activeElement as HTMLElement | null\n\n      await nextTick()\n      const firstFocusableElement = findFirstFocusableElement('.m-backdrop-content')\n      firstFocusableElement?.focus()\n    }\n    else {\n      removeClassAndEventToDocument()\n\n      await nextTick()\n      initialFocusableElement?.focus()\n    }\n  },\n)\n\ndefineExpose({\n  onBackdropAnimationEnter,\n  onBackdropAnimationLeave,\n  onBackdropClicked,\n  close,\n  present,\n  toggleModal,\n  onKeyPress,\n})\n</script>\n\n<template>\n  <Teleport :to=\"teleportSelector\">\n    <Transition\n      appear\n      :name=\"transitionName\"\n      @after-enter=\"onBackdropAnimationEnter\"\n      @after-leave=\"onBackdropAnimationLeave\"\n    >\n      <div v-if=\"present\" class=\"m-backdrop --present m-reset-css\" v-bind=\"$attrs\" :class=\"[backdropClass, variant && `--variant-${variant}`, { '--persistent': persistent }]\">\n        <div role=\"dialog\" class=\"m-backdrop-container\" aria-modal=\"true\">\n          <div class=\"m-backdrop-wrapper\">\n            <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->\n            <div\n              class=\"m-backdrop-content\"\n              :class=\"[backdropContentClass, `--justify-${justify}`, `--align-${align}`, { '--padding': contentPadding }]\"\n              role=\"button\"\n              tabindex=\"-1\"\n              @click.self=\"onBackdropClicked\"\n            >\n              <!-- @slot Place your content here\n                @binding {Function} close close function\n                @binding {Function} on-backdrop-clicked onBackdropClicked function (respects persistent prop)\n              -->\n              <slot :close=\"close\" :on-backdrop-clicked=\"onBackdropClicked\" />\n            </div>\n          </div>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style lang=\"postcss\">\nhtml.--backdrop-present {\n  overflow-y: hidden;\n  height: 100vh !important;\n}\n</style>\n\n<style lang=\"postcss\" scoped>\n.m-backdrop {\n  @apply maz-fixed maz-inset-0 maz-z-default-backdrop maz-bg-overlay;\n\n  backdrop-filter: blur(4px);\n\n  &.--persistent {\n    & .m-backdrop-content {\n      @apply maz-cursor-default;\n    }\n  }\n\n  &-container {\n    @apply maz-fixed maz-inset-0 maz-z-default-backdrop;\n  }\n\n  &-wrapper {\n    @apply maz-fixed maz-inset-0 maz-overflow-y-auto;\n  }\n\n  &-content {\n    @apply maz-flex maz-min-h-full tab-s:maz-items-center tab-s:maz-p-0 maz-items-end;\n\n    &.--padding {\n      @apply maz-p-4;\n    }\n\n    &.--justify-center {\n      @apply maz-justify-center;\n    }\n\n    &.--justify-end {\n      @apply maz-justify-end;\n    }\n\n    &.--justify-start {\n      @apply maz-justify-start;\n    }\n\n    &.--justify-space-between {\n      @apply maz-justify-between;\n    }\n\n    &.--justify-space-around {\n      @apply maz-justify-around;\n    }\n\n    &.--align-center {\n      @apply maz-items-center;\n    }\n\n    &.--align-end {\n      @apply maz-items-end;\n    }\n\n    &.--align-start {\n      @apply maz-items-start;\n    }\n\n    > * {\n      @apply maz-cursor-default;\n    }\n  }\n\n  &.--variant-bottom-sheet {\n    .m-backdrop-content {\n      @apply maz-fixed maz-inset-0;\n    }\n  }\n\n  &.--variant-drawer {\n    .m-backdrop-content {\n      @apply maz-fixed maz-inset-0;\n    }\n  }\n\n  /*\n* Animations\n*/\n  &.bottom-sheet-anim-enter-active,\n  &.bottom-sheet-anim-leave-active {\n    transition: opacity 250ms ease-in-out;\n\n    & .m-backdrop-content > * {\n      transition: transform 250ms ease-in-out;\n    }\n  }\n\n  &.bottom-sheet-anim-enter-from,\n  &.bottom-sheet-anim-leave-to {\n    opacity: 0;\n\n    & .m-backdrop-content > * {\n      transform: translateY(100%);\n    }\n  }\n\n  &.modal-anim-enter-active,\n  &.modal-anim-leave-active {\n    transition: opacity 250ms ease-in-out;\n\n    & .m-backdrop-content > * {\n      transition: transform 250ms ease-in-out;\n    }\n  }\n\n  &.modal-anim-enter-from,\n  &.modal-anim-leave-to {\n    opacity: 0;\n\n    & .m-backdrop-content > * {\n      transform: scale(0.5);\n    }\n  }\n\n  &.drawer-anim-top-enter-active,\n  &.drawer-anim-top-leave-active {\n    transition: opacity 250ms ease-in-out;\n\n    & .m-backdrop-content > * {\n      transition: transform 250ms ease-in-out;\n    }\n  }\n\n  &.drawer-anim-top-enter-from,\n  &.drawer-anim-top-leave-to {\n    opacity: 0;\n\n    & .m-backdrop-content > * {\n      transform: translateY(-100%);\n    }\n  }\n\n  &.drawer-anim-bottom-enter-active,\n  &.drawer-anim-bottom-leave-active {\n    transition: opacity 250ms ease-in-out;\n\n    & .m-backdrop-content > * {\n      transition: transform 250ms ease-in-out;\n    }\n  }\n\n  &.drawer-anim-bottom-enter-from,\n  &.drawer-anim-bottom-leave-to {\n    opacity: 0;\n\n    & .m-backdrop-content > * {\n      transform: translateY(100%);\n    }\n  }\n\n  &.drawer-anim-left-enter-active,\n  &.drawer-anim-left-leave-active {\n    transition: opacity 250ms ease-in-out;\n\n    & .m-backdrop-content > * {\n      transition: transform 250ms ease-in-out;\n    }\n  }\n\n  &.drawer-anim-left-enter-from,\n  &.drawer-anim-left-leave-to {\n    opacity: 0;\n\n    & .m-backdrop-content > * {\n      transform: translateX(-100%);\n    }\n  }\n\n  &.drawer-anim-right-enter-active,\n  &.drawer-anim-right-leave-active {\n    transition: opacity 250ms ease-in-out;\n\n    & .m-backdrop-content > * {\n      transition: transform 250ms ease-in-out;\n    }\n  }\n\n  &.drawer-anim-right-enter-from,\n  &.drawer-anim-right-leave-to {\n    opacity: 0;\n\n    & .m-backdrop-content > * {\n      transform: translateX(100%);\n    }\n  }\n\n  &.backdrop-anim-enter-active,\n  &.backdrop-anim-leave-active {\n    transition: opacity 250ms ease-in-out;\n  }\n\n  &.backdrop-anim-enter-from,\n  &.backdrop-anim-leave-to {\n    opacity: 0;\n  }\n}\n</style>\n"],"names":["MODAL_OPENED_CLASS","emits","__emit","addClassToDocument","removeClassFromDocument","present","ref","__props","close","toggleModal","value","_a","onBackdropAnimationEnter","onBackdropAnimationLeave","removeClassAndEventToDocument","onBackdropClicked","onKeyPress","event","addClassAndEventToDocument","onMounted","initialFocusableElement","findFirstFocusableElement","selector","modal","focusableElementsArray","visibleFocusableElements","el","style","watch","nextTick","firstFocusableElement","__expose"],"mappings":";;;;;;wCAgCMA,IAAqB;;;;;;;;;;;;;;;;;;;;;AAX3B,UAAMC,IAAQC;AAad,aAASC,IAAqB;AACnB,eAAA,gBAAgB,UAAU,IAAIH,CAAkB;AAAA,IAAA;AAG3D,aAASI,IAA0B;AAGjC,MAFyB,SAAS,cAAc,uBAAuB,KAG5D,SAAA,gBAAgB,UAAU,OAAOJ,CAAkB;AAAA,IAC9D;AA8BI,UAAAK,IAAUC,EAAIC,EAAU,UAAA;AAE9B,aAASC,IAAQ;AACf,MAAAC,EAAY,EAAK;AAAA,IAAA;AAGnB,mBAAeA,EAAYC,GAAO;;AAChC,MAAKA,MACHT,EAAM,cAAc,GACpB,QAAMU,IAAAJ,EAAA,gBAAA,gBAAAI,EAAA,KAAAJ,MAGRF,EAAQ,QAAQK;AAAA,IAAA;AAGlB,aAASE,IAA2B;AAClC,MAAAX,EAAM,MAAM;AAAA,IAAA;AAGd,aAASY,IAA2B;AAClC,MAAAZ,EAAM,sBAAsB,EAAK,GACjCA,EAAM,OAAO,GACiBa,EAAA;AAAA,IAAA;AAGhC,aAASC,IAAoB;AACvB,MAACR,EAAA,cACGC,EAAA;AAAA,IACR;AAGF,aAASQ,EAAWC,GAAsB;AACpC,MAAA,CAACV,qBAAmBU,EAAM,QAAQ,YAAY,CAACV,EAAA,cAC3CC,EAAA;AAAA,IACR;AAGF,aAASU,IAA6B;AACjB,MAAAf,EAAA,GACV,SAAA,iBAAiB,SAASa,GAAY,EAAK;AAAA,IAAA;AAGtD,aAASF,IAAgC;AAC9B,eAAA,oBAAoB,SAASE,CAAU,GACxBZ,EAAA;AAAA,IAAA;AAG1B,IAAAe,EAAU,MAAM;AACd,MAAIZ,EAAA,aACyBW,EAAA,IAGGJ,EAAA;AAAA,IAChC,CACD;AAED,QAAIM,IAA8C;AAElD,aAASC,EAA0BC,GAAkB;AAC7C,YAAAC,IAAQ,SAAS,cAAcD,CAAQ,GAGvCE,IAAyBD,KAAS,MAAM,KAAKA,EAAM,iBAF/B,oGAEmK,CAAC,GAExLE,IAA2BD,KAAA,gBAAAA,EAAwB,OAAO,CAACE,MAAO;AAChE,cAAAC,IAAQ,OAAO,iBAAiBD,CAAE;AACxC,eAAOC,EAAM,YAAY,UAAUA,EAAM,eAAe,YAAY,CAACD,EAAG;AAAA,MAAA;AAG1E,aAAOD,KAA4BA,EAAyB,SAAS,IAAIA,EAAyB,CAAC,IAAI;AAAA,IAAA;AAGzG,WAAAG;AAAA,MACE,MAAMrB,EAAU;AAAA,MAChB,OAAOG,MAAU;AAGf,YAFAL,EAAQ,QAAQK,GAEZA,GAAO;AACkB,UAAAQ,EAAA,GAE3BE,IAA0B,SAAS,eAEnC,MAAMS,EAAS;AACT,gBAAAC,IAAwBT,EAA0B,qBAAqB;AAC7E,UAAAS,KAAA,QAAAA,EAAuB;AAAA,QAAM;AAGC,UAAAhB,EAAA,GAE9B,MAAMe,EAAS,GACfT,KAAA,QAAAA,EAAyB;AAAA,MAC3B;AAAA,IAEJ,GAEaW,EAAA;AAAA,MACX,0BAAAnB;AAAA,MACA,0BAAAC;AAAA,MACA,mBAAAE;AAAA,MACA,OAAAP;AAAA,MACA,SAAAH;AAAA,MACA,aAAAI;AAAA,MACA,YAAAO;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazBadge.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazBadge.RMWNkgZL.css');const o=require("vue"),a=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),l=o.defineComponent({__name:"MazBadge",props:{color:{default:"primary"},size:{default:"0.8em"},nowrap:{type:Boolean,default:!1},outline:{type:Boolean,default:!1},pastel:{type:Boolean,default:!1},roundedSize:{default:"md"}},setup(r){return(e,n)=>(o.openBlock(),o.createElementBlock("span",{class:o.normalizeClass(["m-badge m-reset-css",[`--${e.color}`,{"--outline":e.outline,"--pastel":e.pastel,"--nowrap":e.nowrap},`--rounded-${e.roundedSize}`]]),style:o.normalizeStyle({fontSize:e.size})},[o.renderSlot(e.$slots,"default",{},void 0,!0)],6))}}),t=a._export_sfc(l,[["__scopeId","data-v-7471360e"]]);exports.default=t;
+//# sourceMappingURL=MazBadge.cjs.map

package/dist/components/MazBadge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazBadge.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/MazBadge.mjs

@@ -0,0 +1,29 @@
+import { defineComponent as o, openBlock as a, createElementBlock as l, normalizeClass as t, normalizeStyle as r, renderSlot as s } from "vue";
+import { _ as n } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazBadge.RMWNkgZL.css';const d = /* @__PURE__ */ o({
+  __name: "MazBadge",
+  props: {
+    color: { default: "primary" },
+    size: { default: "0.8em" },
+    nowrap: { type: Boolean, default: !1 },
+    outline: { type: Boolean, default: !1 },
+    pastel: { type: Boolean, default: !1 },
+    roundedSize: { default: "md" }
+  },
+  setup(p) {
+    return (e, u) => (a(), l("span", {
+      class: t(["m-badge m-reset-css", [
+        `--${e.color}`,
+        { "--outline": e.outline, "--pastel": e.pastel, "--nowrap": e.nowrap },
+        `--rounded-${e.roundedSize}`
+      ]]),
+      style: r({ fontSize: e.size })
+    }, [
+      s(e.$slots, "default", {}, void 0, !0)
+    ], 6));
+  }
+}), m = /* @__PURE__ */ n(d, [["__scopeId", "data-v-7471360e"]]);
+export {
+  m as default
+};
+//# sourceMappingURL=MazBadge.mjs.map

package/dist/components/MazBadge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazBadge.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazBottomSheet.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazBottomSheet.Dqr-kpLb.css');const e=require("vue"),d=require("./MazBackdrop.cjs"),i=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),m=e.defineComponent({__name:"MazBottomSheet",props:{modelValue:{type:Boolean},noClose:{type:Boolean},noPadding:{type:Boolean}},emits:["update:model-value","open","close"],setup(p,{emit:l}){const s=l,a=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazBtn.cjs"))),r=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/x-mark.Dz-FO7Es.cjs")));return(t,n)=>(e.openBlock(),e.createBlock(d.default,{"model-value":t.modelValue,"transition-name":"bottom-sheet-anim","backdrop-class":"--bottom-sheet","content-padding":!1,align:"end",justify:"none",variant:"bottom-sheet",onClose:n[0]||(n[0]=o=>t.$emit("close",o)),onOpen:n[1]||(n[1]=o=>t.$emit("open",o)),"onUpdate:modelValue":n[2]||(n[2]=o=>s("update:model-value",o))},{default:e.withCtx(({close:o})=>[e.createElementVNode("div",{class:e.normalizeClass(["m-bottom-sheet__container",{"--no-padding":t.noPadding}])},[e.renderSlot(t.$slots,"default",{close:o},void 0,!0),t.noClose?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(a),{key:0,size:"sm",class:"m-bottom-sheet__close",color:"transparent",onClick:o},{default:e.withCtx(()=>[e.createVNode(e.unref(r),{class:"maz-text-lg"})]),_:2},1032,["onClick"]))],2)]),_:3},8,["model-value"]))}}),u=i._export_sfc(m,[["__scopeId","data-v-7668c29f"]]);exports.default=u;
+//# sourceMappingURL=MazBottomSheet.cjs.map

package/dist/components/MazBottomSheet.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazBottomSheet.cjs","sources":["../../src/components/MazBottomSheet.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport MazBackdrop from '@components/MazBackdrop.vue'\nimport { defineAsyncComponent } from 'vue'\n\nexport interface MazBottomSheetProps {\n  /** @model Modal's model value */\n  modelValue?: boolean\n  /** Remove the close button */\n  noClose?: boolean\n  /** Remove the padding on the container */\n  noPadding?: boolean\n}\n\ndefineProps<MazBottomSheetProps>()\n\nconst emits = defineEmits<{\n  /** Emitted when the model value is updated */\n  'update:model-value': [value: boolean]\n  /** Emitted when the component is opened */\n  'open': [value: void]\n  /** Emitted when the component is closed */\n  'close': [value: void]\n}>()\n\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\nconst XIcon = defineAsyncComponent(() => import('@icons/x-mark.svg'))\n</script>\n\n<template>\n  <MazBackdrop\n    :model-value=\"modelValue\"\n    transition-name=\"bottom-sheet-anim\"\n    backdrop-class=\"--bottom-sheet\"\n    :content-padding=\"false\"\n    align=\"end\"\n    justify=\"none\"\n    variant=\"bottom-sheet\"\n    @close=\"$emit('close', $event)\"\n    @open=\"$emit('open', $event)\"\n    @update:model-value=\"emits('update:model-value', $event)\"\n  >\n    <template #default=\"{ close }\">\n      <div\n        class=\"m-bottom-sheet__container\"\n        :class=\"{\n          '--no-padding': noPadding,\n        }\"\n      >\n        <!--\n          @slot  Slot content\n          @binding {Function} close close function\n        -->\n        <slot :close=\"close\" />\n\n        <MazBtn\n          v-if=\"!noClose\"\n          size=\"sm\"\n          class=\"m-bottom-sheet__close\"\n          color=\"transparent\"\n          @click=\"close\"\n        >\n          <XIcon class=\"maz-text-lg\" />\n        </MazBtn>\n      </div>\n    </template>\n  </MazBackdrop>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-bottom-sheet {\n  &__container {\n    @apply maz-relative maz-bg-color maz-text-normal maz-elevation maz-w-full maz-px-12 maz-rounded-t-2xl;\n\n    &:not(.--no-padding) {\n      @apply maz-py-6;\n    }\n\n    box-shadow: 0 -5px 20px hsl(0deg 0% 0% / 20%);\n  }\n\n  &__content-wrapper {\n    @apply maz-flex maz-flex-col maz-flex-center;\n  }\n\n  &__close {\n    @apply !maz-absolute;\n    @apply maz-right-2 maz-top-2;\n  }\n}\n</style>\n"],"names":["emits","__emit","MazBtn","defineAsyncComponent","XIcon"],"mappings":"6ZAeA,MAAMA,EAAQC,EASRC,EAASC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,cAAwB,CAAA,CAAC,EACpEC,EAAQD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,+BAAmB,CAAA,CAAC"}

package/dist/components/MazBottomSheet.mjs

@@ -0,0 +1,54 @@
+import { defineComponent as u, defineAsyncComponent as n, openBlock as a, createBlock as s, withCtx as l, createElementVNode as c, normalizeClass as f, renderSlot as C, unref as m, createVNode as B, createCommentVNode as v } from "vue";
+import k from "./MazBackdrop.mjs";
+import { _ as z } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazBottomSheet.Dqr-kpLb.css';const _ = /* @__PURE__ */ u({
+  __name: "MazBottomSheet",
+  props: {
+    modelValue: { type: Boolean },
+    noClose: { type: Boolean },
+    noPadding: { type: Boolean }
+  },
+  emits: ["update:model-value", "open", "close"],
+  setup(b, { emit: d }) {
+    const r = d, i = n(() => import("./MazBtn.mjs")), p = n(() => import("../chunks/x-mark.DTWA3lfG.mjs"));
+    return (o, t) => (a(), s(k, {
+      "model-value": o.modelValue,
+      "transition-name": "bottom-sheet-anim",
+      "backdrop-class": "--bottom-sheet",
+      "content-padding": !1,
+      align: "end",
+      justify: "none",
+      variant: "bottom-sheet",
+      onClose: t[0] || (t[0] = (e) => o.$emit("close", e)),
+      onOpen: t[1] || (t[1] = (e) => o.$emit("open", e)),
+      "onUpdate:modelValue": t[2] || (t[2] = (e) => r("update:model-value", e))
+    }, {
+      default: l(({ close: e }) => [
+        c("div", {
+          class: f(["m-bottom-sheet__container", {
+            "--no-padding": o.noPadding
+          }])
+        }, [
+          C(o.$slots, "default", { close: e }, void 0, !0),
+          o.noClose ? v("", !0) : (a(), s(m(i), {
+            key: 0,
+            size: "sm",
+            class: "m-bottom-sheet__close",
+            color: "transparent",
+            onClick: e
+          }, {
+            default: l(() => [
+              B(m(p), { class: "maz-text-lg" })
+            ]),
+            _: 2
+          }, 1032, ["onClick"]))
+        ], 2)
+      ]),
+      _: 3
+    }, 8, ["model-value"]));
+  }
+}), M = /* @__PURE__ */ z(_, [["__scopeId", "data-v-7668c29f"]]);
+export {
+  M as default
+};
+//# sourceMappingURL=MazBottomSheet.mjs.map

package/dist/components/MazBottomSheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazBottomSheet.mjs","sources":["../../src/components/MazBottomSheet.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport MazBackdrop from '@components/MazBackdrop.vue'\nimport { defineAsyncComponent } from 'vue'\n\nexport interface MazBottomSheetProps {\n  /** @model Modal's model value */\n  modelValue?: boolean\n  /** Remove the close button */\n  noClose?: boolean\n  /** Remove the padding on the container */\n  noPadding?: boolean\n}\n\ndefineProps<MazBottomSheetProps>()\n\nconst emits = defineEmits<{\n  /** Emitted when the model value is updated */\n  'update:model-value': [value: boolean]\n  /** Emitted when the component is opened */\n  'open': [value: void]\n  /** Emitted when the component is closed */\n  'close': [value: void]\n}>()\n\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\nconst XIcon = defineAsyncComponent(() => import('@icons/x-mark.svg'))\n</script>\n\n<template>\n  <MazBackdrop\n    :model-value=\"modelValue\"\n    transition-name=\"bottom-sheet-anim\"\n    backdrop-class=\"--bottom-sheet\"\n    :content-padding=\"false\"\n    align=\"end\"\n    justify=\"none\"\n    variant=\"bottom-sheet\"\n    @close=\"$emit('close', $event)\"\n    @open=\"$emit('open', $event)\"\n    @update:model-value=\"emits('update:model-value', $event)\"\n  >\n    <template #default=\"{ close }\">\n      <div\n        class=\"m-bottom-sheet__container\"\n        :class=\"{\n          '--no-padding': noPadding,\n        }\"\n      >\n        <!--\n          @slot  Slot content\n          @binding {Function} close close function\n        -->\n        <slot :close=\"close\" />\n\n        <MazBtn\n          v-if=\"!noClose\"\n          size=\"sm\"\n          class=\"m-bottom-sheet__close\"\n          color=\"transparent\"\n          @click=\"close\"\n        >\n          <XIcon class=\"maz-text-lg\" />\n        </MazBtn>\n      </div>\n    </template>\n  </MazBackdrop>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-bottom-sheet {\n  &__container {\n    @apply maz-relative maz-bg-color maz-text-normal maz-elevation maz-w-full maz-px-12 maz-rounded-t-2xl;\n\n    &:not(.--no-padding) {\n      @apply maz-py-6;\n    }\n\n    box-shadow: 0 -5px 20px hsl(0deg 0% 0% / 20%);\n  }\n\n  &__content-wrapper {\n    @apply maz-flex maz-flex-col maz-flex-center;\n  }\n\n  &__close {\n    @apply !maz-absolute;\n    @apply maz-right-2 maz-top-2;\n  }\n}\n</style>\n"],"names":["emits","__emit","MazBtn","defineAsyncComponent","XIcon"],"mappings":";;;;;;;;;;;;AAeA,UAAMA,IAAQC,GASRC,IAASC,EAAqB,MAAM,OAAO,cAAwB,CAAC,GACpEC,IAAQD,EAAqB,MAAM,OAAO,+BAAmB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazBtn.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazBtn.7QWd6o3M.css');const e=require("vue"),v=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),z={key:0,class:"m-btn-loader-container"},b=e.defineComponent({__name:"MazBtn",props:{variant:{default:"button"},size:{default:"md"},color:{default:"primary"},type:{default:"button"},rounded:{type:Boolean},roundedSize:{default:"lg"},noRounded:{type:Boolean},outline:{type:Boolean},pastel:{type:Boolean},block:{type:Boolean},noUnderline:{type:Boolean},loading:{type:Boolean},disabled:{type:Boolean},fab:{type:Boolean},icon:{type:[String,Function,Object],default:void 0},leftIcon:{type:[String,Function,Object],default:void 0},rightIcon:{type:[String,Function,Object],default:void 0},noPadding:{type:Boolean},noElevation:{type:Boolean},justify:{default:"center"}},setup(s){const n=s,l=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazIcon.cjs"))),i=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazSpinner.cjs"))),{href:u,to:d}=e.useAttrs(),a=e.computed(()=>u?"a":d?"router-link":"button"),c=e.computed(()=>n.pastel?`--${n.color}-pastel`:n.outline?`--${n.color}-outline`:`--${n.color}`),r=e.computed(()=>(n.loading||n.disabled)&&a.value==="button"),m=e.computed(()=>r.value?"--cursor-default":"--cursor-pointer"),p=e.computed(()=>`--is-${n.variant}`),f=e.computed(()=>n.loading&&n.variant==="button"),y=e.computed(()=>a.value==="button"?n.type:void 0),t=e.computed(()=>n.size==="xl"?"maz-text-3xl":n.size==="lg"?"maz-text-2xl":n.size==="md"?"maz-text-xl":n.size==="sm"?"maz-text-lg":n.size==="xs"?"maz-text-base":n.size==="mini"?"maz-text-sm":"maz-text-xl");return(o,k)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value),{disabled:r.value||void 0,class:e.normalizeClass(["m-btn m-reset-css",[`--${o.size}`,!o.fab&&!o.rounded&&o.roundedSize&&`--rounded-${o.roundedSize}`,c.value,m.value,p.value,{"--block":o.block,"--no-underline":o.noUnderline,"--fab":o.fab,"--loading":o.loading,"--disabled":r.value,"--rounded":o.rounded,"--no-rounded":o.noRounded,"--no-padding":o.noPadding,"--no-elevation":o.noElevation}]]),style:e.normalizeStyle([`--justify: ${o.justify}`]),type:y.value},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"left-icon",{},()=>[typeof o.leftIcon=="string"?(e.openBlock(),e.createBlock(e.unref(l),{key:0,name:o.leftIcon,class:e.normalizeClass([t.value])},null,8,["name","class"])):o.leftIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.leftIcon),{key:1,class:e.normalizeClass([t.value])},null,8,["class"])):e.createCommentVNode("",!0)],!0),e.renderSlot(o.$slots,"icon",{},()=>[typeof o.icon=="string"?(e.openBlock(),e.createBlock(e.unref(l),{key:0,name:o.icon,class:e.normalizeClass([t.value])},null,8,["name","class"])):o.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon),{key:1,class:e.normalizeClass([t.value])},null,8,["class"])):e.createCommentVNode("",!0)],!0),e.renderSlot(o.$slots,"default",{},void 0,!0),e.renderSlot(o.$slots,"right-icon",{},()=>[typeof o.rightIcon=="string"?(e.openBlock(),e.createBlock(e.unref(l),{key:0,name:o.rightIcon,class:e.normalizeClass([t.value])},null,8,["name","class"])):o.rightIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.rightIcon),{key:1,class:e.normalizeClass([t.value])},null,8,["class"])):e.createCommentVNode("",!0)],!0),f.value?(e.openBlock(),e.createElementBlock("div",z,[e.createVNode(e.unref(i),{size:"2em",color:o.color},null,8,["color"])])):e.createCommentVNode("",!0)]),_:3},8,["disabled","class","style","type"]))}}),B=v._export_sfc(b,[["__scopeId","data-v-db145b2a"]]);exports.default=B;
+//# sourceMappingURL=MazBtn.cjs.map

package/dist/components/MazBtn.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazBtn.cjs","sources":["../../src/components/MazBtn.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, Icon, Size } from '@components/types'\n\nimport { computed, defineAsyncComponent, useAttrs } from 'vue'\n\nconst props = withDefaults(defineProps<MazBtnProps>(), {\n  variant: 'button',\n  size: 'md',\n  color: 'primary',\n  type: 'button',\n  icon: undefined,\n  leftIcon: undefined,\n  rightIcon: undefined,\n  roundedSize: 'lg',\n  justify: 'center',\n})\n\nconst MazIcon = defineAsyncComponent(() => import('@components/MazIcon.vue'))\nconst MazSpinner = defineAsyncComponent(() => import('@components/MazSpinner.vue'))\n\nconst { href, to } = useAttrs()\n\nexport interface MazBtnProps {\n  /**\n   * The variant of the button - Change UI of component (link or button style)\n   * @values `'button' | 'link'`\n   * @deprecated Use the component <MazLink /> instead\n   */\n  variant?: 'button' | 'link'\n  /**\n   * The size of the button\n   * @values `'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'`\n   */\n  size?: Size\n  /**\n   * The color of the button\n   * @values `'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'black' | 'transparent' | 'theme'`\n   */\n  color?: Color\n  /**\n   * The type of the button\n   * @values `'submit' | 'reset' | 'button'`\n   */\n  type?: 'submit' | 'reset' | 'button'\n  /**\n   * If true, the button will have a full border radius\n   * @default false\n   */\n  rounded?: boolean\n  /**\n   * Size of the rounded\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   * @default 'lg'\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /**\n   * If true, the button will have no border radius\n   * @default false\n   */\n  noRounded?: boolean\n  /**\n   * If true, the button have the \"border\" style\n   * @default false\n   */\n  outline?: boolean\n  /**\n   * If true, the button will have a pastel color\n   * @default false\n   */\n  pastel?: boolean\n  /**\n   * If true, the button will have a full width\n   * @default false\n   */\n  block?: boolean\n  /**\n   * If true, the button will have no underline on hover (useful with `variant=\"link\"`)\n   * @default false\n   */\n  noUnderline?: boolean\n  /**\n   * Enable the button loader\n   * @default false\n   */\n  loading?: boolean\n  /**\n   * Disable the button\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If true, the button will have a fab style\n   * @default false\n   */\n  fab?: boolean\n  /**\n   * The name of the icon to display or component, only with fab\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  icon?: string | Icon\n  /**\n   * The name of the icon or component to display on the left of the button\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  leftIcon?: string | Icon\n  /**\n   * The name of the icon or component to display on the right of the button\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  rightIcon?: string | Icon\n  /**\n   * If true, the button will have no padding\n   * @default false\n   */\n  noPadding?: boolean\n  /**\n   * If true, the button will have no box-shadow\n   * @default false\n   */\n  noElevation?: boolean\n  /**\n   * Choose how the elements are aligned in the button\n   */\n  justify?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'\n}\n\nconst component = computed(() => {\n  if (href)\n    return 'a'\n  else if (to)\n    return 'router-link'\n  return 'button'\n})\n\nconst btnColorClass = computed(() => {\n  if (props.pastel)\n    return `--${props.color}-pastel`\n  if (props.outline)\n    return `--${props.color}-outline`\n  return `--${props.color}`\n})\nconst isDisabled = computed(\n  () => (props.loading || props.disabled) && component.value === 'button',\n)\nconst cursorClass = computed(() => (isDisabled.value ? '--cursor-default' : '--cursor-pointer'))\nconst variantClass = computed(() => `--is-${props.variant}`)\nconst hasLoader = computed(() => props.loading && props.variant === 'button')\nconst btnType = computed(() => (component.value === 'button' ? props.type : undefined))\n\nconst iconClassSize = computed(() => {\n  if (props.size === 'xl')\n    return 'maz-text-3xl'\n  if (props.size === 'lg')\n    return 'maz-text-2xl'\n  if (props.size === 'md')\n    return 'maz-text-xl'\n  if (props.size === 'sm')\n    return 'maz-text-lg'\n  if (props.size === 'xs')\n    return 'maz-text-base'\n  if (props.size === 'mini')\n    return 'maz-text-sm'\n  return 'maz-text-xl'\n})\n</script>\n\n<template>\n  <Component\n    :is=\"component\"\n    :disabled=\"isDisabled || undefined\"\n    class=\"m-btn m-reset-css\"\n    :class=\"[\n      `--${size}`,\n      ...[!fab && !rounded && roundedSize && `--rounded-${roundedSize}`],\n      btnColorClass,\n      cursorClass,\n      variantClass,\n      {\n        '--block': block,\n        '--no-underline': noUnderline,\n        '--fab': fab,\n        '--loading': loading,\n        '--disabled': isDisabled,\n        '--rounded': rounded,\n        '--no-rounded': noRounded,\n        '--no-padding': noPadding,\n        '--no-elevation': noElevation,\n      },\n    ]\"\n    :style=\"[`--justify: ${justify}`]\"\n    :type=\"btnType\"\n  >\n    <!--\n      @slot left-icon - The icon to display on the left of the button\n    -->\n    <slot name=\"left-icon\">\n      <MazIcon v-if=\"typeof leftIcon === 'string'\" :name=\"leftIcon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"leftIcon\" v-else-if=\"leftIcon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <!--\n      @slot icon - The icon to display on the fab button\n    -->\n    <slot name=\"icon\">\n      <MazIcon v-if=\"typeof icon === 'string'\" :name=\"icon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"icon\" v-else-if=\"icon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <!--\n      @slot default - The content of the button\n    -->\n    <slot />\n\n    <!--\n      @slot left-icon - The icon to display on the left of the button\n    -->\n    <slot name=\"right-icon\">\n      <MazIcon v-if=\"typeof rightIcon === 'string'\" :name=\"rightIcon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"rightIcon\" v-else-if=\"rightIcon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <div v-if=\"hasLoader\" class=\"m-btn-loader-container\">\n      <MazSpinner size=\"2em\" :color=\"color\" />\n    </div>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-btn {\n  @apply maz-relative maz-items-center maz-gap-2 maz-border maz-border-solid maz-border-transparent maz-text-center maz-align-top maz-text-base maz-text-normal;\n\n  justify-content: var(--justify);\n\n  & span {\n    @apply maz-leading-none;\n  }\n\n  &-loader-container {\n    @apply maz-absolute maz-inset-0 maz-flex maz-items-center maz-justify-center maz-bg-color-light dark:maz-bg-color-lighter;\n  }\n\n  /* &-loader {\n    @apply maz-absolute;\n  } */\n\n  &.--cursor-pointer {\n    @apply maz-cursor-pointer;\n  }\n\n  &.--cursor-default {\n    @apply maz-cursor-default;\n  }\n\n  &.--is-link {\n    @apply maz-inline-flex maz-items-center\n        maz-transition maz-duration-200 maz-ease-in-out;\n\n    &:not(:disabled):hover,\n    &:not(:disabled):focus {\n      &:not(.--no-underline) {\n        @apply maz-underline;\n      }\n    }\n\n    &.--secondary {\n      @apply maz-text-secondary;\n    }\n\n    &.--info {\n      @apply maz-text-info;\n    }\n\n    &.--warning {\n      @apply maz-text-warning-600;\n    }\n\n    &.--danger {\n      @apply maz-text-danger-600;\n    }\n\n    &.--success {\n      @apply maz-text-success-600;\n    }\n\n    &.--white {\n      @apply maz-text-white;\n    }\n\n    &.--black {\n      @apply maz-text-black;\n    }\n\n    &.--theme {\n      @apply maz-text-normal;\n    }\n  }\n\n  &.--is-button {\n    @apply maz-inline-flex maz-items-center maz-overflow-hidden\n        maz-border-transparent maz-bg-transparent maz-no-underline\n        maz-transition-all maz-duration-200 maz-ease-in-out maz-py-0.5;\n\n    &:not(.--no-rounded, .--rounded-none) {\n      @apply maz-rounded;\n\n      &.--rounded {\n        @apply maz-rounded-full;\n\n        &-sm {\n          @apply maz-rounded-sm;\n        }\n\n        &-md {\n          @apply maz-rounded-md;\n        }\n\n        &-lg {\n          @apply maz-rounded;\n        }\n\n        &-xl {\n          @apply maz-rounded-xl;\n        }\n\n        &-full {\n          @apply maz-rounded-full;\n        }\n      }\n    }\n\n    /* Sizes */\n    &.--xl {\n      @apply maz-min-h-16 maz-px-8 maz-text-xl;\n    }\n\n    &.--lg {\n      @apply maz-min-h-14 maz-px-6;\n    }\n\n    &.--md {\n      @apply maz-min-h-12 maz-px-4;\n    }\n\n    &.--sm {\n      @apply maz-min-h-10 maz-px-3;\n    }\n\n    &.--xs {\n      @apply maz-min-h-8 maz-px-2 maz-text-sm;\n    }\n\n    &.--mini {\n      @apply maz-min-h-6 maz-px-1 maz-text-xs;\n    }\n\n    /* Not disabled */\n\n    &:not(.--disabled) {\n      &:hover {\n        @apply maz-bg-border;\n      }\n    }\n\n    /* Fab */\n\n    &.--fab {\n      @apply maz-flex maz-items-center maz-justify-center maz-rounded-full maz-px-1 maz-py-1;\n\n      &:not(.--no-elevation) {\n        @apply maz-elevation;\n      }\n\n      &.--xl {\n        @apply maz-w-16;\n      }\n\n      &.--lg {\n        @apply maz-w-14;\n      }\n\n      &.--md {\n        @apply maz-w-12;\n      }\n\n      &.--sm {\n        @apply maz-w-10;\n      }\n\n      &.--xs {\n        @apply maz-w-8;\n      }\n\n      &.--mini {\n        @apply maz-w-6;\n      }\n    }\n\n    &.--block {\n      @apply maz-w-full;\n    }\n\n    &.--primary {\n      @apply maz-bg-primary maz-text-primary-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary-700;\n      }\n    }\n\n    &.--secondary {\n      @apply maz-bg-secondary maz-text-secondary-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary-700;\n      }\n    }\n\n    &.--info {\n      @apply maz-bg-info maz-text-info-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info-700;\n      }\n    }\n\n    &.--success {\n      @apply maz-bg-success maz-text-success-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success-700;\n      }\n    }\n\n    &.--warning {\n      @apply maz-bg-warning maz-text-warning-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning-700;\n      }\n    }\n\n    &.--danger {\n      @apply maz-bg-danger maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger-700;\n      }\n    }\n\n    &.--white {\n      @apply maz-bg-white maz-text-white-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-gray-400;\n      }\n    }\n\n    &.--black {\n      @apply maz-bg-black maz-text-black-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-gray-800;\n      }\n    }\n\n    &.--transparent {\n      @apply maz-bg-transparent;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-[#000]/[0.08] dark:maz-bg-[#FFF]/[0.08];\n      }\n    }\n\n    &.--theme {\n      @apply maz-bg-theme maz-text-color;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-theme-hover;\n      }\n    }\n\n    /* OUTLINE */\n\n    &.--primary-outline {\n      @apply maz-bg-primary-alpha-05 maz-text-primary maz-border-primary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary maz-text-primary-contrast;\n      }\n    }\n\n    &.--secondary-outline {\n      @apply maz-border-secondary maz-bg-secondary-alpha-05 maz-text-secondary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary maz-text-white;\n      }\n    }\n\n    &.--info-outline {\n      @apply maz-border-info maz-bg-info-alpha-05 maz-text-info;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info maz-text-white;\n      }\n    }\n\n    &.--success-outline {\n      @apply maz-border-success maz-bg-success-alpha-05 maz-text-success;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success maz-text-white;\n      }\n    }\n\n    &.--danger-outline {\n      @apply maz-border-danger maz-bg-danger-alpha-05 maz-text-danger;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger maz-text-white;\n      }\n    }\n\n    &.--warning-outline {\n      @apply maz-border-warning maz-bg-warning-alpha-05 maz-text-warning;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning maz-text-white;\n      }\n    }\n\n    &.--white-outline {\n      @apply maz-border-white maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-white maz-text-white-contrast;\n      }\n    }\n\n    &.--black-outline {\n      @apply maz-border-black maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    &.--theme-outline {\n      @apply maz-border-border maz-text-theme dark:maz-border-color-lighter;\n\n      &:not(:disabled):hover {\n        @apply maz-border-theme maz-bg-theme maz-text-color;\n      }\n    }\n\n    /* PASTEL */\n\n    &.--primary-pastel {\n      @apply maz-bg-primary-50 maz-text-primary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary maz-text-primary-contrast;\n      }\n    }\n\n    &.--secondary-pastel {\n      @apply maz-bg-secondary-50 maz-text-secondary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary maz-text-secondary-contrast;\n      }\n    }\n\n    &.--info-pastel {\n      @apply maz-bg-info-50 maz-text-info;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info maz-text-info-contrast;\n      }\n    }\n\n    &.--success-pastel {\n      @apply maz-bg-success-50 maz-text-success;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success maz-text-success-contrast;\n      }\n    }\n\n    &.--danger-pastel {\n      @apply maz-bg-danger-50 maz-text-danger;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger maz-text-danger-contrast;\n      }\n    }\n\n    &.--warning-pastel {\n      @apply maz-bg-warning-50 maz-text-warning;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning maz-text-warning-contrast;\n      }\n    }\n\n    &.--white-pastel {\n      @apply maz-bg-gray-100 maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-white maz-text-white-contrast;\n      }\n    }\n\n    &.--black-pastel {\n      @apply maz-bg-border maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    &.--theme-pastel {\n      @apply maz-bg-border maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    /* DISABLED */\n\n    &.--disabled {\n      @apply maz-cursor-not-allowed maz-bg-color-light dark:maz-bg-color-lighter maz-text-gray-400 maz-border-color-light dark:maz-border-color-lighter;\n    }\n\n    &.--loading {\n      @apply maz-cursor-wait;\n    }\n\n    &.--no-padding {\n      @apply maz-p-0;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazIcon","defineAsyncComponent","MazSpinner","href","to","useAttrs","component","computed","btnColorClass","isDisabled","cursorClass","variantClass","hasLoader","btnType","iconClassSize"],"mappings":"+1BAKA,MAAMA,EAAQC,EAYRC,EAAUC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,eAAyB,CAAA,CAAC,EACtEC,EAAaD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,kBAA4B,CAAA,CAAC,EAE5E,CAAE,KAAAE,EAAM,GAAAC,CAAG,EAAIC,WAAS,EA0GxBC,EAAYC,EAAAA,SAAS,IACrBJ,EACK,IACAC,EACA,cACF,QACR,EAEKI,EAAgBD,EAAAA,SAAS,IACzBT,EAAM,OACD,KAAKA,EAAM,KAAK,UACrBA,EAAM,QACD,KAAKA,EAAM,KAAK,WAClB,KAAKA,EAAM,KAAK,EACxB,EACKW,EAAaF,EAAA,SACjB,KAAOT,EAAM,SAAWA,EAAM,WAAaQ,EAAU,QAAU,QACjE,EACMI,EAAcH,EAAAA,SAAS,IAAOE,EAAW,MAAQ,mBAAqB,kBAAmB,EACzFE,EAAeJ,EAAAA,SAAS,IAAM,QAAQT,EAAM,OAAO,EAAE,EACrDc,EAAYL,EAAAA,SAAS,IAAMT,EAAM,SAAWA,EAAM,UAAY,QAAQ,EACtEe,EAAUN,WAAS,IAAOD,EAAU,QAAU,SAAWR,EAAM,KAAO,MAAU,EAEhFgB,EAAgBP,EAAAA,SAAS,IACzBT,EAAM,OAAS,KACV,eACLA,EAAM,OAAS,KACV,eACLA,EAAM,OAAS,KACV,cACLA,EAAM,OAAS,KACV,cACLA,EAAM,OAAS,KACV,gBACLA,EAAM,OAAS,OACV,cACF,aACR"}

package/dist/components/MazBtn.mjs

@@ -0,0 +1,103 @@
+import { defineComponent as C, defineAsyncComponent as m, useAttrs as $, computed as o, openBlock as t, createBlock as l, resolveDynamicComponent as r, normalizeClass as a, normalizeStyle as S, withCtx as j, renderSlot as i, unref as u, createCommentVNode as d, createElementBlock as M, createVNode as E } from "vue";
+import { _ as F } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazBtn.7QWd6o3M.css';const O = {
+  key: 0,
+  class: "m-btn-loader-container"
+}, A = /* @__PURE__ */ C({
+  __name: "MazBtn",
+  props: {
+    variant: { default: "button" },
+    size: { default: "md" },
+    color: { default: "primary" },
+    type: { default: "button" },
+    rounded: { type: Boolean },
+    roundedSize: { default: "lg" },
+    noRounded: { type: Boolean },
+    outline: { type: Boolean },
+    pastel: { type: Boolean },
+    block: { type: Boolean },
+    noUnderline: { type: Boolean },
+    loading: { type: Boolean },
+    disabled: { type: Boolean },
+    fab: { type: Boolean },
+    icon: { type: [String, Function, Object], default: void 0 },
+    leftIcon: { type: [String, Function, Object], default: void 0 },
+    rightIcon: { type: [String, Function, Object], default: void 0 },
+    noPadding: { type: Boolean },
+    noElevation: { type: Boolean },
+    justify: { default: "center" }
+  },
+  setup(y) {
+    const n = y, c = m(() => import("./MazIcon.mjs")), v = m(() => import("./MazSpinner.mjs")), { href: b, to: z } = $(), f = o(() => b ? "a" : z ? "router-link" : "button"), g = o(() => n.pastel ? `--${n.color}-pastel` : n.outline ? `--${n.color}-outline` : `--${n.color}`), p = o(
+      () => (n.loading || n.disabled) && f.value === "button"
+    ), B = o(() => p.value ? "--cursor-default" : "--cursor-pointer"), k = o(() => `--is-${n.variant}`), I = o(() => n.loading && n.variant === "button"), h = o(() => f.value === "button" ? n.type : void 0), s = o(() => n.size === "xl" ? "maz-text-3xl" : n.size === "lg" ? "maz-text-2xl" : n.size === "md" ? "maz-text-xl" : n.size === "sm" ? "maz-text-lg" : n.size === "xs" ? "maz-text-base" : n.size === "mini" ? "maz-text-sm" : "maz-text-xl");
+    return (e, D) => (t(), l(r(f.value), {
+      disabled: p.value || void 0,
+      class: a(["m-btn m-reset-css", [
+        `--${e.size}`,
+        !e.fab && !e.rounded && e.roundedSize && `--rounded-${e.roundedSize}`,
+        g.value,
+        B.value,
+        k.value,
+        {
+          "--block": e.block,
+          "--no-underline": e.noUnderline,
+          "--fab": e.fab,
+          "--loading": e.loading,
+          "--disabled": p.value,
+          "--rounded": e.rounded,
+          "--no-rounded": e.noRounded,
+          "--no-padding": e.noPadding,
+          "--no-elevation": e.noElevation
+        }
+      ]]),
+      style: S([`--justify: ${e.justify}`]),
+      type: h.value
+    }, {
+      default: j(() => [
+        i(e.$slots, "left-icon", {}, () => [
+          typeof e.leftIcon == "string" ? (t(), l(u(c), {
+            key: 0,
+            name: e.leftIcon,
+            class: a([s.value])
+          }, null, 8, ["name", "class"])) : e.leftIcon ? (t(), l(r(e.leftIcon), {
+            key: 1,
+            class: a([s.value])
+          }, null, 8, ["class"])) : d("", !0)
+        ], !0),
+        i(e.$slots, "icon", {}, () => [
+          typeof e.icon == "string" ? (t(), l(u(c), {
+            key: 0,
+            name: e.icon,
+            class: a([s.value])
+          }, null, 8, ["name", "class"])) : e.icon ? (t(), l(r(e.icon), {
+            key: 1,
+            class: a([s.value])
+          }, null, 8, ["class"])) : d("", !0)
+        ], !0),
+        i(e.$slots, "default", {}, void 0, !0),
+        i(e.$slots, "right-icon", {}, () => [
+          typeof e.rightIcon == "string" ? (t(), l(u(c), {
+            key: 0,
+            name: e.rightIcon,
+            class: a([s.value])
+          }, null, 8, ["name", "class"])) : e.rightIcon ? (t(), l(r(e.rightIcon), {
+            key: 1,
+            class: a([s.value])
+          }, null, 8, ["class"])) : d("", !0)
+        ], !0),
+        I.value ? (t(), M("div", O, [
+          E(u(v), {
+            size: "2em",
+            color: e.color
+          }, null, 8, ["color"])
+        ])) : d("", !0)
+      ]),
+      _: 3
+    }, 8, ["disabled", "class", "style", "type"]));
+  }
+}), R = /* @__PURE__ */ F(A, [["__scopeId", "data-v-db145b2a"]]);
+export {
+  R as default
+};
+//# sourceMappingURL=MazBtn.mjs.map

package/dist/components/MazBtn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazBtn.mjs","sources":["../../src/components/MazBtn.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, Icon, Size } from '@components/types'\n\nimport { computed, defineAsyncComponent, useAttrs } from 'vue'\n\nconst props = withDefaults(defineProps<MazBtnProps>(), {\n  variant: 'button',\n  size: 'md',\n  color: 'primary',\n  type: 'button',\n  icon: undefined,\n  leftIcon: undefined,\n  rightIcon: undefined,\n  roundedSize: 'lg',\n  justify: 'center',\n})\n\nconst MazIcon = defineAsyncComponent(() => import('@components/MazIcon.vue'))\nconst MazSpinner = defineAsyncComponent(() => import('@components/MazSpinner.vue'))\n\nconst { href, to } = useAttrs()\n\nexport interface MazBtnProps {\n  /**\n   * The variant of the button - Change UI of component (link or button style)\n   * @values `'button' | 'link'`\n   * @deprecated Use the component <MazLink /> instead\n   */\n  variant?: 'button' | 'link'\n  /**\n   * The size of the button\n   * @values `'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'`\n   */\n  size?: Size\n  /**\n   * The color of the button\n   * @values `'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'white' | 'black' | 'transparent' | 'theme'`\n   */\n  color?: Color\n  /**\n   * The type of the button\n   * @values `'submit' | 'reset' | 'button'`\n   */\n  type?: 'submit' | 'reset' | 'button'\n  /**\n   * If true, the button will have a full border radius\n   * @default false\n   */\n  rounded?: boolean\n  /**\n   * Size of the rounded\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   * @default 'lg'\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /**\n   * If true, the button will have no border radius\n   * @default false\n   */\n  noRounded?: boolean\n  /**\n   * If true, the button have the \"border\" style\n   * @default false\n   */\n  outline?: boolean\n  /**\n   * If true, the button will have a pastel color\n   * @default false\n   */\n  pastel?: boolean\n  /**\n   * If true, the button will have a full width\n   * @default false\n   */\n  block?: boolean\n  /**\n   * If true, the button will have no underline on hover (useful with `variant=\"link\"`)\n   * @default false\n   */\n  noUnderline?: boolean\n  /**\n   * Enable the button loader\n   * @default false\n   */\n  loading?: boolean\n  /**\n   * Disable the button\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If true, the button will have a fab style\n   * @default false\n   */\n  fab?: boolean\n  /**\n   * The name of the icon to display or component, only with fab\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  icon?: string | Icon\n  /**\n   * The name of the icon or component to display on the left of the button\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  leftIcon?: string | Icon\n  /**\n   * The name of the icon or component to display on the right of the button\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  rightIcon?: string | Icon\n  /**\n   * If true, the button will have no padding\n   * @default false\n   */\n  noPadding?: boolean\n  /**\n   * If true, the button will have no box-shadow\n   * @default false\n   */\n  noElevation?: boolean\n  /**\n   * Choose how the elements are aligned in the button\n   */\n  justify?: 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'\n}\n\nconst component = computed(() => {\n  if (href)\n    return 'a'\n  else if (to)\n    return 'router-link'\n  return 'button'\n})\n\nconst btnColorClass = computed(() => {\n  if (props.pastel)\n    return `--${props.color}-pastel`\n  if (props.outline)\n    return `--${props.color}-outline`\n  return `--${props.color}`\n})\nconst isDisabled = computed(\n  () => (props.loading || props.disabled) && component.value === 'button',\n)\nconst cursorClass = computed(() => (isDisabled.value ? '--cursor-default' : '--cursor-pointer'))\nconst variantClass = computed(() => `--is-${props.variant}`)\nconst hasLoader = computed(() => props.loading && props.variant === 'button')\nconst btnType = computed(() => (component.value === 'button' ? props.type : undefined))\n\nconst iconClassSize = computed(() => {\n  if (props.size === 'xl')\n    return 'maz-text-3xl'\n  if (props.size === 'lg')\n    return 'maz-text-2xl'\n  if (props.size === 'md')\n    return 'maz-text-xl'\n  if (props.size === 'sm')\n    return 'maz-text-lg'\n  if (props.size === 'xs')\n    return 'maz-text-base'\n  if (props.size === 'mini')\n    return 'maz-text-sm'\n  return 'maz-text-xl'\n})\n</script>\n\n<template>\n  <Component\n    :is=\"component\"\n    :disabled=\"isDisabled || undefined\"\n    class=\"m-btn m-reset-css\"\n    :class=\"[\n      `--${size}`,\n      ...[!fab && !rounded && roundedSize && `--rounded-${roundedSize}`],\n      btnColorClass,\n      cursorClass,\n      variantClass,\n      {\n        '--block': block,\n        '--no-underline': noUnderline,\n        '--fab': fab,\n        '--loading': loading,\n        '--disabled': isDisabled,\n        '--rounded': rounded,\n        '--no-rounded': noRounded,\n        '--no-padding': noPadding,\n        '--no-elevation': noElevation,\n      },\n    ]\"\n    :style=\"[`--justify: ${justify}`]\"\n    :type=\"btnType\"\n  >\n    <!--\n      @slot left-icon - The icon to display on the left of the button\n    -->\n    <slot name=\"left-icon\">\n      <MazIcon v-if=\"typeof leftIcon === 'string'\" :name=\"leftIcon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"leftIcon\" v-else-if=\"leftIcon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <!--\n      @slot icon - The icon to display on the fab button\n    -->\n    <slot name=\"icon\">\n      <MazIcon v-if=\"typeof icon === 'string'\" :name=\"icon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"icon\" v-else-if=\"icon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <!--\n      @slot default - The content of the button\n    -->\n    <slot />\n\n    <!--\n      @slot left-icon - The icon to display on the left of the button\n    -->\n    <slot name=\"right-icon\">\n      <MazIcon v-if=\"typeof rightIcon === 'string'\" :name=\"rightIcon\" :class=\"[iconClassSize]\" />\n      <Component :is=\"rightIcon\" v-else-if=\"rightIcon\" :class=\"[iconClassSize]\" />\n    </slot>\n\n    <div v-if=\"hasLoader\" class=\"m-btn-loader-container\">\n      <MazSpinner size=\"2em\" :color=\"color\" />\n    </div>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-btn {\n  @apply maz-relative maz-items-center maz-gap-2 maz-border maz-border-solid maz-border-transparent maz-text-center maz-align-top maz-text-base maz-text-normal;\n\n  justify-content: var(--justify);\n\n  & span {\n    @apply maz-leading-none;\n  }\n\n  &-loader-container {\n    @apply maz-absolute maz-inset-0 maz-flex maz-items-center maz-justify-center maz-bg-color-light dark:maz-bg-color-lighter;\n  }\n\n  /* &-loader {\n    @apply maz-absolute;\n  } */\n\n  &.--cursor-pointer {\n    @apply maz-cursor-pointer;\n  }\n\n  &.--cursor-default {\n    @apply maz-cursor-default;\n  }\n\n  &.--is-link {\n    @apply maz-inline-flex maz-items-center\n        maz-transition maz-duration-200 maz-ease-in-out;\n\n    &:not(:disabled):hover,\n    &:not(:disabled):focus {\n      &:not(.--no-underline) {\n        @apply maz-underline;\n      }\n    }\n\n    &.--secondary {\n      @apply maz-text-secondary;\n    }\n\n    &.--info {\n      @apply maz-text-info;\n    }\n\n    &.--warning {\n      @apply maz-text-warning-600;\n    }\n\n    &.--danger {\n      @apply maz-text-danger-600;\n    }\n\n    &.--success {\n      @apply maz-text-success-600;\n    }\n\n    &.--white {\n      @apply maz-text-white;\n    }\n\n    &.--black {\n      @apply maz-text-black;\n    }\n\n    &.--theme {\n      @apply maz-text-normal;\n    }\n  }\n\n  &.--is-button {\n    @apply maz-inline-flex maz-items-center maz-overflow-hidden\n        maz-border-transparent maz-bg-transparent maz-no-underline\n        maz-transition-all maz-duration-200 maz-ease-in-out maz-py-0.5;\n\n    &:not(.--no-rounded, .--rounded-none) {\n      @apply maz-rounded;\n\n      &.--rounded {\n        @apply maz-rounded-full;\n\n        &-sm {\n          @apply maz-rounded-sm;\n        }\n\n        &-md {\n          @apply maz-rounded-md;\n        }\n\n        &-lg {\n          @apply maz-rounded;\n        }\n\n        &-xl {\n          @apply maz-rounded-xl;\n        }\n\n        &-full {\n          @apply maz-rounded-full;\n        }\n      }\n    }\n\n    /* Sizes */\n    &.--xl {\n      @apply maz-min-h-16 maz-px-8 maz-text-xl;\n    }\n\n    &.--lg {\n      @apply maz-min-h-14 maz-px-6;\n    }\n\n    &.--md {\n      @apply maz-min-h-12 maz-px-4;\n    }\n\n    &.--sm {\n      @apply maz-min-h-10 maz-px-3;\n    }\n\n    &.--xs {\n      @apply maz-min-h-8 maz-px-2 maz-text-sm;\n    }\n\n    &.--mini {\n      @apply maz-min-h-6 maz-px-1 maz-text-xs;\n    }\n\n    /* Not disabled */\n\n    &:not(.--disabled) {\n      &:hover {\n        @apply maz-bg-border;\n      }\n    }\n\n    /* Fab */\n\n    &.--fab {\n      @apply maz-flex maz-items-center maz-justify-center maz-rounded-full maz-px-1 maz-py-1;\n\n      &:not(.--no-elevation) {\n        @apply maz-elevation;\n      }\n\n      &.--xl {\n        @apply maz-w-16;\n      }\n\n      &.--lg {\n        @apply maz-w-14;\n      }\n\n      &.--md {\n        @apply maz-w-12;\n      }\n\n      &.--sm {\n        @apply maz-w-10;\n      }\n\n      &.--xs {\n        @apply maz-w-8;\n      }\n\n      &.--mini {\n        @apply maz-w-6;\n      }\n    }\n\n    &.--block {\n      @apply maz-w-full;\n    }\n\n    &.--primary {\n      @apply maz-bg-primary maz-text-primary-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary-700;\n      }\n    }\n\n    &.--secondary {\n      @apply maz-bg-secondary maz-text-secondary-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary-700;\n      }\n    }\n\n    &.--info {\n      @apply maz-bg-info maz-text-info-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info-700;\n      }\n    }\n\n    &.--success {\n      @apply maz-bg-success maz-text-success-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success-700;\n      }\n    }\n\n    &.--warning {\n      @apply maz-bg-warning maz-text-warning-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning-700;\n      }\n    }\n\n    &.--danger {\n      @apply maz-bg-danger maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger-700;\n      }\n    }\n\n    &.--white {\n      @apply maz-bg-white maz-text-white-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-gray-400;\n      }\n    }\n\n    &.--black {\n      @apply maz-bg-black maz-text-black-contrast;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-gray-800;\n      }\n    }\n\n    &.--transparent {\n      @apply maz-bg-transparent;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-[#000]/[0.08] dark:maz-bg-[#FFF]/[0.08];\n      }\n    }\n\n    &.--theme {\n      @apply maz-bg-theme maz-text-color;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-theme-hover;\n      }\n    }\n\n    /* OUTLINE */\n\n    &.--primary-outline {\n      @apply maz-bg-primary-alpha-05 maz-text-primary maz-border-primary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary maz-text-primary-contrast;\n      }\n    }\n\n    &.--secondary-outline {\n      @apply maz-border-secondary maz-bg-secondary-alpha-05 maz-text-secondary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary maz-text-white;\n      }\n    }\n\n    &.--info-outline {\n      @apply maz-border-info maz-bg-info-alpha-05 maz-text-info;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info maz-text-white;\n      }\n    }\n\n    &.--success-outline {\n      @apply maz-border-success maz-bg-success-alpha-05 maz-text-success;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success maz-text-white;\n      }\n    }\n\n    &.--danger-outline {\n      @apply maz-border-danger maz-bg-danger-alpha-05 maz-text-danger;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger maz-text-white;\n      }\n    }\n\n    &.--warning-outline {\n      @apply maz-border-warning maz-bg-warning-alpha-05 maz-text-warning;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning maz-text-white;\n      }\n    }\n\n    &.--white-outline {\n      @apply maz-border-white maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-white maz-text-white-contrast;\n      }\n    }\n\n    &.--black-outline {\n      @apply maz-border-black maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    &.--theme-outline {\n      @apply maz-border-border maz-text-theme dark:maz-border-color-lighter;\n\n      &:not(:disabled):hover {\n        @apply maz-border-theme maz-bg-theme maz-text-color;\n      }\n    }\n\n    /* PASTEL */\n\n    &.--primary-pastel {\n      @apply maz-bg-primary-50 maz-text-primary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-primary maz-text-primary-contrast;\n      }\n    }\n\n    &.--secondary-pastel {\n      @apply maz-bg-secondary-50 maz-text-secondary;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-secondary maz-text-secondary-contrast;\n      }\n    }\n\n    &.--info-pastel {\n      @apply maz-bg-info-50 maz-text-info;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-info maz-text-info-contrast;\n      }\n    }\n\n    &.--success-pastel {\n      @apply maz-bg-success-50 maz-text-success;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-success maz-text-success-contrast;\n      }\n    }\n\n    &.--danger-pastel {\n      @apply maz-bg-danger-50 maz-text-danger;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-danger maz-text-danger-contrast;\n      }\n    }\n\n    &.--warning-pastel {\n      @apply maz-bg-warning-50 maz-text-warning;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-warning maz-text-warning-contrast;\n      }\n    }\n\n    &.--white-pastel {\n      @apply maz-bg-gray-100 maz-text-white;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-white maz-text-white-contrast;\n      }\n    }\n\n    &.--black-pastel {\n      @apply maz-bg-border maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    &.--theme-pastel {\n      @apply maz-bg-border maz-text-black;\n\n      &:not(:disabled):hover {\n        @apply maz-bg-black maz-text-black-contrast;\n      }\n    }\n\n    /* DISABLED */\n\n    &.--disabled {\n      @apply maz-cursor-not-allowed maz-bg-color-light dark:maz-bg-color-lighter maz-text-gray-400 maz-border-color-light dark:maz-border-color-lighter;\n    }\n\n    &.--loading {\n      @apply maz-cursor-wait;\n    }\n\n    &.--no-padding {\n      @apply maz-p-0;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazIcon","defineAsyncComponent","MazSpinner","href","to","useAttrs","component","computed","btnColorClass","isDisabled","cursorClass","variantClass","hasLoader","btnType","iconClassSize"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,UAAMA,IAAQC,GAYRC,IAAUC,EAAqB,MAAM,OAAO,eAAyB,CAAC,GACtEC,IAAaD,EAAqB,MAAM,OAAO,kBAA4B,CAAC,GAE5E,EAAE,MAAAE,GAAM,IAAAC,EAAG,IAAIC,EAAS,GA0GxBC,IAAYC,EAAS,MACrBJ,IACK,MACAC,IACA,gBACF,QACR,GAEKI,IAAgBD,EAAS,MACzBT,EAAM,SACD,KAAKA,EAAM,KAAK,YACrBA,EAAM,UACD,KAAKA,EAAM,KAAK,aAClB,KAAKA,EAAM,KAAK,EACxB,GACKW,IAAaF;AAAA,MACjB,OAAOT,EAAM,WAAWA,EAAM,aAAaQ,EAAU,UAAU;AAAA,IACjE,GACMI,IAAcH,EAAS,MAAOE,EAAW,QAAQ,qBAAqB,kBAAmB,GACzFE,IAAeJ,EAAS,MAAM,QAAQT,EAAM,OAAO,EAAE,GACrDc,IAAYL,EAAS,MAAMT,EAAM,WAAWA,EAAM,YAAY,QAAQ,GACtEe,IAAUN,EAAS,MAAOD,EAAU,UAAU,WAAWR,EAAM,OAAO,MAAU,GAEhFgB,IAAgBP,EAAS,MACzBT,EAAM,SAAS,OACV,iBACLA,EAAM,SAAS,OACV,iBACLA,EAAM,SAAS,OACV,gBACLA,EAAM,SAAS,OACV,gBACLA,EAAM,SAAS,OACV,kBACLA,EAAM,SAAS,SACV,gBACF,aACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazCard.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazCard.Cod9pIM4.css');const e=require("vue"),k=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),y={key:0,class:"m-card__gallery__wrapper"},C={class:"maz-min-w-0 maz-flex-1"},B={key:0,class:"m-card__title"},w={key:1,class:"m-card__subtitle"},b={key:2,class:"m-card__content"},_={key:2,class:"m-card__actions maz-flex maz-p-2"},$=e.defineComponent({__name:"MazCard",props:{images:{default:void 0},orientation:{default:"column"},href:{default:void 0},to:{default:void 0},hrefTarget:{default:"_self"},footerAlign:{default:"right"},galleryWidth:{default:200},galleryHeight:{default:150},zoom:{type:Boolean},elevation:{type:Boolean,default:!0},radius:{type:Boolean,default:!0},bordered:{type:Boolean},imagesShowCount:{default:3},noRemaining:{type:Boolean,default:!0},scale:{type:Boolean,default:!0},wrapperClass:{default:void 0},noPadding:{type:Boolean},overflowHidden:{type:Boolean},collapsable:{type:Boolean},collapsible:{type:Boolean},collapseOpen:{type:Boolean},header:{default:void 0},block:{type:Boolean}},setup(u){const t=u,m=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazBtn.cjs"))),c=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazGallery.cjs"))),p=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazTransitionExpand.cjs"))),v=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/chevron-down.DdnENkzR.cjs"))),h=e.useSlots(),a=e.computed(()=>t.collapsible||t.collapsable),l=e.ref(a.value?t.collapseOpen:!0),d=e.computed(()=>t.href||t.to);e.watch(()=>t.collapseOpen,o=>{a.value&&(l.value=o)});const i=e.computed(()=>({is:t.href?"a":t.to?"router-link":"div",...t.href&&{href:t.href},...t.to&&{to:t.to},target:t.hrefTarget})),n=e.computed(()=>["column","column-reverse"].includes(t.orientation)),s=e.computed(()=>{const o=new Set(["default","title","subtitle","content"]);return Object.keys(h).some(r=>o.has(r))}),f=e.computed(()=>s.value?t.galleryWidth:"100%"),z=e.computed(()=>t.footerAlign==="right"?"maz-text-end":"maz-text-start");return(o,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["m-card m-reset-css",[{"m-card--linked":d.value,"m-card--no-scale":!o.scale,"maz-elevation":o.elevation,"--block":o.block,"maz-overflow-hidden":o.overflowHidden||!l.value,"maz-rounded":o.radius,"maz-border maz-border-solid maz-border-color-light":o.bordered}]])},[o.$slots.header||o.header||a.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value?"button":"div"),{key:0,class:e.normalizeClass(["m-card__header maz-border-b maz-border-solid",[l.value?"maz-rounded-t maz-border-color-light":"maz-border-transparent",{"--is-collapsible":a.value},{"maz-justify-end":(!o.$slots.header||!o.header)&&a.value},{"maz-justify-between":o.$slots.header||o.header}]]),tabindex:"-1",onClick:r[1]||(r[1]=e.withModifiers(g=>a.value?l.value=!l.value:void 0,["stop"]))},{default:e.withCtx(()=>[o.$slots.header||o.header?e.renderSlot(o.$slots,"header",{key:0},()=>[e.createTextVNode(e.toDisplayString(o.header),1)],!0):e.createCommentVNode("",!0),a.value?(e.openBlock(),e.createBlock(e.unref(m),{key:1,color:"transparent",class:"maz-ml-2 maz-text-sm",size:"xs",onClick:r[0]||(r[0]=e.withModifiers(g=>l.value=!l.value,["stop"]))},{default:e.withCtx(()=>[e.createVNode(e.unref(v),{class:e.normalizeClass([{"--is-open":l.value},"m-card__collapse-icon maz-text-xl"])},null,8,["class"])]),_:1})):e.createCommentVNode("",!0)]),_:3},8,["class"])):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(i.value.is),e.mergeProps(i.value,{class:["m-card__wrapper",[`m-card__wrapper--${o.orientation}`,{"m-card__link":d.value}]]}),{default:e.withCtx(()=>[o.images?(e.openBlock(),e.createElementBlock("div",y,[e.createVNode(e.unref(c),{"no-radius":!o.radius,width:f.value,height:o.galleryHeight,"images-shown-count":o.imagesShowCount,images:o.images,"no-zoom":!o.zoom,"no-width":n.value,"no-height":!n.value&&s.value,"no-remaining":o.noRemaining,class:"m-card__gallery maz-flex-1"},null,8,["no-radius","width","height","images-shown-count","images","no-zoom","no-width","no-height","no-remaining"])])):e.createCommentVNode("",!0),e.createElementVNode("div",C,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value?e.unref(p):"div"),{class:"maz-h-full"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass([[o.wrapperClass,{"maz-p-4":!o.noPadding&&!a.value}],"m-card__content__wrapper maz-h-full"])},[e.renderSlot(o.$slots,"default",{},()=>[o.$slots.title?(e.openBlock(),e.createElementBlock("div",B,[e.renderSlot(o.$slots,"title",{},void 0,!0)])):e.createCommentVNode("",!0),o.$slots.subtitle?(e.openBlock(),e.createElementBlock("div",w,[e.renderSlot(o.$slots,"subtitle",{},void 0,!0)])):e.createCommentVNode("",!0),o.$slots.content?(e.openBlock(),e.createElementBlock("div",b,[e.renderSlot(o.$slots,"content",{},void 0,!0)])):e.createCommentVNode("",!0)],!0)],2),[[e.vShow,l.value]])]),_:3}))])]),_:3},16,["class"])),o.$slots.footer?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["m-card__footer maz-overflow-x-auto maz-p-3",[{"maz-border-t maz-border-color-light":n.value&&s.value},z.value]])},[e.renderSlot(o.$slots,"footer",{},void 0,!0)],2)):e.createCommentVNode("",!0),o.$slots.actions?(e.openBlock(),e.createElementBlock("div",_,[e.renderSlot(o.$slots,"actions",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}}),S=k._export_sfc($,[["__scopeId","data-v-2d55f280"]]);exports.default=S;
+//# sourceMappingURL=MazCard.cjs.map

package/dist/components/MazCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazCard.cjs","sources":["../../src/components/MazCard.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazGalleryImage } from '@components/types'\nimport type { RouterLinkProps } from 'vue-router'\nimport { computed, defineAsyncComponent, type HTMLAttributes, ref, useSlots, watch } from 'vue'\n\nconst props = withDefaults(defineProps<MazCardProps>(), {\n  images: undefined,\n  orientation: 'column',\n  href: undefined,\n  to: undefined,\n  hrefTarget: '_self',\n  footerAlign: 'right',\n  galleryWidth: 200,\n  galleryHeight: 150,\n  elevation: true,\n  radius: true,\n  imagesShowCount: 3,\n  noRemaining: true,\n  scale: true,\n  wrapperClass: undefined,\n  header: undefined,\n})\n\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\nconst MazGallery = defineAsyncComponent(() => import('@components/MazGallery.vue'))\nconst MazTransitionExpand = defineAsyncComponent(() => import('@components/MazTransitionExpand.vue'))\n\nconst ChevronDownIcon = defineAsyncComponent(() => import('@icons/chevron-down.svg'))\n\nexport interface MazCardProps {\n  /** Images displayed */\n  images?: MazGalleryImage[]\n  /** Card variant: Must be `column | row | row-reverse | column-reverse` */\n  orientation?: 'column' | 'row' | 'row-reverse' | 'column-reverse'\n  /** Make card a link (footer area excluded) */\n  href?: string\n  /** Make card a link with a router-link (footer area excluded) */\n  to?: RouterLinkProps['to']\n  /** Target option of link: Muse be one of `_blank | _self | _parent | _top | framename` */\n  hrefTarget?: '_blank' | '_self' | '_parent' | '_top' | string\n  /** Footer text alignment: `right | left` */\n  footerAlign?: 'right' | 'left'\n  /** Gallery image width */\n  galleryWidth?: string | number\n  /** Gallery image height */\n  galleryHeight?: string | number\n  /** Enable \"zoom\" image on click (can't be used when the card has a link) */\n  zoom?: boolean\n  /** Set elevation to card (box-shadow) */\n  elevation?: boolean\n  /** Set radius to card */\n  radius?: boolean\n  /** Set border to card (in dark mode, the card is always bordered) */\n  bordered?: boolean\n  /** Number of images shown in the gallery */\n  imagesShowCount?: number\n  /** Remove transparent layer with the remain count (ex: +2) */\n  noRemaining?: boolean\n  /** scale animation on hover (only linked cards) */\n  scale?: boolean\n  /** add classes to wrapper */\n  wrapperClass?: HTMLAttributes['class']\n  /** Remove padding from content wrapper */\n  noPadding?: boolean\n  /** Hide overflow */\n  overflowHidden?: boolean\n  /**\n   * @deprecated Use `collapsible` instead\n   */\n  collapsable?: boolean\n  /**\n   * Card can be open and close\n   */\n  collapsible?: boolean\n  /** Card is open by default if `true` */\n  collapseOpen?: boolean\n  /** Title of the card in header */\n  header?: string\n  /** The card will be displayed in full width */\n  block?: boolean\n}\n\nconst slots = useSlots()\n\nconst isCollapsible = computed(() => props.collapsible || props.collapsable)\n\nconst isOpen = ref(isCollapsible.value ? props.collapseOpen : true)\n\nconst isLinked = computed(() => props.href || props.to)\n\nwatch(\n  () => props.collapseOpen,\n  (value) => {\n    if (isCollapsible.value)\n      isOpen.value = value\n  },\n)\n\nconst wrapperData = computed(() => {\n  return {\n    is: props.href ? 'a' : props.to ? 'router-link' : 'div',\n    ...(props.href && { href: props.href }),\n    ...(props.to && { to: props.to }),\n    target: props.hrefTarget,\n  }\n})\n\nconst isColumnVariant = computed(() => ['column', 'column-reverse'].includes(props.orientation))\n\nconst haveSomeContent = computed(() => {\n  const supportedSlots = new Set(['default', 'title', 'subtitle', 'content'])\n  return Object.keys(slots).some(val => supportedSlots.has(val))\n})\n\nconst galleryWidthComputed = computed(() => (haveSomeContent.value ? props.galleryWidth : '100%'))\n\nconst footerAlignClass = computed(() =>\n  props.footerAlign === 'right' ? 'maz-text-end' : 'maz-text-start',\n)\n</script>\n\n<template>\n  <div\n    class=\"m-card m-reset-css\"\n    :class=\"[\n      {\n        'm-card--linked': isLinked,\n        'm-card--no-scale': !scale,\n        'maz-elevation': elevation,\n        '--block': block,\n        'maz-overflow-hidden': overflowHidden || !isOpen,\n        'maz-rounded': radius,\n        'maz-border maz-border-solid maz-border-color-light': bordered,\n      },\n    ]\"\n  >\n    <Component\n      :is=\"isCollapsible ? 'button' : 'div'\"\n      v-if=\"$slots.header || header || isCollapsible\"\n      class=\"m-card__header maz-border-b maz-border-solid\"\n      :class=\"[\n        isOpen ? 'maz-rounded-t maz-border-color-light' : 'maz-border-transparent',\n        { '--is-collapsible': isCollapsible },\n        { 'maz-justify-end': (!$slots.header || !header) && isCollapsible },\n        { 'maz-justify-between': $slots.header || header },\n      ]\"\n      tabindex=\"-1\"\n      @click.stop=\"isCollapsible ? (isOpen = !isOpen) : undefined\"\n    >\n      <slot v-if=\"$slots.header || header\" name=\"header\">\n        {{ header }}\n      </slot>\n\n      <MazBtn\n        v-if=\"isCollapsible\"\n        color=\"transparent\"\n        class=\"maz-ml-2 maz-text-sm\"\n        size=\"xs\"\n        @click.stop=\"isOpen = !isOpen\"\n      >\n        <ChevronDownIcon\n          :class=\"{ '--is-open': isOpen }\"\n          class=\"m-card__collapse-icon maz-text-xl\"\n        />\n      </MazBtn>\n    </Component>\n    <Component\n      :is=\"wrapperData.is\"\n      v-bind=\"wrapperData\"\n      class=\"m-card__wrapper\"\n      :class=\"[`m-card__wrapper--${orientation}`, { 'm-card__link': isLinked }]\"\n    >\n      <div v-if=\"images\" class=\"m-card__gallery__wrapper\">\n        <MazGallery\n          :no-radius=\"!radius\"\n          :width=\"galleryWidthComputed\"\n          :height=\"galleryHeight\"\n          :images-shown-count=\"imagesShowCount\"\n          :images=\"images\"\n          :no-zoom=\"!zoom\"\n          :no-width=\"isColumnVariant\"\n          :no-height=\"!isColumnVariant && haveSomeContent\"\n          :no-remaining=\"noRemaining\"\n          class=\"m-card__gallery maz-flex-1\"\n        />\n      </div>\n      <div class=\"maz-min-w-0 maz-flex-1\">\n        <Component :is=\"isCollapsible ? MazTransitionExpand : 'div'\" class=\"maz-h-full\">\n          <div\n            v-show=\"isOpen\"\n            :class=\"[wrapperClass, { 'maz-p-4': !noPadding && !isCollapsible }]\"\n            class=\"m-card__content__wrapper maz-h-full\"\n          >\n            <slot>\n              <div v-if=\"$slots.title\" class=\"m-card__title\">\n                <slot name=\"title\" />\n              </div>\n              <div v-if=\"$slots.subtitle\" class=\"m-card__subtitle\">\n                <slot name=\"subtitle\" />\n              </div>\n              <div v-if=\"$slots.content\" class=\"m-card__content\">\n                <slot name=\"content\" />\n              </div>\n            </slot>\n          </div>\n        </Component>\n      </div>\n    </Component>\n    <div\n      v-if=\"$slots.footer\"\n      class=\"m-card__footer maz-overflow-x-auto maz-p-3\"\n      :class=\"[\n        {\n          'maz-border-t maz-border-color-light': isColumnVariant && haveSomeContent,\n        },\n        footerAlignClass,\n      ]\"\n    >\n      <slot name=\"footer\" />\n    </div>\n    <div v-if=\"$slots.actions\" class=\"m-card__actions maz-flex maz-p-2\">\n      <!-- @slot action of gallery -->\n      <slot name=\"actions\" />\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-card {\n  @apply maz-relative maz-inline-flex maz-max-h-full maz-flex-col maz-bg-color dark:maz-border dark:maz-border-color-light;\n\n  &.--block {\n    @apply maz-w-full;\n  }\n\n  &__header {\n    @apply maz-flex maz-items-center maz-px-4 maz-py-3 maz-transition-colors maz-duration-200;\n\n    &.--is-collapsible {\n      @apply hover:maz-bg-color-light;\n    }\n  }\n\n  &__collapse-icon {\n    @apply maz-rotate-0 maz-transition-transform maz-duration-200;\n\n    &.--is-open {\n      transform: rotate(180deg);\n    }\n  }\n\n  &__wrapper {\n    @apply maz-flex maz-flex-1;\n\n    &--row {\n      @apply maz-flex-row;\n    }\n\n    &--row-reverse {\n      @apply maz-flex-row-reverse;\n    }\n\n    &--column {\n      @apply maz-flex-col;\n    }\n\n    &--column-reverse {\n      @apply maz-flex-col-reverse;\n    }\n  }\n\n  &--linked {\n    transition: all 300ms ease-in-out;\n    transform: scale(1);\n\n    &:hover:not(.m-card--no-scale) {\n      @apply maz-z-1;\n\n      transform: scale(1.02);\n    }\n\n    & .m-card__wrapper {\n      @apply maz-cursor-pointer maz-no-underline;\n\n      &:hover {\n        @apply maz-no-underline;\n      }\n    }\n  }\n\n  &__content__wrapper {\n    @apply maz-relative maz-max-w-full;\n  }\n\n  &__title,\n  &__title > * {\n    font-size: 1.2em;\n\n    @apply maz-text-normal;\n  }\n\n  &__subtitle,\n  &__subtitle > * {\n    font-size: 1.1em;\n\n    @apply maz-text-muted;\n  }\n\n  &__gallery__wrapper {\n    @apply maz-relative maz-flex maz-overflow-hidden;\n  }\n\n  &__actions {\n    @apply maz-absolute maz-left-0 maz-top-0 maz-z-2;\n\n    & > *:not(:last-child) {\n      @apply maz-mr-2;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazBtn","defineAsyncComponent","MazGallery","MazTransitionExpand","ChevronDownIcon","slots","useSlots","isCollapsible","computed","isOpen","ref","isLinked","watch","value","wrapperData","isColumnVariant","haveSomeContent","supportedSlots","val","galleryWidthComputed","footerAlignClass"],"mappings":"wlCAKA,MAAMA,EAAQC,EAkBRC,EAASC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,cAAwB,CAAA,CAAC,EACpEC,EAAaD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,kBAA4B,CAAA,CAAC,EAC5EE,EAAsBF,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,2BAAqC,CAAA,CAAC,EAE9FG,EAAkBH,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,qCAAyB,CAAA,CAAC,EAuD9EI,EAAQC,EAAAA,SAAS,EAEjBC,EAAgBC,EAAAA,SAAS,IAAMV,EAAM,aAAeA,EAAM,WAAW,EAErEW,EAASC,EAAAA,IAAIH,EAAc,MAAQT,EAAM,aAAe,EAAI,EAE5Da,EAAWH,EAAAA,SAAS,IAAMV,EAAM,MAAQA,EAAM,EAAE,EAEtDc,EAAA,MACE,IAAMd,EAAM,aACXe,GAAU,CACLN,EAAc,QAChBE,EAAO,MAAQI,EAAA,CAErB,EAEM,MAAAC,EAAcN,EAAAA,SAAS,KACpB,CACL,GAAIV,EAAM,KAAO,IAAMA,EAAM,GAAK,cAAgB,MAClD,GAAIA,EAAM,MAAQ,CAAE,KAAMA,EAAM,IAAK,EACrC,GAAIA,EAAM,IAAM,CAAE,GAAIA,EAAM,EAAG,EAC/B,OAAQA,EAAM,UAChB,EACD,EAEKiB,EAAkBP,WAAS,IAAM,CAAC,SAAU,gBAAgB,EAAE,SAASV,EAAM,WAAW,CAAC,EAEzFkB,EAAkBR,EAAAA,SAAS,IAAM,CAC/B,MAAAS,MAAqB,IAAI,CAAC,UAAW,QAAS,WAAY,SAAS,CAAC,EACnE,OAAA,OAAO,KAAKZ,CAAK,EAAE,KAAYa,GAAAD,EAAe,IAAIC,CAAG,CAAC,CAAA,CAC9D,EAEKC,EAAuBX,EAAAA,SAAS,IAAOQ,EAAgB,MAAQlB,EAAM,aAAe,MAAO,EAE3FsB,EAAmBZ,EAAA,SAAS,IAChCV,EAAM,cAAgB,QAAU,eAAiB,gBACnD"}