@paperless/core 0.1.0-alpha.10 → 0.1.0-alpha.103

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7caa3dae.js');
+const index = require('./index-9d3b51c9.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 buttonComponentCss = ".static{position:static!important}.m-0{margin:0!important}.inline{display:inline!important}.flex{display:flex!important}.h-10{height:2.5rem!important}.h-8{height:2rem!important}.w-full{width:100%!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}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.rounded-large{border-radius:.375rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!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}.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}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!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}*{box-sizing:border-box}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;width:auto}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:hover,p-button>a.variant-secondary:hover,p-button>button.variant-primary:hover,p-button>button.variant-secondary:hover{--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));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-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.active,p-button>a.variant-primary:active,p-button>button.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;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(218 230 240/var(--tw-border-opacity))!important;border-style:solid!important;border-width:1px!important;color:rgb(81 83 107/var(--tw-text-opacity))}p-button>a.variant-secondary.active,p-button>a.variant-secondary:active,p-button>button.variant-secondary.active,p-button>button.variant-secondary:active{--tw-bg-opacity:1;background-color:rgb(247 250 252/var(--tw-bg-opacity))}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.width-full,p-button>button.width-full{width:100%}p-button>a[disabled],p-button>button[disabled]{opacity:.4}p-button>a.has-chevron,p-button>button.has-chevron{padding-right:.5rem}p-button>a.has-chevron.variant-secondary:hover p-icon:last-child,p-button>button.has-chevron.variant-secondary:hover p-icon:last-child{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}p-button>a.has-icon-only,p-button>button.has-icon-only{padding-left:.5rem;padding-right:.5rem}p-button>a.has-icon-only>p-icon:first-child,p-button>button.has-icon-only>p-icon:first-child{margin-left:0;margin-right:0}p-button>a.should-inherit-text,p-button>button.should-inherit-text{color:inherit!important;font-size:inherit!important;font-weight:inherit!important}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.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}";
 
 const Button = class {
   constructor(hostRef) {
@@ -18,18 +18,34 @@ const Button = class {
      * The size of the button
      */
     this.size = 'medium';
+    /**
+     * The width of the button
+     */
+    this.width = 'auto';
     /**
      * Wether to show a loader or not
      */
     this.loading = false;
+    /**
+     * Wether to show a chevron or not
+     */
+    this.chevron = false;
     /**
      * Wether the button is disabled
      */
     this.disabled = false;
+    /**
+     * Wether the button is icon only
+     */
+    this.iconOnly = false;
     /**
      * Icon position
      */
     this.iconPosition = 'end';
+    /**
+     * Wether the button should inherit text styles
+     */
+    this.inheritText = false;
   }
   render() {
     let loaderColor = 'white';
@@ -42,7 +58,11 @@ const Button = class {
         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 }))));
+    return (index.h(index.Host, { class: `p-button ${this.width === 'full' && 'w-full'}` }, index.h(VariableTag, { class: `variant-${this.variant} size-${this.size} width-${this.width} icon-position-${this.iconPosition} ${this.chevron && 'has-chevron'} ${this.iconOnly && 'has-icon-only'} ${this.inheritText && 'should-inherit-text'}`, disabled: this.disabled, href: this.href, target: this.target }, this.icon &&
+      this.iconPosition === 'start' &&
+      this._getIcon(), index.h("slot", null), this.icon &&
+      this.iconPosition === 'end' &&
+      this._getIcon(), this.loading && index.h("p-loader", { color: loaderColor }), this.chevron && (index.h("p-icon", { variant: "chevron", rotate: this.chevron === 'up' ? 180 : 0 })))));
   }
   handleClick(ev) {
     if (this.loading || this.disabled) {
@@ -54,7 +74,7 @@ const Button = class {
     if (!this.icon) {
       return;
     }
-    return index.h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate });
+    return (index.h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
   }
 };
 Button.style = buttonComponentCss;
