@paperless/core 0.1.0-alpha.0 → 0.1.0-alpha.13

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6758a39e.js');
+const index = require('./index-6b6e08cc.js');
 
 /*
  Stencil Client Patch Esm v2.17.0 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["p-button.cjs",[[1,"p-button",{"variant":[1]}]]],["p-icon.cjs",[[0,"p-icon",{"variant":[1],"size":[1],"rotate":[2],"flip":[1]}]]],["p-illustration.cjs",[[0,"p-illustration",{"variant":[1]}]]],["p-tooltip.cjs",[[1,"p-tooltip",{"content":[8],"placement":[1],"forceShow":[4,"force-show"]},[[1,"mouseenter","_show"],[0,"focus","_show"],[1,"mouseleave","_hide"],[0,"blur","_hide"]]]]]], options);
+  return index.bootstrapLazy([["p-pagination.cjs",[[0,"p-pagination",{"value":[1026],"pageSize":[2,"page-size"],"total":[2]}]]],["p-helper.cjs",[[1,"p-helper"]]],["p-info-panel.cjs",[[1,"p-info-panel",{"variant":[1],"header":[1],"content":[1],"closeable":[4]}]]],["p-avatar.cjs",[[1,"p-avatar",{"variant":[1],"size":[1],"defaultImage":[1,"default-image"],"src":[1],"_src":[32]}]]],["p-counter.cjs",[[1,"p-counter"]]],["p-divider.cjs",[[1,"p-divider"]]],["p-illustration.cjs",[[0,"p-illustration",{"variant":[1]}]]],["p-pagination-item.cjs",[[1,"p-pagination-item",{"active":[4]}]]],["p-tooltip.cjs",[[1,"p-tooltip",{"variant":[1],"popover":[8],"placement":[1],"show":[4],"canManuallyClose":[4,"can-manually-close"]},[[2,"click","clickHandler"],[6,"click","documentClickHandler"],[1,"mouseenter","mouseEnterHandler"],[0,"focus","mouseEnterHandler"],[1,"mouseleave","mouseLeaveHandler"],[0,"blur","mouseLeaveHandler"]]]]],["p-button_3.cjs",[[4,"p-button",{"variant":[1],"href":[1],"target":[1],"size":[1],"loading":[4],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"],"iconFlip":[1,"icon-flip"],"iconRotate":[2,"icon-rotate"]},[[2,"click","handleClick"]]],[1,"p-loader",{"show":[4],"variant":[1],"color":[1],"modalTitle":[1,"modal-title"],"modalDescription":[1,"modal-description"]}],[0,"p-icon",{"variant":[1],"size":[1],"rotate":[2],"flip":[1]}]]]], options);
   });
 };
 

package/dist/cjs/p-avatar.cjs.entry.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-6b6e08cc.js');
+
+const avatarComponentCss = "/*! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com*/*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;border:0 solid;box-sizing:border-box}:after,:before{--tw-content:\"\"}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.w-10{width:2.5rem!important}.w-20{width:5rem!important}.w-28{width:7rem!important}.rounded{border-radius:.25rem!important}.object-cover{-o-object-fit:cover!important;object-fit:cover!important}:host{display:inline-block}:host>img{-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}:host(.size-small)>img{height:2.5rem;width:2.5rem}:host(.size-medium)>img{height:5rem;width:5rem}:host(.size-large)>img{height:7rem;width:7rem}:host(.variant-company)>img{border-radius:.25rem}:host(.variant-company.size-large),:host(.variant-company.size-medium){border-radius:.375rem}:host(.variant-user)>img{border-radius:100%}.static{position:static!important}";
+
+const Avatar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The variant of the avatar
+     */
+    this.variant = 'user';
+    /**
+     * The size of the avatar
+     */
+    this.size = 'medium';
+    this._src = this.src;
+  }
+  render() {
+    return (index.h(index.Host, { class: `p-avatar size-${this.size} variant-${this.variant}` }, index.h("img", { src: this._src, onError: () => this._setDefaultLink() })));
+  }
+  _setDefaultLink() {
+    var _a;
+    this._src = (_a = this.defaultImage) !== null && _a !== void 0 ? _a : (this.variant === 'user' ? '/assets/images/avatar/user-default.svg' : '/assets/images/avatar/company-default.svg');
+  }
+};
+Avatar.style = avatarComponentCss;
+
+exports.p_avatar = Avatar;

package/dist/cjs/{p-icon.cjs.entry.js → p-button_3.cjs.entry.js}

