suis 0.8.0 → 0.10.0

package/fesm2022/suis.mjs

@@ -1,10 +1,161 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, inject, ElementRef, Renderer2, Directive, ChangeDetectorRef, EventEmitter, Output, ViewEncapsulation, HostListener, Pipe, forwardRef, ViewChild } from '@angular/core';
+import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, inject, ElementRef, Renderer2, Directive, ChangeDetectorRef, ViewEncapsulation, HostListener, forwardRef, ViewChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
 
+class SuisNgClassPipe {
+    transform(prefix, ...args) {
+        const classes = [];
+        args.forEach((arg) => classes.push(`${prefix}--${arg}`));
+        return classes;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, isStandalone: true, name: "suisNgClass" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'suisNgClass',
+                }]
+        }] });
+
+var SuisIconType;
+(function (SuisIconType) {
+    SuisIconType["INFO"] = "info";
+    SuisIconType["WARNING"] = "warning";
+    SuisIconType["CHECK"] = "check";
+    SuisIconType["CROSS"] = "cross";
+    SuisIconType["PLUS"] = "plus";
+    SuisIconType["MINUS"] = "minus";
+    SuisIconType["ARROW_UP"] = "arrow-up";
+    SuisIconType["ARROW_LEFT"] = "arrow-left";
+    SuisIconType["ARROW_RIGHT"] = "arrow-right";
+    SuisIconType["ARROW_DOWN"] = "arrow-down";
+})(SuisIconType || (SuisIconType = {}));
+
+class SuisIconTypePipe {
+    transform(type) {
+        switch (type) {
+            case SuisIconType.INFO:
+                return '?';
+            case SuisIconType.WARNING:
+                return '!';
+            case SuisIconType.CHECK:
+                return '✓';
+            case SuisIconType.CROSS:
+                return '×';
+            case SuisIconType.PLUS:
+                return '+';
+            case SuisIconType.MINUS:
+                return '−';
+            case SuisIconType.ARROW_LEFT:
+                return '←';
+            case SuisIconType.ARROW_UP:
+                return '↑';
+            case SuisIconType.ARROW_RIGHT:
+                return '→';
+            case SuisIconType.ARROW_DOWN:
+                return '↓';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisIconTypePipe, isStandalone: true, name: "suisIconType" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconTypePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'suisIconType',
+                }]
+        }] });
+
+class SuisIconComponent {
+    constructor() {
+        /** @internal */
+        this.SuisIconType = SuisIconType;
+        /**
+         * Sets the font size of the HTML Entity itself. Type of SuisSize. By default set to 'md'.
+         */
+        this.size = 'md';
+        /**
+         * Sets the color pallette of the icon and surroundings. Type of SuisColor. By default set to 'dark'.
+         */
+        this.color = 'dark';
+        /**
+         * Sets the HTML Entity displayed in content. Type of SuisIconType. By default set to SuisIconType.INFO.
+         */
+        this.type = SuisIconType.INFO;
+        /**
+         * Shows the circled border around the icon. By default set to false. Can not be combined with filled (will be overriden then).
+         */
+        this.outlined = false;
+        /**
+         * Shows the circled background behind the icon. By default set to false. Overrides outlined behavior if used at the sime time.
+         */
+        this.filled = false;
+        /**
+         * Shows the pointer cursor when hovered. By defauly set to false.
+         */
+        this.pointer = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisIconComponent, isStandalone: true, selector: "suis-icon", inputs: { size: "size", color: "color", type: "type", outlined: "outlined", filled: "filled", pointer: "pointer" }, ngImport: i0, template: "<div\n  class=\"suis-icon\"\n  [class.suis-icon--outlined]=\"outlined\"\n  [class.suis-icon--filled]=\"filled\"\n  [class.suis-icon--pointer]=\"pointer\"\n  [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n  <span [innerHTML]=\"type | suisIconType\"></span>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--pointer{cursor:pointer}.suis-icon--xs{font-size:.5rem}.suis-icon--sm{font-size:.75rem}.suis-icon--md{font-size:1rem}.suis-icon--lg{font-size:1.5rem;width:1.5rem;height:1.5rem}.suis-icon--xl{font-size:2rem;width:2rem;height:2rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisIconTypePipe, name: "suisIconType" }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-icon', standalone: true, imports: [CommonModule, SuisIconTypePipe, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-icon\"\n  [class.suis-icon--outlined]=\"outlined\"\n  [class.suis-icon--filled]=\"filled\"\n  [class.suis-icon--pointer]=\"pointer\"\n  [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n  <span [innerHTML]=\"type | suisIconType\"></span>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--pointer{cursor:pointer}.suis-icon--xs{font-size:.5rem}.suis-icon--sm{font-size:.75rem}.suis-icon--md{font-size:1rem}.suis-icon--lg{font-size:1.5rem;width:1.5rem;height:1.5rem}.suis-icon--xl{font-size:2rem;width:2rem;height:2rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], outlined: [{
+                type: Input
+            }], filled: [{
+                type: Input
+            }], pointer: [{
+                type: Input
+            }] } });
+
+class SuisAlertComponent {
+    constructor() {
+        /** @internal */
+        this.SuisIconType = SuisIconType;
+        /**
+         * Controls visibilty of the alert. By default set to false.
+         */
+        this.hidden = false;
+        /**
+         * Emits change of hidden state.
+         */
+        this.hiddenChange = new EventEmitter();
+        /**
+         * Sets the color pallette of the alert. Type of SuisInfoColor. By default set to 'danger'.
+         */
+        this.color = 'danger';
+    }
+    onCancel() {
+        this.hidden = true;
+        this.hiddenChange.emit(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisAlertComponent, isStandalone: true, selector: "suis-alert", inputs: { hidden: "hidden", color: "color" }, outputs: { hiddenChange: "hiddenChange" }, ngImport: i0, template: "<div\n  *ngIf=\"!hidden\"\n  class=\"suis-alert\"\n  [ngClass]=\"'suis-alert' | suisNgClass : color\"\n>\n  <ng-content></ng-content>\n  <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n    <suis-icon\n      [type]=\"SuisIconType.CROSS\"\n      [color]=\"'white'\"\n      [size]=\"'lg'\"\n    ></suis-icon>\n  </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-alert', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"!hidden\"\n  class=\"suis-alert\"\n  [ngClass]=\"'suis-alert' | suisNgClass : color\"\n>\n  <ng-content></ng-content>\n  <button class=\"suis-alert__cancel\" type=\"button\" (click)=\"onCancel()\">\n    <suis-icon\n      [type]=\"SuisIconType.CROSS\"\n      [color]=\"'white'\"\n      [size]=\"'lg'\"\n    ></suis-icon>\n  </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-alert{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1.25rem;border-radius:.25rem;color:#fff;font-weight:500}.suis-alert__cancel{background-color:transparent;border:none;cursor:pointer}.suis-alert--success{background-color:#2ed573}.suis-alert--warning{background-color:#ffa502}.suis-alert--danger{background-color:#ff4757}\n"] }]
+        }], propDecorators: { hidden: [{
+                type: Input
+            }], hiddenChange: [{
+                type: Output
+            }], color: [{
+                type: Input
+            }] } });
+
 class SuisBoxComponent {
     constructor() {
         /**
@@ -13,11 +164,11 @@ class SuisBoxComponent {
         this.spacing = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisBoxComponent, isStandalone: true, selector: "suis-box", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem}.suis-box--spacing{padding:1.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisBoxComponent, isStandalone: true, selector: "suis-box", inputs: { spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem}.suis-box--spacing{padding:1.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-box', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem}.suis-box--spacing{padding:1.25rem}\n"] }]
+            args: [{ selector: 'suis-box', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-box\" [class.suis-box--spacing]=\"spacing\">\n  <ng-content></ng-content>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-box{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem}.suis-box--spacing{padding:1.25rem}\n"] }]
         }], propDecorators: { spacing: [{
                 type: Input
             }] } });
@@ -29,7 +180,7 @@ class SuisButtonBase {
         /** @internal */
         this.renderer2 = inject(Renderer2);
         /**
-         * Sets button's color theme. Type of SuisColor. By default set to 'primary'.
+         * Sets button's color theme. Type of SuisPalleteColor | SuisInfoColor. By default set to 'primary'.
          */
         this.color = 'primary';
         /**
@@ -115,14 +266,14 @@ class SuisButtonComponent extends SuisButtonBase {
         this.renderer2.addClass(this.elementRef.nativeElement, `suis-button--${this.color}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonComponent, isStandalone: true, selector: "button[suisButton]", host: { properties: { "attr.disabled": "disabled || null", "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\n  <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n  <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonComponent, isStandalone: true, selector: "button[suisButton]", host: { properties: { "attr.disabled": "disabled || null", "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n  <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[suisButton]', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[attr.disabled]': 'disabled || null',
                         '[attr.tabindex]': 'disabled ? -1 : 0',
-                    }, template: "<ng-container *ngIf=\"!loading; else spinner\">\n  <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n  <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
+                    }, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n  <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
         }] });
 class SuisButtonOutlinedComponent extends SuisButtonBase {
     ngAfterViewInit() {
@@ -130,14 +281,14 @@ class SuisButtonOutlinedComponent extends SuisButtonBase {
         this.renderer2.addClass(this.elementRef.nativeElement, `suis-button-outlined--${this.color}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonOutlinedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonOutlinedComponent, isStandalone: true, selector: "button[suisButtonOutlined]", host: { properties: { "attr.disabled": "disabled || null", "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\n  <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n  <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button-outlined{width:100%;display:block;padding:.5rem 1rem;border-width:.125rem;border-style:solid;border-radius:.25rem;background-color:transparent;transition:background-color .5s ease-in-out;font-size:500}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisButtonOutlinedComponent, isStandalone: true, selector: "button[suisButtonOutlined]", host: { properties: { "attr.disabled": "disabled || null", "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n  <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button-outlined{width:100%;display:block;padding:.5rem 1rem;border-width:.125rem;border-style:solid;border-radius:.25rem;background-color:transparent;transition:background-color .5s ease-in-out;font-size:500}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisButtonOutlinedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'button[suisButtonOutlined]', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[attr.disabled]': 'disabled || null',
                         '[attr.tabindex]': 'disabled ? -1 : 0',
-                    }, template: "<ng-container *ngIf=\"!loading; else spinner\">\n  <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n  <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button-outlined{width:100%;display:block;padding:.5rem 1rem;border-width:.125rem;border-style:solid;border-radius:.25rem;background-color:transparent;transition:background-color .5s ease-in-out;font-size:500}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
+                    }, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n  <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button-outlined{width:100%;display:block;padding:.5rem 1rem;border-width:.125rem;border-style:solid;border-radius:.25rem;background-color:transparent;transition:background-color .5s ease-in-out;font-size:500}.suis-button-outlined:hover:not(:disabled){cursor:pointer}.suis-button-outlined:hover:disabled{cursor:not-allowed}.suis-button-outlined:focus,.suis-button-outlined:focus-within{outline:none}.suis-button-outlined--primary{border-color:#192a56;color:#192a56}.suis-button-outlined--primary:hover:not(:disabled){background-color:#192a56;color:#fff}.suis-button-outlined--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button-outlined--secondary{border-color:#273c75;color:#273c75}.suis-button-outlined--secondary:hover:not(:disabled){background-color:#273c75;color:#fff}.suis-button-outlined--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button-outlined--tertiary{border-color:#dcdde1;color:#dcdde1}.suis-button-outlined--tertiary:hover:not(:disabled){background-color:#dcdde1;color:#2f3640}.suis-button-outlined--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button-outlined--complementary{border-color:#f5f6fa;color:#f5f6fa}.suis-button-outlined--complementary:hover:not(:disabled){background-color:#f5f6fa;color:#2f3640}.suis-button-outlined--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button-outlined--success{border-color:#2ed573;color:#2ed573}.suis-button-outlined--success:hover:not(:disabled){background-color:#2ed573;color:#fff}.suis-button-outlined--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button-outlined--warning{border-color:#ffa502;color:#ffa502}.suis-button-outlined--warning:hover:not(:disabled){background-color:#ffa502;color:#fff}.suis-button-outlined--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button-outlined--danger{border-color:#ff4757;color:#ff4757}.suis-button-outlined--danger:hover:not(:disabled){background-color:#ff4757;color:#fff}.suis-button-outlined--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
         }] });
 class SuisAnchorButtonComponent extends SuisButtonBase {
     ngAfterViewInit() {
@@ -151,144 +302,28 @@ class SuisAnchorButtonComponent extends SuisButtonBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAnchorButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisAnchorButtonComponent, isStandalone: true, selector: "a[suisButton]", host: { listeners: { "click": "onClick()" }, properties: { "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\n  <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n  <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisAnchorButtonComponent, isStandalone: true, selector: "a[suisButton]", host: { listeners: { "click": "onClick()" }, properties: { "attr.tabindex": "disabled ? -1 : 0" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n  <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisAnchorButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'a[suisButton]', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[attr.tabindex]': 'disabled ? -1 : 0',
-                    }, template: "<ng-container *ngIf=\"!loading; else spinner\">\n  <ng-content></ng-content>\n</ng-container>\n<ng-template #spinner>\n  <!-- TODO: <suis-spinner></suis-spinner> -->\n</ng-template>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
+                    }, template: "<ng-container *ngIf=\"!loading; else spinner\">\r\n  <ng-content></ng-content>\r\n</ng-container>\r\n<ng-template #spinner>\r\n  <!-- TODO: <suis-spinner></suis-spinner> -->\r\n</ng-template>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-button{width:100%;display:block;padding:.5rem 1rem;border:none;border-radius:.25rem;transition:background-color .25s ease-in-out;font-size:500;text-decoration:none;text-align:center}.suis-button:hover:not(:disabled){cursor:pointer}.suis-button:hover:disabled{cursor:not-allowed}.suis-button:focus{outline:none}.suis-button--primary{background-color:#192a56;color:#fff}.suis-button--primary:hover:not(:disabled){background-color:#192a56d9}.suis-button--primary:focus:not(:disabled){box-shadow:0 2px 5px #192a56bf}.suis-button--secondary{background-color:#273c75;color:#fff}.suis-button--secondary:hover:not(:disabled){background-color:#273c75d9}.suis-button--secondary:focus:not(:disabled){box-shadow:0 2px 5px #273c75bf}.suis-button--tertiary{background-color:#dcdde1;color:#2f3640}.suis-button--tertiary:hover:not(:disabled){background-color:#dcdde1d9}.suis-button--tertiary:focus:not(:disabled){box-shadow:0 2px 5px #dcdde1bf}.suis-button--complementary{background-color:#f5f6fa;color:#2f3640}.suis-button--complementary:hover:not(:disabled){background-color:#f5f6fad9}.suis-button--complementary:focus:not(:disabled){box-shadow:0 2px 5px #f5f6fabf}.suis-button--success{background-color:#2ed573;color:#fff}.suis-button--success:hover:not(:disabled){background-color:#2ed573d9}.suis-button--success:focus:not(:disabled){box-shadow:0 2px 5px #2ed573bf}.suis-button--warning{background-color:#ffa502;color:#fff}.suis-button--warning:hover:not(:disabled){background-color:#ffa502d9}.suis-button--warning:focus:not(:disabled){box-shadow:0 2px 5px #ffa502bf}.suis-button--danger{background-color:#ff4757;color:#fff}.suis-button--danger:hover:not(:disabled){background-color:#ff4757d9}.suis-button--danger:focus:not(:disabled){box-shadow:0 2px 5px #ff4757bf}\n"] }]
         }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['click']
             }] } });
 
-var SuisIconType;
-(function (SuisIconType) {
-    SuisIconType["INFO"] = "info";
-    SuisIconType["WARNING"] = "warning";
-    SuisIconType["CHECK"] = "check";
-    SuisIconType["CROSS"] = "cross";
-    SuisIconType["PLUS"] = "plus";
-    SuisIconType["MINUS"] = "minus";
-    SuisIconType["ARROW_UP"] = "arrow-up";
-    SuisIconType["ARROW_LEFT"] = "arrow-left";
-    SuisIconType["ARROW_RIGHT"] = "arrow-right";
-    SuisIconType["ARROW_DOWN"] = "arrow-down";
-})(SuisIconType || (SuisIconType = {}));
-
-class SuisIconTypePipe {
-    transform(type) {
-        switch (type) {
-            case SuisIconType.INFO:
-                return '&quest;';
-            case SuisIconType.WARNING:
-                return '&excl;';
-            case SuisIconType.CHECK:
-                return '&check;';
-            case SuisIconType.CROSS:
-                return '&times;';
-            case SuisIconType.PLUS:
-                return '&plus;';
-            case SuisIconType.MINUS:
-                return '&minus;';
-            case SuisIconType.ARROW_LEFT:
-                return '&#8592;';
-            case SuisIconType.ARROW_UP:
-                return '&#8593;';
-            case SuisIconType.ARROW_RIGHT:
-                return '&#8594;';
-            case SuisIconType.ARROW_DOWN:
-                return '&#8595;';
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisIconTypePipe, isStandalone: true, name: "suisIconType" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconTypePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'suisIconType',
-                }]
-        }] });
-
-class SuisNgClassPipe {
-    transform(prefix, ...args) {
-        const classes = [];
-        args.forEach((arg) => classes.push(`${prefix}--${arg}`));
-        return classes;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, isStandalone: true, name: "suisNgClass" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNgClassPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    standalone: true,
-                    name: 'suisNgClass',
-                }]
-        }] });
-
-class SuisIconComponent {
-    constructor() {
-        /** @internal */
-        this.SuisIconType = SuisIconType;
-        /**
-         * Sets the font size of the HTML Entity itself. Type of SuisIconSize. By default set to 'md'.
-         */
-        this.size = 'md';
-        /**
-         * Sets the color pallette of the icon and surroundings. Type of SuisIconColor. By default set to 'dark'.
-         */
-        this.color = 'dark';
-        /**
-         * Sets the HTML Entity displayed in content. Type of SuisIconType. By default set to SuisIconType.INFO.
-         */
-        this.type = SuisIconType.INFO;
-        /**
-         * Shows the circled border around the icon. By default set to false. Can not be combined with filled (will be overriden then).
-         */
-        this.outlined = false;
-        /**
-         * Shows the circled background behind the icon. By default set to false. Overrides outlined behavior if used at the sime time.
-         */
-        this.filled = false;
-        /**
-         * Shows the pointer cursor when hovered. By defauly set to false.
-         */
-        this.pointer = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisIconComponent, isStandalone: true, selector: "suis-icon", inputs: { size: "size", color: "color", type: "type", outlined: "outlined", filled: "filled", pointer: "pointer" }, ngImport: i0, template: "<div\n  class=\"suis-icon\"\n  [class.suis-icon--outlined]=\"outlined\"\n  [class.suis-icon--filled]=\"filled\"\n  [class.suis-icon--pointer]=\"pointer\"\n  [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n  <span [innerHTML]=\"type | suisIconType\"></span>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--pointer{cursor:pointer}.suis-icon--sm{font-size:.5rem}.suis-icon--md{font-size:.75rem}.suis-icon--lg{font-size:1rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisIconTypePipe, name: "suisIconType" }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'suis-icon', standalone: true, imports: [CommonModule, SuisIconTypePipe, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-icon\"\n  [class.suis-icon--outlined]=\"outlined\"\n  [class.suis-icon--filled]=\"filled\"\n  [class.suis-icon--pointer]=\"pointer\"\n  [ngClass]=\"'suis-icon' | suisNgClass : color : size\"\n>\n  <span [innerHTML]=\"type | suisIconType\"></span>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-icon{display:flex;justify-content:center;align-items:center;width:1rem;height:1rem;border-radius:100%;line-height:1rem;background-color:transparent;border:none}.suis-icon--outlined{border-width:.0625rem;border-style:solid}.suis-icon--pointer{cursor:pointer}.suis-icon--sm{font-size:.5rem}.suis-icon--md{font-size:.75rem}.suis-icon--lg{font-size:1rem}.suis-icon--primary{color:#192a56;border-color:#192a56}.suis-icon--secondary{color:#273c75;border-color:#273c75}.suis-icon--tertiary{color:#dcdde1;border-color:#dcdde1}.suis-icon--complementary{color:#f5f6fa;border-color:#f5f6fa}.suis-icon--success{color:#2ed573;border-color:#2ed573}.suis-icon--warning{color:#ffa502;border-color:#ffa502}.suis-icon--danger{color:#ff4757;border-color:#ff4757}.suis-icon--white{color:#fff;border-color:#fff}.suis-icon--gray{color:#bcbcbc;border-color:#bcbcbc}.suis-icon--dark{color:#000;border-color:#000}.suis-icon--filled{border:none;background-color:#000;color:#fff}.suis-icon--filled.suis-icon--primary{background-color:#192a56}.suis-icon--filled.suis-icon--secondary{background-color:#273c75}.suis-icon--filled.suis-icon--tertiary{background-color:#dcdde1;color:#2f3640}.suis-icon--filled.suis-icon--complementary{background-color:#f5f6fa;color:#2f3640}.suis-icon--filled.suis-icon--success{background-color:#2ed573}.suis-icon--filled.suis-icon--warning{background-color:#ffa502}.suis-icon--filled.suis-icon--danger{background-color:#ff4757}.suis-icon--filled.suis-icon--white{background-color:#fff;color:#2f3640}.suis-icon--filled.suis-icon--gray{background-color:#bcbcbc}.suis-icon--filled.suis-icon--dark{background-color:#000}\n"] }]
-        }], propDecorators: { size: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], outlined: [{
-                type: Input
-            }], filled: [{
-                type: Input
-            }], pointer: [{
-                type: Input
-            }] } });
-
 class SuisChipComponent {
     constructor() {
         /** @internal */
         this.SuisIconType = SuisIconType;
         /**
-         * Sets the color pallette of the chip. Type of SuisChipColor. By default set to 'primary'.
+         * Sets the color pallette of the chip. Type of SuisColor. By default set to 'primary'.
          */
         this.color = 'primary';
         /**
-         * Sets the color of the cross icon. Visible only if removable set to true. Type of SuisIconColor. By default set to 'white'.
+         * Sets the color of the cross icon. Visible only if removable set to true. Type of SuisColor. By default set to 'white'.
          */
         this.iconColor = 'white';
         /**
@@ -305,11 +340,11 @@ class SuisChipComponent {
         this.remove.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisChipComponent, isStandalone: true, selector: "suis-chip", inputs: { color: "color", iconColor: "iconColor", removable: "removable" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n  <ng-content></ng-content>\n  <button\n    *ngIf=\"removable\"\n    class=\"suis-chip__remove\"\n    type=\"button\"\n    (click)=\"onRemove()\"\n  >\n    <suis-icon\n      [color]=\"iconColor\"\n      [type]=\"SuisIconType.CROSS\"\n      [pointer]=\"true\"\n      [size]=\"'lg'\"\n    ></suis-icon>\n  </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1;color:#2f3640}.suis-chip--complementary{background-color:#f5f6fa;color:#2f3640}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--white{background-color:#fff;color:#2f3640}.suis-chip--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisChipComponent, isStandalone: true, selector: "suis-chip", inputs: { color: "color", iconColor: "iconColor", removable: "removable" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n  <ng-content></ng-content>\n  <button\n    *ngIf=\"removable\"\n    class=\"suis-chip__remove\"\n    type=\"button\"\n    (click)=\"onRemove()\"\n  >\n    <suis-icon\n      [color]=\"iconColor\"\n      [type]=\"SuisIconType.CROSS\"\n      [pointer]=\"true\"\n      [size]=\"'md'\"\n    ></suis-icon>\n  </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1;color:#2f3640}.suis-chip--complementary{background-color:#f5f6fa;color:#2f3640}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--white{background-color:#fff;color:#2f3640}.suis-chip--dark{background-color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-chip', standalone: true, imports: [CommonModule, SuisIconComponent, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n  <ng-content></ng-content>\n  <button\n    *ngIf=\"removable\"\n    class=\"suis-chip__remove\"\n    type=\"button\"\n    (click)=\"onRemove()\"\n  >\n    <suis-icon\n      [color]=\"iconColor\"\n      [type]=\"SuisIconType.CROSS\"\n      [pointer]=\"true\"\n      [size]=\"'lg'\"\n    ></suis-icon>\n  </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1;color:#2f3640}.suis-chip--complementary{background-color:#f5f6fa;color:#2f3640}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--white{background-color:#fff;color:#2f3640}.suis-chip--dark{background-color:#000}\n"] }]
+            args: [{ selector: 'suis-chip', standalone: true, imports: [CommonModule, SuisIconComponent, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-chip\" [ngClass]=\"'suis-chip' | suisNgClass : color\">\n  <ng-content></ng-content>\n  <button\n    *ngIf=\"removable\"\n    class=\"suis-chip__remove\"\n    type=\"button\"\n    (click)=\"onRemove()\"\n  >\n    <suis-icon\n      [color]=\"iconColor\"\n      [type]=\"SuisIconType.CROSS\"\n      [pointer]=\"true\"\n      [size]=\"'md'\"\n    ></suis-icon>\n  </button>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-chip{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:1rem;font-size:.875rem;padding:.25rem .5rem;color:#fff}.suis-chip__remove{border:none;background-color:transparent}.suis-chip--primary{background-color:#192a56}.suis-chip--secondary{background-color:#273c75}.suis-chip--tertiary{background-color:#dcdde1;color:#2f3640}.suis-chip--complementary{background-color:#f5f6fa;color:#2f3640}.suis-chip--success{background-color:#2ed573}.suis-chip--warning{background-color:#ffa502}.suis-chip--danger{background-color:#ff4757}.suis-chip--gray{background-color:#bcbcbc}.suis-chip--white{background-color:#fff;color:#2f3640}.suis-chip--dark{background-color:#000}\n"] }]
         }], propDecorators: { color: [{
                 type: Input
             }], iconColor: [{
@@ -328,11 +363,11 @@ class SuisFormFieldComponent {
         this.spacing = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisFormFieldComponent, isStandalone: true, selector: "suis-form-field", inputs: { errorTemplate: "errorTemplate", spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-form-field\" [class.suis-form-field--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.25rem;font-size:.75rem}.suis-form-field--spacing{margin-bottom:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisFormFieldComponent, isStandalone: true, selector: "suis-form-field", inputs: { errorTemplate: "errorTemplate", spacing: "spacing" }, ngImport: i0, template: "<div class=\"suis-form-field\" [class.suis-form-field--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.25rem;font-size:.75rem}.suis-form-field--spacing{margin-bottom:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-form-field', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-form-field\" [class.suis-form-field--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.25rem;font-size:.75rem}.suis-form-field--spacing{margin-bottom:.75rem}\n"] }]
+            args: [{ selector: 'suis-form-field', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"suis-form-field\" [class.suis-form-field--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <div *ngIf=\"errorTemplate\" class=\"suis-form-field__error\">\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-form-field{width:100%}.suis-form-field__error{color:#ff4757;margin-top:.25rem;font-size:.75rem}.suis-form-field--spacing{margin-bottom:.75rem}\n"] }]
         }], propDecorators: { errorTemplate: [{
                 type: Input
             }], spacing: [{
@@ -380,7 +415,7 @@ class SuisInputTextComponent extends SuisInputBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisInputTextComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<input\n  class=\"suis-input\"\n  [class.suis-input--invalid]=\"invalid\"\n  [type]=\"type\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n  (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-input{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;width:100%}.suis-input:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<input\n  class=\"suis-input\"\n  [class.suis-input--invalid]=\"invalid\"\n  [type]=\"type\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n  (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;width:100%}.suis-input:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{box-shadow:0 2px 5px #ff4757bf}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisInputTextComponent, decorators: [{
             type: Component,
@@ -390,7 +425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SuisInputTextComponent),
                         },
-                    ], template: "<input\n  class=\"suis-input\"\n  [class.suis-input--invalid]=\"invalid\"\n  [type]=\"type\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n  (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-input{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;width:100%}.suis-input:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{box-shadow:0 2px 5px #ff4757bf}\n"] }]
+                    ], template: "<input\n  class=\"suis-input\"\n  [class.suis-input--invalid]=\"invalid\"\n  [type]=\"type\"\n  [value]=\"value\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly\"\n  (input)=\"onChange($event)\"\n  (focus)=\"onTouch()\"\n  (keydown.enter)=\"onEnter()\"\n/>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-input{background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;width:100%}.suis-input:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-input--invalid{box-shadow:0 2px 5px #ff4757bf}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], placeholder: [{
@@ -407,11 +442,11 @@ class SuisInputChipsComponent extends SuisInputBase {
          */
         this.placeholder = '';
         /**
-         * Sets the color pallette of the chips. Type of SuisChipColor. By default set to 'primary'.
+         * Sets the color pallette of the chips. Type of SuisColor. By default set to 'primary'.
          */
         this.chipColor = 'primary';
         /**
-         * Sets the color of the chips' cross icon. Type of SuisIconColor. By default set to 'white'.
+         * Sets the color of the chips' cross icon. Type of SuisColor. By default set to 'white'.
          */
         this.chipIconColor = 'white';
         /** @internal */
@@ -493,20 +528,78 @@ class SuisLabelComponent {
         this.spacing = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisLabelComponent, isStandalone: true, selector: "suis-label", inputs: { required: "required", spacing: "spacing" }, ngImport: i0, template: "<label class=\"suis-label\" [class.suis-label--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n  <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-label{font-size:.875rem;display:flex}.suis-label--spacing{margin-bottom:.25rem}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisLabelComponent, isStandalone: true, selector: "suis-label", inputs: { required: "required", spacing: "spacing" }, ngImport: i0, template: "<label class=\"suis-label\" [class.suis-label--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n  <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-label{font-size:.875rem;display:flex}.suis-label--spacing{margin-bottom:.25rem}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'suis-label', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"suis-label\" [class.suis-label--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n  <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}.suis-label{font-size:.875rem;display:flex}.suis-label--spacing{margin-bottom:.25rem}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"] }]
