@paperless/core 0.1.0-alpha.43 → 0.1.0-alpha.430

package/dist/components/localization.js.map

@@ -0,0 +1 @@
+{"file":"localization.js","mappings":"AAAA,MAAM,2BAA2B,GAAG,CAAC,OAAoB;EACrD,MAAM,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAgB,CAAC;EAChE,MAAM,WAAW,GAAG,QAAQ,CAAC,eAAe,CAAC;EAE7C,OAAO,cAAc;MACf,cAAc,CAAC,IAAI;MACnB,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI;QACjB,WAAW,CAAC,IAAI;QAChB,IAAI,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,8BAA8B,GAAG,CACnC,aAAqB,EACrB,MAAc;EAEd,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM;IAC/B,KAAK,CAAC,gBAAgB,aAAa,SAAS,MAAM,OAAO,CAAC,CAAC,IAAI,CAC3D,CAAC,MAAM;MACH,IAAI,MAAM,CAAC,EAAE,EAAE;QACX,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;QACvB,OAAO;OACV;MAED,MAAM,EAAE,CAAC;KACZ,EACD,MAAM,MAAM,EAAE,CACjB,CAAC;GACL,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,MAAM,KAAK,GAAG,EAAE,CAAC;MAEJ,yBAAyB,GAAG,OACrC,OAAoB;;EAEpB,IAAI,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;EACpE,IAAI,iBAAiB,GAAG,2BAA2B,CAAC,OAAO,CAAC,CAAC;EAC7D,IAAI,OAAO,CAAC;EAEZ,IAAI,MAAA,KAAK,CAAC,aAAa,CAAC,0CAAG,iBAAiB,CAAC,EAAE;IAC3C,OAAO,KAAK,CAAC,aAAa,CAAC,CAAC,iBAAiB,CAAC,CAAC;GAClD;EAED,IAAI;IACA,OAAO,GAAG,MAAM,8BAA8B,CAC1C,aAAa,EACb,iBAAiB,CACpB,CAAC;GACL;EAAC,OAAO,CAAC,EAAE;IACR,OAAO,CAAC,IAAI,CACR,iBAAiB,aAAa,KAAK,iBAAiB,8BAA8B,CACrF,CAAC;IACF,OAAO,GAAG,MAAM,8BAA8B,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;GACvE;EAED,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE;IACvB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,CAAC;GAC7B;EAED,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,iBAAiB,CAAC,EAAE;IAC1C,KAAK,CAAC,aAAa,CAAC,CAAC,iBAAiB,CAAC,GAAG,EAAE,CAAC;GAChD;EAED,KAAK,CAAC,aAAa,CAAC,CAAC,iBAAiB,CAAC,GAAG,OAAO,CAAC;EAClD,OAAO,OAAO,CAAC;AACnB,EAAE;MAEW,iBAAiB,GAAG,CAAC,GAAW,EAAE,IAAU;EACrD,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;IACf,OAAO,GAAG,CAAC;GACd;EAED,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;IACjC,MAAM,KAAK,GAAG,IAAI,GAAG,GAAG,CAAC;IACzB,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;GACxD;EAED,OAAO,GAAG,CAAC;AACf;;;;","names":[],"sources":["./src/utils/localization.ts"],"sourcesContent":["const getComponentClosestLanguage = (element: HTMLElement): string => {\n    const closestElement = element.closest('[lang]') as HTMLElement;\n    const htmlElement = document.documentElement;\n\n    return closestElement\n        ? closestElement.lang\n        : htmlElement?.lang\n        ? htmlElement.lang\n        : 'en';\n};\n\nconst fetchLocaleStringsForComponent = (\n    componentName: string,\n    locale: string\n): Promise<any> => {\n    return new Promise((resolve, reject): void => {\n        fetch(`/assets/i18n/${componentName}.i18n.${locale}.json`).then(\n            (result) => {\n                if (result.ok) {\n                    resolve(result.json());\n                    return;\n                }\n\n                reject();\n            },\n            () => reject()\n        );\n    });\n};\n\nconst cache = {};\n\nexport const getLocaleComponentStrings = async (\n    element: HTMLElement\n): Promise<any> => {\n    let componentName = element.tagName.toLowerCase().replace('p-', '');\n    let componentLanguage = getComponentClosestLanguage(element);\n    let strings;\n\n    if (cache[componentName]?.[componentLanguage]) {\n        return cache[componentName][componentLanguage];\n    }\n\n    try {\n        strings = await fetchLocaleStringsForComponent(\n            componentName,\n            componentLanguage\n        );\n    } catch (e) {\n        console.warn(\n            `no locale for ${componentName} (${componentLanguage}) loading default locale en.`\n        );\n        strings = await fetchLocaleStringsForComponent(componentName, 'en');\n    }\n\n    if (!cache[componentName]) {\n        cache[componentName] = {};\n    }\n\n    if (!cache[componentName][componentLanguage]) {\n        cache[componentName][componentLanguage] = {};\n    }\n\n    cache[componentName][componentLanguage] = strings;\n    return strings;\n};\n\nexport const formatTranslation = (str: string, data?: any) => {\n    if (!str || !data) {\n        return str;\n    }\n\n    for (const key of Object.keys(data)) {\n        const regex = `{${key}}`;\n        str = str.replace(new RegExp(regex, 'g'), data[key]);\n    }\n\n    return str;\n};\n"],"version":3}

