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

package/dist/collection/assets/icons/checklist.svg

@@ -0,0 +1,17 @@
+<?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>

package/dist/collection/assets/icons/folder.svg

@@ -0,0 +1,19 @@
+<?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>

package/dist/collection/assets/icons/integration.svg

@@ -0,0 +1,17 @@
+<?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>

package/dist/collection/assets/icons/task.svg

@@ -0,0 +1,17 @@
+<?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>

package/dist/collection/assets/icons/template.svg

@@ -0,0 +1,17 @@
+<?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>

package/dist/collection/assets/images/avatar/company-default.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
+    <defs>
+        <rect id="a" width="32" height="32" rx="4"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <mask id="b" fill="#fff">
+            <use xlink:href="#a"/>
+        </mask>
+        <use fill="#FFE8EA" fill-rule="nonzero" xlink:href="#a"/>
+        <path fill="#FF7D88" fill-rule="nonzero" d="M16 20.5l-5.29 2.781 1.01-5.89-4.28-4.172 5.915-.86L16 7l2.645 5.36 5.915.859-4.28 4.172 1.01 5.89z" mask="url(#b)"/>
+    </g>
+</svg>

package/dist/collection/assets/images/avatar/user-default.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="104" height="104" viewBox="0 0 104 104">
+    <defs>
+        <rect id="a" width="104" height="104" rx="52"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <mask id="b" fill="#fff">
+            <use xlink:href="#a"/>
+        </mask>
+        <use fill="#F7FAFC" xlink:href="#a"/>
+        <path fill="#E3ECF3" fill-rule="nonzero" d="M52.5 23C60.717 23 71 29.402 71 42c0 12.598-8.283 23-18.5 23S34 54.598 34 42s10.283-19 18.5-19zM24 77c15-10 41-10 56 0 10 6.667 10 23 0 49H24c-10-26-10-42.333 0-49z" mask="url(#b)"/>
+    </g>
+</svg>

package/dist/collection/assets/images/helper/helper-hover.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.2 (51160) - http://www.bohemiancoding.com/sketch -->
+    <title>icon - 21</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon---21" fill-rule="nonzero">
+            <rect id="Rectangle-path" fill="#30C2C9" x="0" y="0" width="12" height="12" rx="3"></rect>
+            <g id="icon---21-b-link" transform="translate(4.000000, 2.000000)" fill="#FFFFFF">
+                <path d="M4.20169494,2.05088469 C4.20169494,2.90088469 3.68169494,3.31088469 3.41169494,3.53088469 L2.96745401,4.03088469 C2.69745401,4.26088469 2.66745401,4.38088469 2.65745401,4.63088469 L2.64745401,4.96088469 L1.10581057,4.96088469 L1.10581057,4.53088469 C1.08581057,4.08088469 1.58581057,3.36380227 1.83581057,3.16380227 C2.08581057,2.96380227 2.72169494,2.80726703 2.72169494,2.33612319 C2.72169494,1.86497934 2.30756831,1.6573357 1.93756831,1.6573357 C1.56756831,1.6573357 0.94169494,1.88088469 0.79169494,2.03088469 L0,0.9190163 C0.15,0.7690163 0.95649746,0 2.15649746,0 C3.35649746,0 4.20169494,1.20088469 4.20169494,2.05088469 Z M2.96745401,6.46948689 C2.96745401,6.86948689 2.66245401,7.32102543 2.16149746,7.32102543 C1.66054091,7.32102543 1.32164313,6.94462439 1.32164313,6.46948689 C1.32164313,5.99434938 1.53925393,5.67842783 2.16149746,5.67842783 C2.78374099,5.67842783 2.96745401,6.06948689 2.96745401,6.46948689 Z" id="icon---21-b"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/dist/collection/assets/images/helper/helper.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>helper</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="helper" fill-rule="nonzero">
+            <rect id="Rectangle-path" fill="#D0F5F7" x="0" y="0" width="12" height="12" rx="3"></rect>
+            <g id="icon---19-b-link" transform="translate(3.000000, 2.000000)" fill="#1EDAE3">
+                <path d="M5.03019748,2.07245686 C5.03019748,2.92245686 4.51019748,3.33245686 4.24019748,3.55245686 L3.79595655,4.05245686 C3.52595655,4.28245686 3.49595655,4.40245686 3.48595655,4.65245686 L3.47595655,4.98245686 L1.93431311,4.98245686 L1.93431311,4.55245686 C1.91431311,4.10245686 2.41431311,3.38537444 2.66431311,3.18537444 C2.91431311,2.98537444 3.55019748,2.8288392 3.55019748,2.35769536 C3.55019748,1.88655151 3.13607085,1.67890787 2.76607085,1.67890787 C2.39607085,1.67890787 1.77019748,1.90245686 1.62019748,2.05245686 L0.82850254,0.94058847 C0.97850254,0.79058847 1.785,0.02157217 2.985,0.02157217 C4.185,0.02157217 5.03019748,1.22245686 5.03019748,2.07245686 Z M3.79595655,6.49105906 C3.79595655,6.89105906 3.49095655,7.3425976 2.99,7.3425976 C2.48904345,7.3425976 2.15014567,6.96619656 2.15014567,6.49105906 C2.15014567,6.01592155 2.36775647,5.7 2.99,5.7 C3.61224353,5.7 3.79595655,6.09105906 3.79595655,6.49105906 Z" id="icon---19-b"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/dist/collection/collection-manifest.json

