matcha-components 20.54.0 → 20.57.0

package/fesm2022/matcha-components.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, HostBinding, Input, Component, ContentChildren, ElementRef, Renderer2, Inject, PLATFORM_ID, Injectable, ViewChild, ContentChild, HostListener, Directive, forwardRef, ChangeDetectionStrategy, InjectionToken, inject, TemplateRef, Optional, ViewEncapsulation, NgModule, createComponent, Pipe } from '@angular/core';
+import { EventEmitter, Output, HostBinding, Input, Component, ContentChildren, ElementRef, Renderer2, Inject, ViewEncapsulation, ChangeDetectionStrategy, HostListener, ContentChild, Directive, forwardRef, InjectionToken, inject, Injectable, ViewChild, TemplateRef, Optional, NgModule, createComponent, PLATFORM_ID, Pipe } from '@angular/core';
 import { animation, style, animate, trigger, transition, useAnimation, state, query, stagger, animateChild, sequence, group } from '@angular/animations';
-import { Subscription, Subject, BehaviorSubject, of, fromEvent } from 'rxjs';
-import { debounceTime, startWith, map, distinctUntilChanged, takeUntil, filter } from 'rxjs/operators';
+import { Subscription, Subject, BehaviorSubject, fromEvent, of } from 'rxjs';
+import { debounceTime, takeUntil, filter, startWith, map, distinctUntilChanged } from 'rxjs/operators';
 import * as i1 from '@angular/common';
-import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
+import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormControlName, NG_VALUE_ACCESSOR, NgControl, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/common/http';
@@ -410,10 +410,10 @@ class MatchaAccordionItemComponent {
         // Emite evento para o accordion pai controlar o estado
         this.toggleRequested.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaAccordionItemComponent, isStandalone: false, selector: "matcha-accordion-item", inputs: { stretch: "stretch", clickableHeader: "clickableHeader", isOpen: "isOpen" }, outputs: { opened: "opened", toggleRequested: "toggleRequested" }, host: { properties: { "class.stretch": "this.stretchClass", "class.is-open": "this.isOpenClass" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\"\n             [class.cursor-pointer]=\"clickableHeader\"\n             (click)=\"clickableHeader ? toggleAccordion() : null\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], animations: [...createAnimations] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAccordionItemComponent, isStandalone: false, selector: "matcha-accordion-item", inputs: { stretch: "stretch", clickableHeader: "clickableHeader", isOpen: "isOpen" }, outputs: { opened: "opened", toggleRequested: "toggleRequested" }, host: { properties: { "class.stretch": "this.stretchClass", "class.is-open": "this.isOpenClass" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\"\n             [class.cursor-pointer]=\"clickableHeader\"\n             (click)=\"clickableHeader ? toggleAccordion() : null\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], animations: [...createAnimations] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-accordion-item', standalone: false, animations: [...createAnimations], template: "<div class=\"accordion-item flex-column overflow-hidden\">\n    <div class=\"accordion-header d-flex\">\n        <div class=\"d-flex accordion-header-wrapper\"\n             [class.cursor-pointer]=\"clickableHeader\"\n             (click)=\"clickableHeader ? toggleAccordion() : null\">\n            <ng-content select=\"matcha-accordion-header\"></ng-content>\n        </div>\n    </div>\n    <div class=\"accordion-content overflow-hidden\" [@expandCollapse]=\"isOpen ? '*' : 'void'\">\n        <ng-content select=\"matcha-accordion-content\"></ng-content>\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
         }], propDecorators: { stretch: [{
@@ -484,10 +484,10 @@ class MatchaAccordionComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaAccordionComponent, isStandalone: false, selector: "matcha-accordion", inputs: { multiple: "multiple" }, outputs: { openedChange: "openedChange" }, queries: [{ propertyName: "items", predicate: MatchaAccordionItemComponent, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAccordionComponent, isStandalone: false, selector: "matcha-accordion", inputs: { multiple: "multiple" }, outputs: { openedChange: "openedChange" }, queries: [{ propertyName: "items", predicate: MatchaAccordionItemComponent, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-accordion', standalone: false, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { multiple: [{
@@ -501,19 +501,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class MatchaAccordionHeaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAccordionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaAccordionHeaderComponent, isStandalone: false, selector: "matcha-accordion-header", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAccordionHeaderComponent, isStandalone: false, selector: "matcha-accordion-header", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAccordionHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-accordion-header', standalone: false, template: "<ng-content></ng-content>\n" }]
         }] });
 
 class MatchaAccordionContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAccordionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaAccordionContentComponent, isStandalone: false, selector: "matcha-accordion-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAccordionContentComponent, isStandalone: false, selector: "matcha-accordion-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAccordionContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-accordion-content', standalone: false, template: "<ng-content></ng-content>\n" }]
         }] });
