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

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

@@ -1,9 +1,84 @@
-import { r as registerInstance, h, H as Host } from './index-e4d80e41.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-9062156b.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;
 
 const arrow = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 16 16" version="1.1">
     <title>434AFB85-135A-4569-A66B-6D5812BAA42C@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -208.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -208.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="Combined-Shape" transform="translate(243.000000, 0.000000)">
@@ -18,7 +93,7 @@ const arrow = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w
 const attachment = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 16 16" version="1.1">
     <title>6900D5DE-1A64-4EE8-8ABC-1FEE34C10458@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -240.000000)" fill="#80829E" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -240.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="attachment" transform="translate(0.000000, 32.000000)">
@@ -36,7 +111,7 @@ const bread = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>5F1EB64F-AB98-4EB4-AC35-FB0B26115170@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -272.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -272.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="bread" transform="translate(0.000000, 64.000000)">
@@ -53,7 +128,7 @@ const bread = `<?xml version="1.0" encoding="UTF-8"?>
 const calendar = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" viewBox="0 0 16 16" version="1.1">
     <title>3D99E2A7-B47A-4957-8D2C-7AF582F435CF@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -304.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -304.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="calendar" transform="translate(0.000000, 96.000000)">
@@ -71,7 +146,7 @@ const car = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>15BDAF47-5E79-4AD0-9D15-AEC22BEDD040@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -336.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -336.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="car" transform="translate(0.000000, 128.000000)">
@@ -85,11 +160,29 @@ const car = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const checklist = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1526.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="checklist" transform="translate(0.000000, 1318.000000)">
+                        <g id="⚛️-Atoms/icons/checklist" transform="translate(243.000000, 0.000000)">
+                            <path d="M1,0 L3,0 C3.55228475,-1.01453063e-16 4,0.44771525 4,1 L4,3 C4,3.55228475 3.55228475,4 3,4 L1,4 C0.44771525,4 6.76353751e-17,3.55228475 0,3 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z M7,1 L15,1 C15.5522847,1 16,1.44771525 16,2 C16,2.55228475 15.5522847,3 15,3 L7,3 C6.44771525,3 6,2.55228475 6,2 C6,1.44771525 6.44771525,1 7,1 Z M7,7 L15,7 C15.5522847,7 16,7.44771525 16,8 C16,8.55228475 15.5522847,9 15,9 L7,9 C6.44771525,9 6,8.55228475 6,8 C6,7.44771525 6.44771525,7 7,7 Z M7,13 L15,13 C15.5522847,13 16,13.4477153 16,14 C16,14.5522847 15.5522847,15 15,15 L7,15 C6.44771525,15 6,14.5522847 6,14 C6,13.4477153 6.44771525,13 7,13 Z M1,6 L3,6 C3.55228475,6 4,6.44771525 4,7 L4,9 C4,9.55228475 3.55228475,10 3,10 L1,10 C0.44771525,10 6.76353751e-17,9.55228475 0,9 L0,7 C-6.76353751e-17,6.44771525 0.44771525,6 1,6 Z M1,12 L3,12 C3.55228475,12 4,12.4477153 4,13 L4,15 C4,15.5522847 3.55228475,16 3,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,13 C-6.76353751e-17,12.4477153 0.44771525,12 1,12 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 const checkmark = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>EB3016C2-A1DF-47ED-937C-697443FD3F3C@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -368.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -368.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="checkmark" transform="translate(0.000000, 160.000000)">
@@ -107,7 +200,7 @@ const chevron = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>2D60A936-D98C-47D5-81C3-87BE72E0E033@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -400.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -400.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="chevron" transform="translate(0.000000, 192.000000)">
@@ -125,7 +218,7 @@ const clock = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>DA4F6F05-8E0E-4F99-8C04-325E1026BDED@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -432.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -432.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="clock" transform="translate(0.000000, 224.000000)">
@@ -143,7 +236,7 @@ const cogs = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>D69A8BFD-59F3-48E5-B2F8-A57D151EB85C@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -468.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -468.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="cogs" transform="translate(0.000000, 260.000000)">
@@ -161,7 +254,7 @@ const comment = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>85F96114-FD2C-4B57-AEA8-3B2854320A29@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -502.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -502.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="comment" transform="translate(0.000000, 294.000000)">
@@ -179,7 +272,7 @@ const document = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>20D69539-7C20-49F0-9BCF-AE6F4D356668@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -534.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -534.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="document" transform="translate(0.000000, 326.000000)">
@@ -197,7 +290,7 @@ const download = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>467E5344-FF5F-465D-940E-3EE5A5238ED5@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -566.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -566.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="download" transform="translate(0.000000, 358.000000)">
@@ -215,7 +308,7 @@ const envelope = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>6E5BAADC-0E2C-4B1F-8A4B-A6F7D16BAE6B@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -598.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -598.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="envelope" transform="translate(0.000000, 390.000000)">
@@ -233,7 +326,7 @@ const explanation = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>689A577B-4141-4E4F-B884-DF9FBE546815@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1366.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1366.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="explanation" transform="translate(0.000000, 1158.000000)">
@@ -251,7 +344,7 @@ const eye = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>36A03146-33F9-43AB-B64A-795FF770A42E@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -630.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -630.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="eye" transform="translate(0.000000, 422.000000)">
@@ -269,7 +362,7 @@ const filter = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>161B97F5-D5D9-43EE-AD95-15870E881303@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -662.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -662.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="filter" transform="translate(0.000000, 454.000000)">
@@ -283,11 +376,31 @@ const filter = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const folder = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1622.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="projects" transform="translate(0.000000, 1414.000000)">
+                        <g id="default" transform="translate(243.000000, 0.000000)">
+                            <g id="⚛️-Atoms/icons/projects" transform="translate(0.000000, 1.000000)">
+                                <path d="M1,0 L5.58578644,0 C5.85100293,-1.26996481e-15 6.10535684,0.10535684 6.29289322,0.292893219 L7.70710678,1.70710678 C7.89464316,1.89464316 8.14899707,2 8.41421356,2 L15,2 C15.5522847,2 16,2.44771525 16,3 L16,13 C16,13.5522847 15.5522847,14 15,14 L1,14 C0.44771525,14 6.76353751e-17,13.5522847 0,13 L0,1 C-6.76353751e-17,0.44771525 0.44771525,-4.5365845e-16 1,0 Z" id="Combined-Shape"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 const grid = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>0B846487-E152-44B1-B058-D5E90C916406@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -694.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -694.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="grid" transform="translate(0.000000, 486.000000)">
@@ -305,7 +418,7 @@ const headset = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>1B240603-203F-49BC-9F73-8609C2B2A397@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -726.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -726.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="headset" transform="translate(0.000000, 518.000000)">
@@ -319,11 +432,29 @@ const headset = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const integration = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1590.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="koppelingen" transform="translate(0.000000, 1382.000000)">
+                        <g id="⚛️-Atoms/icons/koppelingen" transform="translate(243.000000, 0.000000)">
+                            <path d="M1,0 L6,0 C6.55228475,-1.01453063e-16 7,0.44771525 7,1 L7,6 C7,6.55228475 6.55228475,7 6,7 L1,7 C0.44771525,7 6.76353751e-17,6.55228475 0,6 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 Z M1,9 L6,9 C6.55228475,9 7,9.44771525 7,10 L7,15 C7,15.5522847 6.55228475,16 6,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,10 C-6.76353751e-17,9.44771525 0.44771525,9 1,9 Z M10,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 L10,7 C9.44771525,7 9,6.55228475 9,6 L9,1 C9,0.44771525 9.44771525,1.01453063e-16 10,0 Z M12.5,9 C13.0522847,9 13.5,9.44771525 13.5,10 L13.5,11.5 L15,11.5 C15.5522847,11.5 16,11.9477153 16,12.5 C16,13.0522847 15.5522847,13.5 15,13.5 L13.5,13.5 L13.5,15 C13.5,15.5522847 13.0522847,16 12.5,16 C11.9477153,16 11.5,15.5522847 11.5,15 L11.5,13.5 L10,13.5 C9.44771525,13.5 9,13.0522847 9,12.5 C9,11.9477153 9.44771525,11.5 10,11.5 L11.5,11.5 L11.5,10 C11.5,9.44771525 11.9477153,9 12.5,9 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 const list = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>680FABDB-CA3A-4C86-A241-59CFA9DF98BD@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -758.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -758.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="list" transform="translate(0.000000, 550.000000)">
@@ -341,7 +472,7 @@ const location = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>F74A1493-189D-4CFE-9DC0-D69141A189C7@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -790.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -790.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="location" transform="translate(0.000000, 582.000000)">
@@ -359,7 +490,7 @@ const megaphone = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>A2F9256B-4901-4C20-8F77-D5066011EE5A@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -822.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -822.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="megaphone" transform="translate(0.000000, 614.000000)">
@@ -373,11 +504,38 @@ const megaphone = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const menu = `<?xml version="1.0" encoding="UTF-8"?><svg
+    version="1.1"
+    width="1em"
+    height="1em"
+    viewBox="0 0 16.0 16.0"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+    <defs>
+        <clipPath id="i0">
+            <path
+                d="M13,10 C13.5522847,10 14,10.4477153 14,11 C14,11.5522847 13.5522847,12 13,12 L1,12 C0.44771525,12 -4.87476137e-16,11.5522847 0,11 C-6.76353751e-17,10.4477153 0.44771525,10 1,10 L13,10 Z M13,5 C13.5522847,5 14,5.44771525 14,6 C14,6.55228475 13.5522847,7 13,7 L1,7 C0.44771525,7 -4.87476137e-16,6.55228475 0,6 C-6.76353751e-17,5.44771525 0.44771525,5 1,5 L13,5 Z M13,0 C13.5522847,-1.01453063e-16 14,0.44771525 14,1 C14,1.55228475 13.5522847,2 13,2 L1,2 C0.44771525,2 -4.87476137e-16,1.55228475 0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L13,0 Z"
+            ></path>
+        </clipPath>
+    </defs>
+    <g transform="translate(1.0 2.0)">
+        <g clip-path="url(#i0)">
+            <polygon
+                points="0,0 14,0 14,12 0,12 0,0"
+                stroke="none"
+                fill="currentColor"
+            ></polygon>
+        </g>
+    </g>
+</svg>
+`;
+
 const minus = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>1AA10FE9-5D18-418E-AF58-B044C23B6DEB@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -854.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -854.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="minus" transform="translate(0.000000, 646.000000)">
@@ -391,11 +549,31 @@ const minus = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const more = `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    name="switch"
+>
+    <defs>
+        <clipPath id="a">
+            <path
+                d="M2,12 C3.1045695,12 4,12.8954305 4,14 C4,15.1045695 3.1045695,16 2,16 C0.8954305,16 0,15.1045695 0,14 C0,12.8954305 0.8954305,12 2,12 Z M2,6 C3.1045695,6 4,6.8954305 4,8 C4,9.1045695 3.1045695,10 2,10 C0.8954305,10 0,9.1045695 0,8 C0,6.8954305 0.8954305,6 2,6 Z M2,0 C3.1045695,0 4,0.8954305 4,2 C4,3.1045695 3.1045695,4 2,4 C0.8954305,4 0,3.1045695 0,2 C0,0.8954305 0.8954305,0 2,0 Z"
+            />
+        </clipPath>
+    </defs>
+    <g clip-path="url(#a)" transform="translate(6)">
+        <polygon fill="currentColor" points="0 0 4 0 4 16 0 16 0 0" />
+    </g>
+</svg>
+`;
+
 const negative = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>B592C279-58CD-4C4A-A354-393D736863E2@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -886.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -886.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="negative" transform="translate(0.000000, 678.000000)">
@@ -413,7 +591,7 @@ const pagination = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>667348A2-48CB-496D-8C8A-3A0C4142E887@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1430.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1430.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="pagination" transform="translate(0.000000, 1222.000000)">
@@ -431,7 +609,7 @@ const payment = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>46CF5A08-42A2-4628-A7C8-6721B5428686@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -918.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -918.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="payment" transform="translate(0.000000, 710.000000)">
@@ -449,7 +627,7 @@ const pencil = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>9E1784EB-8E2A-4C1A-A8C3-F500E03858E6@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -950.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -950.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="pencil" transform="translate(0.000000, 742.000000)">
@@ -467,7 +645,7 @@ const person = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>C1AD60F3-92E2-4915-A731-25F894172F6D@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -982.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -982.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="person" transform="translate(0.000000, 774.000000)">
@@ -485,7 +663,7 @@ const plus = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>70C9DBCC-EA4A-4C0D-8EE1-ACE33C96B3AC@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1014.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1014.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="plus" transform="translate(0.000000, 806.000000)">
@@ -503,7 +681,7 @@ const question = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>B38D7652-BAD1-453A-A17A-8BD72B3A27DE@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1046.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1046.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="question" transform="translate(0.000000, 838.000000)">
@@ -521,7 +699,7 @@ const receipt = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>B8233FCC-7CA7-43E4-90EE-D7BEB3AE64DB@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1078.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1078.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="receipt" transform="translate(0.000000, 870.000000)">
@@ -539,7 +717,7 @@ const report = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>92D2E7B0-15BC-4C37-851A-D0ECF493A903@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1110.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1110.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="report" transform="translate(0.000000, 902.000000)">
@@ -557,7 +735,7 @@ const search = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>B40F2062-9E93-4938-9311-BB5EA06B94E6@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1142.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1142.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="search" transform="translate(0.000000, 934.000000)">
@@ -588,7 +766,7 @@ const settings = `<?xml version="1.0" encoding="UTF-8"?>
                     <g id="settings" transform="translate(0.000000, 966.000000)">
                         <g id="Combined-Shape" transform="translate(243.000000, 0.000000)">
                             <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