package/dist/components/modal-body.component.js

@@ -1,23 +1,22 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const modalBodyComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.w-80{width:20rem!important}.px-14{padding-left:3.5rem!important;padding-right:3.5rem!important}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}:host{padding:1.5rem 3.5rem}:host(.variant-table){padding-left:1.5rem;padding-right:1.5rem}.w-\\[33\\.5rem\\]{width:33.5rem!important}.w-\\[38rem\\]{width:38rem!important}.w-\\[47\\.5rem\\]{width:47.5rem!important}.w-\\[57\\.5rem\\]{width:57.5rem!important}";
+const modalBodyComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.px-14{padding-left:3.5rem!important;padding-right:3.5rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));padding:1.5rem}@media (min-width:40rem){:host{padding-left:2.5rem;padding-right:2.5rem}}@media (min-width:64rem){:host{padding-left:3.5rem;padding-right:3.5rem}}:host(.variant-table){padding-left:1.5rem;padding-right:1.5rem}:host(.is-rounded){border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width:64rem){:host(.is-rounded){border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}@media (min-width:40rem){.tablet\\:px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}}@media (min-width:64rem){.desktop-xs\\:px-14{padding-left:3.5rem!important;padding-right:3.5rem!important}}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}";
 
-const ModalBody = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const ModalBody = /*@__PURE__*/ proxyCustomElement(class ModalBody extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /**
-     * The variant of the modal body
-     */
     this.variant = 'default';
+    this.rounded = false;
   }
   render() {
-    return (h(Host, { class: `p-modal-body variant-${this.variant}` }, h("slot", null)));
+    return (h(Host, { class: `p-modal-body variant-${this.variant} ${this.rounded && 'is-rounded'}` }, h("slot", null)));
   }
   static get style() { return modalBodyComponentCss; }
 }, [1, "p-modal-body", {
-    "variant": [1]
+    "variant": [1],
+    "rounded": [4]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -34,3 +33,5 @@ function defineCustomElement() {
 }
 
 export { ModalBody as M, defineCustomElement as d };
+
+//# sourceMappingURL=modal-body.component.js.map

package/dist/components/modal-body.component.js.map

@@ -0,0 +1 @@
+{"file":"modal-body.component.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,09LAA09L;;MCO3+L,SAAS;;;;;mBAIqB,SAAS;mBAKrB,KAAK;;EAEhC,MAAM;IACF,QACI,EAAC,IAAI,IACD,KAAK,EAAE,wBAAwB,IAAI,CAAC,OAAO,IACvC,IAAI,CAAC,OAAO,IAAI,YACpB,EAAE,IAEF,eAAQ,CACL,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/modal-body/modal-body.component.scss?tag=p-modal-body&encapsulation=shadow","./src/components/atoms/modal-body/modal-body.component.tsx"],"sourcesContent":[":host {\n    @apply bg-white;\n    @apply px-6 tablet:px-10 desktop-xs:px-14 py-6;\n}\n\n:host(.variant-table) {\n    @apply px-6;\n}\n\n:host(.is-rounded) {\n    @apply rounded-b-none desktop-xs:rounded-b-xxlarge;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-body',\n    styleUrl: 'modal-body.component.scss',\n    shadow: true,\n})\nexport class ModalBody {\n    /**\n     * The variant of the modal body\n     */\n    @Prop() variant: 'default' | 'table' = 'default';\n\n    /**\n     * Wether the modal body should be rounded at the bottom\n     */\n    @Prop() rounded: boolean = false;\n\n    render() {\n        return (\n            <Host\n                class={`p-modal-body variant-${this.variant} ${\n                    this.rounded && 'is-rounded'\n                }`}\n            >\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/modal-container.component.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const modalContainerComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.flex{display:flex!important}.w-80{width:20rem!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.shadow-4{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}p-modal-container{--tw-bg-opacity:1;--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.75rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;display:flex;flex-direction:column;overflow:hidden}.w-\\[33\\.5rem\\]{width:33.5rem!important}.w-\\[38rem\\]{width:38rem!important}.w-\\[47\\.5rem\\]{width:47.5rem!important}.w-\\[57\\.5rem\\]{width:57.5rem!important}";
+const modalContainerComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}@keyframes slideInBottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.animate-slide-in-bottom{animation:slideInBottom .5s ease forwards!important}@keyframes slideOutBottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.animate-slide-out-bottom{animation:slideOutBottom .5s ease forwards!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.rounded-t-xxlarge{border-top-left-radius:.75rem!important;border-top-right-radius:.75rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.shadow-4{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}*{box-sizing:border-box}p-modal-container{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;animation:slideInBottom .5s ease forwards!important;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:.75rem;border-top-right-radius:.75rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;display:flex;flex-direction:column;width:100%;z-index:600}@media (min-width:40rem){p-modal-container{width:auto}}@media (min-width:64rem){p-modal-container{animation:slideInBottomSmall .5s ease forwards!important;border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}p-modal-container.closing{animation:slideOutBottom .5s ease forwards!important}@media (min-width:64rem){p-modal-container.closing{animation:slideOutBottomSmall .5s ease forwards!important}}@media (min-width:40rem){.tablet\\:w-auto{width:auto!important}}@media (min-width:64rem){@keyframes slideInBottomSmall{0%{transform:translateY(20%)}to{transform:translateY(0)}}.desktop-xs\\:animate-slide-in-bottom-small{animation:slideInBottomSmall .5s ease forwards!important}@keyframes slideOutBottomSmall{0%{transform:translateY(0)}to{transform:translateY(20%)}}.desktop-xs\\:animate-slide-out-bottom-small{animation:slideOutBottomSmall .5s ease forwards!important}}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}";
 
 // $modal-xs: 20rem;
 // $modal-sm: 33.5rem;
@@ -8,28 +8,27 @@ const modalContainerComponentCss = ".static{position:static!important}.mb-6{marg
 // $modal-lg: 47.5rem;
 // $modal-xl: 57.5rem;
 const modalSizes = {
-  xs: 'w-80',
-  sm: 'w-[33.5rem]',
-  md: 'w-[38rem]',
-  lg: 'w-[47.5rem]',
-  xl: 'w-[57.5rem]',
+  xs: 'tablet:w-80',
+  sm: 'tablet:w-[33.5rem]',
+  md: 'tablet:w-[38rem]',
+  lg: 'tablet:w-[47.5rem]',
+  xl: 'tablet:w-[57.5rem]',
 };
-const ModalContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const ModalContainer = /*@__PURE__*/ proxyCustomElement(class ModalContainer extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * The size of the modal container
-     */
     this.size = 'md';
+    this.closing = false;
   }
   render() {
     const sizeClass = modalSizes[this.size];
-    return (h(Host, { class: `p-modal-container ${sizeClass}` }, h("slot", null)));
+    return (h(Host, { class: `p-modal-container ${this.closing && 'closing'} ${sizeClass}` }, h("slot", null)));
   }
   static get style() { return modalContainerComponentCss; }
 }, [4, "p-modal-container", {
-    "size": [1]
+    "size": [1],
+    "closing": [4]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -46,3 +45,5 @@ function defineCustomElement() {
 }
 
 export { ModalContainer as M, defineCustomElement as d };
+
+//# sourceMappingURL=modal-container.component.js.map

package/dist/components/modal-container.component.js.map

@@ -0,0 +1 @@
+{"file":"modal-container.component.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,02OAA02O;;ACE74O;AACA;AACA;AACA;AACA;AAEA,MAAM,UAAU,GAAG;EACf,EAAE,EAAE,aAAa;EACjB,EAAE,EAAE,oBAAoB;EACxB,EAAE,EAAE,kBAAkB;EACtB,EAAE,EAAE,oBAAoB;EACxB,EAAE,EAAE,oBAAoB;CAC3B,CAAC;MAKW,cAAc;;;;gBAImB,IAAI;mBAKnB,KAAK;;EAEhC,MAAM;IACF,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAExC,QACI,EAAC,IAAI,IACD,KAAK,EAAE,qBACH,IAAI,CAAC,OAAO,IAAI,SACpB,IAAI,SAAS,EAAE,IAEf,eAAQ,CACL,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/modal-container/modal-container.component.scss?tag=p-modal-container","./src/components/atoms/modal-container/modal-container.component.tsx"],"sourcesContent":["p-modal-container {\n    @apply flex flex-col w-full tablet:w-auto z-modal;\n    @apply rounded-b-none rounded-t-xxlarge desktop-xs:rounded-b-xxlarge;\n\n    @apply animate-slide-in-bottom desktop-xs:animate-slide-in-bottom-small #{!important};\n\n    @apply shadow-4 #{!important};\n\n    &.closing {\n        @apply animate-slide-out-bottom desktop-xs:animate-slide-out-bottom-small #{!important};\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// $modal-xs: 20rem;\n// $modal-sm: 33.5rem;\n// $modal-md: 38rem;\n// $modal-lg: 47.5rem;\n// $modal-xl: 57.5rem;\n\nconst modalSizes = {\n    xs: 'tablet:w-80',\n    sm: 'tablet:w-[33.5rem]',\n    md: 'tablet:w-[38rem]',\n    lg: 'tablet:w-[47.5rem]',\n    xl: 'tablet:w-[57.5rem]',\n};\n@Component({\n    tag: 'p-modal-container',\n    styleUrl: 'modal-container.component.scss',\n})\nexport class ModalContainer {\n    /**\n     * The size of the modal container\n     */\n    @Prop() size: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n    /**\n     * Wether the container is closing\n     */\n    @Prop() closing: boolean = false;\n\n    render() {\n        const sizeClass = modalSizes[this.size];\n\n        return (\n            <Host\n                class={`p-modal-container ${\n                    this.closing && 'closing'\n                } ${sizeClass}`}\n            >\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/modal-footer.component.js

@@ -1,16 +1,16 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './divider.component.js';
 
-const modalFooterComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.flex{display:flex!important}.w-80{width:20rem!important}.pb-6{padding-bottom:1.5rem!important}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}:host{display:flex;flex-direction:column;padding-bottom:1.5rem;padding-left:1.5rem;padding-right:1.5rem}.w-\\[33\\.5rem\\]{width:33.5rem!important}.w-\\[38rem\\]{width:38rem!important}.w-\\[47\\.5rem\\]{width:47.5rem!important}.w-\\[57\\.5rem\\]{width:57.5rem!important}";
+const modalFooterComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.rounded{border-radius:.25rem!important}.rounded-b-none{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.pb-6{padding-bottom:1.5rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-bottom-left-radius:0;border-bottom-right-radius:0;display:flex;flex-direction:column;padding-bottom:1.5rem;padding-left:1.5rem;padding-right:1.5rem}@media (min-width:64rem){:host{border-bottom-left-radius:.75rem;border-bottom-right-radius:.75rem}}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}";
 
-const ModalFooter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const ModalFooter = /*@__PURE__*/ proxyCustomElement(class ModalFooter extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
   }
   render() {
-    return (h(Host, { class: "p-modal-footer" }, h("p-divider", { class: "mb-6 mt-0" }), h("slot", null)));
+    return (h(Host, { class: "p-modal-footer" }, h("p-divider", { class: "mb-6 mt-0 hidden desktop-xs:flex" }), h("slot", null)));
   }
   static get style() { return modalFooterComponentCss; }
 }, [1, "p-modal-footer"]);
@@ -34,3 +34,5 @@ function defineCustomElement() {
 }
 
 export { ModalFooter as M, defineCustomElement as d };
+
+//# sourceMappingURL=modal-footer.component.js.map

package/dist/components/modal-footer.component.js.map

@@ -0,0 +1 @@
+{"file":"modal-footer.component.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,ygLAAygL;;MCO5hL,WAAW;;;;;;EACpB,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB,IACxB,iBAAW,KAAK,EAAC,kCAAkC,GAAG,EAEtD,eAAQ,CACL,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/modal-footer/modal-footer.component.scss?tag=p-modal-footer&encapsulation=shadow","./src/components/atoms/modal-footer/modal-footer.component.tsx"],"sourcesContent":[":host {\n    @apply bg-white;\n    @apply flex flex-col;\n    @apply pb-6 px-6;\n    @apply rounded-b-none desktop-xs:rounded-b-xxlarge;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-footer',\n    styleUrl: 'modal-footer.component.scss',\n    shadow: true,\n})\nexport class ModalFooter {\n    render() {\n        return (\n            <Host class=\"p-modal-footer\">\n                <p-divider class=\"mb-6 mt-0 hidden desktop-xs:flex\" />\n\n                <slot />\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/modal-header.component.js

@@ -1,30 +1,54 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './button.component.js';
+import { d as defineCustomElement$2 } from './icon.component.js';
+import { d as defineCustomElement$1 } from './loader.component.js';
 
-const modalHeaderComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.block{display:block!important}.w-80{width:20rem!important}.border-b{border-bottom-width:1px!important}.border-b-mystic-medium{--tw-border-opacity:1!important;border-bottom-color:rgb(227 236 243/var(--tw-border-opacity))!important}.px-8{padding-left:2rem!important;padding-right:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}:host{--tw-bg-opacity:1;--tw-text-opacity:1;--tw-border-opacity:1!important;background-color:rgb(247 250 252/var(--tw-bg-opacity));border-bottom-color:rgb(227 236 243/var(--tw-border-opacity))!important;border-bottom-width:1px!important;color:rgb(39 40 56/var(--tw-text-opacity));display:block;font-size:1.875rem;font-weight:700;line-height:2.25rem;padding:1.5rem 2rem}.w-\\[33\\.5rem\\]{width:33.5rem!important}.w-\\[38rem\\]{width:38rem!important}.w-\\[47\\.5rem\\]{width:47.5rem!important}.w-\\[57\\.5rem\\]{width:57.5rem!important}";
+const modalHeaderComponentCss = ".static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.inline{display:inline!important}.flex{display:flex!important}.hidden{display:none!important}.w-full{width:100%!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.rounded{border-radius:.25rem!important}.bg-mystic{--tw-bg-opacity:1!important;background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:rgb(247 250 252/var(--tw-bg-opacity));border-top-left-radius:.75rem;border-top-right-radius:.75rem;color:rgb(39 40 56/var(--tw-text-opacity));display:flex;font-size:1.25rem;font-weight:600;justify-content:space-between;line-height:1.75rem;padding:1rem}@media (min-width:64rem){:host{font-size:1.875rem;font-weight:700;line-height:2.25rem;padding:1.5rem}.desktop-xs\\:text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}";
 
-const ModalHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const ModalHeader = /*@__PURE__*/ proxyCustomElement(class ModalHeader extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.close = createEvent(this, "close", 7);
+    this.showClose = true;
   }
   render() {
-    return (h(Host, { class: "p-modal-header" }, h("slot", null)));
+    return (h(Host, { class: "p-modal-header" }, h("span", null, h("slot", null)), this.showClose && (h("p-button", { variant: "secondary", icon: "negative", iconOnly: true, onClick: (ev) => this.close.emit(ev), size: "small" }))));
   }
   static get style() { return modalHeaderComponentCss; }
-}, [1, "p-modal-header"]);
+}, [1, "p-modal-header", {
+    "showClose": [4, "show-close"]
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["p-modal-header"];
+  const components = ["p-modal-header", "p-button", "p-icon", "p-loader"];
   components.forEach(tagName => { switch (tagName) {
     case "p-modal-header":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, ModalHeader);
       }
       break;
+    case "p-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "p-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "p-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
   } });
 }
 
 export { ModalHeader as M, defineCustomElement as d };