@@ -2,9 +2,36 @@
   "entries": [
     "./components/atoms/icon/icon.component.js",
     "./components/atoms/illustration/illustration.component.js",
+    "./components/atoms/avatar/avatar.component.js",
+    "./components/atoms/avatar-group/avatar-group.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/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/loader/loader.component.js",
-    "./components/atoms/tooltip/tooltip.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/stepper-line/stepper-line.component.js",
+    "./components/atoms/stepper-step/stepper-step.component.js",
+    "./components/atoms/tooltip/tooltip.component.js",
+    "./components/molecules/dropdown/dropdown.component.js",
+    "./components/molecules/navigation-item/navigation-item.component.js",
+    "./components/molecules/pagination/pagination.component.js",
+    "./components/molecules/stepper/stepper.component.js",
+    "./components/organisms/modal/modal.component.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -0,0 +1,24 @@
+p-avatar {
+  @apply inline-block;
+}
+p-avatar > img {
+  @apply object-cover object-center;
+}
+p-avatar[size=small] > img {
+  @apply w-10 h-10;
+}
+p-avatar[size=medium] > img {
+  @apply w-20 h-20;
+}
+p-avatar[size=large] > img {
+  @apply w-28 h-28;
+}
+p-avatar[variant=company] > img {
+  @apply rounded;
+}
+p-avatar[variant=company][size=medium] > img, p-avatar[variant=company][size=large] > img {
+  @apply rounded-large;
+}
+p-avatar[variant=user] > img {
+  @apply rounded-round;
+} .static{position:static!important}

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

@@ -0,0 +1,107 @@
+import { Component, h, Host, Prop, State } 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;
+  }
+  render() {
+    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');
+  }
+  static get is() { return "p-avatar"; }
+  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'"
+    },
+    "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": true,
+      "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"
+      },
+      "attribute": "default-image",
+      "reflect": false
+    },
+    "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": {}
+  }; }
+}

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

