@paperless/core 0.1.0-alpha.29 → 0.1.0-alpha.291

package/dist/collection/assets/illustrations/empty-state-search.svg

@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="152px" height="152px" viewBox="0 0 152 152" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>⚛️ Atoms/illustrations/empty/search</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="152" height="152"></rect>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="linearGradient-3">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+        <circle id="path-4" cx="18" cy="18" r="18"></circle>
+    </defs>
+    <g id="⚛️-Atoms" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms/illustrations/empty/search">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="bounding-box"></g>
+            <g id="row" mask="url(#mask-2)">
+                <g transform="translate(0.000000, -3.000000)">
+                    <rect id="bg" stroke-opacity="0.8" stroke="#E3ECF3" stroke-width="1" fill="#FFFFFF" x="0.5" y="0.5" width="183" height="39"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="10" y="14" width="54" height="6" rx="1"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="10" y="24" width="43" height="2" rx="1"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="87" y="17" width="32" height="6" rx="0.899999976"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="142" y="17" width="32" height="6" rx="0.899999976"></rect>
+                </g>
+            </g>
+            <g id="row" mask="url(#mask-2)">
+                <g transform="translate(0.000000, 36.000000)">
+                    <rect id="bg" stroke-opacity="0.4" stroke="#E3ECF3" stroke-width="1" fill="#F7FAFC" x="0.5" y="0.5" width="183" height="39"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="10" y="14" width="54" height="6" rx="1"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="10" y="24" width="43" height="2" rx="1"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="87" y="17" width="32" height="6" rx="0.899999976"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="142" y="17" width="32" height="6" rx="0.899999976"></rect>
+                </g>
+            </g>
+            <g id="row" mask="url(#mask-2)">
+                <g transform="translate(0.000000, 75.000000)">
+                    <rect id="bg" stroke-opacity="0.8" stroke="#E3ECF3" stroke-width="1" fill="#FFFFFF" x="0.5" y="0.5" width="183" height="39"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="10" y="14" width="54" height="6" rx="1"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="10" y="24" width="43" height="2" rx="1"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="87" y="17" width="32" height="6" rx="0.899999976"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="142" y="17" width="32" height="6" rx="0.899999976"></rect>
+                </g>
+            </g>
+            <g id="row" mask="url(#mask-2)">
+                <g transform="translate(0.000000, 114.000000)">
+                    <rect id="bg" stroke-opacity="0.8" stroke="#E3ECF3" stroke-width="1" fill="#FFFFFF" x="0.5" y="0.5" width="183" height="39"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="10" y="14" width="54" height="6" rx="1"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="10" y="24" width="43" height="2" rx="1"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="87" y="17" width="32" height="6" rx="0.899999976"></rect>
+                    <rect id="heading" stroke="none" fill-opacity="0.5" fill="#E3ECF3" x="142" y="17" width="32" height="6" rx="0.899999976"></rect>
+                </g>
+            </g>
+            <rect id="overlay-right" fill="url(#linearGradient-3)" mask="url(#mask-2)" x="128" y="0" width="24" height="152"></rect>
+            <rect id="overlay-bottom" fill="url(#linearGradient-3)" mask="url(#mask-2)" transform="translate(76.000000, 140.000000) rotate(90.000000) translate(-76.000000, -140.000000) " x="64" y="64" width="24" height="152"></rect>
+            <rect id="overlay-top" fill="url(#linearGradient-3)" mask="url(#mask-2)" transform="translate(76.000000, 12.000000) scale(1, -1) rotate(90.000000) translate(-76.000000, -12.000000) " x="64" y="-64" width="24" height="152"></rect>
+            <g id="search" mask="url(#mask-2)" fill="#528AFA">
+                <g transform="translate(41.000000, 36.000000)" id="Combined-Shape">
+                    <path d="M24,0 C37.254834,0 48,10.745166 48,24 C48,30.3127374 45.5627505,36.0562247 41.5779034,40.3408099 C41.6050847,40.3633587 41.6311447,40.388504 41.6568542,40.4142136 L60.0416306,58.7989899 C61.2132034,59.9705627 61.2132034,61.8700577 60.0416306,63.0416306 C58.8700577,64.2132034 56.9705627,64.2132034 55.7989899,63.0416306 L37.4142136,44.6568542 C37.2617644,44.5044051 37.1291525,44.3396308 37.0163778,44.1657387 C33.2677827,46.5918601 28.7983357,48 24,48 C10.745166,48 0,37.254834 0,24 C0,10.745166 10.745166,0 24,0 Z M24,6 C14.0588745,6 6,14.0588745 6,24 C6,33.9411255 14.0588745,42 24,42 C33.9411255,42 42,33.9411255 42,24 C42,14.0588745 33.9411255,6 24,6 Z"></path>
+                </g>
+            </g>
+            <g id="zoom" mask="url(#mask-2)">
+                <g transform="translate(47.000000, 42.000000)">
+                    <mask id="mask-5" fill="white">
+                        <use xlink:href="#path-4"></use>
+                    </mask>
+                    <use id="Mask" stroke="none" fill-opacity="0.4" fill="#E3ECF3" fill-rule="evenodd" xlink:href="#path-4"></use>
+                    <g id="row" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" mask="url(#mask-5)">
+                        <g transform="translate(-62.000000, -13.000000)">
+                            <rect id="bg" stroke-opacity="0.4" stroke="#E3ECF3" stroke-width="1" fill="#F7FAFC" x="0.5" y="0.5" width="238" height="51"></rect>
+                            <rect id="heading" stroke="none" fill-opacity="0.8" fill="#DAE6F0" x="12.9891304" y="18.2" width="70.1413043" height="7.8" rx="1.3"></rect>
+                            <rect id="heading" stroke="none" fill-opacity="0.8" fill="#DAE6F0" x="12.9891304" y="31.2" width="55.8532609" height="2.6" rx="1.3"></rect>
+                            <rect id="heading" stroke="none" fill-opacity="0.8" fill="#DAE6F0" x="113.005435" y="22.1" width="41.5652174" height="7.8" rx="1.16999997"></rect>
+                        </g>
+                    </g>
+                    <g id="row" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" mask="url(#mask-5)">
+                        <g transform="translate(-62.000000, 38.000000)">
+                            <rect id="bg" stroke-opacity="0.4" stroke="#E3ECF3" stroke-width="1.3" fill="#FFFFFF" x="0.65" y="0.65" width="237.7" height="50.7"></rect>
+                            <rect id="heading" stroke="none" fill="#F1F6FF" x="12.9891304" y="18.2" width="70.1413043" height="7.8" rx="1.3"></rect>
+                            <rect id="heading" stroke="none" fill="#F1F6FF" x="12.9891304" y="31.2" width="55.8532609" height="2.6" rx="1.3"></rect>
+                            <rect id="heading" stroke="none" fill="#F1F6FF" x="113.005435" y="22.1" width="41.5652174" height="7.8" rx="1.16999997"></rect>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/dist/collection/collection-manifest.json

@@ -2,28 +2,66 @@
   "entries": [
     "./components/atoms/icon/icon.component.js",
     "./components/atoms/illustration/illustration.component.js",
+    "./components/molecules/page-size-select/page-size-select.component.js",
+    "./components/helpers/table-column/table-column.component.js",
+    "./components/molecules/table-header/table-header.component.js",
+    "./components/organisms/table/table.component.js",
     "./components/atoms/avatar/avatar.component.js",
+    "./components/atoms/avatar-group/avatar-group.component.js",
+    "./components/atoms/backdrop/backdrop.component.js",
     "./components/atoms/button/button.component.js",
+    "./components/atoms/card-body/card-body.component.js",
+    "./components/atoms/card-container/card-container.component.js",
+    "./components/atoms/card-header/card-header.component.js",
     "./components/atoms/counter/counter.component.js",
     "./components/atoms/divider/divider.component.js",
+    "./components/atoms/drawer-body/drawer-body.component.js",
+    "./components/atoms/drawer-container/drawer-container.component.js",
+    "./components/atoms/drawer-header/drawer-header.component.js",
     "./components/atoms/dropdown-menu-container/dropdown-menu-container.component.js",
     "./components/atoms/dropdown-menu-item/dropdown-menu-item.component.js",
     "./components/atoms/helper/helper.component.js",
     "./components/atoms/info-panel/info-panel.component.js",
+    "./components/atoms/label/label.component.js",
+    "./components/atoms/layout/layout.component.js",
     "./components/atoms/loader/loader.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/slider-indicator/slider-indicator.component.js",
     "./components/atoms/status/status.component.js",
+    "./components/atoms/stepper-item/stepper-item.component.js",
+    "./components/atoms/stepper-line/stepper-line.component.js",
+    "./components/atoms/tab-group/tab-group.component.js",
+    "./components/atoms/tab-item/tab-item.component.js",
+    "./components/atoms/table-container/table-container.component.js",
+    "./components/atoms/toast-container/toast-container.component.js",
     "./components/atoms/tooltip/tooltip.component.js",
+    "./components/molecules/accordion/accordion.component.js",
+    "./components/molecules/content-slider/content-slider.component.js",
     "./components/molecules/dropdown/dropdown.component.js",
+    "./components/molecules/input-group/input-group.component.js",
     "./components/molecules/navigation-item/navigation-item.component.js",
-    "./components/molecules/pagination/pagination.component.js"
+    "./components/molecules/pagination/pagination.component.js",
+    "./components/molecules/profile/profile.component.js",
+    "./components/molecules/select/select.component.js",
+    "./components/molecules/stepper/stepper.component.js",
+    "./components/molecules/table-cell/table-cell.component.js",
+    "./components/molecules/table-footer/table-footer.component.js",
+    "./components/molecules/table-row/table-row.component.js",
+    "./components/molecules/toast/toast.component.js",
+    "./components/organisms/drawer/drawer.component.js",
+    "./components/organisms/modal/modal.component.js",
+    "./components/organisms/navbar/navbar.component.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.17.0",
-    "typescriptVersion": "4.5.4"
+    "version": "2.19.3",
+    "typescriptVersion": "4.7.4"
   },
   "collections": [],
   "bundles": []

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

@@ -1,31 +1 @@
-:host {
-  @apply inline-block;
-}
-:host > img {
-  @apply object-cover object-center;
-}
-
-:host(.size-small) > img {
-  @apply w-10 h-10;
-}
-
-:host(.size-medium) > img {
-  @apply w-20 h-20;
-}
-
-:host(.size-large) > img {
-  @apply w-28 h-28;
-}
-
-:host(.variant-company) > img {
-  @apply rounded;
-}
-
-:host(.variant-company.size-medium),
-:host(.variant-company.size-large) {
-  @apply rounded-large;
-}
-
-:host(.variant-user) > img {
-  @apply rounded-round;
-}
+.inline-block{display:inline-block!important}.h-\[3\.125rem\]{height:3.125rem!important}.h-\[6\.5rem\]{height:6.5rem!important}.w-8{width:2rem!important}.w-\[3\.125rem\]{width:3.125rem!important}.w-16{width:4rem!important}.w-\[6\.5rem\]{width:6.5rem!important}.rounded{border-radius:.25rem!important}.object-cover{-o-object-fit:cover!important;object-fit:cover!important}*{box-sizing:border-box}p-avatar{display:inline-block;flex-shrink:0}p-avatar>img{-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}p-avatar[size=small]>img{height:2rem;width:2rem}p-avatar[size=medium]>img{height:3.125rem;width:3.125rem}p-avatar[size=large]>img{height:4rem;width:4rem}p-avatar[size=xlarge]>img{height:6.5rem;width:6.5rem}p-avatar[variant=company]>img{border-radius:.25rem}p-avatar[variant=company][size=large]>img,p-avatar[variant=company][size=medium]>img{border-radius:.375rem}p-avatar[variant=user]>img{border-radius:100%}.static{position:static!important}

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

@@ -1,105 +1,125 @@
-import { Component, h, Host, Prop, State } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 export class Avatar {
   constructor() {
-    /**
-     * The variant of the avatar
-     */
     this.variant = 'user';
-    /**
-     * The size of the avatar
-     */
     this.size = 'medium';
-    this._src = this.src;
+    this.defaultImage = undefined;
+    this.src = undefined;
+    this._src = undefined;
+  }
+  onSrchChange(src) {
+    this._src = src;
+  }
+  componentWillLoad() {
+    this.onSrchChange(this.src);
+    if (!this._src) {
+      this._setDefaultLink();
+    }
   }
   render() {
-    return (h(Host, { class: `p-avatar size-${this.size} variant-${this.variant}` },
-      h("img", { src: this._src, onError: () => this._setDefaultLink() })));
+    return (h(Host, { class: "p-avatar" }, h("img", { src: this._src, onError: () => this._setDefaultLink() })));
   }
   _setDefaultLink() {
     var _a;
-    this._src = (_a = this.defaultImage) !== null && _a !== void 0 ? _a : (this.variant === 'user' ? '/assets/images/avatar/user-default.svg' : '/assets/images/avatar/company-default.svg');
+    this._src =
+      (_a = this.defaultImage) !== null && _a !== void 0 ? _a : (this.variant === 'user'
+        ? '/assets/images/avatar/user-default.svg'
+        : '/assets/images/avatar/company-default.svg');
   }
   static get is() { return "p-avatar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["avatar.component.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["avatar.component.css"]
-  }; }
-  static get properties() { return {
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'user' | 'company'",
-        "resolved": "\"company\" | \"user\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The variant of the avatar"
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "'user'"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'small' | 'medium' | 'large'",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The size of the avatar"
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    },
-    "defaultImage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The default image to show on errors"
+  static get originalStyleUrls() {
+    return {
+      "$": ["avatar.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["avatar.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'user' | 'company'",
+          "resolved": "\"company\" | \"user\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The variant of the avatar"
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "'user'"
       },
-      "attribute": "default-image",
-      "reflect": false
-    },
-    "src": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large' | 'xlarge'",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"xlarge\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the avatar"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'medium'"
       },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The image used for the avatar"
+      "defaultImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The default image to show on errors"
+        },
+        "attribute": "default-image",
+        "reflect": false
       },
-      "attribute": "src",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "_src": {}
-  }; }
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The image used for the avatar"
+        },
+        "attribute": "src",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_src": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "src",
+        "methodName": "onSrchChange"
+      }];
+  }
 }

