@paperless/core 0.1.0-alpha.4 → 0.1.0-alpha.43

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

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

@@ -1,34 +1,40 @@
 :host {
-  @apply cursor-pointer;
+  @apply cursor-pointer inline-block;
 }
-:host .tooltip {
-  @apply bg-storm hidden text-xs font-medium text-white py-1 px-3 rounded drop-shadow-1;
+:host .popover {
+  @apply bg-white hidden text-xs font-medium py-2 px-3 rounded drop-shadow-4;
   max-width: 14.5rem;
 }
-:host .tooltip[data-show] {
+:host .popover.variant-hover, :host .popover.variant-error {
+  @apply bg-storm text-white py-1;
+}
+:host .popover.variant-error {
+  @apply bg-negative;
+}
+:host .popover[data-show] {
   @apply block;
 }
-:host .tooltip .arrow,
-:host .tooltip .arrow::before {
+:host .popover .arrow,
+:host .popover .arrow::before {
   background: inherit;
   @apply absolute w-2 h-2;
 }
-:host .tooltip .arrow {
+:host .popover .arrow {
   visibility: hidden;
 }
-:host .tooltip .arrow::before {
+:host .popover .arrow::before {
   @apply visible transform rotate-45;
   content: "";
 }
-:host .tooltip[data-popper-placement^=top] > .arrow {
+:host .popover[data-popper-placement^=top] > .arrow {
   @apply -bottom-1;
 }
-:host .tooltip[data-popper-placement^=bottom] > .arrow {
+:host .popover[data-popper-placement^=bottom] > .arrow {
   @apply -top-1;
 }
-:host .tooltip[data-popper-placement^=left] > .arrow {
+:host .popover[data-popper-placement^=left] > .arrow {
   @apply -right-1;
 }
-:host .tooltip[data-popper-placement^=right] > .arrow {
+:host .popover[data-popper-placement^=right] > .arrow {
   @apply -left-1;
-}
+} .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}