@paperless/core 0.1.0-alpha.41 → 0.1.0-alpha.45

package/dist/collection/collection-manifest.json

@@ -14,12 +14,18 @@
     "./components/atoms/helper/helper.component.js",
     "./components/atoms/info-panel/info-panel.component.js",
     "./components/atoms/loader/loader.component.js",
+    "./components/atoms/modal-backdrop/modal-backdrop.component.js",
+    "./components/atoms/modal-body/modal-body.component.js",
+    "./components/atoms/modal-container/modal-container.component.js",
+    "./components/atoms/modal-footer/modal-footer.component.js",
+    "./components/atoms/modal-header/modal-header.component.js",
     "./components/atoms/pagination-item/pagination-item.component.js",
     "./components/atoms/segment-container/segment-container.component.js",
     "./components/atoms/segment-item/segment-item.component.js",
     "./components/atoms/status/status.component.js",
     "./components/atoms/tooltip/tooltip.component.js",
     "./components/molecules/dropdown/dropdown.component.js",
+    "./components/molecules/modal/modal.component.js",
     "./components/molecules/navigation-item/navigation-item.component.js",
     "./components/molecules/pagination/pagination.component.js"
   ],

package/dist/collection/components/atoms/divider/divider.component.css

@@ -1 +1,3 @@
- .static{position:static!important}.my-2{margin-bottom:.5rem!important;margin-top:.5rem!important}.h-px{height:1px!important}.w-full{width:100%!important}.bg-mystic-medium{--tw-bg-opacity:1!important;background-color:rgb(227 236 243/var(--tw-bg-opacity))!important}
+:host {
+  @apply block h-px bg-mystic-medium my-2 w-full;
+} .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}}.static{position:static!important}.static{position:static!important}.static{position:static!important}.w-80{width:20rem!important}.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}.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}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.static{position:static!important}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.static{position:static!important}

package/dist/collection/components/atoms/divider/divider.component.js

@@ -1,7 +1,7 @@
 import { Component, h, Host } from '@stencil/core';
 export class Divider {
   render() {
-    return (h(Host, { class: "p-divider h-px bg-mystic-medium my-2 w-full" }));
+    return h(Host, { class: "p-divider" });
   }
   static get is() { return "p-divider"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/modal-backdrop/modal-backdrop.component.css

@@ -0,0 +1,7 @@
+:host {
+  @apply fixed top-0 left-0 z-modal;
+  @apply h-screen w-screen p-16;
+  @apply backdrop-blur-xs bg-storm/50;
+  @apply flex justify-center items-center;
+  @apply animate-fade-in;
+} .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}}.static{position:static!important}.static{position:static!important}.static{position:static!important}.w-80{width:20rem!important}.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}.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}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.static{position:static!important}.static{position:static!important}

package/dist/collection/components/atoms/modal-backdrop/modal-backdrop.component.js

@@ -0,0 +1,15 @@
+import { Component, h, Host } from '@stencil/core';
+export class ModalBackdrop {
+  render() {
+    return (h(Host, { class: "p-modal-backdrop" },
+      h("slot", null)));
+  }
+  static get is() { return "p-modal-backdrop"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["modal-backdrop.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["modal-backdrop.component.css"]
+  }; }
+}

package/dist/collection/components/atoms/modal-body/modal-body.component.css

@@ -0,0 +1,7 @@
+:host {
+  @apply px-14 py-6;
+}
+
+:host(.variant-table) {
+  @apply px-6;
+} .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}}.static{position:static!important}.static{position:static!important}.static{position:static!important}.w-80{width:20rem!important}.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}.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}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.static{position:static!important}.static{position:static!important}

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

@@ -0,0 +1,41 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class ModalBody {
+  constructor() {
+    /**
+     * The variant of the modal body
+     */
+    this.variant = 'default';
+  }
+  render() {
+    return (h(Host, { class: `p-modal-body variant-${this.variant}` },
+      h("slot", null)));
+  }
+  static get is() { return "p-modal-body"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["modal-body.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["modal-body.component.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'table'",
+        "resolved": "\"default\" | \"table\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The variant of the modal body"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'default'"
+    }
+  }; }
+}

package/dist/collection/components/atoms/modal-container/modal-container.component.css