+
+//# sourceMappingURL=modal-header.component.js.map

package/dist/components/modal-header.component.js.map

@@ -0,0 +1 @@
+{"file":"modal-header.component.js","mappings":";;;;;AAAA,MAAM,uBAAuB,GAAG,81LAA81L;;MCOj3L,WAAW;;;;;;qBAIA,IAAI;;EAOxB,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB,IACxB,gBACI,eAAQ,CACL,EAEN,IAAI,CAAC,SAAS,KACX,gBACI,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,EACpC,IAAI,EAAC,OAAO,GACJ,CACf,CACE,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/modal-header/modal-header.component.scss?tag=p-modal-header&encapsulation=shadow","./src/components/atoms/modal-header/modal-header.component.tsx"],"sourcesContent":[":host {\n    @apply bg-mystic rounded-t-xxlarge;\n    @apply flex justify-between items-center;\n    @apply p-4 desktop-xs:p-6;\n\n    @apply text-storm-dark text-xl font-semibold;\n    @apply desktop-xs:text-3xl desktop-xs:font-bold;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-modal-header',\n    styleUrl: 'modal-header.component.scss',\n    shadow: true,\n})\nexport class ModalHeader {\n    /**\n     * Wether to show the close button on mobile\n     */\n    @Prop() showClose = true;\n\n    /**\n     * Close click event\n     */\n    @Event() close: EventEmitter<MouseEvent>;\n\n    render() {\n        return (\n            <Host class=\"p-modal-header\">\n                <span>\n                    <slot />\n                </span>\n\n                {this.showClose && (\n                    <p-button\n                        variant=\"secondary\"\n                        icon=\"negative\"\n                        iconOnly={true}\n                        onClick={(ev) => this.close.emit(ev)}\n                        size=\"small\"\n                    ></p-button>\n                )}\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/object-get-by-path.js

@@ -0,0 +1,12 @@
+const objectGetByPath = (obj, path, defaultValue = undefined) => {
+  const travel = (regexp) => String.prototype.split
+    .call(path, regexp)
+    .filter(Boolean)
+    .reduce((res, key) => res !== null && res !== undefined ? res[key] : res, obj);
+  const result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/);
+  return result === undefined || result === obj ? defaultValue : result;
+};
+
+export { objectGetByPath as o };
+
+//# sourceMappingURL=object-get-by-path.js.map