-                            <use fill="#989AB7" fill-rule="evenodd" xlink:href="#path-1"></use>
+                            <use fill="currentColor" fill-rule="evenodd" xlink:href="#path-1"></use>
                         </g>
                     </g>
                 </g>
@@ -601,7 +779,7 @@ const sick = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>8258B213-4691-4F57-A9BA-B794CD8C1294@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1462.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1462.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="sick" transform="translate(0.000000, 1254.000000)">
@@ -615,11 +793,58 @@ const sick = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const signout = `<?xml version="1.0" encoding="UTF-8"?><svg
+    version="1.1"
+    width="1em"
+    height="1em"
+    viewBox="0 0 16.0 16.0"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+    <defs>
+        <clipPath id="i0">
+            <path
+                d="M7,0 C7.55228475,-1.01453063e-16 8,0.44771525 8,1 L8,2 C8,2.55228475 7.55228475,3 7,3 C6.44771525,3 6,2.55228475 6,2 L2,2 L2,14 L6,14 C6,13.4477153 6.44771525,13 7,13 C7.51283584,13 7.93550716,13.3860402 7.99327227,13.8833789 L8,14 L8,15 C8,15.5522847 7.55228475,16 7,16 L1,16 C0.44771525,16 6.76353751e-17,15.5522847 0,15 L0,1 C-6.76353751e-17,0.44771525 0.44771525,1.01453063e-16 1,0 L7,0 Z M10.7549976,3.25769542 C10.7575495,3.26010955 10.7600879,3.26253795 10.7626127,3.26498049 L14.7352971,7.10831254 C14.9002291,7.26787433 14.9984382,7.47043889 15.0293482,7.68119673 C15.1304672,7.98354221 15.0865843,8.32959983 14.8801668,8.60392636 C14.8538183,8.63894319 14.8251966,8.67219017 14.7944866,8.70345226 L10.860395,12.7082755 C10.5017253,13.0733939 9.91497906,13.0786215 9.5498607,12.7199517 C9.17420493,12.3424827 9.16725127,11.7467377 9.52665628,11.368243 L11.775,9 L6,9 C5.44771525,9 5,8.55228475 5,8 C5,7.44771525 5.44771525,7 6,7 L11.812,7 L9.44561311,4.65686817 C9.06927109,4.28428449 9.05936325,3.67934833 9.42330209,3.29464008 C9.78083767,2.91670052 10.3770581,2.90015983 10.7549976,3.25769542 Z"
+            ></path>
+        </clipPath>
+    </defs>
+    <g clip-path="url(#i0)">
+        <polygon
+            points="0,0 15.081515,0 15.081515,16 0,16 0,0"
+            stroke="none"
+            fill="currentColor"
+        ></polygon>
+    </g>
+</svg>
+`;
+
+const switchIcon = `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+>
+    <defs>
+        <clipPath id="a">
+            <path
+                d="M4.62545411,6.29533485 C4.98729728,6.68167262 4.977047,7.28550622 4.60229966,7.65934011 L3.25310842,9.00507355 L9.00410842,9.00539288 C9.55639317,9.00539288 10.0041084,9.45310813 10.0041084,10.0088661 C10.0041084,10.5611508 9.55639317,11.0088661 9.00410842,11.0088661 L3.25810842,11.0080736 L4.52726347,12.3757538 C4.88290891,12.758707 4.87415123,13.353741 4.5073897,13.7260619 C4.50238568,13.7311418 4.4973223,13.7361629 4.49220061,13.7411241 C4.13013271,14.0918468 3.55230174,14.0826497 3.20157902,13.7205818 L0.281717047,10.7062681 C0.253970354,10.6776239 0.227961979,10.6473455 0.203831273,10.6155952 C-0.00929773908,10.335168 -0.051707368,9.97841391 0.0598429822,9.67050846 C0.0939459066,9.46763576 0.190736261,9.2734466 0.34973504,9.11924101 L3.29438224,6.26336323 L3.39658061,6.17741433 C3.77185921,5.90484234 4.30017374,5.94803496 4.62545411,6.29533485 Z M12.6116362,0.177414332 L12.7020616,0.252142505 L12.7138346,0.263363235 L15.6584818,3.11924101 C15.8174806,3.2734466 15.9142709,3.46763576 15.9483739,3.67050846 C16.0599242,3.97841391 16.0175146,4.33516799 15.8043856,4.61559522 C15.7802549,4.64734551 15.7542465,4.67762389 15.7264998,4.70626813 L12.8066378,7.7205818 C12.4559151,8.0826497 11.8780841,8.09184679 11.5160162,7.74112406 C11.5108945,7.73616286 11.5058312,7.7311418 11.5008271,7.72606193 C11.1340656,7.35374104 11.1253079,6.758707 11.4809534,6.37575377 L12.7501084,5.00807355 L7.00410842,5.00886607 C6.45182367,5.00886607 6.00410842,4.56115082 6.00410842,4.00886607 C6.00410842,3.45310813 6.45182367,3.00539288 7.00410842,3.00539288 L12.7551084,3.00507355 L11.4059172,1.65934011 C11.0311698,1.28550622 11.0209196,0.68167262 11.3827627,0.295334855 C11.7080431,-0.0519650412 12.2363576,-0.0951576593 12.6116362,0.177414332 Z"
+            />
+        </clipPath>
+    </defs>
+    <g clip-path="url(#a)" transform="translate(-.004 1)">
+        <polygon
+            fill="currentColor"
+            points="0 0 16.008 0 16.008 13.998 0 13.998 0 0"
+        />
+    </g>
+</svg>
+`;
+
 const tachometer = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>444A72E2-89EC-4714-A021-8E912B45CAD5@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1206.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1206.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="tachometer" transform="translate(0.000000, 998.000000)">