@@ -2,12 +2,67 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6758a39e.js');
+const index = require('./index-6b6e08cc.js');
+
+const buttonComponentCss = "/*! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com*/*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;border:0 solid;box-sizing:border-box}:after,:before{--tw-content:\"\"}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.flex{display:flex!important}.h-10{height:2.5rem!important}.h-8{height:2rem!important}.items-center{align-items:center!important}.border{border-width:1px!important}.border-mystic-dark{--tw-border-opacity:1!important;border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-indigo{background-color:rgb(82 138 250/var(--tw-bg-opacity))!important}.bg-indigo,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.bg-storm-light\\/5{background-color:rgba(176,178,203,.05)!important}.font-semibold{font-weight:600!important}.outline{outline-style:solid!important}.filter{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}p-button{display:inline-block}p-button>a,p-button>button{align-items:center;border:0;border-radius:.375rem;cursor:pointer;display:flex;font-weight:600;height:2.5rem;justify-content:center;line-height:1rem;outline:0}p-button>a.icon-position-end>p-icon,p-button>a>p-loader,p-button>button.icon-position-end>p-icon,p-button>button>p-loader{margin-left:.5rem}p-button>a.icon-position-start>p-icon,p-button>button.icon-position-start>p-icon{margin-right:.5rem}p-button>a.variant-primary,p-button>a.variant-secondary,p-button>button.variant-primary,p-button>button.variant-secondary{padding-left:1rem;padding-right:1rem}p-button>a.variant-primary,p-button>button.variant-primary{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}p-button>a.variant-primary:hover,p-button>button.variant-primary:hover{background-color:rgba(82,138,250,.95)}p-button>a.variant-primary:active,p-button>button.variant-primary:active{--tw-bg-opacity:1;background-color:rgb(44 75 169/var(--tw-bg-opacity))}p-button>a.variant-secondary,p-button>button.variant-secondary{--tw-border-opacity:1!important;--tw-bg-opacity:1;--tw-text-opacity:1;--tw-drop-shadow:drop-shadow(0px 0.3125rem 1rem rgba(0,24,98,.08)) drop-shadow(0px 0.0625rem 0.1875rem rgba(0,24,98,.13));background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-width:1px!important;color:rgb(81 83 107/var(--tw-text-opacity));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)}p-button>a.variant-secondary:hover,p-button>button.variant-secondary:hover{--tw-bg-opacity:1;background-color:rgb(247 250 252/var(--tw-bg-opacity))}p-button>a.variant-secondary:active,p-button>button.variant-secondary:active{background-color:rgba(176,178,203,.05);border-color:rgba(176,178,203,.2)}p-button>a.variant-text,p-button>button.variant-text{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}p-button>a.variant-text:hover,p-button>button.variant-text:hover{--tw-text-opacity:1;color:rgb(44 75 169/var(--tw-text-opacity))}p-button>a.size-small,p-button>button.size-small{font-size:.875rem;height:2rem;line-height:1.25rem}p-button>a[disabled],p-button>button[disabled]{opacity:.5}.static{position:static!important}.inline-block{display:inline-block!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.inline{display:inline!important}.justify-center{justify-content:center!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}";
+
+const Button = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.onClick = index.createEvent(this, "onClick", 7);
+    /**
+     * The variant of the button
+     */
+    this.variant = 'primary';
+    /**
+     * The size of the button
+     */
+    this.size = 'medium';
+    /**
+     * Wether to show a loader or not
+     */
+    this.loading = false;
+    /**
+     * Wether the button is disabled
+     */
+    this.disabled = false;
+    /**
+     * Icon position
+     */
+    this.iconPosition = 'end';
+  }
+  render() {
+    let loaderColor = 'white';
+    switch (this.variant) {
+      case 'secondary':
+        loaderColor = 'storm';
+        break;
+      case 'text':
+        loaderColor = 'indigo';
+        break;
+    }
+    const VariableTag = this.variant === 'text' ? 'a' : 'button';
+    return (index.h(index.Host, { class: "p-button" }, index.h(VariableTag, { class: `variant-${this.variant} size-${this.size} icon-position-${this.iconPosition}`, disabled: this.disabled, href: this.href, target: this.target }, this.icon && this.iconPosition === 'start' && this._getIcon(), index.h("slot", null), this.icon && this.iconPosition === 'end' && this._getIcon(), this.loading && index.h("p-loader", { color: loaderColor }))));
+  }
+  handleClick(ev) {
+    if (this.loading || this.disabled) {
+      return;
+    }
+    this.onClick.emit(ev);
+  }
+  _getIcon() {
+    if (!this.icon) {
+      return;
+    }
+    return index.h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate });
+  }
+};
+Button.style = buttonComponentCss;
 
 const arrow = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 16 16" version="1.1">
     <title>434AFB85-135A-4569-A66B-6D5812BAA42C@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -208.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -208.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="Combined-Shape" transform="translate(243.000000, 0.000000)">