package/dist/components/object-get-by-path.js.map

@@ -0,0 +1 @@
+{"file":"object-get-by-path.js","mappings":"MAAa,eAAe,GAAG,CAC3B,GAAQ,EACR,IAAY,EACZ,YAAY,GAAG,SAAS;EAExB,MAAM,MAAM,GAAG,CAAC,MAAM,KAClB,MAAM,CAAC,SAAS,CAAC,KAAK;KACjB,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC;KAClB,MAAM,CAAC,OAAO,CAAC;KACf,MAAM,CACH,CAAC,GAAG,EAAE,GAAG,KACL,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,EACtD,GAAG,CACN,CAAC;EACV,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,MAAM,CAAC,WAAW,CAAC,CAAC;EACzD,OAAO,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,GAAG,GAAG,YAAY,GAAG,MAAM,CAAC;AAC1E;;;;","names":[],"sources":["./src/utils/object-get-by-path.ts"],"sourcesContent":["export const objectGetByPath = (\n    obj: any,\n    path: string,\n    defaultValue = undefined\n) => {\n    const travel = (regexp) =>\n        String.prototype.split\n            .call(path, regexp)\n            .filter(Boolean)\n            .reduce(\n                (res, key) =>\n                    res !== null && res !== undefined ? res[key] : res,\n                obj\n            );\n    const result = travel(/[,[\\]]+?/) || travel(/[,[\\].]+?/);\n    return result === undefined || result === obj ? defaultValue : result;\n};\n"],"version":3}

