@paperless/core 0.1.0-alpha.7 → 0.1.0-alpha.70

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" },
+      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": true,
+      "defaultValue": "false"
+    }
+  }; }
+}

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

@@ -0,0 +1,17 @@
+:host {
+  @apply flex flex-col w-full;
+  @apply bg-white rounded-large;
+  @apply shadow-4 !important;
+}
+
+:host([hoverable]) {
+  @apply cursor-pointer;
+}
+
+:host([hoverable]:hover) {
+  @apply shadow-5 !important;
+}
+
+:host([shadow=false]) {
+  @apply shadow-transparent !important;
+} .static{position:static!important}

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

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

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

@@ -0,0 +1,17 @@
+p-card-header {
+  @apply mx-6 py-3;
+  @apply flex gap-3 items-center;
+  @apply text-storm-medium;
+  @apply border-b border-b-mystic-medium !important;
+}
+p-card-header .title {
+  @apply flex items-center;
+  @apply font-semibold;
+}
+p-card-header .title > p-icon {
+  @apply ml-2 text-mystic-dark;
+}
+
+p-card-container.has-hover:hover p-card-header .title > p-icon {
+  @apply text-indigo;
+} .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-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}

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

@@ -0,0 +1,61 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class CardHeader {
+  constructor() {
+    /**
+     * Enable the title arrow
+     */
+    this.arrow = false;
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, { class: "p-card-header" },
+      h("slot", { name: "prefix" }),
+      (((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) || this.arrow) && (h("div", { class: "title" }, (_b = this.header) !== null && _b !== void 0 ? _b : '',
+        this.arrow && h("p-icon", { variant: "arrow" }))),
+      h("slot", { name: "suffix" })));
+  }
+  static get is() { return "p-card-header"; }
+  static get originalStyleUrls() { return {
+    "$": ["card-header.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["card-header.component.css"]
+  }; }
+  static get properties() { return {
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Content of the card header"
+      },
+      "attribute": "header",
+      "reflect": false
+    },
+    "arrow": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable the title arrow"
+      },
+      "attribute": "arrow",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

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

@@ -0,0 +1,5 @@
+:host {
+  @apply h-4 px-2 bg-indigo rounded-xlarge;
+  @apply text-xs leading-3 text-white font-bold uppercase;
+  @apply flex justify-center items-center;
+} .static{position:static!important}.static{position:static!important}

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

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

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