@@ -633,11 +858,47 @@ const tachometer = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
+const task = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1494.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="task" transform="translate(0.000000, 1286.000000)">
+                        <g id="⚛️-Atoms/icons/task" transform="translate(243.000000, 0.000000)">
+                            <path d="M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,14 C16,15.1045695 15.1045695,16 14,16 L2,16 C0.8954305,16 1.3527075e-16,15.1045695 0,14 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L14,0 Z M12.5824067,4.15329919 C12.2191499,3.89109673 11.7287641,3.97276881 11.4568977,4.34074885 L11.4568977,4.34074885 L6.727,10.74 L4.48421797,8.28557606 C4.2033448,7.97804494 3.76334089,7.9304898 3.43345171,8.15708233 L3.34641434,8.22568799 L3.28382396,8.28198278 C3.11439636,8.43435761 3.01189474,8.65551042 3.00097092,8.89225358 C2.9900471,9.12899673 3.07168957,9.35990745 3.22626317,9.52945129 L3.22626317,9.52945129 L6.15124558,12.7298698 C6.40900695,13.0122133 6.80862496,13.0809955 7.13592632,12.899353 C7.28904921,12.8466515 7.42987755,12.7460396 7.5366165,12.6011104 L7.5366165,12.6011104 L12.8282975,5.43729943 C12.9657189,5.25134381 13.0245403,5.01239255 12.9905957,4.77799163 C12.9566512,4.5435907 12.8330171,4.33498317 12.6494679,4.20240741 L12.6494679,4.20240741 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
+const template = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>default</title>
+    <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1558.000000)" fill="currentColor">
+            <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
+                <g id="icons" transform="translate(0.000000, 152.000000)">
+                    <g id="template" transform="translate(0.000000, 1350.000000)">
+                        <g id="⚛️-Atoms/icons/template" transform="translate(243.000000, 0.000000)">
+                            <path d="M14,0 C15.1045695,-2.02906125e-16 16,0.8954305 16,2 L16,14 C16,15.1045695 15.1045695,16 14,16 L2,16 C0.8954305,16 1.3527075e-16,15.1045695 0,14 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L14,0 Z M8,3 C7.44771525,3 7,3.44771525 7,4 L7,4 L7,7 L4,7 C3.44771525,7 3,7.44771525 3,8 C3,8.55228475 3.44771525,9 4,9 L4,9 L7,9 L7,12 C7,12.5522847 7.44771525,13 8,13 C8.55228475,13 9,12.5522847 9,12 L9,12 L9,9 L12,9 C12.5522847,9 13,8.55228475 13,8 C13,7.44771525 12.5522847,7 12,7 L12,7 L9,7 L9,4 C9,3.44771525 8.55228475,3 8,3 Z" id="Combined-Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>`;
+
 const tool = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>3412434A-3941-4BA7-AF31-A18B70C22235@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1238.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1238.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="tool" transform="translate(0.000000, 1030.000000)">