@@ -22,7 +77,7 @@ const arrow = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w
 const attachment = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 16 16" version="1.1">
     <title>6900D5DE-1A64-4EE8-8ABC-1FEE34C10458@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -240.000000)" fill="#80829E" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -240.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="attachment" transform="translate(0.000000, 32.000000)">
@@ -40,7 +95,7 @@ const bread = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>5F1EB64F-AB98-4EB4-AC35-FB0B26115170@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -272.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -272.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="bread" transform="translate(0.000000, 64.000000)">
@@ -57,7 +112,7 @@ const bread = `<?xml version="1.0" encoding="UTF-8"?>
 const calendar = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 16 16" version="1.1">
     <title>3D99E2A7-B47A-4957-8D2C-7AF582F435CF@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -304.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -304.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="calendar" transform="translate(0.000000, 96.000000)">
@@ -75,7 +130,7 @@ const car = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>15BDAF47-5E79-4AD0-9D15-AEC22BEDD040@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -336.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -336.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="car" transform="translate(0.000000, 128.000000)">
@@ -93,7 +148,7 @@ const checkmark = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>EB3016C2-A1DF-47ED-937C-697443FD3F3C@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -368.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -368.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="checkmark" transform="translate(0.000000, 160.000000)">
@@ -111,7 +166,7 @@ const chevron = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>2D60A936-D98C-47D5-81C3-87BE72E0E033@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -400.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -400.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="chevron" transform="translate(0.000000, 192.000000)">
@@ -129,7 +184,7 @@ const clock = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>DA4F6F05-8E0E-4F99-8C04-325E1026BDED@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -432.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -432.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="clock" transform="translate(0.000000, 224.000000)">
@@ -147,7 +202,7 @@ const cogs = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>D69A8BFD-59F3-48E5-B2F8-A57D151EB85C@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -468.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -468.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="cogs" transform="translate(0.000000, 260.000000)">
@@ -165,7 +220,7 @@ const comment = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>85F96114-FD2C-4B57-AEA8-3B2854320A29@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -502.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -502.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="comment" transform="translate(0.000000, 294.000000)">
@@ -183,7 +238,7 @@ const document = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>20D69539-7C20-49F0-9BCF-AE6F4D356668@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -534.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -534.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="document" transform="translate(0.000000, 326.000000)">
@@ -201,7 +256,7 @@ const download = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>467E5344-FF5F-465D-940E-3EE5A5238ED5@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -566.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -566.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="download" transform="translate(0.000000, 358.000000)">
@@ -219,7 +274,7 @@ const envelope = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>6E5BAADC-0E2C-4B1F-8A4B-A6F7D16BAE6B@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -598.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -598.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="envelope" transform="translate(0.000000, 390.000000)">
@@ -237,7 +292,7 @@ const explanation = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>689A577B-4141-4E4F-B884-DF9FBE546815@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1366.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1366.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="explanation" transform="translate(0.000000, 1158.000000)">
@@ -255,7 +310,7 @@ const eye = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>36A03146-33F9-43AB-B64A-795FF770A42E@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -630.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -630.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="eye" transform="translate(0.000000, 422.000000)">
@@ -273,7 +328,7 @@ const filter = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>161B97F5-D5D9-43EE-AD95-15870E881303@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -662.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -662.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="filter" transform="translate(0.000000, 454.000000)">
@@ -291,7 +346,7 @@ const grid = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>0B846487-E152-44B1-B058-D5E90C916406@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -694.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -694.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="grid" transform="translate(0.000000, 486.000000)">
@@ -309,7 +364,7 @@ const headset = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>1B240603-203F-49BC-9F73-8609C2B2A397@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -726.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -726.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="headset" transform="translate(0.000000, 518.000000)">
@@ -327,7 +382,7 @@ const list = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>680FABDB-CA3A-4C86-A241-59CFA9DF98BD@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -758.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -758.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="list" transform="translate(0.000000, 550.000000)">
@@ -345,7 +400,7 @@ const location = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>F74A1493-189D-4CFE-9DC0-D69141A189C7@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -790.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -790.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="location" transform="translate(0.000000, 582.000000)">
@@ -363,7 +418,7 @@ const megaphone = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>A2F9256B-4901-4C20-8F77-D5066011EE5A@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -822.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -822.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="megaphone" transform="translate(0.000000, 614.000000)">
@@ -381,7 +436,7 @@ const minus = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>1AA10FE9-5D18-418E-AF58-B044C23B6DEB@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -854.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -854.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="minus" transform="translate(0.000000, 646.000000)">
@@ -399,7 +454,7 @@ const negative = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>B592C279-58CD-4C4A-A354-393D736863E2@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -886.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -886.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="negative" transform="translate(0.000000, 678.000000)">
@@ -417,7 +472,7 @@ const pagination = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>667348A2-48CB-496D-8C8A-3A0C4142E887@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1430.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1430.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="pagination" transform="translate(0.000000, 1222.000000)">
@@ -435,7 +490,7 @@ const payment = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>46CF5A08-42A2-4628-A7C8-6721B5428686@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -918.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -918.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="payment" transform="translate(0.000000, 710.000000)">
@@ -453,7 +508,7 @@ const pencil = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>9E1784EB-8E2A-4C1A-A8C3-F500E03858E6@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -950.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -950.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="pencil" transform="translate(0.000000, 742.000000)">
@@ -471,7 +526,7 @@ const person = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>C1AD60F3-92E2-4915-A731-25F894172F6D@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -982.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -982.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="person" transform="translate(0.000000, 774.000000)">
@@ -489,7 +544,7 @@ const plus = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>70C9DBCC-EA4A-4C0D-8EE1-ACE33C96B3AC@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1014.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1014.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="plus" transform="translate(0.000000, 806.000000)">
@@ -507,7 +562,7 @@ const question = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>B38D7652-BAD1-453A-A17A-8BD72B3A27DE@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1046.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1046.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="question" transform="translate(0.000000, 838.000000)">
@@ -525,7 +580,7 @@ const receipt = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>B8233FCC-7CA7-43E4-90EE-D7BEB3AE64DB@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1078.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1078.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="receipt" transform="translate(0.000000, 870.000000)">
@@ -543,7 +598,7 @@ const report = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>92D2E7B0-15BC-4C37-851A-D0ECF493A903@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1110.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1110.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="report" transform="translate(0.000000, 902.000000)">
@@ -561,7 +616,7 @@ const search = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>B40F2062-9E93-4938-9311-BB5EA06B94E6@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1142.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1142.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="search" transform="translate(0.000000, 934.000000)">
@@ -592,7 +647,7 @@ const settings = `<?xml version="1.0" encoding="UTF-8"?>
                     <g id="settings" transform="translate(0.000000, 966.000000)">
                         <g id="Combined-Shape" transform="translate(243.000000, 0.000000)">
                             <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