@@ -0,0 +1,3 @@
+:host {
+  @apply block h-px bg-mystic-medium my-2 w-full;
+} .static{position:static!important}.m-0{margin:0!important}.mt-6{margin-top:1.5rem!important}.flex{display:flex!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.gap-3{gap:.75rem!important}.whitespace-nowrap{white-space:nowrap!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.font-medium{font-weight:500!important}.text-storm-vague{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity))!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-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@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:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.static{position:static!important}.static{position:static!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.static{position:static!important}.static{position:static!important}

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

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

package/dist/collection/components/atoms/dropdown-menu-container/dropdown-menu-container.component.css

@@ -0,0 +1,5 @@
+p-dropdown-menu-container {
+  @apply min-w-[222px];
+  @apply flex flex-col py-2 bg-white rounded-xxlarge;
+  @apply filter drop-shadow-4;
+} .visible{visibility:visible!important}.static{position:static!important}.static{position:static!important}.static{position:static!important}

package/dist/collection/components/atoms/dropdown-menu-container/dropdown-menu-container.component.js

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

package/dist/collection/components/atoms/dropdown-menu-item/dropdown-menu-item.component.css

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

package/dist/collection/components/atoms/dropdown-menu-item/dropdown-menu-item.component.js

@@ -0,0 +1,41 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class DropdownMenuItem {
+  constructor() {
+    /**
+     * Wether the dropdown menu item is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: `p-dropdown-menu-item ${this.active && 'active'}` },
+      h("slot", null)));
+  }
+  static get is() { return "p-dropdown-menu-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dropdown-menu-item.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dropdown-menu-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 dropdown menu item is active"
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

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

@@ -1,7 +1,7 @@
 :host .helper {
   @apply inline-block cursor-pointer bg-no-repeat bg-center w-3 h-3;
-  background-image: url(/assets/images/helper.svg);
+  background-image: url(/assets/images/helper/helper.svg);
 }
 :host .helper:hover {
-  background-image: url(/assets/images/helper-hover.svg);
-}
+  background-image: url(/assets/images/helper/helper-hover.svg);
+} .static{position:static!important}.ml-2{margin-left:.5rem!important}.flex{display:flex!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.visible{visibility:visible!important}.static{position:static!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.static{position:static!important}.visible{visibility:visible!important}.static{position:static!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}

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

@@ -1,9 +1,15 @@
-import { Component, h, Host } from '@stencil/core';
+import { Component, h, Host, Prop } from '@stencil/core';
 export class Helper {
+  constructor() {
+    /**
+     * The placement of the helper popover
+     */
+    this.placement = 'top';
+  }
   render() {
     return (h(Host, { class: "p-helper" },
-      h("p-tooltip", null,
-        h("div", { slot: "tooltip" },
+      h("p-tooltip", { placement: this.placement },
+        h("div", { slot: "popover" },
           h("slot", null)),
         h("div", { slot: "content", class: "helper" }))));
   }
@@ -15,4 +21,29 @@ export class Helper {
   static get styleUrls() { return {
     "$": ["helper.component.css"]
   }; }
+  static get properties() { return {
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Placement",
+        "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {
+          "Placement": {
+            "location": "import",
+            "path": "@popperjs/core"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The placement of the helper popover"
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'top'"
+    }
+  }; }
 }

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

@@ -0,0 +1 @@
+ .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-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.static{position:static!important}.m-0{margin:0!important}.mt-6{margin-top:1.5rem!important}.flex{display:flex!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.gap-3{gap:.75rem!important}.whitespace-nowrap{white-space:nowrap!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.font-medium{font-weight:500!important}.text-storm-vague{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity))!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-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.static{position:static!important}.ml-2{margin-left:.5rem!important}.flex{display:flex!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.visible{visibility:visible!important}.static{position:static!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.static{position:static!important}.static{position:static!important}.static{position:static!important}.flex{display:flex!important}.static{position:static!important}.mb-3{margin-bottom:.75rem!important}.ml-2{margin-left:.5rem!important}.flex-auto{flex:1 1 auto!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}.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}.border-t-2{border-top-width:2px!important}.border-r-2{border-right-width:2px!important}.border-indigo{border-color:rgb(82 138 250/var(--tw-border-opacity))!important}.border-indigo,.border-mystic-dark{--tw-border-opacity:1!important}.border-mystic-dark{border-color:rgb(218 230 240/var(--tw-border-opacity))!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}.static{position:static!important}.static{position:static!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-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.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-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.static{position:static!important}.static{position:static!important}.static{position:static!important}.static{position:static!important}

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

@@ -2,10 +2,6 @@ import { Component, h, Host, Prop } from '@stencil/core';
 import icons from '../../../utils/icons';
 export class Icon {
   constructor() {
-    /**
-     * The icon the be displayed
-     */
-    this.variant = null;
     /**
      * The size of the icon, using tailwind sizes
      */
@@ -13,7 +9,7 @@ export class Icon {
     /**
      * Wether to rotate the icon x degrees
      */
-    this.rotate = null;
+    this.rotate = 0;
     /**
      * Wether to flip the icon horizontally or vertically
      */
@@ -21,42 +17,85 @@ export class Icon {
   }
   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-sm': this.size === 'sm',
+      '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 is() { return "p-icon"; }
+  static get originalStyleUrls() { return {
+    "$": ["icon.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["icon.component.css"]
+  }; }
   static get properties() { return {
     "variant": {
       "type": "string",
       "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": "local"
           }
         }
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],
         "text": "The icon the be displayed"
       },
       "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "null"
+      "reflect": false
     },
     "size": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "original": "TextSizeOptions",
+        "resolved": "\"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"auto\" | \"base\" | \"lg\" | \"sm\" | \"xl\" | \"xs\" | \"xxs\"",
+        "references": {
+          "TextSizeOptions": {
+            "location": "import",
+            "path": "../../../utils/types"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -72,9 +111,14 @@ export class Icon {
       "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,
@@ -84,7 +128,7 @@ export class Icon {
       },
       "attribute": "rotate",
       "reflect": false,
-      "defaultValue": "null"
+      "defaultValue": "0"
     },
     "flip": {
       "type": "string",

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

@@ -1,12 +1,6 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 import illustrations from '../../../utils/illustrations';
 export class Illustration {
-  constructor() {
-    /**
-     * The icon the be displayed
-     */
-    this.variant = null;
-  }
   render() {
     const illustration = illustrations[this.variant];
     return h(Host, { class: "p-illustration block", innerHTML: illustration });
@@ -25,15 +19,14 @@ export class Illustration {
           }
         }
       },
-      "required": false,
+      "required": true,
       "optional": false,
       "docs": {
         "tags": [],
         "text": "The icon the be displayed"
       },
       "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "null"
+      "reflect": false
     }
   }; }
 }