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

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

@@ -13,7 +13,7 @@
   @apply fixed top-0 left-0 w-screen h-screen;
   @apply flex items-center justify-center;
   @apply bg-mystic;
-  z-index: 9999;
+  z-index: 1001;
 }
 :host .loading-screen .content {
   @apply max-w-xs;
@@ -23,4 +23,4 @@
 }
 :host .loading-screen .content .loader-wrapper .loader {
   @apply text-4xl;
-}
+} .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}.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/loader/loader.component.js

@@ -27,13 +27,14 @@ export class Loader {
       return;
     }
     if (this.variant === 'full-screen') {
-      return (h(Host, { class: "p-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;
@@ -42,7 +43,7 @@ export class Loader {
       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/collection/components/atoms/modal-backdrop/modal-backdrop.component.css

@@ -0,0 +1,7 @@
+:host {
+  @apply fixed top-0 left-0 z-modal;
+  @apply h-screen w-screen p-16;
+  @apply backdrop-blur-xs bg-storm/50;
+  @apply flex justify-center items-center;
+  @apply animate-fade-in;
+} .container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static!important}.static{position:static!important}.static{position:static!important}.w-80{width:20rem!important}.w-\[33\.5rem\]{width:33.5rem!important}.w-\[38rem\]{width:38rem!important}.w-\[47\.5rem\]{width:47.5rem!important}.w-\[57\.5rem\]{width:57.5rem!important}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.static{position:static!important}.static{position:static!important}

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

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

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

@@ -0,0 +1,7 @@
+:host {
+  @apply px-14 py-6;
+}
+
+:host(.variant-table) {
+  @apply px-6;
+} .container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static!important}.static{position:static!important}.static{position:static!important}.w-80{width:20rem!important}.w-\[33\.5rem\]{width:33.5rem!important}.w-\[38rem\]{width:38rem!important}.w-\[47\.5rem\]{width:47.5rem!important}.w-\[57\.5rem\]{width:57.5rem!important}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.static{position:static!important}.static{position:static!important}

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

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

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

@@ -0,0 +1,6 @@
+p-modal-container {
+  @apply flex flex-col;
+  @apply bg-white rounded-xxlarge;
+  @apply overflow-hidden;
+  @apply shadow-4 !important;
+} .container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static!important}.static{position:static!important}.static{position:static!important}.w-80{width:20rem!important}.w-\[33\.5rem\]{width:33.5rem!important}.w-\[38rem\]{width:38rem!important}.w-\[47\.5rem\]{width:47.5rem!important}.w-\[57\.5rem\]{width:57.5rem!important}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.static{position:static!important}.static{position:static!important}.w-80{width:20rem!important}.w-\[33\.5rem\]{width:33.5rem!important}.w-\[38rem\]{width:38rem!important}.w-\[47\.5rem\]{width:47.5rem!important}.w-\[57\.5rem\]{width:57.5rem!important}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}

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

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

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

@@ -0,0 +1,4 @@
+:host {
+  @apply flex flex-col;
+  @apply pb-6 px-6;
+} .container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static!important}.static{position:static!important}.static{position:static!important}.w-80{width:20rem!important}.w-\[33\.5rem\]{width:33.5rem!important}.w-\[38rem\]{width:38rem!important}.w-\[47\.5rem\]{width:47.5rem!important}.w-\[57\.5rem\]{width:57.5rem!important}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.static{position:static!important}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}

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

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

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

@@ -0,0 +1,6 @@
+:host {
+  @apply bg-mystic;
+  @apply block px-8 py-6;
+  @apply text-storm-dark text-3xl font-bold;
+  @apply border-b border-b-mystic-medium !important;
+} .container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static!important}.static{position:static!important}.static{position:static!important}.w-80{width:20rem!important}.w-\[33\.5rem\]{width:33.5rem!important}.w-\[38rem\]{width:38rem!important}.w-\[47\.5rem\]{width:47.5rem!important}.w-\[57\.5rem\]{width:57.5rem!important}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.static{position:static!important}.static{position:static!important}

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

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

package/dist/collection/components/atoms/pagination-item/pagination-item.component.css

@@ -0,0 +1,16 @@
+:host {
+  @apply h-8 w-8;
+  @apply flex justify-center items-center;
+  @apply font-semibold text-storm-medium text-sm;
+  @apply rounded;
+  @apply cursor-pointer;
+}
+
+:host(:hover),
+:host(:focus) {
+  @apply text-storm;
+}
+
+:host(.active) {
+  @apply text-indigo bg-indigo-light;
+} .static{position:static!important}.static{position:static!important}.static{position:static!important}

package/dist/collection/components/atoms/pagination-item/pagination-item.component.js

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

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

@@ -0,0 +1,13 @@
+:host {
+  @apply flex gap-4 items-center;
+}
+:host .name {
+  @apply flex flex-col justify-center;
+}
+:host .name > *:nth-child(1) {
+  @apply text-sm text-storm-dark;
+  @apply font-semibold;
+}
+:host .name > *:nth-child(2) {
+  @apply text-sm text-storm-vague;
+} .static{position:static!important}.flex{display:flex!important}

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