package/dist/components/p-accordion.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PAccordion extends Components.PAccordion, HTMLElement {}
+export const PAccordion: {
+  prototype: PAccordion;
+  new (): PAccordion;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/p-accordion.js

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './divider.component.js';
+import { d as defineCustomElement$2 } from './icon.component.js';
+
+const accordionComponentCss = ".static{position:static!important}.m-0{margin:0!important}.mt-6{margin-top:1.5rem!important}.block{display:block!important}.flex{display:flex!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.gap-3{gap:.75rem!important}.whitespace-nowrap{white-space:nowrap!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.font-medium{font-weight:500!important}.text-storm-vague{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host{display:block;margin-bottom:1.5rem}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}";
+
+const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.isOpen = createEvent(this, "isOpen", 7);
+    this.header = undefined;
+    this.open = false;
+    this.closeable = true;
+    this.openable = true;
+  }
+  render() {
+    return (h(Host, { class: "p-accordion" }, h("div", { class: "flex items-center gap-3 text-storm-vague cursor-pointer", onClick: () => this._onClick() }, h("p-icon", { class: "flex", variant: "chevron", rotate: this.open ? 0 : -90 }), h("p", { class: "m-0 font-medium text-lg whitespace-nowrap" }, this.header), h("p-divider", null)), this.open && (h("div", { class: "mt-6" }, h("slot", null)))));
+  }
+  _onClick() {
+    if (!this.closeable && this.open) {
+      return;
+    }
+    if (!this.openable && !this.open) {
+      return;
+    }
+    this.open = !this.open;
+    this.isOpen.emit(this.open);
+  }
+  static get style() { return accordionComponentCss; }
+}, [1, "p-accordion", {
+    "header": [1],
+    "open": [4],
+    "closeable": [4],
+    "openable": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-accordion", "p-divider", "p-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Accordion);
+      }
+      break;
+    case "p-divider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "p-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const PAccordion = Accordion;
+const defineCustomElement = defineCustomElement$1;
+
+export { PAccordion, defineCustomElement };
+
+//# sourceMappingURL=p-accordion.js.map