@@ -0,0 +1,6 @@
+p-modal-container {
+  @apply flex flex-col;
+  @apply bg-white rounded-xxlarge;
+  @apply overflow-hidden;
+  @apply shadow-4 !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}}.static{position:static!important}.static{position:static!important}.static{position:static!important}.w-80{width:20rem!important}.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}.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}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.static{position:static!important}.static{position:static!important}.w-80{width:20rem!important}.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}.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}}

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

@@ -0,0 +1,53 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+// $modal-xs: 20rem;
+// $modal-sm: 33.5rem;
+// $modal-md: 38rem;
+// $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]',
+};
+export class ModalContainer {
+  constructor() {
+    /**
+     * The size of the modal container
+     */
+    this.size = 'md';
+  }
+  render() {
+    const sizeClass = modalSizes[this.size];
+    return (h(Host, { class: `p-modal-container ${sizeClass}` },
+      h("slot", null)));
+  }
+  static get is() { return "p-modal-container"; }
+  static get originalStyleUrls() { return {
+    "$": ["modal-container.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["modal-container.component.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'sm' | 'md' | 'lg' | 'xl'",
+        "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the modal container"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'md'"
+    }
+  }; }
+}

package/dist/collection/components/atoms/modal-footer/modal-footer.component.css

@@ -0,0 +1,4 @@
+:host {
+  @apply flex flex-col;
+  @apply pb-6 px-6;
+} .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}}.static{position:static!important}.static{position:static!important}.static{position:static!important}.w-80{width:20rem!important}.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}.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}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.static{position:static!important}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}

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

@@ -0,0 +1,16 @@
+import { Component, h, Host } from '@stencil/core';
+export class ModalFooter {
+  render() {
+    return (h(Host, { class: "p-modal-footer" },
+      h("p-divider", { class: "mb-6 mt-0" }),
+      h("slot", null)));
+  }
+  static get is() { return "p-modal-footer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["modal-footer.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["modal-footer.component.css"]
+  }; }
+}

package/dist/collection/components/atoms/modal-header/modal-header.component.css

@@ -0,0 +1,6 @@
+:host {
+  @apply bg-mystic;
+  @apply block px-8 py-6;
+  @apply text-storm-dark text-3xl font-bold;
+  @apply border-b border-b-mystic-medium !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}}.static{position:static!important}.static{position:static!important}.static{position:static!important}.w-80{width:20rem!important}.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}.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}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.static{position:static!important}.static{position:static!important}

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

@@ -0,0 +1,15 @@
+import { Component, h, Host } from '@stencil/core';
+export class ModalHeader {
+  render() {
+    return (h(Host, { class: "p-modal-header" },
+      h("slot", null)));
+  }
+  static get is() { return "p-modal-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["modal-header.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["modal-header.component.css"]
+  }; }
+}

package/dist/collection/components/molecules/modal/modal.component.js

@@ -0,0 +1,111 @@
+import { Component, Element, h, Host, Prop } from '@stencil/core';
+export class Modal {
+  constructor() {
+    /**
+     * The size of the modal container
+     */
+    this.size = 'md';
+    /**
+     * The variant of the modal body
+     */
+    this.variant = 'default';
+    /**
+     * Wether to show the modal or not
+     */
+    this.show = false;
+    this._hasFooterSlot = false;
+  }
+  componentWillLoad() {
+    this._hasFooterSlot = !!this._el.querySelector('[slot="footer"]');
+  }
+  render() {
+    if (!this.show) {
+      return;
+    }
+    const titleContent = h("slot", { name: "title" });
+    const bodyContent = h("slot", { name: "content" });
+    const footerContent = h("slot", { name: "footer" });
+    return (h(Host, { class: "p-modal" },
+      h("p-modal-backdrop", null,
+        h("p-modal-container", { size: this.size },
+          h("p-modal-header", null, this.title ? this.title : titleContent),
+          h("p-modal-body", { variant: this.variant }, bodyContent),
+          this._hasFooterSlot && (h("p-modal-footer", null, footerContent))))));
+  }
+  static get is() { return "p-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'sm' | 'md' | 'lg' | 'xl'",
+        "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the modal container"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'md'"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'table'",
+        "resolved": "\"default\" | \"table\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The variant of the modal body"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "title": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The title of the modal"
+      },
+      "attribute": "title",
+      "reflect": false
+    },
+    "show": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to show the modal or not"
+      },
+      "attribute": "show",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "_el"; }
+}