@@ -144,6 +164,24 @@ const car = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const checklist = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1526.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="checklist" transform="translate(0.000000, 1318.000000)">
+                        <g id="⚛️-Atoms/icons/checklist" transform="translate(243.000000, 0.000000)">
+                            <path d="M1,0 L3,0 C3.55228475,-1.01453063e-16 4,0.44771525 4,1 L4,3 C4,3.55228475 3.55228475,4 3,4 L1,4 C0.44771525,4 6.76353751e-17,3.55228475 0,3 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z M7,1 L15,1 C15.5522847,1 16,1.44771525 16,2 C16,2.55228475 15.5522847,3 15,3 L7,3 C6.44771525,3 6,2.55228475 6,2 C6,1.44771525 6.44771525,1 7,1 Z M7,7 L15,7 C15.5522847,7 16,7.44771525 16,8 C16,8.55228475 15.5522847,9 15,9 L7,9 C6.44771525,9 6,8.55228475 6,8 C6,7.44771525 6.44771525,7 7,7 Z M7,13 L15,13 C15.5522847,13 16,13.4477153 16,14 C16,14.5522847 15.5522847,15 15,15 L7,15 C6.44771525,15 6,14.5522847 6,14 C6,13.4477153 6.44771525,13 7,13 Z M1,6 L3,6 C3.55228475,6 4,6.44771525 4,7 L4,9 C4,9.55228475 3.55228475,10 3,10 L1,10 C0.44771525,10 6.76353751e-17,9.55228475 0,9 L0,7 C-6.76353751e-17,6.44771525 0.44771525,6 1,6 Z M1,12 L3,12 C3.55228475,12 4,12.4477153 4,13 L4,15 C4,15.5522847 3.55228475,16 3,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,13 C-6.76353751e-17,12.4477153 0.44771525,12 1,12 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 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>
@@ -342,6 +380,26 @@ const filter = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const folder = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1622.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="projects" transform="translate(0.000000, 1414.000000)">
+                        <g id="default" transform="translate(243.000000, 0.000000)">
+                            <g id="⚛️-Atoms/icons/projects" transform="translate(0.000000, 1.000000)">
+                                <path d="M1,0 L5.58578644,0 C5.85100293,-1.26996481e-15 6.10535684,0.10535684 6.29289322,0.292893219 L7.70710678,1.70710678 C7.89464316,1.89464316 8.14899707,2 8.41421356,2 L15,2 C15.5522847,2 16,2.44771525 16,3 L16,13 C16,13.5522847 15.5522847,14 15,14 L1,14 C0.44771525,14 6.76353751e-17,13.5522847 0,13 L0,1 C-6.76353751e-17,0.44771525 0.44771525,-4.5365845e-16 1,0 Z" id="Combined-Shape"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 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>
@@ -378,6 +436,24 @@ const headset = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const integration = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1590.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="koppelingen" transform="translate(0.000000, 1382.000000)">
+                        <g id="⚛️-Atoms/icons/koppelingen" transform="translate(243.000000, 0.000000)">
+                            <path d="M1,0 L6,0 C6.55228475,-1.01453063e-16 7,0.44771525 7,1 L7,6 C7,6.55228475 6.55228475,7 6,7 L1,7 C0.44771525,7 6.76353751e-17,6.55228475 0,6 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z M1,9 L6,9 C6.55228475,9 7,9.44771525 7,10 L7,15 C7,15.5522847 6.55228475,16 6,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,10 C-6.76353751e-17,9.44771525 0.44771525,9 1,9 Z M10,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 L10,7 C9.44771525,7 9,6.55228475 9,6 L9,1 C9,0.44771525 9.44771525,1.01453063e-16 10,0 Z M12.5,9 C13.0522847,9 13.5,9.44771525 13.5,10 L13.5,11.5 L15,11.5 C15.5522847,11.5 16,11.9477153 16,12.5 C16,13.0522847 15.5522847,13.5 15,13.5 L13.5,13.5 L13.5,15 C13.5,15.5522847 13.0522847,16 12.5,16 C11.9477153,16 11.5,15.5522847 11.5,15 L11.5,13.5 L10,13.5 C9.44771525,13.5 9,13.0522847 9,12.5 C9,11.9477153 9.44771525,11.5 10,11.5 L11.5,11.5 L11.5,10 C11.5,9.44771525 11.9477153,9 12.5,9 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 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>
@@ -432,6 +508,33 @@ const megaphone = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const menu = `<?xml version="1.0" encoding="UTF-8"?><svg
+    version="1.1"
+    width="1em"
+    height="1em"
+    viewBox="0 0 16.0 16.0"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+    <defs>
+        <clipPath id="i0">
+            <path
+                d="M13,10 C13.5522847,10 14,10.4477153 14,11 C14,11.5522847 13.5522847,12 13,12 L1,12 C0.44771525,12 -4.87476137e-16,11.5522847 0,11 C-6.76353751e-17,10.4477153 0.44771525,10 1,10 L13,10 Z M13,5 C13.5522847,5 14,5.44771525 14,6 C14,6.55228475 13.5522847,7 13,7 L1,7 C0.44771525,7 -4.87476137e-16,6.55228475 0,6 C-6.76353751e-17,5.44771525 0.44771525,5 1,5 L13,5 Z M13,0 C13.5522847,-1.01453063e-16 14,0.44771525 14,1 C14,1.55228475 13.5522847,2 13,2 L1,2 C0.44771525,2 -4.87476137e-16,1.55228475 0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L13,0 Z"
+            ></path>
+        </clipPath>
+    </defs>
+    <g transform="translate(1.0 2.0)">
+        <g clip-path="url(#i0)">
+            <polygon
+                points="0,0 14,0 14,12 0,12 0,0"
+                stroke="none"
+                fill="currentColor"
+            ></polygon>
+        </g>
+    </g>
+</svg>
+`;
+
 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>