@@ -0,0 +1,18 @@
+p-avatar-group {
+  @apply flex -space-x-1 overflow-hidden items-center;
+}
+p-avatar-group p-avatar > img {
+  @apply ring-2 ring-white;
+}
+p-avatar-group p-avatar:nth-child(1) {
+  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 {
+  @apply text-sm text-storm-vague pl-4;
+} .static{position:static!important}

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

@@ -0,0 +1,36 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class AvatarGroup {
+  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/button/button.component.css

@@ -68,4 +68,26 @@ p-button > a.size-small {
 p-button > button[disabled],
 p-button > a[disabled] {
   @apply opacity-50;
-}
+}
+p-button > button.has-chevron,
+p-button > a.has-chevron {
+  @apply pr-2;
+}
+p-button > button.has-chevron.variant-secondary:hover p-icon:last-child,
+p-button > a.has-chevron.variant-secondary:hover p-icon:last-child {
+  @apply text-indigo;
+}
+p-button > button.has-icon-only,
+p-button > a.has-icon-only {
+  @apply px-2;
+}
+p-button > button.has-icon-only > p-icon:first-child,
+p-button > a.has-icon-only > p-icon:first-child {
+  @apply mx-0;
+}
+p-button > button.should-inherit-text,
+p-button > a.should-inherit-text {
+  color: inherit !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+} .static{position:static!important}.static{position:static!important}.inline-block{display:inline-block!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-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}.static{position:static!important}.inline{display:inline!important}.flex{display:flex!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}

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

@@ -1,4 +1,4 @@
-import { Component, Event, h, Host, Listen, Prop } from '@stencil/core';
+import { Component, Event, h, Host, Listen, Prop, } from '@stencil/core';
 export class Button {
   constructor() {
     /**
@@ -13,14 +13,26 @@ export class Button {
      * Wether to show a loader or not
      */
     this.loading = false;
+    /**
+     * Wether to show a chevron or not
+     */
+    this.chevron = false;
     /**
      * Wether the button is disabled
      */
     this.disabled = false;
+    /**
+     * Wether the button is icon only
+     */
+    this.iconOnly = false;
     /**
      * Icon position
      */
     this.iconPosition = 'end';
+    /**
+     * Wether the button should inherit text styles
+     */
+    this.inheritText = false;
   }
   render() {
     let loaderColor = 'white';
@@ -34,11 +46,16 @@ export class Button {
     }
     const VariableTag = this.variant === 'text' ? 'a' : 'button';
     return (h(Host, { class: "p-button" },
-      h(VariableTag, { class: `variant-${this.variant} size-${this.size} icon-position-${this.iconPosition}`, disabled: this.disabled, href: this.href, target: this.target },
-        this.icon && this.iconPosition === 'start' && this._getIcon(),
+      h(VariableTag, { class: `variant-${this.variant} size-${this.size} icon-position-${this.iconPosition} ${this.chevron && 'has-chevron'} ${this.iconOnly && 'has-icon-only'} ${this.inheritText && 'should-inherit-text'}`, disabled: this.disabled, href: this.href, target: this.target },
+        this.icon &&
+          this.iconPosition === 'start' &&
+          this._getIcon(),
         h("slot", null),
-        this.icon && this.iconPosition === 'end' && this._getIcon(),
-        this.loading && h("p-loader", { color: loaderColor }))));
+        this.icon &&
+          this.iconPosition === 'end' &&
+          this._getIcon(),
+        this.loading && h("p-loader", { color: loaderColor }),
+        this.chevron && (h("p-icon", { variant: "chevron", rotate: this.chevron === 'up' ? 180 : 0 })))));
   }
   handleClick(ev) {
     if (this.loading || this.disabled) {
@@ -50,7 +67,7 @@ export class Button {
     if (!this.icon) {
       return;
     }
-    return h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate });
+    return (h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
   }
   static get is() { return "p-button"; }
   static get originalStyleUrls() { return {
@@ -148,6 +165,24 @@ export class Button {
       "reflect": false,
       "defaultValue": "false"
     },
+    "chevron": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean | 'up' | 'down'",
+        "resolved": "\"down\" | \"up\" | boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to show a chevron or not"
+      },
+      "attribute": "chevron",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,
@@ -171,7 +206,7 @@ export class Button {
       "mutable": false,
       "complexType": {
         "original": "IconVariant",
-        "resolved": "\"arrow\" | \"attachment\" | \"bread\" | \"calendar\" | \"car\" | \"checkmark\" | \"chevron\" | \"clock\" | \"cogs\" | \"comment\" | \"document\" | \"download\" | \"envelope\" | \"explanation\" | \"eye\" | \"filter\" | \"grid\" | \"headset\" | \"list\" | \"location\" | \"megaphone\" | \"minus\" | \"negative\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"tachometer\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
+        "resolved": "\"arrow\" | \"attachment\" | \"bread\" | \"calendar\" | \"car\" | \"checklist\" | \"checkmark\" | \"chevron\" | \"clock\" | \"cogs\" | \"comment\" | \"document\" | \"download\" | \"envelope\" | \"explanation\" | \"eye\" | \"filter\" | \"folder\" | \"grid\" | \"headset\" | \"integration\" | \"list\" | \"location\" | \"megaphone\" | \"minus\" | \"negative\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"tachometer\" | \"task\" | \"template\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
         "references": {
           "IconVariant": {
             "location": "import",
@@ -188,6 +223,24 @@ export class Button {
       "attribute": "icon",
       "reflect": false
     },
+    "iconOnly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the button is icon only"
+      },
+      "attribute": "icon-only",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "iconPosition": {
       "type": "string",
       "mutable": false,
@@ -232,9 +285,14 @@ export class Button {
       "type": "number",
       "mutable": false,
       "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+        "original": "RotateOptions",
+        "resolved": "-135 | -180 | -225 | -25 | -270 | -315 | -45 | -90 | 0 | 135 | 180 | 225 | 25 | 270 | 315 | 45 | 90",
+        "references": {
+          "RotateOptions": {
+            "location": "import",
+            "path": "../../../utils/types"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -244,6 +302,24 @@ export class Button {
       },
       "attribute": "icon-rotate",
       "reflect": false
+    },
+    "inheritText": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the button should inherit text styles"
+      },
+      "attribute": "inherit-text",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{

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

@@ -0,0 +1,9 @@
+p-card-body {
+  @apply px-6 py-4;
+  @apply text-sm text-storm-vague;
+}
+p-card-body.should-inherit-text {
+  color: inherit !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+} .static{position:static!important}

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

@@ -0,0 +1,40 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class CardBody {
+  constructor() {
+    /**
+     * Wether the button should inherit text styles
+     */
+    this.inheritText = false;
+  }
+  render() {
+    return (h(Host, { class: `p-card-body ${this.inheritText && 'should-inherit-text'}` },
+      h("slot", null)));
+  }
+  static get is() { return "p-card-body"; }
+  static get originalStyleUrls() { return {
+    "$": ["card-body.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["card-body.component.css"]
+  }; }
+  static get properties() { return {
+    "inheritText": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the button should inherit text styles"
+      },
+      "attribute": "inherit-text",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}