package/dist/collection/tailwind/animation.js

@@ -0,0 +1,17 @@
+module.exports = {
+    animation: {
+        'fade-in': 'fadeIn .2s ease-in-out',
+        'fade-out': 'fadeOut .2s ease-in-out',
+    },
+
+    keyframes: {
+        fadeIn: {
+            '0%': { opacity: 0 },
+            '100%': { opacity: 100 },
+        },
+        fadeOut: {
+            '0%': { opacity: 100 },
+            '100%': { opacity: 0 },
+        },
+    },
+};

package/dist/collection/tailwind/backdrop-blur.js

@@ -0,0 +1,3 @@
+module.exports = {
+    xs: '2px',
+};

package/dist/collection/tailwind/z-index.js

@@ -0,0 +1,3 @@
+module.exports = {
+    modal: 500,
+};

package/dist/collection/tailwind.config.js

@@ -5,6 +5,9 @@ const grid = require('./tailwind/grid');
 const scale = require('./tailwind/scale');
 const rotate = require('./tailwind/rotate');
 const typeograhpy = require('./tailwind/typography');
+const backdropBlur = require('./tailwind/backdrop-blur');
+const zIndex = require('./tailwind/z-index');
+const animation = require('./tailwind/animation');
 
 module.exports = {
     important: true,
@@ -15,10 +18,13 @@ module.exports = {
         borderRadius,
         extend: {
             ...grid,
+            ...animation,
             scale,
             rotate,
             fontSize: typeograhpy.fontSize,
             lineHeight: typeograhpy.lineHeight,
+            backdropBlur,
+            zIndex,
         },
     },
     plugins: [require('@tailwindcss/aspect-ratio')],

package/dist/components/divider.component.js

@@ -0,0 +1,30 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const dividerComponentCss = ".static{position:static!important}.my-2{margin-bottom:.5rem!important;margin-top:.5rem!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.block{display:block!important}.h-px{height:1px!important}.w-80{width:20rem!important}.bg-mystic-medium{--tw-bg-opacity:1!important;background-color:rgb(227 236 243/var(--tw-bg-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;background-color:rgb(227 236 243/var(--tw-bg-opacity));display:block;height:1px;margin-bottom:.5rem;margin-top:.5rem;width:100%}.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 Divider = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return h(Host, { class: "p-divider" });
+  }
+  static get style() { return dividerComponentCss; }
+}, [1, "p-divider"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-divider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-divider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Divider);
+      }
+      break;
+  } });
+}
+
+export { Divider as D, defineCustomElement as d };

package/dist/components/index.d.ts

@@ -14,6 +14,12 @@ export { Icon as PIcon } from '../types/components/p-icon/p-icon';
 export { Illustration as PIllustration } from '../types/components/p-illustration/p-illustration';
 export { InfoPanel as PInfoPanel } from '../types/components/p-info-panel/p-info-panel';
 export { Loader as PLoader } from '../types/components/p-loader/p-loader';
+export { Modal as PModal } from '../types/components/p-modal/p-modal';
+export { ModalBackdrop as PModalBackdrop } from '../types/components/p-modal-backdrop/p-modal-backdrop';
+export { ModalBody as PModalBody } from '../types/components/p-modal-body/p-modal-body';
+export { ModalContainer as PModalContainer } from '../types/components/p-modal-container/p-modal-container';
+export { ModalFooter as PModalFooter } from '../types/components/p-modal-footer/p-modal-footer';
+export { ModalHeader as PModalHeader } from '../types/components/p-modal-header/p-modal-header';
 export { NavigationItem as PNavigationItem } from '../types/components/p-navigation-item/p-navigation-item';
 export { Pagination as PPagination } from '../types/components/p-pagination/p-pagination';
 export { PaginationItem as PPaginationItem } from '../types/components/p-pagination-item/p-pagination-item';

package/dist/components/index.js

@@ -14,6 +14,12 @@ export { PIcon, defineCustomElement as defineCustomElementPIcon } from './p-icon
 export { PIllustration, defineCustomElement as defineCustomElementPIllustration } from './p-illustration.js';
 export { PInfoPanel, defineCustomElement as defineCustomElementPInfoPanel } from './p-info-panel.js';
 export { PLoader, defineCustomElement as defineCustomElementPLoader } from './p-loader.js';
