monkey-style-guide-v2 0.0.5 → 0.0.6

package/fesm2022/monkey-style-guide-v2.mjs

@@ -1,182 +1,2770 @@
-import * as i1 from '@angular/common';
-import { CommonModule, NgTemplateOutlet, DOCUMENT } from '@angular/common';
+import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
+import * as i1$1 from '@angular/common';
+import { CommonModule, CurrencyPipe, NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, Input, HostListener, input, HostBinding, EventEmitter, Output, TemplateRef, booleanAttribute, Directive, Inject } from '@angular/core';
+import { Injectable, inject, TemplateRef, booleanAttribute, Component, Input, ViewEncapsulation, input, output, HostListener, Directive, NgModule, EventEmitter, Injector, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy, ContentChildren, Output, HostBinding, ElementRef, DEFAULT_CURRENCY_CODE, ContentChild, LOCALE_ID, ViewChild, Optional, Inject } from '@angular/core';
+import { Subject, takeUntil, merge, Subscription } from 'rxjs';
+import { DomSanitizer } from '@angular/platform-browser';
+import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+import * as i1 from '@angular/cdk/overlay';
+import { Router } from '@angular/router';
+import * as i1$2 from '@angular/forms';
+import { NgControl, FormControlDirective, NgModel, FormControlName, FormGroupDirective, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { getSupportedInputTypes } from '@angular/cdk/platform';
 
-/**************************
+const counters = {};
+class IdGenerator {
+    getId(prefix) {
+        if (!Object.prototype.hasOwnProperty.call(counters, prefix)) {
+            counters[prefix] = 1;
+        }
+        const currentCount = counters[prefix];
+        counters[prefix] = currentCount + 1;
+        return `${prefix}${currentCount}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IdGenerator, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IdGenerator, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IdGenerator, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+function stripHtmlComments(htmlContent) {
+    return htmlContent.replace(/<!--(?!>)[\S\s]*?-->/g, '');
+}
+
+function getRandomString(len, charSet) {
+    charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    return new Array(len)
+        .fill('1')
+        .map(() => {
+        return charSet?.charAt(Math.floor(Math.random() * charSet.length));
+    })
+        .join('');
+}
+
+class MonkeyDestroyService extends Subject {
+    ngOnDestroy() {
+        this.next();
+        this.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDestroyService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDestroyService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDestroyService, decorators: [{
+            type: Injectable
+        }] });
+
+/* eslint-disable max-len */
+class MonkeyIconsService {
+    constructor() {
+        this._sanitizer = inject(DomSanitizer);
+    }
+    handleTrust(icon) {
+        return this._sanitizer.bypassSecurityTrustHtml(icon);
+    }
+    get clear() {
+        return this.handleTrust(`
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M7.815 7.277a.802.802 0 0 0-.459.349c-.103.167-.123.529-.038.694.028.055.854.906 1.836 1.89L10.939 12l-1.785 1.79c-.982.985-1.808 1.835-1.836 1.89a.926.926 0 0 0-.051.324c0 .494.414.812.922.707.183-.038.266-.114 2.001-1.844L12 13.062l1.81 1.805c1.731 1.725 1.818 1.806 2 1.844.58.12 1.021-.321.901-.901-.038-.182-.119-.269-1.844-2L13.062 12l1.805-1.81c1.73-1.735 1.806-1.818 1.844-2.001.105-.508-.213-.922-.707-.922a.926.926 0 0 0-.324.051c-.055.028-.905.854-1.89 1.836L12 10.939l-1.79-1.785c-.984-.982-1.826-1.803-1.87-1.825a.99.99 0 0 0-.525-.052" fill-rule="evenodd" fill="var(--mecx-color-gray-900)"/></svg>
+    `);
+    }
+    get calendar() {
+        return this.handleTrust(`
+      <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.815 1.277a.8.8 0 0 0-.462.354c-.087.139-.094.198-.107.875l-.013.725-1.347.019c-1.236.018-1.371.026-1.646.107A2.807 2.807 0 0 0 2.352 5.26l-.092.32v13.84l.092.32a2.797 2.797 0 0 0 1.908 1.908l.32.092h14.84l.32-.092a2.797 2.797 0 0 0 1.908-1.908l.092-.32V5.58l-.092-.32a2.807 2.807 0 0 0-1.888-1.903c-.276-.081-.41-.089-1.65-.107l-1.35-.019v-.593c0-.757-.042-.96-.238-1.156-.349-.349-.903-.279-1.169.149-.087.139-.094.198-.107.879l-.014.73H8.76l-.001-.61c-.001-.68-.039-.91-.179-1.094-.159-.209-.502-.325-.765-.259M7.246 5.49c.013.681.02.74.107.879.357.574 1.223.443 1.363-.207.024-.113.044-.475.044-.804V4.76h6.472l.014.73c.013.681.02.74.107.879.357.574 1.223.443 1.363-.207.024-.113.044-.475.044-.804V4.76h1.238c1.452 0 1.525.014 1.876.366.352.351.366.424.366 1.876V8.24H3.756l.012-1.31c.012-1.277.014-1.314.104-1.482.155-.29.475-.562.768-.651.055-.016.661-.032 1.346-.034l1.246-.003.014.73m12.994 9.008c0 4.664-.001 4.742-.081 4.956-.109.29-.415.596-.705.705-.215.08-.28.081-7.454.081-7.159 0-7.239-.001-7.453-.081-.245-.091-.544-.363-.679-.615l-.088-.164-.011-4.81-.01-4.81H20.24v4.738M6.7 12.028a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m5 0a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m5 0a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m-10 4a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m5 0a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048" fill-rule="evenodd" fill="var(--mecx-color-gray-900)"/></svg>
+    `);
+    }
+    get arrowDown() {
+        return this.handleTrust(`
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 10L12 14L16 10" stroke="var(--mecx-color-gray-900)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    `);
+    }
+    get check() {
+        return this.handleTrust(`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.808 2.528 C 9.752 2.542,9.671 2.574,9.628 2.599 C 9.585 2.625,8.414 3.781,7.025 5.168 L 4.500 7.690 3.475 6.667 C 2.865 6.059,2.414 5.624,2.360 5.594 C 2.137 5.467,1.822 5.478,1.603 5.620 C 1.226 5.863,1.141 6.369,1.419 6.715 C 1.558 6.887,4.068 9.375,4.140 9.411 C 4.366 9.525,4.634 9.525,4.860 9.411 C 4.931 9.376,10.438 3.892,10.581 3.715 C 10.688 3.582,10.742 3.425,10.742 3.250 C 10.742 2.758,10.293 2.410,9.808 2.528 " stroke="none" fill-rule="evenodd" fill="var(--mecx-color-theme-contrast-500"></path></svg>`);
+    }
+    get minus() {
+        return this.handleTrust(`<svg width="8" height="2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.333 0.268 C 1.300 0.274,1.225 0.303,1.167 0.332 C 1.054 0.388,0.939 0.490,0.866 0.599 C 0.776 0.732,0.732 0.936,0.757 1.098 C 0.786 1.283,0.848 1.405,0.977 1.532 C 1.071 1.624,1.148 1.673,1.253 1.710 L 1.340 1.740 4.000 1.740 L 6.660 1.740 6.747 1.710 C 6.943 1.642,7.128 1.462,7.200 1.270 C 7.265 1.095,7.265 0.904,7.200 0.730 C 7.118 0.510,6.880 0.308,6.655 0.267 C 6.565 0.250,1.420 0.251,1.333 0.268" stroke="none" fill-rule="evenodd" fill="var(--mecx-color-theme-contrast-500"></path></svg>`);
+    }
+    get loading() {
+        return this.handleTrust(`<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_ajPY{transform-origin:center;animation:spinner_AtaB .75s infinite linear}@keyframes spinner_AtaB{100%{transform:rotate(360deg)}}</style><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="spinner_ajPY"/></svg>`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyIconsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyIconsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyIconsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ToastRef {
+    constructor(componentRef) {
+        this.componentRef = componentRef;
+        // not to do
+    }
+    close() {
+        this.componentRef.instance.close();
+    }
+}
+
+class MonkeyToastService {
+    constructor(overlay) {
+        this.overlay = overlay;
+        // no to do
+    }
+    getPositionStrategy(position) {
+        const globalPosition = this.overlay.position().global();
+        switch (position) {
+            case 'top-left':
+                return globalPosition.top('40px').start('40px');
+            case 'top-center':
+                return globalPosition.top('40px').centerHorizontally();
+            case 'top-right':
+                return globalPosition.top('40px').end('40px');
+            case 'bottom-left':
+                return globalPosition.bottom('40px').start('40px');
+            case 'bottom-center':
+                return globalPosition.bottom('40px').centerHorizontally();
+            default:
+                return globalPosition.bottom('40px').end('40px');
+        }
+    }
+    show(toastConfig) {
+        if (this.lastToast) {
+            this.lastToast.close();
+        }
+        const overlayRef = this.overlay.create({
+            hasBackdrop: false,
+            positionStrategy: this.getPositionStrategy(toastConfig.position)
+        });
+        const portal = new ComponentPortal(MonkeyToastComponent);
+        const componentRef = overlayRef.attach(portal);
+        this.lastToast = new ToastRef(componentRef);
+        componentRef.instance.id = getRandomString(6);
+        componentRef.instance.type = toastConfig.type ?? 'default';
+        componentRef.instance.icon = toastConfig.icon;
+        componentRef.instance.isClosable = toastConfig.isClosable ?? false;
+        componentRef.instance.message = toastConfig.message;
+        componentRef.instance.actionLabel = toastConfig.actionLabel;
+        componentRef.instance.actionIcon = toastConfig.actionIcon;
+        componentRef.instance.onActionClick.subscribe(() => {
+            if (toastConfig.action) {
+                toastConfig.action();
+                if (toastConfig.closeOnAction ?? true) {
+                    componentRef.instance.close();
+                }
+            }
+        });
+        componentRef.instance.onClose.subscribe(() => {
+            overlayRef.detach();
+        });
+        if (!toastConfig.keepOpen) {
+            setTimeout(() => {
+                componentRef.instance.close();
+            }, toastConfig.duration ?? 4000);
+        }
+        return componentRef.instance;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToastService, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToastService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToastService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.Overlay }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyAccordionComponent {
+    set title(data) {
+        if (data instanceof TemplateRef) {
+            this.titleRef = data;
+        }
+        else {
+            this.titleStr = data;
+        }
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this._icons = inject(MonkeyIconsService);
+        this.open = false;
+        this.disabled = false;
+        this.imgArrowDown = this._icons.arrowDown;
+        this._uid = inject(IdGenerator).getId('monkey-accordion-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    onClick() {
+        if (this.disabled)
+            return;
+        this.open = !this.open;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyAccordionComponent, isStandalone: true, selector: "monkey-accordion", inputs: { open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], title: "title", id: "id" }, host: { attributes: { "data-testid": "monkey-accordion" }, properties: { "class.disabled": "disabled", "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div class=\"header\" (click)=\"onClick()\">\n  <div class=\"title\">\n    @if (titleRef) {\n      <ng-container *ngTemplateOutlet=\"titleRef\" />\n    } @else {\n      {{ titleStr }}\n    }\n  </div>\n  <div [innerHTML]=\"imgArrowDown\" class=\"icon\" [class.rotated]=\"open\"></div>\n</div>\n<div class=\"content-wrapper\">\n  @if (open) {\n    <div [@content]>\n      <div class=\"content\">\n        <ng-content />\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;border-radius:16px;border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white);overflow:hidden}:host .header{display:flex;align-items:center;justify-content:space-between;padding:24px;gap:24px;cursor:pointer}:host .header .title{color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px}:host .header .icon{transform:rotate(0);transition:transform .2s ease-in-out}:host .header .icon.rotated{transform:rotate(180deg)}:host.disabled .header{cursor:not-allowed;background:var(--mecx-color-gray-200)}:host .content-wrapper{border-top:1px solid var(--mecx-color-gray-200);overflow:hidden}:host .content-wrapper .content{padding:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+            trigger('content', [
+                state('void', style({
+                    height: '0px',
+                    overflow: 'hidden'
+                })),
+                transition(':enter', [
+                    animate('300ms ease-in-out', style({
+                        height: '*',
+                        overflow: 'hidden'
+                    }))
+                ]),
+                transition(':leave', [
+                    animate('300ms ease-in-out', style({
+                        height: '0px',
+                        overflow: 'hidden'
+                    }))
+                ])
+            ])
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-accordion', standalone: true, imports: [CommonModule], host: {
+                        'data-testid': 'monkey-accordion',
+                        '[class.disabled]': 'disabled',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, animations: [
+                        trigger('content', [
+                            state('void', style({
+                                height: '0px',
+                                overflow: 'hidden'
+                            })),
+                            transition(':enter', [
+                                animate('300ms ease-in-out', style({
+                                    height: '*',
+                                    overflow: 'hidden'
+                                }))
+                            ]),
+                            transition(':leave', [
+                                animate('300ms ease-in-out', style({
+                                    height: '0px',
+                                    overflow: 'hidden'
+                                }))
+                            ])
+                        ])
+                    ], template: "<div class=\"header\" (click)=\"onClick()\">\n  <div class=\"title\">\n    @if (titleRef) {\n      <ng-container *ngTemplateOutlet=\"titleRef\" />\n    } @else {\n      {{ titleStr }}\n    }\n  </div>\n  <div [innerHTML]=\"imgArrowDown\" class=\"icon\" [class.rotated]=\"open\"></div>\n</div>\n<div class=\"content-wrapper\">\n  @if (open) {\n    <div [@content]>\n      <div class=\"content\">\n        <ng-content />\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;border-radius:16px;border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white);overflow:hidden}:host .header{display:flex;align-items:center;justify-content:space-between;padding:24px;gap:24px;cursor:pointer}:host .header .title{color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px}:host .header .icon{transform:rotate(0);transition:transform .2s ease-in-out}:host .header .icon.rotated{transform:rotate(180deg)}:host.disabled .header{cursor:not-allowed;background:var(--mecx-color-gray-200)}:host .content-wrapper{border-top:1px solid var(--mecx-color-gray-200);overflow:hidden}:host .content-wrapper .content{padding:24px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], title: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyIconComponent {
+    set icon(val) {
+        if (val) {
+            this._icon = `mk-i mk-i-${val}`;
+        }
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.size = '';
+        this._icon = '';
+        this._uid = inject(IdGenerator).getId('monkey-icon-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    ngOnInit() {
+        if (!this._icon) {
+            throw new Error('monkey-icon must have icon input');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyIconComponent, isStandalone: true, selector: "monkey-icon", inputs: { icon: "icon", size: "size", id: "id" }, host: { properties: { "class": "_icon+' '+size", "attr.id": "id", "id": "id" } }, ngImport: i0, template: "", styles: ["monkey-icon{display:inline-flex}monkey-icon.sm{font-size:20px;width:20px;height:20px}monkey-icon.md{font-size:22px;width:22px;height:22px}monkey-icon.lg{font-size:24px;width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-icon', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': `_icon+' '+size`,
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "", styles: ["monkey-icon{display:inline-flex}monkey-icon.sm{font-size:20px;width:20px;height:20px}monkey-icon.md{font-size:22px;width:22px;height:22px}monkey-icon.lg{font-size:24px;width:24px;height:24px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { icon: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyAlertComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.buttonLabel = input('');
+        this.message = input.required();
+        this.title = input.required();
+        this.type = input.required();
+        this.onButtonClicked = output();
+        this._uid = inject(IdGenerator).getId('monkey-alert-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    icon(type) {
+        const typeIcons = {
+            alert: 'warning-outline',
+            default: 'info',
+            error: 'error-outline',
+            info: 'info',
+            success: 'checkmark-big-circle'
+        };
+        return typeIcons[type];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyAlertComponent, isStandalone: true, selector: "monkey-alert", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onButtonClicked: "onButtonClicked" }, host: { attributes: { "data-testid": "monkey-alert" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n  @if (type()) {\n    <monkey-icon size=\"lg\" [class]=\"'monkey-alert__card__type-' + type()\" [icon]=\"icon(type())\" />\n  }\n  <div class=\"monkey-alert__card__content\">\n    <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n    <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n    @if (buttonLabel()) {\n      <div>\n        <a class=\"monkey-alert__card__link\" (click)=\"onButtonClicked.emit()\">\n          {{ buttonLabel() }}\n        </a>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["monkey-alert{display:flex}monkey-alert .monkey-alert__card{border-radius:8px;display:flex;gap:8px;padding:24px}monkey-alert .monkey-alert__card.alert{background-color:#fff8eb;border:solid 2px var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.alert>.mk-i{color:var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.default{background-color:#f8fafb;border:solid 2px #bdc1c7}monkey-alert .monkey-alert__card.default>.mk-i{color:#1f2024}monkey-alert .monkey-alert__card.error{background-color:#ffecec;border:solid 2px #fa3838}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-700)}monkey-alert .monkey-alert__card.info{background-color:var(--mecx-color-question-100);border:solid 2px var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.info>.mk-i{color:var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.success{background-color:#f5fffb;border:solid 2px var(--mecx-color-success-500)}monkey-alert .monkey-alert__card.success>.mk-i{color:var(--mecx-color-success-500)}monkey-alert .monkey-alert__card__content{display:flex;flex-direction:column;gap:8px}monkey-alert .monkey-alert__card__title{color:#1f2024;font-size:18px;font-weight:400;letter-spacing:.54px;line-height:24px}monkey-alert .monkey-alert__card__message{color:#545a63;font-size:14px;font-weight:400;letter-spacing:.42px;line-height:24px}monkey-alert .monkey-alert__card__link{color:#1f2024;cursor:pointer;font-size:14px;font-weight:400;letter-spacing:.42px;line-height:24px;text-decoration:underline}\n"], dependencies: [{ kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyAlertComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, imports: [MonkeyIconComponent], selector: 'monkey-alert', standalone: true, host: {
+                        'data-testid': 'monkey-alert',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<div [class]=\"'monkey-alert__card ' + type()\">\n  @if (type()) {\n    <monkey-icon size=\"lg\" [class]=\"'monkey-alert__card__type-' + type()\" [icon]=\"icon(type())\" />\n  }\n  <div class=\"monkey-alert__card__content\">\n    <h4 class=\"monkey-alert__card__title\">{{ title() }}</h4>\n    <h5 class=\"monkey-alert__card__message\">{{ message() }}</h5>\n    @if (buttonLabel()) {\n      <div>\n        <a class=\"monkey-alert__card__link\" (click)=\"onButtonClicked.emit()\">\n          {{ buttonLabel() }}\n        </a>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["monkey-alert{display:flex}monkey-alert .monkey-alert__card{border-radius:8px;display:flex;gap:8px;padding:24px}monkey-alert .monkey-alert__card.alert{background-color:#fff8eb;border:solid 2px var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.alert>.mk-i{color:var(--mecx-color-warning-500)}monkey-alert .monkey-alert__card.default{background-color:#f8fafb;border:solid 2px #bdc1c7}monkey-alert .monkey-alert__card.default>.mk-i{color:#1f2024}monkey-alert .monkey-alert__card.error{background-color:#ffecec;border:solid 2px #fa3838}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-700)}monkey-alert .monkey-alert__card.info{background-color:var(--mecx-color-question-100);border:solid 2px var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.info>.mk-i{color:var(--mecx-color-question-500)}monkey-alert .monkey-alert__card.success{background-color:#f5fffb;border:solid 2px var(--mecx-color-success-500)}monkey-alert .monkey-alert__card.success>.mk-i{color:var(--mecx-color-success-500)}monkey-alert .monkey-alert__card__content{display:flex;flex-direction:column;gap:8px}monkey-alert .monkey-alert__card__title{color:#1f2024;font-size:18px;font-weight:400;letter-spacing:.54px;line-height:24px}monkey-alert .monkey-alert__card__message{color:#545a63;font-size:14px;font-weight:400;letter-spacing:.42px;line-height:24px}monkey-alert .monkey-alert__card__link{color:#1f2024;cursor:pointer;font-size:14px;font-weight:400;letter-spacing:.42px;line-height:24px;text-decoration:underline}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyBreadcrumbComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.colapsed = false;
+        this._router = inject(Router);
+        this._uid = inject(IdGenerator).getId('monkey-breadcrumb-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    handleNavigate(item) {
+        if (item.callback) {
+            item.callback();
+        }
+        else {
+            this._router.navigate([item.path]);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyBreadcrumbComponent, isStandalone: true, selector: "monkey-breadcrumb", inputs: { first: "first", last: "last", colapsed: ["colapsed", "colapsed", booleanAttribute], id: "id" }, host: { attributes: { "data-testid": "monkey-breadcrumb" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div class=\"breadcrumbs\">\n  <a class=\"first\" (click)=\"handleNavigate(first)\">\n    {{ first.label | titlecase }}\n  </a>\n  <span>/</span>\n  @if(colapsed){\n  <span>...</span>\n  <span>/</span>\n  }\n  <a class=\"last\" (click)=\"handleNavigate(last)\">\n    {{ last.label | titlecase }}\n  </a>\n</div>\n", styles: ["monkey-breadcrumb .last{color:var(--mecx-color-theme-main);text-decoration:none}monkey-breadcrumb .last:hover{text-decoration:underline}monkey-breadcrumb .first{color:#000;text-decoration:none}monkey-breadcrumb .first:hover{text-decoration:underline}monkey-breadcrumb .breadcrumbs{display:flex;gap:8px;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-breadcrumb', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, host: {
+                        'data-testid': 'monkey-breadcrumb',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<div class=\"breadcrumbs\">\n  <a class=\"first\" (click)=\"handleNavigate(first)\">\n    {{ first.label | titlecase }}\n  </a>\n  <span>/</span>\n  @if(colapsed){\n  <span>...</span>\n  <span>/</span>\n  }\n  <a class=\"last\" (click)=\"handleNavigate(last)\">\n    {{ last.label | titlecase }}\n  </a>\n</div>\n", styles: ["monkey-breadcrumb .last{color:var(--mecx-color-theme-main);text-decoration:none}monkey-breadcrumb .last:hover{text-decoration:underline}monkey-breadcrumb .first{color:#000;text-decoration:none}monkey-breadcrumb .first:hover{text-decoration:underline}monkey-breadcrumb .breadcrumbs{display:flex;gap:8px;align-items:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { first: [{
+                type: Input,
+                args: [{ required: true }]
+            }], last: [{
+                type: Input,
+                args: [{ required: true }]
+            }], colapsed: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyButtonComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.size = 'md';
+        this.type = 'primary';
+        this._uid = inject(IdGenerator).getId('monkey-button-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    onClick(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyButtonComponent, isStandalone: true, selector: "monkey-button", inputs: { disabled: "disabled", size: "size", type: "type", id: "id" }, host: { attributes: { "data-testid": "monkey-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button class=\"mecx-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled\">\n  <div class=\"content\">\n    <ng-content select=\"[first]\"></ng-content>\n    <span><ng-content></ng-content></span>\n    <ng-content select=\"[last]\"></ng-content>\n  </div>\n</button>\n", styles: ["monkey-button{display:inline-block}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid #bdc1c7;background:unset}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:#f1f2f3!important;color:#bdc1c7!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid #bdc1c7!important}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyButtonComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, imports: [CommonModule], selector: 'monkey-button', standalone: true, host: {
+                        'data-testid': 'monkey-button',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<button class=\"mecx-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled\">\n  <div class=\"content\">\n    <ng-content select=\"[first]\"></ng-content>\n    <span><ng-content></ng-content></span>\n    <ng-content select=\"[last]\"></ng-content>\n  </div>\n</button>\n", styles: ["monkey-button{display:inline-block}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid #bdc1c7;background:unset}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:#f1f2f3!important;color:#bdc1c7!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid #bdc1c7!important}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyError {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyError, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyError, selector: "monkey-error", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyError, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-error'
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyHelper {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyHelper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyHelper, selector: "monkey-helper", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyHelper, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-helper'
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyInfo {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInfo, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyInfo, selector: "monkey-info", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInfo, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-info'
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyLabel {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyLabel, selector: "monkey-label", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-label'
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyPrefix {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyPrefix, selector: "monkey-prefix", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPrefix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-prefix'
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeySuffix {
+    constructor() {
+        this.hasAction = false;
+        this.action = null;
+    }
+    set _hasAction(value) {
+        this.hasAction = true;
+    }
+    onClick(event) {
+        if (!this.action) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        else {
+            this.action(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeySuffix, selector: "monkey-suffix", inputs: { _hasAction: ["hasAction", "_hasAction"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.has-action": "hasAction" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySuffix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-suffix',
+                    host: {
+                        '[class.has-action]': 'hasAction'
+                    }
+                }]
+        }], propDecorators: { _hasAction: [{
+                type: Input,
+                args: ['hasAction']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyDirectivesModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDirectivesModule, declarations: [MonkeyError, MonkeyHelper, MonkeyInfo, MonkeyLabel, MonkeyPrefix, MonkeySuffix], exports: [MonkeyError, MonkeyHelper, MonkeyInfo, MonkeyLabel, MonkeyPrefix, MonkeySuffix] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDirectivesModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDirectivesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MonkeyError, MonkeyHelper, MonkeyInfo, MonkeyLabel, MonkeyPrefix, MonkeySuffix],
+                    exports: [MonkeyError, MonkeyHelper, MonkeyInfo, MonkeyLabel, MonkeyPrefix, MonkeySuffix]
+                }]
+        }] });
+
+class MonkeyCheckboxComponent {
+    constructor() {
+        this.disabled = false;
+        this.indeterminate = false;
+        this.required = false;
+        this.showFooter = true;
+        this.size = 'md';
+        this.onChange = new EventEmitter();
+        this._destroyed = inject(MonkeyDestroyService);
+        this.icons = inject(MonkeyIconsService);
+        this.idGenerator = inject(IdGenerator);
+        this.injector = inject(Injector);
+        this.cdr = inject(ChangeDetectorRef);
+        this.iconCheck = this.icons.check;
+        this.iconIndeterminate = this.icons.minus;
+        this.inputId = this.idGenerator.getId('input-checkbox-');
+        this.value = false;
+        this.isFocused = false;
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        this._onValidatorChange = () => { };
+        this.onBlur = () => {
+            this._onTouched();
+            this.isFocused = false;
+        };
+        this.onFocus = () => {
+            this.isFocused = true;
+        };
+    }
+    get showInvalid() {
+        const touched = this.control?.touched || false;
+        const invalid = this.control?.invalid || false;
+        return !this.isFocused && touched && invalid;
+    }
+    get hasHeader() {
+        return this.labelChildren.length > 0 || this.helperChildren.length > 0;
+    }
+    get isTouched() {
+        return this.control?.touched ?? false;
+    }
+    get isInvalid() {
+        return this.control?.invalid ?? false;
+    }
+    ngOnInit() {
+        const ngControl = this.injector.get(NgControl, null, { self: true, optional: true });
+        if (ngControl instanceof FormControlDirective || ngControl instanceof NgModel) {
+            this.control = ngControl.control;
+        }
+        else if (ngControl instanceof FormControlName) {
+            this.control = this.injector.get(FormGroupDirective).getControl(ngControl);
+            this.control.statusChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {
+                this.cdr.markForCheck();
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.required) {
+            this._onValidatorChange();
+        }
+    }
+    validate(control) {
+        return this.required && control.value !== true ? { required: true } : null;
+    }
+    writeValue(value) {
+        this.value = value;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this._onValidatorChange = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onChangeEvent(event) {
+        const checkbox = event.target;
+        if (this.indeterminate) {
+            this.indeterminate = false;
+        }
+        this.value = checkbox.checked;
+        this._onChange(this.value);
+        this.onChange.next(this.value);
+        this._onTouched();
+    }
+    getFooterMessages() {
+        const hasInfoChildren = this.infoChildren && this.infoChildren.length > 0;
+        if (!this.disabled && this.isTouched && this.isInvalid) {
+            return 'error';
+        }
+        if (hasInfoChildren) {
+            return 'info';
+        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyCheckboxComponent, isStandalone: true, selector: "monkey-checkbox", inputs: { disabled: ["disabled", "disabled", booleanAttribute], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], required: ["required", "required", booleanAttribute], showFooter: ["showFooter", "showFooter", booleanAttribute], size: "size", value: "value" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "input-checkbox" }, properties: { "class.mecx-disabled": "disabled", "class.mecx-checkbox-checked": "value", "class.mecx-checkbox-focused": "isFocused", "class.mecx-checkbox-indeterminate": "indeterminate", "class.mecx-checkbox-invalid": "showInvalid", "class.sm": "size.includes(\"sm\")", "class.md": "size.includes(\"md\")", "class.lg": "size.includes(\"lg\")" }, classAttribute: "mecx-checkbox" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => {
+                    // eslint-disable-next-line no-use-before-define
+                    return MonkeyCheckboxComponent;
+                }),
+                multi: true
+            },
+            {
+                provide: NG_VALIDATORS,
+                // eslint-disable-next-line no-use-before-define
+                useExisting: MonkeyCheckboxComponent,
+                multi: true
+            },
+            MonkeyDestroyService
+        ], queries: [{ propertyName: "infoChildren", predicate: MonkeyInfo, descendants: true }, { propertyName: "labelChildren", predicate: MonkeyLabel, descendants: true }, { propertyName: "helperChildren", predicate: MonkeyHelper, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (hasHeader) {\n  <div class=\"header\">\n    <ng-content select=\"monkey-label\" />\n    <ng-content select=\"monkey-helper\" />\n  </div>\n}\n<label [attr.for]=\"inputId\">\n  <input\n    type=\"checkbox\"\n    [checked]=\"value\"\n    [indeterminate]=\"indeterminate\"\n    [disabled]=\"disabled\"\n    (change)=\"onChangeEvent($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n    [id]=\"inputId\"\n    [required]=\"required\"\n  />\n  <span class=\"checkbox\">\n    @if (indeterminate) {\n      <div class=\"icon\" @iconAnimation [innerHTML]=\"iconIndeterminate\"></div>\n    } @else if (value) {\n      <div class=\"icon\" @iconAnimation [innerHTML]=\"iconCheck\"></div>\n    }\n  </span>\n  <span class=\"checkbox-label\">\n    <ng-content></ng-content>\n  </span>\n</label>\n@if (showFooter) {\n  @switch (getFooterMessages()) {\n    @case ('error') {\n      <ng-content select=\"monkey-error\" />\n    }\n    @case ('info') {\n      <ng-content select=\"monkey-info\" />\n    }\n  }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}:host .checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:#fff;border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box}:host .checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host .checkbox-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px}:host input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host.sm .checkbox{width:16px;height:16px;border-radius:4px}:host.sm .checkbox-label{line-height:16px}:host.lg .checkbox-label{font-size:16px}:host.mecx-checkbox-checked .checkbox,:host.mecx-checkbox-indeterminate .checkbox{border:none;background-color:var(--mecx-color-theme-main)}:host.mecx-checkbox-focused .checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}:host.mecx-disabled .checkbox-label{color:var(--mecx-color-gray-400)}:host.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-200)}:host.mecx-checkbox-invalid:not(.mecx-checkbox-indeterminate) .checkbox{border:2px solid var(--mecx-color-error-700)}:host.mecx-checkbox-checked.mecx-disabled .checkbox,:host.mecx-checkbox-indeterminate.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-400)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], animations: [
+            trigger('iconAnimation', [
+                transition(':enter', [
+                    animate('250ms ease-in-out', keyframes([
+                        style({ opacity: 0, transform: 'scale(0.7)' }),
+                        style({ opacity: 1, transform: 'scale(1)' })
+                    ]))
+                ]),
+                transition(':leave', [
+                    animate('250ms ease-in-out', keyframes([
+                        style({ opacity: 1, transform: 'scale(1)' }),
+                        style({ opacity: 0, transform: 'scale(.7)' })
+                    ]))
+                ])
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-checkbox', standalone: true, imports: [ReactiveFormsModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('iconAnimation', [
+                            transition(':enter', [
+                                animate('250ms ease-in-out', keyframes([
+                                    style({ opacity: 0, transform: 'scale(0.7)' }),
+                                    style({ opacity: 1, transform: 'scale(1)' })
+                                ]))
+                            ]),
+                            transition(':leave', [
+                                animate('250ms ease-in-out', keyframes([
+                                    style({ opacity: 1, transform: 'scale(1)' }),
+                                    style({ opacity: 0, transform: 'scale(.7)' })
+                                ]))
+                            ])
+                        ])
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => {
+                                // eslint-disable-next-line no-use-before-define
+                                return MonkeyCheckboxComponent;
+                            }),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            // eslint-disable-next-line no-use-before-define
+                            useExisting: MonkeyCheckboxComponent,
+                            multi: true
+                        },
+                        MonkeyDestroyService
+                    ], host: {
+                        'data-testid': 'input-checkbox',
+                        class: 'mecx-checkbox',
+                        '[class.mecx-disabled]': 'disabled',
+                        '[class.mecx-checkbox-checked]': 'value',
+                        '[class.mecx-checkbox-focused]': 'isFocused',
+                        '[class.mecx-checkbox-indeterminate]': 'indeterminate',
+                        '[class.mecx-checkbox-invalid]': 'showInvalid',
+                        '[class.sm]': 'size.includes("sm")',
+                        '[class.md]': 'size.includes("md")',
+                        '[class.lg]': 'size.includes("lg")'
+                    }, template: "@if (hasHeader) {\n  <div class=\"header\">\n    <ng-content select=\"monkey-label\" />\n    <ng-content select=\"monkey-helper\" />\n  </div>\n}\n<label [attr.for]=\"inputId\">\n  <input\n    type=\"checkbox\"\n    [checked]=\"value\"\n    [indeterminate]=\"indeterminate\"\n    [disabled]=\"disabled\"\n    (change)=\"onChangeEvent($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n    [id]=\"inputId\"\n    [required]=\"required\"\n  />\n  <span class=\"checkbox\">\n    @if (indeterminate) {\n      <div class=\"icon\" @iconAnimation [innerHTML]=\"iconIndeterminate\"></div>\n    } @else if (value) {\n      <div class=\"icon\" @iconAnimation [innerHTML]=\"iconCheck\"></div>\n    }\n  </span>\n  <span class=\"checkbox-label\">\n    <ng-content></ng-content>\n  </span>\n</label>\n@if (showFooter) {\n  @switch (getFooterMessages()) {\n    @case ('error') {\n      <ng-content select=\"monkey-error\" />\n    }\n    @case ('info') {\n      <ng-content select=\"monkey-info\" />\n    }\n  }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}:host .checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:#fff;border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box}:host .checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host .checkbox-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px}:host input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host.sm .checkbox{width:16px;height:16px;border-radius:4px}:host.sm .checkbox-label{line-height:16px}:host.lg .checkbox-label{font-size:16px}:host.mecx-checkbox-checked .checkbox,:host.mecx-checkbox-indeterminate .checkbox{border:none;background-color:var(--mecx-color-theme-main)}:host.mecx-checkbox-focused .checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}:host.mecx-disabled .checkbox-label{color:var(--mecx-color-gray-400)}:host.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-200)}:host.mecx-checkbox-invalid:not(.mecx-checkbox-indeterminate) .checkbox{border:2px solid var(--mecx-color-error-700)}:host.mecx-checkbox-checked.mecx-disabled .checkbox,:host.mecx-checkbox-indeterminate.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-400)}\n"] }]
+        }], propDecorators: { infoChildren: [{
+                type: ContentChildren,
+                args: [MonkeyInfo, { descendants: true }]
+            }], labelChildren: [{
+                type: ContentChildren,
+                args: [MonkeyLabel, { descendants: true }]
+            }], helperChildren: [{
+                type: ContentChildren,
+                args: [MonkeyHelper, { descendants: true }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], indeterminate: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], showFooter: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], size: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyDividerComponent {
+    get classes() {
+        return `${this.size()} ${this.vertical() ? 'vertical' : ''}`;
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.size = input('sm');
+        this.vertical = input(false, {
+            transform: booleanAttribute
+        });
+        this._uid = inject(IdGenerator).getId('monkey-divider-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MonkeyDividerComponent, isStandalone: true, selector: "monkey-divider", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-divider" }, properties: { "attr.id": "id", "id": "id", "class": "this.classes" } }, ngImport: i0, template: '', isInline: true, styles: ["monkey-divider{display:flex;box-sizing:border-box;width:100%;background-color:#e9eaec}monkey-divider.lg{height:4px}monkey-divider.lg.vertical{width:4px!important}monkey-divider.md{height:2px}monkey-divider.md.vertical{width:2px!important}monkey-divider.sm{height:1px}monkey-divider.sm.vertical{width:1px!important}monkey-divider.vertical{height:100%}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDividerComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-divider', standalone: true, template: '', host: {
+                        'data-testid': 'monkey-divider',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, styles: ["monkey-divider{display:flex;box-sizing:border-box;width:100%;background-color:#e9eaec}monkey-divider.lg{height:4px}monkey-divider.lg.vertical{width:4px!important}monkey-divider.md{height:2px}monkey-divider.md.vertical{width:2px!important}monkey-divider.sm{height:1px}monkey-divider.sm.vertical{width:1px!important}monkey-divider.vertical{height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['class']
+            }], id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyFormFieldControl {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyFormFieldControl, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldControl, decorators: [{
+            type: Directive
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+function getCurrencySymbol(code) {
+    const currency = code || 'BRL';
+    const symbol = {
+        BRL: 'R$',
+        CLP: '$',
+        MXN: '$',
+        USD: '$'
+    }[currency];
+    return symbol;
+}
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyFormFieldComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    get control() {
+        return this._formFieldControl;
+    }
+    get labelId() {
+        return this._labelId;
+    }
+    get showHeader() {
+        return this.hasLabel || this.hasHelper;
+    }
+    get showFooter() {
+        return this.hasInfo || this.hasError;
+    }
+    get showInvalid() {
+        const touched = this.control.ngControl?.touched || false;
+        const invalid = this.control.ngControl?.invalid || false;
+        return (this.hasError && !this._isFocused && touched && invalid && !this.control.disableToBeDirty);
+    }
+    get showClear() {
+        return (!!this.control.ngControl?.control?.value &&
+            !this.control.disabled &&
+            !this.control.loading &&
+            !this.hideClear);
+    }
+    get showCalendar() {
+        return this.control.type === 'date';
+    }
+    get showCurrency() {
+        return this.control.currency;
+    }
+    get showPercent() {
+        return this.control.percent;
+    }
+    get showLoading() {
+        return this.control.loading || false;
+    }
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this._icons = inject(MonkeyIconsService);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._idGenerator = inject(IdGenerator);
+        this._labelId = this._idGenerator.getId('monkey-label-');
+        this._uid = inject(IdGenerator).getId('monkey-form-field-');
+        this._destroyed = new Subject();
+        this._isFocused = null;
+        this._previousControl = null;
+        this.currencySymbol = getCurrencySymbol(inject(DEFAULT_CURRENCY_CODE));
+        this.percentSymbol = '%';
+        this.imgClear = this._icons.clear;
+        this.imgCalendar = this._icons.calendar;
+        this.imgLoading = this._icons.loading;
+        this.hasLabel = false;
+        this.hasHelper = false;
+        this.hasPrefix = false;
+        this.hasSuffix = false;
+        this.hasInfo = false;
+        this.hasError = false;
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    updateFocusState() {
+        if (this.control.focused && !this._isFocused) {
+            this._isFocused = true;
+        }
+        else if (!this.control.focused && (this._isFocused || this._isFocused === null)) {
+            this._isFocused = false;
+        }
+    }
+    handleFormFieldControl() {
+        if (!this.control) {
+            throw Error('monkey-form-field must have a MonkeyFormFieldControl');
+        }
+    }
+    checkPrefixAndSuffix() {
+        this.hasPrefix = !!this._prefixChildren?.length;
+        this.hasSuffix = !!this._suffixChildren?.length;
+        const suffix = this._suffixChildren.get(0);
+        if (suffix) {
+            suffix.action = (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+            };
+        }
+    }
+    initializePrefixAndSuffix() {
+        this.checkPrefixAndSuffix();
+        merge(this._prefixChildren.changes, this._suffixChildren.changes).subscribe(() => {
+            this.checkPrefixAndSuffix();
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    checkInfoError() {
+        this.hasInfo = !!this._infoChildren?.length;
+        this.hasError = !!this._errorChildren?.length;
+    }
+    initializeInfoError() {
+        this.checkInfoError();
+        merge(this._infoChildren.changes, this._errorChildren.changes).subscribe(() => {
+            this.checkInfoError();
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    initializeComponents() {
+        this.hasLabel = !!this._labelChildren?.length;
+        this.hasHelper = !!this._helperChildren?.length;
+        this.initializePrefixAndSuffix();
+        this.initializeInfoError();
+    }
+    initializeControl() {
+        const { control } = this;
+        this._stateChanges?.unsubscribe();
+        this._stateChanges = control.stateChanges.subscribe(() => {
+            this.updateFocusState();
+            this._changeDetectorRef.markForCheck();
+        });
+        this._valueChanges?.unsubscribe();
+        if (control.ngControl && control.ngControl.valueChanges) {
+            this._valueChanges = control.ngControl.valueChanges
+                .pipe(takeUntil(this._destroyed))
+                .subscribe(() => {
+                this._changeDetectorRef.markForCheck();
+            });
+        }
+    }
+    openDatePicker() {
+        const input = document.getElementById(this.control.id);
+        if (input.showPicker) {
+            input.showPicker();
+        }
+        else {
+            input.focus();
+        }
+    }
+    ngAfterContentInit() {
+        this.handleFormFieldControl();
+        this.initializeComponents();
+    }
+    ngAfterContentChecked() {
+        this.handleFormFieldControl();
+        if (this.control !== this._previousControl) {
+            this.initializeControl();
+            this._previousControl = this.control;
+        }
+    }
+    ngOnDestroy() {
+        this._stateChanges?.unsubscribe();
+        this._valueChanges?.unsubscribe();
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    getFooterMessages() {
+        const touched = this.control.ngControl?.touched;
+        const invalid = this.control.ngControl?.invalid;
+        const isFocused = this._isFocused;
+        const hasInfoChildren = this._infoChildren && this._infoChildren.length > 0;
+        const isControlEnabled = !this.control.disabled;
+        const isControlDisableToBeDirty = !this.control.disableToBeDirty;
+        const isTouched = touched;
+        const isInvalid = invalid;
+        const isNotFocused = !isFocused;
+        if (isControlEnabled && isTouched && isInvalid && isNotFocused && isControlDisableToBeDirty) {
+            return 'error';
+        }
+        if (hasInfoChildren) {
+            return 'info';
+        }
+        return '';
+    }
+    getSymbols() {
+        if (this.showCurrency && this.currencySymbol) {
+            return this.currencySymbol;
+        }
+        if (this.showPercent && this.percentSymbol) {
+            return this.percentSymbol;
+        }
+        return '';
+    }
+    onClear(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.control.ngControl?.control?.setValue('');
+        this.control.ngControl?.control?.markAsTouched();
+    }
+    onOpenCalendar(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.control.type === 'date') {
+            this.openDatePicker();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: { id: "id", hideClear: ["hideClear", "hideClear", booleanAttribute] }, host: { properties: { "class.mecx-disabled": "control.disabled", "class.mecx-form-field-focused": "control.focused", "class.mecx-form-field-invalid": "showInvalid", "attr.id": "id", "id": "id" }, classAttribute: "mecx-form-field" }, queries: [{ propertyName: "_formFieldControl", first: true, predicate: MonkeyFormFieldControl, descendants: true }, { propertyName: "_labelChildren", predicate: MonkeyLabel, descendants: true }, { propertyName: "_helperChildren", predicate: MonkeyHelper, descendants: true }, { propertyName: "_prefixChildren", predicate: MonkeyPrefix, descendants: true }, { propertyName: "_suffixChildren", predicate: MonkeySuffix, descendants: true }, { propertyName: "_infoChildren", predicate: MonkeyInfo, descendants: true }, { propertyName: "_errorChildren", predicate: MonkeyError, descendants: true }], exportAs: ["monkeyFormField"], ngImport: i0, template: "@if (showHeader) {\n  <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n    <label [id]=\"labelId\" [attr.for]=\"control.id\">\n      <ng-content select=\"monkey-label\"></ng-content>\n    </label>\n    <ng-content select=\"monkey-helper\"></ng-content>\n  </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n  @if (hasPrefix) {\n    <ng-content select=\"monkey-prefix\"></ng-content>\n  }\n  @if (getSymbols(); as symbols) {\n    <div class=\"mecx-form-field-prefix-symbol\">\n      {{ symbols }}\n    </div>\n  }\n\n  <ng-content></ng-content>\n\n  @if (showClear) {\n    <div [innerHTML]=\"imgClear\" class=\"mecx-clear\" (click)=\"onClear($event)\"></div>\n  }\n  @if (showCalendar) {\n    <div [innerHTML]=\"imgCalendar\" class=\"mecx-calendar\" (click)=\"onOpenCalendar($event)\"></div>\n  }\n  @if (showLoading) {\n    <div [innerHTML]=\"imgLoading\" class=\"mecx-form-field-loading\"></div>\n  }\n\n  @if (hasSuffix) {\n    <ng-content select=\"monkey-suffix\"></ng-content>\n  }\n</div>\n\n@if (showFooter) {\n  <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\n    @switch (getFooterMessages()) {\n      @case ('error') {\n        <ng-content select=\"monkey-error\"></ng-content>\n      }\n      @case ('info') {\n        <div class=\"mecx-form-field-info\">\n          <ng-content select=\"monkey-info\"></ng-content>\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:8px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}.mecx-disabled .mecx-form-field-body{border-color:var(--mecx-color-gray-50);background:var(--mecx-color-gray-50);border-radius:8px}.mecx-form-field-body .mecx-clear,.mecx-form-field-body .mecx-calendar{display:flex;align-items:center;justify-content:center;cursor:pointer}.mecx-form-field-body .mecx-calendar svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-footer{display:flex;flex-direction:column}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-form-field', exportAs: 'monkeyFormField', host: {
+                        class: 'mecx-form-field',
+                        '[class.mecx-disabled]': 'control.disabled',
+                        '[class.mecx-form-field-focused]': 'control.focused',
+                        '[class.mecx-form-field-invalid]': 'showInvalid',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "@if (showHeader) {\n  <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\n    <label [id]=\"labelId\" [attr.for]=\"control.id\">\n      <ng-content select=\"monkey-label\"></ng-content>\n    </label>\n    <ng-content select=\"monkey-helper\"></ng-content>\n  </div>\n}\n\n<div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\n  @if (hasPrefix) {\n    <ng-content select=\"monkey-prefix\"></ng-content>\n  }\n  @if (getSymbols(); as symbols) {\n    <div class=\"mecx-form-field-prefix-symbol\">\n      {{ symbols }}\n    </div>\n  }\n\n  <ng-content></ng-content>\n\n  @if (showClear) {\n    <div [innerHTML]=\"imgClear\" class=\"mecx-clear\" (click)=\"onClear($event)\"></div>\n  }\n  @if (showCalendar) {\n    <div [innerHTML]=\"imgCalendar\" class=\"mecx-calendar\" (click)=\"onOpenCalendar($event)\"></div>\n  }\n  @if (showLoading) {\n    <div [innerHTML]=\"imgLoading\" class=\"mecx-form-field-loading\"></div>\n  }\n\n  @if (hasSuffix) {\n    <ng-content select=\"monkey-suffix\"></ng-content>\n  }\n</div>\n\n@if (showFooter) {\n  <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\n    @switch (getFooterMessages()) {\n      @case ('error') {\n        <ng-content select=\"monkey-error\"></ng-content>\n      }\n      @case ('info') {\n        <div class=\"mecx-form-field-info\">\n          <ng-content select=\"monkey-info\"></ng-content>\n        </div>\n      }\n    }\n  </div>\n}\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:center}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-body{border-radius:8px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}.mecx-disabled .mecx-form-field-body{border-color:var(--mecx-color-gray-50);background:var(--mecx-color-gray-50);border-radius:8px}.mecx-form-field-body .mecx-clear,.mecx-form-field-body .mecx-calendar{display:flex;align-items:center;justify-content:center;cursor:pointer}.mecx-form-field-body .mecx-calendar svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-footer{display:flex;flex-direction:column}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{
+                type: Input
+            }], hideClear: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], _formFieldControl: [{
+                type: ContentChild,
+                args: [MonkeyFormFieldControl]
+            }], _labelChildren: [{
+                type: ContentChildren,
+                args: [MonkeyLabel, { descendants: true }]
+            }], _helperChildren: [{
+                type: ContentChildren,
+                args: [MonkeyHelper, { descendants: true }]
+            }], _prefixChildren: [{
+                type: ContentChildren,
+                args: [MonkeyPrefix, { descendants: true }]
+            }], _suffixChildren: [{
+                type: ContentChildren,
+                args: [MonkeySuffix, { descendants: true }]
+            }], _infoChildren: [{
+                type: ContentChildren,
+                args: [MonkeyInfo, { descendants: true }]
+            }], _errorChildren: [{
+                type: ContentChildren,
+                args: [MonkeyError, { descendants: true }]
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyFormFieldModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldModule, declarations: [MonkeyFormFieldComponent], exports: [MonkeyFormFieldComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MonkeyFormFieldComponent],
+                    exports: [MonkeyFormFieldComponent]
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyIconButtonComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.type = 'primary';
+        this.size = 'md';
+        this.disabled = false;
+        this.icon = '';
+        this._uid = inject(IdGenerator).getId('monkey-icon-button-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    onClick(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyIconButtonComponent, isStandalone: true, selector: "monkey-icon-button", inputs: { type: "type", size: "size", disabled: "disabled", icon: "icon", id: "id" }, host: { attributes: { "data-testid": "monkey-icon-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button class=\"mecx-icon-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled\">\n  <div class=\"content\">\n    <monkey-icon [icon]=\"icon\" [size]=\"size\" first></monkey-icon>\n  </div>\n</button>\n", styles: ["monkey-icon-button{display:inline-block;margin:0 2px}monkey-icon-button .mecx-icon-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-icon-button .mecx-icon-button .content{display:flex;align-items:center;justify-content:center;padding:12px;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-icon-button .mecx-icon-button .content span{width:100%}monkey-icon-button .mecx-icon-button .content .mk-i{display:flex}monkey-icon-button .mecx-icon-button:disabled{background:#f1f2f3!important;color:#bdc1c7!important;cursor:not-allowed!important}monkey-icon-button .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid #bdc1c7!important}monkey-icon-button .mecx-icon-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-icon-button .mecx-icon-button.secondary{border:2px solid #bdc1c7;background:unset}monkey-icon-button .mecx-icon-button.secondary:disabled{border-width:1px}monkey-icon-button .mecx-icon-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.tertiary{background:unset}monkey-icon-button .mecx-icon-button.tertiary span{text-decoration:underline}monkey-icon-button .mecx-icon-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-icon-button .mecx-icon-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.sm{width:32px;height:32px}monkey-icon-button .mecx-icon-button.sm .mk-i{font-size:20px}monkey-icon-button .mecx-icon-button.md{width:40px;height:40px}monkey-icon-button .mecx-icon-button.md .mk-i{font-size:22px}monkey-icon-button .mecx-icon-button.lg{width:48px;height:48px}monkey-icon-button .mecx-icon-button.lg .mk-i{font-size:24px}monkey-icon-button .mecx-icon-button.full-width{width:100%}monkey-icon-button .mecx-icon-button:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-icon-button .mecx-icon-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-icon-button .mecx-icon-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyIconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-icon-button', standalone: true, imports: [CommonModule, MonkeyIconComponent], encapsulation: ViewEncapsulation.None, host: {
+                        'data-testid': 'monkey-icon-button',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<button class=\"mecx-icon-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled\">\n  <div class=\"content\">\n    <monkey-icon [icon]=\"icon\" [size]=\"size\" first></monkey-icon>\n  </div>\n</button>\n", styles: ["monkey-icon-button{display:inline-block;margin:0 2px}monkey-icon-button .mecx-icon-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-icon-button .mecx-icon-button .content{display:flex;align-items:center;justify-content:center;padding:12px;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-icon-button .mecx-icon-button .content span{width:100%}monkey-icon-button .mecx-icon-button .content .mk-i{display:flex}monkey-icon-button .mecx-icon-button:disabled{background:#f1f2f3!important;color:#bdc1c7!important;cursor:not-allowed!important}monkey-icon-button .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid #bdc1c7!important}monkey-icon-button .mecx-icon-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-icon-button .mecx-icon-button.secondary{border:2px solid #bdc1c7;background:unset}monkey-icon-button .mecx-icon-button.secondary:disabled{border-width:1px}monkey-icon-button .mecx-icon-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.tertiary{background:unset}monkey-icon-button .mecx-icon-button.tertiary span{text-decoration:underline}monkey-icon-button .mecx-icon-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-icon-button .mecx-icon-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button .mecx-icon-button.sm{width:32px;height:32px}monkey-icon-button .mecx-icon-button.sm .mk-i{font-size:20px}monkey-icon-button .mecx-icon-button.md{width:40px;height:40px}monkey-icon-button .mecx-icon-button.md .mk-i{font-size:22px}monkey-icon-button .mecx-icon-button.lg{width:48px;height:48px}monkey-icon-button .mecx-icon-button.lg .mk-i{font-size:24px}monkey-icon-button .mecx-icon-button.full-width{width:100%}monkey-icon-button .mecx-icon-button:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-icon-button .mecx-icon-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-icon-button .mecx-icon-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyInputCurrencyDirective {
+    get disabled() {
+        if (this.ngControl && this.ngControl.disabled !== null) {
+            return this.ngControl.disabled;
+        }
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        if (this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
+        }
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    get required() {
+        return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+    }
+    get type() {
+        return this._type;
+    }
+    set type(value) {
+        this._type = value;
+    }
+    get currency() {
+        return true;
+    }
+    get percent() {
+        return false;
+    }
+    constructor(el, renderer, currencyPipe) {
+        this.el = el;
+        this.renderer = renderer;
+        this.currencyPipe = currencyPipe;
+        this._elementRef = inject(ElementRef);
+        this._uid = inject(IdGenerator).getId('monkey-input-currency-');
+        this.stateChanges = new Subject();
+        this._disabled = false;
+        this._type = 'text';
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._currencyCode = inject(DEFAULT_CURRENCY_CODE);
+        this._localeId = inject(LOCALE_ID);
+        this._destroyed = new Subject();
+        this._rawValue = 0;
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.focused = false;
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    markAsUntouched() {
+        this.ngControl?.control?.markAsUntouched();
+    }
+    focus(options) {
+        this._elementRef.nativeElement.focus(options);
+        this.markAsUntouched();
+    }
+    formatValue(value) {
+        return this.currencyPipe.transform(value, this._currencyCode || 'BRL', '', '1.2-2', this._localeId || 'pt-BR');
+    }
+    handleControlValue() {
+        const value = this.ngControl?.control?.value;
+        if (this._rawValue !== value) {
+            this._rawValue = value;
+            let handled = value;
+            const decimal = `${value}`.split('.')[1];
+            if (`${decimal}`.length >= 2) {
+                handled = `${value}`.replace(/[^0-9]/g, '');
+                handled = `${Number(handled) / 100}`;
+            }
+            this.ngControl?.control?.setValue(Number(handled), { emitEvent: false, onlySelf: true });
+            const formattedValue = this.formatValue(handled);
+            this.renderer.setProperty(this.el.nativeElement, 'value', formattedValue);
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    ngOnInit() {
+        this.handleControlValue();
+        this._valueChanges?.unsubscribe();
+        this._valueChanges = this.ngControl?.control?.valueChanges
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(() => {
+            this.handleControlValue();
+        });
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+        this._valueChanges?.unsubscribe();
+    }
+    ngOnChanges({ disabled }) {
+        if (!disabled) {
+            this.stateChanges.next();
+        }
+    }
+    onContainerClick() {
+        if (!this.focused) {
+            this.focus();
+        }
+    }
+    focusChanged(isFocused) {
+        if (isFocused === this.focused) {
+            return;
+        }
+        if (isFocused && this.disabled) {
+            const element = this._elementRef.nativeElement;
+            element.setSelectionRange(0, 0);
+        }
+        this.markAsUntouched();
+        this.focused = isFocused;
+        this.stateChanges.next();
+    }
+    focusOutChanged() {
+        this.ngControl?.control?.markAsTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputCurrencyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyInputCurrencyDirective, selector: "input[monkey-input-currency]", inputs: { name: "name", disabled: ["disabled", "disabled", booleanAttribute], id: "id", required: "required", type: "type" }, host: { listeners: { "focus": "focusChanged(true)", "focusout": "focusOutChanged()", "blur": "focusChanged(false)" }, properties: { "class.mecx-input-disabled": "disabled", "id": "id", "disabled": "disabled", "required": "required", "attr.name": "name || null", "attr.disabled": "disabled || null", "attr.aria-invalid": "(empty && required) ? null : errorState", "attr.aria-required": "required", "attr.id": "id" }, classAttribute: "mecx-input" }, providers: [
+            {
+                provide: MonkeyFormFieldControl,
+                // eslint-disable-next-line no-use-before-define
+                useExisting: MonkeyInputCurrencyDirective
+            },
+            MonkeyDestroyService
+        ], exportAs: ["monkeyInput"], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputCurrencyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[monkey-input-currency]',
+                    exportAs: 'monkeyInput',
+                    host: {
+                        class: 'mecx-input',
+                        '[class.mecx-input-disabled]': 'disabled',
+                        '[id]': 'id',
+                        '[disabled]': 'disabled',
+                        '[required]': 'required',
+                        '[attr.name]': 'name || null',
+                        '[attr.disabled]': 'disabled || null',
+                        '[attr.aria-invalid]': '(empty && required) ? null : errorState',
+                        '[attr.aria-required]': 'required',
+                        '[attr.id]': 'id',
+                        '(focus)': 'focusChanged(true)',
+                        '(focusout)': 'focusOutChanged()',
+                        '(blur)': 'focusChanged(false)'
+                    },
+                    providers: [
+                        {
+                            provide: MonkeyFormFieldControl,
+                            // eslint-disable-next-line no-use-before-define
+                            useExisting: MonkeyInputCurrencyDirective
+                        },
+                        MonkeyDestroyService
+                    ]
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.CurrencyPipe }], propDecorators: { name: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], id: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
+const INPUT_INVALID_TYPES = [
+    'button',
+    'checkbox',
+    'file',
+    'image',
+    'radio',
+    'range',
+    'reset',
+    'submit'
+];
+function validateType(type) {
+    if (INPUT_INVALID_TYPES.indexOf(type) > -1 || !getSupportedInputTypes().has(type)) {
+        throw Error(`Input type "${type}" isn't supported.`);
+    }
+}
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyInputDirective {
+    get disabled() {
+        if (this.ngControl && this.ngControl.disabled !== null) {
+            return this.ngControl.disabled;
+        }
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        if (this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
+        }
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    get required() {
+        return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+    }
+    get type() {
+        return this._type;
+    }
+    set type(value) {
+        validateType(value);
+        this._type = value || 'text';
+        this._elementRef.nativeElement.type = this._type;
+    }
+    get currency() {
+        return false;
+    }
+    get percent() {
+        return this._percent;
+    }
+    set percent(value) {
+        this._percent = true;
+    }
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        this._uid = inject(IdGenerator).getId('monkey-input-');
+        this.stateChanges = new Subject();
+        this._disabled = false;
+        this._type = 'text';
+        this._percent = false;
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.focused = false;
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    markAsUntouched() {
+        this.ngControl?.control?.markAsUntouched();
+    }
+    focus(options) {
+        this._elementRef.nativeElement.focus(options);
+        this.markAsUntouched();
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    ngOnChanges({ disabled }) {
+        if (!disabled) {
+            this.stateChanges.next();
+        }
+    }
+    onContainerClick() {
+        if (!this.focused) {
+            this.focus();
+        }
+    }
+    focusChanged(isFocused) {
+        if (isFocused === this.focused) {
+            return;
+        }
+        if (isFocused && this.disabled) {
+            const element = this._elementRef.nativeElement;
+            if (element.type === 'number') {
+                element.type = 'text';
+                element.setSelectionRange(0, 0);
+                element.type = 'number';
+            }
+            else {
+                element.setSelectionRange(0, 0);
+            }
+        }
+        this.markAsUntouched();
+        this.focused = isFocused;
+        this.stateChanges.next();
+    }
+    focusOutChanged() {
+        this.ngControl?.control?.markAsTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: { name: "name", disabled: ["disabled", "disabled", booleanAttribute], id: "id", required: "required", type: "type", percent: "percent" }, host: { attributes: { "data-testid": "monkey-input" }, listeners: { "focus": "focusChanged(true)", "focusout": "focusOutChanged()", "blur": "focusChanged(false)" }, properties: { "class.mecx-input-disabled": "disabled", "id": "id", "disabled": "disabled", "required": "required", "attr.name": "name || null", "attr.disabled": "disabled || null", "attr.aria-invalid": "(empty && required) ? null : errorState", "attr.aria-required": "required", "attr.id": "id" }, classAttribute: "mecx-input" }, providers: [
+            {
+                provide: MonkeyFormFieldControl,
+                // eslint-disable-next-line no-use-before-define
+                useExisting: MonkeyInputDirective
+            },
+            MonkeyDestroyService
+        ], exportAs: ["monkeyInput"], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[monkey-input],textarea[monkey-input]',
+                    exportAs: 'monkeyInput',
+                    host: {
+                        class: 'mecx-input',
+                        'data-testid': 'monkey-input',
+                        '[class.mecx-input-disabled]': 'disabled',
+                        '[id]': 'id',
+                        '[disabled]': 'disabled',
+                        '[required]': 'required',
+                        '[attr.name]': 'name || null',
+                        '[attr.disabled]': 'disabled || null',
+                        '[attr.aria-invalid]': '(empty && required) ? null : errorState',
+                        '[attr.aria-required]': 'required',
+                        '[attr.id]': 'id',
+                        '(focus)': 'focusChanged(true)',
+                        '(focusout)': 'focusOutChanged()',
+                        '(blur)': 'focusChanged(false)'
+                    },
+                    providers: [
+                        {
+                            provide: MonkeyFormFieldControl,
+                            // eslint-disable-next-line no-use-before-define
+                            useExisting: MonkeyInputDirective
+                        },
+                        MonkeyDestroyService
+                    ]
+                }]
+        }], ctorParameters: () => [], propDecorators: { name: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], id: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], percent: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputModule, declarations: [MonkeyInputDirective, MonkeyInputCurrencyDirective], exports: [MonkeyInputDirective, MonkeyInputCurrencyDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputModule, providers: [CurrencyPipe] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    providers: [CurrencyPipe],
+                    declarations: [MonkeyInputDirective, MonkeyInputCurrencyDirective],
+                    exports: [MonkeyInputDirective, MonkeyInputCurrencyDirective]
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeySecurityLevelComponent {
+    get class() {
+        if (this.score() === 0) {
+            return 'empty';
+        }
+        if (this.score() < 300) {
+            return 'weak';
+        }
+        if (this.score() >= 300 && this.score() < 800) {
+            return 'medium';
+        }
+        if (this.score() >= 800 && this.score() < 1000) {
+            return 'strong';
+        }
+        return 'very-strong';
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.label = input();
+        this.score = input.required();
+        this.strengthLabel = input();
+        this._uid = inject(IdGenerator).getId('monkey-security-level-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySecurityLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MonkeySecurityLevelComponent, isStandalone: true, selector: "monkey-security-level", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, score: { classPropertyName: "score", publicName: "score", isSignal: true, isRequired: true, transformFunction: null }, strengthLabel: { classPropertyName: "strengthLabel", publicName: "strengthLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-security-level" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: ["monkey-security-level{display:flex;align-items:center;gap:8px;width:100%}monkey-security-level span{color:#545a63;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .level-info{color:#1f2024;margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .body{display:flex;flex-direction:column;align-items:baseline;width:100%}monkey-security-level .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:#d3d6da;position:relative;overflow:hidden}monkey-security-level .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}monkey-security-level.very-strong .bar:before{background:#00875a;width:100%}monkey-security-level.strong .bar:before{background:#00875a;width:80%}monkey-security-level.medium .bar:before{background:#efa30e;width:66%}monkey-security-level.weak .bar:before{background:#db0505;width:33%}monkey-security-level.empty .bar:before{background:#db0505;width:0%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySecurityLevelComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, imports: [CommonModule], selector: 'monkey-security-level', standalone: true, host: {
+                        'data-testid': 'monkey-security-level',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: ["monkey-security-level{display:flex;align-items:center;gap:8px;width:100%}monkey-security-level span{color:#545a63;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .level-info{color:#1f2024;margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .body{display:flex;flex-direction:column;align-items:baseline;width:100%}monkey-security-level .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:#d3d6da;position:relative;overflow:hidden}monkey-security-level .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}monkey-security-level.very-strong .bar:before{background:#00875a;width:100%}monkey-security-level.strong .bar:before{background:#00875a;width:80%}monkey-security-level.medium .bar:before{background:#efa30e;width:66%}monkey-security-level.weak .bar:before{background:#db0505;width:33%}monkey-security-level.empty .bar:before{background:#db0505;width:0%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyStatusComponent {
+    get class() {
+        return `${this.type()} ${this.size()}`;
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.type = input.required();
+        this.size = input('md');
+        this.label = input();
+        this._uid = inject(IdGenerator).getId('monkey-status-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MonkeyStatusComponent, isStandalone: true, selector: "monkey-status", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-status" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n  {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:#545a63;font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:#d3d6da}:host.success .status{background-color:#00875a}:host.warning .status{background-color:#efa30e}:host.error .status{background-color:#db0505}:host.question .status{background-color:#8d38fa}:host.info .status{background-color:#003687}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-status', standalone: true, imports: [CommonModule], host: {
+                        'data-testid': 'monkey-status',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n  {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:#545a63;font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:#d3d6da}:host.success .status{background-color:#00875a}:host.warning .status{background-color:#efa30e}:host.error .status{background-color:#db0505}:host.question .status{background-color:#8d38fa}:host.info .status{background-color:#003687}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyPaginationActionComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.next = false;
+        this.prev = false;
+        this.onAction = new EventEmitter();
+        this._uid = inject(IdGenerator).getId('monkey-pagination-action-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPaginationActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyPaginationActionComponent, isStandalone: true, selector: "monkey-pagination-action", inputs: { disabled: "disabled", first: "first", last: "last", next: "next", prev: "prev", id: "id" }, outputs: { onAction: "onAction" }, host: { attributes: { "data-testid": "monkey-pagination-action" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationAction"], ngImport: i0, template: "<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('prev')\"\n  [disabled]=\"disabled || !prev\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M11.670 8.630 C 9.335 10.964,8.550 11.772,8.523 11.870 C 8.501 11.947,8.501 12.053,8.523 12.130 C 8.574 12.316,14.682 18.423,14.870 18.477 C 15.231 18.581,15.581 18.231,15.477 17.869 C 15.450 17.774,14.687 16.987,12.570 14.870 L 9.700 12.000 12.570 9.130 C 14.687 7.013,15.450 6.226,15.477 6.131 C 15.528 5.951,15.464 5.747,15.316 5.623 C 15.219 5.541,15.151 5.520,14.988 5.520 L 14.781 5.520 11.670 8.630 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n\n<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('next')\"\n  [disabled]=\"disabled || !next\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M8.751 5.583 C 8.552 5.691,8.459 6.004,8.564 6.213 C 8.588 6.261,9.889 7.583,11.454 9.150 L 14.300 12.000 11.454 14.850 C 9.889 16.418,8.588 17.739,8.564 17.787 C 8.357 18.197,8.823 18.640,9.232 18.423 C 9.363 18.353,15.373 12.337,15.436 12.213 C 15.497 12.092,15.491 11.897,15.423 11.768 C 15.353 11.637,9.337 5.627,9.213 5.564 C 9.092 5.503,8.881 5.512,8.751 5.583 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n", styles: ["monkey-pagination-action{display:flex;align-items:center;gap:8px}monkey-pagination-action monkey-button .mecx-button .content{padding:unset}monkey-pagination-action monkey-button .mecx-button .content span{display:flex;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "size", "type", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPaginationActionComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule, MonkeyButtonComponent], encapsulation: ViewEncapsulation.None, selector: 'monkey-pagination-action', exportAs: 'monkeyPaginationAction', host: {
+                        'data-testid': 'monkey-pagination-action',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('prev')\"\n  [disabled]=\"disabled || !prev\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M11.670 8.630 C 9.335 10.964,8.550 11.772,8.523 11.870 C 8.501 11.947,8.501 12.053,8.523 12.130 C 8.574 12.316,14.682 18.423,14.870 18.477 C 15.231 18.581,15.581 18.231,15.477 17.869 C 15.450 17.774,14.687 16.987,12.570 14.870 L 9.700 12.000 12.570 9.130 C 14.687 7.013,15.450 6.226,15.477 6.131 C 15.528 5.951,15.464 5.747,15.316 5.623 C 15.219 5.541,15.151 5.520,14.988 5.520 L 14.781 5.520 11.670 8.630 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n\n<monkey-button\n  type=\"secondary\"\n  size=\"sm\"\n  (click)=\"onAction.next('next')\"\n  [disabled]=\"disabled || !next\"\n>\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M8.751 5.583 C 8.552 5.691,8.459 6.004,8.564 6.213 C 8.588 6.261,9.889 7.583,11.454 9.150 L 14.300 12.000 11.454 14.850 C 9.889 16.418,8.588 17.739,8.564 17.787 C 8.357 18.197,8.823 18.640,9.232 18.423 C 9.363 18.353,15.373 12.337,15.436 12.213 C 15.497 12.092,15.491 11.897,15.423 11.768 C 15.353 11.637,9.337 5.627,9.213 5.564 C 9.092 5.503,8.881 5.512,8.751 5.583 \"\n      stroke=\"none\"\n      fill-rule=\"evenodd\"\n      fill=\"black\"\n    ></path>\n  </svg>\n</monkey-button>\n", styles: ["monkey-pagination-action{display:flex;align-items:center;gap:8px}monkey-pagination-action monkey-button .mecx-button .content{padding:unset}monkey-pagination-action monkey-button .mecx-button .content span{display:flex;height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
+                type: Input
+            }], first: [{
+                type: Input
+            }], last: [{
+                type: Input
+            }], next: [{
+                type: Input,
+                args: [{ required: true }]
+            }], prev: [{
+                type: Input,
+                args: [{ required: true }]
+            }], onAction: [{
+                type: Output
+            }], id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyPaginationLabelComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this._uid = inject(IdGenerator).getId('monkey-pagination-label-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPaginationLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyPaginationLabelComponent, isStandalone: true, selector: "monkey-pagination-label", inputs: { id: "id" }, host: { attributes: { "data-testid": "monkey-pagination-label" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationLabel"], ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["monkey-pagination-label{font-size:12px}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPaginationLabelComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, encapsulation: ViewEncapsulation.None, selector: 'monkey-pagination-label', exportAs: 'monkeyPaginationLabel', host: {
+                        'data-testid': 'monkey-pagination-label',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<ng-content></ng-content>\n", styles: ["monkey-pagination-label{font-size:12px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyOptionComponent {
+    constructor() {
+        this.idGenerator = inject(IdGenerator);
+        this.disabled = false;
+        this.selected = false;
+        this.tabIndex = 0;
+        this.id = this.idGenerator.getId('mecx-option-');
+    }
+    get displayContent() {
+        return (this._content?.nativeElement.textContent || '').trim();
+    }
+    onClick(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        else {
+            this.action?.();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyOptionComponent, isStandalone: true, selector: "monkey-option", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, host: { attributes: { "data-testid": "monkey-option" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "class.mecx-option-disabled": "disabled", "class.mecx-option-selected": "selected", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-option" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `<div #content><ng-content /></div>`, isInline: true, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:#fff;cursor:default}monkey-option.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-option', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<div #content><ng-content /></div>`, encapsulation: ViewEncapsulation.None, host: {
+                        'data-testid': 'monkey-option',
+                        '[attr.id]': 'id',
+                        class: 'mecx-option',
+                        '[class.mecx-option-disabled]': 'disabled',
+                        '[class.mecx-option-selected]': 'selected',
+                        '[attr.tabindex]': 'disabled ? -1 : tabIndex'
+                    }, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:#fff;cursor:default}monkey-option.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}\n"] }]
+        }], propDecorators: { _content: [{
+                type: ViewChild,
+                args: ['content', { static: true }]
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeySelectComponent {
+    get disabled() {
+        if (this.ngControl && this.ngControl.disabled !== null) {
+            return this.ngControl.disabled;
+        }
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        if (this.focused) {
+            this.focused = false;
+            this.stateChanges.next();
+        }
+    }
+    get required() {
+        return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
+    }
+    set required(value) {
+        this._required = value;
+        this.stateChanges.next();
+    }
+    set value(value) {
+        if (this._value !== value) {
+            this._value = value;
+            this._onChange(value);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(overlay, changeDetectorRef, viewContainerRef, formField) {
+        this.overlay = overlay;
+        this.changeDetectorRef = changeDetectorRef;
+        this.viewContainerRef = viewContainerRef;
+        this.formField = formField;
+        this.tabIndex = 0;
+        this.onChange = new EventEmitter();
+        this.placeholder = '';
+        this.loading = false;
+        this._value = null;
+        this.labelSelected = '';
+        this.overlayRef = null;
+        this.isOpen = false;
+        this._destroyed = inject(MonkeyDestroyService);
+        this.iconArrowDown = inject(MonkeyIconsService).arrowDown;
+        this.idGenerator = inject(IdGenerator);
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this._elementRef = inject(ElementRef);
+        this.currency = false;
+        this.focused = false;
+        this._disabled = false;
+        this.id = this.idGenerator.getId('monkey-select-');
+        this.percent = false;
+        this.stateChanges = new Subject();
+        this.type = '';
+        this.onAnimationEnd = (event) => {
+            if (event.toState === 'closed') {
+                this.closeOverlay();
+            }
+        };
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    changeControl() {
+        if (this.formField?.control) {
+            this.formField.control.loading = this.loading;
+        }
+    }
+    changeSelected() {
+        setTimeout(() => {
+            if (this.options) {
+                this.options.forEach((opt) => {
+                    opt.selected = opt.value === this.value;
+                });
+                this.updateSelectedLabel();
+            }
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    initializeOptions() {
+        this.options.forEach((option) => {
+            if (!option.action) {
+                option.action = this.selectOption.bind(this, option);
+            }
+        });
+    }
+    ngAfterContentInit() {
+        this.initializeOptions();
+        this.options.changes.subscribe((resp) => {
+            this.updateSelectedLabel();
+            this.initializeOptions();
+            this.changeSelected();
+        });
+    }
+    ngOnDestroy() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+        }
+    }
+    toggleDropdown() {
+        if (!this.disabled) {
+            if (this.isOpen) {
+                this.closeDropdown();
+                this._onTouched();
+            }
+            else {
+                this.openDropdown();
+            }
+        }
+    }
+    openDropdown() {
+        if (this.options?.length) {
+            this.formField.control.disableToBeDirty = true;
+            this.isOpen = true;
+            this.createOverlay();
+        }
+    }
+    closeDropdown() {
+        this.changeDetectorRef.markForCheck();
+        this.isOpen = false;
+        this.focused = false;
+        this.formField.control.disableToBeDirty = false;
+    }
+    closeOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    createOverlay() {
+        if (this.overlayRef) {
+            return;
+        }
+        const offset = 4;
+        const positions = [
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: offset
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -offset
+            }
+        ];
+        let anchor = this.trigger;
+        let width = anchor.nativeElement.offsetWidth;
+        if (this.formField?.elementRef) {
+            const el = this.formField?.elementRef.nativeElement.querySelector('.mecx-form-field-body');
+            anchor = el;
+            width = el.offsetWidth;
+        }
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(anchor)
+            .withPositions(positions)
+            .withPush(true);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            width,
+            hasBackdrop: true,
+            backdropClass: 'no-class'
+        });
+        const portal = new TemplatePortal(this.overlayTemplate, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        this.overlayRef
+            .backdropClick()
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(() => {
+            return this.closeDropdown();
+        });
+    }
+    selectOption(option) {
+        if (!option.disabled && !this.disabled) {
+            this.value = option.value;
+            this.updateSelectedLabel();
+            this.closeDropdown();
+            this._onChange(this.value);
+            this.onChange.emit(this.value);
+            this.options.forEach((opt) => {
+                opt.selected = opt.value === this.value;
+            });
+        }
+    }
+    updateSelectedLabel() {
+        const selectedOption = this.options.find((opt) => {
+            return opt.value === this.value;
+        });
+        this.labelSelected = selectedOption ? selectedOption.displayContent : '';
+    }
+    writeValue(value) {
+        this.value = value;
+        this.changeSelected();
+    }
+    onContainerClick(event) {
+        if (this.disabled)
+            return;
+        this.openDropdown();
+        this._elementRef.nativeElement.focus();
+    }
+    _onFocus() {
+        if (!this.disabled) {
+            this.focused = true;
+            this._onTouched();
+            this.stateChanges.next();
+        }
+    }
+    _onBlur() {
+        this.focused = false;
+        this.stateChanges.next();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    ngOnChanges(changes) {
+        let hasChanges = false;
+        // eslint-disable-next-line dot-notation
+        const changesLoading = changes?.['loading'];
+        if (changesLoading?.currentValue !== changesLoading?.previousValue) {
+            hasChanges = true;
+            this.changeControl();
+        }
+        if (hasChanges) {
+            this.stateChanges.next();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySelectComponent, deps: [{ token: i1.Overlay }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeySelectComponent, isStandalone: true, selector: "monkey-select", inputs: { tabIndex: "tabIndex", placeholder: "placeholder", loading: ["loading", "loading", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-select" }, listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "class.mecx-select-disabled": "_disabled", "class.mecx-select-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-select" }, providers: [
+            // eslint-disable-next-line no-use-before-define
+            { provide: MonkeyFormFieldControl, useExisting: MonkeySelectComponent },
+            MonkeyDestroyService
+        ], queries: [{ propertyName: "options", predicate: MonkeyOptionComponent }], viewQueries: [{ propertyName: "overlayTemplate", first: true, predicate: ["overlayTemplate"], descendants: true }, { propertyName: "overlayEl", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"mecx-select-trigger\"\n  [class.open]=\"isOpen\"\n  (click)=\"toggleDropdown()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen\"\n  #trigger\n>\n  <div class=\"mecx-select-value\" [class.has-value]=\"value\">\n    <span>{{ labelSelected || placeholder }}</span>\n  </div>\n\n  @if (!loading) {\n    <div class=\"mecx-select-icon\" [innerHTML]=\"iconArrowDown\"></div>\n  }\n</div>\n\n<ng-template #overlayTemplate>\n  <div\n    class=\"mecx-select-overlay\"\n    #overlay\n    [@animation]=\"isOpen ? 'open' : 'closed'\"\n    (@animation.done)=\"onAnimationEnd($event)\"\n  >\n    <ng-content />\n  </div>\n</ng-template>\n", styles: ["monkey-select{display:inline-flex;width:100%;min-width:0;position:relative}monkey-select:focus-visible,monkey-select:focus{outline:none}.mecx-select-trigger{width:100%;display:inline-flex;align-items:center;cursor:pointer;gap:8px;box-sizing:border-box}.mecx-select-trigger .mecx-select-value{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mecx-color-gray-500);font-size:14px;line-height:24px;letter-spacing:.42px}.mecx-select-trigger .mecx-select-value.has-value{color:var(--mecx-color-gray-900)}.mecx-select-trigger .mecx-select-icon{display:flex;transition:all .2s ease-in-out}.mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-theme-main)}.mecx-select-disabled .mecx-select-trigger{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-50);cursor:default}.mecx-select-disabled .mecx-select-trigger .mecx-select-value{color:var(--mecx-color-gray-400)}.mecx-select-disabled .mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-gray-400)}.mecx-select-trigger.open .mecx-select-icon{transform:rotate(180deg)}.mecx-select-overlay{width:100%;background:#fff;border:2px solid var(--mecx-color-gray-400);overflow:hidden auto;border-radius:8px;box-shadow:0 16px 32px #d6d6d694;max-height:360px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], animations: [
+            trigger('animation', [
+                transition(':enter', [
+                    style({
+                        opacity: 0,
+                        transform: 'scaleY(.9)'
+                    }),
+                    animate('100ms ease-in-out', style({
+                        opacity: 1,
+                        transform: 'scaleY(1)'
+                    }))
+                ]),
+                state('closed', style({
+                    transform: 'scaleY(.9)',
+                    opacity: 0
+                })),
+                transition('closed <=> open', animate('200ms ease-in-out'))
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-select', standalone: true, imports: [ReactiveFormsModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        // eslint-disable-next-line no-use-before-define
+                        { provide: MonkeyFormFieldControl, useExisting: MonkeySelectComponent },
+                        MonkeyDestroyService
+                    ], animations: [
+                        trigger('animation', [
+                            transition(':enter', [
+                                style({
+                                    opacity: 0,
+                                    transform: 'scaleY(.9)'
+                                }),
+                                animate('100ms ease-in-out', style({
+                                    opacity: 1,
+                                    transform: 'scaleY(1)'
+                                }))
+                            ]),
+                            state('closed', style({
+                                transform: 'scaleY(.9)',
+                                opacity: 0
+                            })),
+                            transition('closed <=> open', animate('200ms ease-in-out'))
+                        ])
+                    ], host: {
+                        'data-testid': 'monkey-select',
+                        class: 'mecx-select',
+                        '[class.mecx-select-disabled]': '_disabled',
+                        '[class.mecx-select-focused]': 'focused',
+                        '[attr.id]': 'id',
+                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
+                        '(focus)': '_onFocus()',
+                        '(blur)': '_onBlur()'
+                    }, template: "<div\n  class=\"mecx-select-trigger\"\n  [class.open]=\"isOpen\"\n  (click)=\"toggleDropdown()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen\"\n  #trigger\n>\n  <div class=\"mecx-select-value\" [class.has-value]=\"value\">\n    <span>{{ labelSelected || placeholder }}</span>\n  </div>\n\n  @if (!loading) {\n    <div class=\"mecx-select-icon\" [innerHTML]=\"iconArrowDown\"></div>\n  }\n</div>\n\n<ng-template #overlayTemplate>\n  <div\n    class=\"mecx-select-overlay\"\n    #overlay\n    [@animation]=\"isOpen ? 'open' : 'closed'\"\n    (@animation.done)=\"onAnimationEnd($event)\"\n  >\n    <ng-content />\n  </div>\n</ng-template>\n", styles: ["monkey-select{display:inline-flex;width:100%;min-width:0;position:relative}monkey-select:focus-visible,monkey-select:focus{outline:none}.mecx-select-trigger{width:100%;display:inline-flex;align-items:center;cursor:pointer;gap:8px;box-sizing:border-box}.mecx-select-trigger .mecx-select-value{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mecx-color-gray-500);font-size:14px;line-height:24px;letter-spacing:.42px}.mecx-select-trigger .mecx-select-value.has-value{color:var(--mecx-color-gray-900)}.mecx-select-trigger .mecx-select-icon{display:flex;transition:all .2s ease-in-out}.mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-theme-main)}.mecx-select-disabled .mecx-select-trigger{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-50);cursor:default}.mecx-select-disabled .mecx-select-trigger .mecx-select-value{color:var(--mecx-color-gray-400)}.mecx-select-disabled .mecx-select-trigger .mecx-select-icon svg *{stroke:var(--mecx-color-gray-400)}.mecx-select-trigger.open .mecx-select-icon{transform:rotate(180deg)}.mecx-select-overlay{width:100%;background:#fff;border:2px solid var(--mecx-color-gray-400);overflow:hidden auto;border-radius:8px;box-shadow:0 16px 32px #d6d6d694;max-height:360px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: MonkeyFormFieldComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { overlayTemplate: [{
+                type: ViewChild,
+                args: ['overlayTemplate']
+            }], overlayEl: [{
+                type: ViewChild,
+                args: ['overlay']
+            }], trigger: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], options: [{
+                type: ContentChildren,
+                args: [MonkeyOptionComponent]
+            }], tabIndex: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], placeholder: [{
+                type: Input,
+                args: [{ required: true }]
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyPaginationSizeComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.onChange = new EventEmitter();
+        this._uid = inject(IdGenerator).getId('monkey-pagination-size-');
+        this.sizes = [10, 20, 50, 100];
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPaginationSizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyPaginationSizeComponent, isStandalone: true, selector: "monkey-pagination-size", inputs: { size: "size", disabled: "disabled", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-pagination-size" }, properties: { "attr.id": "id", "id": "id" } }, exportAs: ["monkeyPaginationSize"], ngImport: i0, template: "<ng-content></ng-content>\n<monkey-form-field hideClear>\n  <monkey-select placeholder=\"''\" [ngModel]=\"size\" (onChange)=\"onChange.next($event)\">\n    @for (item of sizes; track item) {\n      <monkey-option [value]=\"item\">{{ item }}</monkey-option>\n    }\n  </monkey-select>\n</monkey-form-field>\n", styles: ["monkey-pagination-size{display:flex;align-items:center;gap:8px}monkey-pagination-size .mecx-form-field-body{height:32px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MonkeySelectComponent, selector: "monkey-select", inputs: ["tabIndex", "placeholder", "loading", "disabled", "required", "value"], outputs: ["onChange"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideClear"], exportAs: ["monkeyFormField"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPaginationSizeComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MonkeySelectComponent,
+                        MonkeyOptionComponent,
+                        MonkeyFormFieldModule
+                    ], encapsulation: ViewEncapsulation.None, selector: 'monkey-pagination-size', exportAs: 'monkeyPaginationSize', host: {
+                        'data-testid': 'monkey-pagination-size',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<ng-content></ng-content>\n<monkey-form-field hideClear>\n  <monkey-select placeholder=\"''\" [ngModel]=\"size\" (onChange)=\"onChange.next($event)\">\n    @for (item of sizes; track item) {\n      <monkey-option [value]=\"item\">{{ item }}</monkey-option>\n    }\n  </monkey-select>\n</monkey-form-field>\n", styles: ["monkey-pagination-size{display:flex;align-items:center;gap:8px}monkey-pagination-size .mecx-form-field-body{height:32px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { size: [{
+                type: Input,
+                args: [{ required: true }]
+            }], disabled: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], id: [{
+                type: Input
+            }] } });
+
+/** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
- **************************/
-class MonkeyButtonComponent {
+ ************************* */
+const defaultX = '880px';
+class MonkeyTableComponent {
     constructor() {
-        this.type = 'primary';
-        this.size = 'md';
-        this.disabled = false;
+        this.sortChange = new EventEmitter();
+        this._loadingInitialized = false;
+        this.stateChanges = new EventEmitter();
     }
-    onClick(event) {
-        if (this.disabled) {
-            event.stopPropagation();
-            event.preventDefault();
-            event.stopImmediatePropagation();
+    updateScrollStyle() {
+        if (!this._headerEl || !this._tableHeaderEl || !this._tableContentEl || !this._tableScrollEl) {
+            throw Error('monkey-table must have header and content');
+        }
+        const x = this.scroll?.x || defaultX;
+        const y = this.scroll?.y;
+        const styleHeader = this._headerEl.nativeElement.style;
+        const styleTableHeader = this._tableHeaderEl.nativeElement.style;
+        const styleTableContent = this._tableContentEl.nativeElement.style;
+        const styleTableScroll = this._tableScrollEl.nativeElement.style;
+        if (x) {
+            styleTableHeader.minWidth = `${x}`;
+            styleTableContent.minWidth = `${x}`;
+            this._tableScrollEl.nativeElement.addEventListener('scroll', () => {
+                this._headerEl.nativeElement.scrollLeft = this._tableScrollEl.nativeElement.scrollLeft;
+            });
+        }
+        if (y) {
+            styleTableScroll.maxHeight = `${y}`;
+            styleTableScroll.overflowX = 'auto';
+            styleTableScroll.overflowY = 'scroll';
+        }
+        if (x && !y) {
+            styleTableScroll.overflowX = 'scroll';
+            styleHeader.overflowY = 'hidden';
+        }
+    }
+    initializeComponents() {
+        const paginationAction = this._paginationActionChildren?.get(0);
+        const paginationSize = this._paginationSizeChildren?.get(0);
+        if (paginationAction) {
+            paginationAction.disabled = this.loading;
+        }
+        if (paginationSize) {
+            paginationSize.disabled = this.loading;
+        }
+    }
+    initializeLoadingComponent() {
+        if (this._loadingInitialized || !this._tableLoadingEl)
+            return;
+        const styleTableLoading = this._tableLoadingEl?.nativeElement.style;
+        const x = this.scroll?.x || defaultX;
+        if (x) {
+            styleTableLoading.minWidth = `${x}`;
+        }
+        this._loadingInitialized = true;
+    }
+    ngAfterContentInit() {
+        this.updateScrollStyle();
+        this.initializeComponents();
+    }
+    updateSortableOptions(name, sortable) {
+        this._sortOptions = {
+            ...this._sortOptions,
+            [name]: sortable
+        };
+        if (!sortable) {
+            delete this._sortOptions[name];
+        }
+        this.sortChange.emit(this._sortOptions);
+    }
+    ngOnChanges(changes) {
+        let hasChanges = false;
+        let loading = false;
+        // eslint-disable-next-line dot-notation
+        const changesLoading = changes?.['loading'];
+        if (changesLoading?.currentValue !== changesLoading.previousValue) {
+            this.initializeComponents();
+            this.initializeLoadingComponent();
+            loading = changesLoading.currentValue || false;
+            hasChanges = true;
+        }
+        if (hasChanges) {
+            this.stateChanges.emit({ loading });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: MonkeyButtonComponent, isStandalone: true, selector: "monkey-button-v2", inputs: { type: "type", size: "size", disabled: "disabled" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<button class=\"mecx-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled\">\n  <div class=\"content\">\n    <ng-content select=\"[first]\"></ng-content>\n    <span><ng-content></ng-content></span>\n    <ng-content select=\"[last]\"></ng-content>\n  </div>\n</button>\n", styles: ["monkey-button-v2{display:inline-block;margin:0 2px}monkey-button-v2 .mecx-button{width:100%;display:flex;align-items:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button-v2 .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button-v2 .mecx-button .content span{width:100%}monkey-button-v2 .mecx-button .content .mk-i{display:flex}monkey-button-v2 .mecx-button:disabled{background:#f1f2f3!important;color:#bdc1c7!important;cursor:not-allowed!important}monkey-button-v2 .mecx-button:disabled.secondary{background:unset!important;border:1px solid #bdc1c7!important}monkey-button-v2 .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button-v2 .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button-v2 .mecx-button.secondary{border:2px solid #bdc1c7;background:unset}monkey-button-v2 .mecx-button.secondary:disabled{border-width:1px}monkey-button-v2 .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button-v2 .mecx-button.tertiary{background:unset}monkey-button-v2 .mecx-button.tertiary span{text-decoration:underline}monkey-button-v2 .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button-v2 .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button-v2 .mecx-button.sm{height:32px}monkey-button-v2 .mecx-button.sm .mk-i{font-size:20px}monkey-button-v2 .mecx-button.md{height:40px}monkey-button-v2 .mecx-button.md .mk-i{font-size:22px}monkey-button-v2 .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button-v2 .mecx-button.lg .mk-i{font-size:24px}monkey-button-v2 .mecx-button.full-width{width:100%}monkey-button-v2 .mecx-button:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button-v2 .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-button-v2 .mecx-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyTableComponent, selector: "monkey-table, table[monkey-table]", inputs: { scroll: "scroll", loading: "loading", loadingRef: "loadingRef" }, outputs: { sortChange: "sortChange" }, host: { properties: { "class.disabled": "this.loading" } }, queries: [{ propertyName: "_paginationActionChildren", predicate: MonkeyPaginationActionComponent, descendants: true }, { propertyName: "_paginationSizeChildren", predicate: MonkeyPaginationSizeComponent, descendants: true }], viewQueries: [{ propertyName: "_headerEl", first: true, predicate: ["header"], descendants: true, static: true }, { propertyName: "_tableHeaderEl", first: true, predicate: ["tableHeader"], descendants: true, static: true }, { propertyName: "_tableContentEl", first: true, predicate: ["tableContent"], descendants: true, static: true }, { propertyName: "_tableLoadingEl", first: true, predicate: ["tableLoading"], descendants: true, static: true }, { propertyName: "_tableScrollEl", first: true, predicate: ["tableScroll"], descendants: true, static: true }], exportAs: ["monkeyTable"], usesOnChanges: true, ngImport: i0, template: "<div class=\"mecx-table-container\">\n  <div class=\"mecx-table-wrapper\">\n    <div class=\"mecx-table-header\" #header>\n      <table #tableHeader>\n        <ng-content select=\"thead\"></ng-content>\n      </table>\n    </div>\n    <div class=\"mecx-inner-scroll\" #tableScroll>\n      <table #tableContent>\n        <ng-content select=\"tbody\"></ng-content>\n      </table>\n\n      @if (loadingRef && loading) {\n        <table #tableLoading>\n          <ng-container *ngTemplateOutlet=\"loadingRef\"></ng-container>\n        </table>\n      }\n    </div>\n  </div>\n  <div class=\"mecx-table-footer\">\n    <ng-content select=\"monkey-pagination-size\"></ng-content>\n    <div class=\"mecx-table-actions\">\n      <ng-content select=\"monkey-pagination-label\"></ng-content>\n      <ng-content select=\"monkey-pagination-action\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["monkey-table{position:relative;display:block;table-layout:fixed;border:2px solid var(--mecx-color-gray-400);border-radius:16px}.mecx-table-container{scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-table-wrapper{display:block}.mecx-table-header{overflow-x:hidden;overflow-y:scroll;white-space:nowrap;border-bottom:2px solid var(--mecx-color-gray-300);background:var(--mecx-color-gray-50);border-top-left-radius:16px;border-top-right-radius:16px}.mecx-table-header table{table-layout:fixed;width:100%;text-align:left;border-collapse:separate;height:48px}.mecx-table-header table thead{display:table-header-group;vertical-align:middle;unicode-bidi:isolate}.mecx-table-header table th{text-align:left;vertical-align:middle;padding:8px 12px;color:var(--mecx-color-gray-700);font-size:16px;font-weight:700;font-style:normal;white-space:nowrap;will-change:transform;backface-visibility:hidden;line-height:24px}.mecx-table-header table th svg{opacity:0;transform:opacity 2s ease-in-out}.mecx-table-header table th:hover svg{opacity:1}.mecx-table-header table .mecx-column-checked svg{opacity:1}.mecx-table-header .mecx-column-stick{position:sticky;background:var(--mecx-color-gray-50);z-index:3}.mecx-table-header .mecx-column-stick-left{border-right:1px solid var(--mecx-color-gray-200);left:0}.mecx-table-header .mecx-column-stick-right{border-left:1px solid var(--mecx-color-gray-200);right:0}.mecx-table-header .mecx-column-checked{position:sticky;left:0;border-right:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50);z-index:3}.mecx-table-header .mecx-column-checked monkey-checkbox{vertical-align:middle}.mecx-inner-scroll{scroll-behavior:smooth}.mecx-inner-scroll table{table-layout:fixed;width:100%;text-align:left;border-collapse:separate;border-spacing:0px}.mecx-inner-scroll table td{text-align:left;border-bottom:2px solid var(--mecx-color-gray-100);padding:8px 12px;vertical-align:middle}.mecx-inner-scroll .mecx-column-stick{position:sticky;right:0;z-index:1;background:#fff}.mecx-inner-scroll .mecx-column-stick-left{border-right:1px solid var(--mecx-color-gray-200);left:0}.mecx-inner-scroll .mecx-column-stick-right{border-left:1px solid var(--mecx-color-gray-200);right:0}.mecx-inner-scroll .mecx-column-checked{position:sticky;left:0;z-index:1;border-right:1px solid var(--mecx-color-gray-200);background:#fff}.mecx-inner-scroll .mecx-column-checked monkey-checkbox{vertical-align:middle}.mecx-table-footer{border-top:1px solid var(--mecx-color-gray-200);padding:8px 12px;display:flex;align-items:center;justify-content:space-between}.mecx-table-footer .mecx-table-actions{display:flex;gap:8px;align-items:center}.mecx-column-sortable-disabled,.mecx-column-checked-disabled{pointer-events:none}.mecx-column-expansible{border-left:none!important;border-right:none!important}@keyframes rotate-right{0%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes rotate-left{0%{transform:rotate(90deg)}to{transform:rotate(0)}}.mecx-column-expansible .rotate-animation-right{animation:rotate-right .3s ease-in-out}.mecx-column-expansible .rotate-animation-left{animation:rotate-left .3s ease-in-out}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeyButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'monkey-button-v2', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<button class=\"mecx-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled\">\n  <div class=\"content\">\n    <ng-content select=\"[first]\"></ng-content>\n    <span><ng-content></ng-content></span>\n    <ng-content select=\"[last]\"></ng-content>\n  </div>\n</button>\n", styles: ["monkey-button-v2{display:inline-block;margin:0 2px}monkey-button-v2 .mecx-button{width:100%;display:flex;align-items:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button-v2 .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button-v2 .mecx-button .content span{width:100%}monkey-button-v2 .mecx-button .content .mk-i{display:flex}monkey-button-v2 .mecx-button:disabled{background:#f1f2f3!important;color:#bdc1c7!important;cursor:not-allowed!important}monkey-button-v2 .mecx-button:disabled.secondary{background:unset!important;border:1px solid #bdc1c7!important}monkey-button-v2 .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button-v2 .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button-v2 .mecx-button.secondary{border:2px solid #bdc1c7;background:unset}monkey-button-v2 .mecx-button.secondary:disabled{border-width:1px}monkey-button-v2 .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button-v2 .mecx-button.tertiary{background:unset}monkey-button-v2 .mecx-button.tertiary span{text-decoration:underline}monkey-button-v2 .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button-v2 .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button-v2 .mecx-button.sm{height:32px}monkey-button-v2 .mecx-button.sm .mk-i{font-size:20px}monkey-button-v2 .mecx-button.md{height:40px}monkey-button-v2 .mecx-button.md .mk-i{font-size:22px}monkey-button-v2 .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button-v2 .mecx-button.lg .mk-i{font-size:24px}monkey-button-v2 .mecx-button.full-width{width:100%}monkey-button-v2 .mecx-button:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button-v2 .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-button-v2 .mecx-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"] }]
-        }], propDecorators: { type: [{
+            args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-table, table[monkey-table]', exportAs: 'monkeyTable', template: "<div class=\"mecx-table-container\">\n  <div class=\"mecx-table-wrapper\">\n    <div class=\"mecx-table-header\" #header>\n      <table #tableHeader>\n        <ng-content select=\"thead\"></ng-content>\n      </table>\n    </div>\n    <div class=\"mecx-inner-scroll\" #tableScroll>\n      <table #tableContent>\n        <ng-content select=\"tbody\"></ng-content>\n      </table>\n\n      @if (loadingRef && loading) {\n        <table #tableLoading>\n          <ng-container *ngTemplateOutlet=\"loadingRef\"></ng-container>\n        </table>\n      }\n    </div>\n  </div>\n  <div class=\"mecx-table-footer\">\n    <ng-content select=\"monkey-pagination-size\"></ng-content>\n    <div class=\"mecx-table-actions\">\n      <ng-content select=\"monkey-pagination-label\"></ng-content>\n      <ng-content select=\"monkey-pagination-action\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: ["monkey-table{position:relative;display:block;table-layout:fixed;border:2px solid var(--mecx-color-gray-400);border-radius:16px}.mecx-table-container{scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-table-wrapper{display:block}.mecx-table-header{overflow-x:hidden;overflow-y:scroll;white-space:nowrap;border-bottom:2px solid var(--mecx-color-gray-300);background:var(--mecx-color-gray-50);border-top-left-radius:16px;border-top-right-radius:16px}.mecx-table-header table{table-layout:fixed;width:100%;text-align:left;border-collapse:separate;height:48px}.mecx-table-header table thead{display:table-header-group;vertical-align:middle;unicode-bidi:isolate}.mecx-table-header table th{text-align:left;vertical-align:middle;padding:8px 12px;color:var(--mecx-color-gray-700);font-size:16px;font-weight:700;font-style:normal;white-space:nowrap;will-change:transform;backface-visibility:hidden;line-height:24px}.mecx-table-header table th svg{opacity:0;transform:opacity 2s ease-in-out}.mecx-table-header table th:hover svg{opacity:1}.mecx-table-header table .mecx-column-checked svg{opacity:1}.mecx-table-header .mecx-column-stick{position:sticky;background:var(--mecx-color-gray-50);z-index:3}.mecx-table-header .mecx-column-stick-left{border-right:1px solid var(--mecx-color-gray-200);left:0}.mecx-table-header .mecx-column-stick-right{border-left:1px solid var(--mecx-color-gray-200);right:0}.mecx-table-header .mecx-column-checked{position:sticky;left:0;border-right:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50);z-index:3}.mecx-table-header .mecx-column-checked monkey-checkbox{vertical-align:middle}.mecx-inner-scroll{scroll-behavior:smooth}.mecx-inner-scroll table{table-layout:fixed;width:100%;text-align:left;border-collapse:separate;border-spacing:0px}.mecx-inner-scroll table td{text-align:left;border-bottom:2px solid var(--mecx-color-gray-100);padding:8px 12px;vertical-align:middle}.mecx-inner-scroll .mecx-column-stick{position:sticky;right:0;z-index:1;background:#fff}.mecx-inner-scroll .mecx-column-stick-left{border-right:1px solid var(--mecx-color-gray-200);left:0}.mecx-inner-scroll .mecx-column-stick-right{border-left:1px solid var(--mecx-color-gray-200);right:0}.mecx-inner-scroll .mecx-column-checked{position:sticky;left:0;z-index:1;border-right:1px solid var(--mecx-color-gray-200);background:#fff}.mecx-inner-scroll .mecx-column-checked monkey-checkbox{vertical-align:middle}.mecx-table-footer{border-top:1px solid var(--mecx-color-gray-200);padding:8px 12px;display:flex;align-items:center;justify-content:space-between}.mecx-table-footer .mecx-table-actions{display:flex;gap:8px;align-items:center}.mecx-column-sortable-disabled,.mecx-column-checked-disabled{pointer-events:none}.mecx-column-expansible{border-left:none!important;border-right:none!important}@keyframes rotate-right{0%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes rotate-left{0%{transform:rotate(90deg)}to{transform:rotate(0)}}.mecx-column-expansible .rotate-animation-right{animation:rotate-right .3s ease-in-out}.mecx-column-expansible .rotate-animation-left{animation:rotate-left .3s ease-in-out}\n"] }]
+        }], propDecorators: { scroll: [{
                 type: Input
-            }], size: [{
+            }], loading: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }, {
                 type: Input
-            }], disabled: [{
+            }], loadingRef: [{
                 type: Input
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
+            }], sortChange: [{
+                type: Output
+            }], _headerEl: [{
+                type: ViewChild,
+                args: ['header', { static: true }]
+            }], _tableHeaderEl: [{
+                type: ViewChild,
+                args: ['tableHeader', { static: true }]
+            }], _tableContentEl: [{
+                type: ViewChild,
+                args: ['tableContent', { static: true }]
+            }], _tableLoadingEl: [{
+                type: ViewChild,
+                args: ['tableLoading', { static: true }]
+            }], _tableScrollEl: [{
+                type: ViewChild,
+                args: ['tableScroll', { static: true }]
+            }], _paginationActionChildren: [{
+                type: ContentChildren,
+                args: [MonkeyPaginationActionComponent, { descendants: true }]
+            }], _paginationSizeChildren: [{
+                type: ContentChildren,
+                args: [MonkeyPaginationSizeComponent, { descendants: true }]
             }] } });
 
-/**************************
+/* eslint-disable dot-notation */
+/** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
- **************************/
-class MonkeyIconComponent {
-    constructor() {
-        this.size = '';
-        this._icon = '';
+ ************************* */
+class MonkeyColumnChecked {
+    constructor(el, renderer, viewContainerRef, table) {
+        this.el = el;
+        this.renderer = renderer;
+        this.viewContainerRef = viewContainerRef;
+        this.table = table;
+        this.checkedChange = new EventEmitter();
+        this._cdr = inject(ChangeDetectorRef);
+        this._injector = inject(Injector);
+        this._subscriptions = new Subscription();
+        // not to do
     }
-    set icon(val) {
-        this._icon = `mk-i mk-i-${val}`;
+    renderCheckbox() {
+        this.checkboxRef = this.viewContainerRef.createComponent(MonkeyCheckboxComponent, {
+            injector: this._injector
+        });
+        this.checkboxRef.instance.value = this.checked;
+        this.checkboxRef.instance.setDisabledState(this.disabled);
+        this.checkboxRef.instance.onChange.subscribe((isChecked) => {
+            this.checkboxRef.instance.writeValue(isChecked);
+            this.checkedChange.emit(isChecked);
+        });
+        this.renderer.appendChild(this.el.nativeElement, this.checkboxRef.location.nativeElement);
+    }
+    handleDisableFromStateChanges(disabled) {
+        if (disabled) {
+            this.el.nativeElement.style.pointerEvents = 'none';
+        }
+        else {
+            this.el.nativeElement.style.pointerEvents = 'all';
+        }
     }
     ngOnInit() {
-        if (!this._icon) {
-            throw new Error('Icon property must be used');
+        this.el.nativeElement.style.pointerEvents = 'none';
+        this._subscriptions.add(this.table?.stateChanges?.subscribe(() => {
+            this.handleDisableFromStateChanges(this.table.loading);
+        }));
+    }
+    ngAfterViewInit() {
+        this.renderCheckbox();
+    }
+    ngOnChanges(changes) {
+        let hasChanges = false;
+        let checked = false;
+        let disabled = false;
+        const changesChecked = changes?.['checked'];
+        const changesDisabled = changes?.['disabled'];
+        if (changesChecked?.currentValue !== changesChecked?.previousValue) {
+            checked = changesChecked.currentValue || false;
+            hasChanges = true;
         }
+        if (changesDisabled?.currentValue !== changesDisabled?.previousValue) {
+            disabled = changesDisabled.currentValue;
+            hasChanges = true;
+        }
+        if (hasChanges) {
+            this.initializeComponent(checked, disabled);
+        }
+    }
+    initializeComponent(checked, disabled) {
+        if (!this.checkboxRef || this.disabled)
+            return;
+        this.checkboxRef.instance.writeValue(checked);
+        this.checkboxRef.instance.setDisabledState(disabled);
+        this._cdr.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: MonkeyIconComponent, isStandalone: true, selector: "monkey-icon-v2", inputs: { icon: "icon", size: "size" }, host: { properties: { "class": "_icon+' '+size" } }, ngImport: i0, template: "", styles: ["monkey-icon-v2{display:inline-block}monkey-icon-v2.sm{font-size:20px;width:20px;height:20px}monkey-icon-v2.md{font-size:22px;width:22px;height:22px}monkey-icon-v2.lg{font-size:24px;width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None }); }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyColumnChecked, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: MonkeyTableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyColumnChecked, selector: "[mkChecked]", inputs: { checked: ["mkChecked", "checked"], disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.mecx-column-checked-disabled": "this.disabled" }, classAttribute: "mecx-column-checked" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeyIconComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'monkey-icon-v2', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, host: {
-                        '[class]': `_icon+' '+size`
-                    }, template: "", styles: ["monkey-icon-v2{display:inline-block}monkey-icon-v2.sm{font-size:20px;width:20px;height:20px}monkey-icon-v2.md{font-size:22px;width:22px;height:22px}monkey-icon-v2.lg{font-size:24px;width:24px;height:24px}\n"] }]
-        }], propDecorators: { icon: [{
-                type: Input
-            }], size: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyColumnChecked, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkChecked]',
+                    host: {
+                        class: 'mecx-column-checked'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: MonkeyTableComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MonkeyTableComponent]
+                }] }], propDecorators: { checked: [{
+                type: Input,
+                args: [{ alias: 'mkChecked', required: true }]
+            }], disabled: [{
+                type: HostBinding,
+                args: ['class.mecx-column-checked-disabled']
+            }, {
                 type: Input
+            }], checkedChange: [{
+                type: Output
             }] } });
 
-/**************************
+/** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
- **************************/
-class MonkeyIconButtonComponent {
-    constructor() {
-        this.type = 'primary';
-        this.size = 'md';
+ ************************* */
+class MonkeyColumnExpansible {
+    constructor(el, renderer, table) {
+        this.el = el;
+        this.renderer = renderer;
+        this.table = table;
+        this.expansionChange = new EventEmitter();
+        this._opened = false;
+        this._subscriptions = new Subscription();
+        this._enableAnimation = false;
         this.disabled = false;
-        this.icon = '';
+        // not to do
     }
-    onClick(event) {
-        if (this.disabled) {
-            event.stopPropagation();
-            event.preventDefault();
-            event.stopImmediatePropagation();
+    createSvgElement(opened) {
+        const oldIcon = this.el.nativeElement.querySelector('#expansible-icon');
+        if (oldIcon)
+            this.renderer.removeChild(this.el.nativeElement, oldIcon);
+        this.el.nativeElement.style.cursor = 'pointer';
+        const svg = this.renderer.createElement('svg', 'svg');
+        this.renderer.setAttribute(svg, 'id', 'expansible-icon');
+        this.renderer.setAttribute(svg, 'width', '24');
+        this.renderer.setAttribute(svg, 'height', '24');
+        this.renderer.setAttribute(svg, 'viewBox', '0 0 24 24');
+        this.renderer.setAttribute(svg, 'fill', 'none');
+        this.renderer.setAttribute(svg, 'xmlns', 'http://www.w3.org/2000/svg');
+        this.renderer.setStyle(svg, 'vertical-align', 'middle');
+        this.renderer.setStyle(svg, 'cursor', 'pointer');
+        if (opened) {
+            const path1 = this.renderer.createElement('path', 'svg');
+            const path2 = this.renderer.createElement('path', 'svg');
+            this.renderer.setAttribute(path1, 'stroke', 'var(--mecx-color-gray-600)');
+            this.renderer.setAttribute(path1, 'stroke-width', '1.5');
+            this.renderer.setAttribute(path1, 'stroke-linecap', 'round');
+            this.renderer.setAttribute(path1, 'stroke-linejoin', 'round');
+            this.renderer.setAttribute(path1, 'd', 'M16 12H8');
+            this.renderer.setAttribute(path2, 'fill-rule', 'evenodd');
+            this.renderer.setAttribute(path2, 'clip-rule', 'evenodd');
+            this.renderer.setAttribute(path2, 'stroke', 'var(--mecx-color-gray-400)');
+            this.renderer.setAttribute(path2, 'stroke-width', '1.5');
+            this.renderer.setAttribute(path2, 'stroke-linecap', 'round');
+            this.renderer.setAttribute(path2, 'stroke-linejoin', 'round');
+            this.renderer.setAttribute(path2, 'd', 'M12 21V21C7.029 21 3 16.971 3 12V12C3 7.029 7.029 3 12 3V3C16.971 3 21 7.029 21 12V12C21 16.971 16.971 21 12 21Z');
+            this.renderer.appendChild(svg, path1);
+            this.renderer.appendChild(svg, path2);
+            if (this._enableAnimation) {
+                this.renderer.addClass(svg, 'rotate-animation-left');
+            }
+        }
+        else {
+            const path1 = this.renderer.createElement('path', 'svg');
+            const path2 = this.renderer.createElement('path', 'svg');
+            const path3 = this.renderer.createElement('path', 'svg');
+            this.renderer.setAttribute(path1, 'stroke', 'var(--mecx-color-gray-600)');
+            this.renderer.setAttribute(path1, 'stroke-width', '1.5');
+            this.renderer.setAttribute(path1, 'stroke-linecap', 'round');
+            this.renderer.setAttribute(path1, 'stroke-linejoin', 'round');
+            this.renderer.setAttribute(path1, 'd', 'M12 8V16');
+            this.renderer.setAttribute(path2, 'stroke', 'var(--mecx-color-gray-600)');
+            this.renderer.setAttribute(path2, 'stroke-width', '1.5');
+            this.renderer.setAttribute(path2, 'stroke-linecap', 'round');
+            this.renderer.setAttribute(path2, 'stroke-linejoin', 'round');
+            this.renderer.setAttribute(path2, 'd', 'M16 12H8');
+            this.renderer.setAttribute(path3, 'fill-rule', 'evenodd');
+            this.renderer.setAttribute(path3, 'clip-rule', 'evenodd');
+            this.renderer.setAttribute(path3, 'stroke', 'var(--mecx-color-gray-400)');
+            this.renderer.setAttribute(path3, 'stroke-width', '2');
+            this.renderer.setAttribute(path3, 'stroke-linecap', 'round');
+            this.renderer.setAttribute(path3, 'stroke-linejoin', 'round');
+            this.renderer.setAttribute(path3, 'd', 'M12 21V21C7.029 21 3 16.971 3 12V12C3 7.029 7.029 3 12 3V3C16.971 3 21 7.029 21 12V12C21 16.971 16.971 21 12 21Z');
+            this.renderer.appendChild(svg, path1);
+            this.renderer.appendChild(svg, path2);
+            this.renderer.appendChild(svg, path3);
+            if (this._enableAnimation) {
+                this.renderer.addClass(svg, 'rotate-animation-right');
+            }
+        }
+        this.renderer.appendChild(this.el.nativeElement, svg);
+    }
+    ngOnInit() {
+        this.disabled = this.table.loading;
+        this._subscriptions.add(this.table?.stateChanges?.subscribe(() => {
+            this.disabled = this.table.loading;
+        }));
+        this.createSvgElement(this._opened);
+    }
+    onClick() {
+        this._enableAnimation = true;
+        if (this._opened) {
+            this._opened = false;
+        }
+        else {
+            this._opened = true;
         }
+        this.createSvgElement(this._opened);
+        this.expansionChange.emit(this._opened);
+    }
+    ngOnDestroy() {
+        this._subscriptions.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeyIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: MonkeyIconButtonComponent, isStandalone: true, selector: "monkey-icon-button-v2", inputs: { type: "type", size: "size", disabled: "disabled", icon: "icon" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<button class=\"mecx-icon-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled\">\n  <div class=\"content\">\n    <monkey-icon-v2 [icon]=\"icon\" [size]=\"size\" first></monkey-icon-v2>\n  </div>\n</button>\n", styles: ["monkey-icon-button-v2{display:inline-block;margin:0 2px}monkey-icon-button-v2 .mecx-icon-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-icon-button-v2 .mecx-icon-button .content{display:flex;align-items:center;justify-content:center;padding:12px;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-icon-button-v2 .mecx-icon-button .content span{width:100%}monkey-icon-button-v2 .mecx-icon-button .content .mk-i{display:flex}monkey-icon-button-v2 .mecx-icon-button:disabled{background:#f1f2f3!important;color:#bdc1c7!important;cursor:not-allowed!important}monkey-icon-button-v2 .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid #bdc1c7!important}monkey-icon-button-v2 .mecx-icon-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-icon-button-v2 .mecx-icon-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-icon-button-v2 .mecx-icon-button.secondary{border:2px solid #bdc1c7;background:unset}monkey-icon-button-v2 .mecx-icon-button.secondary:disabled{border-width:1px}monkey-icon-button-v2 .mecx-icon-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button-v2 .mecx-icon-button.tertiary{background:unset}monkey-icon-button-v2 .mecx-icon-button.tertiary span{text-decoration:underline}monkey-icon-button-v2 .mecx-icon-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-icon-button-v2 .mecx-icon-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button-v2 .mecx-icon-button.sm{width:32px;height:32px}monkey-icon-button-v2 .mecx-icon-button.sm .mk-i{font-size:20px}monkey-icon-button-v2 .mecx-icon-button.md{width:40px;height:40px}monkey-icon-button-v2 .mecx-icon-button.md .mk-i{font-size:22px}monkey-icon-button-v2 .mecx-icon-button.lg{width:48px;height:48px}monkey-icon-button-v2 .mecx-icon-button.lg .mk-i{font-size:24px}monkey-icon-button-v2 .mecx-icon-button.full-width{width:100%}monkey-icon-button-v2 .mecx-icon-button:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-icon-button-v2 .mecx-icon-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-icon-button-v2 .mecx-icon-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon-v2", inputs: ["icon", "size"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyColumnExpansible, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MonkeyTableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyColumnExpansible, selector: "[mkExpansible]", outputs: { expansionChange: "expansionChange" }, host: { listeners: { "click": "onClick()" }, properties: { "class.mecx-column-expansible-disabled": "this.disabled" }, classAttribute: "mecx-column-expansible" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeyIconButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'monkey-icon-button-v2', standalone: true, imports: [CommonModule, MonkeyIconComponent], encapsulation: ViewEncapsulation.None, template: "<button class=\"mecx-icon-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled\">\n  <div class=\"content\">\n    <monkey-icon-v2 [icon]=\"icon\" [size]=\"size\" first></monkey-icon-v2>\n  </div>\n</button>\n", styles: ["monkey-icon-button-v2{display:inline-block;margin:0 2px}monkey-icon-button-v2 .mecx-icon-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-icon-button-v2 .mecx-icon-button .content{display:flex;align-items:center;justify-content:center;padding:12px;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-icon-button-v2 .mecx-icon-button .content span{width:100%}monkey-icon-button-v2 .mecx-icon-button .content .mk-i{display:flex}monkey-icon-button-v2 .mecx-icon-button:disabled{background:#f1f2f3!important;color:#bdc1c7!important;cursor:not-allowed!important}monkey-icon-button-v2 .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid #bdc1c7!important}monkey-icon-button-v2 .mecx-icon-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-icon-button-v2 .mecx-icon-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-icon-button-v2 .mecx-icon-button.secondary{border:2px solid #bdc1c7;background:unset}monkey-icon-button-v2 .mecx-icon-button.secondary:disabled{border-width:1px}monkey-icon-button-v2 .mecx-icon-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button-v2 .mecx-icon-button.tertiary{background:unset}monkey-icon-button-v2 .mecx-icon-button.tertiary span{text-decoration:underline}monkey-icon-button-v2 .mecx-icon-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-icon-button-v2 .mecx-icon-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-icon-button-v2 .mecx-icon-button.sm{width:32px;height:32px}monkey-icon-button-v2 .mecx-icon-button.sm .mk-i{font-size:20px}monkey-icon-button-v2 .mecx-icon-button.md{width:40px;height:40px}monkey-icon-button-v2 .mecx-icon-button.md .mk-i{font-size:22px}monkey-icon-button-v2 .mecx-icon-button.lg{width:48px;height:48px}monkey-icon-button-v2 .mecx-icon-button.lg .mk-i{font-size:24px}monkey-icon-button-v2 .mecx-icon-button.full-width{width:100%}monkey-icon-button-v2 .mecx-icon-button:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-icon-button-v2 .mecx-icon-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-icon-button-v2 .mecx-icon-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], size: [{
-                type: Input
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyColumnExpansible, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkExpansible]',
+                    host: {
+                        class: 'mecx-column-expansible'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: MonkeyTableComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MonkeyTableComponent]
+                }] }], propDecorators: { expansionChange: [{
+                type: Output
             }], disabled: [{
-                type: Input
-            }], icon: [{
-                type: Input
+                type: HostBinding,
+                args: ['class.mecx-column-expansible-disabled']
             }], onClick: [{
                 type: HostListener,
-                args: ['click', ['$event']]
+                args: ['click']
             }] } });
 
-/**************************
+/** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
- **************************/
-class MonkeySecurityLevelComponent {
-    constructor() {
-        this.score = input.required();
-        this.label = input();
-        this.strengthLabel = input();
+ ************************* */
+class MonkeyColumnSortable {
+    constructor(el, renderer, table) {
+        this.el = el;
+        this.renderer = renderer;
+        this.table = table;
+        this._sortableDirection = null;
+        this.subscriptions = new Subscription();
+        this.disabled = false;
+        // not to do
     }
-    get class() {
-        if (this.score() === 0) {
-            return 'empty';
-        }
-        if (this.score() < 300) {
-            return 'weak';
+    createSvgElement(direction) {
+        const dPath = direction === 'desc' ? 'M16 14L12 10L8 14' : 'M8.75 10L12.75 14L16.75 10';
+        const oldIcon = this.el.nativeElement.querySelector('#sortable-icon');
+        if (oldIcon)
+            this.renderer.removeChild(this.el.nativeElement, oldIcon);
+        this.el.nativeElement.style.cursor = 'pointer';
+        const svg = this.renderer.createElement('svg', 'svg');
+        this.renderer.setAttribute(svg, 'id', 'sortable-icon');
+        this.renderer.setAttribute(svg, 'width', '25');
+        this.renderer.setAttribute(svg, 'height', '24');
+        this.renderer.setAttribute(svg, 'viewBox', '0 0 25 24');
+        this.renderer.setAttribute(svg, 'fill', 'none');
+        this.renderer.setAttribute(svg, 'xmlns', 'http://www.w3.org/2000/svg');
+        this.renderer.setStyle(svg, 'margin-left', '1px');
+        this.renderer.setStyle(svg, 'vertical-align', 'middle');
+        this.renderer.setStyle(svg, 'cursor', 'pointer');
+        const g = this.renderer.createElement('g', 'svg');
+        const path = this.renderer.createElement('path', 'svg');
+        this.renderer.setAttribute(path, 'stroke', '#000');
+        this.renderer.setAttribute(path, 'stroke-width', '1.5');
+        this.renderer.setAttribute(path, 'stroke-linecap', 'round');
+        this.renderer.setAttribute(path, 'stroke-linejoin', 'round');
+        this.renderer.setAttribute(path, 'd', dPath);
+        this.renderer.appendChild(g, path);
+        this.renderer.appendChild(svg, g);
+        this.renderer.appendChild(this.el.nativeElement, svg);
+    }
+    ngOnInit() {
+        this.disabled = this.table.loading;
+        this.subscriptions.add(this.table?.stateChanges?.subscribe(() => {
+            this.disabled = this.table.loading;
+        }));
+        this.createSvgElement(this._sortableDirection);
+    }
+    onClick() {
+        if (this._sortableDirection === null) {
+            this._sortableDirection = 'asc';
         }
-        if (this.score() >= 300 && this.score() < 800) {
-            return 'medium';
+        else if (this._sortableDirection === 'asc') {
+            this._sortableDirection = 'desc';
         }
-        if (this.score() >= 800 && this.score() < 1000) {
-            return 'strong';
+        else {
+            this._sortableDirection = null;
         }
-        return 'very-strong';
+        this.createSvgElement(this._sortableDirection);
+        this.table?.updateSortableOptions(this.name, this._sortableDirection || '');
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeySecurityLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: MonkeySecurityLevelComponent, isStandalone: true, selector: "monkey-security-level", inputs: { score: { classPropertyName: "score", publicName: "score", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, strengthLabel: { classPropertyName: "strengthLabel", publicName: "strengthLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: [":host{display:flex;align-items:center;gap:8px;width:100%}:host span{color:#545a63;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}:host .level-info{color:#1f2024;margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}:host .body{display:flex;flex-direction:column;align-items:baseline;width:100%}:host .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:#d3d6da;position:relative;overflow:hidden}:host .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}:host.very-strong .bar:before{background:#00875a;width:100%}:host.strong .bar:before{background:#00875a;width:80%}:host.medium .bar:before{background:#efa30e;width:66%}:host.weak .bar:before{background:#db0505;width:33%}:host.empty .bar:before{background:#db0505;width:0%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyColumnSortable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MonkeyTableComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyColumnSortable, selector: "[mkSortable]", inputs: { name: ["mkSortable", "name"] }, host: { listeners: { "click": "onClick()" }, properties: { "class.mecx-column-sortable-disabled": "this.disabled" }, classAttribute: "mecx-column-sortable" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeySecurityLevelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'monkey-security-level', standalone: true, imports: [CommonModule], template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: [":host{display:flex;align-items:center;gap:8px;width:100%}:host span{color:#545a63;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}:host .level-info{color:#1f2024;margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}:host .body{display:flex;flex-direction:column;align-items:baseline;width:100%}:host .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:#d3d6da;position:relative;overflow:hidden}:host .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}:host.very-strong .bar:before{background:#00875a;width:100%}:host.strong .bar:before{background:#00875a;width:80%}:host.medium .bar:before{background:#efa30e;width:66%}:host.weak .bar:before{background:#db0505;width:33%}:host.empty .bar:before{background:#db0505;width:0%}\n"] }]
-        }], propDecorators: { class: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyColumnSortable, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkSortable]',
+                    host: {
+                        class: 'mecx-column-sortable'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: MonkeyTableComponent, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MonkeyTableComponent]
+                }] }], propDecorators: { name: [{
+                type: Input,
+                args: [{ alias: 'mkSortable', required: true }]
+            }], disabled: [{
                 type: HostBinding,
-                args: ['class']
+                args: ['class.mecx-column-sortable-disabled']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
             }] } });
 
-/**************************
+/** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
- **************************/
-class MonkeyStatusComponent {
+ ************************* */
+class MonkeyColumnStick {
     constructor() {
-        this.type = input.required();
-        this.size = input('md');
-        this.label = input();
+        this.position = 'right';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyColumnStick, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyColumnStick, selector: "[mkStick]", inputs: { position: ["mkStick", "position"] }, host: { properties: { "class": "\"mecx-column-stick-\"+position" }, classAttribute: "mecx-column-stick" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyColumnStick, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkStick]',
+                    host: {
+                        class: 'mecx-column-stick',
+                        '[class]': '"mecx-column-stick-"+position'
+                    }
+                }]
+        }], propDecorators: { position: [{
+                type: Input,
+                args: [{ alias: 'mkStick', required: true }]
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyTableModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MonkeyTableModule, declarations: [MonkeyTableComponent,
+            MonkeyColumnStick,
+            MonkeyColumnChecked,
+            MonkeyColumnSortable,
+            MonkeyColumnExpansible], imports: [MonkeyButtonComponent,
+            MonkeyPaginationSizeComponent,
+            MonkeyPaginationLabelComponent,
+            MonkeyPaginationActionComponent], exports: [MonkeyTableComponent,
+            MonkeyColumnStick,
+            MonkeyColumnChecked,
+            MonkeyColumnSortable,
+            MonkeyColumnExpansible] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyTableModule, imports: [MonkeyButtonComponent,
+            MonkeyPaginationSizeComponent,
+            MonkeyPaginationActionComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        MonkeyButtonComponent,
+                        MonkeyPaginationSizeComponent,
+                        MonkeyPaginationLabelComponent,
+                        MonkeyPaginationActionComponent
+                    ],
+                    declarations: [
+                        MonkeyTableComponent,
+                        MonkeyColumnStick,
+                        MonkeyColumnChecked,
+                        MonkeyColumnSortable,
+                        MonkeyColumnExpansible
+                    ],
+                    exports: [
+                        MonkeyTableComponent,
+                        MonkeyColumnStick,
+                        MonkeyColumnChecked,
+                        MonkeyColumnSortable,
+                        MonkeyColumnExpansible
+                    ]
+                }]
+        }] });
+
+class MonkeyToastComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
     }
     get class() {
-        return `${this.type()} ${this.size()}`;
+        return this.type;
+    }
+    constructor(host) {
+        this.host = host;
+        this.icon = 'close-circle';
+        this.type = 'default';
+        this.isClosable = false;
+        this.onActionClick = new EventEmitter();
+        this.onClose = new EventEmitter();
+        this._uid = inject(IdGenerator).getId('monkey-toast-');
+        this.animationState = 'hidden';
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeyStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: MonkeyStatusComponent, isStandalone: true, selector: "monkey-status", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n  {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:#545a63;font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:#d3d6da}:host.success .status{background-color:#00875a}:host.warning .status{background-color:#efa30e}:host.error .status{background-color:#db0505}:host.question .status{background-color:#8d38fa}:host.info .status{background-color:#003687}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    close() {
+        this.host.nativeElement.classList.add('closed');
+    }
+    onAnimationEnd(event) {
+        if (event.animationName.includes('fade-out')) {
+            this.onClose.emit(this.id);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToastComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyToastComponent, isStandalone: true, selector: "monkey-toast", inputs: { message: "message", icon: "icon", type: "type", isClosable: ["isClosable", "isClosable", booleanAttribute], actionLabel: "actionLabel", actionIcon: "actionIcon", id: "id" }, outputs: { onActionClick: "onActionClick", onClose: "onClose" }, host: { attributes: { "data-testid": "monkey-toast" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "attr.id": "id", "id": "id", "class": "this.class", "animation": "this.animationState" } }, ngImport: i0, template: "<div class=\"content\">\n  @if (icon) {\n    <monkey-icon [icon]=\"icon\" size=\"lg\"></monkey-icon>\n  }\n  <div class=\"message\">\n    {{ message }}\n  </div>\n</div>\n@if (actionLabel) {\n  <div class=\"action\">\n    <monkey-button class=\"btn-action\" type=\"tertiary\" size=\"sm\" (click)=\"onActionClick.emit(id)\">\n      {{ actionLabel }}\n      @if (actionIcon) {\n        <monkey-icon [icon]=\"actionIcon\" first></monkey-icon>\n      }\n    </monkey-button>\n  </div>\n}\n@if (isClosable) {\n  <div class=\"divider\"></div>\n  <div class=\"close\">\n    <monkey-icon-button class=\"btn-close\" type=\"tertiary\" size=\"sm\" icon=\"close\" (click)=\"close()\">\n    </monkey-icon-button>\n  </div>\n}\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:200px;width:100%;gap:16px;padding:16px;box-shadow:0 8px 16px #00000029;background-color:#111418;color:#fff;border-radius:8px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .content{display:flex;gap:8px;line-height:24px;font-size:14px;letter-spacing:.48px;flex-grow:1}monkey-toast .action .btn-action{margin:0!important}monkey-toast .action .btn-action .mecx-button{height:24px;color:#fff!important;outline-color:#fff}monkey-toast .action .btn-action .mecx-button .content{padding:12px 8px}monkey-toast .action .btn-action .mecx-button:hover{color:#fff!important}monkey-toast .divider{width:1px;height:24px;background-color:#bdc1c7}monkey-toast .close{display:flex}monkey-toast .close .btn-close{margin:0!important}monkey-toast .close .btn-close .mecx-icon-button{height:24px;width:24px;color:#fff!important;outline-color:#fff}monkey-toast .close .btn-close .mecx-icon-button:hover{color:#fff!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:#db0505}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.info{background-color:#003687}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"], dependencies: [{ kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "size", "type", "id"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }, { kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeyStatusComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'monkey-status', standalone: true, imports: [CommonModule], template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n  {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:#545a63;font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:#d3d6da}:host.success .status{background-color:#00875a}:host.warning .status{background-color:#efa30e}:host.error .status{background-color:#db0505}:host.question .status{background-color:#8d38fa}:host.info .status{background-color:#003687}\n"] }]
-        }], propDecorators: { class: [{
+            args: [{ standalone: true, selector: 'monkey-toast', imports: [MonkeyButtonComponent, MonkeyIconComponent, MonkeyIconButtonComponent], encapsulation: ViewEncapsulation.None, host: {
+                        'data-testid': 'monkey-toast',
+                        '(animationend)': 'onAnimationEnd($event)',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<div class=\"content\">\n  @if (icon) {\n    <monkey-icon [icon]=\"icon\" size=\"lg\"></monkey-icon>\n  }\n  <div class=\"message\">\n    {{ message }}\n  </div>\n</div>\n@if (actionLabel) {\n  <div class=\"action\">\n    <monkey-button class=\"btn-action\" type=\"tertiary\" size=\"sm\" (click)=\"onActionClick.emit(id)\">\n      {{ actionLabel }}\n      @if (actionIcon) {\n        <monkey-icon [icon]=\"actionIcon\" first></monkey-icon>\n      }\n    </monkey-button>\n  </div>\n}\n@if (isClosable) {\n  <div class=\"divider\"></div>\n  <div class=\"close\">\n    <monkey-icon-button class=\"btn-close\" type=\"tertiary\" size=\"sm\" icon=\"close\" (click)=\"close()\">\n    </monkey-icon-button>\n  </div>\n}\n", styles: ["monkey-toast{display:flex;align-items:start;min-width:200px;width:100%;gap:16px;padding:16px;box-shadow:0 8px 16px #00000029;background-color:#111418;color:#fff;border-radius:8px;max-width:450px;box-sizing:border-box;animation:fade-in .3s}monkey-toast.closed{animation:fade-out .1s}monkey-toast .content{display:flex;gap:8px;line-height:24px;font-size:14px;letter-spacing:.48px;flex-grow:1}monkey-toast .action .btn-action{margin:0!important}monkey-toast .action .btn-action .mecx-button{height:24px;color:#fff!important;outline-color:#fff}monkey-toast .action .btn-action .mecx-button .content{padding:12px 8px}monkey-toast .action .btn-action .mecx-button:hover{color:#fff!important}monkey-toast .divider{width:1px;height:24px;background-color:#bdc1c7}monkey-toast .close{display:flex}monkey-toast .close .btn-close{margin:0!important}monkey-toast .close .btn-close .mecx-icon-button{height:24px;width:24px;color:#fff!important;outline-color:#fff}monkey-toast .close .btn-close .mecx-icon-button:hover{color:#fff!important}monkey-toast.success{background-color:var(--mecx-color-success-main)}monkey-toast.error{background-color:#db0505}monkey-toast.question{background-color:var(--mecx-color-question-800)}monkey-toast.info{background-color:#003687}@keyframes fade-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-out{to{transform:scale(.9);opacity:0}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { message: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], isClosable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], actionLabel: [{
+                type: Input
+            }], actionIcon: [{
+                type: Input
+            }], onActionClick: [{
+                type: Output
+            }], onClose: [{
+                type: Output
+            }], id: [{
+                type: Input
+            }], class: [{
                 type: HostBinding,
                 args: ['class']
+            }], animationState: [{
+                type: HostBinding,
+                args: ['animation']
             }] } });
 
 class MonkeyToggleComponent {
-    constructor() {
-        this.disabled = false;
-        this.size = 'md';
-        this.onChange = new EventEmitter();
-        this._checked = false;
-    }
     set value(_) {
         if (typeof _ === 'string') {
             this._checked = _ === 'true';
@@ -185,6 +2773,21 @@ class MonkeyToggleComponent {
             this._checked = _;
         }
     }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.disabled = false;
+        this.size = 'md';
+        this.onChange = new EventEmitter();
+        this._checked = false;
+        this._uid = inject(IdGenerator).getId('monkey-toggle-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
     onClick(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -194,15 +2797,17 @@ class MonkeyToggleComponent {
             this._checked = !this._checked;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeyToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: MonkeyToggleComponent, isStandalone: true, selector: "monkey-toggle-v2", inputs: { disabled: "disabled", size: "size", value: "value" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "input-toggle" }, listeners: { "click": "onClick($event)" }, properties: { "class.disabled": "this.disabled", "class": "this.size" } }, ngImport: i0, template: "<input type=\"checkbox\" [checked]=\"_checked\" />\n<div class=\"slider\" [ngClass]=\"{ checked: _checked }\"></div>\n", styles: [":host{position:relative;display:inline-block}:host input{display:none}:host.disabled{box-shadow:none;pointer-events:none;opacity:.2}:host.lg{width:88px;height:48px}:host.lg input:checked+.checked:before{left:calc(100% - 42px)}:host.lg .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.lg .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:40px;width:40px}:host.lg .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.lg .slider.checked:before{background-color:#00875a}:host.md{width:72px;height:40px}:host.md input:checked+.checked:before{left:calc(100% - 34px)}:host.md .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.md .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:32px;width:32px}:host.md .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.md .slider.checked:before{background-color:#00875a}:host.sm{width:56px;height:32px}:host.sm input:checked+.checked:before{left:calc(100% - 26px)}:host.sm .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.sm .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:24px;width:24px}:host.sm .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.sm .slider.checked:before{background-color:#00875a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyToggleComponent, isStandalone: true, selector: "monkey-toggle", inputs: { disabled: "disabled", size: "size", value: "value", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-toggle" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id", "class.disabled": "this.disabled", "class": "this.size" } }, ngImport: i0, template: "<input type=\"checkbox\" [checked]=\"_checked\" />\n<div class=\"slider\" [ngClass]=\"{ checked: _checked }\"></div>\n", styles: [":host{position:relative;display:inline-block}:host input{display:none}:host.disabled{box-shadow:none;pointer-events:none;opacity:.2}:host.lg{width:88px;height:48px}:host.lg input:checked+.checked:before{left:calc(100% - 42px)}:host.lg .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.lg .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:40px;width:40px}:host.lg .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.lg .slider.checked:before{background-color:#00875a}:host.md{width:72px;height:40px}:host.md input:checked+.checked:before{left:calc(100% - 34px)}:host.md .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.md .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:32px;width:32px}:host.md .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.md .slider.checked:before{background-color:#00875a}:host.sm{width:56px;height:32px}:host.sm input:checked+.checked:before{left:calc(100% - 26px)}:host.sm .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.sm .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:24px;width:24px}:host.sm .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.sm .slider.checked:before{background-color:#00875a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeyToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'monkey-toggle-v2', standalone: true, imports: [CommonModule], host: {
-                        'data-testid': 'input-toggle'
+            args: [{ selector: 'monkey-toggle', standalone: true, imports: [CommonModule], host: {
+                        'data-testid': 'monkey-toggle',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
                     }, template: "<input type=\"checkbox\" [checked]=\"_checked\" />\n<div class=\"slider\" [ngClass]=\"{ checked: _checked }\"></div>\n", styles: [":host{position:relative;display:inline-block}:host input{display:none}:host.disabled{box-shadow:none;pointer-events:none;opacity:.2}:host.lg{width:88px;height:48px}:host.lg input:checked+.checked:before{left:calc(100% - 42px)}:host.lg .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.lg .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:40px;width:40px}:host.lg .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.lg .slider.checked:before{background-color:#00875a}:host.md{width:72px;height:40px}:host.md input:checked+.checked:before{left:calc(100% - 34px)}:host.md .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.md .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:32px;width:32px}:host.md .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.md .slider.checked:before{background-color:#00875a}:host.sm{width:56px;height:32px}:host.sm input:checked+.checked:before{left:calc(100% - 26px)}:host.sm .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.sm .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:24px;width:24px}:host.sm .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.sm .slider.checked:before{background-color:#00875a}\n"] }]
-        }], propDecorators: { disabled: [{
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
                 type: HostBinding,
                 args: ['class.disabled']
             }, {
@@ -216,16 +2821,127 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 type: Output
             }], value: [{
                 type: Input
+            }], id: [{
+                type: Input
             }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyToggleLineButtonComponent {
+    constructor() {
+        this.disabled = false;
+        this.onChange = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToggleLineButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyToggleLineButtonComponent, isStandalone: true, selector: "monkey-toggle-line-button", inputs: { disabled: "disabled" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<input\n  type=\"radio\"\n  [name]=\"name\"\n  [id]=\"value + '-' + name\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (change)=\"onChange.emit(this.value)\"\n/>\n<label [for]=\"value + '-' + name\">\n  <ng-content></ng-content>\n</label>\n", styles: ["monkey-toggle-line-button{display:flex;width:100%}monkey-toggle-line-button input{display:none}monkey-toggle-line-button label{display:flex;box-sizing:border-box;gap:8px;background:unset;height:100%;width:100%;align-items:center;justify-content:center;letter-spacing:.03em;text-align:center;color:#1f2024;cursor:pointer;padding:4px 8px;border:2px solid #bdc1c7;transition:all .2s ease-in-out}monkey-toggle-line-button label monkey-icon{transition:all .2s ease-in-out}monkey-toggle-line-button input:disabled+label{color:#bdc1c7!important;cursor:not-allowed!important}monkey-toggle-line-button input:disabled+label monkey-icon{color:#bdc1c7!important}monkey-toggle-line-button input:checked+label[for*=true]{background-color:#00875a;color:#fff}monkey-toggle-line-button input:checked+label[for*=true] monkey-icon{color:#fff}monkey-toggle-line-button input:checked+label[for*=false]{background-color:#db0505;color:#fff}monkey-toggle-line-button input:checked+label[for*=false] monkey-icon{color:#fff}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToggleLineButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-toggle-line-button', standalone: true, encapsulation: ViewEncapsulation.None, template: "<input\n  type=\"radio\"\n  [name]=\"name\"\n  [id]=\"value + '-' + name\"\n  [checked]=\"checked\"\n  [disabled]=\"disabled\"\n  (change)=\"onChange.emit(this.value)\"\n/>\n<label [for]=\"value + '-' + name\">\n  <ng-content></ng-content>\n</label>\n", styles: ["monkey-toggle-line-button{display:flex;width:100%}monkey-toggle-line-button input{display:none}monkey-toggle-line-button label{display:flex;box-sizing:border-box;gap:8px;background:unset;height:100%;width:100%;align-items:center;justify-content:center;letter-spacing:.03em;text-align:center;color:#1f2024;cursor:pointer;padding:4px 8px;border:2px solid #bdc1c7;transition:all .2s ease-in-out}monkey-toggle-line-button label monkey-icon{transition:all .2s ease-in-out}monkey-toggle-line-button input:disabled+label{color:#bdc1c7!important;cursor:not-allowed!important}monkey-toggle-line-button input:disabled+label monkey-icon{color:#bdc1c7!important}monkey-toggle-line-button input:checked+label[for*=true]{background-color:#00875a;color:#fff}monkey-toggle-line-button input:checked+label[for*=true] monkey-icon{color:#fff}monkey-toggle-line-button input:checked+label[for*=false]{background-color:#db0505;color:#fff}monkey-toggle-line-button input:checked+label[for*=false] monkey-icon{color:#fff}\n"] }]
+        }], propDecorators: { disabled: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyToggleLineComponent {
+    get class() {
+        return this.size;
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.name = Math.random().toString();
+        this.size = 'md';
+        this.disabled = false;
+        this.onChange = new EventEmitter();
+        this.subscriptions = new Subscription();
+        this._uid = inject(IdGenerator).getId('monkey-toggle-line-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    ngAfterContentInit() {
+        this.radioButtons.forEach((_, i) => {
+            _.value = !!i;
+            _.checked = this.value === _.value;
+            _.name = this.name;
+            _.disabled = this.disabled;
+            const subscription = _.onChange.subscribe((value) => {
+                this.onChange.emit(value);
+            });
+            this.subscriptions.add(subscription);
+        });
+    }
+    ngOnChanges() {
+        if (!this.radioButtons)
+            return;
+        this.radioButtons.forEach((_, i) => {
+            _.checked = this.value === _.value;
+            _.disabled = this.disabled;
+        });
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToggleLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyToggleLineComponent, isStandalone: true, selector: "monkey-toggle-line", inputs: { value: "value", name: "name", size: "size", disabled: ["disabled", "disabled", booleanAttribute], id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-toggle-line" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, queries: [{ propertyName: "radioButtons", predicate: MonkeyToggleLineButtonComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["monkey-toggle-line{display:inline-flex;min-width:250px}monkey-toggle-line :first-child label{border-radius:8px 0 0 8px;border-right:none!important}monkey-toggle-line :first-child label monkey-icon{color:#db0505}monkey-toggle-line :last-child label{border-radius:0 8px 8px 0}monkey-toggle-line :last-child label monkey-icon{color:#00875a}monkey-toggle-line.lg{min-height:48px}monkey-toggle-line.lg label{font-size:16px}monkey-toggle-line.md{min-height:40px}monkey-toggle-line.md label{font-size:14px}monkey-toggle-line.sm{min-height:32px}monkey-toggle-line.sm label{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToggleLineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-toggle-line', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, host: {
+                        'data-testid': 'monkey-toggle-line',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<ng-content></ng-content>\n", styles: ["monkey-toggle-line{display:inline-flex;min-width:250px}monkey-toggle-line :first-child label{border-radius:8px 0 0 8px;border-right:none!important}monkey-toggle-line :first-child label monkey-icon{color:#db0505}monkey-toggle-line :last-child label{border-radius:0 8px 8px 0}monkey-toggle-line :last-child label monkey-icon{color:#00875a}monkey-toggle-line.lg{min-height:48px}monkey-toggle-line.lg label{font-size:16px}monkey-toggle-line.md{min-height:40px}monkey-toggle-line.md label{font-size:14px}monkey-toggle-line.sm{min-height:32px}monkey-toggle-line.sm label{font-size:14px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], onChange: [{
+                type: Output
+            }], radioButtons: [{
+                type: ContentChildren,
+                args: [MonkeyToggleLineButtonComponent]
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }], id: [{
+                type: Input
+            }] } });
+
 class MonkeyTooltipComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
     constructor(host) {
         this.host = host;
         this.afterClose = new EventEmitter();
-        // no to do
+        this._uid = inject(IdGenerator).getId('monkey-tooltip-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
     }
     close() {
         this.host.nativeElement.classList.add('closed');
@@ -235,16 +2951,18 @@ class MonkeyTooltipComponent {
             this.afterClose.emit(true);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeyTooltipComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: MonkeyTooltipComponent, isStandalone: true, selector: "monkey-tooltip", inputs: { text: "text", template: "template", left: "left", top: "top" }, outputs: { afterClose: "afterClose" }, host: { attributes: { "data-testid": "monkey-tooltip" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "style.left.px": "left", "style.top.px": "top" } }, ngImport: i0, template: "@if(template) {\n<ng-container *ngTemplateOutlet=\"template\"> </ng-container>\n} @if(text) {\n{{ text }}\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;box-shadow:0 8px 16px #00000029;background-color:#1f2024;padding:8px 12px;flex-wrap:wrap;text-align:center;color:#fff;font-size:14px;letter-spacing:.42px;line-height:16px;position:absolute;pointer-events:none;cursor:none;word-break:normal;overflow-wrap:anywhere;min-width:50px;max-width:200px;box-sizing:border-box;overflow:hidden;animation:fade-in .3s}:host.closed{animation:fade-out .1s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyTooltipComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyTooltipComponent, isStandalone: true, selector: "monkey-tooltip", inputs: { text: "text", template: "template", left: "left", top: "top", id: "id" }, outputs: { afterClose: "afterClose" }, host: { attributes: { "data-testid": "monkey-tooltip" }, listeners: { "animationend": "onAnimationEnd($event)" }, properties: { "style.left.px": "left", "style.top.px": "top", "attr.id": "id", "id": "id" } }, ngImport: i0, template: "@if(template) {\n<ng-container *ngTemplateOutlet=\"template\"> </ng-container>\n} @if(text) {\n{{ text }}\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;box-shadow:0 8px 16px #00000029;background-color:#1f2024;padding:8px 12px;flex-wrap:wrap;text-align:center;color:#fff;font-size:14px;letter-spacing:.42px;line-height:16px;position:absolute;pointer-events:none;cursor:none;word-break:normal;overflow-wrap:anywhere;min-width:50px;max-width:200px;box-sizing:border-box;overflow:hidden;animation:fade-in .3s}:host.closed{animation:fade-out .1s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeyTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'monkey-tooltip', standalone: true, imports: [NgTemplateOutlet], host: {
                         'data-testid': 'monkey-tooltip',
                         '[style.left.px]': 'left',
                         '[style.top.px]': 'top',
-                        '(animationend)': 'onAnimationEnd($event)'
+                        '(animationend)': 'onAnimationEnd($event)',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
                     }, template: "@if(template) {\n<ng-container *ngTemplateOutlet=\"template\"> </ng-container>\n} @if(text) {\n{{ text }}\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;box-shadow:0 8px 16px #00000029;background-color:#1f2024;padding:8px 12px;flex-wrap:wrap;text-align:center;color:#fff;font-size:14px;letter-spacing:.42px;line-height:16px;position:absolute;pointer-events:none;cursor:none;word-break:normal;overflow-wrap:anywhere;min-width:50px;max-width:200px;box-sizing:border-box;overflow:hidden;animation:fade-in .3s}:host.closed{animation:fade-out .1s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { text: [{
                 type: Input
@@ -256,6 +2974,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 type: Input
             }], afterClose: [{
                 type: Output
+            }], id: [{
+                type: Input
             }] } });
 
 class MonkeyTooltipDirective {
@@ -402,10 +3122,10 @@ class MonkeyTooltipDirective {
             subscribe.unsubscribe();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeyTooltipDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.4", type: MonkeyTooltipDirective, isStandalone: true, selector: "[monkeyTooltip]", inputs: { tooltipText: ["monkeyTooltip", "tooltipText"], tooltipPosition: "tooltipPosition", enabled: ["enabled", "enabled", booleanAttribute] }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "click": "hide()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyTooltipDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyTooltipDirective, isStandalone: true, selector: "[monkeyTooltip]", inputs: { tooltipText: ["monkeyTooltip", "tooltipText"], tooltipPosition: "tooltipPosition", enabled: ["enabled", "enabled", booleanAttribute] }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "click": "hide()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MonkeyTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[monkeyTooltip]',
@@ -429,15 +3149,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 args: [{ transform: booleanAttribute }]
             }] } });
 
-/**************************
+/** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
-**************************/
+ ************************* */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MonkeyButtonComponent, MonkeyIconButtonComponent, MonkeyIconComponent, MonkeySecurityLevelComponent, MonkeyStatusComponent, MonkeyToggleComponent, MonkeyTooltipComponent, MonkeyTooltipDirective };
+export { MonkeyAccordionComponent, MonkeyAlertComponent, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDestroyService, MonkeyDirectivesModule, MonkeyDividerComponent, MonkeyError, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelper, MonkeyIconButtonComponent, MonkeyIconComponent, MonkeyIconsService, MonkeyInfo, MonkeyInputCurrencyDirective, MonkeyInputDirective, MonkeyInputModule, MonkeyLabel, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPrefix, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeySuffix, MonkeyTableComponent, MonkeyTableModule, MonkeyToastComponent, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, ToastRef, getCurrencySymbol, validateType };
 //# sourceMappingURL=monkey-style-guide-v2.mjs.map