package/dist/components/p-accordion.js.map

@@ -0,0 +1 @@
+{"file":"p-accordion.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,03JAA03J;;MCO34J,SAAS;;;;;;;gBASM,KAAK;qBAKA,IAAI;oBAKL,IAAI;;EAOhC,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,aAAa,IACrB,WACI,KAAK,EAAC,yDAAyD,EAC/D,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,IAE9B,cACI,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,SAAS,EACjB,MAAM,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,GAC7B,EACF,SAAG,KAAK,EAAC,2CAA2C,IAC/C,IAAI,CAAC,MAAM,CACZ,EACJ,oBAAa,CACX,EACL,IAAI,CAAC,IAAI,KACN,WAAK,KAAK,EAAC,MAAM,IACb,eAAQ,CACN,CACT,CACE,EACT;GACL;EAEO,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE;MAC9B,OAAO;KACV;IAED,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MAC9B,OAAO;KACV;IAED,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/molecules/accordion/accordion.component.scss?tag=p-accordion&encapsulation=shadow","./src/components/molecules/accordion/accordion.component.tsx"],"sourcesContent":[":host {\n    @apply block mb-6;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-accordion',\n    styleUrl: 'accordion.component.scss',\n    shadow: true,\n})\nexport class Accordion {\n    /**\n     * Header of the accordion\n     */\n    @Prop() header!: string;\n\n    /**\n     * Wether the accordion is open\n     */\n    @Prop() open: boolean = false;\n\n    /**\n     * Wether the accordion can be closed\n     */\n    @Prop() closeable: boolean = true;\n\n    /**\n     * Wether the accordion can be opened\n     */\n    @Prop() openable: boolean = true;\n\n    /**\n     * Open change event\n     */\n    @Event() isOpen: EventEmitter<boolean>;\n\n    render() {\n        return (\n            <Host class=\"p-accordion\">\n                <div\n                    class=\"flex items-center gap-3 text-storm-vague cursor-pointer\"\n                    onClick={() => this._onClick()}\n                >\n                    <p-icon\n                        class=\"flex\"\n                        variant=\"chevron\"\n                        rotate={this.open ? 0 : -90}\n                    />\n                    <p class=\"m-0 font-medium text-lg whitespace-nowrap\">\n                        {this.header}\n                    </p>\n                    <p-divider />\n                </div>\n                {this.open && (\n                    <div class=\"mt-6\">\n                        <slot />\n                    </div>\n                )}\n            </Host>\n        );\n    }\n\n    private _onClick() {\n        if (!this.closeable && this.open) {\n            return;\n        }\n\n        if (!this.openable && !this.open) {\n            return;\n        }\n\n        this.open = !this.open;\n        this.isOpen.emit(this.open);\n    }\n}\n"],"version":3}