@@ -552,10 +552,10 @@ class MatchaInfiniteScrollComponent {
     ngOnDestroy() {
         this.observer.disconnect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInfiniteScrollComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaInfiniteScrollComponent, isStandalone: false, selector: "matcha-infinite-scroll", outputs: { scrolledToEnd: "scrolledToEnd" }, ngImport: i0, template: "", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInfiniteScrollComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaInfiniteScrollComponent, isStandalone: false, selector: "matcha-infinite-scroll", outputs: { scrolledToEnd: "scrolledToEnd" }, ngImport: i0, template: "", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInfiniteScrollComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInfiniteScrollComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-infinite-scroll', standalone: false, template: "" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { scrolledToEnd: [{
@@ -673,10 +673,10 @@ class MatchaInfiniteScrollDataComponent {
         this.dataSubscription.unsubscribe();
         this.searchSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInfiniteScrollDataComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaInfiniteScrollDataComponent, isStandalone: false, selector: "matcha-infinite-scroll-data", inputs: { loadData: "loadData", initialList: "initialList", threshold: "threshold", resetKey: "resetKey", searchTerm: "searchTerm" }, outputs: { aggregatedData: "aggregatedData", exactMatch: "exactMatch" }, usesOnChanges: true, ngImport: i0, template: "", styles: ["", ":host{height:1px;opacity:0}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInfiniteScrollDataComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaInfiniteScrollDataComponent, isStandalone: false, selector: "matcha-infinite-scroll-data", inputs: { loadData: "loadData", initialList: "initialList", threshold: "threshold", resetKey: "resetKey", searchTerm: "searchTerm" }, outputs: { aggregatedData: "aggregatedData", exactMatch: "exactMatch" }, usesOnChanges: true, ngImport: i0, template: "", styles: ["", ":host{height:1px;opacity:0}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInfiniteScrollDataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInfiniteScrollDataComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-infinite-scroll-data', standalone: false, template: "", styles: [":host{height:1px;opacity:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { loadData: [{
@@ -729,10 +729,10 @@ class MatchaLazyloadComponent {
     ngOnDestroy() {
         this.observer.disconnect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaLazyloadComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaLazyloadComponent, isStandalone: false, selector: "matcha-lazyload", outputs: { scrolledToEnd: "scrolledToEnd" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLazyloadComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaLazyloadComponent, isStandalone: false, selector: "matcha-lazyload", outputs: { scrolledToEnd: "scrolledToEnd" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaLazyloadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLazyloadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-lazyload', standalone: false, template: "<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { scrolledToEnd: [{
@@ -856,10 +856,10 @@ class MatchaLazyloadDataComponent {
         this.dataSubscription.unsubscribe();
         this.searchSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaLazyloadDataComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaLazyloadDataComponent, isStandalone: false, selector: "matcha-lazyload-data", inputs: { loadData: "loadData", initialList: "initialList", threshold: "threshold", rootMargin: "rootMargin", resetKey: "resetKey", searchTerm: "searchTerm" }, outputs: { aggregatedData: "aggregatedData", exactMatch: "exactMatch" }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["", ":host{height:1px;opacity:0}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLazyloadDataComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaLazyloadDataComponent, isStandalone: false, selector: "matcha-lazyload-data", inputs: { loadData: "loadData", initialList: "initialList", threshold: "threshold", rootMargin: "rootMargin", resetKey: "resetKey", searchTerm: "searchTerm" }, outputs: { aggregatedData: "aggregatedData", exactMatch: "exactMatch" }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["", ":host{height:1px;opacity:0}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaLazyloadDataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLazyloadDataComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-lazyload-data', standalone: false, template: "<ng-content></ng-content>\n", styles: [":host{height:1px;opacity:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { loadData: [{
@@ -905,6 +905,7 @@ class MatchaButtonComponent {
         this.sizeMd = null;
         this.sizeLg = null;
         this.sizeXl = null;
+        this.gap = null;
         this.color = 'basic';
         this._basic = false;
         this._outline = false;
@@ -919,6 +920,7 @@ class MatchaButtonComponent {
             sizeLg: 'large',
             sizeXl: 'huge',
             size: 'medium',
+            gap: null,
             basic: false,
             outline: false,
             pill: false,
@@ -929,6 +931,7 @@ class MatchaButtonComponent {
     ngOnInit() {
         this._renderer.addClass(this._elementRef.nativeElement, `matcha-button`);
         this.setConfig();
+        this.updateDividerStyles();
         // Adicione o evento de clique apenas a elementos com a classe "matcha-button"
         const buttons = document.querySelectorAll('.matcha-button');
         buttons.forEach(button => {
@@ -938,6 +941,7 @@ class MatchaButtonComponent {
     }
     ngOnChanges() {
         this.setConfig();
+        this.updateDividerStyles();
     }
     clearConfig() {
         //size
@@ -947,6 +951,11 @@ class MatchaButtonComponent {
         this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-md-${this._config.sizeMd}`);
         this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-lg-${this._config.sizeLg}`);
         this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-xl-${this._config.sizeXl}`);
+        //gap
+        if (this._config.gap) {
+            this._renderer.removeClass(this._elementRef.nativeElement, `px-${this._config.gap}`);
+            this._renderer.removeClass(this._elementRef.nativeElement, `gap-${this._config.gap}`);
+        }
         //basic
         this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-icon`);
         //outline
@@ -961,6 +970,7 @@ class MatchaButtonComponent {
     setConfig() {
         this.clearConfig();
         this.size ? this.setSize() : null;
+        this.gap ? this.setGap() : null;
         (this.outline === true || this.outline === 'true') ? this.setOutline() : null;
         (this.pill === true || this.pill === 'true') ? this.setPill() : null;
         (this.link === true || this.link === 'true') ? this.setLink() : null;
@@ -991,6 +1001,11 @@ class MatchaButtonComponent {
             this._config.sizeXl = this.sizeXl;
         }
     }
+    setGap() {
+        this._renderer.addClass(this._elementRef.nativeElement, `px-${this.gap}`);
+        this._renderer.addClass(this._elementRef.nativeElement, `gap-${this.gap}`);
+        this._config.gap = this.gap;
+    }
     setOutline() {
         this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-outline`);
     }
@@ -1007,6 +1022,24 @@ class MatchaButtonComponent {
     setIcon() {
         this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-icon`);
     }
+    updateDividerStyles() {
+        // Busca todos os matcha-divider dentro do botão
+        const dividers = this._elementRef.nativeElement.querySelectorAll('matcha-divider');
+        if (dividers && dividers.length > 0) {
+            dividers.forEach((divider) => {
+                // Busca as divs dentro do matcha-divider
+                const innerDivs = divider.querySelectorAll('div');
+                innerDivs.forEach((div) => {
+                    // Remove a classe border-color-disabled
+                    if (div.classList.contains('border-color-disabled')) {
+                        this._renderer.removeClass(div, 'border-color-disabled');
+                        // Adiciona a classe opacity-03
+                        this._renderer.addClass(div, 'opacity-03');
+                    }
+                });
+            });
+        }
+    }
     addRippleEffect(e) {
         var target = e.target;
         if (target.tagName.toLowerCase() !== 'button')
@@ -1033,10 +1066,10 @@ class MatchaButtonComponent {
             button.removeEventListener('click', this.addRippleEffect, false);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaButtonComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaButtonComponent, isStandalone: false, selector: "[matcha-button]", inputs: { size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"], color: "color", basic: "basic", outline: "outline", alpha: "alpha", pill: "pill", link: "link", icon: "icon" }, host: { properties: { "attr.color": "this.colorAttr" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaButtonComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaButtonComponent, isStandalone: false, selector: "[matcha-button]", inputs: { size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"], gap: "gap", color: "color", basic: "basic", outline: "outline", alpha: "alpha", pill: "pill", link: "link", icon: "icon" }, host: { properties: { "attr.color": "this.colorAttr" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: '[matcha-button]', standalone: false, template: "<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
@@ -1063,6 +1096,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }], sizeXl: [{
                 type: Input,
                 args: ['size-xl']
+            }], gap: [{
+                type: Input,
+                args: ['gap']
             }], color: [{
                 type: Input,
                 args: ['color']
@@ -1140,10 +1176,10 @@ class MatchaCardComponent {
     hasBlockquotePosition() {
         return this.blockquote === 'left' || this.blockquote === 'right';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaCardComponent, isStandalone: false, selector: "matcha-card", inputs: { color: "color", blockquote: "blockquote", blockquoteColor: "blockquoteColor", class: "class", alpha: "alpha", tint: "tint", loading: "loading" }, host: { properties: { "attr.color": "this.colorAttr", "attr.alpha": "this.alphaAttr", "attr.tint": "this.tintAttr", "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaCardComponent, isStandalone: false, selector: "matcha-card", inputs: { color: "color", blockquote: "blockquote", blockquoteColor: "blockquoteColor", class: "class", alpha: "alpha", tint: "tint", loading: "loading" }, host: { properties: { "attr.color": "this.colorAttr", "attr.alpha": "this.alphaAttr", "attr.tint": "this.tintAttr", "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-card', standalone: false, template: "<ng-content></ng-content>\n" }]
         }], propDecorators: { color: [{
@@ -1181,20 +1217,19 @@ class MatchaDividerComponent {
         this.gapMd = null;
         this.gapLg = null;
         this.gapXl = null;
-        this._vertical = false;
+        this._direction = 'horizontal';
     }
-    set vertical(value) {
-        /**
-         * Quando o atributo é utilizado sem valor, Angular o passa como string vazia (''),
-         * portanto consideramos como true.
-         */
-        this._vertical = value === '' || value === true || value === 'true';
+    set direction(value) {
+        this._direction = value;
+    }
+    get direction() {
+        return this._direction;
     }
-    get vertical() {
-        return this._vertical;
+    get directionAttr() {
+        return this.direction;
     }
     get classes() {
-        const hasVertical = this.vertical;
+        const hasVertical = this.direction === 'vertical';
         const directionPrefix = hasVertical ? 'mx' : 'my';
         const gap = this.gap ? `${directionPrefix}-${this.gap}` : '';
         const gapSm = this.gapSm ? `${directionPrefix}-sm-${this.gapSm}` : '';
@@ -1212,10 +1247,10 @@ class MatchaDividerComponent {
         activeClasses += gapXl ? ` ${gapXl}` : '';
         return activeClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaDividerComponent, isStandalone: false, selector: "matcha-divider", inputs: { gap: "gap", gapSm: ["gap-sm", "gapSm"], gapMd: ["gap-md", "gapMd"], gapLg: ["gap-lg", "gapLg"], gapXl: ["gap-xl", "gapXl"], vertical: "vertical" }, ngImport: i0, template: "<div [class]=\"classes\"></div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaDividerComponent, isStandalone: false, selector: "matcha-divider", inputs: { gap: "gap", gapSm: ["gap-sm", "gapSm"], gapMd: ["gap-md", "gapMd"], gapLg: ["gap-lg", "gapLg"], gapXl: ["gap-xl", "gapXl"], direction: "direction" }, host: { properties: { "attr.direction": "this.directionAttr" } }, ngImport: i0, template: "<div [class]=\"classes\"></div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDividerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-divider', standalone: false, template: "<div [class]=\"classes\"></div>\n" }]
         }], propDecorators: { gap: [{
@@ -1233,9 +1268,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }], gapXl: [{
                 type: Input,
                 args: ['gap-xl']
-            }], vertical: [{
+            }], direction: [{
                 type: Input,
-                args: ['vertical']
+                args: ['direction']
+            }], directionAttr: [{
+                type: HostBinding,
+                args: ['attr.direction']
             }] } });
 
 // matcha-title <matcha-title color="fg" size="1" loading="false" type="pill" icon="icon" (iconClick)="emitIconAction($event)"></matcha-title>
@@ -1243,9 +1281,9 @@ class MatchaTitleComponent {
     constructor() {
         this.color = null;
         this.size = 4;
-        this.loading = false;
-        this.type = 'pill';
-        this.icon = '';
+        this._loading = false;
+        this._type = 'pill';
+        this._icon = '';
         this.iconClick = new EventEmitter();
         this.sizeClasses = {
             1: 'fw-900 fs-12 lh-12',
@@ -1257,6 +1295,23 @@ class MatchaTitleComponent {
             7: 'fw-900 fs-40 lh-40',
         };
     }
+    get loading() { return this._loading; }
+    set loading(v) { this._loading = v === 'false' ? false : !!v; }
+    get loadingAttr() {
+        return this.loading ? 'true' : 'false';
+    }
+    get type() { return this._type; }
+    set type(v) {
+        this._type = v || 'pill';
+    }
+    get typeAttr() {
+        return this.type;
+    }
+    get icon() { return this._icon; }
+    set icon(v) { this._icon = v || ''; }
+    get iconAttr() {
+        return this.icon || null;
+    }
     getTypes() {
         const color = this.color ? `background-${this.color} ` : 'background-fg';
         const icon = this.icon ? `i-matcha-${this.icon}` : '';
@@ -1282,614 +1337,405 @@ class MatchaTitleComponent {
     hasIconClickOutput() {
         return this.iconClick.observers.length > 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaTitleComponent, isStandalone: false, selector: "matcha-title", inputs: { color: "color", size: "size", loading: "loading", type: "type", icon: "icon" }, outputs: { iconClick: "iconClick" }, ngImport: i0, template: "<!-- <matcha-title size=\"1\" type=\"bullet\"></matcha-title> -->\n\n<div class=\"d-flex flex-align-center m-0\">\n    <span [class]=\"signClasses\" [class.cursor-pointer]=\"hasIconClickOutput()\" (click)=\"emitIconAction()\"></span>\n    <span [class]=\"textClasses\">\n        <ng-content></ng-content>\n    </span>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaTitleComponent, isStandalone: false, selector: "matcha-title", inputs: { color: "color", size: "size", loading: "loading", type: "type", icon: "icon" }, outputs: { iconClick: "iconClick" }, host: { properties: { "attr.loading": "this.loadingAttr", "attr.type": "this.typeAttr", "attr.icon": "this.iconAttr" } }, ngImport: i0, template: "<!-- <matcha-title size=\"1\" type=\"bullet\"></matcha-title> -->\n\n<div class=\"d-flex flex-align-center m-0\">\n    <ng-container *ngIf=\"loading\">\n        <span [class]=\"signClasses\" [class.skeleton-animated-background]=\"loading\"></span>\n        <span [class]=\"textClasses\" [class.skeleton-animated-background]=\"loading\" class=\"d-flex px-60\">&nbsp;</span>\n    </ng-container>\n\n    <ng-container *ngIf=\"!loading\">\n        <span [class]=\"signClasses\" [class.cursor-pointer]=\"hasIconClickOutput()\" (click)=\"emitIconAction()\"></span>\n        <span [class]=\"textClasses\">\n            <ng-content></ng-content>\n        </span>\n    </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-title', standalone: false, template: "<!-- <matcha-title size=\"1\" type=\"bullet\"></matcha-title> -->\n\n<div class=\"d-flex flex-align-center m-0\">\n    <span [class]=\"signClasses\" [class.cursor-pointer]=\"hasIconClickOutput()\" (click)=\"emitIconAction()\"></span>\n    <span [class]=\"textClasses\">\n        <ng-content></ng-content>\n    </span>\n</div>\n" }]
+            args: [{ selector: 'matcha-title', standalone: false, template: "<!-- <matcha-title size=\"1\" type=\"bullet\"></matcha-title> -->\n\n<div class=\"d-flex flex-align-center m-0\">\n    <ng-container *ngIf=\"loading\">\n        <span [class]=\"signClasses\" [class.skeleton-animated-background]=\"loading\"></span>\n        <span [class]=\"textClasses\" [class.skeleton-animated-background]=\"loading\" class=\"d-flex px-60\">&nbsp;</span>\n    </ng-container>\n\n    <ng-container *ngIf=\"!loading\">\n        <span [class]=\"signClasses\" [class.cursor-pointer]=\"hasIconClickOutput()\" (click)=\"emitIconAction()\"></span>\n        <span [class]=\"textClasses\">\n            <ng-content></ng-content>\n        </span>\n    </ng-container>\n</div>\n" }]
         }], propDecorators: { color: [{
                 type: Input
             }], size: [{
                 type: Input
             }], loading: [{
                 type: Input
+            }], loadingAttr: [{
+                type: HostBinding,
+                args: ['attr.loading']
             }], type: [{
                 type: Input
+            }], typeAttr: [{
+                type: HostBinding,
+                args: ['attr.type']
             }], icon: [{
                 type: Input
+            }], iconAttr: [{
+                type: HostBinding,
+                args: ['attr.icon']
             }], iconClick: [{
                 type: Output
             }] } });
 
-/**
- * Serviço singleton para observação de breakpoints CSS
- * Funciona tanto no browser quanto no servidor (SSR)
- */
-class MatchaBreakpointObserver {
-    constructor(platformId) {
-        this.platformId = platformId;
-        this.breakpointSubject = new BehaviorSubject({
-            matches: false,
-            breakpoint: ''
-        });
-        this.currentBreakpoints = new Map();
-        this.isBrowser = isPlatformBrowser(this.platformId);
-        if (this.isBrowser) {
-            this.setupResizeListener();
+class MatchaDrawerComponent {
+    get mode() {
+        return this._mode;
+    }
+    set mode(value) {
+        if (this._mode !== value) {
+            this._mode = value;
+            this.modeChange.emit(value);
+            this._cdr.markForCheck();
         }
     }
+    get drawerWidth() {
+        // Garante que sempre retorne um valor válido
+        return this.width || '256px';
+    }
+    get opened() {
+        return this._opened;
+    }
+    set opened(value) {
+        this.toggle(value);
+    }
+    constructor(_elementRef, _cdr) {
+        this._elementRef = _elementRef;
+        this._cdr = _cdr;
+        // Propriedades principais
+        this.position = 'start';
+        // Mode com setter para detectar mudanças
+        this._mode = 'over';
+        this.disableClose = false;
+        this.autoFocus = true;
+        this.fixedInViewport = false;
+        this.fixedTopGap = 0;
+        this.fixedBottomGap = 0;
+        // Largura do drawer
+        this.width = '256px';
+        // Estado de aberto/fechado
+        this._opened = false;
+        // Eventos
+        this.openedChange = new EventEmitter();
+        this.openedStart = new EventEmitter();
+        this.closedStart = new EventEmitter();
+        this.modeChange = new EventEmitter();
+        // Subject para debounce de animações
+        this._animationSubject = new Subject();
+        this._animating = false;
+        this._setupAnimationDebounce();
+    }
+    ngOnInit() {
+        // Inicialização se necessário
+    }
     ngOnDestroy() {
-        if (this.resizeSubscription) {
-            this.resizeSubscription.unsubscribe();
-        }
+        this._animationSubject.complete();
+    }
+    _setupAnimationDebounce() {
+        this._animationSubject.pipe(debounceTime(50)).subscribe(() => {
+            this._animating = false;
+            this._cdr.markForCheck();
+        });
     }
     /**
-     * Observa um breakpoint específico
-     * @param breakpoint - String no formato CSS media query (ex: '(max-width: 768px)')
-     * @returns Observable<BreakpointState>
+     * Toggle o estado do drawer
      */
-    observe(breakpoint) {
-        if (!this.isBrowser) {
-            // No servidor, retorna um observable que emite false
-            return of({ matches: false, breakpoint });
-        }
-        // Emite o estado inicial
-        const initialState = this.getState(breakpoint);
-        return this.breakpointSubject.asObservable().pipe(startWith(initialState), map(() => this.getState(breakpoint)), distinctUntilChanged((prev, curr) => prev.matches === curr.matches && prev.breakpoint === curr.breakpoint));
+    toggle(isOpen = !this._opened) {
+        return new Promise((resolve) => {
+            if (this._opened === isOpen || this._animating) {
+                resolve();
+                return;
+            }
+            this._animating = true;
+            const wasOpened = this._opened;
+            this._opened = isOpen;
+            if (isOpen) {
+                this.openedStart.emit();
+            }
+            else {
+                this.closedStart.emit();
+            }
+            // Emite a mudança
+            this.openedChange.emit(this._opened);
+            this._cdr.markForCheck();
+            // Aguarda a animação
+            this._animationSubject.next(true);
+            setTimeout(() => {
+                if (this.autoFocus && isOpen) {
+                    this._elementRef.nativeElement.focus();
+                }
+                resolve();
+            }, 300);
+        });
     }
     /**
-     * Verifica se um breakpoint específico está ativo
-     * @param breakpoint - String no formato CSS media query
-     * @returns boolean
+     * Abre o drawer
      */
-    isMatched(breakpoint) {
-        if (!this.isBrowser) {
-            return false;
-        }
-        return this.checkBreakpoint(breakpoint);
+    open() {
+        return this.toggle(true);
     }
     /**
-     * Obtém o estado atual do breakpoint
-     * @param breakpoint - String no formato CSS media query
-     * @returns BreakpointState
+     * Fecha o drawer
      */
-    getState(breakpoint) {
-        return {
-            matches: this.isMatched(breakpoint),
-            breakpoint
-        };
+    close() {
+        return this.toggle(false);
     }
     /**
-     * Observa múltiplos breakpoints simultaneamente
-     * @param breakpoints - Array de strings de breakpoints
-     * @returns Observable<Map<string, boolean>>
+     * Getter para saber se está animando
      */
-    observeMultiple(breakpoints) {
-        if (!this.isBrowser) {
-            const emptyMap = new Map();
-            breakpoints.forEach(bp => emptyMap.set(bp, false));
-            return of(emptyMap);
-        }
-        return this.breakpointSubject.asObservable().pipe(startWith({ matches: false, breakpoint: '' }), map(() => {
-            const result = new Map();
-            breakpoints.forEach(bp => {
-                result.set(bp, this.checkBreakpoint(bp));
-            });
-            return result;
-        }), distinctUntilChanged((prev, curr) => {
-            if (prev.size !== curr.size)
-                return false;
-            for (const [key, value] of prev) {
-                if (curr.get(key) !== value)
-                    return false;
-            }
-            return true;
-        }));
+    get animating() {
+        return this._animating;
     }
-    setupResizeListener() {
-        if (!this.isBrowser)
-            return;
-        // Usa fromEvent para criar um observable do evento resize
-        this.resizeSubscription = fromEvent(window, 'resize')
-            .pipe(debounceTime(100) // Debounce para evitar muitas chamadas
-        )
+    /**
+     * Getter para a largura/altura do drawer
+     */
+    get visibility() {
+        return this.opened || this._animating ? 'visible' : 'hidden';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDrawerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaDrawerComponent, isStandalone: false, selector: "matcha-drawer", inputs: { position: "position", mode: "mode", disableClose: "disableClose", autoFocus: "autoFocus", fixedInViewport: "fixedInViewport", fixedTopGap: "fixedTopGap", fixedBottomGap: "fixedBottomGap", width: "width", opened: "opened" }, outputs: { openedChange: "openedChange", openedStart: "openedStart", closedStart: "closedStart", modeChange: "modeChange" }, host: { attributes: { "tabindex": "-1" }, properties: { "class.matcha-drawer-end": "position === \"end\"", "class.matcha-drawer-over": "mode === \"over\"", "class.matcha-drawer-push": "mode === \"push\"", "class.matcha-drawer-side": "mode === \"side\"", "class.matcha-drawer-opened": "opened", "style.width": "this.drawerWidth", "style.visibility": "this.visibility" }, classAttribute: "matcha-drawer" }, ngImport: i0, template: "<div class=\"matcha-drawer-inner-container\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'matcha-drawer', encapsulation: ViewEncapsulation.None, standalone: false, host: {
+                        'class': 'matcha-drawer',
+                        '[class.matcha-drawer-end]': 'position === "end"',
+                        '[class.matcha-drawer-over]': 'mode === "over"',
+                        '[class.matcha-drawer-push]': 'mode === "push"',
+                        '[class.matcha-drawer-side]': 'mode === "side"',
+                        '[class.matcha-drawer-opened]': 'opened',
+                        'tabindex': '-1',
+                    }, template: "<div class=\"matcha-drawer-inner-container\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { position: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], disableClose: [{
+                type: Input
+            }], autoFocus: [{
+                type: Input
+            }], fixedInViewport: [{
+                type: Input
+            }], fixedTopGap: [{
+                type: Input
+            }], fixedBottomGap: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], drawerWidth: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], opened: [{
+                type: Input
+            }], openedChange: [{
+                type: Output
+            }], openedStart: [{
+                type: Output
+            }], closedStart: [{
+                type: Output
+            }], modeChange: [{
+                type: Output
+            }], visibility: [{
+                type: HostBinding,
+                args: ['style.visibility']
+            }] } });
+
+class MatchaDrawerContentComponent {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDrawerContentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaDrawerContentComponent, isStandalone: false, selector: "matcha-drawer-content", host: { classAttribute: "matcha-drawer-content" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDrawerContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'matcha-drawer-content',
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    standalone: false,
+                    host: {
+                        'class': 'matcha-drawer-content',
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+class MatchaDrawerContainerComponent {
+    get hasOpenDrawer() {
+        return this._drawers && this._drawers.some(drawer => drawer.opened);
+    }
+    constructor(_cdr) {
+        this._cdr = _cdr;
+        /** Backdrop override */
+        this._backdropOverride = null;
+        this._destroyed = new Subject();
+        this._doCheck = new Subject();
+        // Debounce para otimizar detecção de mudanças
+        this._doCheck.pipe(debounceTime(10), takeUntil(this._destroyed)).subscribe(() => {
+            this._validateDrawers();
+            this._updateContentMargins();
+        });
+    }
+    ngAfterContentInit() {
+        // Escuta mudanças nos drawers
+        this._drawers.changes
+            .pipe(takeUntil(this._destroyed))
             .subscribe(() => {
-            // Limpa o cache de breakpoints
-            this.currentBreakpoints.clear();
-            // Emite um novo evento para forçar reavaliação
-            this.breakpointSubject.next({
-                matches: false,
-                breakpoint: ''
+            this._validateDrawers();
+            this._updateContentMargins();
+            this._subscribeToDrawerChanges();
+        });
+        // Inscreve nos eventos dos drawers
+        this._subscribeToDrawerChanges();
+        this._updateContentMargins();
+    }
+    /**
+     * Inscreve nos eventos de cada drawer
+     */
+    _subscribeToDrawerChanges() {
+        this._drawers.forEach(drawer => {
+            // Escuta mudanças no estado opened
+            drawer.openedChange
+                .pipe(takeUntil(this._destroyed))
+                .subscribe(() => {
+                this._updateContentMargins();
+                this._cdr.markForCheck();
+            });
+            // Escuta mudanças no modo do drawer
+            drawer.modeChange
+                .pipe(takeUntil(this._destroyed))
+                .subscribe(() => {
+                this._updateContentMargins();
+                this._cdr.markForCheck();
             });
         });
     }
-    checkBreakpoint(breakpoint) {
-        if (!this.isBrowser)
-            return false;
-        // Verifica cache primeiro
-        if (this.currentBreakpoints.has(breakpoint)) {
-            return this.currentBreakpoints.get(breakpoint);
-        }
-        try {
-            // Remove parênteses se existirem
-            const cleanBreakpoint = breakpoint.replace(/[()]/g, '');
-            // Extrai o valor numérico e a condição
-            const match = cleanBreakpoint.match(/(max-width|min-width|max-height|min-height):\s*(\d+)px/);
-            if (!match) {
-                console.warn(`Breakpoint inválido: ${breakpoint}`);
-                this.currentBreakpoints.set(breakpoint, false);
-                return false;
-            }
-            const [, condition, value] = match;
-            const numericValue = parseInt(value, 10);
-            const windowWidth = window.innerWidth;
-            const windowHeight = window.innerHeight;
-            let result = false;
-            switch (condition) {
-                case 'max-width':
-                    result = windowWidth <= numericValue;
-                    break;
-                case 'min-width':
-                    result = windowWidth >= numericValue;
-                    break;
-                case 'max-height':
-                    result = windowHeight <= numericValue;
-                    break;
-                case 'min-height':
-                    result = windowHeight >= numericValue;
-                    break;
-                default:
-                    result = false;
-            }
-            // Armazena no cache
-            this.currentBreakpoints.set(breakpoint, result);
-            return result;
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+        this._doCheck.complete();
+    }
+    /**
+     * Fecha todos os drawers que não têm disableClose
+     */
+    onEscape() {
+        if (this._drawers) {
+            this._drawers.forEach(drawer => {
+                if (drawer.opened && !drawer.disableClose && drawer.mode === 'over') {
+                    drawer.close();
+                }
+            });
         }
-        catch (error) {
-            console.error('Erro ao verificar breakpoint:', error);
-            this.currentBreakpoints.set(breakpoint, false);
-            return false;
+    }
+    /**
+     * Valida que não há múltiplos drawers na mesma posição
+     */
+    _validateDrawers() {
+        // Implementação simplificada - apenas avisa no console
+        if (this._drawers && this._drawers.length > 2) {
+            console.warn('Matcha Drawer: Mais de 2 drawers detectados. Use no máximo 2 (start e end).');
         }
     }
     /**
-     * Método utilitário para criar breakpoints comuns
+     * Atualiza as margens do conteúdo baseado nos drawers abertos
      */
-    static createBreakpoint(width, condition = 'max') {
-        const prefix = condition === 'max' ? 'max-width' : 'min-width';
-        return `(${prefix}: ${width}px)`;
+    _updateContentMargins() {
+        if (!this._content || !this._drawers) {
+            return;
+        }
+        let left = 0;
+        let right = 0;
+        this._drawers.forEach(drawer => {
+            // Só aplica margem para side e push quando o drawer está aberto
+            if (drawer.opened && (drawer.mode === 'side' || drawer.mode === 'push')) {
+                const width = this._getDrawerWidth(drawer);
+                if (drawer.position === 'start') {
+                    left = width;
+                }
+                else {
+                    right = width;
+                }
+            }
+        });
+        // Aplica as margens no content
+        this._setContentMargins(left, right);
     }
     /**
-     * Breakpoints pré-definidos para facilitar o uso
+     * Obtém a largura do drawer de forma segura
      */
-    static { this.BREAKPOINTS = {
-        XS: '(max-width: 480px)',
-        SM: '(max-width: 768px)',
-        MD: '(max-width: 1024px)',
-        LG: '(max-width: 1200px)',
-        XL: '(max-width: 1440px)',
-        MOBILE: '(max-width: 768px)',
-        TABLET: '(min-width: 769px) and (max-width: 1024px)',
-        DESKTOP: '(min-width: 1025px)'
-    }; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaBreakpointObserver, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaBreakpointObserver, providedIn: 'root' // Singleton garantido pelo Angular
-     }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaBreakpointObserver, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root' // Singleton garantido pelo Angular
-                }]
-        }], ctorParameters: () => [{ type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }] });
-
-class MatchaDrawerComponent {
-    get drawerClasses() {
-        return `matcha-drawer matcha-drawer-${this.mode} matcha-drawer-${this.position} ${this.isOpen ? 'matcha-drawer-open' : 'matcha-drawer-closed'}`;
-    }
-    get drawerWidth() {
-        if (this.mode === 'overlay') {
-            // Modo overlay: sempre 0px para não empurrar o conteúdo
-            return '0px';
-        }
-        // Modo push: ocupa espaço apenas quando aberto
-        return this.isOpen ? this.width : '0px';
-    }
-    get drawerHeight() {
-        return '100vh';
-    }
-    constructor(elementRef, renderer, cdr, breakpointObserver) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.breakpointObserver = breakpointObserver;
-        this.isOpen = false;
-        this.mode = 'overlay';
-        this.position = 'left';
-        this.width = '300px';
-        this.hasBackdrop = true;
-        this.disableClose = false;
-        this.autoCloseOnMobile = true;
-        this.breakpoint = 1024;
-        this.elevation = 8;
-        this.hasFooter = false;
-        // Novas propriedades para responsividade inteligente
-        this.responsiveMode = true;
-        this.mobileMode = 'overlay';
-        this.desktopMode = 'push';
-        this.mobileBreakpoint = 768;
-        // 🎯 Nova propriedade para comportamento inteligente automático
-        this.autoResponsive = true;
-        this.isOpenChange = new EventEmitter();
-        this.drawerToggle = new EventEmitter();
-        this.drawerOpened = new EventEmitter();
-        this.drawerClosed = new EventEmitter();
-        this.isMobile = false;
-        this.bodyScrollLocked = false;
-        this.currentResponsiveMode = 'push';
-        // 🎯 Subject para controlar resize com debounce
-        this.resizeSubject = new Subject();
-        this.setupResizeObserver();
-        this.setupResizeDebounce();
-    }
-    ngOnInit() {
-        this.checkScreenSize();
-        this.setupBodyScrollLock();
-        // 🎯 Comportamento inteligente automático
-        if (this.autoResponsive) {
-            this.setupSmartInitialState();
-        }
-        if (this.responsiveMode) {
-            this.setupResponsiveMode();
-        }
-    }
-    ngOnDestroy() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-        if (this.breakpointSubscription) {
-            this.breakpointSubscription.unsubscribe();
-        }
-        // 🎯 Limpeza do Subject
-        this.resizeSubject.complete();
-        this.unlockBodyScroll();
-    }
-    setupResizeObserver() {
-        if (typeof ResizeObserver !== 'undefined') {
-            this.resizeObserver = new ResizeObserver(() => {
-                this.checkScreenSize();
-            });
-            if (this.elementRef.nativeElement.parentElement) {
-                this.resizeObserver.observe(this.elementRef.nativeElement.parentElement);
-            }
-        }
-    }
-    // 🎯 Configuração do debounce para resize
-    setupResizeDebounce() {
-        this.resizeSubject.pipe(debounceTime(150) // Aguarda 150ms de estabilidade
-        ).subscribe((isMobile) => {
-            this.updateDrawerStateOnResize();
-        });
-    }
-    checkScreenSize() {
-        const wasMobile = this.isMobile;
-        this.isMobile = window.innerWidth < this.breakpoint;
-        if (wasMobile !== this.isMobile) {
-            this.cdr.detectChanges();
-            if (!this.isMobile && this.autoCloseOnMobile && this.isOpen) {
-                this.close();
-            }
-        }
-    }
-    setupResponsiveMode() {
-        const breakpoint = `(max-width: ${this.mobileBreakpoint}px)`;
-        this.breakpointSubscription = this.breakpointObserver
-            .observe(breakpoint)
-            .subscribe((result) => {
-            this.isMobile = result.matches;
-            this.updateModeBasedOnScreen();
-            this.cdr.detectChanges();
-        });
-    }
-    updateModeBasedOnScreen() {
-        if (this.responsiveMode) {
-            const newMode = this.isMobile ? this.mobileMode : this.desktopMode;
-            if (newMode !== this.currentResponsiveMode) {
-                this.currentResponsiveMode = newMode;
-                // Apenas atualiza o modo se não foi definido manualmente
-                if (this.mode === this.mobileMode || this.mode === this.desktopMode) {
-                    this.mode = newMode;
-                }
-                // 🎯 Comportamento dinâmico inteligente durante resize
-                if (this.autoResponsive) {
-                    this.resizeSubject.next(this.isMobile);
-                }
-            }
-        }
-    }
-    // 🎯 Método para atualizar estado do drawer durante resize
-    updateDrawerStateOnResize() {
-        // Só aplica a lógica se mobile = overlay e desktop = push
-        if (this.mobileMode === 'overlay' && this.desktopMode === 'push') {
-            const shouldBeOpen = !this.isMobile; // Desktop aberto, Mobile fechado
-            if (this.isOpen !== shouldBeOpen) {
-                // 🎯 SOLUÇÃO OBSERVABLE: Mudança de estado com debounce
-                this.isOpen = shouldBeOpen;
-                this.isOpenChange.emit(this.isOpen);
-                // Configura o scroll lock se necessário
-                if (this.isOpen && this.mode === 'overlay') {
-                    this.lockBodyScroll();
-                }
-                else if (!this.isOpen) {
-                    this.unlockBodyScroll();
-                }
+    _getDrawerWidth(drawer) {
+        // Primeiro tenta usar a propriedade width do componente
+        if (drawer.width) {
+            const widthValue = parseInt(drawer.width, 10);
+            if (!isNaN(widthValue) && widthValue > 0) {
+                return widthValue;
             }
         }
-    }
-    // 🎯 Método para configurar estado inicial inteligente
-    setupSmartInitialState() {
-        // Verifica se está em mobile usando o breakpoint observer
-        const isMobile = this.breakpointObserver.isMatched(MatchaBreakpointObserver.BREAKPOINTS.MOBILE);
-        // Define o estado inicial baseado no dispositivo
-        // Mobile: fechado, Desktop: aberto
-        // Usa setTimeout para evitar o "piscar" visual
-        setTimeout(() => {
-            this.isOpen = !isMobile;
-            // Emite o evento para notificar o componente pai
-            this.isOpenChange.emit(this.isOpen);
-            // Configura o scroll lock se necessário
-            if (this.isOpen && this.mode === 'overlay') {
-                this.lockBodyScroll();
-            }
-            // Força a detecção de mudanças
-            this.cdr.detectChanges();
-        }, 0);
-    }
-    setupBodyScrollLock() {
-        if (this.mode === 'overlay' && this.isOpen) {
-            this.lockBodyScroll();
-        }
-    }
-    lockBodyScroll() {
-        if (!this.bodyScrollLocked) {
-            document.body.style.overflow = 'hidden';
-            this.bodyScrollLocked = true;
-        }
-    }
-    unlockBodyScroll() {
-        if (this.bodyScrollLocked) {
-            document.body.style.overflow = '';
-            this.bodyScrollLocked = false;
-        }
-    }
-    toggle() {
-        if (this.disableClose && this.isOpen) {
-            return;
-        }
-        this.isOpen = !this.isOpen;
-        this.isOpenChange.emit(this.isOpen);
-        this.drawerToggle.emit();
-        if (this.isOpen) {
-            this.drawerOpened.emit();
-            if (this.mode === 'overlay') {
-                this.lockBodyScroll();
-            }
+        const element = drawer._elementRef?.nativeElement;
+        if (!element) {
+            return 256; // Default 256px
         }
-        else {
-            this.drawerClosed.emit();
-            this.unlockBodyScroll();
+        // Tenta obter a largura do CSS primeiro (mais confiável)
+        const computedStyle = window.getComputedStyle(element);
+        const cssWidth = parseInt(computedStyle.width, 10);
+        // Se a largura computada é válida e não é absurda, usa ela
+        if (cssWidth && cssWidth > 0 && cssWidth < 1000) {
+            return cssWidth;
         }
-        if (this.isMobile && this.autoCloseOnMobile && this.isOpen) {
-            setTimeout(() => this.close(), 300);
+        // Fallback para offsetWidth, mas valida o valor
+        const offsetWidth = element.offsetWidth;
+        if (offsetWidth > 0 && offsetWidth < 1000) {
+            return offsetWidth;
         }
+        // Se tudo falhar, retorna o padrão
+        return 256;
     }
-    open() {
-        if (!this.isOpen && !this.disableClose) {
-            this.isOpen = true;
-            this.isOpenChange.emit(this.isOpen);
-            this.drawerToggle.emit();
-            this.drawerOpened.emit();
-            if (this.mode === 'overlay') {
-                this.lockBodyScroll();
+    /**
+     * Define as margens do conteúdo
+     */
+    _setContentMargins(left, right) {
+        if (this._content) {
+            const contentElement = this._content._elementRef?.nativeElement;
+            if (contentElement) {
+                // Valida os valores antes de aplicar
+                const validLeft = Math.max(0, Math.min(left, 600)); // Max 600px
+                const validRight = Math.max(0, Math.min(right, 600)); // Max 600px
+                contentElement.style.marginLeft = `${validLeft}px`;
+                contentElement.style.marginRight = `${validRight}px`;
             }
         }
     }
-    close() {
-        if (this.isOpen && !this.disableClose) {
-            this.isOpen = false;
-            this.isOpenChange.emit(this.isOpen);
-            this.drawerToggle.emit();
-            this.drawerClosed.emit();
-            this.unlockBodyScroll();
-        }
-    }
-    onBackdropClick() {
-        if (this.hasBackdrop && this.mode === 'overlay' && !this.disableClose) {
-            this.close();
-        }
-    }
-    onKeyDown(event) {
-        if (event.key === 'Escape' && this.isOpen && !this.disableClose) {
-            this.close();
-        }
-    }
-    getDrawerTransform() {
-        // Centralização em telas grandes
-        if (window.innerWidth >= 1920) {
-            return `translateX(calc(50vw - 960px))`;
-        }
-        return 'none';
-    }
-    get animationState() {
-        return this.isOpen ? 'open' : 'closed';
-    }
-    get isOverlayMode() {
-        return this.mode === 'overlay';
-    }
-    get isPushMode() {
-        return this.mode === 'push';
-    }
-    // Getter para o modo atual (considerando responsividade)
-    get currentMode() {
-        if (this.responsiveMode) {
-            return this.isMobile ? this.mobileMode : this.desktopMode;
-        }
-        return this.mode;
-    }
-    // Getter para saber se está em modo mobile
-    get isMobileView() {
-        return this.isMobile;
-    }
-    // Getter para saber se está em modo responsivo
-    get isResponsiveActive() {
-        return this.responsiveMode;
-    }
-    // 🎯 Getter para saber se o modo automático está ativo
-    get isAutoResponsiveActive() {
-        return this.autoResponsive;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDrawerComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: MatchaBreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaDrawerComponent, isStandalone: false, selector: "matcha-drawer", inputs: { isOpen: "isOpen", mode: "mode", position: "position", width: "width", hasBackdrop: "hasBackdrop", disableClose: "disableClose", autoCloseOnMobile: "autoCloseOnMobile", breakpoint: "breakpoint", elevation: "elevation", hasFooter: "hasFooter", responsiveMode: "responsiveMode", mobileMode: "mobileMode", desktopMode: "desktopMode", mobileBreakpoint: "mobileBreakpoint", autoResponsive: "autoResponsive" }, outputs: { isOpenChange: "isOpenChange", drawerToggle: "drawerToggle", drawerOpened: "drawerOpened", drawerClosed: "drawerClosed" }, host: { properties: { "class": "this.drawerClasses", "style.width": "this.drawerWidth", "style.height": "this.drawerHeight" } }, viewQueries: [{ propertyName: "drawerContent", first: true, predicate: ["drawerContent"], descendants: true }], ngImport: i0, template: "<!-- Backdrop para modo overlay -->\n<div *ngIf=\"isOverlayMode && isOpen && hasBackdrop\"\n     class=\"matcha-backdrop\"\n     [@fadeInOut]=\"isOpen ? '1' : '0'\"\n     (click)=\"onBackdropClick()\">\n</div>\n\n<!-- Drawer Container Principal -->\n<div *ngIf=\"(isOpen && mode === 'overlay') || mode === 'push'\"\n     class=\"matcha-drawer-container\"\n     [class.matcha-drawer-overlay-mode]=\"isOverlayMode\"\n     [class.matcha-drawer-push-mode]=\"isPushMode\"\n     [class.matcha-drawer-left]=\"position === 'left'\"\n     [class.matcha-drawer-right]=\"position === 'right'\"\n     [@slideInLeft]=\"animationState\"\n     [style.transform]=\"getDrawerTransform()\"\n     [style.width]=\"drawerWidth\"\n     [style.overflow]=\"isOpen ? 'visible' : 'hidden'\"\n     (keydown)=\"onKeyDown($event)\"\n     tabindex=\"0\">\n\n  <!-- Drawer Content -->\n  <div class=\"matcha-drawer-content\"\n       [style.min-width]=\"width\">\n\n    <!-- Header do drawer -->\n    <div class=\"matcha-drawer-header\">\n      <ng-content select=\"[drawer-header]\"></ng-content>\n\n    </div>\n\n    <!-- Conte\u00FAdo principal do drawer -->\n    <div class=\"matcha-drawer-main-content\">\n      <ng-content select=\"[drawer-content]\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer do drawer -->\n    <div *ngIf=\"hasFooter\" class=\"matcha-drawer-footer\">\n      <ng-content select=\"[drawer-footer]\"></ng-content>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: createAnimations }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDrawerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'matcha-drawer', animations: createAnimations, standalone: false, template: "<!-- Backdrop para modo overlay -->\n<div *ngIf=\"isOverlayMode && isOpen && hasBackdrop\"\n     class=\"matcha-backdrop\"\n     [@fadeInOut]=\"isOpen ? '1' : '0'\"\n     (click)=\"onBackdropClick()\">\n</div>\n\n<!-- Drawer Container Principal -->\n<div *ngIf=\"(isOpen && mode === 'overlay') || mode === 'push'\"\n     class=\"matcha-drawer-container\"\n     [class.matcha-drawer-overlay-mode]=\"isOverlayMode\"\n     [class.matcha-drawer-push-mode]=\"isPushMode\"\n     [class.matcha-drawer-left]=\"position === 'left'\"\n     [class.matcha-drawer-right]=\"position === 'right'\"\n     [@slideInLeft]=\"animationState\"\n     [style.transform]=\"getDrawerTransform()\"\n     [style.width]=\"drawerWidth\"\n     [style.overflow]=\"isOpen ? 'visible' : 'hidden'\"\n     (keydown)=\"onKeyDown($event)\"\n     tabindex=\"0\">\n\n  <!-- Drawer Content -->\n  <div class=\"matcha-drawer-content\"\n       [style.min-width]=\"width\">\n\n    <!-- Header do drawer -->\n    <div class=\"matcha-drawer-header\">\n      <ng-content select=\"[drawer-header]\"></ng-content>\n\n    </div>\n\n    <!-- Conte\u00FAdo principal do drawer -->\n    <div class=\"matcha-drawer-main-content\">\n      <ng-content select=\"[drawer-content]\"></ng-content>\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer do drawer -->\n    <div *ngIf=\"hasFooter\" class=\"matcha-drawer-footer\">\n      <ng-content select=\"[drawer-footer]\"></ng-content>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: MatchaBreakpointObserver }], propDecorators: { isOpen: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], hasBackdrop: [{
-                type: Input
-            }], disableClose: [{
-                type: Input
-            }], autoCloseOnMobile: [{
-                type: Input
-            }], breakpoint: [{
-                type: Input
-            }], elevation: [{
-                type: Input
-            }], hasFooter: [{
-                type: Input
-            }], responsiveMode: [{
-                type: Input
-            }], mobileMode: [{
-                type: Input
-            }], desktopMode: [{
-                type: Input
-            }], mobileBreakpoint: [{
-                type: Input
-            }], autoResponsive: [{
-                type: Input
-            }], isOpenChange: [{
-                type: Output
-            }], drawerToggle: [{
-                type: Output
-            }], drawerOpened: [{
-                type: Output
-            }], drawerClosed: [{
-                type: Output
-            }], drawerContent: [{
-                type: ViewChild,
-                args: ['drawerContent', { static: false }]
-            }], drawerClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], drawerWidth: [{
-                type: HostBinding,
-                args: ['style.width']
-            }], drawerHeight: [{
-                type: HostBinding,
-                args: ['style.height']
-            }] } });
-
-class MatchaDrawerContainerComponent {
-    constructor() {
-        this.hasBackdrop = true;
-        this.autoFocus = true;
-    }
-    ngOnInit() {
-        if (this.drawer) {
-            this.setupDrawerEvents();
+    /**
+     * Retorna se há um backdrop visível
+     */
+    get _hasBackdrop() {
+        if (this._backdropOverride !== null) {
+            return this._backdropOverride;
         }
+        return this._drawers && this._drawers.some(drawer => drawer.opened && drawer.mode === 'over');
     }
-    ngOnDestroy() {
-        // Cleanup se necessário
-    }
-    setupDrawerEvents() {
-        if (this.drawer) {
-            this.drawer.drawerOpened.subscribe(() => {
-                if (this.autoFocus) {
-                    setTimeout(() => {
-                        // Focus será gerenciado pelo próprio drawer component
-                    }, 100);
+    /**
+     * Fecha o drawer quando o backdrop é clicado
+     */
+    _onBackdropClick() {
+        if (this._drawers) {
+            this._drawers.forEach(drawer => {
+                if (drawer.opened && !drawer.disableClose && drawer.mode === 'over') {
+                    drawer.close();
                 }
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaDrawerContainerComponent, isStandalone: false, selector: "matcha-drawer-container", inputs: { hasBackdrop: "hasBackdrop", autoFocus: "autoFocus" }, queries: [{ propertyName: "drawer", first: true, predicate: MatchaDrawerComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-drawer-container-wrapper\">\n    <ng-content></ng-content>\n</div>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDrawerContainerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaDrawerContainerComponent, isStandalone: false, selector: "matcha-drawer-container", host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class.matcha-drawer-container-explicit-backdrop": "_backdropOverride", "class.matcha-drawer-container-has-open": "this.hasOpenDrawer" }, classAttribute: "matcha-drawer-container" }, queries: [{ propertyName: "_content", first: true, predicate: MatchaDrawerContentComponent, descendants: true }, { propertyName: "_drawers", predicate: MatchaDrawerComponent }], ngImport: i0, template: "<div class=\"matcha-drawer-backdrop\"\n     *ngIf=\"_hasBackdrop\"\n     (click)=\"_onBackdropClick()\">\n</div>\n\n<ng-content select=\"matcha-drawer\"></ng-content>\n\n<div class=\"matcha-drawer-content-container\">\n  <ng-content select=\"matcha-drawer-content\"></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDrawerContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDrawerContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-drawer-container', standalone: false, template: "<div class=\"matcha-drawer-container-wrapper\">\n    <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { hasBackdrop: [{
-                type: Input
-            }], autoFocus: [{
-                type: Input
-            }], drawer: [{
-                type: ContentChild,
+            args: [{ selector: 'matcha-drawer-container', encapsulation: ViewEncapsulation.None, standalone: false, host: {
+                        'class': 'matcha-drawer-container',
+                        '[class.matcha-drawer-container-explicit-backdrop]': '_backdropOverride',
+                    }, template: "<div class=\"matcha-drawer-backdrop\"\n     *ngIf=\"_hasBackdrop\"\n     (click)=\"_onBackdropClick()\">\n</div>\n\n<ng-content select=\"matcha-drawer\"></ng-content>\n\n<div class=\"matcha-drawer-content-container\">\n  <ng-content select=\"matcha-drawer-content\"></ng-content>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _drawers: [{
+                type: ContentChildren,
                 args: [MatchaDrawerComponent]
-            }] } });
-
-class MatchaDrawerContentComponent {
-    constructor() {
-        this.padding = '24px';
-        this.scrollable = true;
-        this.maxHeight = 'auto';
-    }
-    get contentClasses() {
-        return `matcha-drawer-content ${this.scrollable ? 'scrollable' : 'no-scroll'}`;
-    }
-    get maxHeightStyle() {
-        return this.maxHeight;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDrawerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaDrawerContentComponent, isStandalone: false, selector: "matcha-drawer-content", inputs: { padding: "padding", scrollable: "scrollable", maxHeight: "maxHeight" }, host: { properties: { "class": "this.contentClasses", "style.max-height": "this.maxHeightStyle" } }, ngImport: i0, template: `
-    <div class="matcha-drawer-content-wrapper">
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDrawerContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'matcha-drawer-content',
-                    template: `
-    <div class="matcha-drawer-content-wrapper">
-      <ng-content></ng-content>
-    </div>
-  `,
-                    standalone: false
-                }]
-        }], propDecorators: { padding: [{
-                type: Input
-            }], scrollable: [{
-                type: Input
-            }], maxHeight: [{
-                type: Input
-            }], contentClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], maxHeightStyle: [{
+            }], _content: [{
+                type: ContentChild,
+                args: [MatchaDrawerContentComponent]
+            }], hasOpenDrawer: [{
                 type: HostBinding,
-                args: ['style.max-height']
+                args: ['class.matcha-drawer-container-has-open']
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
             }] } });
 
 class MatchaIconComponent {
@@ -1908,10 +1754,10 @@ class MatchaIconComponent {
         const activeClasses = `${icon} ${color} ${size} ${loading} ${this.class}`;
         return activeClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaIconComponent, isStandalone: false, selector: "matcha-icon", inputs: { name: "name", size: "size", color: "color", class: "class", loading: "loading" }, ngImport: i0, template: "<span [class]=\"classes\">\n    <ng-content></ng-content>\n</span>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaIconComponent, isStandalone: false, selector: "matcha-icon", inputs: { name: "name", size: "size", color: "color", class: "class", loading: "loading" }, ngImport: i0, template: "<span [class]=\"classes\">\n    <ng-content></ng-content>\n</span>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-icon', standalone: false, template: "<span [class]=\"classes\">\n    <ng-content></ng-content>\n</span>\n" }]
         }], propDecorators: { name: [{
@@ -2008,10 +1854,10 @@ class MatchaGridComponent {
         this.setColspanClasses(this.colspan, this.breakpoint);
         this.setRowspanClasses(this.rowspan, this.breakpoint);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaGridComponent, isStandalone: false, selector: "matcha-grid", inputs: { breakpoint: "breakpoint", col: "col", gap: "gap", class: "class", span: "span", rowspan: "rowspan", colspan: "colspan", direction: "direction", loading: "loading" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaGridComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaGridComponent, isStandalone: false, selector: "matcha-grid", inputs: { breakpoint: "breakpoint", col: "col", gap: "gap", class: "class", span: "span", rowspan: "rowspan", colspan: "colspan", direction: "direction", loading: "loading" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-grid', standalone: false, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { breakpoint: [{
@@ -2071,10 +1917,10 @@ class MatchaMasonryComponent {
         activeClasses += gapXl ? ` ${gapXl}` : '';
         return activeClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaMasonryComponent, isStandalone: false, selector: "matcha-masonry", inputs: { colSize: ["col", "colSize"], smColSize: ["col-sm", "smColSize"], mdColSize: ["col-md", "mdColSize"], lgColSize: ["col-lg", "lgColSize"], xlColSize: ["col-xl", "xlColSize"], gap: "gap", gapSm: ["gap-sm", "gapSm"], gapMd: ["gap-md", "gapMd"], gapLg: ["gap-lg", "gapLg"], gapXl: ["gap-xl", "gapXl"] }, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaMasonryComponent, isStandalone: false, selector: "matcha-masonry", inputs: { colSize: ["col", "colSize"], smColSize: ["col-sm", "smColSize"], mdColSize: ["col-md", "mdColSize"], lgColSize: ["col-lg", "lgColSize"], xlColSize: ["col-xl", "xlColSize"], gap: "gap", gapSm: ["gap-sm", "gapSm"], gapMd: ["gap-md", "gapMd"], gapLg: ["gap-lg", "gapLg"], gapXl: ["gap-xl", "gapXl"] }, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMasonryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMasonryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-masonry', standalone: false, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { colSize: [{
@@ -2110,19 +1956,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class MatchaModalContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaModalContentComponent, isStandalone: false, selector: "matcha-modal-content", ngImport: i0, template: "\n<div class=\"py-24 pt-0 overflow-auto\" style=\"max-height: calc(100vh - 300px);\n\">\n    <div class=\"matcha-card-flat matcha-background-transparent p-0 flex-column--force\">\n        <div class=\"flex-column matcha-card-flat matcha-background-transparent px-24 py-0\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaModalContentComponent, isStandalone: false, selector: "matcha-modal-content", ngImport: i0, template: "\n<div class=\"py-24 pt-0 overflow-auto\" style=\"max-height: calc(100vh - 300px);\n\">\n    <div class=\"matcha-card-flat matcha-background-transparent p-0 flex-column--force\">\n        <div class=\"flex-column matcha-card-flat matcha-background-transparent px-24 py-0\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-modal-content', standalone: false, template: "\n<div class=\"py-24 pt-0 overflow-auto\" style=\"max-height: calc(100vh - 300px);\n\">\n    <div class=\"matcha-card-flat matcha-background-transparent p-0 flex-column--force\">\n        <div class=\"flex-column matcha-card-flat matcha-background-transparent px-24 py-0\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n" }]
         }] });
 
 class MatchaModalHeaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaModalHeaderComponent, isStandalone: false, selector: "matcha-modal-header", ngImport: i0, template: "<!-- [@animate]=\"{ value: '*', params: { delay: '100ms' } }\" -->\n<!-- MATCHA CHECK -->\n<div class=\"matcha-section pt-16 px-16 pt-md-24 px-md-24\">\n    <div class=\"d-flex flex-wrap flex-space-between mb-16 mb-md-24\">\n        <div class=\"flex-space-between flex-align-center\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"flex-row flex-end gap-8\">\n            <ng-content select=\"matcha-modal-options\"></ng-content>\n        </div>\n    </div>\n    <matcha-divider></matcha-divider>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "vertical"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaModalHeaderComponent, isStandalone: false, selector: "matcha-modal-header", ngImport: i0, template: "<!-- [@animate]=\"{ value: '*', params: { delay: '100ms' } }\" -->\n<!-- MATCHA CHECK -->\n<div class=\"matcha-section pt-16 px-16 pt-md-24 px-md-24\">\n    <div class=\"d-flex flex-wrap flex-space-between mb-16 mb-md-24\">\n        <div class=\"flex-space-between flex-align-center\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"flex-row flex-end gap-8\">\n            <ng-content select=\"matcha-modal-options\"></ng-content>\n        </div>\n    </div>\n    <matcha-divider></matcha-divider>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "direction"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-modal-header', standalone: false, template: "<!-- [@animate]=\"{ value: '*', params: { delay: '100ms' } }\" -->\n<!-- MATCHA CHECK -->\n<div class=\"matcha-section pt-16 px-16 pt-md-24 px-md-24\">\n    <div class=\"d-flex flex-wrap flex-space-between mb-16 mb-md-24\">\n        <div class=\"flex-space-between flex-align-center\">\n            <ng-content></ng-content>\n        </div>\n        <div class=\"flex-row flex-end gap-8\">\n            <ng-content select=\"matcha-modal-options\"></ng-content>\n        </div>\n    </div>\n    <matcha-divider></matcha-divider>\n</div>\n" }]
         }] });
@@ -2148,10 +1994,10 @@ class MatchaModalFooterComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaModalFooterComponent, isStandalone: false, selector: "matcha-modal-footer", inputs: { buttonType: ["", "buttonType"] }, ngImport: i0, template: "<div class=\"matcha-section pb-16 px-16 pb-md-24 px-md-24\">\n    <matcha-divider></matcha-divider>\n    <div class=\"flex-column flex-sm-row w-100-p flex-space-between gap-16\">\n        <div class=\"flex-column flex-sm-row w-100-p flex-space-between mt-16 mt-md-24 gap-16\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "vertical"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaModalFooterComponent, isStandalone: false, selector: "matcha-modal-footer", inputs: { buttonType: ["", "buttonType"] }, ngImport: i0, template: "<div class=\"matcha-section pb-16 px-16 pb-md-24 px-md-24\">\n    <matcha-divider></matcha-divider>\n    <div class=\"flex-column flex-sm-row w-100-p flex-space-between gap-16\">\n        <div class=\"flex-column flex-sm-row w-100-p flex-space-between mt-16 mt-md-24 gap-16\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaDividerComponent, selector: "matcha-divider", inputs: ["gap", "gap-sm", "gap-md", "gap-lg", "gap-xl", "direction"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-modal-footer', standalone: false, template: "<div class=\"matcha-section pb-16 px-16 pb-md-24 px-md-24\">\n    <matcha-divider></matcha-divider>\n    <div class=\"flex-column flex-sm-row w-100-p flex-space-between gap-16\">\n        <div class=\"flex-column flex-sm-row w-100-p flex-space-between mt-16 mt-md-24 gap-16\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n</div>\n" }]
         }], propDecorators: { buttonType: [{
@@ -2160,10 +2006,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class MatchaModalOptionsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaModalOptionsComponent, isStandalone: false, selector: "matcha-modal-options", ngImport: i0, template: "<div class=\"flex-row gap-8\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaModalOptionsComponent, isStandalone: false, selector: "matcha-modal-options", ngImport: i0, template: "<div class=\"flex-row gap-8\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalOptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalOptionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-modal-options', standalone: false, template: "<div class=\"flex-row gap-8\">\n    <ng-content></ng-content>\n</div>\n" }]
         }] });
@@ -2202,10 +2048,10 @@ class MatchaModalComponent {
         this.hasBackdrop = true;
         this.backdropClass = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaModalComponent, isStandalone: false, selector: "matcha-modal", inputs: { size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"], class: "class", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass" }, host: { properties: { "attr.size": "this.sizeAttr", "attr.size-xs": "this.sizeAttrXs", "arrt.size-sm": "this.sizeAttrSm", "attr.size-md": "this.sizeAttrMd", "attr.size-lg": "this.sizeAttrLg", "attr.size-xl": "this.sizeAttrXl", "class": "this.classes" } }, ngImport: i0, template: "<div class=\"background-surface elevation-z-4 flex-column matcha-modal radius-8\">\n    <ng-content></ng-content>\n</div>", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaModalComponent, isStandalone: false, selector: "matcha-modal", inputs: { size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"], class: "class", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass" }, host: { properties: { "attr.size": "this.sizeAttr", "attr.size-xs": "this.sizeAttrXs", "arrt.size-sm": "this.sizeAttrSm", "attr.size-md": "this.sizeAttrMd", "attr.size-lg": "this.sizeAttrLg", "attr.size-xl": "this.sizeAttrXl", "class": "this.classes" } }, ngImport: i0, template: "<div class=\"background-surface elevation-z-4 flex-column matcha-modal radius-8\">\n    <ng-content></ng-content>\n</div>", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-modal', standalone: false, template: "<div class=\"background-surface elevation-z-4 flex-column matcha-modal radius-8\">\n    <ng-content></ng-content>\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { size: [{
@@ -2255,57 +2101,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 args: ['class']
             }] } });
 
-class MatchaMenuComponent {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        this.isParentMenu = false;
-        this.isOpen = false;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-menu');
-    }
-    handleOutsideClick(event) {
-        if (!this._elementRef.nativeElement.contains(event.target) && this.isOpen) {
-            this.closeMenu();
-        }
-    }
-    handleMouseLeave(event) {
-        if (!this.isParentMenu && this._elementRef.nativeElement.contains(event.relatedTarget)) {
-            return;
-        }
-        this.closeMenu();
-    }
-    openMenu() {
-        this.isOpen = true;
-    }
-    closeMenu() {
-        this.isOpen = false;
-    }
-    toggleMenu() {
-        this.isOpen = !this.isOpen;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMenuComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaMenuComponent, isStandalone: false, selector: "matcha-menu", inputs: { isParentMenu: "isParentMenu" }, host: { listeners: { "document:click": "handleOutsideClick($event)", "mouseleave": "handleMouseLeave($event)" } }, exportAs: ["matchaMenu"], ngImport: i0, template: "<div class=\"menu\" [ngClass]=\"{'show': isOpen}\">\n    <ng-content></ng-content>\n  </div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'matcha-menu', exportAs: 'matchaMenu', standalone: false, template: "<div class=\"menu\" [ngClass]=\"{'show': isOpen}\">\n    <ng-content></ng-content>\n  </div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }, { type: i0.Renderer2, decorators: [{
-                    type: Inject,
-                    args: [Renderer2]
-                }] }], propDecorators: { isParentMenu: [{
-                type: Input
-            }], handleOutsideClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }], handleMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave', ['$event']]
-            }] } });
-
 class MatchaToolbarComponent {
     constructor() {
         this.elevation = 1;
@@ -2330,12 +2125,12 @@ class MatchaToolbarComponent {
     ngOnDestroy() {
         clearTimeout(this.resizeTimeout);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaToolbarComponent, isStandalone: false, selector: "matcha-toolbar", inputs: { elevation: "elevation" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar>\n    <matcha-title type=\"icon\" icon=\"settings-out\" (iconClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-NO-ICONE-AQUI\">\n        {{'FINANCIAL.CATEGORY.TITLE' | translate}}\n    </matcha-title>\n    <search-form toolbar-form-field (searchText)=\"searchText($event)\"></search-form>\n    <matcha-toolbar-button icon=\"home-out\" (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-button>\n    <matcha-toolbar-content>\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-content>\n    <matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-main-button>\n    QUALQUER OUTRA FUNCIONALIDADE AQUI\n</matcha-toolbar>\n-->\n<ng-template #toolbarMainButton>\n    <ng-content select=\"matcha-toolbar-main-button\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarCustomButton>\n    <ng-content select=\"matcha-toolbar-custom-button\"></ng-content>\n</ng-template>\n<!-- CONTENT HEADER -->\n<div class=\"flex-column background-surface radius-8\" [ngClass]=\"elevationClass\">\n    <div class=\"flex-column flex-md-row flex-wrap p-16 flex-align-center flex-space-between h-auto min-h-72 flex-wrap\">\n        <div class=\"w-100-p--force w-md-auto--force flex-space-between flex-wrap\">\n            <div class=\"min-h-32 flex-center-center\">\n                <ng-content select=\"matcha-title\"></ng-content>\n            </div>\n            <ng-container *ngIf=\"isMobileScreen\">\n                <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n            </ng-container>\n        </div>\n        <div class=\"w-100-p--force w-md-auto--force flex-row flex-end gap-8\">\n            <!-- ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <ng-content select=\"search-form\"></ng-content>\n            <!-- /ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <div class=\"flex-row gap-8\">\n                <ng-content select=\"matcha-toolbar-button\"></ng-content>\n                <ng-content select=\"matcha-toolbar-content\"></ng-content>\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"!isMobileScreen\">\n                    <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n<!-- / CONTENT HEADER -->\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaToolbarComponent, isStandalone: false, selector: "matcha-toolbar", inputs: { elevation: "elevation" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar>\n    <matcha-title type=\"icon\" icon=\"settings-out\" (iconClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-NO-ICONE-AQUI\">\n        {{'FINANCIAL.CATEGORY.TITLE' | translate}}\n    </matcha-title>\n    <search-form toolbar-form-field (searchText)=\"searchText($event)\"></search-form>\n    <matcha-toolbar-button icon=\"home-out\" (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-button>\n    <matcha-toolbar-content>\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-content>\n    <matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-main-button>\n    QUALQUER OUTRA FUNCIONALIDADE AQUI\n</matcha-toolbar>\n-->\n<ng-template #toolbarMainButton>\n    <ng-content select=\"matcha-toolbar-main-button\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarCustomButton>\n    <ng-content select=\"matcha-toolbar-custom-button\"></ng-content>\n</ng-template>\n<!-- CONTENT HEADER -->\n<div class=\"flex-column background-surface radius-8\" [ngClass]=\"elevationClass\">\n    <div class=\"flex-column flex-md-row flex-wrap p-16 flex-align-center flex-space-between h-auto min-h-72 flex-wrap\">\n        <div class=\"w-100-p--force w-md-auto--force flex-space-between flex-wrap gap-8\">\n            <div class=\"min-h-32 flex-center-center\">\n                <ng-content select=\"matcha-title\"></ng-content>\n            </div>\n            <ng-container *ngIf=\"isMobileScreen\">\n                <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n            </ng-container>\n        </div>\n        <div class=\"w-100-p--force w-md-auto--force flex-row flex-end gap-8\">\n            <!-- ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <ng-content select=\"search-form\"></ng-content>\n            <!-- /ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <div class=\"flex-row gap-8\">\n                <ng-content select=\"matcha-toolbar-button\"></ng-content>\n                <ng-content select=\"matcha-toolbar-content\"></ng-content>\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"!isMobileScreen\">\n                    <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n<!-- / CONTENT HEADER -->\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-toolbar', standalone: false, template: "<!-- HOW TO USE:\n<matcha-toolbar>\n    <matcha-title type=\"icon\" icon=\"settings-out\" (iconClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-NO-ICONE-AQUI\">\n        {{'FINANCIAL.CATEGORY.TITLE' | translate}}\n    </matcha-title>\n    <search-form toolbar-form-field (searchText)=\"searchText($event)\"></search-form>\n    <matcha-toolbar-button icon=\"home-out\" (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-button>\n    <matcha-toolbar-content>\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-content>\n    <matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-main-button>\n    QUALQUER OUTRA FUNCIONALIDADE AQUI\n</matcha-toolbar>\n-->\n<ng-template #toolbarMainButton>\n    <ng-content select=\"matcha-toolbar-main-button\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarCustomButton>\n    <ng-content select=\"matcha-toolbar-custom-button\"></ng-content>\n</ng-template>\n<!-- CONTENT HEADER -->\n<div class=\"flex-column background-surface radius-8\" [ngClass]=\"elevationClass\">\n    <div class=\"flex-column flex-md-row flex-wrap p-16 flex-align-center flex-space-between h-auto min-h-72 flex-wrap\">\n        <div class=\"w-100-p--force w-md-auto--force flex-space-between flex-wrap\">\n            <div class=\"min-h-32 flex-center-center\">\n                <ng-content select=\"matcha-title\"></ng-content>\n            </div>\n            <ng-container *ngIf=\"isMobileScreen\">\n                <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n            </ng-container>\n        </div>\n        <div class=\"w-100-p--force w-md-auto--force flex-row flex-end gap-8\">\n            <!-- ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <ng-content select=\"search-form\"></ng-content>\n            <!-- /ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <div class=\"flex-row gap-8\">\n                <ng-content select=\"matcha-toolbar-button\"></ng-content>\n                <ng-content select=\"matcha-toolbar-content\"></ng-content>\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"!isMobileScreen\">\n                    <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n<!-- / CONTENT HEADER -->\n" }]
+            args: [{ selector: 'matcha-toolbar', standalone: false, template: "<!-- HOW TO USE:\n<matcha-toolbar>\n    <matcha-title type=\"icon\" icon=\"settings-out\" (iconClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-NO-ICONE-AQUI\">\n        {{'FINANCIAL.CATEGORY.TITLE' | translate}}\n    </matcha-title>\n    <search-form toolbar-form-field (searchText)=\"searchText($event)\"></search-form>\n    <matcha-toolbar-button icon=\"home-out\" (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-button>\n    <matcha-toolbar-content>\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-content>\n    <matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n        TEXTO DO BOT\u00C3O AQUI\n    </matcha-toolbar-main-button>\n    QUALQUER OUTRA FUNCIONALIDADE AQUI\n</matcha-toolbar>\n-->\n<ng-template #toolbarMainButton>\n    <ng-content select=\"matcha-toolbar-main-button\"></ng-content>\n</ng-template>\n\n<ng-template #toolbarCustomButton>\n    <ng-content select=\"matcha-toolbar-custom-button\"></ng-content>\n</ng-template>\n<!-- CONTENT HEADER -->\n<div class=\"flex-column background-surface radius-8\" [ngClass]=\"elevationClass\">\n    <div class=\"flex-column flex-md-row flex-wrap p-16 flex-align-center flex-space-between h-auto min-h-72 flex-wrap\">\n        <div class=\"w-100-p--force w-md-auto--force flex-space-between flex-wrap gap-8\">\n            <div class=\"min-h-32 flex-center-center\">\n                <ng-content select=\"matcha-title\"></ng-content>\n            </div>\n            <ng-container *ngIf=\"isMobileScreen\">\n                <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n            </ng-container>\n        </div>\n        <div class=\"w-100-p--force w-md-auto--force flex-row flex-end gap-8\">\n            <!-- ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <ng-content select=\"search-form\"></ng-content>\n            <!-- /ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->\n            <div class=\"flex-row gap-8\">\n                <ng-content select=\"matcha-toolbar-button\"></ng-content>\n                <ng-content select=\"matcha-toolbar-content\"></ng-content>\n                <ng-content></ng-content>\n                <ng-container *ngIf=\"!isMobileScreen\">\n                    <ng-container *ngTemplateOutlet=\"toolbarMainButton\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"toolbarCustomButton\"></ng-container>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n<!-- / CONTENT HEADER -->\n" }]
         }], propDecorators: { elevation: [{
                 type: Input
             }], onResize: [{
@@ -2355,12 +2150,12 @@ class MatchaToolbarButtonComponent {
     emitButtonClick() {
         this.buttonClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaToolbarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaToolbarButtonComponent, isStandalone: false, selector: "matcha-toolbar-button", inputs: { icon: "icon" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\" toolbar-button-tooltip=\"TOOLTIP-AQUI\">\n    TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-button>\n-->\n<button matcha-button outline=\"true\" size=\"small\" color=\"grey\" icon=\"true\" class=\"mt-16 mt-md-0\" (click)=\"emitButtonClick()\">\n    <span [class]=\"classes\"></span>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "color", "basic", "outline", "alpha", "pill", "link", "icon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaToolbarButtonComponent, isStandalone: false, selector: "matcha-toolbar-button", inputs: { icon: "icon" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\" toolbar-button-tooltip=\"TOOLTIP-AQUI\">\n    TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-button>\n-->\n<button matcha-button outline=\"true\" size=\"small\" color=\"grey\" icon=\"true\" class=\"\" (click)=\"emitButtonClick()\">\n    <span [class]=\"classes\"></span>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "gap", "color", "basic", "outline", "alpha", "pill", "link", "icon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaToolbarButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-toolbar-button', standalone: false, template: "<!-- HOW TO USE:\n<matcha-toolbar-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\" toolbar-button-tooltip=\"TOOLTIP-AQUI\">\n    TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-button>\n-->\n<button matcha-button outline=\"true\" size=\"small\" color=\"grey\" icon=\"true\" class=\"mt-16 mt-md-0\" (click)=\"emitButtonClick()\">\n    <span [class]=\"classes\"></span>\n</button>\n" }]
+            args: [{ selector: 'matcha-toolbar-button', standalone: false, template: "<!-- HOW TO USE:\n<matcha-toolbar-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\" toolbar-button-tooltip=\"TOOLTIP-AQUI\">\n    TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-button>\n-->\n<button matcha-button outline=\"true\" size=\"small\" color=\"grey\" icon=\"true\" class=\"\" (click)=\"emitButtonClick()\">\n    <span [class]=\"classes\"></span>\n</button>\n" }]
         }], propDecorators: { icon: [{
                 type: Input,
                 args: ['icon']
@@ -2369,12 +2164,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class MatchaToolbarContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaToolbarContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaToolbarContentComponent, isStandalone: false, selector: "matcha-toolbar-content", ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-content>\n    OUTROS CONTEUDOS CUSTOMIZADOS NA TOOLBAR\n</matcha-toolbar-content>\n-->\n<div class=\"d-flex flex-wrap gap-8 mt-16 mt-md-0\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaToolbarContentComponent, isStandalone: false, selector: "matcha-toolbar-content", ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-content>\n    OUTROS CONTEUDOS CUSTOMIZADOS NA TOOLBAR\n</matcha-toolbar-content>\n-->\n<div class=\"d-flex flex-wrap gap-8\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaToolbarContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-toolbar-content', standalone: false, template: "<!-- HOW TO USE:\n<matcha-toolbar-content>\n    OUTROS CONTEUDOS CUSTOMIZADOS NA TOOLBAR\n</matcha-toolbar-content>\n-->\n<div class=\"d-flex flex-wrap gap-8 mt-16 mt-md-0\">\n    <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: 'matcha-toolbar-content', standalone: false, template: "<!-- HOW TO USE:\n<matcha-toolbar-content>\n    OUTROS CONTEUDOS CUSTOMIZADOS NA TOOLBAR\n</matcha-toolbar-content>\n-->\n<div class=\"d-flex flex-wrap gap-8\">\n    <ng-content></ng-content>\n</div>\n" }]
         }] });
 
 class MatchaToolbarMainButtonComponent {
@@ -2384,10 +2179,10 @@ class MatchaToolbarMainButtonComponent {
     emitButtonClick() {
         this.buttonClick.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaToolbarMainButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaToolbarMainButtonComponent, isStandalone: false, selector: "matcha-toolbar-main-button", outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n    TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-main-button>\n-->\n<button matcha-button size=\"tiny\" size-md=\"small\" color=\"accent\" (click)=\"emitButtonClick()\">\n    <span class=\"i-matcha-action_plus i-size-sm ml--4\"></span>\n    <span class=\"ml-8 fs-14\">\n        <ng-content></ng-content>\n    </span>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "color", "basic", "outline", "alpha", "pill", "link", "icon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarMainButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaToolbarMainButtonComponent, isStandalone: false, selector: "matcha-toolbar-main-button", outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n    TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-main-button>\n-->\n<button matcha-button size=\"tiny\" size-md=\"small\" color=\"accent\" (click)=\"emitButtonClick()\">\n    <span class=\"i-matcha-action_plus i-size-sm ml--4\"></span>\n    <span class=\"ml-8 fs-14\">\n        <ng-content></ng-content>\n    </span>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "gap", "color", "basic", "outline", "alpha", "pill", "link", "icon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaToolbarMainButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarMainButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-toolbar-main-button', standalone: false, template: "<!-- HOW TO USE:\n<matcha-toolbar-main-button (buttonClick)=\"FUN\u00C7\u00C3O-AO-CLICAR-AQUI\">\n    TEXTO DO BOT\u00C3O AQUI\n</matcha-toolbar-main-button>\n-->\n<button matcha-button size=\"tiny\" size-md=\"small\" color=\"accent\" (click)=\"emitButtonClick()\">\n    <span class=\"i-matcha-action_plus i-size-sm ml--4\"></span>\n    <span class=\"ml-8 fs-14\">\n        <ng-content></ng-content>\n    </span>\n</button>\n" }]
         }], propDecorators: { buttonClick: [{
@@ -2395,16 +2190,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class MatchaToolbarCustomButtonComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaToolbarCustomButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaToolbarCustomButtonComponent, isStandalone: false, selector: "matcha-toolbar-custom-button", ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-custom-button>\n    Bot\u00E3o customizado aqui\n</matcha-toolbar-custom-button>\n-->\n<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarCustomButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaToolbarCustomButtonComponent, isStandalone: false, selector: "matcha-toolbar-custom-button", ngImport: i0, template: "<!-- HOW TO USE:\n<matcha-toolbar-custom-button>\n    Bot\u00E3o customizado aqui\n</matcha-toolbar-custom-button>\n-->\n<ng-content></ng-content>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaToolbarCustomButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarCustomButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-toolbar-custom-button', standalone: false, template: "<!-- HOW TO USE:\n<matcha-toolbar-custom-button>\n    Bot\u00E3o customizado aqui\n</matcha-toolbar-custom-button>\n-->\n<ng-content></ng-content>\n" }]
         }] });
 
 class MatchaFormFieldComponent {
-    constructor() {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
         this.color = 'grey';
         this.size = null;
         this.sizeXs = null;
@@ -2413,19 +2209,42 @@ class MatchaFormFieldComponent {
         this.sizeLg = null;
         this.sizeXl = null;
     }
+    ngAfterViewInit() {
+        this.generateDataCy();
+    }
+    generateDataCy() {
+        // Busca o matcha-label dentro do form-field
+        const labelElement = this.elementRef.nativeElement.querySelector('matcha-label');
+        const inputElement = this.elementRef.nativeElement.querySelector('input, textarea, select');
+        if (labelElement && inputElement) {
+            const labelText = labelElement.textContent?.trim();
+            if (labelText) {
+                const dataCyValue = this.convertToKebabCase(labelText);
+                inputElement.setAttribute('data-cy', `matcha-form-field-${dataCyValue}`);
+            }
+        }
+    }
+    convertToKebabCase(text) {
+        return text
+            .toLowerCase()
+            .replace(/\s+/g, '-') // Substitui espaços por hífens
+            .replace(/[^\w\-]/g, '') // Remove caracteres especiais
+            .replace(/\-\-+/g, '-') // Remove hífens duplos
+            .replace(/^-+|-+$/g, ''); // Remove hífens do início e fim
+    }
     get control() {
         return this.controlDir?.control;
     }
     get showError() {
         return !!this.control?.invalid && (this.control?.touched || this.control?.dirty);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, queries: [{ propertyName: "controlDir", first: true, predicate: FormControlName, descendants: true }], ngImport: i0, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"matcha-form-field-border-start bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"matcha-form-field-border-middle bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"matcha-form-field-border-end br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n</div>\n<ng-content select=\"matcha-hint-text\"></ng-content>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaFormFieldComponent, isStandalone: false, selector: "matcha-form-field", inputs: { color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, queries: [{ propertyName: "controlDir", first: true, predicate: FormControlName, descendants: true }], ngImport: i0, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"matcha-form-field-border-start bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"matcha-form-field-border-middle bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"matcha-form-field-border-end br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n</div>\n<ng-content select=\"matcha-hint-text\"></ng-content>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-form-field', standalone: false, template: "<div class=\"flex-column gap-4\">\n    <div class=\"matcha-form-field position-relative w-100-p min-h-40 flex-align-center\" #inputSelector>\n        <div class=\"flex-row position-absolute w-100-p min-h-40 h-100-p\">\n            <div class=\"matcha-form-field-border-start bl-2 bt-2 bb-2 radius-left-8 min-w-8 border-color-{{color}}\"></div>\n            <div class=\"matcha-form-field-border-middle bb-2 w-auto border-color-{{color}}\">\n                <ng-content select=\"matcha-label\"></ng-content>\n            </div>\n            <div class=\"matcha-form-field-border-end br-2 bt-2 bb-2 radius-right-8 w-100-p border-color-{{color}}\"></div>\n        </div>\n        <div class=\"flex-row position-relative py-8 px-12 gap-8 w-100-p\">\n            <ng-content></ng-content>\n        </div>\n    </div>\n    <ng-container *ngIf=\"showError\">\n        <ng-content select=\"matcha-error\"></ng-content>\n    </ng-container>\n    <ng-content select=\"matcha-autocomplete\"></ng-content>\n</div>\n<ng-content select=\"matcha-hint-text\"></ng-content>\n" }]
-        }], propDecorators: { color: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { color: [{
                 type: Input
             }], size: [{
                 type: Input,
@@ -2454,10 +2273,10 @@ class MatchaLabelComponent {
     constructor() {
         this.color = 'blue-grey';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaLabelComponent, isStandalone: false, selector: "matcha-label", inputs: { color: "color" }, ngImport: i0, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">*</span>\n    <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaLabelComponent, isStandalone: false, selector: "matcha-label", inputs: { color: "color" }, ngImport: i0, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">*</span>\n    <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-label', standalone: false, template: "<label\n    class=\"d-flex d-flex-align-center position-relative text-nowrap px-4 fs-12 lh-18 fw-700 color-{{color}}\"\n    style=\"transform: translateY(-8px);\">\n    <ng-content></ng-content>\n    <!-- <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">*</span>\n    <span class=\"pl-4 fs-10 fw-400 lh-16 matcha-color-placeholder\">(Opcional)</span> -->\n</label>" }]
         }], propDecorators: { color: [{
@@ -2465,10 +2284,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class MatchaErrorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaErrorComponent, isStandalone: false, selector: "matcha-error", ngImport: i0, template: "<p class=\"w-100-p color-red fs-12 lh-16 flex-row flex-align-center gap-4 m-0\">\n    <matcha-icon name=\"action_sign_warning-out\" size=\"sm\"></matcha-icon>\n    <ng-content></ng-content>\n</p>", styles: [""], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaErrorComponent, isStandalone: false, selector: "matcha-error", ngImport: i0, template: "<p class=\"w-100-p color-red fs-12 lh-16 flex-row flex-align-center gap-4 m-0\">\n    <matcha-icon name=\"action_sign_warning-out\" size=\"sm\"></matcha-icon>\n    <ng-content></ng-content>\n</p>", styles: [""], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaErrorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-error', standalone: false, template: "<p class=\"w-100-p color-red fs-12 lh-16 flex-row flex-align-center gap-4 m-0\">\n    <matcha-icon name=\"action_sign_warning-out\" size=\"sm\"></matcha-icon>\n    <ng-content></ng-content>\n</p>" }]
         }] });
@@ -2526,10 +2345,10 @@ class MatchaRippleDirective {
         });
         this.ripples = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaRippleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaRippleDirective, isStandalone: false, selector: "[matchaRipple]", inputs: { rippleColor: "rippleColor" }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRippleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaRippleDirective, isStandalone: false, selector: "[matchaRipple]", inputs: { rippleColor: "rippleColor" }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaRippleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRippleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaRipple]',
@@ -2594,8 +2413,8 @@ class MatchaCheckboxComponent {
         this.checkedChange.emit(eventData);
         this.change.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaCheckboxComponent, isStandalone: false, selector: "matcha-checkbox", inputs: { color: "color", indeterminate: "indeterminate", disabled: "disabled", checked: "checked" }, outputs: { checkedChange: "checkedChange", change: "change" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaCheckboxComponent, isStandalone: false, selector: "matcha-checkbox", inputs: { color: "color", indeterminate: "indeterminate", disabled: "disabled", checked: "checked" }, outputs: { checkedChange: "checkedChange", change: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaCheckboxComponent),
@@ -2603,7 +2422,7 @@ class MatchaCheckboxComponent {
             }
         ], ngImport: i0, template: "<label\n    class=\"matcha-checkbox flex-align-center\"\n    [class.matcha-checkbox-disabled]=\"disabled\">\n    <div\n        class=\"matcha-checkbox-container w-40 h-40 max-w-40 max-h-40 min-w-40 min-h-40 flex-center-center radius-full cursor-pointer\"\n        matchaRipple>\n        <input\n            type=\"checkbox\"\n            class=\"matcha-checkbox-input\"\n            [checked]=\"checked\"\n            [disabled]=\"disabled\"\n            [indeterminate]=\"indeterminate\"\n            (change)=\"onInputChange($event)\">\n    </div>\n\n    <span class=\"matcha-checkbox-label fw-500 fs-16 lh-20\">\n        <ng-content></ng-content>\n    </span>\n</label>", styles: [""], dependencies: [{ kind: "directive", type: MatchaRippleDirective, selector: "[matchaRipple]", inputs: ["rippleColor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-checkbox', standalone: false, providers: [
                         {
@@ -2681,8 +2500,8 @@ class MatchaRadioComponent {
         this.checkedChange.emit(eventData);
         this.change.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaRadioComponent, isStandalone: false, selector: "matcha-radio", inputs: { color: "color", value: "value", name: "name", disabled: "disabled", checked: "checked" }, outputs: { checkedChange: "checkedChange", change: "change" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaRadioComponent, isStandalone: false, selector: "matcha-radio", inputs: { color: "color", value: "value", name: "name", disabled: "disabled", checked: "checked" }, outputs: { checkedChange: "checkedChange", change: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaRadioComponent),
@@ -2690,7 +2509,7 @@ class MatchaRadioComponent {
             }
         ], ngImport: i0, template: "<label\n    class=\"matcha-radio flex-align-center\"\n    [class.matcha-radio-disabled]=\"disabled\">\n    <div\n        class=\"matcha-radio-container w-40 h-40 max-w-40 max-h-40 min-w-40 min-h-40 flex-center-center radius-full cursor-pointer\"\n        matchaRipple>\n        <input\n            type=\"radio\"\n            class=\"matcha-radio-input\"\n            [attr.name]=\"name\"\n            [value]=\"value\"\n            [checked]=\"checked\"\n            [disabled]=\"disabled\"\n            (change)=\"onInputChange($event)\">\n    </div>\n\n    <span class=\"matcha-radio-label fw-500 lh-20\">\n        <ng-content></ng-content>\n    </span>\n</label>", styles: [""], dependencies: [{ kind: "directive", type: MatchaRippleDirective, selector: "[matchaRipple]", inputs: ["rippleColor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-radio', standalone: false, providers: [
                         {
@@ -2762,10 +2581,10 @@ class MatchaSpinComponent {
         const progress = Math.min(Math.max(Number(this.progress), 0), 100);
         return this.circumference - (progress / 100) * this.circumference;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSpinComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaSpinComponent, isStandalone: false, selector: "matcha-spin", inputs: { progress: "progress", color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, ngImport: i0, template: "<div\n  class=\"matcha-spin\"\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-valuenow]=\"progress\"\n>\n  <svg [attr.viewBox]=\"'0 0 ' + diameter + ' ' + diameter\">\n    <circle\n      class=\"spin-placeholder\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n    />\n    <circle\n      class=\"spin-progress\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke]=\"color\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"progress ? dashOffset : null\"\n    />\n  </svg>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSpinComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaSpinComponent, isStandalone: false, selector: "matcha-spin", inputs: { progress: "progress", color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, ngImport: i0, template: "<div\n  class=\"matcha-spin\"\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-valuenow]=\"progress\"\n>\n  <svg [attr.viewBox]=\"'0 0 ' + diameter + ' ' + diameter\">\n    <circle\n      class=\"spin-placeholder\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n    />\n    <circle\n      class=\"spin-progress\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke]=\"color\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"progress ? dashOffset : null\"\n    />\n  </svg>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSpinComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSpinComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-spin', standalone: false, template: "<div\n  class=\"matcha-spin\"\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-valuenow]=\"progress\"\n>\n  <svg [attr.viewBox]=\"'0 0 ' + diameter + ' ' + diameter\">\n    <circle\n      class=\"spin-placeholder\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n    />\n    <circle\n      class=\"spin-progress\"\n      [attr.cx]=\"diameter / 2\"\n      [attr.cy]=\"diameter / 2\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke]=\"color\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"progress ? dashOffset : null\"\n    />\n  </svg>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
@@ -2847,10 +2666,10 @@ class MatchaSpinnerComponent {
         const progress = Math.min(Math.max(Number(this.progress), 0), 100);
         return this.circumference - (progress / 100) * this.circumference;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSpinnerComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaSpinnerComponent, isStandalone: false, selector: "matcha-spinner", inputs: { progress: "progress", color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, host: { properties: { "attr.progress": "this._progress", "attr.color": "this._color", "attr.size": "this.hostSize" } }, ngImport: i0, template: "<div\n  class=\"matcha-spinner\"\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-valuenow]=\"progress\"\n>\n  <svg [attr.viewBox]=\"'0 0 ' + diameter + ' ' + diameter\" class=\"spinner\">\n    <circle\n      class=\"spinner-placeholder\"\n      [attr.cx]=\"center\"\n      [attr.cy]=\"center\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      stroke-linecap=\"round\"\n    />\n    <circle\n      class=\"spinner-progress path\"\n      [attr.cx]=\"center\"\n      [attr.cy]=\"center\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke]=\"color\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"dashOffset\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSpinnerComponent, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaSpinnerComponent, isStandalone: false, selector: "matcha-spinner", inputs: { progress: "progress", color: "color", size: "size", sizeXs: ["size-xs", "sizeXs"], sizeSm: ["size-sm", "sizeSm"], sizeMd: ["size-md", "sizeMd"], sizeLg: ["size-lg", "sizeLg"], sizeXl: ["size-xl", "sizeXl"] }, host: { properties: { "attr.progress": "this._progress", "attr.color": "this._color", "attr.size": "this.hostSize" } }, ngImport: i0, template: "<div\n  class=\"matcha-spinner\"\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-valuenow]=\"progress\"\n>\n  <svg [attr.viewBox]=\"'0 0 ' + diameter + ' ' + diameter\" class=\"spinner\">\n    <circle\n      class=\"spinner-placeholder\"\n      [attr.cx]=\"center\"\n      [attr.cy]=\"center\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      stroke-linecap=\"round\"\n    />\n    <circle\n      class=\"spinner-progress path\"\n      [attr.cx]=\"center\"\n      [attr.cy]=\"center\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke]=\"color\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"dashOffset\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-spinner', standalone: false, template: "<div\n  class=\"matcha-spinner\"\n  role=\"progressbar\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"100\"\n  [attr.aria-valuenow]=\"progress\"\n>\n  <svg [attr.viewBox]=\"'0 0 ' + diameter + ' ' + diameter\" class=\"spinner\">\n    <circle\n      class=\"spinner-placeholder\"\n      [attr.cx]=\"center\"\n      [attr.cy]=\"center\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      stroke-linecap=\"round\"\n    />\n    <circle\n      class=\"spinner-progress path\"\n      [attr.cx]=\"center\"\n      [attr.cy]=\"center\"\n      [attr.r]=\"radius\"\n      [attr.stroke-width]=\"strokeWidth\"\n      [attr.stroke]=\"color\"\n      [attr.stroke-dasharray]=\"circumference\"\n      [attr.stroke-dashoffset]=\"dashOffset\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
@@ -2913,10 +2732,10 @@ class MatchaHintTextComponent {
             default: return 'red';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaHintTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaHintTextComponent, isStandalone: false, selector: "matcha-hint-text", inputs: { type: "type", size: "size" }, ngImport: i0, template: "<div class=\"d-flex flex-align-center gap-4\">\n    <matcha-icon color=\"{{ iconColor }}\" name=\"{{ iconName }}\"> </matcha-icon>\n    <span class=\"text\"><ng-content></ng-content></span>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaHintTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaHintTextComponent, isStandalone: false, selector: "matcha-hint-text", inputs: { type: "type", size: "size" }, ngImport: i0, template: "<div class=\"d-flex flex-align-center gap-4\">\n    <matcha-icon color=\"{{ iconColor }}\" name=\"{{ iconName }}\"> </matcha-icon>\n    <span class=\"text\"><ng-content></ng-content></span>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaHintTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaHintTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-hint-text', standalone: false, template: "<div class=\"d-flex flex-align-center gap-4\">\n    <matcha-icon color=\"{{ iconColor }}\" name=\"{{ iconName }}\"> </matcha-icon>\n    <span class=\"text\"><ng-content></ng-content></span>\n</div>\n" }]
         }], propDecorators: { type: [{
@@ -2951,12 +2770,12 @@ class MatchaSkeletonComponent {
         const amountNumber = typeof this.amount === 'string' ? parseInt(this.amount) : this.amount;
         return Array(amountNumber).fill(0).map((_, index) => index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaSkeletonComponent, isStandalone: false, selector: "matcha-skeleton", inputs: { amount: "amount", grid: "grid", height: "height", model: "model", gap: "gap" }, host: { properties: { "attr.amount": "this.amount", "attr.grid": "this.grid", "attr.height": "this.height", "attr.model": "this.model", "attr.gap": "this.gap" } }, ngImport: i0, template: "<ng-content></ng-content>\n<!-- CARD SKELETON -->\n<div [class]=\"classes\" *ngIf=\"model !== 'table'\">\n    <div class=\"skeleton-animated-background flex-column--force p-0 radius-8 user-select-none overflow-hidden\" *ngFor=\"let i of amountArray\">\n\n        <ng-container *ngIf=\"model === 'profile'\"><span class=\"h8 title p-16 m-0\"> <span class=\"radius-full background-surface-alpha h-48 w-48\"></span>&nbsp;</span></ng-container>\n\n        <div [class]=\"'h-'+ height + ' flex-column--force p-16 background-bg-alpha'\"></div>\n\n        <ng-container *ngIf=\"model === 'profile'\">\n            <div class=\"flex-column--force\">\n                <div class=\"flex-column--force p-16 gap-16\">\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n        </ng-container>\n\n    </div>\n</div>\n<!-- CARD SKELETON -->\n\n<!-- TABLE SKELETON -->\n<div class=\"skeleton-animated-background w-100-p mr-16 flex-column--force p-0 radius-8 user-select-none\" *ngIf=\"model === 'table'\">\n\n    <div class=\"flex-column--force h-64 background-surface-alpha\">\n        <ng-container>&nbsp;</ng-container>\n    </div>\n\n    <ng-container *ngFor=\"let i of amountArray\">\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force background-bg-alpha\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-30-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n    </ng-container>\n\n</div>\n<!-- TABLE SKELETON -->\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaSkeletonComponent, isStandalone: false, selector: "matcha-skeleton", inputs: { amount: "amount", grid: "grid", height: "height", model: "model", gap: "gap" }, host: { properties: { "attr.amount": "this.amount", "attr.grid": "this.grid", "attr.height": "this.height", "attr.model": "this.model", "attr.gap": "this.gap" } }, ngImport: i0, template: "<ng-content></ng-content>\n<!-- CARD SKELETON -->\n<div [class]=\"classes\" *ngIf=\"model !== 'table'\">\n    <div class=\"skeleton-animated-background flex-column--force p-0 radius-8 user-select-none overflow-hidden\" *ngFor=\"let i of amountArray\">\n\n        <ng-container *ngIf=\"model === 'profile'\"><span class=\"h8 title p-16 m-0\"> <span class=\"radius-full background-surface-alpha h-48 w-48\"></span>&nbsp;</span></ng-container>\n\n        <div [class]=\"'h-'+ height + ' flex-column--force p-16'\"></div>\n\n        <ng-container *ngIf=\"model === 'profile'\">\n            <div class=\"flex-column--force\">\n                <div class=\"flex-column--force p-16 gap-16\">\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n        </ng-container>\n\n    </div>\n</div>\n<!-- CARD SKELETON -->\n\n<!-- TABLE SKELETON -->\n<div class=\"skeleton-animated-background w-100-p mr-16 flex-column--force p-0 radius-8 user-select-none\" *ngIf=\"model === 'table'\">\n\n    <div class=\"flex-column--force h-64 background-surface-alpha\">\n        <ng-container>&nbsp;</ng-container>\n    </div>\n\n    <ng-container *ngFor=\"let i of amountArray\">\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force background-bg-alpha\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-30-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n    </ng-container>\n\n</div>\n<!-- TABLE SKELETON -->\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSkeletonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'matcha-skeleton', standalone: false, template: "<ng-content></ng-content>\n<!-- CARD SKELETON -->\n<div [class]=\"classes\" *ngIf=\"model !== 'table'\">\n    <div class=\"skeleton-animated-background flex-column--force p-0 radius-8 user-select-none overflow-hidden\" *ngFor=\"let i of amountArray\">\n\n        <ng-container *ngIf=\"model === 'profile'\"><span class=\"h8 title p-16 m-0\"> <span class=\"radius-full background-surface-alpha h-48 w-48\"></span>&nbsp;</span></ng-container>\n\n        <div [class]=\"'h-'+ height + ' flex-column--force p-16 background-bg-alpha'\"></div>\n\n        <ng-container *ngIf=\"model === 'profile'\">\n            <div class=\"flex-column--force\">\n                <div class=\"flex-column--force p-16 gap-16\">\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n        </ng-container>\n\n    </div>\n</div>\n<!-- CARD SKELETON -->\n\n<!-- TABLE SKELETON -->\n<div class=\"skeleton-animated-background w-100-p mr-16 flex-column--force p-0 radius-8 user-select-none\" *ngIf=\"model === 'table'\">\n\n    <div class=\"flex-column--force h-64 background-surface-alpha\">\n        <ng-container>&nbsp;</ng-container>\n    </div>\n\n    <ng-container *ngFor=\"let i of amountArray\">\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force background-bg-alpha\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-30-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n    </ng-container>\n\n</div>\n<!-- TABLE SKELETON -->\n" }]
+            args: [{ selector: 'matcha-skeleton', standalone: false, template: "<ng-content></ng-content>\n<!-- CARD SKELETON -->\n<div [class]=\"classes\" *ngIf=\"model !== 'table'\">\n    <div class=\"skeleton-animated-background flex-column--force p-0 radius-8 user-select-none overflow-hidden\" *ngFor=\"let i of amountArray\">\n\n        <ng-container *ngIf=\"model === 'profile'\"><span class=\"h8 title p-16 m-0\"> <span class=\"radius-full background-surface-alpha h-48 w-48\"></span>&nbsp;</span></ng-container>\n\n        <div [class]=\"'h-'+ height + ' flex-column--force p-16'\"></div>\n\n        <ng-container *ngIf=\"model === 'profile'\">\n            <div class=\"flex-column--force\">\n                <div class=\"flex-column--force p-16 gap-16\">\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                    <div class=\"w-100-p h-16 background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n        </ng-container>\n\n    </div>\n</div>\n<!-- CARD SKELETON -->\n\n<!-- TABLE SKELETON -->\n<div class=\"skeleton-animated-background w-100-p mr-16 flex-column--force p-0 radius-8 user-select-none\" *ngIf=\"model === 'table'\">\n\n    <div class=\"flex-column--force h-64 background-surface-alpha\">\n        <ng-container>&nbsp;</ng-container>\n    </div>\n\n    <ng-container *ngFor=\"let i of amountArray\">\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n        <div class=\"grid-4 h-80 px-16 gap-16 flex-align-center--force background-bg-alpha\">\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"min-h-48 min-w-48 h-48 w-48 background-surface-alpha radius-full\"></div>\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-30-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n            <div class=\"w-100-p flex-row--force gap-16\">\n                <div class=\"w-100-p flex-column--force flex-center--force gap-16\">\n                    <div class=\"h-16 w-60-p background-surface-alpha radius-full\"></div>\n                    <div class=\"h-16 w-100-p background-surface-alpha radius-full\"></div>\n                </div>\n            </div>\n            <div class=\"h-16 w-100-p flex-column--force background-surface-alpha radius-full\"></div>\n        </div>\n\n    </ng-container>\n\n</div>\n<!-- TABLE SKELETON -->\n" }]
         }], propDecorators: { amount: [{
                 type: Input,
                 args: ['amount']
@@ -3053,8 +2872,8 @@ class MatchaSlideToggleComponent {
         this.onTouched();
         this.change.emit({ checked: newCheckedState });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSlideToggleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaSlideToggleComponent, isStandalone: false, selector: "matcha-slide-toggle", inputs: { color: "color", checked: "checked", disabled: "disabled" }, outputs: { change: "change" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSlideToggleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaSlideToggleComponent, isStandalone: false, selector: "matcha-slide-toggle", inputs: { color: "color", checked: "checked", disabled: "disabled" }, outputs: { change: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaSlideToggleComponent),
@@ -3062,7 +2881,7 @@ class MatchaSlideToggleComponent {
             },
         ], usesOnChanges: true, ngImport: i0, template: "<label\n  class=\"matcha-slide-toggle-wrapper flex-align-center\"\n  [class.matcha-slide-toggle-disabled]=\"disabled\"\n  >\n  <input\n    type=\"checkbox\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"onInputChange($event)\"\n  />\n\n  <span class=\"matcha-slide-toggle-label ml-8 fw-500 fs-16 lh-20\">\n    <ng-content></ng-content>\n  </span>\n</label>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSlideToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSlideToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-slide-toggle', standalone: false, providers: [
                         {
@@ -3139,10 +2958,10 @@ class MatchaButtonToggleComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaButtonToggleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaButtonToggleComponent, isStandalone: false, selector: "matcha-button-toggle", inputs: { multiple: "multiple", disabled: "disabled", required: "required", inactiveColor: "inactiveColor", inactiveType: "inactiveType", gap: "gap" }, host: { properties: { "attr.disabled": "this.isDisabled" } }, queries: [{ propertyName: "buttons", predicate: MatchaButtonComponent }], ngImport: i0, template: "<div\n  class=\"button-group d-flex\"\n  [ngClass]=\"gapClass\"\n  [class.flex-wrap]=\"gap !== 0\"\n  role=\"group\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaButtonToggleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaButtonToggleComponent, isStandalone: false, selector: "matcha-button-toggle", inputs: { multiple: "multiple", disabled: "disabled", required: "required", inactiveColor: "inactiveColor", inactiveType: "inactiveType", gap: "gap" }, host: { properties: { "attr.disabled": "this.isDisabled" } }, queries: [{ propertyName: "buttons", predicate: MatchaButtonComponent }], ngImport: i0, template: "<div\n  class=\"button-group d-flex\"\n  [ngClass]=\"gapClass\"\n  [class.flex-wrap]=\"gap !== 0\"\n  role=\"group\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaButtonToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaButtonToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-button-toggle', standalone: false, template: "<div\n  class=\"button-group d-flex\"\n  [ngClass]=\"gapClass\"\n  [class.flex-wrap]=\"gap !== 0\"\n  role=\"group\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { multiple: [{
@@ -3177,10 +2996,10 @@ class MatchaTabItemComponent {
     get active() {
         return this._active;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaTabItemComponent, isStandalone: false, selector: "matcha-tab", inputs: { title: "title", icon: "icon", active: "active" }, ngImport: i0, template: "<ng-content *ngIf=\"active\"></ng-content>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaTabItemComponent, isStandalone: false, selector: "matcha-tab", inputs: { title: "title", icon: "icon", active: "active" }, ngImport: i0, template: "<ng-content *ngIf=\"active\"></ng-content>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTabItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTabItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-tab', standalone: false, template: "<ng-content *ngIf=\"active\"></ng-content>\n" }]
         }], propDecorators: { title: [{
@@ -3257,10 +3076,10 @@ class MatchaTabsComponent {
             this.selectTabByIndex(tabsArray.length - 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaTabsComponent, isStandalone: false, selector: "matcha-tabs", inputs: { selectedIndex: "selectedIndex", activeTabIndex: "activeTabIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", tabSelected: "tabSelected" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, queries: [{ propertyName: "tabs", predicate: MatchaTabItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column gap-24 w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0 pb-4\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p min-w-88 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"color-fg fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }], animations: [...createAnimations] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaTabsComponent, isStandalone: false, selector: "matcha-tabs", inputs: { selectedIndex: "selectedIndex", activeTabIndex: "activeTabIndex" }, outputs: { selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", tabSelected: "tabSelected" }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, queries: [{ propertyName: "tabs", predicate: MatchaTabItemComponent }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex-column gap-24 w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0 pb-4\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p min-w-88 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"color-fg fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }], animations: [...createAnimations] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-tabs', animations: [...createAnimations], standalone: false, template: "<div class=\"flex-column gap-24 w-100-p\">\n  <nav class=\"button-group overflow-auto w-100-p flex-row gap-8 list-style-none pl-0 pb-4\" role=\"tablist\">\n    <button *ngFor=\"let tab of tabs; let i = index\" (click)=\"selectTabByIndex(i)\"\n            [attr.aria-selected]=\"tab.active\"\n            [attr.aria-controls]=\"'tab-content-' + i\"\n            [ngClass]=\"{'active': tab.active}\"\n            class=\"\n              border-color-{{tab.active?'accent':'surface'}} background-surface\n              cursor-pointer w-100-p min-w-88 b-2 radius-8 p-8 flex-column flex-align-center gap-4 flex-space-between\"\n            role=\"tab\"\n            tabindex=\"{{tab.active ? 0 : -1}}\">\n      <matcha-icon [name]=\"tab.icon\" color=\"accent\" size=\"md\"></matcha-icon>\n      <span class=\"color-fg fw-900 fs-14 lh-16 line-clamp-2\">\n        {{ tab.title }}\n      </span>\n    </button>\n  </nav>\n\n  <div>\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], propDecorators: { tabs: [{
@@ -3357,10 +3176,10 @@ class MatchaDateRangeComponent {
             control.setErrors(Object.keys(errors).length ? errors : null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaDateRangeComponent, isStandalone: false, selector: "matcha-date-range", queries: [{ propertyName: "controls", predicate: NgControl, descendants: true }], ngImport: i0, template: "<div class=\"d-flex gap-16\">\n  <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaDateRangeComponent, isStandalone: false, selector: "matcha-date-range", queries: [{ propertyName: "controls", predicate: NgControl, descendants: true }], ngImport: i0, template: "<div class=\"d-flex gap-16\">\n  <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-date-range', standalone: false, template: "<div class=\"d-flex gap-16\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { controls: [{
@@ -3476,10 +3295,10 @@ class MatchaTimeComponent {
             control.setErrors(Object.keys(errors).length ? errors : null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaTimeComponent, isStandalone: false, selector: "matcha-time", inputs: { startDateControlName: "startDateControlName", endDateControlName: "endDateControlName", allowCrossDays: "allowCrossDays" }, queries: [{ propertyName: "controls", predicate: NgControl, descendants: true }], ngImport: i0, template: "<div class=\"d-flex gap-16\">\n  <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaTimeComponent, isStandalone: false, selector: "matcha-time", inputs: { startDateControlName: "startDateControlName", endDateControlName: "endDateControlName", allowCrossDays: "allowCrossDays" }, queries: [{ propertyName: "controls", predicate: NgControl, descendants: true }], ngImport: i0, template: "<div class=\"d-flex gap-16\">\n  <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-time', standalone: false, template: "<div class=\"d-flex gap-16\">\n  <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { controls: [{
@@ -5707,10 +5526,10 @@ class MatchaMaskApplierService {
             nonZeroIndex,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMaskApplierService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMaskApplierService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskApplierService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskApplierService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMaskApplierService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskApplierService, decorators: [{
             type: Injectable
         }] });
 
@@ -6357,10 +6176,10 @@ class MatchaMaskService extends MatchaMaskApplierService {
     currentLocaleDecimalMarker() {
         return (1.1).toLocaleString().substring(1, 2);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMaskService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMaskService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMaskService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskService, decorators: [{
             type: Injectable
         }] });
 
@@ -6576,8 +6395,8 @@ class MatchaMaskCompatibleDirective {
         // Implementar validação se necessário
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMaskCompatibleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaMaskCompatibleDirective, isStandalone: false, selector: "input[mask], textarea[mask]", inputs: { mask: "mask", specialCharacters: "specialCharacters", patterns: "patterns", prefix: "prefix", suffix: "suffix", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", dropSpecialCharacters: "dropSpecialCharacters", hiddenInput: "hiddenInput", showMaskTyped: "showMaskTyped", placeHolderCharacter: "placeHolderCharacter", shownMaskExpression: "shownMaskExpression", clearIfNotMatch: "clearIfNotMatch", validation: "validation", separatorLimit: "separatorLimit", allowNegativeNumbers: "allowNegativeNumbers", leadZeroDateTime: "leadZeroDateTime", leadZero: "leadZero", triggerOnMaskChange: "triggerOnMaskChange", apm: "apm", inputTransformFn: "inputTransformFn", outputTransformFn: "outputTransformFn", keepCharacterPositions: "keepCharacterPositions", instantPrefix: "instantPrefix" }, outputs: { maskFilled: "maskFilled" }, host: { listeners: { "paste": "onPaste($event)", "focus": "onFocus($event)", "ngModelChange": "onModelChange($event)", "input": "onInput($event)", "compositionstart": "onCompositionStart($event)", "compositionend": "onCompositionEnd($event)", "blur": "onBlur($event)", "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskCompatibleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaMaskCompatibleDirective, isStandalone: false, selector: "input[mask], textarea[mask]", inputs: { mask: "mask", specialCharacters: "specialCharacters", patterns: "patterns", prefix: "prefix", suffix: "suffix", thousandSeparator: "thousandSeparator", decimalMarker: "decimalMarker", dropSpecialCharacters: "dropSpecialCharacters", hiddenInput: "hiddenInput", showMaskTyped: "showMaskTyped", placeHolderCharacter: "placeHolderCharacter", shownMaskExpression: "shownMaskExpression", clearIfNotMatch: "clearIfNotMatch", validation: "validation", separatorLimit: "separatorLimit", allowNegativeNumbers: "allowNegativeNumbers", leadZeroDateTime: "leadZeroDateTime", leadZero: "leadZero", triggerOnMaskChange: "triggerOnMaskChange", apm: "apm", inputTransformFn: "inputTransformFn", outputTransformFn: "outputTransformFn", keepCharacterPositions: "keepCharacterPositions", instantPrefix: "instantPrefix" }, outputs: { maskFilled: "maskFilled" }, host: { listeners: { "paste": "onPaste($event)", "focus": "onFocus($event)", "ngModelChange": "onModelChange($event)", "input": "onInput($event)", "compositionstart": "onCompositionStart($event)", "compositionend": "onCompositionEnd($event)", "blur": "onBlur($event)", "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaMaskCompatibleDirective),
@@ -6591,7 +6410,7 @@ class MatchaMaskCompatibleDirective {
             MatchaMaskService,
         ], exportAs: ["mask", "matchaMask"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMaskCompatibleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskCompatibleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[mask], textarea[mask]',
@@ -6882,10 +6701,10 @@ class MatchaInputPhoneComponent {
     ngOnDestroy() {
         this.removeClickListener();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInputPhoneComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaInputPhoneComponent, isStandalone: false, selector: "matcha-input-phone", inputs: { fallbackMask: "fallbackMask", value: "value" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "inputSelector", first: true, predicate: ["inputSelector"], descendants: true }, { propertyName: "phoneRef", first: true, predicate: ["phoneRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div class=\"flex-row position-relative px-16 gap-8\" #inputSelector>\n    <div class=\"min-h-24 radius-8 cursor-pointer d-flex gap-8 flex-align-center fs-16\" (click)=\"toggleDropdown()\">\n        <div class=\"d-flex-row flex-align-center\">\n            <img alt=\"\" [src]=\"'https://flagcdn.com/16x12/'+ selectedCountry?.iso2?.toLowerCase() + '.png'\"\n                height=\"16\">\n        </div>\n        <span class=\"w-16 fs-16\"\n            [ngClass]=\"isOpen ? 'i-matcha-action_arrow_up': 'i-matcha-action_arrow_down'\"></span>\n\n    </div>\n    <input *ngIf=\"isInitialized\" #phoneRef type=\"text\" placeholder=\"{{ typeMask }}\"\n        [(ngModel)]=\"inputValueModel\"\n        pattern=\"[0-9]*\" (keyup)=\"onInput($event)\" [mask]=\"typeMask\">\n\n    <ng-container *ngIf=\"isOpen\">\n        <div class=\"position-absolute z-index-10\">\n            <div class=\"grid-1 gap-16 radius-8 z-index-10 p-8 w-300 position-absolute background-surface elevation-z-1\"\n                style=\"top: calc(100% + 10px); overflow: hidden; height: 300px; overflow-y: auto;\">\n\n                <label *ngFor=\"let country of allCountries; let i = index\"\n                    class=\"fs-16 lh-18 cursor-pointer d-flex-align-center p-8 ts-300-l\"\n                    [ngClass]=\"labelHover === i+'bg' ? 'background-bg' : 'background-surface'\"\n                    (mouseover)=\"labelHover = i+'bg'\" (mouseout)=\"labelHover = i+'su'\"\n                    (click)=\"selectCountry(country)\">\n                    <img alt=\"\" class=\"mr-8\"\n                        [src]=\"'https://flagcdn.com/16x12/'+ country?.iso2?.toLowerCase() + '.png'\" height=\"16\">\n                    {{country.name}}\n                </label>\n            </div>\n        </div>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatchaMaskCompatibleDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "matchaMask"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInputPhoneComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaInputPhoneComponent, isStandalone: false, selector: "matcha-input-phone", inputs: { fallbackMask: "fallbackMask", value: "value" }, outputs: { onChange: "onChange" }, viewQueries: [{ propertyName: "inputSelector", first: true, predicate: ["inputSelector"], descendants: true }, { propertyName: "phoneRef", first: true, predicate: ["phoneRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<div class=\"flex-row position-relative px-16 gap-8\" #inputSelector>\n    <div class=\"min-h-24 radius-8 cursor-pointer d-flex gap-8 flex-align-center fs-16\" (click)=\"toggleDropdown()\">\n        <div class=\"d-flex-row flex-align-center\">\n            <img alt=\"\" [src]=\"'https://flagcdn.com/16x12/'+ selectedCountry?.iso2?.toLowerCase() + '.png'\"\n                height=\"16\">\n        </div>\n        <span class=\"w-16 fs-16\"\n            [ngClass]=\"isOpen ? 'i-matcha-action_arrow_up': 'i-matcha-action_arrow_down'\"></span>\n\n    </div>\n    <input *ngIf=\"isInitialized\" #phoneRef type=\"text\" placeholder=\"{{ typeMask }}\"\n        [(ngModel)]=\"inputValueModel\"\n        pattern=\"[0-9]*\" (keyup)=\"onInput($event)\" [mask]=\"typeMask\">\n\n    <ng-container *ngIf=\"isOpen\">\n        <div class=\"position-absolute z-index-10\">\n            <div class=\"grid-1 gap-16 radius-8 z-index-10 p-8 w-300 position-absolute background-surface elevation-z-1\"\n                style=\"top: calc(100% + 10px); overflow: hidden; height: 300px; overflow-y: auto;\">\n\n                <label *ngFor=\"let country of allCountries; let i = index\"\n                    class=\"fs-16 lh-18 cursor-pointer d-flex-align-center p-8 ts-300-l\"\n                    [ngClass]=\"labelHover === i+'bg' ? 'background-bg' : 'background-surface'\"\n                    (mouseover)=\"labelHover = i+'bg'\" (mouseout)=\"labelHover = i+'su'\"\n                    (click)=\"selectCountry(country)\">\n                    <img alt=\"\" class=\"mr-8\"\n                        [src]=\"'https://flagcdn.com/16x12/'+ country?.iso2?.toLowerCase() + '.png'\" height=\"16\">\n                    {{country.name}}\n                </label>\n            </div>\n        </div>\n    </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatchaMaskCompatibleDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "matchaMask"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInputPhoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInputPhoneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-input-phone', standalone: false, template: "\n<div class=\"flex-row position-relative px-16 gap-8\" #inputSelector>\n    <div class=\"min-h-24 radius-8 cursor-pointer d-flex gap-8 flex-align-center fs-16\" (click)=\"toggleDropdown()\">\n        <div class=\"d-flex-row flex-align-center\">\n            <img alt=\"\" [src]=\"'https://flagcdn.com/16x12/'+ selectedCountry?.iso2?.toLowerCase() + '.png'\"\n                height=\"16\">\n        </div>\n        <span class=\"w-16 fs-16\"\n            [ngClass]=\"isOpen ? 'i-matcha-action_arrow_up': 'i-matcha-action_arrow_down'\"></span>\n\n    </div>\n    <input *ngIf=\"isInitialized\" #phoneRef type=\"text\" placeholder=\"{{ typeMask }}\"\n        [(ngModel)]=\"inputValueModel\"\n        pattern=\"[0-9]*\" (keyup)=\"onInput($event)\" [mask]=\"typeMask\">\n\n    <ng-container *ngIf=\"isOpen\">\n        <div class=\"position-absolute z-index-10\">\n            <div class=\"grid-1 gap-16 radius-8 z-index-10 p-8 w-300 position-absolute background-surface elevation-z-1\"\n                style=\"top: calc(100% + 10px); overflow: hidden; height: 300px; overflow-y: auto;\">\n\n                <label *ngFor=\"let country of allCountries; let i = index\"\n                    class=\"fs-16 lh-18 cursor-pointer d-flex-align-center p-8 ts-300-l\"\n                    [ngClass]=\"labelHover === i+'bg' ? 'background-bg' : 'background-surface'\"\n                    (mouseover)=\"labelHover = i+'bg'\" (mouseout)=\"labelHover = i+'su'\"\n                    (click)=\"selectCountry(country)\">\n                    <img alt=\"\" class=\"mr-8\"\n                        [src]=\"'https://flagcdn.com/16x12/'+ country?.iso2?.toLowerCase() + '.png'\" height=\"16\">\n                    {{country.name}}\n                </label>\n            </div>\n        </div>\n    </ng-container>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { inputSelector: [{
@@ -6905,10 +6724,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class StepComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: StepComponent, isStandalone: false, selector: "matcha-step", inputs: { step: ["title", "step"] }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `<ng-template><ng-content></ng-content></ng-template>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: StepComponent, isStandalone: false, selector: "matcha-step", inputs: { step: ["title", "step"] }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `<ng-template><ng-content></ng-content></ng-template>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: StepComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'matcha-step',
@@ -6963,10 +6782,10 @@ class MatchaStepperStateService {
             this._activeStep$.next(current - 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaStepperStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaStepperStateService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperStateService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaStepperStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperStateService, decorators: [{
             type: Injectable
         }] });
 
@@ -6980,10 +6799,10 @@ class MatchaStepperComponent {
             this.stepperState.setActiveStep(this.active);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaStepperComponent, deps: [{ token: MatchaStepperStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaStepperComponent, isStandalone: false, selector: "matcha-stepper", inputs: { active: "active" }, providers: [MatchaStepperStateService], usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperComponent, deps: [{ token: MatchaStepperStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaStepperComponent, isStandalone: false, selector: "matcha-stepper", inputs: { active: "active" }, providers: [MatchaStepperStateService], usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'matcha-stepper',
@@ -7016,14 +6835,14 @@ class MatchaStepperContentComponent {
     prevStep() {
         this.stepperState.prevStep();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaStepperContentComponent, deps: [{ token: MatchaStepperStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaStepperContentComponent, isStandalone: false, selector: "matcha-stepper-content", queries: [{ propertyName: "steps", predicate: StepComponent }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperContentComponent, deps: [{ token: MatchaStepperStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaStepperContentComponent, isStandalone: false, selector: "matcha-stepper-content", queries: [{ propertyName: "steps", predicate: StepComponent }], ngImport: i0, template: `
     <ng-container *ngIf="stepsArray.length">
       <ng-container *ngTemplateOutlet="stepsArray[activeStep]?.template || null"></ng-container>
     </ng-container>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaStepperContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'matcha-stepper-content',
@@ -7054,10 +6873,10 @@ class MatchaStepperControllerComponent {
             return;
         this.stepperState.setActiveStep(index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaStepperControllerComponent, deps: [{ token: MatchaStepperStateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaStepperControllerComponent, isStandalone: false, selector: "matcha-stepper-controller", inputs: { disableNext: "disableNext" }, providers: [], ngImport: i0, template: "<div class=\"flex-column flex-align-end gap-16\">\n    <span class=\"fw-900 fs-12 lh-12\">{{steps[activeStep]}}</span>\n    <div class=\"d-flex align-center gap-8\">\n        <ng-container *ngFor=\"let step of steps; let i = index\">\n            <div (click)=\"goToStep(i)\" class=\"cursor-pointer w-32 h-8 radius-8\" [class.background-accent]=\"i <= activeStep\" [class.background-disabled]=\"i > activeStep\"></div>          \n        </ng-container>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperControllerComponent, deps: [{ token: MatchaStepperStateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaStepperControllerComponent, isStandalone: false, selector: "matcha-stepper-controller", inputs: { disableNext: "disableNext" }, providers: [], ngImport: i0, template: "<div class=\"flex-column flex-align-end gap-16\">\n    <span class=\"fw-900 fs-12 lh-12\">{{steps[activeStep]}}</span>\n    <div class=\"d-flex align-center gap-8\">\n        <ng-container *ngFor=\"let step of steps; let i = index\">\n            <div (click)=\"goToStep(i)\" class=\"cursor-pointer w-32 h-8 radius-8\" [class.background-accent]=\"i <= activeStep\" [class.background-disabled]=\"i > activeStep\"></div>          \n        </ng-container>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaStepperControllerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperControllerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-stepper-controller', providers: [], standalone: false, template: "<div class=\"flex-column flex-align-end gap-16\">\n    <span class=\"fw-900 fs-12 lh-12\">{{steps[activeStep]}}</span>\n    <div class=\"d-flex align-center gap-8\">\n        <ng-container *ngFor=\"let step of steps; let i = index\">\n            <div (click)=\"goToStep(i)\" class=\"cursor-pointer w-32 h-8 radius-8\" [class.background-accent]=\"i <= activeStep\" [class.background-disabled]=\"i > activeStep\"></div>          \n        </ng-container>\n    </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: MatchaStepperStateService }], propDecorators: { disableNext: [{
@@ -7086,10 +6905,10 @@ class MatchaDropListService {
     getAllDropZones() {
         return Array.from(this.dropZones.values());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDropListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDropListService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDropListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDropListService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDropListService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDropListService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -7387,10 +7206,10 @@ class MatchaDragDirective {
         this.listeners.forEach(cleanup => cleanup());
         this.listeners = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDragDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: MatchaDropListService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaDragDirective, isStandalone: false, selector: "[matchaDrag]", inputs: { matchaDragData: "matchaDragData", matchaDragDisabled: "matchaDragDisabled" }, host: { properties: { "class.matcha-drag-item": "this.dragItemClass", "class.matcha-drag-disabled": "this.dragDisabledClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDragDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: MatchaDropListService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaDragDirective, isStandalone: false, selector: "[matchaDrag]", inputs: { matchaDragData: "matchaDragData", matchaDragDisabled: "matchaDragDisabled" }, host: { properties: { "class.matcha-drag-item": "this.dragItemClass", "class.matcha-drag-disabled": "this.dragDisabledClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDragDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDragDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaDrag]',
@@ -7690,10 +7509,10 @@ class MatchaDropListComponent {
             this.transferItem(this.currentDragItem, this.sourceContainer, this, dropIndex);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDropListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MatchaDropListService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaDropListComponent, isStandalone: false, selector: "matcha-drop-list", inputs: { matchaDropListData: "matchaDropListData", matchaDropListDisabled: "matchaDropListDisabled", matchaDropListConnectedTo: "matchaDropListConnectedTo", matchaDropListSortingDisabled: "matchaDropListSortingDisabled", matchaDropListAcceptPredicate: "matchaDropListAcceptPredicate" }, outputs: { matchaDropListDropped: "matchaDropListDropped" }, host: { properties: { "class.matcha-drop-list": "this.dropListClass" } }, queries: [{ propertyName: "dragItems", predicate: MatchaDragDirective }], ngImport: i0, template: "<div class=\"matcha-drop-list-container\"\n     [class.matcha-drop-list-receiving]=\"isReceivingDrag\"\n     [class.matcha-drop-list-disabled]=\"matchaDropListDisabled\"\n     [class.matcha-drop-list-can-accept]=\"isReceivingDrag && canAcceptDrop\"\n     [class.matcha-drop-list-cannot-accept]=\"isReceivingDrag && !canAcceptDrop\">\n  <ng-content></ng-content>\n\n  <!-- Linha indicadora de drop -->\n  <div class=\"matcha-drop-indicator\"\n       [class.active]=\"showDropIndicator && canAcceptDrop\"\n       [style.top.px]=\"dropIndicatorPosition\">\n  </div>\n\n  <!-- Placeholder para lista vazia -->\n  <div *ngIf=\"isReceivingDrag && dragItems.length === 0\"\n       class=\"matcha-drop-list-placeholder\">\n    <div class=\"matcha-drop-list-empty-placeholder\"\n         [class.can-accept]=\"canAcceptDrop\"\n         [class.cannot-accept]=\"!canAcceptDrop\">\n      <span [class.i-matcha-action_sign_success]=\"canAcceptDrop\"\n            [class.i-matcha-action_sign_error]=\"!canAcceptDrop\"\n            [class.color-green]=\"canAcceptDrop\"\n            [class.color-red]=\"!canAcceptDrop\"\n            class=\"i-size-lg\"></span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDropListComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MatchaDropListService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaDropListComponent, isStandalone: false, selector: "matcha-drop-list", inputs: { matchaDropListData: "matchaDropListData", matchaDropListDisabled: "matchaDropListDisabled", matchaDropListConnectedTo: "matchaDropListConnectedTo", matchaDropListSortingDisabled: "matchaDropListSortingDisabled", matchaDropListAcceptPredicate: "matchaDropListAcceptPredicate" }, outputs: { matchaDropListDropped: "matchaDropListDropped" }, host: { properties: { "class.matcha-drop-list": "this.dropListClass" } }, queries: [{ propertyName: "dragItems", predicate: MatchaDragDirective }], ngImport: i0, template: "<div class=\"matcha-drop-list-container\"\n     [class.matcha-drop-list-receiving]=\"isReceivingDrag\"\n     [class.matcha-drop-list-disabled]=\"matchaDropListDisabled\"\n     [class.matcha-drop-list-can-accept]=\"isReceivingDrag && canAcceptDrop\"\n     [class.matcha-drop-list-cannot-accept]=\"isReceivingDrag && !canAcceptDrop\">\n  <ng-content></ng-content>\n\n  <!-- Linha indicadora de drop -->\n  <div class=\"matcha-drop-indicator\"\n       [class.active]=\"showDropIndicator && canAcceptDrop\"\n       [style.top.px]=\"dropIndicatorPosition\">\n  </div>\n\n  <!-- Placeholder para lista vazia -->\n  <div *ngIf=\"isReceivingDrag && dragItems.length === 0\"\n       class=\"matcha-drop-list-placeholder\">\n    <div class=\"matcha-drop-list-empty-placeholder\"\n         [class.can-accept]=\"canAcceptDrop\"\n         [class.cannot-accept]=\"!canAcceptDrop\">\n      <span [class.i-matcha-action_sign_success]=\"canAcceptDrop\"\n            [class.i-matcha-action_sign_error]=\"!canAcceptDrop\"\n            [class.color-green]=\"canAcceptDrop\"\n            [class.color-red]=\"!canAcceptDrop\"\n            class=\"i-size-lg\"></span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDropListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDropListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-drop-list', standalone: false, template: "<div class=\"matcha-drop-list-container\"\n     [class.matcha-drop-list-receiving]=\"isReceivingDrag\"\n     [class.matcha-drop-list-disabled]=\"matchaDropListDisabled\"\n     [class.matcha-drop-list-can-accept]=\"isReceivingDrag && canAcceptDrop\"\n     [class.matcha-drop-list-cannot-accept]=\"isReceivingDrag && !canAcceptDrop\">\n  <ng-content></ng-content>\n\n  <!-- Linha indicadora de drop -->\n  <div class=\"matcha-drop-indicator\"\n       [class.active]=\"showDropIndicator && canAcceptDrop\"\n       [style.top.px]=\"dropIndicatorPosition\">\n  </div>\n\n  <!-- Placeholder para lista vazia -->\n  <div *ngIf=\"isReceivingDrag && dragItems.length === 0\"\n       class=\"matcha-drop-list-placeholder\">\n    <div class=\"matcha-drop-list-empty-placeholder\"\n         [class.can-accept]=\"canAcceptDrop\"\n         [class.cannot-accept]=\"!canAcceptDrop\">\n      <span [class.i-matcha-action_sign_success]=\"canAcceptDrop\"\n            [class.i-matcha-action_sign_error]=\"!canAcceptDrop\"\n            [class.color-green]=\"canAcceptDrop\"\n            [class.color-red]=\"!canAcceptDrop\"\n            class=\"i-size-lg\"></span>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: MatchaDropListService }], propDecorators: { matchaDropListData: [{
@@ -7717,10 +7536,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class MatchaPageLayoutComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaPageLayoutComponent, isStandalone: false, selector: "matcha-page-layout", ngImport: i0, template: "<div class=\"page-layout carded fullwidth\">\n    <!-- TOP BACKGROUND -->\n    <div class=\"top-bg\"></div>\n    <!--/ TOP BACKGROUND -->\n\n    <!-- CENTER -->\n    <div class=\"center pt-24 gap-16\">\n        <!-- CONTENT CARD -->\n        <div class=\"content-card flatten flex-column h-100-p\">\n            <!-- CONTENT -->\n            <div class=\"content flex-column h-100-p\">\n                <div class=\"content-card card-flat flex-column h-100-p background-bg border-radius-0 pb-16\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [":host{display:flex;flex-direction:column;width:100%}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaPageLayoutComponent, isStandalone: false, selector: "matcha-page-layout", ngImport: i0, template: "<div class=\"page-layout carded fullwidth\">\n    <!-- TOP BACKGROUND -->\n    <div class=\"top-bg\"></div>\n    <!--/ TOP BACKGROUND -->\n\n    <!-- CENTER -->\n    <div class=\"center pt-24 gap-16\">\n        <!-- CONTENT CARD -->\n        <div class=\"content-card flatten flex-column h-100-p\">\n            <!-- CONTENT -->\n            <div class=\"content flex-column h-100-p\">\n                <div class=\"content-card card-flat flex-column h-100-p background-bg border-radius-0 pb-16\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [":host{display:flex;flex-direction:column;width:100%}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPageLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPageLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-page-layout', standalone: false, template: "<div class=\"page-layout carded fullwidth\">\n    <!-- TOP BACKGROUND -->\n    <div class=\"top-bg\"></div>\n    <!--/ TOP BACKGROUND -->\n\n    <!-- CENTER -->\n    <div class=\"center pt-24 gap-16\">\n        <!-- CONTENT CARD -->\n        <div class=\"content-card flatten flex-column h-100-p\">\n            <!-- CONTENT -->\n            <div class=\"content flex-column h-100-p\">\n                <div class=\"content-card card-flat flex-column h-100-p background-bg border-radius-0 pb-16\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [":host{display:flex;flex-direction:column;width:100%}\n"] }]
         }] });
@@ -7779,10 +7598,10 @@ class MatchaAvatarComponent {
         }
         return classes;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaAvatarComponent, isStandalone: false, selector: "matcha-avatar", inputs: { src: "src", name: "name", size: "size", color: "color", disabled: "disabled" }, ngImport: i0, template: "<span [class]=\"avatarClasses\">\n    <!-- Imagem do usu\u00E1rio -->\n    <img \n      *ngIf=\"hasImage\" \n      [src]=\"src\" \n      [alt]=\"name || 'Avatar'\"\n      class=\"matcha-avatar-image\">\n    \n    <!-- Iniciais do nome -->\n    <span \n      *ngIf=\"!hasImage && hasName\" \n      class=\"matcha-avatar-initials\">\n      {{ initials }}\n    </span>\n    \n\n    <svg \n      *ngIf=\"showDefaultIcon\"\n      class=\"matcha-avatar-icon\"\n      viewBox=\"0 0 56 56\" \n      fill=\"none\" \n      xmlns=\"http://www.w3.org/2000/svg\">\n      <path \n        fill-rule=\"evenodd\" \n        clip-rule=\"evenodd\" \n        d=\"M28 0C12.544 0 0 12.544 0 28C0 43.456 12.544 56 28 56C43.456 56 56 43.456 56 28C56 12.544 43.456 0 28 0ZM28.0022 8.4C32.6502 8.4 36.4022 12.152 36.4022 16.8C36.4022 21.448 32.6502 25.2 28.0022 25.2C23.3542 25.2 19.6022 21.448 19.6022 16.8C19.6022 12.152 23.3542 8.4 28.0022 8.4ZM28.0022 48.1601C21.0022 48.1601 14.8142 44.5761 11.2022 39.1441C11.2862 33.5721 22.4022 30.5201 28.0022 30.5201C33.5742 30.5201 44.7182 33.5721 44.8022 39.1441C41.1902 44.5761 35.0022 48.1601 28.0022 48.1601Z\" \n        fill=\"currentColor\"/>\n    </svg>\n  </span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAvatarComponent, isStandalone: false, selector: "matcha-avatar", inputs: { src: "src", name: "name", size: "size", color: "color", disabled: "disabled" }, ngImport: i0, template: "<span [class]=\"avatarClasses\">\n    <!-- Imagem do usu\u00E1rio -->\n    <img \n      *ngIf=\"hasImage\" \n      [src]=\"src\" \n      [alt]=\"name || 'Avatar'\"\n      class=\"matcha-avatar-image\">\n    \n    <!-- Iniciais do nome -->\n    <span \n      *ngIf=\"!hasImage && hasName\" \n      class=\"matcha-avatar-initials\">\n      {{ initials }}\n    </span>\n    \n\n    <svg \n      *ngIf=\"showDefaultIcon\"\n      class=\"matcha-avatar-icon\"\n      viewBox=\"0 0 56 56\" \n      fill=\"none\" \n      xmlns=\"http://www.w3.org/2000/svg\">\n      <path \n        fill-rule=\"evenodd\" \n        clip-rule=\"evenodd\" \n        d=\"M28 0C12.544 0 0 12.544 0 28C0 43.456 12.544 56 28 56C43.456 56 56 43.456 56 28C56 12.544 43.456 0 28 0ZM28.0022 8.4C32.6502 8.4 36.4022 12.152 36.4022 16.8C36.4022 21.448 32.6502 25.2 28.0022 25.2C23.3542 25.2 19.6022 21.448 19.6022 16.8C19.6022 12.152 23.3542 8.4 28.0022 8.4ZM28.0022 48.1601C21.0022 48.1601 14.8142 44.5761 11.2022 39.1441C11.2862 33.5721 22.4022 30.5201 28.0022 30.5201C33.5742 30.5201 44.7182 33.5721 44.8022 39.1441C41.1902 44.5761 35.0022 48.1601 28.0022 48.1601Z\" \n        fill=\"currentColor\"/>\n    </svg>\n  </span>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-avatar', standalone: false, template: "<span [class]=\"avatarClasses\">\n    <!-- Imagem do usu\u00E1rio -->\n    <img \n      *ngIf=\"hasImage\" \n      [src]=\"src\" \n      [alt]=\"name || 'Avatar'\"\n      class=\"matcha-avatar-image\">\n    \n    <!-- Iniciais do nome -->\n    <span \n      *ngIf=\"!hasImage && hasName\" \n      class=\"matcha-avatar-initials\">\n      {{ initials }}\n    </span>\n    \n\n    <svg \n      *ngIf=\"showDefaultIcon\"\n      class=\"matcha-avatar-icon\"\n      viewBox=\"0 0 56 56\" \n      fill=\"none\" \n      xmlns=\"http://www.w3.org/2000/svg\">\n      <path \n        fill-rule=\"evenodd\" \n        clip-rule=\"evenodd\" \n        d=\"M28 0C12.544 0 0 12.544 0 28C0 43.456 12.544 56 28 56C43.456 56 56 43.456 56 28C56 12.544 43.456 0 28 0ZM28.0022 8.4C32.6502 8.4 36.4022 12.152 36.4022 16.8C36.4022 21.448 32.6502 25.2 28.0022 25.2C23.3542 25.2 19.6022 21.448 19.6022 16.8C19.6022 12.152 23.3542 8.4 28.0022 8.4ZM28.0022 48.1601C21.0022 48.1601 14.8142 44.5761 11.2022 39.1441C11.2862 33.5721 22.4022 30.5201 28.0022 30.5201C33.5742 30.5201 44.7182 33.5721 44.8022 39.1441C41.1902 44.5761 35.0022 48.1601 28.0022 48.1601Z\" \n        fill=\"currentColor\"/>\n    </svg>\n  </span>" }]
         }], propDecorators: { src: [{
@@ -7871,10 +7690,10 @@ class MatchaOptionComponent {
     getTextContent() {
         return this.elRef.nativeElement.textContent?.trim() || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaOptionComponent, deps: [{ token: MATCHA_OPTION_PARENT, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaOptionComponent, isStandalone: false, selector: "matcha-option", inputs: { value: "value", disabled: "disabled" }, outputs: { optionClick: "optionClick", optionSelect: "optionSelect" }, host: { attributes: { "role": "option", "tabindex": "0" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-selected": "this.selected" }, classAttribute: "matcha-option" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaOptionComponent, deps: [{ token: MATCHA_OPTION_PARENT, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaOptionComponent, isStandalone: false, selector: "matcha-option", inputs: { value: "value", disabled: "disabled" }, outputs: { optionClick: "optionClick", optionSelect: "optionSelect" }, host: { attributes: { "role": "option", "tabindex": "0" }, listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-selected": "this.selected" }, classAttribute: "matcha-option" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaOptionComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'matcha-option',
@@ -8057,8 +7876,8 @@ class MatchaPanelComponent {
             this.resizeListener = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaPanelComponent, isStandalone: false, selector: "matcha-panel", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth", offset: "offset", triggerElement: "triggerElement", open: "open" }, outputs: { opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaPanelComponent, isStandalone: false, selector: "matcha-panel", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth", offset: "offset", triggerElement: "triggerElement", open: "open" }, outputs: { opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div class="matcha-panel-container" style="position: relative;">
       <ng-container *ngIf="open">
         <!-- Painel -->
@@ -8077,7 +7896,7 @@ class MatchaPanelComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPanelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'matcha-panel',
@@ -8307,10 +8126,10 @@ class MatchaAutocompleteComponent {
         });
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAutocompleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaAutocompleteComponent, isStandalone: false, selector: "matcha-autocomplete", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<matcha-panel\n    #panel\n    [open]=\"open\"\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [triggerElement]=\"triggerElement\"\n    (opened)=\"opened.emit()\"\n    (closed)=\"closed.emit()\">\n    <div class=\"matcha-panel-content flex-column\">\n        <ng-content></ng-content>\n    </div>\n</matcha-panel>\n", dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAutocompleteComponent, isStandalone: false, selector: "matcha-autocomplete", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth" }, outputs: { opened: "opened", closed: "closed" }, queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<matcha-panel\n    #panel\n    [open]=\"open\"\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [triggerElement]=\"triggerElement\"\n    (opened)=\"opened.emit()\"\n    (closed)=\"closed.emit()\">\n    <div class=\"matcha-panel-content flex-column\">\n        <ng-content></ng-content>\n    </div>\n</matcha-panel>\n", dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-autocomplete', encapsulation: ViewEncapsulation.None, standalone: false, template: "<matcha-panel\n    #panel\n    [open]=\"open\"\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [triggerElement]=\"triggerElement\"\n    (opened)=\"opened.emit()\"\n    (closed)=\"closed.emit()\">\n    <div class=\"matcha-panel-content flex-column\">\n        <ng-content></ng-content>\n    </div>\n</matcha-panel>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{
@@ -8730,8 +8549,8 @@ class MatchaSelectComponent {
         this.isDisabled = isDisabled;
         this.cdr.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaSelectComponent, isStandalone: false, selector: "matcha-select", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth", placeholder: "placeholder", disabled: "disabled" }, outputs: { opened: "opened", closed: "closed", selectionChange: "selectionChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaSelectComponent, isStandalone: false, selector: "matcha-select", inputs: { placement: "placement", maxHeight: "maxHeight", minWidth: "minWidth", placeholder: "placeholder", disabled: "disabled" }, outputs: { opened: "opened", closed: "closed", selectionChange: "selectionChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaSelectComponent),
@@ -8739,7 +8558,7 @@ class MatchaSelectComponent {
             }
         ], queries: [{ propertyName: "options", predicate: MatchaOptionComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: MatchaPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"matcha-select-container\" [class.matcha-select-disabled]=\"disabled || isDisabled\">\n  <div\n    class=\"matcha-select-trigger\"\n    [class.matcha-select-open]=\"open\"\n    [class.matcha-select-disabled]=\"disabled || isDisabled\"\n    (click)=\"onTriggerClick()\"\n    [attr.tabindex]=\"(disabled || isDisabled) ? -1 : 0\"\n    role=\"combobox\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"true\"\n    [attr.aria-disabled]=\"disabled || isDisabled\">\n\n    <span class=\"matcha-select-value\" [class.matcha-select-placeholder]=\"!selectedValue\">\n      {{ getSelectedLabel() || placeholder }}\n    </span>\n\n    <span class=\"matcha-select-arrow\" [class.matcha-select-arrow-open]=\"open\">\n      <span class=\"i-matcha-action_arrow_down\"></span>\n    </span>\n  </div>\n\n  <matcha-panel\n    #panel\n    [placement]=\"placement\"\n    [maxHeight]=\"maxHeight\"\n    [minWidth]=\"minWidth\"\n    [open]=\"open\">\n    <ng-content></ng-content>\n  </matcha-panel>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatchaPanelComponent, selector: "matcha-panel", inputs: ["placement", "maxHeight", "minWidth", "offset", "triggerElement", "open"], outputs: ["opened", "closed"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-select', encapsulation: ViewEncapsulation.None, standalone: false, providers: [
                         {
@@ -8801,10 +8620,10 @@ class MatchaPaginatorIntl {
             return `Página ${page + 1} de ${amountPages}`;
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPaginatorIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPaginatorIntl, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPaginatorIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPaginatorIntl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPaginatorIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPaginatorIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -8924,10 +8743,10 @@ class MatchaPaginatorComponent {
         };
         this.page.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPaginatorComponent, deps: [{ token: MatchaPaginatorIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaPaginatorComponent, isStandalone: false, selector: "matcha-paginator", inputs: { pageIndex: "pageIndex", length: "length", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", color: "color" }, outputs: { page: "page" }, ngImport: i0, template: "<div class=\"matcha-paginator flex-row flex-align-center gap-16\">\n    <!-- Items per page selector -->\n    <div class=\"flex-row flex-align-center gap-8\" *ngIf=\"pageSizeOptions && pageSizeOptions.length > 0\">\n      <span class=\"text-sm color-placeholder\">{{ _intl.itemsPerPageLabel }}</span>\n      <div class=\"page-size-selector\">\n        <select \n          class=\"page-size-select radius-8\" \n          [value]=\"pageSize\" \n          (change)=\"onPageSizeChange($event)\">\n          <option *ngFor=\"let option of pageSizeOptions\" [value]=\"option\">\n            {{ option }}\n          </option>\n        </select>\n        <div class=\"select-icon\">\n          <matcha-icon name=\"action_arrow_down\" size=\"sm\" color=\"fg\"></matcha-icon>\n        </div>\n      </div>\n    </div>\n  \n    <!-- Page navigation -->\n    <div class=\"flex-row flex-align-center gap-8\">\n      <!-- Previous page button -->\n      <button \n        class=\"nav-button\" \n        [disabled]=\"!hasPreviousPage\"\n        (click)=\"previousPage()\"\n        [attr.aria-label]=\"_intl.previousPageLabel\">\n        <matcha-icon name=\"action_arrow_left\" size=\"md\"></matcha-icon>\n      </button>\n  \n      <!-- Page numbers -->\n      <div class=\"flex-row flex-align-center gap-4\">\n        <ng-container *ngFor=\"let page of displayPages; trackBy: trackByPage\">\n          <button \n            *ngIf=\"isNumber(page); else ellipsis\"\n            class=\"page-button\"\n            [class.active]=\"page === currentPage\"\n            [class.radius-full]=\"page === currentPage\"\n            [ngClass]=\"page === currentPage ? color : ''\"\n            (click)=\"goToPage(page)\"\n            [attr.aria-label]=\"'Ir para p\u00E1gina ' + page\">\n            {{ page }}\n          </button>\n          <ng-template #ellipsis>\n            <span class=\"ellipsis\">{{ page }}</span>\n          </ng-template>\n        </ng-container>\n      </div>\n  \n      <!-- Next page button -->\n      <button \n        class=\"nav-button\" \n        [disabled]=\"!hasNextPage\"\n        (click)=\"nextPage()\"\n        [attr.aria-label]=\"_intl.nextPageLabel\">\n        <matcha-icon name=\"action_arrow_right\" size=\"md\"></matcha-icon>\n      </button>\n    </div>\n  </div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPaginatorComponent, deps: [{ token: MatchaPaginatorIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaPaginatorComponent, isStandalone: false, selector: "matcha-paginator", inputs: { pageIndex: "pageIndex", length: "length", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", color: "color" }, outputs: { page: "page" }, ngImport: i0, template: "<div class=\"matcha-paginator flex-row flex-align-center gap-16\">\n    <!-- Items per page selector -->\n    <div class=\"flex-row flex-align-center gap-8\" *ngIf=\"pageSizeOptions && pageSizeOptions.length > 0\">\n      <span class=\"text-sm color-placeholder\">{{ _intl.itemsPerPageLabel }}</span>\n      <div class=\"page-size-selector\">\n        <select \n          class=\"page-size-select radius-8\" \n          [value]=\"pageSize\" \n          (change)=\"onPageSizeChange($event)\">\n          <option *ngFor=\"let option of pageSizeOptions\" [value]=\"option\">\n            {{ option }}\n          </option>\n        </select>\n        <div class=\"select-icon\">\n          <matcha-icon name=\"action_arrow_down\" size=\"sm\" color=\"fg\"></matcha-icon>\n        </div>\n      </div>\n    </div>\n  \n    <!-- Page navigation -->\n    <div class=\"flex-row flex-align-center gap-8\">\n      <!-- Previous page button -->\n      <button \n        class=\"nav-button\" \n        [disabled]=\"!hasPreviousPage\"\n        (click)=\"previousPage()\"\n        [attr.aria-label]=\"_intl.previousPageLabel\">\n        <matcha-icon name=\"action_arrow_left\" size=\"md\"></matcha-icon>\n      </button>\n  \n      <!-- Page numbers -->\n      <div class=\"flex-row flex-align-center gap-4\">\n        <ng-container *ngFor=\"let page of displayPages; trackBy: trackByPage\">\n          <button \n            *ngIf=\"isNumber(page); else ellipsis\"\n            class=\"page-button\"\n            [class.active]=\"page === currentPage\"\n            [class.radius-full]=\"page === currentPage\"\n            [ngClass]=\"page === currentPage ? color : ''\"\n            (click)=\"goToPage(page)\"\n            [attr.aria-label]=\"'Ir para p\u00E1gina ' + page\">\n            {{ page }}\n          </button>\n          <ng-template #ellipsis>\n            <span class=\"ellipsis\">{{ page }}</span>\n          </ng-template>\n        </ng-container>\n      </div>\n  \n      <!-- Next page button -->\n      <button \n        class=\"nav-button\" \n        [disabled]=\"!hasNextPage\"\n        (click)=\"nextPage()\"\n        [attr.aria-label]=\"_intl.nextPageLabel\">\n        <matcha-icon name=\"action_arrow_right\" size=\"md\"></matcha-icon>\n      </button>\n    </div>\n  </div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-paginator', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"matcha-paginator flex-row flex-align-center gap-16\">\n    <!-- Items per page selector -->\n    <div class=\"flex-row flex-align-center gap-8\" *ngIf=\"pageSizeOptions && pageSizeOptions.length > 0\">\n      <span class=\"text-sm color-placeholder\">{{ _intl.itemsPerPageLabel }}</span>\n      <div class=\"page-size-selector\">\n        <select \n          class=\"page-size-select radius-8\" \n          [value]=\"pageSize\" \n          (change)=\"onPageSizeChange($event)\">\n          <option *ngFor=\"let option of pageSizeOptions\" [value]=\"option\">\n            {{ option }}\n          </option>\n        </select>\n        <div class=\"select-icon\">\n          <matcha-icon name=\"action_arrow_down\" size=\"sm\" color=\"fg\"></matcha-icon>\n        </div>\n      </div>\n    </div>\n  \n    <!-- Page navigation -->\n    <div class=\"flex-row flex-align-center gap-8\">\n      <!-- Previous page button -->\n      <button \n        class=\"nav-button\" \n        [disabled]=\"!hasPreviousPage\"\n        (click)=\"previousPage()\"\n        [attr.aria-label]=\"_intl.previousPageLabel\">\n        <matcha-icon name=\"action_arrow_left\" size=\"md\"></matcha-icon>\n      </button>\n  \n      <!-- Page numbers -->\n      <div class=\"flex-row flex-align-center gap-4\">\n        <ng-container *ngFor=\"let page of displayPages; trackBy: trackByPage\">\n          <button \n            *ngIf=\"isNumber(page); else ellipsis\"\n            class=\"page-button\"\n            [class.active]=\"page === currentPage\"\n            [class.radius-full]=\"page === currentPage\"\n            [ngClass]=\"page === currentPage ? color : ''\"\n            (click)=\"goToPage(page)\"\n            [attr.aria-label]=\"'Ir para p\u00E1gina ' + page\">\n            {{ page }}\n          </button>\n          <ng-template #ellipsis>\n            <span class=\"ellipsis\">{{ page }}</span>\n          </ng-template>\n        </ng-container>\n      </div>\n  \n      <!-- Next page button -->\n      <button \n        class=\"nav-button\" \n        [disabled]=\"!hasNextPage\"\n        (click)=\"nextPage()\"\n        [attr.aria-label]=\"_intl.nextPageLabel\">\n        <matcha-icon name=\"action_arrow_right\" size=\"md\"></matcha-icon>\n      </button>\n    </div>\n  </div>" }]
         }], ctorParameters: () => [{ type: MatchaPaginatorIntl }, { type: i0.ChangeDetectorRef }], propDecorators: { pageIndex: [{
@@ -9049,10 +8868,10 @@ class CopyButtonComponent {
         this.currentIcon = this.icon;
         this.isCopied = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CopyButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: CopyButtonComponent, isStandalone: false, selector: "matcha-copy-button", inputs: { type: "type", size: "size", icon: "icon", position: "position", customClass: "customClass" }, outputs: { copied: "copied" }, ngImport: i0, template: "<button\n    matcha-button\n    [size]=\"size\"\n    pill=\"true\"\n    icon=\"true\"\n    [class]=\"getButtonClasses()\"\n    (click)=\"copyToClipboard()\"\n    [title]=\"'Copiar c\u00F3digo ' + type\">\n    <matcha-icon [name]=\"currentIcon\" [size]=\"size === 'tiny' ? 'small' : size\"></matcha-icon>\n</button>\n\n\n", styles: [".position-absolute{position:absolute}.position-relative{position:relative}.top-8{top:8px}.right-8{right:8px}.m-8{margin:8px}.z-index-10{z-index:10}\n"], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }, { kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "color", "basic", "outline", "alpha", "pill", "link", "icon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CopyButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: CopyButtonComponent, isStandalone: false, selector: "matcha-copy-button", inputs: { type: "type", size: "size", icon: "icon", position: "position", customClass: "customClass" }, outputs: { copied: "copied" }, ngImport: i0, template: "<button\n    matcha-button\n    [size]=\"size\"\n    pill=\"true\"\n    icon=\"true\"\n    [class]=\"getButtonClasses()\"\n    (click)=\"copyToClipboard()\"\n    [title]=\"'Copiar c\u00F3digo ' + type\">\n    <matcha-icon [name]=\"currentIcon\" [size]=\"size === 'tiny' ? 'small' : size\"></matcha-icon>\n</button>\n\n\n", styles: [".position-absolute{position:absolute}.position-relative{position:relative}.top-8{top:8px}.right-8{right:8px}.m-8{margin:8px}.z-index-10{z-index:10}\n"], dependencies: [{ kind: "component", type: MatchaIconComponent, selector: "matcha-icon", inputs: ["name", "size", "color", "class", "loading"] }, { kind: "component", type: MatchaButtonComponent, selector: "[matcha-button]", inputs: ["size", "size-xs", "size-sm", "size-md", "size-lg", "size-xl", "gap", "color", "basic", "outline", "alpha", "pill", "link", "icon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: CopyButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: CopyButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-copy-button', standalone: false, template: "<button\n    matcha-button\n    [size]=\"size\"\n    pill=\"true\"\n    icon=\"true\"\n    [class]=\"getButtonClasses()\"\n    (click)=\"copyToClipboard()\"\n    [title]=\"'Copiar c\u00F3digo ' + type\">\n    <matcha-icon [name]=\"currentIcon\" [size]=\"size === 'tiny' ? 'small' : size\"></matcha-icon>\n</button>\n\n\n", styles: [".position-absolute{position:absolute}.position-relative{position:relative}.top-8{top:8px}.right-8{right:8px}.m-8{margin:8px}.z-index-10{z-index:10}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
@@ -9262,8 +9081,8 @@ class MatchaHighlightComponent {
                 '<pre><code class="highlight language-' + this.lang + '">' + highlightedCode + '</code></pre>';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaHighlightComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaHighlightComponent, isStandalone: false, selector: "matcha-highlight", inputs: { lang: "lang", path: "path", theme: "theme" }, host: { properties: { "attr.theme": "this.themeAttr" } }, queries: [{ propertyName: "source", first: true, predicate: ["source"], descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaHighlightComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaHighlightComponent, isStandalone: false, selector: "matcha-highlight", inputs: { lang: "lang", path: "path", theme: "theme" }, host: { properties: { "attr.theme": "this.themeAttr" } }, queries: [{ propertyName: "source", first: true, predicate: ["source"], descendants: true, static: true }], ngImport: i0, template: `
         <matcha-copy-button [type]="lang" class="copy-button"></matcha-copy-button>
         <div class="matcha-highlight-container">
             <div class="highlight-content">
@@ -9272,7 +9091,7 @@ class MatchaHighlightComponent {
         </div>
     `, isInline: true, dependencies: [{ kind: "component", type: CopyButtonComponent, selector: "matcha-copy-button", inputs: ["type", "size", "icon", "position", "customClass"], outputs: ["copied"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaHighlightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaHighlightComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'matcha-highlight',
@@ -9307,7 +9126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
 class MatchaSliderComponent {
     set highValue(val) {
         this._highValue = val;
-        if (val !== null && val !== undefined) {
+        if (val !== null && val !== undefined && val !== 0) {
             this.isRangeInternal = true;
         }
     }
@@ -9431,7 +9250,7 @@ class MatchaSliderComponent {
         this.cancelAnimationFrame();
     }
     initializeValues() {
-        if (this.isRange && this.highValue === 0) {
+        if (this.isRange && this._highValue === 0) {
             this.highValue = this.mergedOptions.ceil;
         }
     }
@@ -9744,8 +9563,8 @@ class MatchaSliderComponent {
     formatValue(value) {
         return this.mergedOptions.format ? this.mergedOptions.format(value) : value.toString();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSliderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaSliderComponent, isStandalone: false, selector: "matcha-slider", inputs: { value: "value", highValue: "highValue", options: "options", color: "color", disabled: "disabled" }, outputs: { valueChange: "valueChange", highValueChange: "highValueChange", userChange: "userChange", userChangeEnd: "userChangeEnd" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSliderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaSliderComponent, isStandalone: false, selector: "matcha-slider", inputs: { value: "value", highValue: "highValue", options: "options", color: "color", disabled: "disabled" }, outputs: { valueChange: "valueChange", highValueChange: "highValueChange", userChange: "userChange", userChangeEnd: "userChangeEnd" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MatchaSliderComponent),
@@ -9753,7 +9572,7 @@ class MatchaSliderComponent {
             }
         ], viewQueries: [{ propertyName: "sliderElement", first: true, predicate: ["sliderElement"], descendants: true }], ngImport: i0, template: "<!-- projects/matcha-components/src/lib/matcha-slider/slider/slider.component.html -->\n\n<div class=\"matcha-slider\" [class.disabled]=\"isDisabled\" [class.range]=\"isRange\"\n    [attr.data-color]=\"color\" #sliderElement>\n\n    <div class=\"limit-labels\" *ngIf=\"!mergedOptions.hideLimitLabels\">\n        <span class=\"floor-label\" [style.visibility]=\"isAtMinValue ? 'hidden' : 'visible'\">\n            {{ formatValue(mergedOptions.floor || 0) }}\n        </span>\n        \n        <span class=\"ceil-label\" [style.visibility]=\"isAtMaxValue ? 'hidden' : 'visible'\">\n            {{ formatValue(mergedOptions.ceil || 100) }}\n        </span>\n    </div>\n    \n    <div class=\"slider-track\" (mousedown)=\"onTrackMouseDown($event)\" (click)=\"onTrackClick($event)\">\n\n        <div class=\"selection-bar\" [style]=\"selectionBarStyle\" *ngIf=\"mergedOptions.showSelectionBar\">\n        </div>\n\n        <div class=\"pointer low-pointer\" [style]=\"getPointerStyle(false)\"\n            [attr.tabindex]=\"isDisabled ? -1 : 0\"\n            (mousedown)=\"onPointerMouseDown($event, false)\" (click)=\"onPointerClick($event, false)\"\n            (keydown)=\"onKeyDown($event)\" role=\"slider\" [attr.aria-valuemin]=\"mergedOptions.floor\"\n            [attr.aria-valuemax]=\"mergedOptions.ceil\" [attr.aria-valuenow]=\"value\"\n            [attr.aria-disabled]=\"isDisabled\">\n\n            <div class=\"pointer-label\" *ngIf=\"!mergedOptions.hidePointerLabels\">\n                {{ formatValue(value) }}\n            </div>\n        </div>\n\n        <div class=\"pointer high-pointer\" [style]=\"getPointerStyle(true)\"\n            [attr.tabindex]=\"isDisabled ? -1 : 0\" (mousedown)=\"onPointerMouseDown($event, true)\"\n            (click)=\"onPointerClick($event, true)\" (keydown)=\"onKeyDown($event)\" role=\"slider\"\n            [attr.aria-valuemin]=\"mergedOptions.floor\" [attr.aria-valuemax]=\"mergedOptions.ceil\"\n            [attr.aria-valuenow]=\"highValue\" [attr.aria-disabled]=\"isDisabled\" *ngIf=\"isRange\">\n\n            <div class=\"pointer-label\" *ngIf=\"!mergedOptions.hidePointerLabels\">\n                {{ formatValue(highValue) }}\n            </div>\n        </div>\n    </div>\n\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-slider', standalone: false, changeDetection: ChangeDetectionStrategy.Default, providers: [
                         {
@@ -9970,10 +9789,10 @@ class MatchaTooltipDirective {
         this.isDestroyed = true;
         this.destroyTooltip();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaTooltipDirective, isStandalone: false, selector: "[matchaTooltip]", inputs: { tooltipText: ["matchaTooltip", "tooltipText"], tooltipDisabled: ["matchaTooltipDisabled", "tooltipDisabled"], preferAbove: ["matchaTooltipAbove", "preferAbove"], preferBelow: ["matchaTooltipBelow", "preferBelow"], preferLeft: ["matchaTooltipLeft", "preferLeft"], preferRight: ["matchaTooltipRight", "preferRight"], tooltipEnableClose: ["matchaTooltipEnableClose", "tooltipEnableClose"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick($event)" }, properties: { "attr.tooltip-disabled": "this.tooltipDisabledAttr", "attr.tooltip-above": "this.preferAboveAttr", "attr.tooltip-below": "this.preferBelowAttr", "attr.tooltip-left": "this.preferLeftAttr", "attr.tooltip-right": "this.preferRightAttr", "attr.tooltip-enable-close": "this.tooltipEnableCloseAttr" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaTooltipDirective, isStandalone: false, selector: "[matchaTooltip]", inputs: { tooltipText: ["matchaTooltip", "tooltipText"], tooltipDisabled: ["matchaTooltipDisabled", "tooltipDisabled"], preferAbove: ["matchaTooltipAbove", "preferAbove"], preferBelow: ["matchaTooltipBelow", "preferBelow"], preferLeft: ["matchaTooltipLeft", "preferLeft"], preferRight: ["matchaTooltipRight", "preferRight"], tooltipEnableClose: ["matchaTooltipEnableClose", "tooltipEnableClose"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick($event)" }, properties: { "attr.tooltip-disabled": "this.tooltipDisabledAttr", "attr.tooltip-above": "this.preferAboveAttr", "attr.tooltip-below": "this.preferBelowAttr", "attr.tooltip-left": "this.preferLeftAttr", "attr.tooltip-right": "this.preferRightAttr", "attr.tooltip-enable-close": "this.tooltipEnableCloseAttr" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaTooltip]',
@@ -10030,11 +9849,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class MatchaTooltipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaTooltipModule, declarations: [MatchaTooltipDirective], imports: [CommonModule], exports: [MatchaTooltipDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTooltipModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaTooltipModule, declarations: [MatchaTooltipDirective], imports: [CommonModule], exports: [MatchaTooltipDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTooltipModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaTooltipDirective],
@@ -10044,11 +9863,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaIconModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaIconModule, declarations: [MatchaIconComponent], imports: [CommonModule, MatchaTooltipModule], exports: [MatchaIconComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaIconModule, imports: [CommonModule, MatchaTooltipModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaIconModule, declarations: [MatchaIconComponent], imports: [CommonModule, MatchaTooltipModule], exports: [MatchaIconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaIconModule, imports: [CommonModule, MatchaTooltipModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaIconModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaIconComponent],
@@ -10058,11 +9877,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaTitleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTitleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaTitleModule, declarations: [MatchaTitleComponent], imports: [CommonModule], exports: [MatchaTitleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTitleModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTitleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaTitleModule, declarations: [MatchaTitleComponent], imports: [CommonModule], exports: [MatchaTitleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTitleModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTitleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTitleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaTitleComponent],
@@ -10072,11 +9891,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaDividerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaDividerModule, declarations: [MatchaDividerComponent], imports: [CommonModule], exports: [MatchaDividerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDividerModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaDividerModule, declarations: [MatchaDividerComponent], imports: [CommonModule], exports: [MatchaDividerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDividerModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDividerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDividerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -10090,11 +9909,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaButtonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaButtonModule, declarations: [MatchaButtonComponent], exports: [MatchaButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaButtonModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaButtonModule, declarations: [MatchaButtonComponent], exports: [MatchaButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaButtonModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaButtonComponent],
@@ -10104,8 +9923,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaAccordionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaAccordionModule, declarations: [MatchaAccordionComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionModule, declarations: [MatchaAccordionComponent,
             MatchaAccordionItemComponent,
             MatchaAccordionHeaderComponent,
             MatchaAccordionContentComponent], imports: [CommonModule,
@@ -10117,14 +9936,14 @@ class MatchaAccordionModule {
             MatchaAccordionItemComponent,
             MatchaAccordionHeaderComponent,
             MatchaAccordionContentComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAccordionModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionModule, imports: [CommonModule,
             MatchaIconModule,
             MatchaTitleModule,
             MatchaDividerModule,
             MatchaTooltipModule,
             MatchaButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -10151,11 +9970,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaInfiniteScrollModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaInfiniteScrollModule, declarations: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent], imports: [CommonModule], exports: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInfiniteScrollModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaInfiniteScrollModule, declarations: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent], imports: [CommonModule], exports: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInfiniteScrollModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInfiniteScrollModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInfiniteScrollModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent],
@@ -10167,11 +9986,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaLazyloadModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaLazyloadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaLazyloadModule, declarations: [MatchaLazyloadComponent, MatchaLazyloadDataComponent], imports: [CommonModule], exports: [MatchaLazyloadComponent, MatchaLazyloadDataComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaLazyloadModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLazyloadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaLazyloadModule, declarations: [MatchaLazyloadComponent, MatchaLazyloadDataComponent], imports: [CommonModule], exports: [MatchaLazyloadComponent, MatchaLazyloadDataComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLazyloadModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaLazyloadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaLazyloadModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaLazyloadComponent, MatchaLazyloadDataComponent],
@@ -10205,10 +10024,10 @@ class MatchaElevationDirective {
             this._renderer.addClass(this._elementRef.nativeElement, `elevation-z-0`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaElevationDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaElevationDirective, isStandalone: false, selector: "[elevation]", inputs: { elevation: "elevation" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaElevationDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaElevationDirective, isStandalone: false, selector: "[elevation]", inputs: { elevation: "elevation" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaElevationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaElevationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elevation]',
@@ -10220,11 +10039,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class MatchaElevationModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaElevationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaElevationModule, declarations: [MatchaElevationDirective], imports: [CommonModule], exports: [MatchaElevationDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaElevationModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaElevationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaElevationModule, declarations: [MatchaElevationDirective], imports: [CommonModule], exports: [MatchaElevationDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaElevationModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaElevationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaElevationModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaElevationDirective],
@@ -10352,10 +10171,10 @@ class MatchaOverlayService {
             this.removeOverlayContainer();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaOverlayService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaOverlayService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaOverlayService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaOverlayService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaOverlayService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaOverlayService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -10391,10 +10210,10 @@ class MatchaModalService {
     getData() {
         return this.currentData;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalService, deps: [{ token: MatchaOverlayService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalService, deps: [{ token: MatchaOverlayService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -10402,8 +10221,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }], ctorParameters: () => [{ type: MatchaOverlayService }] });
 
 class MatchaModalModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalModule, declarations: [MatchaModalHeaderComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalModule, declarations: [MatchaModalHeaderComponent,
             MatchaModalContentComponent,
             MatchaModalFooterComponent,
             MatchaModalOptionsComponent,
@@ -10417,7 +10236,7 @@ class MatchaModalModule {
             MatchaModalFooterComponent,
             MatchaModalOptionsComponent,
             MatchaModalComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalModule, providers: [
             MatchaModalService,
             MatchaOverlayService
         ], imports: [CommonModule,
@@ -10427,7 +10246,7 @@ class MatchaModalModule {
             MatchaTooltipModule,
             MatchaElevationModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaModalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaModalModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -10460,21 +10279,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaCardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaCardModule, declarations: [MatchaCardComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaCardModule, declarations: [MatchaCardComponent], imports: [CommonModule,
             MatchaElevationModule,
             MatchaIconModule,
             MatchaTitleModule,
             MatchaDividerModule,
             MatchaTooltipModule], exports: [MatchaCardComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaCardModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaCardModule, imports: [CommonModule,
             MatchaElevationModule,
             MatchaIconModule,
             MatchaTitleModule,
             MatchaDividerModule,
             MatchaTooltipModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaCardModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaCardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaCardComponent],
@@ -10491,11 +10310,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaMasonryModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMasonryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaMasonryModule, declarations: [MatchaMasonryComponent], imports: [CommonModule], exports: [MatchaMasonryComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMasonryModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMasonryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaMasonryModule, declarations: [MatchaMasonryComponent], imports: [CommonModule], exports: [MatchaMasonryComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMasonryModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMasonryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMasonryModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaMasonryComponent],
@@ -10505,13 +10324,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaButtonToggleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaButtonToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaButtonToggleModule, declarations: [MatchaButtonToggleComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaButtonToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaButtonToggleModule, declarations: [MatchaButtonToggleComponent], imports: [CommonModule,
             MatchaTooltipModule], exports: [MatchaButtonToggleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaButtonToggleModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaButtonToggleModule, imports: [CommonModule,
             MatchaTooltipModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaButtonToggleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaButtonToggleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaButtonToggleComponent],
@@ -10524,8 +10343,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaToolbarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaToolbarModule, declarations: [MatchaToolbarComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarModule, declarations: [MatchaToolbarComponent,
             MatchaToolbarButtonComponent,
             MatchaToolbarContentComponent,
             MatchaToolbarMainButtonComponent,
@@ -10538,12 +10357,12 @@ class MatchaToolbarModule {
             MatchaToolbarMainButtonComponent,
             MatchaToolbarCustomButtonComponent,
             MatchaTitleModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaToolbarModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarModule, imports: [CommonModule,
             MatchaButtonModule,
             MatchaTitleModule,
             MatchaTooltipModule, MatchaTitleModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaToolbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaToolbarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -10571,11 +10390,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaGridModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaGridModule, declarations: [MatchaGridComponent], imports: [CommonModule], exports: [MatchaGridComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaGridModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaGridModule, declarations: [MatchaGridComponent], imports: [CommonModule], exports: [MatchaGridComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaGridModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaGridModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaGridModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaGridComponent],
@@ -10585,11 +10404,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaFormFieldModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaFormFieldModule, declarations: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent], imports: [CommonModule, MatchaIconModule], exports: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaFormFieldModule, imports: [CommonModule, MatchaIconModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldModule, declarations: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent], imports: [CommonModule, MatchaIconModule], exports: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldModule, imports: [CommonModule, MatchaIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaFormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaFormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaFormFieldComponent, MatchaLabelComponent, MatchaErrorComponent],
@@ -10718,10 +10537,10 @@ class MatchaAutocompleteTriggerDirective {
             }, 10);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAutocompleteTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaAutocompleteTriggerDirective, isStandalone: false, selector: "[matchaAutocomplete]", inputs: { panel: ["matchaAutocomplete", "panel"] }, host: { listeners: { "click": "onClick()", "focus": "onFocus()", "input": "onInput($event)", "keydown": "onKeydown($event)", "document:click": "onDocClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaAutocompleteTriggerDirective, isStandalone: false, selector: "[matchaAutocomplete]", inputs: { panel: ["matchaAutocomplete", "panel"] }, host: { listeners: { "click": "onClick()", "focus": "onFocus()", "input": "onInput($event)", "keydown": "onKeydown($event)", "document:click": "onDocClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAutocompleteTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaAutocomplete]',
@@ -10748,11 +10567,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class MatchaOptionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaOptionModule, declarations: [MatchaOptionComponent], imports: [CommonModule], exports: [MatchaOptionComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaOptionModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaOptionModule, declarations: [MatchaOptionComponent], imports: [CommonModule], exports: [MatchaOptionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaOptionModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaOptionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaOptionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -10768,11 +10587,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaPanelModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaPanelModule, declarations: [MatchaPanelComponent], imports: [CommonModule], exports: [MatchaPanelComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPanelModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaPanelModule, declarations: [MatchaPanelComponent], imports: [CommonModule], exports: [MatchaPanelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPanelModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPanelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -10788,15 +10607,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaAutocompleteModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaAutocompleteModule, declarations: [MatchaAutocompleteComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteModule, declarations: [MatchaAutocompleteComponent,
             MatchaAutocompleteTriggerDirective], imports: [CommonModule,
             MatchaOptionModule,
             MatchaPanelModule], exports: [MatchaAutocompleteComponent,
             MatchaAutocompleteTriggerDirective,
             MatchaOptionModule // Re-exporta para conveniência
         ] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAutocompleteModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteModule, providers: [
             // Provider para permitir injeção da interface MatchaOptionParent
             { provide: MATCHA_OPTION_PARENT, useExisting: MatchaAutocompleteComponent }
         ], imports: [CommonModule,
@@ -10804,7 +10623,7 @@ class MatchaAutocompleteModule {
             MatchaPanelModule, MatchaOptionModule // Re-exporta para conveniência
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAutocompleteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAutocompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -10943,10 +10762,10 @@ class MatchaSelectTriggerDirective {
             }, 10);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSelectTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaSelectTriggerDirective, isStandalone: false, selector: "[matchaSelect]", inputs: { select: ["matchaSelect", "select"] }, host: { listeners: { "click": "onClick()", "focus": "onFocus()", "keydown": "onKeydown($event)", "document:click": "onDocClick($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSelectTriggerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaSelectTriggerDirective, isStandalone: false, selector: "[matchaSelect]", inputs: { select: ["matchaSelect", "select"] }, host: { listeners: { "click": "onClick()", "focus": "onFocus()", "keydown": "onKeydown($event)", "document:click": "onDocClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSelectTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSelectTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaSelect]',
@@ -10970,17 +10789,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class MatchaSelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaSelectModule, declarations: [MatchaSelectComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaSelectModule, declarations: [MatchaSelectComponent,
             MatchaSelectTriggerDirective], imports: [CommonModule,
             MatchaOptionModule,
             MatchaPanelModule], exports: [MatchaSelectComponent,
             MatchaSelectTriggerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSelectModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSelectModule, imports: [CommonModule,
             MatchaOptionModule,
             MatchaPanelModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -10999,44 +10818,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 }]
         }] });
 
-class MatchaBadgeDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-badge');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaBadgeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaBadgeDirective, isStandalone: false, selector: "[matcha-badge]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaBadgeDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matcha-badge]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaBadgeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaBadgeModule, declarations: [MatchaBadgeDirective], exports: [MatchaBadgeDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaBadgeModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaBadgeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaBadgeDirective],
-                    imports: [],
-                    exports: [MatchaBadgeDirective],
-                }]
-        }] });
-
 class MatchaRippleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaRippleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaRippleModule, declarations: [MatchaRippleDirective], imports: [CommonModule], exports: [MatchaRippleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaRippleModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRippleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaRippleModule, declarations: [MatchaRippleDirective], imports: [CommonModule], exports: [MatchaRippleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRippleModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaRippleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRippleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -11052,11 +10839,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaCheckboxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaCheckboxModule, declarations: [MatchaCheckboxComponent], imports: [CommonModule, MatchaRippleModule], exports: [MatchaCheckboxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaCheckboxModule, imports: [CommonModule, MatchaRippleModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaCheckboxModule, declarations: [MatchaCheckboxComponent], imports: [CommonModule, MatchaRippleModule], exports: [MatchaCheckboxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaCheckboxModule, imports: [CommonModule, MatchaRippleModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -11070,13 +10857,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaHintTextModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaHintTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaHintTextModule, declarations: [MatchaHintTextComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaHintTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaHintTextModule, declarations: [MatchaHintTextComponent], imports: [CommonModule,
             MatchaIconModule], exports: [MatchaHintTextComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaHintTextModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaHintTextModule, imports: [CommonModule,
             MatchaIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaHintTextModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaHintTextModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaHintTextComponent],
@@ -11088,116 +10875,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 }]
         }] });
 
-class MatchaInputDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-input');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaInputDirective, isStandalone: false, selector: "[matcha-input]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matcha-input]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaInputModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaInputModule, declarations: [MatchaInputDirective], exports: [MatchaInputDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInputModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInputModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaInputDirective],
-                    imports: [],
-                    exports: [MatchaInputDirective],
-                }]
-        }] });
-
-class MatchaMenuTriggerForDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-menu-trigger');
-    }
-    onClick(event) {
-        event.stopPropagation();
-        this.menu.toggleMenu();
-    }
-    onMouseEnter() {
-        if (!this.menu.isParentMenu) {
-            this.menu.openMenu();
-        }
-    }
-    onMouseLeave() {
-        if (!this.menu.isParentMenu) {
-            this.menu.closeMenu();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMenuTriggerForDirective, deps: [{ token: ElementRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaMenuTriggerForDirective, isStandalone: false, selector: "[matchaMenuTriggerFor]", inputs: { menu: ["matchaMenuTriggerFor", "menu"] }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, exportAs: ["matchaMenuTriggerFor"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMenuTriggerForDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matchaMenuTriggerFor]',
-                    exportAs: 'matchaMenuTriggerFor',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }, { type: i0.Renderer2, decorators: [{
-                    type: Inject,
-                    args: [Renderer2]
-                }] }], propDecorators: { menu: [{
-                type: Input,
-                args: ['matchaMenuTriggerFor']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
-
-class MatchaMenuModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaMenuModule, declarations: [MatchaMenuComponent,
-            MatchaMenuTriggerForDirective], imports: [CommonModule], exports: [MatchaMenuComponent,
-            MatchaMenuTriggerForDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMenuModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMenuModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        MatchaMenuComponent,
-                        MatchaMenuTriggerForDirective
-                    ],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [
-                        MatchaMenuComponent,
-                        MatchaMenuTriggerForDirective
-                    ]
-                }]
-        }] });
-
-class MatchaOverflowDraggableComponent {
-    constructor() {
-        this.dragRef = '';
+class MatchaOverflowDraggableComponent {
+    constructor() {
+        this.dragRef = '';
     }
     dragToScroll() {
         const ele = document.querySelector(`matchaDraggableReference${this.dragRef}`);
@@ -11237,10 +10917,10 @@ class MatchaOverflowDraggableComponent {
         const activeClasses = `${draggableReference}`;
         return activeClasses;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaOverflowDraggableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: MatchaOverflowDraggableComponent, isStandalone: false, selector: "matcha-overflow-draggable", inputs: { dragRef: "dragRef" }, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaOverflowDraggableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: MatchaOverflowDraggableComponent, isStandalone: false, selector: "matcha-overflow-draggable", inputs: { dragRef: "dragRef" }, ngImport: i0, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaOverflowDraggableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaOverflowDraggableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'matcha-overflow-draggable', standalone: false, template: "<div [class]=\"classes\">\n    <ng-content></ng-content>\n</div>\n" }]
         }], propDecorators: { dragRef: [{
@@ -11248,11 +10928,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class MatchaPaginatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaPaginatorModule, declarations: [MatchaPaginatorComponent], imports: [CommonModule, MatchaIconModule], exports: [MatchaPaginatorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPaginatorModule, providers: [MatchaPaginatorIntl], imports: [CommonModule, MatchaIconModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPaginatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaPaginatorModule, declarations: [MatchaPaginatorComponent], imports: [CommonModule, MatchaIconModule], exports: [MatchaPaginatorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPaginatorModule, providers: [MatchaPaginatorIntl], imports: [CommonModule, MatchaIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPaginatorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPaginatorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaPaginatorComponent],
@@ -11262,80 +10942,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 }]
         }] });
 
-class MatchaProgressBarDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-progress-bar');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaProgressBarDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaProgressBarDirective, isStandalone: false, selector: "[matcha-progress-bar]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaProgressBarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matcha-progress-bar]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaProgressBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaProgressBarModule, declarations: [MatchaProgressBarDirective], imports: [CommonModule], exports: [MatchaProgressBarDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaProgressBarModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaProgressBarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaProgressBarDirective],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [
-                        MatchaProgressBarDirective
-                    ]
-                }]
-        }] });
-
-class MatchaSidenavDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-sidenav');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSidenavDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaSidenavDirective, isStandalone: false, selector: "[matcha-sidenav]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSidenavDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matcha-sidenav]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaSidenavModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSidenavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaSidenavModule, declarations: [MatchaSidenavDirective], imports: [CommonModule], exports: [MatchaSidenavDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSidenavModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSidenavModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaSidenavDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaSidenavDirective],
-                }]
-        }] });
-
 class MatchaSlideToggleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSlideToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaSlideToggleModule, declarations: [MatchaSlideToggleComponent], imports: [CommonModule, FormsModule], exports: [MatchaSlideToggleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSlideToggleModule, imports: [CommonModule, FormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSlideToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaSlideToggleModule, declarations: [MatchaSlideToggleComponent], imports: [CommonModule, FormsModule], exports: [MatchaSlideToggleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSlideToggleModule, imports: [CommonModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSlideToggleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSlideToggleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaSlideToggleComponent],
@@ -11346,76 +10958,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 }]
         }] });
 
-class MatchaSnackBarDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-snackbar');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSnackBarDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaSnackBarDirective, isStandalone: false, selector: "[matchaSnackBar]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSnackBarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matchaSnackBar]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaSnackBarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSnackBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaSnackBarModule, declarations: [MatchaSnackBarDirective], imports: [CommonModule], exports: [MatchaSnackBarDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSnackBarModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSnackBarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaSnackBarDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaSnackBarDirective],
-                }]
-        }] });
-
-class MatchaSortHeaderDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-sort-header');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSortHeaderDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaSortHeaderDirective, isStandalone: false, selector: "[matchaSortHeader]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSortHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matchaSortHeader]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaSortHeaderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSortHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaSortHeaderModule, declarations: [MatchaSortHeaderDirective], imports: [CommonModule], exports: [MatchaSortHeaderDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSortHeaderModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSortHeaderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaSortHeaderDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaSortHeaderDirective],
-                }]
-        }] });
-
 class MatchaSpinModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSpinModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaSpinModule, declarations: [MatchaSpinComponent], imports: [CommonModule], exports: [MatchaSpinComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSpinModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSpinModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaSpinModule, declarations: [MatchaSpinComponent], imports: [CommonModule], exports: [MatchaSpinComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSpinModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSpinModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSpinModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaSpinComponent],
@@ -11427,11 +10975,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaSpinnerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaSpinnerModule, declarations: [MatchaSpinnerComponent], imports: [CommonModule], exports: [MatchaSpinnerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSpinnerModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaSpinnerModule, declarations: [MatchaSpinnerComponent], imports: [CommonModule], exports: [MatchaSpinnerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSpinnerModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSpinnerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSpinnerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaSpinnerComponent],
@@ -11442,48 +10990,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 }]
         }] });
 
-class MatchaTableDirective {
-    constructor(_elementRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
-        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-table');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaTableDirective, isStandalone: false, selector: "[matchaTable]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[matchaTable]',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
-
-class MatchaTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaTableModule, declarations: [MatchaTableDirective], imports: [CommonModule], exports: [MatchaTableDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTableModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTableModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MatchaTableDirective],
-                    imports: [CommonModule],
-                    exports: [MatchaTableDirective],
-                }]
-        }] });
-
 class MatchaTabsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaTabsModule, declarations: [MatchaTabsComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaTabsModule, declarations: [MatchaTabsComponent,
             MatchaTabItemComponent], imports: [CommonModule,
             MatchaIconModule], exports: [MatchaTabsComponent,
             MatchaTabItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTabsModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTabsModule, imports: [CommonModule,
             MatchaIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -11502,13 +11018,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaDateRangeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDateRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaDateRangeModule, declarations: [MatchaDateRangeComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateRangeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateRangeModule, declarations: [MatchaDateRangeComponent], imports: [CommonModule,
             ReactiveFormsModule], exports: [MatchaDateRangeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDateRangeModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateRangeModule, imports: [CommonModule,
             ReactiveFormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDateRangeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDateRangeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaDateRangeComponent],
@@ -11521,13 +11037,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaTimeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaTimeModule, declarations: [MatchaTimeComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeModule, declarations: [MatchaTimeComponent], imports: [CommonModule,
             ReactiveFormsModule], exports: [MatchaTimeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTimeModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeModule, imports: [CommonModule,
             ReactiveFormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaTimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaTimeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaTimeComponent],
@@ -11546,10 +11062,10 @@ class PrevStepDirective {
     onClick() {
         this.stepper?.prevStep();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PrevStepDirective, deps: [{ token: MatchaStepperContentComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: PrevStepDirective, isStandalone: true, selector: "[prevStep]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PrevStepDirective, deps: [{ token: MatchaStepperContentComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: PrevStepDirective, isStandalone: true, selector: "[prevStep]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: PrevStepDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PrevStepDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[prevStep]',
@@ -11567,10 +11083,10 @@ class NextStepDirective {
     onClick() {
         this.stepper?.nextStep();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: NextStepDirective, deps: [{ token: MatchaStepperContentComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: NextStepDirective, isStandalone: true, selector: "[nextStep]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NextStepDirective, deps: [{ token: MatchaStepperContentComponent }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: NextStepDirective, isStandalone: true, selector: "[nextStep]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: NextStepDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: NextStepDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[nextStep]',
@@ -11582,8 +11098,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class MatchaStepperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaStepperModule, declarations: [MatchaStepperControllerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperModule, declarations: [MatchaStepperControllerComponent,
             MatchaStepperComponent,
             MatchaStepperContentComponent,
             StepComponent], imports: [CommonModule,
@@ -11594,9 +11110,9 @@ class MatchaStepperModule {
             StepComponent,
             PrevStepDirective,
             NextStepDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaStepperModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaStepperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaStepperModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -11633,10 +11149,10 @@ class MatchaDragHandleDirective {
     ngOnInit() {
         this.dragDirective.setDragHandle(this.elementRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDragHandleDirective, deps: [{ token: i0.ElementRef }, { token: MatchaDragDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: MatchaDragHandleDirective, isStandalone: false, selector: "[matchaDragHandle]", host: { properties: { "class.matcha-drag-handle": "this.dragHandleClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDragHandleDirective, deps: [{ token: i0.ElementRef }, { token: MatchaDragDirective }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: MatchaDragHandleDirective, isStandalone: false, selector: "[matchaDragHandle]", host: { properties: { "class.matcha-drag-handle": "this.dragHandleClass" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDragHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDragHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[matchaDragHandle]',
@@ -11648,17 +11164,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
             }] } });
 
 class MatchaDropListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDropListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaDropListModule, declarations: [MatchaDropListComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDropListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaDropListModule, declarations: [MatchaDropListComponent,
             MatchaDragDirective,
             MatchaDragHandleDirective], imports: [CommonModule], exports: [MatchaDropListComponent,
             MatchaDragDirective,
             MatchaDragHandleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDropListModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDropListModule, providers: [
             MatchaDropListService
         ], imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDropListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDropListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -11712,14 +11228,14 @@ const compatibleOptions = {
     maskFilled: new EventEmitter()
 };
 class MatchaMaskModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaMaskModule, declarations: [MatchaMaskCompatibleDirective], imports: [CommonModule], exports: [MatchaMaskCompatibleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMaskModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskModule, declarations: [MatchaMaskCompatibleDirective], imports: [CommonModule], exports: [MatchaMaskCompatibleDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskModule, providers: [
             MatchaMaskService,
             { provide: MATCHA_MASK_CONFIG, useValue: compatibleOptions }
         ], imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMaskModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaMaskCompatibleDirective],
@@ -11737,17 +11253,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaInputPhoneModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInputPhoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaInputPhoneModule, declarations: [MatchaInputPhoneComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInputPhoneModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaInputPhoneModule, declarations: [MatchaInputPhoneComponent], imports: [CommonModule,
             MatchaFormFieldModule,
             FormsModule,
             MatchaMaskModule], exports: [MatchaInputPhoneComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInputPhoneModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInputPhoneModule, imports: [CommonModule,
             MatchaFormFieldModule,
             FormsModule,
             MatchaMaskModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaInputPhoneModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaInputPhoneModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaInputPhoneComponent],
@@ -11762,13 +11278,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaPageLayoutModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPageLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaPageLayoutModule, declarations: [MatchaPageLayoutComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPageLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaPageLayoutModule, declarations: [MatchaPageLayoutComponent], imports: [CommonModule,
             MatchaStepperModule], exports: [MatchaPageLayoutComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPageLayoutModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPageLayoutModule, imports: [CommonModule,
             MatchaStepperModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaPageLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaPageLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -11785,11 +11301,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaRadioModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaRadioModule, declarations: [MatchaRadioComponent], imports: [CommonModule, MatchaRippleModule], exports: [MatchaRadioComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaRadioModule, imports: [CommonModule, MatchaRippleModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioModule, declarations: [MatchaRadioComponent], imports: [CommonModule, MatchaRippleModule], exports: [MatchaRadioComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioModule, imports: [CommonModule, MatchaRippleModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaRadioModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaRadioModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -11803,11 +11319,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaAvatarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaAvatarModule, declarations: [MatchaAvatarComponent], imports: [CommonModule], exports: [MatchaAvatarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAvatarModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaAvatarModule, declarations: [MatchaAvatarComponent], imports: [CommonModule], exports: [MatchaAvatarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAvatarModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaAvatarComponent],
@@ -11818,20 +11334,204 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                 }]
         }] });
 
+/**
+ * Serviço singleton para observação de breakpoints CSS
+ * Funciona tanto no browser quanto no servidor (SSR)
+ */
+class MatchaBreakpointObserver {
+    constructor(platformId) {
+        this.platformId = platformId;
+        this.breakpointSubject = new BehaviorSubject({
+            matches: false,
+            breakpoint: ''
+        });
+        this.currentBreakpoints = new Map();
+        this.isBrowser = isPlatformBrowser(this.platformId);
+        if (this.isBrowser) {
+            this.setupResizeListener();
+        }
+    }
+    ngOnDestroy() {
+        if (this.resizeSubscription) {
+            this.resizeSubscription.unsubscribe();
+        }
+    }
+    /**
+     * Observa um breakpoint específico
+     * @param breakpoint - String no formato CSS media query (ex: '(max-width: 768px)')
+     * @returns Observable<BreakpointState>
+     */
+    observe(breakpoint) {
+        if (!this.isBrowser) {
+            // No servidor, retorna um observable que emite false
+            return of({ matches: false, breakpoint });
+        }
+        // Emite o estado inicial
+        const initialState = this.getState(breakpoint);
+        return this.breakpointSubject.asObservable().pipe(startWith(initialState), map(() => this.getState(breakpoint)), distinctUntilChanged((prev, curr) => prev.matches === curr.matches && prev.breakpoint === curr.breakpoint));
+    }
+    /**
+     * Verifica se um breakpoint específico está ativo
+     * @param breakpoint - String no formato CSS media query
+     * @returns boolean
+     */
+    isMatched(breakpoint) {
+        if (!this.isBrowser) {
+            return false;
+        }
+        return this.checkBreakpoint(breakpoint);
+    }
+    /**
+     * Obtém o estado atual do breakpoint
+     * @param breakpoint - String no formato CSS media query
+     * @returns BreakpointState
+     */
+    getState(breakpoint) {
+        return {
+            matches: this.isMatched(breakpoint),
+            breakpoint
+        };
+    }
+    /**
+     * Observa múltiplos breakpoints simultaneamente
+     * @param breakpoints - Array de strings de breakpoints
+     * @returns Observable<Map<string, boolean>>
+     */
+    observeMultiple(breakpoints) {
+        if (!this.isBrowser) {
+            const emptyMap = new Map();
+            breakpoints.forEach(bp => emptyMap.set(bp, false));
+            return of(emptyMap);
+        }
+        return this.breakpointSubject.asObservable().pipe(startWith({ matches: false, breakpoint: '' }), map(() => {
+            const result = new Map();
+            breakpoints.forEach(bp => {
+                result.set(bp, this.checkBreakpoint(bp));
+            });
+            return result;
+        }), distinctUntilChanged((prev, curr) => {
+            if (prev.size !== curr.size)
+                return false;
+            for (const [key, value] of prev) {
+                if (curr.get(key) !== value)
+                    return false;
+            }
+            return true;
+        }));
+    }
+    setupResizeListener() {
+        if (!this.isBrowser)
+            return;
+        // Usa fromEvent para criar um observable do evento resize
+        this.resizeSubscription = fromEvent(window, 'resize')
+            .pipe(debounceTime(100) // Debounce para evitar muitas chamadas
+        )
+            .subscribe(() => {
+            // Limpa o cache de breakpoints
+            this.currentBreakpoints.clear();
+            // Emite um novo evento para forçar reavaliação
+            this.breakpointSubject.next({
+                matches: false,
+                breakpoint: ''
+            });
+        });
+    }
+    checkBreakpoint(breakpoint) {
+        if (!this.isBrowser)
+            return false;
+        // Verifica cache primeiro
+        if (this.currentBreakpoints.has(breakpoint)) {
+            return this.currentBreakpoints.get(breakpoint);
+        }
+        try {
+            // Remove parênteses se existirem
+            const cleanBreakpoint = breakpoint.replace(/[()]/g, '');
+            // Extrai o valor numérico e a condição
+            const match = cleanBreakpoint.match(/(max-width|min-width|max-height|min-height):\s*(\d+)px/);
+            if (!match) {
+                console.warn(`Breakpoint inválido: ${breakpoint}`);
+                this.currentBreakpoints.set(breakpoint, false);
+                return false;
+            }
+            const [, condition, value] = match;
+            const numericValue = parseInt(value, 10);
+            const windowWidth = window.innerWidth;
+            const windowHeight = window.innerHeight;
+            let result = false;
+            switch (condition) {
+                case 'max-width':
+                    result = windowWidth <= numericValue;
+                    break;
+                case 'min-width':
+                    result = windowWidth >= numericValue;
+                    break;
+                case 'max-height':
+                    result = windowHeight <= numericValue;
+                    break;
+                case 'min-height':
+                    result = windowHeight >= numericValue;
+                    break;
+                default:
+                    result = false;
+            }
+            // Armazena no cache
+            this.currentBreakpoints.set(breakpoint, result);
+            return result;
+        }
+        catch (error) {
+            console.error('Erro ao verificar breakpoint:', error);
+            this.currentBreakpoints.set(breakpoint, false);
+            return false;
+        }
+    }
+    /**
+     * Método utilitário para criar breakpoints comuns
+     */
+    static createBreakpoint(width, condition = 'max') {
+        const prefix = condition === 'max' ? 'max-width' : 'min-width';
+        return `(${prefix}: ${width}px)`;
+    }
+    /**
+     * Breakpoints pré-definidos para facilitar o uso
+     */
+    static { this.BREAKPOINTS = {
+        XS: '(max-width: 480px)',
+        SM: '(max-width: 768px)',
+        MD: '(max-width: 1024px)',
+        LG: '(max-width: 1200px)',
+        XL: '(max-width: 1440px)',
+        MOBILE: '(max-width: 768px)',
+        TABLET: '(min-width: 769px) and (max-width: 1024px)',
+        DESKTOP: '(min-width: 1025px)'
+    }; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaBreakpointObserver, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaBreakpointObserver, providedIn: 'root' // Singleton garantido pelo Angular
+     }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaBreakpointObserver, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root' // Singleton garantido pelo Angular
+                }]
+        }], ctorParameters: () => [{ type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
 class MatchaDrawerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaDrawerModule, declarations: [MatchaDrawerComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaDrawerModule, declarations: [MatchaDrawerComponent,
             MatchaDrawerContainerComponent,
             MatchaDrawerContentComponent], imports: [CommonModule,
             MatchaButtonModule], exports: [MatchaDrawerComponent,
             MatchaDrawerContainerComponent,
             MatchaDrawerContentComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDrawerModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDrawerModule, providers: [
             MatchaBreakpointObserver
         ], imports: [CommonModule,
             MatchaButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaDrawerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaDrawerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -11856,15 +11556,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
 
 // Prism.js será carregado dinamicamente no componente quando necessário
 class MatchaHighlightModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaHighlightModule, declarations: [MatchaHighlightComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaHighlightModule, declarations: [MatchaHighlightComponent,
             CopyButtonComponent], imports: [MatchaIconModule,
             MatchaButtonModule], exports: [MatchaHighlightComponent,
             CopyButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaHighlightModule, imports: [MatchaIconModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaHighlightModule, imports: [MatchaIconModule,
             MatchaButtonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaHighlightModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaHighlightModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -11883,11 +11583,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaSliderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaSliderModule, declarations: [MatchaSliderComponent], imports: [CommonModule, FormsModule], exports: [MatchaSliderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSliderModule, imports: [CommonModule, FormsModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaSliderModule, declarations: [MatchaSliderComponent], imports: [CommonModule, FormsModule], exports: [MatchaSliderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSliderModule, imports: [CommonModule, FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaSliderComponent],
@@ -11899,8 +11599,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaComponentsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaComponentsModule, declarations: [MatchaOverflowDraggableComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatchaAccordionModule,
@@ -11908,7 +11608,6 @@ class MatchaComponentsModule {
             MatchaOptionModule,
             MatchaPanelModule,
             MatchaSelectModule,
-            MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
             MatchaCardModule,
@@ -11921,23 +11620,16 @@ class MatchaComponentsModule {
             MatchaIconModule,
             MatchaInfiniteScrollModule,
             MatchaLazyloadModule,
-            MatchaInputModule,
             MatchaInputPhoneModule,
             MatchaMasonryModule,
-            MatchaMenuModule,
             MatchaModalModule,
             MatchaPaginatorModule,
-            MatchaProgressBarModule,
             MatchaRippleModule,
-            MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
-            MatchaSnackBarModule,
-            MatchaSortHeaderModule,
             MatchaSpinModule,
             MatchaSpinnerModule,
             MatchaStepperModule,
-            MatchaTableModule,
             MatchaTabsModule,
             MatchaTitleModule,
             MatchaTooltipModule,
@@ -11952,7 +11644,6 @@ class MatchaComponentsModule {
             MatchaOptionModule,
             MatchaPanelModule,
             MatchaSelectModule,
-            MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
             MatchaCardModule,
@@ -11965,23 +11656,16 @@ class MatchaComponentsModule {
             MatchaIconModule,
             MatchaInfiniteScrollModule,
             MatchaLazyloadModule,
-            MatchaInputModule,
             MatchaInputPhoneModule,
             MatchaMasonryModule,
-            MatchaMenuModule,
             MatchaModalModule,
             MatchaPaginatorModule,
-            MatchaProgressBarModule,
             MatchaRippleModule,
-            MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
-            MatchaSnackBarModule,
-            MatchaSortHeaderModule,
             MatchaSpinModule,
             MatchaSpinnerModule,
             MatchaStepperModule,
-            MatchaTableModule,
             MatchaTabsModule,
             MatchaTitleModule,
             MatchaTooltipModule,
@@ -11993,7 +11677,7 @@ class MatchaComponentsModule {
             MatchaDrawerModule,
             MatchaHighlightModule,
             MatchaMaskModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaComponentsModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaComponentsModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             MatchaAccordionModule,
@@ -12001,7 +11685,6 @@ class MatchaComponentsModule {
             MatchaOptionModule,
             MatchaPanelModule,
             MatchaSelectModule,
-            MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
             MatchaCardModule,
@@ -12014,23 +11697,16 @@ class MatchaComponentsModule {
             MatchaIconModule,
             MatchaInfiniteScrollModule,
             MatchaLazyloadModule,
-            MatchaInputModule,
             MatchaInputPhoneModule,
             MatchaMasonryModule,
-            MatchaMenuModule,
             MatchaModalModule,
             MatchaPaginatorModule,
-            MatchaProgressBarModule,
             MatchaRippleModule,
-            MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
-            MatchaSnackBarModule,
-            MatchaSortHeaderModule,
             MatchaSpinModule,
             MatchaSpinnerModule,
             MatchaStepperModule,
-            MatchaTableModule,
             MatchaTabsModule,
             MatchaTitleModule,
             MatchaTooltipModule,
@@ -12045,7 +11721,6 @@ class MatchaComponentsModule {
             MatchaOptionModule,
             MatchaPanelModule,
             MatchaSelectModule,
-            MatchaBadgeModule,
             MatchaButtonModule,
             MatchaButtonToggleModule,
             MatchaCardModule,
@@ -12058,23 +11733,16 @@ class MatchaComponentsModule {
             MatchaIconModule,
             MatchaInfiniteScrollModule,
             MatchaLazyloadModule,
-            MatchaInputModule,
             MatchaInputPhoneModule,
             MatchaMasonryModule,
-            MatchaMenuModule,
             MatchaModalModule,
             MatchaPaginatorModule,
-            MatchaProgressBarModule,
             MatchaRippleModule,
-            MatchaSidenavModule,
             MatchaSlideToggleModule,
             MatchaSliderModule,
-            MatchaSnackBarModule,
-            MatchaSortHeaderModule,
             MatchaSpinModule,
             MatchaSpinnerModule,
             MatchaStepperModule,
-            MatchaTableModule,
             MatchaTabsModule,
             MatchaTitleModule,
             MatchaTooltipModule,
@@ -12087,7 +11755,7 @@ class MatchaComponentsModule {
             MatchaHighlightModule,
             MatchaMaskModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaComponentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaOverflowDraggableComponent],
@@ -12100,7 +11768,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         MatchaOptionModule,
                         MatchaPanelModule,
                         MatchaSelectModule,
-                        MatchaBadgeModule,
                         MatchaButtonModule,
                         MatchaButtonToggleModule,
                         MatchaCardModule,
@@ -12113,23 +11780,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         MatchaIconModule,
                         MatchaInfiniteScrollModule,
                         MatchaLazyloadModule,
-                        MatchaInputModule,
                         MatchaInputPhoneModule,
                         MatchaMasonryModule,
-                        MatchaMenuModule,
                         MatchaModalModule,
                         MatchaPaginatorModule,
-                        MatchaProgressBarModule,
                         MatchaRippleModule,
-                        MatchaSidenavModule,
                         MatchaSlideToggleModule,
                         MatchaSliderModule,
-                        MatchaSnackBarModule,
-                        MatchaSortHeaderModule,
                         MatchaSpinModule,
                         MatchaSpinnerModule,
                         MatchaStepperModule,
-                        MatchaTableModule,
                         MatchaTabsModule,
                         MatchaTitleModule,
                         MatchaTooltipModule,
@@ -12146,7 +11806,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         MatchaOptionModule,
                         MatchaPanelModule,
                         MatchaSelectModule,
-                        MatchaBadgeModule,
                         MatchaButtonModule,
                         MatchaButtonToggleModule,
                         MatchaCardModule,
@@ -12159,23 +11818,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         MatchaIconModule,
                         MatchaInfiniteScrollModule,
                         MatchaLazyloadModule,
-                        MatchaInputModule,
                         MatchaInputPhoneModule,
                         MatchaMasonryModule,
-                        MatchaMenuModule,
                         MatchaModalModule,
                         MatchaPaginatorModule,
-                        MatchaProgressBarModule,
                         MatchaRippleModule,
-                        MatchaSidenavModule,
                         MatchaSlideToggleModule,
                         MatchaSliderModule,
-                        MatchaSnackBarModule,
-                        MatchaSortHeaderModule,
                         MatchaSpinModule,
                         MatchaSpinnerModule,
                         MatchaStepperModule,
-                        MatchaTableModule,
                         MatchaTabsModule,
                         MatchaTitleModule,
                         MatchaTooltipModule,
@@ -12192,11 +11844,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
         }] });
 
 class MatchaSkeletonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaSkeletonModule, declarations: [MatchaSkeletonComponent], imports: [CommonModule], exports: [MatchaSkeletonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSkeletonModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSkeletonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaSkeletonModule, declarations: [MatchaSkeletonComponent], imports: [CommonModule], exports: [MatchaSkeletonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSkeletonModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaSkeletonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaSkeletonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MatchaSkeletonComponent],
@@ -12217,14 +11869,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * explicitamente, mas este módulo pode ser usado para organização.
  */
 class MatchaBreakpointObservableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaBreakpointObservableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaBreakpointObservableModule, imports: [CommonModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaBreakpointObservableModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaBreakpointObservableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaBreakpointObservableModule, imports: [CommonModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaBreakpointObservableModule, providers: [
             // O serviço já é providedIn: 'root', mas incluímos aqui para clareza
             MatchaBreakpointObserver
         ], imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaBreakpointObservableModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaBreakpointObservableModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -12323,10 +11975,10 @@ class MatchaMaskPipe {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMaskPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: MatchaMaskPipe, isStandalone: false, name: "mask" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskPipe, isStandalone: false, name: "mask" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MatchaMaskPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: MatchaMaskPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'mask',
@@ -12339,10 +11991,10 @@ class StepContentDirective {
     constructor(template) {
         this.template = template;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StepContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: StepContentDirective, isStandalone: true, selector: "[step]", inputs: { step: "step" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: StepContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: StepContentDirective, isStandalone: true, selector: "[step]", inputs: { step: "step" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: StepContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: StepContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[step]'
@@ -12366,5 +12018,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CopyButtonComponent, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBadgeDirective, MatchaBadgeModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaComponentsModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputDirective, MatchaInputModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuModule, MatchaMenuTriggerForDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaProgressBarDirective, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSidenavDirective, MatchaSidenavModule, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSnackBarDirective, MatchaSnackBarModule, MatchaSortHeaderDirective, MatchaSortHeaderModule, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaTabItemComponent, MatchaTableDirective, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, compatibleOptions, initialConfig, timeMasks, withoutValidation };
+export { CopyButtonComponent, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaComponentsModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaRadioComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaTabItemComponent, MatchaTabsComponent, MatchaTabsModule, MatchaTimeComponent, MatchaTimeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, compatibleOptions, initialConfig, timeMasks, withoutValidation };
 //# sourceMappingURL=matcha-components.mjs.map