@@ -450,6 +553,26 @@ const minus = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const more = `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    name="switch"
+>
+    <defs>
+        <clipPath id="a">
+            <path
+                d="M2,12 C3.1045695,12 4,12.8954305 4,14 C4,15.1045695 3.1045695,16 2,16 C0.8954305,16 0,15.1045695 0,14 C0,12.8954305 0.8954305,12 2,12 Z M2,6 C3.1045695,6 4,6.8954305 4,8 C4,9.1045695 3.1045695,10 2,10 C0.8954305,10 0,9.1045695 0,8 C0,6.8954305 0.8954305,6 2,6 Z M2,0 C3.1045695,0 4,0.8954305 4,2 C4,3.1045695 3.1045695,4 2,4 C0.8954305,4 0,3.1045695 0,2 C0,0.8954305 0.8954305,0 2,0 Z"
+            />
+        </clipPath>
+    </defs>
+    <g clip-path="url(#a)" transform="translate(6)">
+        <polygon fill="currentColor" points="0 0 4 0 4 16 0 16 0 0" />
+    </g>
+</svg>
+`;
+
 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>
@@ -674,6 +797,53 @@ const sick = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const signout = `<?xml version="1.0" encoding="UTF-8"?><svg
+    version="1.1"
+    width="1em"
+    height="1em"
+    viewBox="0 0 16.0 16.0"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+    <defs>
+        <clipPath id="i0">
+            <path
+                d="M7,0 C7.55228475,-1.01453063e-16 8,0.44771525 8,1 L8,2 C8,2.55228475 7.55228475,3 7,3 C6.44771525,3 6,2.55228475 6,2 L2,2 L2,14 L6,14 C6,13.4477153 6.44771525,13 7,13 C7.51283584,13 7.93550716,13.3860402 7.99327227,13.8833789 L8,14 L8,15 C8,15.5522847 7.55228475,16 7,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L7,0 Z M10.7549976,3.25769542 C10.7575495,3.26010955 10.7600879,3.26253795 10.7626127,3.26498049 L14.7352971,7.10831254 C14.9002291,7.26787433 14.9984382,7.47043889 15.0293482,7.68119673 C15.1304672,7.98354221 15.0865843,8.32959983 14.8801668,8.60392636 C14.8538183,8.63894319 14.8251966,8.67219017 14.7944866,8.70345226 L10.860395,12.7082755 C10.5017253,13.0733939 9.91497906,13.0786215 9.5498607,12.7199517 C9.17420493,12.3424827 9.16725127,11.7467377 9.52665628,11.368243 L11.775,9 L6,9 C5.44771525,9 5,8.55228475 5,8 C5,7.44771525 5.44771525,7 6,7 L11.812,7 L9.44561311,4.65686817 C9.06927109,4.28428449 9.05936325,3.67934833 9.42330209,3.29464008 C9.78083767,2.91670052 10.3770581,2.90015983 10.7549976,3.25769542 Z"
+            ></path>
+        </clipPath>
+    </defs>
+    <g clip-path="url(#i0)">
+        <polygon
+            points="0,0 15.081515,0 15.081515,16 0,16 0,0"
+            stroke="none"
+            fill="currentColor"
+        ></polygon>
+    </g>
+</svg>
+`;
+
+const switchIcon = `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+>
+    <defs>
+        <clipPath id="a">
+            <path
+                d="M4.62545411,6.29533485 C4.98729728,6.68167262 4.977047,7.28550622 4.60229966,7.65934011 L3.25310842,9.00507355 L9.00410842,9.00539288 C9.55639317,9.00539288 10.0041084,9.45310813 10.0041084,10.0088661 C10.0041084,10.5611508 9.55639317,11.0088661 9.00410842,11.0088661 L3.25810842,11.0080736 L4.52726347,12.3757538 C4.88290891,12.758707 4.87415123,13.353741 4.5073897,13.7260619 C4.50238568,13.7311418 4.4973223,13.7361629 4.49220061,13.7411241 C4.13013271,14.0918468 3.55230174,14.0826497 3.20157902,13.7205818 L0.281717047,10.7062681 C0.253970354,10.6776239 0.227961979,10.6473455 0.203831273,10.6155952 C-0.00929773908,10.335168 -0.051707368,9.97841391 0.0598429822,9.67050846 C0.0939459066,9.46763576 0.190736261,9.2734466 0.34973504,9.11924101 L3.29438224,6.26336323 L3.39658061,6.17741433 C3.77185921,5.90484234 4.30017374,5.94803496 4.62545411,6.29533485 Z M12.6116362,0.177414332 L12.7020616,0.252142505 L12.7138346,0.263363235 L15.6584818,3.11924101 C15.8174806,3.2734466 15.9142709,3.46763576 15.9483739,3.67050846 C16.0599242,3.97841391 16.0175146,4.33516799 15.8043856,4.61559522 C15.7802549,4.64734551 15.7542465,4.67762389 15.7264998,4.70626813 L12.8066378,7.7205818 C12.4559151,8.0826497 11.8780841,8.09184679 11.5160162,7.74112406 C11.5108945,7.73616286 11.5058312,7.7311418 11.5008271,7.72606193 C11.1340656,7.35374104 11.1253079,6.758707 11.4809534,6.37575377 L12.7501084,5.00807355 L7.00410842,5.00886607 C6.45182367,5.00886607 6.00410842,4.56115082 6.00410842,4.00886607 C6.00410842,3.45310813 6.45182367,3.00539288 7.00410842,3.00539288 L12.7551084,3.00507355 L11.4059172,1.65934011 C11.0311698,1.28550622 11.0209196,0.68167262 11.3827627,0.295334855 C11.7080431,-0.0519650412 12.2363576,-0.0951576593 12.6116362,0.177414332 Z"
+            />
+        </clipPath>
+    </defs>
+    <g clip-path="url(#a)" transform="translate(-.004 1)">
+        <polygon
+            fill="currentColor"
+            points="0 0 16.008 0 16.008 13.998 0 13.998 0 0"
+        />
+    </g>
+</svg>
+`;
+
 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>