package/dist/components/p-attachment.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PAttachment extends Components.PAttachment, HTMLElement {}
+export const PAttachment: {
+  prototype: PAttachment;
+  new (): PAttachment;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/p-attachment.js

@@ -0,0 +1,88 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$6 } from './button.component.js';
+import { d as defineCustomElement$5 } from './icon.component.js';
+import { d as defineCustomElement$4 } from './input-error.component.js';
+import { d as defineCustomElement$3 } from './loader.component.js';
+import { d as defineCustomElement$2 } from './tooltip.component.js';
+
+const attachmentComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.block{display:block!important}.inline{display:inline!important}.flex{display:flex!important}.h-8{height:2rem!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-315{--tw-rotate:-315deg!important}.-rotate-315,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-90,.rotate-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-0{--tw-rotate:0deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-270{--tw-rotate:270deg!important}.rotate-270,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-315{--tw-rotate:315deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.items-start{align-items:flex-start!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-center{justify-content:center!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded-large{border-radius:.375rem!important}.bg-mystic{--tw-bg-opacity:1!important;background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.text-negative{color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative,.text-negative-light{--tw-text-opacity:1!important}.text-negative-light{color:rgb(255 204 211/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}:host{display:block;width:100%}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}";
+
+const Attachment = /*@__PURE__*/ proxyCustomElement(class Attachment extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.download = createEvent(this, "download", 7);
+    this.delete = createEvent(this, "delete", 7);
+    this.mode = 'read';
+    this.loading = false;
+    this.error = undefined;
+    this.downloading = false;
+  }
+  render() {
+    var _a, _b;
+    let prefix = h("p-icon", { variant: "attachment" });
+    if (this.loading) {
+      prefix = h("p-loader", null);
+    }
+    if (this.error) {
+      prefix = h("p-icon", { variant: "warning", class: "text-negative" });
+    }
+    return (h(Host, { class: "p-attachment flex items-start gap-4" }, h("div", { class: `flex h-8 min-w-0 flex-1 items-center justify-start gap-2 rounded-large bg-mystic px-2 ${((_a = this.error) === null || _a === void 0 ? void 0 : _a.length)
+        ? 'text-negative'
+        : 'text-storm-medium'}` }, prefix, h("span", { class: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap" }, h("slot", null)), ((_b = this.error) === null || _b === void 0 ? void 0 : _b.length) && h("p-input-error", { error: this.error })), h("p-button", { variant: "secondary", iconOnly: true, icon: this.mode === 'read' ? 'download' : 'trash', disabled: this.loading, loading: this.mode === 'read' && this.downloading, size: "small", onOnClick: () => (this.mode === 'read'
+        ? this.download
+        : this.delete).emit() })));
+  }
+  static get style() { return attachmentComponentCss; }
+}, [1, "p-attachment", {
+    "mode": [1],
+    "loading": [4],
+    "error": [1],
+    "downloading": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-attachment", "p-button", "p-icon", "p-input-error", "p-loader", "p-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-attachment":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Attachment);
+      }
+      break;
+    case "p-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "p-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "p-input-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "p-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "p-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const PAttachment = Attachment;
+const defineCustomElement = defineCustomElement$1;
+
+export { PAttachment, defineCustomElement };
+
+//# sourceMappingURL=p-attachment.js.map

package/dist/components/p-attachment.js.map

@@ -0,0 +1 @@
+{"file":"p-attachment.js","mappings":";;;;;;;AAAA,MAAM,sBAAsB,GAAG,q4LAAq4L;;MCOv5L,UAAU;;;;;;;gBAIc,MAAM;mBAKrB,KAAK;;uBAeD,KAAK;;EAO3B,MAAM;;IACF,IAAI,MAAM,GAAG,cAAQ,OAAO,EAAC,YAAY,GAAG,CAAC;IAE7C,IAAI,IAAI,CAAC,OAAO,EAAE;MACd,MAAM,GAAG,mBAAY,CAAC;KACzB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,MAAM,GAAG,cAAQ,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,eAAe,GAAG,CAAC;KAC/D;IAED,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,qCAAqC,IAC7C,WACI,KAAK,EAAE,yFACH,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM;UACZ,eAAe;UACf,mBACV,EAAE,IAED,MAAM,EAEP,YAAM,KAAK,EAAC,gEAAgE,IACxE,eAAQ,CACL,EAEN,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,KAAI,qBAAe,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CACzD,EAEN,gBACI,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,IAAI,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,UAAU,GAAG,OAAO,EACjD,QAAQ,EAAE,IAAI,CAAC,OAAO,EACtB,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,EACjD,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,MACP,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM;UACf,IAAI,CAAC,QAAQ;UACb,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,GAEd,CACC,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/molecules/attachment/attachment.component.scss?tag=p-attachment&encapsulation=shadow","./src/components/molecules/attachment/attachment.component.tsx"],"sourcesContent":[":host {\n    @apply block w-full;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-attachment',\n    styleUrl: 'attachment.component.scss',\n    shadow: true,\n})\nexport class Attachment {\n    /**\n     * The variant of the button\n     */\n    @Prop() mode: 'read' | 'write' = 'read';\n\n    /**\n     * Wether the attachment is uploading/loading\n     */\n    @Prop() loading = false;\n\n    /**\n     * The error to show\n     */\n    @Prop() error: string;\n\n    /**\n     * Event when download is pressed\n     */\n    @Event() download: EventEmitter<any>;\n\n    /**\n     * Wether the attachment is downloading\n     */\n    @Prop() downloading = false;\n\n    /**\n     * Event when delete is pressed\n     */\n    @Event() delete: EventEmitter<any>;\n\n    render() {\n        let prefix = <p-icon variant=\"attachment\" />;\n\n        if (this.loading) {\n            prefix = <p-loader />;\n        }\n\n        if (this.error) {\n            prefix = <p-icon variant=\"warning\" class=\"text-negative\" />;\n        }\n\n        return (\n            <Host class=\"p-attachment flex items-start gap-4\">\n                <div\n                    class={`flex h-8 min-w-0 flex-1 items-center justify-start gap-2 rounded-large bg-mystic px-2 ${\n                        this.error?.length\n                            ? 'text-negative'\n                            : 'text-storm-medium'\n                    }`}\n                >\n                    {prefix}\n\n                    <span class=\"min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap\">\n                        <slot />\n                    </span>\n\n                    {this.error?.length && <p-input-error error={this.error} />}\n                </div>\n\n                <p-button\n                    variant=\"secondary\"\n                    iconOnly={true}\n                    icon={this.mode === 'read' ? 'download' : 'trash'}\n                    disabled={this.loading}\n                    loading={this.mode === 'read' && this.downloading}\n                    size=\"small\"\n                    onOnClick={() =>\n                        (this.mode === 'read'\n                            ? this.download\n                            : this.delete\n                        ).emit()\n                    }\n                />\n            </Host>\n        );\n    }\n}\n"],"version":3}

package/dist/components/p-avatar-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PAvatarGroup extends Components.PAvatarGroup, HTMLElement {}
+export const PAvatarGroup: {
+  prototype: PAvatarGroup;
+  new (): PAvatarGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/p-avatar-group.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const avatarGroupComponentCss = ".static{position:static!important}.flex{display:flex!important}.hidden{display:none!important}.-space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0!important;margin-left:calc(-.25rem*(1 - var(--tw-space-x-reverse)))!important;margin-right:calc(-.25rem*var(--tw-space-x-reverse))!important}.overflow-hidden{overflow:hidden!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-storm-vague{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity))!important}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}*{box-sizing:border-box}p-avatar-group{align-items:center;display:flex;overflow:hidden}p-avatar-group>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(-.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(-.25rem*var(--tw-space-x-reverse))}p-avatar-group p-avatar>img{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1;--tw-ring-color:rgb(255 255 255/var(--tw-ring-opacity));box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}p-avatar-group p-avatar:first-child{z-index:3}p-avatar-group p-avatar:nth-child(2){z-index:2}p-avatar-group p-avatar:nth-child(3){z-index:1}p-avatar-group .extra{--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;padding-left:1rem}";
+
+const AvatarGroup = /*@__PURE__*/ proxyCustomElement(class AvatarGroup extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.extra = undefined;
+  }
+  render() {
+    return (h(Host, { class: "p-avatar-group" }, h("slot", null), this.extra && h("span", { class: "extra" }, "+", this.extra)));
+  }
+  static get style() { return avatarGroupComponentCss; }
+}, [4, "p-avatar-group", {
+    "extra": [2]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-avatar-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-avatar-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AvatarGroup);
+      }
+      break;
+  } });
+}
+
+const PAvatarGroup = AvatarGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { PAvatarGroup, defineCustomElement };
+
+//# sourceMappingURL=p-avatar-group.js.map

package/dist/components/p-avatar-group.js.map

@@ -0,0 +1 @@
+{"file":"p-avatar-group.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,kxDAAkxD;;MCOryD,WAAW;;;;;;EAMpB,MAAM;IACF,QACI,EAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB,IACxB,eAAQ,EAEP,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,OAAO,SAAG,IAAI,CAAC,KAAK,CAAQ,CACpD,EACT;GACL;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/atoms/avatar-group/avatar-group.component.scss?tag=p-avatar-group","./src/components/atoms/avatar-group/avatar-group.component.tsx"],"sourcesContent":["p-avatar-group {\n    @apply flex -space-x-1 overflow-hidden items-center;\n\n    p-avatar > img {\n        @apply ring-2 ring-white;\n    }\n\n    p-avatar:nth-child(1) {\n        z-index: 3;\n    }\n\n    p-avatar:nth-child(2) {\n        z-index: 2;\n    }\n\n    p-avatar:nth-child(3) {\n        z-index: 1;\n    }\n\n    .extra {\n        @apply text-sm text-storm-vague pl-4;\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'p-avatar-group',\n    styleUrl: 'avatar-group.component.scss',\n    // shadow: true,\n})\nexport class AvatarGroup {\n    /**\n     * The amount to show after the avatars\n     */\n    @Prop() extra: number;\n\n    render() {\n        return (\n            <Host class=\"p-avatar-group\">\n                <slot />\n\n                {this.extra && <span class=\"extra\">+{this.extra}</span>}\n            </Host>\n        );\n    }\n}\n"],"version":3}