@paperless/core 0.1.0-alpha.98 → 1.0.1

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

@@ -1,79 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-ba915982.js';
-
-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) {
-    registerInstance(this, hostRef);
-    this.onClick = createEvent(this, "onClick", 7);
-    /**
-     * The variant of the button
-     */
-    this.variant = 'primary';
-    /**
-     * 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';
-    switch (this.variant) {
-      case 'secondary':
-        loaderColor = 'storm';
-        break;
-      case 'text':
-        loaderColor = 'indigo';
-        break;
-    }
-    const VariableTag = this.variant === 'text' ? 'a' : 'button';
-    return (h(Host, { class: `p-button ${this.width === 'full' && 'w-full'}` }, 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(), h("slot", null), this.icon &&
-      this.iconPosition === 'end' &&
-      this._getIcon(), this.loading && h("p-loader", { color: loaderColor }), this.chevron && (h("p-icon", { variant: "chevron", rotate: this.chevron === 'up' ? 180 : 0 })))));
-  }
-  handleClick(ev) {
-    if (this.loading || this.disabled) {
-      return;
-    }
-    this.onClick.emit(ev);
-  }
-  _getIcon() {
-    if (!this.icon) {
-      return;
-    }
-    return (h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
-  }
-};
-Button.style = buttonComponentCss;
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-2c1bdb40.js';
 
 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>
@@ -109,18 +34,11 @@ const attachment = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://
 
 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="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)">
-                        <g id="Shape" transform="translate(243.000000, 0.000000)">
-                            <path d="M10.5,4 L5.5,4 C4.125,4 3,4.98181818 3,6.18181818 C3,7.12727273 3.66666667,7.92727273 4.66666667,8.25454545 L4.66666667,11.6363636 C4.66666667,11.8545455 4.83333333,12 5.08333333,12 L10.9166667,12 C11.1666667,12 11.3333333,11.8545455 11.3333333,11.6363636 L11.3333333,8.25454545 C12.3333333,7.96363636 13,7.12727273 13,6.18181818 C13,4.98181818 11.875,4 10.5,4 Z M5.91666667,6.54545455 C5.79166667,6.54545455 5.70833333,6.50909091 5.625,6.43636364 C5.45833333,6.29090909 5.45833333,6.07272727 5.625,5.92727273 L6.04166667,5.56363636 C6.20833333,5.41818182 6.45833333,5.41818182 6.625,5.56363636 C6.79166667,5.70909091 6.79166667,5.92727273 6.625,6.07272727 L6.20833333,6.43636364 C6.125,6.50909091 6.04166667,6.54545455 5.91666667,6.54545455 Z M7.16666667,9.45454545 C7.16666667,9.67272727 7,9.81818182 6.75,9.81818182 C6.5,9.81818182 6.33333333,9.67272727 6.33333333,9.45454545 L6.33333333,9.09090909 C6.33333333,8.87272727 6.5,8.72727273 6.75,8.72727273 C7,8.72727273 7.16666667,8.87272727 7.16666667,9.09090909 L7.16666667,9.45454545 Z M7.70833333,7.52727273 C7.54166667,7.38181818 7.54166667,7.16363636 7.70833333,7.01818182 C7.875,6.87272727 8.125,6.87272727 8.29166667,7.01818182 L8.70833333,7.38181818 C8.875,7.52727273 8.875,7.74545455 8.70833333,7.89090909 C8.625,7.96363636 8.54166667,8 8.41666667,8 C8.29166667,8 8.20833333,7.96363636 8.125,7.89090909 L7.70833333,7.52727273 Z M9.54166667,9.70909091 L9.125,10.0727273 C9.04166667,10.1454545 8.95833333,10.1818182 8.83333333,10.1818182 C8.70833333,10.1818182 8.625,10.1454545 8.54166667,10.0727273 C8.375,9.92727273 8.375,9.70909091 8.54166667,9.56363636 L8.95833333,9.2 C9.125,9.05454545 9.375,9.05454545 9.54166667,9.2 C9.70833333,9.34545455 9.70833333,9.56363636 9.54166667,9.70909091 Z M10.0833333,6.18181818 C10.0833333,6.4 9.91666667,6.54545455 9.66666667,6.54545455 C9.41666667,6.54545455 9.25,6.4 9.25,6.18181818 L9.25,5.81818182 C9.25,5.6 9.41666667,5.45454545 9.66666667,5.45454545 C9.91666667,5.45454545 10.0833333,5.6 10.0833333,5.81818182 L10.0833333,6.18181818 Z"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
+    <title>⚛️ Atoms/icons/bread</title>
+    <g id="⚛️-Atoms" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms/icons/bread">
+            <rect id="Bounding-box" x="0" y="0" width="16" height="16"></rect>
+            <path d="M11.5,2 L4.5,2 C2.575,2 1,3.75714286 1,5.42857143 C1,6.74545455 1.93333333,8.32727273 3.33333333,8.78311688 L3.33333333,13.4935065 C3.33333333,13.7974026 3.56666667,14 3.91666667,14 L12.0833333,14 C12.4333333,14 12.6666667,13.7974026 12.6666667,13.4935065 L12.6666667,8.78311688 C14.0666667,8.37792208 15,6.74545455 15,5.42857143 C15,3.75714286 13.425,2 11.5,2 Z M5.08333333,6.4025974 C4.90833333,6.4025974 4.79166667,6.35194805 4.675,6.25064935 C4.44166667,6.04805195 4.44166667,5.74415584 4.675,5.54155844 L5.25833333,5.03506494 C5.49166667,4.83246753 5.84166667,4.83246753 6.075,5.03506494 C6.30833333,5.23766234 6.30833333,5.54155844 6.075,5.74415584 L5.49166667,6.25064935 C5.375,6.35194805 5.25833333,6.4025974 5.08333333,6.4025974 Z M6.83333333,10.4545455 C6.83333333,10.7584416 6.6,10.961039 6.25,10.961039 C5.9,10.961039 5.66666667,10.7584416 5.66666667,10.4545455 L5.66666667,9.94805195 C5.66666667,9.64415584 5.9,9.44155844 6.25,9.44155844 C6.6,9.44155844 6.83333333,9.64415584 6.83333333,9.94805195 L6.83333333,10.4545455 Z M7.59166667,7.77012987 C7.35833333,7.56753247 7.35833333,7.26363636 7.59166667,7.06103896 C7.825,6.85844156 8.175,6.85844156 8.40833333,7.06103896 L8.99166667,7.56753247 C9.225,7.77012987 9.225,8.07402597 8.99166667,8.27662338 C8.875,8.37792208 8.75833333,8.42857143 8.58333333,8.42857143 C8.40833333,8.42857143 8.29166667,8.37792208 8.175,8.27662338 L7.59166667,7.77012987 Z M10.1583333,10.8090909 L9.575,11.3155844 C9.45833333,11.4168831 9.34166667,11.4675325 9.16666667,11.4675325 C8.99166667,11.4675325 8.875,11.4168831 8.75833333,11.3155844 C8.525,11.112987 8.525,10.8090909 8.75833333,10.6064935 L9.34166667,10.1 C9.575,9.8974026 9.925,9.8974026 10.1583333,10.1 C10.3916667,10.3025974 10.3916667,10.6064935 10.1583333,10.8090909 Z M10.9166667,5.8961039 C10.9166667,6.2 10.6833333,6.4025974 10.3333333,6.4025974 C9.98333333,6.4025974 9.75,6.2 9.75,5.8961039 L9.75,5.38961039 C9.75,5.08571429 9.98333333,4.88311688 10.3333333,4.88311688 C10.6833333,4.88311688 10.9166667,5.08571429 10.9166667,5.38961039 L10.9166667,5.8961039 Z" id="Bread" fill="currentColor" fill-rule="nonzero"></path>
         </g>
     </g>
 </svg>`;
@@ -142,20 +60,24 @@ const calendar = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://ww
     </g>
 </svg>`;
 
+const camera = `<?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>⚛️ Atoms/icons/camera</title>
+    <g id="⚛️-Atoms" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms/icons/camera">
+            <rect id="Bounding-box" x="0" y="0" width="16" height="16"></rect>
+            <path d="M11,1 C11.5522847,1 12,1.44771525 12,2 C12,2.55228475 12.4477153,3 13,3 L14,3 C15.1045695,3 16,3.8954305 16,5 L16,13 C16,14.1045695 15.1045695,15 14,15 L2,15 C0.8954305,15 1.3527075e-16,14.1045695 0,13 L0,5 C-1.3527075e-16,3.8954305 0.8954305,3 2,3 L3,3 C3.55228475,3 4,2.55228475 4,2 C4,1.44771525 4.44771525,1 5,1 L11,1 Z M8,5 C5.790861,5 4,6.790861 4,9 C4,11.209139 5.790861,13 8,13 C10.209139,13 12,11.209139 12,9 C12,6.790861 10.209139,5 8,5 Z M8,6 C9.65685425,6 11,7.34314575 11,9 C11,10.6568542 9.65685425,12 8,12 C6.34314575,12 5,10.6568542 5,9 C5,7.34314575 6.34314575,6 8,6 Z" id="camera" fill="currentColor"></path>
+        </g>
+    </g>
+</svg>`;
+
 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="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)">
-                        <g id="Shape" transform="translate(243.000000, 0.000000)">
-                            <path d="M13.5,6.5 L11.5,6.5 L11.3385,6.5 L10.4645,4.314 C10.388,4.1245 10.2045,4 10,4 L8,4 L7,4 L5,4 C4.7955,4 4.612,4.1245 4.5355,4.314 L3.6615,6.5 L3.5,6.5 L2.5,6.5 C2.2235,6.5 2,6.724 2,7 L2,10 C2,10.276 2.2235,10.5 2.5,10.5 L3.0255,10.5 C3.148,11.346 3.871,12 4.75,12 C5.629,12 6.35200004,11.346 6.4745,10.5 L9.52499996,10.5 C9.64750004,11.346 10.3705,12 11.2495,12 C12.1285,12 12.8515,11.346 12.974,10.5 L13.5,10.5 C13.7765,10.5 14,10.276 14,10 L14,7 C14,6.724 13.7765,6.5 13.5,6.5 Z M8,5 L9.66149996,5 L10.2615,6.5 L8,6.5 L8,5 Z M5.3385,5 L7.00000004,5 L7.00000004,6.5 L4.7385,6.5 L5.3385,5 Z M4.75,11 C4.3365,11 4,10.6635 4,10.25 C4,9.8365 4.3365,9.5 4.75,9.5 C5.1635,9.5 5.5,9.8365 5.5,10.25 C5.5,10.6635 5.1635,11 4.75,11 Z M11.25,11 C10.8365,11 10.5,10.6635 10.5,10.25 C10.5,9.8365 10.8365,9.5 11.25,9.5 C11.6635,9.5 12,9.8365 12,10.25 C12,10.6635 11.6635,11 11.25,11 Z"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
+    <title>⚛️ Atoms/icons/car</title>
+    <g id="⚛️-Atoms" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms/icons/car">
+            <rect id="Bounding-box" x="0" y="0" width="16" height="16"></rect>
+            <path d="M10.190983,3 C10.380369,3 10.5535006,3.10700119 10.6381966,3.2763932 L12,6 L14.5,6 C14.7761424,6 15,6.22385763 15,6.5 L15,10.5 C15,10.7761424 14.7761424,11 14.5,11 L14,11 C14,12.1045695 13.1045695,13 12,13 C10.8954305,13 10,12.1045695 10,11 L6,11 C6,12.1045695 5.1045695,13 4,13 C2.8954305,13 2,12.1045695 2,11 L1.5,11 C1.22385763,11 1,10.7761424 1,10.5 L1,6.5 C1,6.22385763 1.22385763,6 1.5,6 L3,6 L4.3618034,3.2763932 C4.44649941,3.10700119 4.61963097,3 4.80901699,3 L10.190983,3 Z M4,10 C3.44771525,10 3,10.4477153 3,11 C3,11.5522847 3.44771525,12 4,12 C4.55228475,12 5,11.5522847 5,11 C5,10.4477153 4.55228475,10 4,10 Z M12,10 C11.4477153,10 11,10.4477153 11,11 C11,11.5522847 11.4477153,12 12,12 C12.5522847,12 13,11.5522847 13,11 C13,10.4477153 12.5522847,10 12,10 Z M10,4 L8,4 L8,6 L11,6 L10,4 Z M7,4 L5,4 L4,6 L7,6 L7,4 Z" id="Combined-Shape" fill="currentColor"></path>
         </g>
     </g>
 </svg>`;
@@ -359,19 +281,12 @@ const eye = `<?xml version="1.0" encoding="UTF-8"?>
 </svg>`;
 
 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="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)">
-                        <g id="icons/filter/default" transform="translate(243.000000, 0.000000)">
-                            <path d="M8,11 C8.55228475,11 9,11.4477153 9,12 C9,12.5522847 8.55228475,13 8,13 L2,13 C1.44771525,13 1,12.5522847 1,12 C1,11.4477153 1.44771525,11 2,11 L8,11 Z M11,7 C11.5522847,7 12,7.44771525 12,8 C12,8.55228475 11.5522847,9 11,9 L2,9 C1.44771525,9 1,8.55228475 1,8 C1,7.44771525 1.44771525,7 2,7 L11,7 Z M13,3 C13.5522847,3 14,3.44771525 14,4 C14,4.55228475 13.5522847,5 13,5 L2,5 C1.44771525,5 1,4.55228475 1,4 C1,3.44771525 1.44771525,3 2,3 L13,3 Z"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
+<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>⚛️ Atoms/icons/filter</title>
+    <g id="⚛️-Atoms" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms/icons/filter">
+            <rect id="Bounding-box" x="0" y="0" width="16" height="16"/>
+            <path d="M2,3 L14,3 C14.5522847,3 15,3.44771525 15,4 C15,4.55228475 14.5522847,5 14,5 L2,5 C1.44771525,5 1,4.55228475 1,4 C1,3.44771525 1.44771525,3 2,3 Z M4,7 L12,7 C12.5522847,7 13,7.44771525 13,8 C13,8.55228475 12.5522847,9 12,9 L4,9 C3.44771525,9 3,8.55228475 3,8 C3,7.44771525 3.44771525,7 4,7 Z M6,11 L10,11 C10.5522847,11 11,11.4477153 11,12 C11,12.5522847 10.5522847,13 10,13 L6,13 C5.44771525,13 5,12.5522847 5,12 C5,11.4477153 5.44771525,11 6,11 Z" id="Filter" fill="currentColor"/>
         </g>
     </g>
 </svg>`;
@@ -587,6 +502,17 @@ const negative = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const notification = `<?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>⚛️ Atoms/icons/notification</title>
+    <g id="⚛️-Atoms" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms/icons/notification">
+            <rect id="Bounding-box" x="0" y="0" width="16" height="16"></rect>
+            <path d="M8,0 C9.1045695,0 10,0.8954305 10,2 L9.99573626,2.12492259 C11.7231265,2.56748072 13,4.13462546 13,6 L13,11 C13.5522847,11 14,11.4477153 14,12 C14,12.5522847 13.5522847,13 13,13 L3,13 C2.44771525,13 2,12.5522847 2,12 C2,11.4477153 2.44771525,11 3,11 L3,6 C3,4.13462546 4.27687352,2.56748072 6.00426374,2.12492259 C6.00130207,2.083937 6,2.04212056 6,2 C6,0.8954305 6.8954305,0 8,0 Z M8,1 C7.48716416,1 7.06449284,1.38604019 7.00672773,1.88337887 L7,2 L9,2 C9,1.44771525 8.55228475,1 8,1 Z M8,16 C9.1045695,16 10,15.1045695 10,14 C9.40304633,14 8.73637967,14 8,14 C7.26362033,14 6.59695367,14 6,14 C6,15.1045695 6.8954305,16 8,16 Z" id="Notification" fill="currentColor"></path>
+        </g>
+    </g>
+</svg>`;
+
 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>
@@ -713,6 +639,17 @@ const receipt = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const reload = `<?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>⚛️ Atoms/icons/reload</title>
+    <g id="⚛️-Atoms" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms/icons/reload">
+            <rect id="Bounding-box" x="0" y="0" width="16" height="16"></rect>
+            <path d="M15,1.82676096e-12 C15.5522847,1.97791783e-12 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 C9,5.44771525 9.44771525,5 10,5 L12.7968352,4.99901819 C11.7687855,3.16517892 9.86459469,2 7.75737708,2 C4.54416628,2 1.93934427,4.6862915 1.93934427,8 C1.93934427,11.3137085 4.54416628,14 7.75737708,14 C9.32228346,14 10.7866673,13.3612458 11.8713475,12.2426407 C12.4117532,11.6853331 12.8418102,11.0239311 13.1343561,10.2963612 C13.339486,9.78619758 13.9068032,9.54411982 14.4014947,9.75566539 C14.8961861,9.96721096 15.1309222,10.5522719 14.9257923,11.0624355 C14.535422,12.0332975 13.9623136,12.9147038 13.242671,13.6568542 C11.7978986,15.1468139 9.84191632,16 7.75737708,16 C3.47309602,16 -8.77520279e-13,12.418278 -8.77520279e-13,8 C-8.77520279e-13,3.581722 3.47309602,0 7.75737708,0 C10.2678268,0 12.5629624,1.2412625 14.0004616,3.24977126 L14,1 C14,0.44771525 14.4477153,1.67577063e-12 15,1.82676096e-12 Z" id="Combined-Shape" fill="currentColor" fill-rule="nonzero" transform="translate(8.000000, 8.000000) scale(-1, 1) translate(-8.000000, -8.000000) "></path>
+        </g>
+    </g>
+</svg>`;
+
 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>
@@ -733,18 +670,11 @@ const report = `<?xml version="1.0" encoding="UTF-8"?>
 
 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="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)">
-                        <g id="Combined-Shape" transform="translate(243.000000, 0.000000)">
-                            <path d="M7.5,2 C10.5375661,2 13,4.46243388 13,7.5 C13,8.50140899 12.7323692,9.44030947 12.2647313,10.2490778 L14.2706744,12.1470599 C14.8560087,12.700529 14.8818407,13.6237116 14.3283716,14.2090459 L14.2999265,14.2382981 L14.2999265,14.2382981 C13.7194637,14.8187609 12.7783476,14.8187609 12.1978848,14.2382981 C12.1946864,14.2350997 12.1915026,14.2318867 12.1883335,14.2286592 L10.2560553,12.26069 C9.44571159,12.730827 8.50429015,13 7.5,13 C4.46243388,13 2,10.5375661 2,7.5 C2,4.46243388 4.46243388,2 7.5,2 Z M7.5,11 C9.43299662,11 11,9.43299662 11,7.5 C11,5.56700338 9.43299662,4 7.5,4 C5.56700338,4 4,5.56700338 4,7.5 C4,9.43299662 5.56700338,11 7.5,11 Z"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
+    <title>⚛️ Atoms/icons/search</title>
+    <g id="⚛️-Atoms" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms/icons/search">
+            <rect id="Bounding-box" x="0" y="0" width="16" height="16"></rect>
+            <path d="M7,1 C10.3137085,1 13,3.6862915 13,7 C13,8.29812169 12.587755,9.4999584 11.8870402,10.4817351 L14.7059384,13.2920105 C15.0971069,13.6818895 15.0981523,14.3150537 14.7082732,14.7062222 C14.3183942,15.0973907 13.6852301,15.098436 13.2940616,14.708557 L10.4706036,11.8949659 C9.49088034,12.5908626 8.29321975,13 7,13 C3.6862915,13 1,10.3137085 1,7 C1,3.6862915 3.6862915,1 7,1 Z M7,11 C9.209139,11 11,9.209139 11,7 C11,4.790861 9.209139,3 7,3 C4.790861,3 3,4.790861 3,7 C3,9.209139 4.790861,11 7,11 Z" id="Search" fill="currentColor"></path>
         </g>
     </g>
 </svg>`;
@@ -989,6 +919,7 @@ const icons = {
   attachment,
   bread,
   calendar,
+  camera,
   car,
   checklist,
   checkmark,
@@ -1013,12 +944,14 @@ const icons = {
   minus,
   more,
   negative,
+  notification,
   pagination,
   payment,
   pencil,
   person,
   plus,
   question,
+  reload,
   receipt,
   report,
   search,
@@ -1036,22 +969,70 @@ 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 buttonComponentCss = ".flex{display:flex!important}.h-10{height:2.5rem!important}.h-full{height:100%!important}.w-auto{width:auto!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items: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}.px-4{padding-left:1rem!important;padding-right:1rem!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}*{box-sizing:border-box}p-button{height:2.5rem;width:auto}p-button,p-button a,p-button button{display:flex;font-size:1rem;line-height:1.5rem}p-button a,p-button button{align-items:center;border:0;border-radius:.375rem!important;cursor:pointer;font-weight:600;height:100%;justify-content:center;outline:0;width:100%;will-change:filter}p-button a.icon-position-end>p-icon:not(.chevron),p-button a>p-loader,p-button button.icon-position-end>p-icon:not(.chevron),p-button button>p-loader{margin-left:.5rem}p-button a.icon-position-start>p-icon:not(.chevron),p-button button.icon-position-start>p-icon:not(.chevron){margin-right:.5rem}p-button a.variant-primary,p-button a.variant-secondary,p-button button.variant-primary,p-button button.variant-secondary{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);padding-left:1rem;padding-right:1rem}p-button a.variant-primary.active,p-button a.variant-primary:active,p-button a.variant-secondary.active,p-button a.variant-secondary:active,p-button button.variant-primary.active,p-button button.variant-primary:active,p-button button.variant-secondary.active,p-button button.variant-secondary:active{--tw-drop-shadow:drop-shadow(transparent);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:not([disabled]),p-button a.variant-primary:active:not([disabled]),p-button button.variant-primary.active:not([disabled]),p-button button.variant-primary:active:not([disabled]){--tw-bg-opacity:1;background-color:rgb(44 75 169/var(--tw-bg-opacity))}@media (pointer:fine){p-button a.variant-primary:hover:not([disabled]),p-button button.variant-primary:hover:not([disabled]){--tw-drop-shadow:drop-shadow(0px 2px 4px rgba(44,75,169,.4));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,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:not([disabled]),p-button a.variant-secondary:active:not([disabled]),p-button button.variant-secondary.active:not([disabled]),p-button button.variant-secondary:active:not([disabled]){--tw-bg-opacity:1;background-color:rgb(247 250 252/var(--tw-bg-opacity))}@media (pointer:fine){p-button a.variant-secondary:hover:not([disabled]),p-button button.variant-secondary:hover:not([disabled]){--tw-drop-shadow:drop-shadow(0px 2px 4px rgba(176,178,203,.4));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-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:not([disabled]),p-button button.variant-text:hover:not([disabled]){--tw-text-opacity:1;color:rgb(44 75 169/var(--tw-text-opacity))}p-button a[disabled],p-button button[disabled]{opacity:.4}p-button a.has-chevron.chevron-position-start,p-button button.has-chevron.chevron-position-start{padding-left:.5rem}p-button a.has-chevron.chevron-position-start>p-icon.chevron,p-button button.has-chevron.chevron-position-start>p-icon.chevron{margin-right:.5rem}p-button a.has-chevron.chevron-position-end,p-button button.has-chevron.chevron-position-end{padding-right:.5rem}p-button a.has-chevron.chevron-position-end>p-icon.chevron,p-button button.has-chevron.chevron-position-end>p-icon.chevron{margin-left:.5rem}p-button a.has-chevron.variant-secondary:hover:not([disabled]) p-icon:last-child,p-button button.has-chevron.variant-secondary:hover:not([disabled]) p-icon:last-child{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity))}p-button a.should-inherit-text,p-button button.should-inherit-text{color:inherit!important;font-size:inherit!important;font-weight:inherit!important}p-button.has-icon-only{width:2.5rem}p-button.has-icon-only a,p-button.has-icon-only button{padding:0}p-button.has-icon-only a>p-icon:first-child,p-button.has-icon-only button>p-icon:first-child{margin-left:0;margin-right:0}p-button.has-icon-only a>p-loader,p-button.has-icon-only button>p-loader{margin-left:0}p-button.size-small{height:2rem}p-button.size-small a,p-button.size-small button{font-size:.875rem;line-height:1.25rem}p-button.size-small a>p-icon,p-button.size-small button>p-icon{font-size:1rem;line-height:1.5rem}p-button.size-small.has-icon-only{width:2rem}.static{position:static!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{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-25{--tw-rotate:-25deg!important}.-rotate-25,.-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-315,.-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-90,.rotate-0{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-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-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-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}.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}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-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}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}.h-8{height:2rem!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.items-start{align-items:flex-start!important}.justify-start{justify-content:flex-start!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.bg-mystic{--tw-bg-opacity:1!important;background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.visible{visibility:visible!important}.absolute{position:absolute!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}.rounded{border-radius:.25rem!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}}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}}.mb-14{margin-bottom:3.5rem!important}.table{display:table!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.max-w-\\[20rem\\]{max-width:20rem!important}.flex-col{flex-direction:column!important}.self-center{align-self:center!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.table-cell{display:table-cell!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}.justify-end{justify-content:flex-end!important}.pr-4{padding-right:1rem!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.w-3\\/4{width:75%!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.table-row{display:table-row!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.flex-shrink-0{flex-shrink:0!important}.text-storm{--tw-text-opacity:1!important;color:rgb(81 83 107/var(--tw-text-opacity))!important}";
+
+const Button = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.onClick = createEvent(this, "onClick", 7);
+    this.variant = 'primary';
+    this.href = undefined;
+    this.target = undefined;
+    this.size = 'medium';
+    this.loading = false;
+    this.chevron = false;
+    this.chevronPosition = 'end';
+    this.disabled = false;
+    this.icon = undefined;
+    this.iconOnly = false;
+    this.iconPosition = 'end';
+    this.iconFlip = undefined;
+    this.iconRotate = undefined;
+    this.inheritText = false;
+  }
+  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 (h(Host, { class: `p-button size-${this.size} ${this.iconOnly && 'has-icon-only'} ` }, h(VariableTag, { class: `variant-${this.variant}  icon-position-${this.iconPosition} ${this.chevron && 'has-chevron'} chevron-position-${this.chevronPosition} ${this.inheritText && 'should-inherit-text'}`, disabled: this.disabled, href: this.href, target: this.target }, this.chevron && this.chevronPosition === 'start' && (h("p-icon", { class: "chevron", variant: "chevron", rotate: this.chevron === 'up' ? 180 : 0 })), this.icon &&
+      this.iconPosition === 'start' &&
+      !(this.iconOnly && this.loading) &&
+      this._getIcon(), h("slot", null), this.icon &&
+      this.iconPosition === 'end' &&
+      !(this.iconOnly && this.loading) &&
+      this._getIcon(), this.loading && h("p-loader", { color: loaderColor }), this.chevron && this.chevronPosition === 'end' && (h("p-icon", { class: "chevron", variant: "chevron", rotate: this.chevron === 'up' ? 180 : 0 })))));
+  }
+  handleClick(ev) {
+    if (this.loading || this.disabled) {
+      ev.preventDefault();
+      return;
+    }
+    this.onClick.emit(ev);
+  }
+  _getIcon() {
+    if (!this.icon) {
+      return;
+    }
+    return (h("p-icon", { variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate }));
+  }
+};
+Button.style = buttonComponentCss;
+
+const iconComponentCss = "*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{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-25{--tw-rotate:-25deg!important}.-rotate-25,.-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-315,.-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-90,.rotate-0{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-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-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-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}.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}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-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}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.w-full{width:100%!important}.justify-center{justify-content:center!important}.m-0{margin:0!important}.mt-6{margin-top:1.5rem!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.gap-3{gap:.75rem!important}.whitespace-nowrap{white-space:nowrap!important}.font-medium{font-weight:500!important}.text-storm-vague{--tw-text-opacity:1!important;color:rgb(152 154 183/var(--tw-text-opacity))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.h-8{height:2rem!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.items-start{align-items:flex-start!important}.justify-start{justify-content:flex-start!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded-large{border-radius:.375rem!important}.bg-mystic{--tw-bg-opacity:1!important;background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.visible{visibility:visible!important}.absolute{position:absolute!important}.blur{--tw-blur:blur(8px)!important}.blur,.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}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.col-start-1{grid-column-start:1!important}.col-start-2{grid-column-start:2!important}.col-start-3{grid-column-start:3!important}.col-start-4{grid-column-start:4!important}.col-start-5{grid-column-start:5!important}.col-start-6{grid-column-start:6!important}.col-start-7{grid-column-start:7!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}.rounded{border-radius:.25rem!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}}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.z-navbar-backdrop{z-index:290!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}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}}.ml-auto{margin-left:auto!important}.h-6{height:1.5rem!important}.mb-14{margin-bottom:3.5rem!important}.table{display:table!important}.w-6{width:1.5rem!important}.max-w-\\[20rem\\]{max-width:20rem!important}.flex-col{flex-direction:column!important}.self-center{align-self:center!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.table-cell{display:table-cell!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}.w-auto{width:auto!important}.justify-end{justify-content:flex-end!important}.pr-4{padding-right:1rem!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.block{display:block!important}.w-3\\/4{width:75%!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.table-row{display:table-row!important}.flex-shrink-0{flex-shrink:0!important}.text-storm{--tw-text-opacity:1!important;color:rgb(81 83 107/var(--tw-text-opacity))!important}";
 
 const Icon = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * The size of the icon, using tailwind sizes
-     */
+    this.variant = undefined;
     this.size = 'auto';
-    /**
-     * Wether to rotate the icon x degrees
-     */
     this.rotate = 0;
-    /**
-     * Wether to flip the icon horizontally or vertically
-     */
     this.flip = null;
   }
   render() {
@@ -1097,25 +1078,18 @@ const Icon = class {
 };
 Icon.style = iconComponentCss;
 
-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-4xl{font-size:2.25rem!important;line-height:2.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-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 loaderComponentCss = ".fixed{position:fixed!important}.top-0{top:0!important}.box-border{box-sizing:border-box!important}.block{display:block!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.h-\\[1em\\]{height:1em!important}.w-\\[1em\\]{width:1em!important}.w-full{width:100%!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}.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-indigo-light\\/40{border-color:rgba(241,246,255,.4)!important}.border-storm-light\\/40{border-color:rgba(176,178,203,.4)!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}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.h-screen-safe{height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important}.w-screen-safe{width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right))!important}*{box-sizing:border-box}:host .loader{--tw-border-opacity:1;animation:spin .5s linear infinite;border-color:rgb(241 246 255/var(--tw-border-opacity));border-radius:100%;border-style:solid;border-top:solid rgb(82 138 250/var(--tw-border-opacity));border-width:2px;display:inline-block;height:1em;width:1em;will-change:transform}: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:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));justify-content:center;left:0;position:fixed;top:0;width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));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}:host(.variant-ghost){--loading-bg:#f7fafc;--loading-stripe:#fcfdfe;animation:loading 1s ease-in-out infinite;background-color:var(--loading-bg);background:linear-gradient(100deg,hsla(0,0%,100%,0) 40%,var(--loading-stripe) 50%,hsla(0,0%,100%,0) 60%) var(--loading-bg);background-position-x:180%;background-size:200% 100%;box-sizing:border-box;display:block;min-height:1em;min-width:1em;will-change:background,background-position-x,background-color}@keyframes loading{to{background-position-x:-20%}}@keyframes spin{to{transform:rotate(1turn)}}.static{position:static!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-0,.-rotate-135{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-25{--tw-rotate:-25deg!important}.-rotate-25,.-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-315,.-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-90,.rotate-0{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-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-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-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}.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}.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}.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}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important;line-height:1.75rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xl{font-size:1.25rem!important;line-height:1.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-xxs{font-size:.6875rem!important}.inline{display:inline!important}.justify-center{justify-content:center!important}.h-8{height:2rem!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.items-start{align-items:flex-start!important}.justify-start{justify-content:flex-start!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.whitespace-nowrap{white-space:nowrap!important}.rounded-large{border-radius:.375rem!important}.bg-mystic{--tw-bg-opacity:1!important;background-color:rgb(247 250 252/var(--tw-bg-opacity))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.visible{visibility:visible!important}.absolute{position:absolute!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}.rounded{border-radius:.25rem!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}}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.hidden{display:none!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}.z-navbar-backdrop{z-index:290!important}.m-0{margin:0!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}@media (min-width:64rem){.desktop-xs\\:hidden{display:none!important}}.h-6{height:1.5rem!important}.cursor-pointer{cursor:pointer!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}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.justify-between{justify-content:space-between!important}.rounded-bl-none{border-bottom-left-radius:0!important}.rounded-br-none{border-bottom-right-radius:0!important}.rounded-tl-none{border-top-left-radius:0!important}.rounded-tr-none{border-top-right-radius:0!important}.border-l-0{border-left-width:0!important}.border-r-0{border-right-width:0!important}.pl-0{padding-left:0!important}.pr-0{padding-right:0!important}.mb-14{margin-bottom:3.5rem!important}.table{display:table!important}.w-6{width:1.5rem!important}.max-w-\\[20rem\\]{max-width:20rem!important}.flex-col{flex-direction:column!important}.self-center{align-self:center!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.table-cell{display:table-cell!important}.w-1\\/12{width:8.333333%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}.w-auto{width:auto!important}.justify-end{justify-content:flex-end!important}.pr-4{padding-right:1rem!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}}.bottom-0{bottom:0!important}.left-0{left:0!important}.w-3\\/4{width:75%!important}.border{border-width:1px!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}@media (min-width:64rem){.desktop-xs\\:w-48{width:12rem!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.table-row{display:table-row!important}.flex-shrink-0{flex-shrink:0!important}.text-storm{--tw-text-opacity:1!important;color:rgb(81 83 107/var(--tw-text-opacity))!important}";
 
 const Loader = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * Wether to show or hide the loader
-     */
+    this._show = this.show;
+    this._loader = (h("div", { class: `loader color-${this.color}` }));
     this.show = true;
-    /**
-     * Variant of loader
-     */
     this.variant = 'inline';
-    /**
-     * Color of the loader
-     */
     this.color = 'indigo';
-    this._show = this.show;
-    this._loader = (h("div", { class: `loader color-${this.color}` }));
+    this.modalTitle = undefined;
+    this.modalDescription = undefined;
   }
   componentWillRender() {
     this._checkShow();
@@ -1127,10 +1101,13 @@ const Loader = class {
     if (!this._show) {
       return;
     }
+    if (this.variant === 'ghost') {
+      return h(Host, { class: "p-loader variant-ghost" });
+    }
     if (this.variant === 'full-screen') {
       return (h(Host, { class: "p-loader variant-full-screen" }, h("div", { class: "loading-screen" }, h("div", { class: "content" }, h("slot", null), h("div", { class: "loader-wrapper" }, this._loader)))));
     }
-    return (h(Host, { class: `p-loader flex ${this.variant === 'full-width' &&
+    return (h(Host, { class: `p-loader variant-default flex ${this.variant === 'full-width' &&
         'w-full flex justify-center text-4xl'}` }, this._loader));
   }
   _checkShow() {
@@ -1149,3 +1126,5 @@ const Loader = class {
 Loader.style = loaderComponentCss;
 
 export { Button as p_button, Icon as p_icon, Loader as p_loader };
+
+//# sourceMappingURL=p-button_3.entry.js.map

package/dist/esm/p-button_3.entry.js.map

@@ -0,0 +1 @@
+{"file":"p-button.p-icon.p-loader.entry.js","mappings":"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","names":[],"sources":["./src/utils/icons.ts","./src/components/atoms/button/button.component.scss?tag=p-button","./src/components/atoms/button/button.component.tsx","./src/components/atoms/icon/icon.component.scss?tag=p-icon","./src/components/atoms/icon/icon.component.tsx","./src/components/atoms/loader/loader.component.scss?tag=p-loader&encapsulation=shadow","./src/components/atoms/loader/loader.component.tsx"],"sourcesContent":["import arrow from '../assets/icons/arrow.svg';\nimport attachment from '../assets/icons/attachment.svg';\nimport bread from '../assets/icons/bread.svg';\nimport calendar from '../assets/icons/calendar.svg';\nimport camera from '../assets/icons/camera.svg';\nimport car from '../assets/icons/car.svg';\nimport checklist from '../assets/icons/checklist.svg';\nimport checkmark from '../assets/icons/checkmark.svg';\nimport chevron from '../assets/icons/chevron.svg';\nimport clock from '../assets/icons/clock.svg';\nimport cogs from '../assets/icons/cogs.svg';\nimport comment from '../assets/icons/comment.svg';\nimport document from '../assets/icons/document.svg';\nimport download from '../assets/icons/download.svg';\nimport envelope from '../assets/icons/envelope.svg';\nimport explanation from '../assets/icons/explanation.svg';\nimport eye from '../assets/icons/eye.svg';\nimport filter from '../assets/icons/filter.svg';\nimport folder from '../assets/icons/folder.svg';\nimport grid from '../assets/icons/grid.svg';\nimport headset from '../assets/icons/headset.svg';\nimport integration from '../assets/icons/integration.svg';\nimport list from '../assets/icons/list.svg';\nimport location from '../assets/icons/location.svg';\nimport megaphone from '../assets/icons/megaphone.svg';\nimport menu from '../assets/icons/menu.svg';\nimport minus from '../assets/icons/minus.svg';\nimport more from '../assets/icons/more.svg';\nimport negative from '../assets/icons/negative.svg';\nimport notification from '../assets/icons/notification.svg';\nimport pagination from '../assets/icons/pagination.svg';\nimport payment from '../assets/icons/payment.svg';\nimport pencil from '../assets/icons/pencil.svg';\nimport person from '../assets/icons/person.svg';\nimport plus from '../assets/icons/plus.svg';\nimport question from '../assets/icons/question.svg';\nimport receipt from '../assets/icons/receipt.svg';\nimport reload from '../assets/icons/reload.svg';\nimport report from '../assets/icons/report.svg';\nimport search from '../assets/icons/search.svg';\nimport settings from '../assets/icons/settings.svg';\nimport sick from '../assets/icons/sick.svg';\nimport signout from '../assets/icons/signout.svg';\nimport switchIcon from '../assets/icons/switch.svg';\nimport tachometer from '../assets/icons/tachometer.svg';\nimport task from '../assets/icons/task.svg';\nimport template from '../assets/icons/template.svg';\nimport tool from '../assets/icons/tool.svg';\nimport trash from '../assets/icons/trash.svg';\nimport turn from '../assets/icons/turn.svg';\nimport upload from '../assets/icons/upload.svg';\nimport warning from '../assets/icons/warning.svg';\n\nexport default {\n    arrow,\n    attachment,\n    bread,\n    calendar,\n    camera,\n    car,\n    checklist,\n    checkmark,\n    chevron,\n    clock,\n    cogs,\n    comment,\n    document,\n    download,\n    envelope,\n    explanation,\n    eye,\n    filter,\n    folder,\n    grid,\n    headset,\n    integration,\n    list,\n    location,\n    megaphone,\n    menu,\n    minus,\n    more,\n    negative,\n    notification,\n    pagination,\n    payment,\n    pencil,\n    person,\n    plus,\n    question,\n    reload,\n    receipt,\n    report,\n    search,\n    settings,\n    sick,\n    signout,\n    switch: switchIcon,\n    tachometer,\n    task,\n    template,\n    tool,\n    trash,\n    turn,\n    upload,\n    warning,\n};\n","p-button {\n    @apply flex h-10 w-auto text-base;\n\n    button,\n    a {\n        outline: 0;\n        border: 0;\n        @apply h-full w-full;\n        @apply rounded-large #{!important};\n        @apply font-semibold leading-4;\n        @apply flex items-center justify-center;\n        @apply cursor-pointer text-base;\n\n        will-change: filter;\n\n        > p-loader {\n            @apply ml-2;\n        }\n\n        // Icon positions\n        &.icon-position-end {\n            > p-icon:not(.chevron) {\n                @apply ml-2;\n            }\n        }\n\n        &.icon-position-start {\n            > p-icon:not(.chevron) {\n                @apply mr-2;\n            }\n        }\n\n        // Variants\n        &.variant-primary,\n        &.variant-secondary {\n            @apply px-4 filter;\n        }\n\n        &.variant-primary,\n        &.variant-secondary {\n            &:active,\n            &.active {\n                @apply drop-shadow-transparent;\n            }\n        }\n\n        &.variant-primary {\n            @apply bg-indigo text-white;\n\n            &:active,\n            &.active {\n                &:not([disabled]) {\n                    @apply bg-indigo-dark;\n                }\n            }\n\n            @media (pointer: fine) {\n                &:hover:not([disabled]) {\n                    @apply drop-shadow-button-primary-hover;\n                }\n            }\n        }\n\n        &.variant-secondary {\n            @apply border border-solid border-mystic-dark #{!important};\n            @apply bg-white text-storm;\n\n            &:active,\n            &.active {\n                &:not([disabled]) {\n                    @apply bg-mystic;\n                }\n            }\n\n            @media (pointer: fine) {\n                &:hover:not([disabled]) {\n                    @apply drop-shadow-button-secondary-hover;\n                }\n            }\n        }\n\n        &.variant-text {\n            @apply text-indigo;\n\n            &:hover:not([disabled]) {\n                @apply text-indigo-dark;\n            }\n        }\n\n        &[disabled] {\n            @apply opacity-40;\n        }\n\n        // chevron\n        &.has-chevron {\n            &.chevron-position-start {\n                @apply pl-2;\n\n                > p-icon.chevron {\n                    @apply mr-2;\n                }\n            }\n\n            &.chevron-position-end {\n                @apply pr-2;\n\n                > p-icon.chevron {\n                    @apply ml-2;\n                }\n            }\n\n            &.variant-secondary:hover:not([disabled]) p-icon:last-child {\n                @apply text-indigo;\n            }\n        }\n\n        &.should-inherit-text {\n            color: inherit #{!important};\n            font-size: inherit #{!important};\n            font-weight: inherit #{!important};\n        }\n    }\n\n    &.has-icon-only {\n        @apply w-10;\n\n        a,\n        button {\n            @apply p-0;\n\n            > p-icon:first-child {\n                @apply mx-0;\n            }\n\n            > p-loader {\n                @apply ml-0;\n            }\n        }\n    }\n\n    // sizes\n    &.size-small {\n        @apply h-8;\n\n        button,\n        a {\n            @apply text-sm;\n\n            > p-icon {\n                @apply text-base;\n            }\n        }\n\n        &.has-icon-only {\n            @apply w-8;\n        }\n    }\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n} from '@stencil/core';\nimport { RotateOptions } from '../../../types/tailwind';\nimport { IconFlipOptions, IconVariant } from '../icon/icon.component';\n\n@Component({\n    tag: 'p-button',\n    styleUrl: 'button.component.scss',\n    // shadow: true,\n})\nexport class Button {\n    /**\n     * The variant of the button\n     */\n    @Prop() variant: 'primary' | 'secondary' | 'text' = 'primary';\n\n    /**\n     * Href in case of \"text\" version\n     */\n    @Prop() href: string;\n\n    /**\n     * Target in case of \"text\" version\n     */\n    @Prop() target: string;\n\n    /**\n     * The size of the button\n     */\n    @Prop() size: 'small' | 'medium' = 'medium';\n\n    /**\n     * Wether to show a loader or not\n     */\n    @Prop() loading: boolean = false;\n\n    /**\n     * Wether to show a chevron or not\n     */\n    @Prop() chevron: boolean | 'up' | 'down' = false;\n\n    /**\n     * Chevron position\n     */\n    @Prop() chevronPosition: 'start' | 'end' = 'end';\n\n    /**\n     * Wether the button is disabled\n     */\n    @Prop() disabled: boolean = false;\n\n    /**\n     * Icon to show on the button\n     */\n    @Prop() icon: IconVariant;\n\n    /**\n     * Wether the button is icon only\n     */\n    @Prop() iconOnly: boolean = false;\n\n    /**\n     * Icon position\n     */\n    @Prop() iconPosition: 'start' | 'end' = 'end';\n\n    /**\n     * Icon flip\n     */\n    @Prop() iconFlip: IconFlipOptions;\n\n    /**\n     * Icon rotate\n     */\n    @Prop() iconRotate: RotateOptions;\n\n    /**\n     * Wether the button should inherit text styles\n     */\n    @Prop() inheritText: boolean = false;\n\n    /**\n     * Button click event\n     */\n    @Event() onClick: EventEmitter<MouseEvent>;\n\n    render() {\n        let loaderColor: 'white' | 'storm' | 'indigo' = 'white';\n        switch (this.variant) {\n            case 'secondary':\n                loaderColor = 'storm';\n                break;\n            case 'text':\n                loaderColor = 'indigo';\n                break;\n        }\n\n        const VariableTag = this.variant === 'text' ? 'a' : 'button';\n\n        return (\n            <Host\n                class={`p-button size-${this.size} ${\n                    this.iconOnly && 'has-icon-only'\n                } `}\n            >\n                <VariableTag\n                    class={`variant-${this.variant}  icon-position-${\n                        this.iconPosition\n                    } ${this.chevron && 'has-chevron'} chevron-position-${\n                        this.chevronPosition\n                    } ${this.inheritText && 'should-inherit-text'}`}\n                    disabled={this.disabled}\n                    href={this.href}\n                    target={this.target}\n                >\n                    {this.chevron && this.chevronPosition === 'start' && (\n                        <p-icon\n                            class=\"chevron\"\n                            variant=\"chevron\"\n                            rotate={this.chevron === 'up' ? 180 : 0}\n                        />\n                    )}\n\n                    {this.icon &&\n                        this.iconPosition === 'start' &&\n                        !(this.iconOnly && this.loading) &&\n                        this._getIcon()}\n\n                    <slot />\n\n                    {this.icon &&\n                        this.iconPosition === 'end' &&\n                        !(this.iconOnly && this.loading) &&\n                        this._getIcon()}\n\n                    {this.loading && <p-loader color={loaderColor} />}\n\n                    {this.chevron && this.chevronPosition === 'end' && (\n                        <p-icon\n                            class=\"chevron\"\n                            variant=\"chevron\"\n                            rotate={this.chevron === 'up' ? 180 : 0}\n                        />\n                    )}\n                </VariableTag>\n            </Host>\n        );\n    }\n\n    @Listen('click', { capture: true })\n    handleClick(ev: MouseEvent) {\n        if (this.loading || this.disabled) {\n            ev.preventDefault();\n            return;\n        }\n\n        this.onClick.emit(ev);\n    }\n\n    private _getIcon() {\n        if (!this.icon) {\n            return;\n        }\n\n        return (\n            <p-icon\n                variant={this.icon}\n                flip={this.iconFlip}\n                rotate={this.iconRotate}\n            />\n        );\n    }\n}\n",":host {\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { RotateOptions, TextSizeOptions } from '../../../types/tailwind';\nimport icons from '../../../utils/icons';\n\nexport type IconVariant = keyof typeof icons;\nexport type IconFlipOptions = 'horizontal' | 'vertical';\n\n@Component({\n    tag: 'p-icon',\n    styleUrl: 'icon.component.scss',\n    // shadow: true,\n})\nexport class Icon {\n    /**\n     * The icon the be displayed\n     */\n    @Prop() variant!: IconVariant;\n\n    /**\n     * The size of the icon, using tailwind sizes\n     */\n    @Prop() size: TextSizeOptions = 'auto';\n\n    /**\n     * Wether to rotate the icon x degrees\n     */\n    @Prop() rotate: RotateOptions = 0;\n\n    /**\n     * Wether to flip the icon horizontally or vertically\n     */\n    @Prop() flip: IconFlipOptions = null;\n\n    render() {\n        const icon = icons[this.variant];\n\n        const styles = {\n            'p-icon flex': true,\n            'text-auto': this.size === 'auto',\n            'text-xxs': this.size === 'xxs',\n            'text-xs': this.size === 'xs',\n            'text-sm': this.size === 'sm',\n            'text-base': this.size === 'base',\n            'text-lg': this.size === 'lg',\n            'text-xl': this.size === 'xl',\n            'text-2xl': this.size === '2xl',\n            'text-3xl': this.size === '3xl',\n            'text-4xl': this.size === '4xl',\n            'text-5xl': this.size === '5xl',\n            'text-6xl': this.size === '6xl',\n            transform: !!this.rotate || !!this.flip,\n            'scale-x-flip': this.flip === 'horizontal',\n            'scale-y-flip': this.flip === 'vertical',\n            'rotate-0': this.rotate === 0,\n            'rotate-25': this.rotate === 25,\n            'rotate-45': this.rotate === 45,\n            'rotate-90': this.rotate === 90,\n            'rotate-135': this.rotate === 135,\n            'rotate-180': this.rotate === 180,\n            'rotate-225': this.rotate === 225,\n            'rotate-270': this.rotate === 270,\n            'rotate-315': this.rotate === 315,\n            '-rotate-0': this.rotate === -0,\n            '-rotate-25': this.rotate === -25,\n            '-rotate-45': this.rotate === -45,\n            '-rotate-90': this.rotate === -90,\n            '-rotate-135': this.rotate === -135,\n            '-rotate-180': this.rotate === -180,\n            '-rotate-225': this.rotate === -225,\n            '-rotate-270': this.rotate === -270,\n            '-rotate-315': this.rotate === -315,\n        };\n\n        return <Host class={styles} innerHTML={icon}></Host>;\n    }\n}\n",":host {\n    .loader {\n        @apply inline-block h-[1em] w-[1em] rounded-round;\n        @apply border-2 border-solid border-indigo-light border-t-indigo;\n        animation: 500ms spin linear infinite;\n\n        will-change: transform;\n\n        &.color-storm {\n            @apply border-storm-light/40 border-t-storm #{!important};\n        }\n\n        &.color-white {\n            @apply border-indigo-light/40 border-t-white #{!important};\n        }\n    }\n\n    .loading-screen {\n        @apply w-screen-safe h-screen-safe fixed top-0 left-0;\n        @apply flex items-center justify-center;\n        @apply bg-mystic;\n\n        z-index: 1001;\n\n        .content {\n            @apply max-w-xs;\n\n            .loader-wrapper {\n                @apply flex w-full justify-center;\n\n                .loader {\n                    @apply text-4xl;\n                }\n            }\n        }\n    }\n}\n\n:host(.variant-ghost) {\n    @apply box-border block;\n\n    will-change: background, background-position-x, background-color;\n\n    min-height: 1em;\n    min-width: 1em;\n\n    --loading-bg: #f7fafc;\n    --loading-stripe: rgba(252, 253, 254, 1);\n\n    background-color: var(--loading-bg);\n    background: linear-gradient(\n            100deg,\n            rgba(255, 255, 255, 0) 40%,\n            var(--loading-stripe) 50%,\n            rgba(255, 255, 255, 0) 60%\n        )\n        var(--loading-bg);\n    background-size: 200% 100%;\n    background-position-x: 180%;\n    animation: 1s loading ease-in-out infinite;\n}\n\n@keyframes loading {\n    to {\n        background-position-x: -20%;\n    }\n}\n\n@keyframes spin {\n    100% {\n        transform: rotate(1turn);\n    }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport { Observable, Subscription } from 'rxjs';\n\n@Component({\n    tag: 'p-loader',\n    styleUrl: 'loader.component.scss',\n    shadow: true,\n})\nexport class Loader {\n    /**\n     * Wether to show or hide the loader\n     */\n    @Prop() show: boolean | Observable<boolean> = true;\n\n    /**\n     * Variant of loader\n     */\n    @Prop() variant:\n        | 'inline'\n        | 'full-width'\n        | 'full-screen'\n        | 'modal'\n        | 'ghost' = 'inline';\n\n    /**\n     * Color of the loader\n     */\n    @Prop() color: 'indigo' | 'white' | 'storm' = 'indigo';\n\n    /**\n     * !NOT IMPLEMENTED! Modal title for modal variant\n     */\n    @Prop() modalTitle: string;\n\n    /**\n     * !NOT IMPLEMENTED! Modal description for modal variant\n     */\n    @Prop() modalDescription: string;\n\n    private _show = this.show;\n    private _showSubscriber: Subscription;\n\n    private _loader = (<div class={`loader color-${this.color}`}></div>);\n\n    componentWillRender() {\n        this._checkShow();\n    }\n\n    componentShouldUpdate() {\n        this._checkShow();\n    }\n\n    render() {\n        if (!this._show) {\n            return;\n        }\n\n        if (this.variant === 'ghost') {\n            return <Host class=\"p-loader variant-ghost\"></Host>;\n        }\n\n        if (this.variant === 'full-screen') {\n            return (\n                <Host class=\"p-loader variant-full-screen\">\n                    <div class=\"loading-screen\">\n                        <div class=\"content\">\n                            <slot />\n\n                            <div class=\"loader-wrapper\">{this._loader}</div>\n                        </div>\n                    </div>\n                </Host>\n            );\n        }\n\n        return (\n            <Host\n                class={`p-loader variant-default flex ${\n                    this.variant === 'full-width' &&\n                    'w-full flex justify-center text-4xl'\n                }`}\n            >\n                {this._loader}\n            </Host>\n        );\n    }\n\n    private _checkShow() {\n        if (this._showSubscriber) {\n            this._showSubscriber.unsubscribe();\n            this._showSubscriber = null;\n        }\n\n        if (typeof this.show !== 'boolean') {\n            this._showSubscriber = this.show?.subscribe(\n                (show) => (this._show = show)\n            );\n            return;\n        }\n\n        this._show = this.show;\n    }\n}\n"],"version":3}