+export { PModal, defineCustomElement as defineCustomElementPModal } from './p-modal.js';
+export { PModalBackdrop, defineCustomElement as defineCustomElementPModalBackdrop } from './p-modal-backdrop.js';
+export { PModalBody, defineCustomElement as defineCustomElementPModalBody } from './p-modal-body.js';
+export { PModalContainer, defineCustomElement as defineCustomElementPModalContainer } from './p-modal-container.js';
+export { PModalFooter, defineCustomElement as defineCustomElementPModalFooter } from './p-modal-footer.js';
+export { PModalHeader, defineCustomElement as defineCustomElementPModalHeader } from './p-modal-header.js';
 export { PNavigationItem, defineCustomElement as defineCustomElementPNavigationItem } from './p-navigation-item.js';
 export { PPagination, defineCustomElement as defineCustomElementPPagination } from './p-pagination.js';
 export { PPaginationItem, defineCustomElement as defineCustomElementPPaginationItem } from './p-pagination-item.js';

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

@@ -0,0 +1,30 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const modalBackdropComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.top-0{top:0!important}.left-0{left:0!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.flex{display:flex!important}.h-screen{height:100vh!important}.w-screen{width:100vw!important}.w-80{width:20rem!important}.justify-center{justify-content:center!important}.backdrop-blur-xs{--tw-backdrop-blur:blur(2px)!important;-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!important;backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)!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-backdrop-blur:blur(2px);align-items:center;-webkit-animation:fadeIn .2s ease-in-out;animation:fadeIn .2s ease-in-out;-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);background-color:rgba(81,83,107,.5);display:flex;height:100vh;justify-content:center;left:0;padding:4rem;position:fixed;top:0;width:100vw;z-index:500}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.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 ModalBackdrop = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { class: "p-modal-backdrop" }, h("slot", null)));
+  }
+  static get style() { return modalBackdropComponentCss; }
+}, [1, "p-modal-backdrop"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-modal-backdrop"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-modal-backdrop":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ModalBackdrop);
+      }
+      break;
+  } });
+}
+
+export { ModalBackdrop as M, defineCustomElement as d };

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

@@ -0,0 +1,36 @@
+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 ModalBody = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * The variant of the modal body
+     */
+    this.variant = 'default';
+  }
+  render() {
+    return (h(Host, { class: `p-modal-body variant-${this.variant}` }, h("slot", null)));
+  }
+  static get style() { return modalBodyComponentCss; }
+}, [1, "p-modal-body", {
+    "variant": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-modal-body"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-modal-body":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ModalBody);
+      }
+      break;
+  } });
+}
+
+export { ModalBody as M, defineCustomElement as d };

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

@@ -0,0 +1,48 @@
+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}";
+
+// $modal-xs: 20rem;
+// $modal-sm: 33.5rem;
+// $modal-md: 38rem;
+// $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]',
+};
+const ModalContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * The size of the modal container
+     */
+    this.size = 'md';
+  }
+  render() {
+    const sizeClass = modalSizes[this.size];
+    return (h(Host, { class: `p-modal-container ${sizeClass}` }, h("slot", null)));
+  }
+  static get style() { return modalContainerComponentCss; }
+}, [4, "p-modal-container", {
+    "size": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-modal-container"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-modal-container":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ModalContainer);
+      }
+      break;
+  } });
+}
+
+export { ModalContainer as M, defineCustomElement as d };

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

@@ -0,0 +1,36 @@
+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 ModalFooter = /*@__PURE__*/ proxyCustomElement(class 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)));
+  }
+  static get style() { return modalFooterComponentCss; }
+}, [1, "p-modal-footer"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-modal-footer", "p-divider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-modal-footer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ModalFooter);
+      }
+      break;
+    case "p-divider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { ModalFooter as M, defineCustomElement as d };

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

@@ -0,0 +1,30 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+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 ModalHeader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { class: "p-modal-header" }, h("slot", null)));
+  }
+  static get style() { return modalHeaderComponentCss; }
+}, [1, "p-modal-header"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-modal-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-modal-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ModalHeader);
+      }
+      break;
+  } });
+}
+
+export { ModalHeader as M, defineCustomElement as d };