+            args: [{ selector: 'suis-label', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"suis-label\" [class.suis-label--spacing]=\"spacing\">\n  <ng-content></ng-content>\n  <span *ngIf=\"required\" class=\"suis-label__asterisk\">*</span>\n  <ng-content select=\"[suisLabelAside]\"></ng-content>\n</label>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-label{font-size:.875rem;display:flex}.suis-label--spacing{margin-bottom:.25rem}.suis-label__asterisk{color:#ff4757;margin-left:.0625rem}\n"] }]
         }], propDecorators: { required: [{
                 type: Input
             }], spacing: [{
                 type: Input
             }] } });
 
+class SuisSpinnerComponent {
+    constructor() {
+        /**
+         * Sets the size of the spinner. Type of SuisSize. By default set to 'sm'.
+         */
+        this.size = 'sm';
+        /**
+         * Sets the color of the spinner. Type of SuisColor. By default set to 'primary'.
+         */
+        this.color = 'primary';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSpinnerComponent, isStandalone: true, selector: "suis-spinner", inputs: { size: "size", color: "color" }, ngImport: i0, template: "<div\n  class=\"suis-spinner\"\n  [ngClass]=\"'suis-spinner' | suisNgClass : size : color\"\n></div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner{animation:spin .5s infinite linear;border-style:solid;border-radius:50%;border-left-color:transparent!important}.suis-spinner--primary{border-color:#192a56}.suis-spinner--secondary{border-color:#273c75}.suis-spinner--tertiary{border-color:#dcdde1}.suis-spinner--complementary{border-color:#f5f6fa}.suis-spinner--success{border-color:#2ed573}.suis-spinner--warning{border-color:#ffa502}.suis-spinner--danger{border-color:#ff4757}.suis-spinner--dark{border-color:#000}.suis-spinner--gray{border-color:#bcbcbc}.suis-spinner--white{border-color:#fff}.suis-spinner--xs{width:1rem;height:1rem;border-width:.1875rem}.suis-spinner--sm{width:1.5rem;height:1.5rem;border-width:.25rem}.suis-spinner--md{width:2rem;height:2rem;border-width:.375rem}.suis-spinner--lg{width:3rem;height:3rem;border-width:.5rem}.suis-spinner--xl{width:4rem;height:4rem;border-width:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-spinner', standalone: true, imports: [CommonModule, SuisNgClassPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-spinner\"\n  [ngClass]=\"'suis-spinner' | suisNgClass : size : color\"\n></div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner{animation:spin .5s infinite linear;border-style:solid;border-radius:50%;border-left-color:transparent!important}.suis-spinner--primary{border-color:#192a56}.suis-spinner--secondary{border-color:#273c75}.suis-spinner--tertiary{border-color:#dcdde1}.suis-spinner--complementary{border-color:#f5f6fa}.suis-spinner--success{border-color:#2ed573}.suis-spinner--warning{border-color:#ffa502}.suis-spinner--danger{border-color:#ff4757}.suis-spinner--dark{border-color:#000}.suis-spinner--gray{border-color:#bcbcbc}.suis-spinner--white{border-color:#fff}.suis-spinner--xs{width:1rem;height:1rem;border-width:.1875rem}.suis-spinner--sm{width:1.5rem;height:1.5rem;border-width:.25rem}.suis-spinner--md{width:2rem;height:2rem;border-width:.375rem}.suis-spinner--lg{width:3rem;height:3rem;border-width:.5rem}.suis-spinner--xl{width:4rem;height:4rem;border-width:.625rem}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class SuisSpinnerContainerComponent {
+    constructor() {
+        /**
+         * Sets the size of the spinner. Type of SuisSize. By default set to 'sm'.
+         */
+        this.size = 'sm';
+        /**
+         * Sets the color of the spinner. Type of SuisColor. By default set to 'primary'.
+         */
+        this.color = 'primary';
+        /**
+         * Adds blur effect to the container background. By default set to false.
+         */
+        this.blur = false;
+        /**
+         * Position absolute to the parent element (must have relative position). By default set to false.
+         */
+        this.absolute = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSpinnerContainerComponent, isStandalone: true, selector: "suis-spinner-container", inputs: { size: "size", color: "color", blur: "blur", absolute: "absolute" }, ngImport: i0, template: "<div\n  class=\"suis-spinner-container\"\n  [class.suis-spinner-container--blur]=\"blur\"\n  [class.suis-spinner-container--absolute]=\"absolute\"\n>\n  <suis-spinner [size]=\"size\" [color]=\"color\"></suis-spinner>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.suis-spinner-container--blur{background-color:#ffffff20;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}.suis-spinner-container--absolute{position:absolute;inset:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SuisSpinnerComponent, selector: "suis-spinner", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSpinnerContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-spinner-container', standalone: true, imports: [CommonModule, SuisSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"suis-spinner-container\"\n  [class.suis-spinner-container--blur]=\"blur\"\n  [class.suis-spinner-container--absolute]=\"absolute\"\n>\n  <suis-spinner [size]=\"size\" [color]=\"color\"></suis-spinner>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-spinner-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.suis-spinner-container--blur{background-color:#ffffff20;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem)}.suis-spinner-container--absolute{position:absolute;inset:0}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], blur: [{
+                type: Input
+            }], absolute: [{
+                type: Input
+            }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SuisAnchorButtonComponent, SuisBoxComponent, SuisButtonComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputTextComponent, SuisLabelComponent, SuisNgClassPipe };
+export { SuisAlertComponent, SuisAnchorButtonComponent, SuisBoxComponent, SuisButtonComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputTextComponent, SuisLabelComponent, SuisNgClassPipe, SuisSpinnerComponent, SuisSpinnerContainerComponent };
 //# sourceMappingURL=suis.mjs.map