@paperless/core 0.1.0-alpha.5 → 0.1.0-alpha.52

package/dist/components/icon.component.js

@@ -85,6 +85,24 @@ const car = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const checklist = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1526.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="checklist" transform="translate(0.000000, 1318.000000)">
+                        <g id="⚛️-Atoms/icons/checklist" transform="translate(243.000000, 0.000000)">
+                            <path d="M1,0 L3,0 C3.55228475,-1.01453063e-16 4,0.44771525 4,1 L4,3 C4,3.55228475 3.55228475,4 3,4 L1,4 C0.44771525,4 6.76353751e-17,3.55228475 0,3 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z M7,1 L15,1 C15.5522847,1 16,1.44771525 16,2 C16,2.55228475 15.5522847,3 15,3 L7,3 C6.44771525,3 6,2.55228475 6,2 C6,1.44771525 6.44771525,1 7,1 Z M7,7 L15,7 C15.5522847,7 16,7.44771525 16,8 C16,8.55228475 15.5522847,9 15,9 L7,9 C6.44771525,9 6,8.55228475 6,8 C6,7.44771525 6.44771525,7 7,7 Z M7,13 L15,13 C15.5522847,13 16,13.4477153 16,14 C16,14.5522847 15.5522847,15 15,15 L7,15 C6.44771525,15 6,14.5522847 6,14 C6,13.4477153 6.44771525,13 7,13 Z M1,6 L3,6 C3.55228475,6 4,6.44771525 4,7 L4,9 C4,9.55228475 3.55228475,10 3,10 L1,10 C0.44771525,10 6.76353751e-17,9.55228475 0,9 L0,7 C-6.76353751e-17,6.44771525 0.44771525,6 1,6 Z M1,12 L3,12 C3.55228475,12 4,12.4477153 4,13 L4,15 C4,15.5522847 3.55228475,16 3,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,13 C-6.76353751e-17,12.4477153 0.44771525,12 1,12 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 const checkmark = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>EB3016C2-A1DF-47ED-937C-697443FD3F3C@1x</title>
@@ -283,6 +301,26 @@ const filter = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const folder = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1622.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="projects" transform="translate(0.000000, 1414.000000)">
+                        <g id="default" transform="translate(243.000000, 0.000000)">
+                            <g id="⚛️-Atoms/icons/projects" transform="translate(0.000000, 1.000000)">
+                                <path d="M1,0 L5.58578644,0 C5.85100293,-1.26996481e-15 6.10535684,0.10535684 6.29289322,0.292893219 L7.70710678,1.70710678 C7.89464316,1.89464316 8.14899707,2 8.41421356,2 L15,2 C15.5522847,2 16,2.44771525 16,3 L16,13 C16,13.5522847 15.5522847,14 15,14 L1,14 C0.44771525,14 6.76353751e-17,13.5522847 0,13 L0,1 C-6.76353751e-17,0.44771525 0.44771525,-4.5365845e-16 1,0 Z" id="Combined-Shape"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 const grid = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>0B846487-E152-44B1-B058-D5E90C916406@1x</title>
@@ -319,6 +357,24 @@ const headset = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const integration = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1590.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="koppelingen" transform="translate(0.000000, 1382.000000)">
+                        <g id="⚛️-Atoms/icons/koppelingen" transform="translate(243.000000, 0.000000)">
+                            <path d="M1,0 L6,0 C6.55228475,-1.01453063e-16 7,0.44771525 7,1 L7,6 C7,6.55228475 6.55228475,7 6,7 L1,7 C0.44771525,7 6.76353751e-17,6.55228475 0,6 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z M1,9 L6,9 C6.55228475,9 7,9.44771525 7,10 L7,15 C7,15.5522847 6.55228475,16 6,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,10 C-6.76353751e-17,9.44771525 0.44771525,9 1,9 Z M10,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 L10,7 C9.44771525,7 9,6.55228475 9,6 L9,1 C9,0.44771525 9.44771525,1.01453063e-16 10,0 Z M12.5,9 C13.0522847,9 13.5,9.44771525 13.5,10 L13.5,11.5 L15,11.5 C15.5522847,11.5 16,11.9477153 16,12.5 C16,13.0522847 15.5522847,13.5 15,13.5 L13.5,13.5 L13.5,15 C13.5,15.5522847 13.0522847,16 12.5,16 C11.9477153,16 11.5,15.5522847 11.5,15 L11.5,13.5 L10,13.5 C9.44771525,13.5 9,13.0522847 9,12.5 C9,11.9477153 9.44771525,11.5 10,11.5 L11.5,11.5 L11.5,10 C11.5,9.44771525 11.9477153,9 12.5,9 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 const list = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>680FABDB-CA3A-4C86-A241-59CFA9DF98BD@1x</title>
@@ -633,6 +689,42 @@ const tachometer = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const task = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1494.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="task" transform="translate(0.000000, 1286.000000)">
+                        <g id="⚛️-Atoms/icons/task" transform="translate(243.000000, 0.000000)">
+                            <path d="M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,14 C16,15.1045695 15.1045695,16 14,16 L2,16 C0.8954305,16 1.3527075e-16,15.1045695 0,14 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L14,0 Z M12.5824067,4.15329919 C12.2191499,3.89109673 11.7287641,3.97276881 11.4568977,4.34074885 L11.4568977,4.34074885 L6.727,10.74 L4.48421797,8.28557606 C4.2033448,7.97804494 3.76334089,7.9304898 3.43345171,8.15708233 L3.34641434,8.22568799 L3.28382396,8.28198278 C3.11439636,8.43435761 3.01189474,8.65551042 3.00097092,8.89225358 C2.9900471,9.12899673 3.07168957,9.35990745 3.22626317,9.52945129 L3.22626317,9.52945129 L6.15124558,12.7298698 C6.40900695,13.0122133 6.80862496,13.0809955 7.13592632,12.899353 C7.28904921,12.8466515 7.42987755,12.7460396 7.5366165,12.6011104 L7.5366165,12.6011104 L12.8282975,5.43729943 C12.9657189,5.25134381 13.0245403,5.01239255 12.9905957,4.77799163 C12.9566512,4.5435907 12.8330171,4.33498317 12.6494679,4.20240741 L12.6494679,4.20240741 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
+const template = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1558.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="template" transform="translate(0.000000, 1350.000000)">
+                        <g id="⚛️-Atoms/icons/template" transform="translate(243.000000, 0.000000)">
+                            <path d="M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,14 C16,15.1045695 15.1045695,16 14,16 L2,16 C0.8954305,16 1.3527075e-16,15.1045695 0,14 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L14,0 Z M8,3 C7.44771525,3 7,3.44771525 7,4 L7,4 L7,7 L4,7 C3.44771525,7 3,7.44771525 3,8 C3,8.55228475 3.44771525,9 4,9 L4,9 L7,9 L7,12 C7,12.5522847 7.44771525,13 8,13 C8.55228475,13 9,12.5522847 9,12 L9,12 L9,9 L12,9 C12.5522847,9 13,8.55228475 13,8 C13,7.44771525 12.5522847,7 12,7 L12,7 L9,7 L9,4 C9,3.44771525 8.55228475,3 8,3 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 const tool = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>3412434A-3941-4BA7-AF31-A18B70C22235@1x</title>
@@ -729,6 +821,7 @@ const icons = {
   bread,
   calendar,
   car,
+  checklist,
   checkmark,
   chevron,
   clock,
@@ -740,8 +833,10 @@ const icons = {
   explanation,
   eye,
   filter,
+  folder,
   grid,
   headset,
+  integration,
   list,
   location,
   megaphone,
@@ -759,6 +854,8 @@ const icons = {
   settings,
   sick,
   tachometer,
+  task,
+  template,
   tool,
   trash,
   turn,
@@ -766,14 +863,12 @@ const icons = {
   warning,
 };
 
+const iconComponentCss = ".static{position:static!important}.mb-3{margin-bottom:.75rem!important}.ml-2{margin-left:.5rem!important}.inline-block{display:inline-block!important}.inline{display:inline!important}.flex{display:flex!important}.w-full{width:100%!important}.flex-auto{flex:1 1 auto!important}.-translate-y-1{--tw-translate-y:-0.25rem!important}.-translate-x-1,.-translate-y-1{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}.-translate-x-1{--tw-translate-x:-0.25rem!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}.justify-center{justify-content:center!important}.border-t-2{border-top-width:2px!important}.border-r-2{border-right-width:2px!important}.border-indigo{--tw-border-opacity:1!important;border-color:rgb(82 138 250/var(--tw-border-opacity))!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.text-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!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}.transition{transition-duration:.15s!important;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.duration-500{transition-duration:.5s!important}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)!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}.-translate-y-1\\/2{--tw-translate-y:-50%!important}.-translate-x-1\\/2,.-translate-y-1\\/2{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}.-translate-x-1\\/2{--tw-translate-x:-50%!important}.border-indigo,.border-mystic-dark{--tw-border-opacity:1!important}";
+
 const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * The icon the be displayed
-     */
-    this.variant = null;
     /**
      * The size of the icon, using tailwind sizes
      */
@@ -781,7 +876,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     /**
      * Wether to rotate the icon x degrees
      */
-    this.rotate = null;
+    this.rotate = 0;
     /**
      * Wether to flip the icon horizontally or vertically
      */
@@ -789,11 +884,44 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     const icon = icons[this.variant];
-    return h(Host, { class: this._getClass(), innerHTML: icon });
-  }
-  _getClass() {
-    return `p-icon inline-block text-${this.size} ${this.rotate || this.flip ? 'transform' : ''} ${this.rotate ? `${this.rotate < 0 ? '-' : ''}rotate-${this.rotate < 0 ? this.rotate * -1 : this.rotate}` : ''} ${this.flip ? `scale-${this.flip === 'horizontal' ? 'x' : 'y'}-flip` : ''}`;
+    const styles = {
+      'p-icon inline-block': true,
+      'text-auto': this.size === 'auto',
+      'text-xxs': this.size === 'xxs',
+      'text-xs': this.size === 'xs',
+      'text-base': this.size === 'base',
+      'text-lg': this.size === 'lg',
+      'text-xl': this.size === 'xl',
+      'text-2xl': this.size === '2xl',
+      'text-3xl': this.size === '3xl',
+      'text-4xl': this.size === '4xl',
+      'text-5xl': this.size === '5xl',
+      'text-6xl': this.size === '6xl',
+      transform: !!this.rotate || !!this.flip,
+      'scale-x-flip': this.flip === 'horizontal',
+      'scale-y-flip': this.flip === 'vertical',
+      'rotate-0': this.rotate === 0,
+      'rotate-25': this.rotate === 25,
+      'rotate-45': this.rotate === 45,
+      'rotate-90': this.rotate === 90,
+      'rotate-135': this.rotate === 135,
+      'rotate-180': this.rotate === 180,
+      'rotate-225': this.rotate === 225,
+      'rotate-270': this.rotate === 270,
+      'rotate-315': this.rotate === 315,
+      '-rotate-0': this.rotate === -0,
+      '-rotate-25': this.rotate === -25,
+      '-rotate-45': this.rotate === -45,
+      '-rotate-90': this.rotate === -90,
+      '-rotate-135': this.rotate === -135,
+      '-rotate-180': this.rotate === -180,
+      '-rotate-225': this.rotate === -225,
+      '-rotate-270': this.rotate === -270,
+      '-rotate-315': this.rotate === -315,
+    };
+    return h(Host, { class: styles, innerHTML: icon });
   }
+  static get style() { return iconComponentCss; }
 }, [0, "p-icon", {
     "variant": [1],
     "size": [1],

package/dist/components/index.d.ts

@@ -1,8 +1,38 @@
 /* paperless custom elements */
+export { Avatar as PAvatar } from '../types/components/p-avatar/p-avatar';
+export { AvatarGroup as PAvatarGroup } from '../types/components/p-avatar-group/p-avatar-group';
 export { Button as PButton } from '../types/components/p-button/p-button';
+export { CardBody as PCardBody } from '../types/components/p-card-body/p-card-body';
+export { CardContainer as PCardContainer } from '../types/components/p-card-container/p-card-container';
+export { CardHeader as PCardHeader } from '../types/components/p-card-header/p-card-header';
+export { Counter as PCounter } from '../types/components/p-counter/p-counter';
+export { Divider as PDivider } from '../types/components/p-divider/p-divider';
+export { Dropdown as PDropdown } from '../types/components/p-dropdown/p-dropdown';
+export { DropdownMenuContainer as PDropdownMenuContainer } from '../types/components/p-dropdown-menu-container/p-dropdown-menu-container';
+export { DropdownMenuItem as PDropdownMenuItem } from '../types/components/p-dropdown-menu-item/p-dropdown-menu-item';
+export { Helper as PHelper } from '../types/components/p-helper/p-helper';
 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';
+export { Profile as PProfile } from '../types/components/p-profile/p-profile';
+export { SegmentContainer as PSegmentContainer } from '../types/components/p-segment-container/p-segment-container';
+export { SegmentItem as PSegmentItem } from '../types/components/p-segment-item/p-segment-item';
+export { Status as PStatus } from '../types/components/p-status/p-status';
+export { Stepper as PStepper } from '../types/components/p-stepper/p-stepper';
+export { StepperLine as PStepperLine } from '../types/components/p-stepper-line/p-stepper-line';
+export { StepperStep as PStepperStep } from '../types/components/p-stepper-step/p-stepper-step';
+export { TabGroup as PTabGroup } from '../types/components/p-tab-group/p-tab-group';
+export { TabItem as PTabItem } from '../types/components/p-tab-item/p-tab-item';
 export { Tooltip as PTooltip } from '../types/components/p-tooltip/p-tooltip';
 
 /**

package/dist/components/index.js

@@ -1,6 +1,36 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { PAvatar, defineCustomElement as defineCustomElementPAvatar } from './p-avatar.js';
+export { PAvatarGroup, defineCustomElement as defineCustomElementPAvatarGroup } from './p-avatar-group.js';
 export { PButton, defineCustomElement as defineCustomElementPButton } from './p-button.js';
+export { PCardBody, defineCustomElement as defineCustomElementPCardBody } from './p-card-body.js';
+export { PCardContainer, defineCustomElement as defineCustomElementPCardContainer } from './p-card-container.js';
+export { PCardHeader, defineCustomElement as defineCustomElementPCardHeader } from './p-card-header.js';
+export { PCounter, defineCustomElement as defineCustomElementPCounter } from './p-counter.js';
+export { PDivider, defineCustomElement as defineCustomElementPDivider } from './p-divider.js';
+export { PDropdown, defineCustomElement as defineCustomElementPDropdown } from './p-dropdown.js';
+export { PDropdownMenuContainer, defineCustomElement as defineCustomElementPDropdownMenuContainer } from './p-dropdown-menu-container.js';
+export { PDropdownMenuItem, defineCustomElement as defineCustomElementPDropdownMenuItem } from './p-dropdown-menu-item.js';
+export { PHelper, defineCustomElement as defineCustomElementPHelper } from './p-helper.js';
 export { PIcon, defineCustomElement as defineCustomElementPIcon } from './p-icon.js';
 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';
+export { PProfile, defineCustomElement as defineCustomElementPProfile } from './p-profile.js';
+export { PSegmentContainer, defineCustomElement as defineCustomElementPSegmentContainer } from './p-segment-container.js';
+export { PSegmentItem, defineCustomElement as defineCustomElementPSegmentItem } from './p-segment-item.js';
+export { PStatus, defineCustomElement as defineCustomElementPStatus } from './p-status.js';
+export { PStepper, defineCustomElement as defineCustomElementPStepper } from './p-stepper.js';
+export { PStepperLine, defineCustomElement as defineCustomElementPStepperLine } from './p-stepper-line.js';
+export { PStepperStep, defineCustomElement as defineCustomElementPStepperStep } from './p-stepper-step.js';
+export { PTabGroup, defineCustomElement as defineCustomElementPTabGroup } from './p-tab-group.js';
+export { PTabItem, defineCustomElement as defineCustomElementPTabItem } from './p-tab-item.js';
 export { PTooltip, defineCustomElement as defineCustomElementPTooltip } from './p-tooltip.js';

package/dist/components/loader.component.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const loaderComponentCss = "/*! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com*/*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;border:0 solid;box-sizing:border-box}:after,:before{--tw-content:\"\"}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.fixed{position:fixed!important}.top-0{top:0!important}.left-0{left:0!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-\\[1em\\]{height:1em!important}.w-\\[1em\\]{width:1em!important}.w-screen{width:100vw!important}.w-full{width:100%!important}@-webkit-keyframes spin{to{transform:rotate(1turn)}}.animate-spin{-webkit-animation:spin 1s linear infinite!important;animation:spin 1s linear infinite!important}.items-center{align-items:center!important}.border-2{border-width:2px!important}.border-solid{border-style:solid!important}.border-indigo-light{--tw-border-opacity:1!important;border-color:rgb(241 246 255/var(--tw-border-opacity))!important}.border-storm-light\\/40{border-color:rgba(176,178,203,.4)!important}.border-indigo-light\\/40{border-color:rgba(241,246,255,.4)!important}.border-t-indigo{--tw-border-opacity:1!important;border-top-color:rgb(82 138 250/var(--tw-border-opacity))!important}.border-t-storm{--tw-border-opacity:1!important;border-top-color:rgb(81 83 107/var(--tw-border-opacity))!important}.border-t-white{--tw-border-opacity:1!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity))!important}:host .loader{--tw-border-opacity:1!important;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border-color:rgb(241 246 255/var(--tw-border-opacity))!important;border-radius:100%;border-style:solid!important;border-top:solid rgb(82 138 250/var(--tw-border-opacity))!important;border-width:2px!important;display:inline-block;height:1em;transition-duration:.5s;width:1em}:host .loader.color-storm{--tw-border-opacity:1!important;border-color:rgba(176,178,203,.4)!important;border-top-color:rgb(81 83 107/var(--tw-border-opacity))!important}:host .loader.color-white{--tw-border-opacity:1!important;border-color:rgba(241,246,255,.4)!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity))!important}:host .loading-screen{--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 252/var(--tw-bg-opacity));display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:9999}:host .loading-screen .content{max-width:20rem}:host .loading-screen .content .loader-wrapper{display:flex;justify-content:center;width:100%}:host .loading-screen .content .loader-wrapper .loader{font-size:2.25rem;line-height:2.5rem}.static{position:static!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}.inline{display:inline!important}.justify-center{justify-content:center!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}";
+const loaderComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.top-0{top:0!important}.left-0{left:0!important}.inline-block{display:inline-block!important}.inline{display:inline!important}.flex{display:flex!important}.h-\\[1em\\]{height:1em!important}.w-\\[1em\\]{width:1em!important}.w-screen{width:100vw!important}.w-full{width:100%!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}@-webkit-keyframes spin{to{transform:rotate(1turn)}}.animate-spin{-webkit-animation:spin 1s linear infinite!important;animation:spin 1s linear infinite!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.border-2{border-width:2px!important}.border-solid{border-style:solid!important}.border-indigo-light{--tw-border-opacity:1!important;border-color:rgb(241 246 255/var(--tw-border-opacity))!important}.border-storm-light\\/40{border-color:rgba(176,178,203,.4)!important}.border-indigo-light\\/40{border-color:rgba(241,246,255,.4)!important}.border-t-indigo{--tw-border-opacity:1!important;border-top-color:rgb(82 138 250/var(--tw-border-opacity))!important}.border-t-storm{--tw-border-opacity:1!important;border-top-color:rgb(81 83 107/var(--tw-border-opacity))!important}.border-t-white{--tw-border-opacity:1!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity))!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!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-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}:host .loader{--tw-border-opacity:1!important;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border-color:rgb(241 246 255/var(--tw-border-opacity))!important;border-radius:100%;border-style:solid!important;border-top:solid rgb(82 138 250/var(--tw-border-opacity))!important;border-width:2px!important;display:inline-block;height:1em;transition-duration:.5s;width:1em}:host .loader.color-storm{--tw-border-opacity:1!important;border-color:rgba(176,178,203,.4)!important;border-top-color:rgb(81 83 107/var(--tw-border-opacity))!important}:host .loader.color-white{--tw-border-opacity:1!important;border-color:rgba(241,246,255,.4)!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity))!important}:host .loading-screen{--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 252/var(--tw-bg-opacity));display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:1001}:host .loading-screen .content{max-width:20rem}:host .loading-screen .content .loader-wrapper{display:flex;justify-content:center;width:100%}:host .loading-screen .content .loader-wrapper .loader{font-size:2.25rem;line-height:2.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 Loader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -33,9 +33,10 @@ const Loader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return;
     }
     if (this.variant === 'full-screen') {
-      return (h(Host, { class: "p-loader" }, h("div", { class: "loading-screen" }, h("div", { class: "content" }, h("slot", null), h("div", { class: "loader-wrapper" }, this._loader)))));
+      return (h(Host, { class: "p-loader variant-full-screen" }, h("div", { class: "loading-screen" }, h("div", { class: "content" }, h("slot", null), h("div", { class: "loader-wrapper" }, this._loader)))));
     }
-    return h(Host, { class: `p-loader ${this.variant === 'full-width' && 'w-100 d-block flex justify-center text-4xl'}` }, this._loader);
+    return (h(Host, { class: `p-loader flex ${this.variant === 'full-width' &&
+        'w-full flex justify-center text-4xl'}` }, this._loader));
   }
   _checkShow() {
     var _a;
@@ -44,7 +45,7 @@ const Loader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this._showSubscriber = null;
     }
     if (typeof this.show !== 'boolean') {
-      this._showSubscriber = (_a = this.show) === null || _a === void 0 ? void 0 : _a.subscribe(show => (this._show = show));
+      this._showSubscriber = (_a = this.show) === null || _a === void 0 ? void 0 : _a.subscribe((show) => (this._show = show));
       return;
     }
     this._show = this.show;

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 };

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;