-                            <use fill="#989AB7" fill-rule="evenodd" xlink:href="#path-1"></use>
+                            <use fill="currentColor" fill-rule="evenodd" xlink:href="#path-1"></use>
                         </g>
                     </g>
                 </g>
@@ -605,7 +660,7 @@ const sick = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>8258B213-4691-4F57-A9BA-B794CD8C1294@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1462.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1462.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="sick" transform="translate(0.000000, 1254.000000)">
@@ -623,7 +678,7 @@ const tachometer = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>444A72E2-89EC-4714-A021-8E912B45CAD5@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1206.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1206.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="tachometer" transform="translate(0.000000, 998.000000)">
@@ -641,7 +696,7 @@ const tool = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>3412434A-3941-4BA7-AF31-A18B70C22235@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1238.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1238.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="tool" transform="translate(0.000000, 1030.000000)">
@@ -659,7 +714,7 @@ const trash = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>57E63C9F-ED1A-4C01-82E7-4413FAE7BD1B@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1270.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1270.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="trash" transform="translate(0.000000, 1062.000000)">
@@ -677,7 +732,7 @@ const turn = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>3D8FF491-8CCF-45C5-8645-7ADDDAD1C215@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1398.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1398.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="turn" transform="translate(0.000000, 1190.000000)">
@@ -695,7 +750,7 @@ const upload = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>625641CF-AE77-4A64-95BC-298DB7F96CF6@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1302.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1302.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="uploaden" transform="translate(0.000000, 1094.000000)">
@@ -713,7 +768,7 @@ const warning = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>8610B121-CA13-4C32-BC35-1DBE51B9260A@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1334.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1334.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="warning" transform="translate(0.000000, 1126.000000)">
@@ -773,10 +828,6 @@ const icons = {
 const Icon = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    /**
-     * The icon the be displayed
-     */
-    this.variant = null;
     /**
      * The size of the icon, using tailwind sizes
      */
@@ -795,8 +846,60 @@ const Icon = class {
     return index.h(index.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 === 'horizontal' ? ` -scale-x-1` : this.flip === 'vertical' ? ` -scale-y-1` : ''}`;
+    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 loaderComponentCss = "/*! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com*/*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;border:0 solid;box-sizing:border-box}:after,:before{--tw-content:\"\"}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.fixed{position:fixed!important}.top-0{top:0!important}.left-0{left:0!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-\\[1em\\]{height:1em!important}.w-\\[1em\\]{width:1em!important}.w-screen{width:100vw!important}.w-full{width:100%!important}@-webkit-keyframes spin{to{transform:rotate(1turn)}}.animate-spin{-webkit-animation:spin 1s linear infinite!important;animation:spin 1s linear infinite!important}.items-center{align-items:center!important}.border-2{border-width:2px!important}.border-solid{border-style:solid!important}.border-indigo-light{--tw-border-opacity:1!important;border-color:rgb(241 246 255/var(--tw-border-opacity))!important}.border-storm-light\\/40{border-color:rgba(176,178,203,.4)!important}.border-indigo-light\\/40{border-color:rgba(241,246,255,.4)!important}.border-t-indigo{--tw-border-opacity:1!important;border-top-color:rgb(82 138 250/var(--tw-border-opacity))!important}.border-t-storm{--tw-border-opacity:1!important;border-top-color:rgb(81 83 107/var(--tw-border-opacity))!important}.border-t-white{--tw-border-opacity:1!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity))!important}:host .loader{--tw-border-opacity:1!important;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border-color:rgb(241 246 255/var(--tw-border-opacity))!important;border-radius:100%;border-style:solid!important;border-top:solid rgb(82 138 250/var(--tw-border-opacity))!important;border-width:2px!important;display:inline-block;height:1em;transition-duration:.5s;width:1em}:host .loader.color-storm{--tw-border-opacity:1!important;border-color:rgba(176,178,203,.4)!important;border-top-color:rgb(81 83 107/var(--tw-border-opacity))!important}:host .loader.color-white{--tw-border-opacity:1!important;border-color:rgba(241,246,255,.4)!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity))!important}:host .loading-screen{--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 252/var(--tw-bg-opacity));display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:9999}:host .loading-screen .content{max-width:20rem}:host .loading-screen .content .loader-wrapper{display:flex;justify-content:center;width:100%}:host .loading-screen .content .loader-wrapper .loader{font-size:2.25rem;line-height:2.5rem}.static{position:static!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.inline{display:inline!important}.justify-center{justify-content:center!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}";
+
+const Loader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Wether to show or hide the loader
+     */
+    this.show = true;
+    /**
+     * Variant of loader
+     */
+    this.variant = 'inline';
+    /**
+     * Color of the loader
+     */
+    this.color = 'indigo';
+    this._show = this.show;
+    this._loader = (index.h("div", { class: `loader color-${this.color}` }));
+  }
+  componentWillRender() {
+    this._checkShow();
+  }
+  componentShouldUpdate() {
+    this._checkShow();
+  }
+  render() {
+    if (!this._show) {
+      return;
+    }
+    if (this.variant === 'full-screen') {
+      return (index.h(index.Host, { class: "p-loader" }, index.h("div", { class: "loading-screen" }, index.h("div", { class: "content" }, index.h("slot", null), index.h("div", { class: "loader-wrapper" }, this._loader)))));
+    }
+    return index.h(index.Host, { class: `p-loader flex ${this.variant === 'full-width' && 'w-100 d-block flex justify-center text-4xl'}` }, this._loader);
+  }
+  _checkShow() {
+    var _a;
+    if (this._showSubscriber) {
+      this._showSubscriber.unsubscribe();
+      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));
+      return;
+    }
+    this._show = this.show;
   }
 };
+Loader.style = loaderComponentCss;
 
+exports.p_button = Button;
 exports.p_icon = Icon;
+exports.p_loader = Loader;