@@ -655,7 +916,7 @@ const trash = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>57E63C9F-ED1A-4C01-82E7-4413FAE7BD1B@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1270.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1270.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="trash" transform="translate(0.000000, 1062.000000)">
@@ -673,7 +934,7 @@ const turn = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>3D8FF491-8CCF-45C5-8645-7ADDDAD1C215@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1398.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1398.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="turn" transform="translate(0.000000, 1190.000000)">
@@ -691,7 +952,7 @@ const upload = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>625641CF-AE77-4A64-95BC-298DB7F96CF6@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1302.000000)" fill="#989AB7" fill-rule="nonzero">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1302.000000)" fill="currentColor" fill-rule="nonzero">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="uploaden" transform="translate(0.000000, 1094.000000)">
@@ -709,7 +970,7 @@ const warning = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>8610B121-CA13-4C32-BC35-1DBE51B9260A@1x</title>
     <g id="✔️-Collections" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1334.000000)" fill="#989AB7">
+        <g id="⚛️-Atoms---Icons" transform="translate(-299.000000, -1334.000000)" fill="currentColor">
             <g id="Collection---Icons" transform="translate(56.000000, 56.000000)">
                 <g id="icons" transform="translate(0.000000, 152.000000)">
                     <g id="warning" transform="translate(0.000000, 1126.000000)">