@@ -0,0 +1,25 @@
+import { Component, Element, h, Host } from '@stencil/core';
+export class Profile {
+  render() {
+    const avatar = this._generateAvatar();
+    return (h(Host, { class: "p-profile" },
+      avatar,
+      h("div", { class: "name" },
+        h("slot", { name: "title" }),
+        h("slot", { name: "subtitle" }))));
+  }
+  _generateAvatar() {
+    var _a, _b;
+    const avatar = this._el.querySelector('p-avatar[slot="avatar"]');
+    return (h("p-avatar", { class: "flex", src: (_a = avatar.src) !== null && _a !== void 0 ? _a : null, "default-image": (_b = avatar.defaultImage) !== null && _b !== void 0 ? _b : null, variant: avatar.variant, size: "small" }));
+  }
+  static get is() { return "p-profile"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["profile.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["profile.component.css"]
+  }; }
+  static get elementRef() { return "_el"; }
+}

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

@@ -0,0 +1,5 @@
+p-segment-container {
+  @apply flex bg-white rounded;
+  @apply filter drop-shadow-4;
+  @apply h-8 p-1;
+} .static{position:static!important}

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

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

package/dist/collection/components/atoms/segment-item/segment-item.component.css

@@ -0,0 +1,21 @@
+:host {
+  @apply h-6 flex items-center px-2 rounded font-medium mr-1;
+  @apply text-storm-light text-sm;
+  @apply cursor-pointer;
+}
+
+:host(.variant-icon) {
+  @apply w-6 justify-center px-0;
+}
+
+:host(:hover) {
+  @apply text-storm-medium;
+}
+
+:host(.active) {
+  @apply text-indigo bg-indigo-light;
+}
+
+:host(:last-child) {
+  @apply mr-0;
+} .static{position:static!important}

package/dist/collection/components/atoms/segment-item/segment-item.component.js

@@ -0,0 +1,112 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class SegmentItem {
+  constructor() {
+    /**
+     * Wether the segment item is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: `p-segment-item variant-${this.icon ? 'icon' : 'default'} ${this.active && 'active'}` }, this.icon ? this._getIcon() : h("slot", null)));
+  }
+  _getIcon() {
+    if (!this.icon) {
+      return;
+    }
+    return (h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
+  }
+  static get is() { return "p-segment-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["segment-item.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["segment-item.component.css"]
+  }; }
+  static get properties() { return {
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the segment item is active"
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconVariant",
+        "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",
+            "path": "../icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon to show on the segment item"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "iconFlip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconFlipOptions",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "IconFlipOptions": {
+            "location": "import",
+            "path": "../icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon flip"
+      },
+      "attribute": "icon-flip",
+      "reflect": false
+    },
+    "iconRotate": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "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,
+      "docs": {
+        "tags": [],
+        "text": "Icon rotate"
+      },
+      "attribute": "icon-rotate",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,16 @@
+p-status {
+  @apply flex items-center;
+  @apply text-sm text-storm-vague font-medium;
+}
+p-status p-icon {
+  @apply mr-2 text-base;
+}
+p-status.variant-positive {
+  @apply text-positive;
+}
+p-status.variant-unbiased {
+  @apply text-unbiased;
+}
+p-status.variant-negative {
+  @apply text-negative;
+} .static{position:static!important}

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

@@ -0,0 +1,133 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class Status {
+  constructor() {
+    /**
+     * The variant of the status
+     */
+    this.variant = 'default';
+  }
+  render() {
+    return (h(Host, { class: `p-status variant-${this.variant}
+                }` },
+      this._getIcon(),
+      h("slot", null)));
+  }
+  _getIcon() {
+    const icon = this.icon || this._getVariantIcon();
+    if (!icon) {
+      return;
+    }
+    return (h("p-icon", { variant: icon, flip: this.iconFlip, rotate: this.iconRotate }));
+  }
+  _getVariantIcon() {
+    let icon = null;
+    switch (this.variant) {
+      case 'positive':
+        icon = 'checkmark';
+        break;
+      case 'negative':
+        icon = 'negative';
+        break;
+      case 'unbiased':
+        icon = 'clock';
+        break;
+      default:
+        icon = null;
+        break;
+    }
+    return icon;
+  }
+  static get is() { return "p-status"; }
+  static get originalStyleUrls() { return {
+    "$": ["status.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["status.component.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'positive' | 'unbiased' | 'negative'",
+        "resolved": "\"default\" | \"negative\" | \"positive\" | \"unbiased\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The variant of the status"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconVariant",
+        "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",
+            "path": "../icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon to show on the status"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "iconFlip": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconFlipOptions",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {
+          "IconFlipOptions": {
+            "location": "import",
+            "path": "../icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon flip"
+      },
+      "attribute": "icon-flip",
+      "reflect": false
+    },
+    "iconRotate": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "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,
+      "docs": {
+        "tags": [],
+        "text": "Icon rotate"
+      },
+      "attribute": "icon-rotate",
+      "reflect": false
+    }
+  }; }
+}