package/dist/collection/components/atoms/avatar-group/avatar-group.component.css

@@ -0,0 +1 @@
+.flex{display:flex!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}.static{position:static!important}

package/dist/collection/components/atoms/avatar-group/avatar-group.component.js

@@ -0,0 +1,41 @@
+import { h, Host } from '@stencil/core';
+export class AvatarGroup {
+  constructor() {
+    this.extra = undefined;
+  }
+  render() {
+    return (h(Host, { class: "p-avatar-group" }, h("slot", null), this.extra && h("span", { class: "extra" }, "+", this.extra)));
+  }
+  static get is() { return "p-avatar-group"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["avatar-group.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["avatar-group.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "extra": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The amount to show after the avatars"
+        },
+        "attribute": "extra",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -0,0 +1 @@
+.fixed{position:fixed!important}.top-0{top:0!important}.left-0{left:0!important}.flex{display:flex!important}.h-full{height:100%!important}.w-full{width:100%!important}.animate-fade-out{animation:fadeOut .2s ease forwards!important}.items-start{align-items:flex-start!important}.items-end{align-items:flex-end!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.bg-storm-dark\/50{background-color:rgba(39,40,56,.5)!important}.p-0{padding:0!important}*{box-sizing:border-box}:host{align-items:flex-end;animation:fadeIn .2s ease forwards;background-color:rgba(39,40,56,.5);display:flex;height:100%;justify-content:center;left:0;overflow-y:auto;position:fixed;top:0;width:100%;z-index:490}@media (min-width:40rem){:host{padding-left:4rem;padding-right:4rem}}@media (min-width:64rem){:host{align-items:center;padding:4rem}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}:host(.blurred){--tw-backdrop-blur:blur(2px);-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)}:host(.closing){animation:fadeOut .2s ease forwards;overflow:hidden}:host(.variant-drawer){align-items:flex-start;justify-content:flex-end;padding:0}@media (min-width:64rem){:host(.variant-drawer){align-items:flex-start;padding:0}}@media (min-width:40rem){:host(.variant-drawer){padding:0}}@media (min-width:40rem){.tablet\:p-0{padding:0!important}.tablet\:px-16{padding-left:4rem!important;padding-right:4rem!important}}.static{position:static!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.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-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}.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-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-0,.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-0{--tw-rotate:-0deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-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-135,.-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-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-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}.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}.text-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!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}.inline{display:inline!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}}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}@media (min-width:64rem){.desktop-xs\:flex{display:flex!important}}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}@media (min-width:64rem){.desktop-xs\:hidden{display:none!important}}

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

@@ -0,0 +1,119 @@
+import { h, Host, } from '@stencil/core';
+export class Backdrop {
+  constructor() {
+    this.variant = 'modal';
+    this.applyBlur = false;
+    this.closing = false;
+  }
+  render() {
+    return (h(Host, { class: `p-backdrop variant-${this.variant} ${this.applyBlur && 'blurred'} ${this.closing && 'closing'}` }, h("slot", null)));
+  }
+  handleClick(ev) {
+    if (ev.target !== this._el) {
+      return;
+    }
+    this.clicked.emit(ev);
+  }
+  static get is() { return "p-backdrop"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["backdrop.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["backdrop.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'modal' | 'drawer'",
+          "resolved": "\"drawer\" | \"modal\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The variant of the backdrop"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'modal'"
+      },
+      "applyBlur": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to apply blur on the background of the backdrop"
+        },
+        "attribute": "apply-blur",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "closing": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the backdrop is closing"
+        },
+        "attribute": "closing",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "clicked",
+        "name": "clicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "When the backdrop is clicked"
+        },
+        "complexType": {
+          "original": "MouseEvent",
+          "resolved": "MouseEvent",
+          "references": {
+            "MouseEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "_el"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleClick",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}