@@ -729,6 +990,7 @@ const icons = {
   bread,
   calendar,
   car,
+  checklist,
   checkmark,
   chevron,
   clock,
@@ -740,12 +1002,16 @@ const icons = {
   explanation,
   eye,
   filter,
+  folder,
   grid,
   headset,
+  integration,
   list,
   location,
   megaphone,
+  menu,
   minus,
+  more,
   negative,
   pagination,
   payment,
@@ -758,7 +1024,11 @@ const icons = {
   search,
   settings,
   sick,
+  signout,
+  switch: switchIcon,
   tachometer,
+  task,
+  template,
   tool,
   trash,
   turn,
@@ -766,13 +1036,11 @@ const icons = {
   warning,
 };
 
+const iconComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.m-0{margin:0!important}.mt-6{margin-top:1.5rem!important}.ml-2{margin-left:.5rem!important}.mb-6{margin-bottom:1.5rem!important}.mt-0{margin-top:0!important}.ml-auto{margin-left:auto!important}.mb-3{margin-bottom:.75rem!important}.inline{display:inline!important}.flex{display:flex!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-auto{flex:1 1 auto!important}.-translate-y-1{--tw-translate-y:-0.25rem!important}.-translate-x-1,.-translate-y-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-translate-x-1{--tw-translate-x:-0.25rem!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-270{--tw-rotate:270deg!important}.rotate-315{--tw-rotate:315deg!important}.-rotate-0,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-135,.-rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-270,.-rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-315{--tw-rotate:-315deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-pointer{cursor:pointer!important}.items-end{align-items:flex-end!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-3{gap:.75rem!important}.whitespace-nowrap{white-space:nowrap!important}.border-t-2{border-top-width:2px!important}.border-r-2{border-right-width:2px!important}.border-indigo{border-color:rgb(82 138 250/var(--tw-border-opacity))!important}.border-indigo,.border-mystic-dark{--tw-border-opacity:1!important}.border-mystic-dark{border-color:rgb(218 230 240/var(--tw-border-opacity))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.font-medium{font-weight:500!important}.font-semibold{font-weight:600!important}.text-storm-vague{color:rgb(152 154 183/var(--tw-text-opacity))!important}.text-negative,.text-storm-vague{--tw-text-opacity:1!important}.text-negative{color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{color:rgb(255 204 211/var(--tw-text-opacity))!important}.text-negative-light,.text-storm-dark{--tw-text-opacity:1!important}.text-storm-dark{color:rgb(39 40 56/var(--tw-text-opacity))!important}.blur{--tw-blur:blur(8px)!important;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.transition{transition-duration:.15s!important;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.duration-500{transition-duration:.5s!important}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}*{box-sizing:border-box}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.hover\\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}@media (min-width:40rem){.tablet\\:w-80{width:20rem!important}.tablet\\:w-\\[33\\.5rem\\]{width:33.5rem!important}.tablet\\:w-\\[38rem\\]{width:38rem!important}.tablet\\:w-\\[47\\.5rem\\]{width:47.5rem!important}.tablet\\:w-\\[57\\.5rem\\]{width:57.5rem!important}}.-translate-y-1\\/2{--tw-translate-y:-50%!important}.-translate-x-1\\/2,.-translate-y-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-translate-x-1\\/2{--tw-translate-x:-50%!important}";
+
 const Icon = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    /**
-     * The icon the be displayed
-     */
-    this.variant = null;
     /**
      * The size of the icon, using tailwind sizes
      */
@@ -780,7 +1048,7 @@ const Icon = class {
     /**
      * Wether to rotate the icon x degrees
      */
-    this.rotate = null;
+    this.rotate = 0;
     /**
      * Wether to flip the icon horizontally or vertically
      */
@@ -788,11 +1056,96 @@ const Icon = class {
   }
   render() {
     const icon = icons[this.variant];
-    return h(Host, { class: this._getClass(), innerHTML: icon });
+    const styles = {
+      'p-icon flex': true,
+      'text-auto': this.size === 'auto',
+      'text-xxs': this.size === 'xxs',
+      'text-xs': this.size === 'xs',
+      'text-sm': this.size === 'sm',
+      'text-base': this.size === 'base',
+      'text-lg': this.size === 'lg',
+      'text-xl': this.size === 'xl',
+      'text-2xl': this.size === '2xl',
+      'text-3xl': this.size === '3xl',
+      'text-4xl': this.size === '4xl',
+      'text-5xl': this.size === '5xl',
+      'text-6xl': this.size === '6xl',
+      transform: !!this.rotate || !!this.flip,
+      'scale-x-flip': this.flip === 'horizontal',
+      'scale-y-flip': this.flip === 'vertical',
+      'rotate-0': this.rotate === 0,
+      'rotate-25': this.rotate === 25,
+      'rotate-45': this.rotate === 45,
+      'rotate-90': this.rotate === 90,
+      'rotate-135': this.rotate === 135,
+      'rotate-180': this.rotate === 180,
+      'rotate-225': this.rotate === 225,
+      'rotate-270': this.rotate === 270,
+      'rotate-315': this.rotate === 315,
+      '-rotate-0': this.rotate === -0,
+      '-rotate-25': this.rotate === -25,
+      '-rotate-45': this.rotate === -45,
+      '-rotate-90': this.rotate === -90,
+      '-rotate-135': this.rotate === -135,
+      '-rotate-180': this.rotate === -180,
+      '-rotate-225': this.rotate === -225,
+      '-rotate-270': this.rotate === -270,
+      '-rotate-315': this.rotate === -315,
+    };
+    return h(Host, { class: styles, innerHTML: icon });
+  }
+};
+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-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}*{box-sizing:border-box}:host .loader{--tw-border-opacity:1!important;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border-color:rgb(241 246 255/var(--tw-border-opacity))!important;border-radius:100%;border-style:solid!important;border-top:solid rgb(82 138 250/var(--tw-border-opacity))!important;border-width:2px!important;display:inline-block;height:1em;transition-duration:.5s;width:1em}:host .loader.color-storm{--tw-border-opacity:1!important;border-color:rgba(176,178,203,.4)!important;border-top-color:rgb(81 83 107/var(--tw-border-opacity))!important}:host .loader.color-white{--tw-border-opacity:1!important;border-color:rgba(241,246,255,.4)!important;border-top-color:rgb(255 255 255/var(--tw-border-opacity))!important}:host .loading-screen{--tw-bg-opacity:1;align-items:center;background-color:rgb(247 250 252/var(--tw-bg-opacity));display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:1001}:host .loading-screen .content{max-width:20rem}:host .loading-screen .content .loader-wrapper{display:flex;justify-content:center;width:100%}:host .loading-screen .content .loader-wrapper .loader{font-size:2.25rem;line-height:2.5rem}.-rotate-0,.-rotate-135,.-rotate-180,.-rotate-225,.-rotate-25,.-rotate-270,.-rotate-315,.-rotate-45,.-rotate-90,.rotate-0,.rotate-135,.rotate-180,.rotate-225,.rotate-25,.rotate-270,.rotate-315,.rotate-45,.rotate-90,.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}";
+
+const Loader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Wether to show or hide the loader
+     */
+    this.show = true;
+    /**
+     * Variant of loader
+     */
+    this.variant = 'inline';
+    /**
+     * Color of the loader
+     */
+    this.color = 'indigo';
+    this._show = this.show;
+    this._loader = (h("div", { class: `loader color-${this.color}` }));
+  }
+  componentWillRender() {
+    this._checkShow();
+  }
+  componentShouldUpdate() {
+    this._checkShow();
+  }
+  render() {
+    if (!this._show) {
+      return;
+    }
+    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' &&
+        'w-full flex justify-center text-4xl'}` }, this._loader));
   }
-  _getClass() {
-    return `p-icon inline-block text-${this.size} ${this.rotate || this.flip ? 'transform' : ''} ${this.rotate ? ` ${this.rotate < 0 ? '-' : ''}rotate-${this.rotate < 0 ? this.rotate * -1 : this.rotate}` : ''} ${this.flip === 'horizontal' ? ` -scale-x-1` : this.flip === 'vertical' ? ` -scale-y-1` : ''}`;
+  _checkShow() {
+    var _a;
+    if (this._showSubscriber) {
+      this._showSubscriber.unsubscribe();
+      this._showSubscriber = null;
+    }
+    if (typeof this.show !== 'boolean') {
+      this._showSubscriber = (_a = this.show) === null || _a === void 0 ? void 0 : _a.subscribe((show) => (this._show = show));
+      return;
+    }
+    this._show = this.show;
   }
 };
+Loader.style = loaderComponentCss;
 
-export { Icon as p_icon };
+export { Button as p_button, Icon as p_icon, Loader as p_loader };