@@ -692,6 +862,42 @@ const tachometer = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const task = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1494.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="task" transform="translate(0.000000, 1286.000000)">
+                        <g id="⚛️-Atoms/icons/task" transform="translate(243.000000, 0.000000)">
+                            <path d="M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,14 C16,15.1045695 15.1045695,16 14,16 L2,16 C0.8954305,16 1.3527075e-16,15.1045695 0,14 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L14,0 Z M12.5824067,4.15329919 C12.2191499,3.89109673 11.7287641,3.97276881 11.4568977,4.34074885 L11.4568977,4.34074885 L6.727,10.74 L4.48421797,8.28557606 C4.2033448,7.97804494 3.76334089,7.9304898 3.43345171,8.15708233 L3.34641434,8.22568799 L3.28382396,8.28198278 C3.11439636,8.43435761 3.01189474,8.65551042 3.00097092,8.89225358 C2.9900471,9.12899673 3.07168957,9.35990745 3.22626317,9.52945129 L3.22626317,9.52945129 L6.15124558,12.7298698 C6.40900695,13.0122133 6.80862496,13.0809955 7.13592632,12.899353 C7.28904921,12.8466515 7.42987755,12.7460396 7.5366165,12.6011104 L7.5366165,12.6011104 L12.8282975,5.43729943 C12.9657189,5.25134381 13.0245403,5.01239255 12.9905957,4.77799163 C12.9566512,4.5435907 12.8330171,4.33498317 12.6494679,4.20240741 L12.6494679,4.20240741 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
+const template = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1558.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="template" transform="translate(0.000000, 1350.000000)">
+                        <g id="⚛️-Atoms/icons/template" transform="translate(243.000000, 0.000000)">
+                            <path d="M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,14 C16,15.1045695 15.1045695,16 14,16 L2,16 C0.8954305,16 1.3527075e-16,15.1045695 0,14 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L14,0 Z M8,3 C7.44771525,3 7,3.44771525 7,4 L7,4 L7,7 L4,7 C3.44771525,7 3,7.44771525 3,8 C3,8.55228475 3.44771525,9 4,9 L4,9 L7,9 L7,12 C7,12.5522847 7.44771525,13 8,13 C8.55228475,13 9,12.5522847 9,12 L9,12 L9,9 L12,9 C12.5522847,9 13,8.55228475 13,8 C13,7.44771525 12.5522847,7 12,7 L12,7 L9,7 L9,4 C9,3.44771525 8.55228475,3 8,3 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 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>
@@ -788,6 +994,7 @@ const icons = {
   bread,
   calendar,
   car,
+  checklist,
   checkmark,
   chevron,
   clock,
@@ -799,12 +1006,16 @@ const icons = {
   explanation,
   eye,
   filter,
+  folder,
   grid,
   headset,
+  integration,
   list,
   location,
   megaphone,
+  menu,
   minus,
+  more,
   negative,
   pagination,
   payment,
@@ -817,7 +1028,11 @@ const icons = {
   search,
   settings,
   sick,
+  signout,
+  switch: switchIcon,
   tachometer,
+  task,
+  template,
   tool,
   trash,
   turn,
@@ -825,6 +1040,8 @@ const icons = {
   warning,
 };
 
+const iconComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.m-0{margin:0!important}.mt-6{margin-top:1.5rem!important}.ml-2{margin-left:.5rem!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.ml-auto{margin-left:auto!important}.mb-3{margin-bottom:.75rem!important}.inline{display:inline!important}.flex{display:flex!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-auto{flex:1 1 auto!important}.-translate-y-1{--tw-translate-y:-0.25rem!important}.-translate-x-1,.-translate-y-1{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{--tw-translate-x:-0.25rem!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}.cursor-pointer{cursor:pointer!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-3{gap:.75rem!important}.whitespace-nowrap{white-space:nowrap!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}.px-2{padding-left:.5rem!important;padding-right:.5rem!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}.font-medium{font-weight:500!important}.font-semibold{font-weight:600!important}.text-storm-vague{color:rgb(152 154 183/var(--tw-text-opacity))!important}.text-negative,.text-storm-vague{--tw-text-opacity:1!important}.text-negative{color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{color:rgb(255 204 211/var(--tw-text-opacity))!important}.text-negative-light,.text-storm-dark{--tw-text-opacity:1!important}.text-storm-dark{color:rgb(39 40 56/var(--tw-text-opacity))!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}.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}.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}}*{box-sizing:border-box}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.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}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!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}";
+
 const Icon = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -835,7 +1052,7 @@ const Icon = class {
     /**
      * Wether to rotate the icon x degrees
      */
-    this.rotate = null;
+    this.rotate = 0;
     /**
      * Wether to flip the icon horizontally or vertically
      */
@@ -843,14 +1060,48 @@ const Icon = class {
   }
   render() {
     const icon = icons[this.variant];
-    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 ? `scale-${this.flip === 'horizontal' ? 'x' : 'y'}-flip` : ''}`;
+    const styles = {
+      'p-icon flex': 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 index.h(index.Host, { class: styles, innerHTML: icon });
   }
 };
+Icon.style = iconComponentCss;
 
-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 loaderComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.top-0{top:0!important}.left-0{left:0!important}.m-0{margin:0!important}.inline-block{display:inline-block!important}.inline{display:inline!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}.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}@-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}.justify-center{justify-content: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}.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}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}: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:1001}: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}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.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}";
 
 const Loader = class {
   constructor(hostRef) {
@@ -881,9 +1132,10 @@ const Loader = class {
       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 variant-full-screen" }, 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);
+    return (index.h(index.Host, { class: `p-loader flex ${this.variant === 'full-width' &&
+        'w-full flex justify-center text-4xl'}` }, this._loader));
   }
   _checkShow() {
     var _a;
@@ -892,7 +1144,7 @@ const Loader = class {
       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/cjs/p-card-body.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9d3b51c9.js');
+
+const cardBodyComponentCss = ".static{position:static!important}.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}*{box-sizing:border-box}p-card-body{--tw-text-opacity:1;color:rgb(152 154 183/var(--tw-text-opacity));font-size:.875rem;line-height:1.25rem;padding:1rem 1.5rem}p-card-body[inherit-text]{color:inherit!important;font-size:inherit!important;font-weight:inherit!important}";
+
+const CardBody = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Wether the button should inherit text styles
+     */
+    this.inheritText = false;
+  }
+  render() {
+    return (index.h(index.Host, { class: "p-card-body" }, index.h("slot", null)));
+  }
+};
+CardBody.style = cardBodyComponentCss;
+
+exports.p_card_body = CardBody;

package/dist/cjs/p-card-container.cjs.entry.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9d3b51c9.js');
+
+const cardContainerComponentCss = ".static{position:static!important}.flex{display:flex!important}.flex-col{flex-direction:column!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.drop-shadow-4{--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))!important}.drop-shadow-4,.drop-shadow-5{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}.drop-shadow-5{--tw-drop-shadow:drop-shadow(0px 0.1875rem 1rem rgba(0,24,98,.3))!important}.drop-shadow-transparent{--tw-drop-shadow:drop-shadow(transparent)!important}.drop-shadow-transparent,.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}*{box-sizing:border-box}:host{--tw-bg-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))!important;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-radius:.375rem;display:flex;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;flex-direction:column;width:100%}:host([hoverable]){cursor:pointer}:host([hoverable]:hover){--tw-drop-shadow:drop-shadow(0px 0.1875rem 1rem rgba(0,24,98,.3))!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}:host([shadow=false]){--tw-drop-shadow:drop-shadow(transparent)!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}";
+
+const CardContainer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Wether the card should be hoverable
+     */
+    this.hoverable = false;
+    /**
+     * Wether the card should have shadow
+     */
+    this.shadow = true;
+  }
+  render() {
+    return (index.h(index.Host, { class: "p-card-container" }, index.h("slot", null)));
+  }
+};
+CardContainer.style = cardContainerComponentCss;
+
+exports.p_card_container = CardContainer;