monkey-style-guide-v2 0.0.17 → 0.0.18

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

@@ -2,15 +2,17 @@ import { trigger, state, style, transition, animate, keyframes } from '@angular/
 import * as i1$1 from '@angular/common';
 import { CommonModule, CurrencyPipe, NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import * as i0 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, InjectionToken, Optional, Inject, ViewChild } from '@angular/core';
-import { Subject, takeUntil, merge, Subscription } from 'rxjs';
+import { Injectable, inject, TemplateRef, booleanAttribute, Component, Input, input, ViewEncapsulation, HostBinding, output, effect, HostListener, Directive, NgModule, EventEmitter, DestroyRef, Injector, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy, ContentChildren, Output, InjectionToken, LOCALE_ID, ElementRef, DEFAULT_CURRENCY_CODE, ContentChild, computed, Optional, ViewChildren, ViewChild, Inject } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { Router, NavigationStart } from '@angular/router';
-import * as i1$2 from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from '@angular/forms';
 import { NgControl, FormControlDirective, NgModel, FormControlName, FormGroupDirective, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, FormsModule, Validators } from '@angular/forms';
+import { format, parseISO, subYears, addYears, subMonths, addMonths, getMonth, getYear, startOfWeek, startOfMonth, endOfWeek, endOfMonth, isSameMonth, isBefore, isAfter, isToday, addDays, isWithinInterval, subDays } from 'date-fns';
+import { BehaviorSubject, map, merge, Subject, debounceTime, Subscription } from 'rxjs';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { getSupportedInputTypes } from '@angular/cdk/platform';
 import { hasModifierKey } from '@angular/cdk/keycodes';
@@ -46,20 +48,44 @@ function getRandomString(len, charSet) {
     })
         .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 }); }
+const objHaveProperty = (obj, property) => {
+    return typeof obj === 'object' && obj !== null && property in obj;
+};
+function formatFileSize(bytes) {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
+}
+function getFileExtension(filename) {
+    const name = filename.toLowerCase();
+    const lastDotIndex = name.lastIndexOf('.');
+    return lastDotIndex === -1 ? '' : name.slice(lastDotIndex + 1);
+}
+function sanitizeString(input) {
+    return input
+        .replace(/<script.*?>.*?<\/script>/gi, '')
+        .replace(/on\w+="[^"]*"/gi, '')
+        .replace(/on\w+='[^']*'/gi, '')
+        .replace(/javascript:/gi, '')
+        .replace(/<\/?[^>]+>/gi, '')
+        .trim();
+}
+function normalizeStringToSearch(text) {
+    return text
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase();
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDestroyService, decorators: [{
-            type: Injectable
-        }] });
 
 /* eslint-disable max-len */
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
 class MonkeyIconsService {
     constructor() {
         this._sanitizer = inject(DomSanitizer);
@@ -91,6 +117,12 @@ class MonkeyIconsService {
     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>`);
     }
+    get searchFail() {
+        return this.handleTrust('<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M18.934 11.467v0c0 4.124-3.343 7.467-7.467 7.467v0C7.343 18.934 4 15.591 4 11.467v0C4 7.343 7.343 4 11.467 4v0c4.124 0 7.467 3.343 7.467 7.467Z" stroke="var(--mecx-color-gray-900)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="m20 20-3.25-3.25M13.815 9.11914 9.119 13.8151M13.815 13.8151 9.119 9.11914" stroke="var(--mecx-color-gray-900)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+    }
+    get search() {
+        return this.handleTrust('<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.920 1.521 C 4.175 1.717,1.944 3.809,1.558 6.548 C 1.500 6.965,1.500 7.722,1.558 8.120 C 1.945 10.745,3.921 12.721,6.547 13.108 C 6.735 13.136,7.016 13.152,7.333 13.152 C 7.885 13.152,8.225 13.111,8.738 12.985 C 9.504 12.797,10.253 12.439,10.859 11.972 C 10.972 11.885,11.074 11.813,11.085 11.813 C 11.097 11.813,11.677 12.384,12.373 13.082 C 13.070 13.779,13.691 14.381,13.754 14.418 C 14.182 14.673,14.673 14.182,14.418 13.754 C 14.381 13.691,13.779 13.070,13.082 12.373 C 12.384 11.677,11.813 11.097,11.813 11.085 C 11.813 11.074,11.885 10.972,11.972 10.859 C 12.439 10.253,12.797 9.504,12.985 8.738 C 13.111 8.225,13.152 7.885,13.152 7.333 C 13.152 6.782,13.111 6.441,12.985 5.928 C 12.471 3.841,10.826 2.196,8.738 1.681 C 8.150 1.536,7.501 1.479,6.920 1.521 M8.277 2.586 C 10.023 2.962,11.414 4.208,11.943 5.870 C 12.118 6.421,12.145 6.615,12.145 7.333 C 12.145 8.052,12.118 8.246,11.943 8.797 C 11.473 10.272,10.272 11.473,8.797 11.943 C 8.246 12.118,8.052 12.145,7.333 12.145 C 6.615 12.145,6.421 12.118,5.870 11.943 C 4.394 11.473,3.193 10.272,2.724 8.797 C 2.547 8.242,2.521 8.052,2.522 7.333 C 2.522 6.615,2.549 6.419,2.724 5.870 C 3.244 4.236,4.636 2.971,6.320 2.602 C 6.679 2.523,6.858 2.510,7.440 2.520 C 7.898 2.527,8.066 2.540,8.277 2.586 " stroke="none" fill-rule="evenodd" fill="var(--mecx-color-gray-900)"></path></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' }); }
 }
@@ -176,6 +208,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: i1.Overlay }] });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -271,6 +309,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyActionBarComponent {
+    constructor() {
+        this.label = input();
+        this.position = input();
+        this.open = input();
+    }
+    get classes() {
+        return this.position();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyActionBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyActionBarComponent, isStandalone: true, selector: "monkey-action-bar", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-action-bar" }, properties: { "attr.id": "id", "id": "id", "class.open": "open()", "class": "this.classes" } }, ngImport: i0, template: `@if (open()) {
+    <span style="font-size: 13px" data-testid="label" *ngIf="label() as lb">
+      {{ lb }}
+    </span>
+
+    <ng-content></ng-content>
+  }`, isInline: true, styles: ["monkey-action-bar{background-color:var(--mecx-color-white);border-radius:12px;position:fixed;bottom:60px;gap:24px;display:none;align-items:center;padding:4px 4px 4px 24px;border:2px solid var(--mecx-color-gray-200);box-shadow:0 8px 12px -4px #2f32373d,0 8px 8px #2f323705,0 16px 16px 8px #2f323729}monkey-action-bar.center{left:50%;transform:translate(-50%)}monkey-action-bar.right{right:60px}monkey-action-bar.left{left:60px}monkey-action-bar.open{display:flex}@media (851px < width < 1315px){monkey-action-bar{left:60px!important;transform:translate(0)!important}}@media (width < 852px){monkey-action-bar{flex-direction:column;padding:16px}monkey-action-bar>*:before{content:initial!important;padding:16px!important}}@media (width < 450px){monkey-action-bar{flex-direction:column;left:24px!important;right:24px!important;bottom:24px!important;transform:translate(0)!important}monkey-action-bar>*:before{content:initial!important;padding:16px!important}}monkey-action-bar>*:not(:first-child){flex-shrink:0;display:inline-flex}monkey-action-bar>*:not(:first-child):before{content:\"\";display:flex;box-sizing:border-box;width:1px;background-color:var(--mecx-color-gray-200);margin-right:24px}\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: MonkeyActionBarComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, imports: [CommonModule], selector: 'monkey-action-bar', standalone: true, template: `@if (open()) {
+    <span style="font-size: 13px" data-testid="label" *ngIf="label() as lb">
+      {{ lb }}
+    </span>
+
+    <ng-content></ng-content>
+  }`, host: {
+                        'data-testid': 'monkey-action-bar',
+                        '[attr.id]': 'id',
+                        '[id]': 'id',
+                        '[class.open]': 'open()'
+                    }, styles: ["monkey-action-bar{background-color:var(--mecx-color-white);border-radius:12px;position:fixed;bottom:60px;gap:24px;display:none;align-items:center;padding:4px 4px 4px 24px;border:2px solid var(--mecx-color-gray-200);box-shadow:0 8px 12px -4px #2f32373d,0 8px 8px #2f323705,0 16px 16px 8px #2f323729}monkey-action-bar.center{left:50%;transform:translate(-50%)}monkey-action-bar.right{right:60px}monkey-action-bar.left{left:60px}monkey-action-bar.open{display:flex}@media (851px < width < 1315px){monkey-action-bar{left:60px!important;transform:translate(0)!important}}@media (width < 852px){monkey-action-bar{flex-direction:column;padding:16px}monkey-action-bar>*:before{content:initial!important;padding:16px!important}}@media (width < 450px){monkey-action-bar{flex-direction:column;left:24px!important;right:24px!important;bottom:24px!important;transform:translate(0)!important}monkey-action-bar>*:before{content:initial!important;padding:16px!important}}monkey-action-bar>*:not(:first-child){flex-shrink:0;display:inline-flex}monkey-action-bar>*:not(:first-child):before{content:\"\";display:flex;box-sizing:border-box;width:1px;background-color:var(--mecx-color-gray-200);margin-right:24px}\n"] }]
+        }], propDecorators: { classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -301,15 +393,15 @@ class MonkeyIconComponent {
         }
     }
     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 }); }
+    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: '', isInline: true, 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: {
+            args: [{ selector: 'monkey-icon', standalone: true, imports: [CommonModule], template: '', 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"] }]
+                    }, 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: [{
@@ -318,6 +410,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -351,7 +449,7 @@ class MonkeyAlertComponent {
         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:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}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:var(--mecx-color-gray-900);font-size:18px;font-weight:400;letter-spacing:.54px;line-height:24px}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;letter-spacing:.42px;line-height:24px}monkey-alert .monkey-alert__card__link{color:var(--mecx-color-gray-900);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 }); }
+    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:var(--mecx-color-warning-100);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:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}monkey-alert .monkey-alert__card.error{background-color:var(--mecx-color-error-100);border:solid 2px var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-500)}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:var(--mecx-color-success-100);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:var(--mecx-color-gray-900);font-size:18px;font-weight:400;letter-spacing:.54px;line-height:24px}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;letter-spacing:.42px;line-height:24px}monkey-alert .monkey-alert__card__link{color:var(--mecx-color-gray-900);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,
@@ -359,11 +457,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '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:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}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:var(--mecx-color-gray-900);font-size:18px;font-weight:400;letter-spacing:.54px;line-height:24px}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;letter-spacing:.42px;line-height:24px}monkey-alert .monkey-alert__card__link{color:var(--mecx-color-gray-900);cursor:pointer;font-size:14px;font-weight:400;letter-spacing:.42px;line-height:24px;text-decoration:underline}\n"] }]
+                    }, 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:var(--mecx-color-warning-100);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:var(--mecx-color-gray-50);border:solid 2px var(--mecx-color-gray-400)}monkey-alert .monkey-alert__card.default>.mk-i{color:var(--mecx-color-gray-900)}monkey-alert .monkey-alert__card.error{background-color:var(--mecx-color-error-100);border:solid 2px var(--mecx-color-error-500)}monkey-alert .monkey-alert__card.error>.mk-i{color:var(--mecx-color-error-500)}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:var(--mecx-color-success-100);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:var(--mecx-color-gray-900);font-size:18px;font-weight:400;letter-spacing:.54px;line-height:24px}monkey-alert .monkey-alert__card__message{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;letter-spacing:.42px;line-height:24px}monkey-alert .monkey-alert__card__link{color:var(--mecx-color-gray-900);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
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyAvatarComponent {
+    constructor() {
+        this._id = inject(IdGenerator).getId('monkey-avatar-');
+        this.size = input('xs');
+        this.src = input.required();
+        this.id = input();
+        this.avatar = '?';
+        this.avatarType = 'name';
+        effect(() => {
+            this._id = this.id() || this._id;
+            this.handleAvatarType();
+        });
+    }
+    getInitial(text) {
+        return text.toUpperCase()[0];
+    }
+    handleAvatarType() {
+        const { getInitial, src } = this;
+        const value = src();
+        if (objHaveProperty(value, 'iconName')) {
+            this.avatarType = 'icon';
+            this.avatar = value.iconName;
+            return;
+        }
+        if (objHaveProperty(value, 'imageUrl')) {
+            this.avatarType = 'image';
+            this.avatar = value.imageUrl;
+            return;
+        }
+        if (objHaveProperty(value, 'name')) {
+            this.avatarType = 'name';
+            this.avatar = getInitial(value.name);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyAvatarComponent, isStandalone: true, selector: "monkey-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-avatar" }, properties: { "attr.id": "_id", "id": "_id" } }, ngImport: i0, template: "<div class=\"monkey-avatar\" [class]=\"size()\">\n  @switch (avatarType) {\n    @case ('name') {\n      <p [class]=\"size()\">{{ avatar }}</p>\n    }\n\n    @case ('icon') {\n      <monkey-icon [icon]=\"avatar\" [size]=\"size()\" />\n    }\n\n    @case ('image') {\n      <img loading=\"lazy\" [alt]=\"'Avatar ' + avatarType\" [class]=\"size()\" [src]=\"avatar\" />\n    }\n  }\n</div>\n", styles: [".monkey-avatar{align-items:center;background:#f1f2f3;border-radius:4px;display:flex;flex-direction:column;justify-content:center}.monkey-avatar.xs{height:24px;width:24px}.monkey-avatar.sm{height:32px;width:32px}.monkey-avatar.md{border-radius:8px;height:40px;width:40px}.monkey-avatar.lg{border-radius:12px;height:48px;width:48px}.monkey-avatar p{font-style:normal;font-weight:400;letter-spacing:.26px;line-height:16px}.monkey-avatar p.xs{font-size:16px}.monkey-avatar p.sm{font-size:18px}.monkey-avatar p.md{font-size:20px}.monkey-avatar p.lg{font-size:22px}.monkey-avatar img{border-radius:4px;height:auto}.monkey-avatar img.xs{width:24px}.monkey-avatar img.sm{width:32px}.monkey-avatar img.md{border-radius:8px;width:40px}.monkey-avatar img.lg{border-radius:12px;width:48px}\n"], dependencies: [{ kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [MonkeyIconComponent], selector: 'monkey-avatar', standalone: true, host: {
+                        'data-testid': 'monkey-avatar',
+                        '[attr.id]': '_id',
+                        '[id]': '_id'
+                    }, template: "<div class=\"monkey-avatar\" [class]=\"size()\">\n  @switch (avatarType) {\n    @case ('name') {\n      <p [class]=\"size()\">{{ avatar }}</p>\n    }\n\n    @case ('icon') {\n      <monkey-icon [icon]=\"avatar\" [size]=\"size()\" />\n    }\n\n    @case ('image') {\n      <img loading=\"lazy\" [alt]=\"'Avatar ' + avatarType\" [class]=\"size()\" [src]=\"avatar\" />\n    }\n  }\n</div>\n", styles: [".monkey-avatar{align-items:center;background:#f1f2f3;border-radius:4px;display:flex;flex-direction:column;justify-content:center}.monkey-avatar.xs{height:24px;width:24px}.monkey-avatar.sm{height:32px;width:32px}.monkey-avatar.md{border-radius:8px;height:40px;width:40px}.monkey-avatar.lg{border-radius:12px;height:48px;width:48px}.monkey-avatar p{font-style:normal;font-weight:400;letter-spacing:.26px;line-height:16px}.monkey-avatar p.xs{font-size:16px}.monkey-avatar p.sm{font-size:18px}.monkey-avatar p.md{font-size:20px}.monkey-avatar p.lg{font-size:22px}.monkey-avatar img{border-radius:4px;height:auto}.monkey-avatar img.xs{width:24px}.monkey-avatar img.sm{width:32px}.monkey-avatar img.md{border-radius:8px;width:40px}.monkey-avatar img.lg{border-radius:12px;width:48px}\n"] }]
+        }], ctorParameters: () => [] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyBadgeComponent {
+    constructor() {
+        this.idGenerator = inject(IdGenerator);
+        this.id = this.idGenerator.getId('monkey-badge-');
+        this.hostVariables = {};
+        this.size = 'sm';
+        this.largePadding = false;
+        this.icon = '';
+        this.text = '';
+    }
+    set type(value) {
+        const styles = {
+            success: { background: '#F5FFFB', color: '#005236' },
+            alert: { background: '#FFF8EB', color: '#1F2024' },
+            error: { background: '#FFECEC', color: '#DB0505' },
+            info: { background: '#F4EBFF', color: '#2D0264' },
+            default: { background: '#f8fafb', color: '#1f2024' }
+        }[value];
+        this.hostVariables = {
+            '--monkey-badge-background': styles?.background,
+            '--monkey-badge-color': styles?.color
+        };
+    }
+    set typeColors(value) {
+        if (value) {
+            this.hostVariables = {
+                '--monkey-badge-background': value?.background,
+                '--monkey-badge-color': value?.color
+            };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyBadgeComponent, isStandalone: true, selector: "monkey-badge", inputs: { type: "type", typeColors: "typeColors", size: "size", largePadding: ["largePadding", "largePadding", booleanAttribute], icon: "icon", text: "text" }, host: { attributes: { "data-testid": "monkey-badge" }, properties: { "attr.id": "id", "style": "this.hostVariables", "class": "this.size", "class.large-padding": "this.largePadding" } }, ngImport: i0, template: "@if (text) {\n  @if (icon) {\n    <monkey-icon class=\"icon\" [icon]=\"icon\"></monkey-icon>\n  }\n  <span>\n    {{ text }}\n  </span>\n} @else {\n  <ng-content></ng-content>\n}\n", styles: [":host{gap:4px;display:inline-flex;font-weight:500;padding:8px 12px;border-radius:8px;align-items:start;font-style:normal;letter-spacing:.24px;color:var(--monkey-badge-color, #1f2024);background-color:var(--monkey-badge-background, #f8fafb)}:host.large-padding{padding:12px 16px}:host.sm{font-size:12px;line-height:16px}:host.sm .icon{font-size:16px}:host.md{font-size:16px;line-height:20px}:host.md .icon{font-size:20px}:host.lg{font-size:20px;line-height:24px}:host.lg .icon{font-size:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-badge', standalone: true, imports: [CommonModule, MonkeyIconComponent], host: {
+                        'data-testid': 'monkey-badge',
+                        '[attr.id]': 'id'
+                    }, template: "@if (text) {\n  @if (icon) {\n    <monkey-icon class=\"icon\" [icon]=\"icon\"></monkey-icon>\n  }\n  <span>\n    {{ text }}\n  </span>\n} @else {\n  <ng-content></ng-content>\n}\n", styles: [":host{gap:4px;display:inline-flex;font-weight:500;padding:8px 12px;border-radius:8px;align-items:start;font-style:normal;letter-spacing:.24px;color:var(--monkey-badge-color, #1f2024);background-color:var(--monkey-badge-background, #f8fafb)}:host.large-padding{padding:12px 16px}:host.sm{font-size:12px;line-height:16px}:host.sm .icon{font-size:16px}:host.md{font-size:16px;line-height:20px}:host.md .icon{font-size:20px}:host.lg{font-size:20px;line-height:24px}:host.lg .icon{font-size:24px}\n"] }]
+        }], propDecorators: { hostVariables: [{
+                type: HostBinding,
+                args: ['style']
+            }], type: [{
+                type: Input
+            }], typeColors: [{
+                type: Input
+            }], size: [{
+                type: HostBinding,
+                args: ['class']
+            }, {
+                type: Input
+            }], largePadding: [{
+                type: HostBinding,
+                args: ['class.large-padding']
+            }, {
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], icon: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -414,6 +650,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -463,6 +705,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['click', ['$event']]
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyBadgeDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.badgePosition = 'right';
+        this.badgeSize = 'md';
+        this.badgeHidden = false;
+        this.monkeyBadge = '';
+        this.badgeBackground = null;
+        this.badgeColor = null;
+        this.badgeEl = null;
+        // not to do
+    }
+    ngOnChanges() {
+        const { badgeHidden, badgeEl, renderer, el } = this;
+        if (badgeHidden) {
+            this.removeBadge();
+            return;
+        }
+        if (!badgeEl) {
+            this.badgeEl = renderer.createElement('span');
+            renderer.setStyle(el.nativeElement, 'position', 'relative');
+            renderer.appendChild(el.nativeElement, this.badgeEl);
+        }
+        this.updateBadge();
+    }
+    updateBadge() {
+        const { badgeEl, renderer, monkeyBadge, badgeSize, badgeColor, badgePosition, badgeBackground } = this;
+        renderer.addClass(badgeEl, 'monkey-badge');
+        renderer.addClass(badgeEl, `monkey-badge-${badgeSize}`);
+        renderer.addClass(badgeEl, `monkey-badge-${badgePosition}`);
+        renderer.setAttribute(badgeEl, 'style', `
+                --badge-background: ${badgeBackground ?? 'unset'};
+                --badge-color: ${badgeColor ?? 'unset'}
+            `);
+        this.renderer.setProperty(this.badgeEl, 'textContent', monkeyBadge);
+    }
+    removeBadge() {
+        const { renderer, el, badgeEl } = this;
+        if (!el.nativeElement || !badgeEl)
+            return;
+        renderer.removeChild(el.nativeElement, badgeEl);
+        renderer.removeStyle(el.nativeElement, 'position');
+        this.badgeEl = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyBadgeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyBadgeDirective, selector: "[monkeyBadge]", inputs: { badgePosition: "badgePosition", badgeSize: "badgeSize", badgeHidden: "badgeHidden", monkeyBadge: "monkeyBadge", badgeBackground: "badgeBackground", badgeColor: "badgeColor" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyBadgeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[monkeyBadge]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { badgePosition: [{
+                type: Input
+            }], badgeSize: [{
+                type: Input
+            }], badgeHidden: [{
+                type: Input
+            }], monkeyBadge: [{
+                type: Input
+            }], badgeBackground: [{
+                type: Input
+            }], badgeColor: [{
+                type: Input
+            }] } });
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -591,17 +911,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  ************************* */
 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.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDirectivesModule, declarations: [MonkeyError,
+            MonkeyHelper,
+            MonkeyInfo,
+            MonkeyLabel,
+            MonkeyPrefix,
+            MonkeySuffix,
+            MonkeyBadgeDirective], exports: [MonkeyError,
+            MonkeyHelper,
+            MonkeyInfo,
+            MonkeyLabel,
+            MonkeyPrefix,
+            MonkeySuffix,
+            MonkeyBadgeDirective] }); }
     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]
+                    declarations: [
+                        MonkeyError,
+                        MonkeyHelper,
+                        MonkeyInfo,
+                        MonkeyLabel,
+                        MonkeyPrefix,
+                        MonkeySuffix,
+                        MonkeyBadgeDirective
+                    ],
+                    exports: [
+                        MonkeyError,
+                        MonkeyHelper,
+                        MonkeyInfo,
+                        MonkeyLabel,
+                        MonkeyPrefix,
+                        MonkeySuffix,
+                        MonkeyBadgeDirective
+                    ]
                 }]
         }] });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
 class MonkeyCheckboxComponent {
     constructor() {
         this.disabled = false;
@@ -610,7 +963,7 @@ class MonkeyCheckboxComponent {
         this.showFooter = true;
         this.size = 'md';
         this.onChange = new EventEmitter();
-        this._destroyed = inject(MonkeyDestroyService);
+        this._destroyRef = inject(DestroyRef);
         this.icons = inject(MonkeyIconsService);
         this.idGenerator = inject(IdGenerator);
         this.injector = inject(Injector);
@@ -652,7 +1005,7 @@ class MonkeyCheckboxComponent {
         }
         else if (ngControl instanceof FormControlName) {
             this.control = this.injector.get(FormGroupDirective).getControl(ngControl);
-            this.control.statusChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {
+            this.control.statusChanges.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
                 this.cdr.markForCheck();
             });
         }
@@ -717,8 +1070,7 @@ class MonkeyCheckboxComponent {
                 // 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', [
@@ -767,8 +1119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             // eslint-disable-next-line no-use-before-define
                             useExisting: MonkeyCheckboxComponent,
                             multi: true
-                        },
-                        MonkeyDestroyService
+                        }
                     ], host: {
                         'data-testid': 'input-checkbox',
                         class: 'mecx-checkbox',
@@ -815,41 +1166,227 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * 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;
-    }
+
+const MECX_I18N_WRAPPER = new InjectionToken('');
+
+/* eslint-disable no-console */
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyDictionaryService {
     constructor() {
-        this.size = input('sm');
-        this.vertical = input(false, {
-            transform: booleanAttribute
+        this._localeId = inject(LOCALE_ID);
+        this._destroyRef = inject(DestroyRef);
+        this._data$ = new BehaviorSubject({
+            'pt-BR': {
+                'NO-RESULTS': 'Nenhum resultado encontrado',
+                'NO-DATA': 'Sem dados',
+                LOADING: 'Carregando...',
+                'DATE-RANGE': {
+                    'START-DATE': 'Data de início',
+                    'END-DATE': 'Data de término',
+                    INVALID: 'Intervalo de datas inválido',
+                    ACTIONS: {
+                        CANCEL: 'Cancelar',
+                        APPLY: 'Aplicar'
+                    },
+                    'WEEK-DAYS': ['Dom.', '2ª', '3ª', '4ª', '5ª', '6ª', 'Sab.'],
+                    MONTHS: {
+                        0: 'Janeiro',
+                        1: 'Fevereiro',
+                        2: 'Março',
+                        3: 'Abril',
+                        4: 'Maio',
+                        5: 'Junho',
+                        6: 'Julho',
+                        7: 'Agosto',
+                        8: 'Setembro',
+                        9: 'Outubro',
+                        10: 'Novembro',
+                        11: 'Dezembro'
+                    },
+                    'QUICK-ACTIONS': {
+                        CUSTOM: 'Customizado',
+                        LAST_30_DAYS: 'Ultimos 30 dias',
+                        LAST_60_DAYS: 'Ultimos 60 dias',
+                        LAST_90_DAYS: 'Ultimos 90 dias',
+                        LAST_6_MONTHS: 'Ultimos 6 meses',
+                        LAST_12_MONTHS: 'Ultimos 12 meses',
+                        NEXT_30_DAYS: 'Próximos 30 dias',
+                        NEXT_60_DAYS: 'Próximos 60 dias',
+                        NEXT_90_DAYS: 'Próximos 90 dias',
+                        NEXT_6_MONTHS: 'Próximos 6 meses',
+                        NEXT_12_MONTHS: 'Próximos 12 meses'
+                    }
+                }
+            },
+            'es-CL': {
+                'NO-RESULTS': 'No se encontraron resultados',
+                'NO-DATA': 'Sin datos',
+                LOADING: 'Cargando...',
+                'DATE-RANGE': {
+                    'START-DATE': 'Fecha de inicio',
+                    'END-DATE': 'Fecha de termino',
+                    INVALID: 'Rango de fechas no válido',
+                    ACTIONS: {
+                        CANCEL: 'Cancelar',
+                        APPLY: 'Aplicar'
+                    },
+                    'WEEK-DAYS': ['Dom.', 'Lun.', 'Mar.', 'Mié.', 'Jue.', 'Vie.', 'Sab.'],
+                    MONTHS: {
+                        0: 'Enero',
+                        1: 'Febrero',
+                        2: 'Marzo',
+                        3: 'Abril',
+                        4: 'Mayo',
+                        5: 'Junio',
+                        6: 'Julio',
+                        7: 'Agosto',
+                        8: 'Septiembre',
+                        9: 'Octubre',
+                        10: 'Noviembre',
+                        11: 'Diciembre'
+                    },
+                    'QUICK-ACTIONS': {
+                        CUSTOM: 'Personalizado',
+                        LAST_30_DAYS: 'Últimos 30 días',
+                        LAST_60_DAYS: 'Últimos 60 días',
+                        LAST_90_DAYS: 'Últimos 90 días',
+                        LAST_6_MONTHS: 'Últimos 6 meses',
+                        LAST_12_MONTHS: 'Últimos 12 meses',
+                        NEXT_30_DAYS: 'Próximos 30 días',
+                        NEXT_60_DAYS: 'Próximos 60 días',
+                        NEXT_90_DAYS: 'Próximos 90 días',
+                        NEXT_6_MONTHS: 'Próximos 6 meses',
+                        NEXT_12_MONTHS: 'Próximos 12 meses'
+                    }
+                }
+            },
+            'es-MX': {
+                'NO-RESULTS': 'No se encontraron resultados',
+                'NO-DATA': 'Sin datos',
+                LOADING: 'Cargando...',
+                'DATE-RANGE': {
+                    'START-DATE': 'Fecha de inicio',
+                    'END-DATE': 'Fecha de termino',
+                    INVALID: 'Rango de fechas no válido',
+                    ACTIONS: {
+                        CANCEL: 'Cancelar',
+                        APPLY: 'Aplicar'
+                    },
+                    'WEEK-DAYS': ['Dom.', 'Lun.', 'Mar.', 'Mié.', 'Jue.', 'Vie.', 'Sab.'],
+                    MONTHS: {
+                        0: 'Enero',
+                        1: 'Febrero',
+                        2: 'Marzo',
+                        3: 'Abril',
+                        4: 'Mayo',
+                        5: 'Junio',
+                        6: 'Julio',
+                        7: 'Agosto',
+                        8: 'Septiembre',
+                        9: 'Octubre',
+                        10: 'Noviembre',
+                        11: 'Diciembre'
+                    },
+                    'QUICK-ACTIONS': {
+                        CUSTOM: 'Personalizado',
+                        LAST_30_DAYS: 'Últimos 30 días',
+                        LAST_60_DAYS: 'Últimos 60 días',
+                        LAST_90_DAYS: 'Últimos 90 días',
+                        LAST_6_MONTHS: 'Últimos 6 meses',
+                        LAST_12_MONTHS: 'Últimos 12 meses',
+                        NEXT_30_DAYS: 'Próximos 30 días',
+                        NEXT_60_DAYS: 'Próximos 60 días',
+                        NEXT_90_DAYS: 'Próximos 90 días',
+                        NEXT_6_MONTHS: 'Próximos 6 meses',
+                        NEXT_12_MONTHS: 'Próximos 12 meses'
+                    }
+                }
+            },
+            'en-US': {
+                'NO-RESULTS': 'No results found',
+                'NO-DATA': 'No data',
+                LOADING: 'Loading...',
+                'DATE-RANGE': {
+                    'START-DATE': 'Start date',
+                    'END-DATE': 'End Date',
+                    INVALID: 'Invalid date range',
+                    ACTIONS: {
+                        CANCEL: 'Cancel',
+                        APPLY: 'Apply'
+                    },
+                    'WEEK-DAYS': ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'],
+                    MONTHS: {
+                        0: 'January',
+                        1: 'February',
+                        2: 'March',
+                        3: 'April',
+                        4: 'May',
+                        5: 'June',
+                        6: 'July',
+                        7: 'August',
+                        8: 'September',
+                        9: 'October',
+                        10: 'November',
+                        11: 'December'
+                    },
+                    'QUICK-ACTIONS': {
+                        CUSTOM: 'Custom',
+                        LAST_30_DAYS: 'Last 30 days',
+                        LAST_60_DAYS: 'Last 60 days',
+                        LAST_90_DAYS: 'Last 90 days',
+                        LAST_6_MONTHS: 'Last 6 months',
+                        LAST_12_MONTHS: 'Last 12 months',
+                        NEXT_30_DAYS: 'Next 30 days',
+                        NEXT_60_DAYS: 'Next 60 days',
+                        NEXT_90_DAYS: 'Next 90 days',
+                        NEXT_6_MONTHS: 'Next 6 months',
+                        NEXT_12_MONTHS: 'Next 12 months'
+                    }
+                }
+            }
+        });
+        const tokenSubject = inject(MECX_I18N_WRAPPER, { optional: true });
+        tokenSubject?.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((value) => {
+            this.handleWrapperValues(value);
         });
-        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:var(--mecx-color-gray-200)}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 }); }
+    handleWrapperValues(value) {
+        try {
+            const locale = this._localeId || 'pt-BR';
+            const wrappedData = JSON.parse(value);
+            const currentData = this._data$.value;
+            const updated = {
+                ...currentData,
+                [locale]: {
+                    ...currentData[locale],
+                    ...wrappedData
+                }
+            };
+            this._data$.next(updated);
+        }
+        catch (e) {
+            console.error(`MonkeyDictionaryService - handleWrapperValues -> ${e}`);
+        }
+    }
+    get(key) {
+        const locale = this._localeId || 'pt-BR';
+        return this._data$.pipe(map((data) => {
+            return data[locale]?.[key] ?? null;
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDictionaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDictionaryService, providedIn: 'root' }); }
 }
-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:var(--mecx-color-gray-200)}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
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDictionaryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
@@ -898,6 +1435,9 @@ class MonkeyFormFieldComponent {
     get labelId() {
         return this._labelId;
     }
+    get hideBorder() {
+        return this.control.type === 'input-code';
+    }
     get showHeader() {
         return this.hasLabel || this.hasHelper;
     }
@@ -905,6 +1445,9 @@ class MonkeyFormFieldComponent {
         return this.hasInfo || this.hasError;
     }
     get showInvalid() {
+        if (this.showLoading) {
+            return false;
+        }
         const touched = this.control.ngControl?.touched || false;
         const invalid = this.control.ngControl?.invalid || false;
         return (this.hasError && !this._isFocused && touched && invalid && !this.control.disableToBeDirty);
@@ -913,10 +1456,10 @@ class MonkeyFormFieldComponent {
         return (!!this.control.ngControl?.control?.value &&
             !this.control.disabled &&
             !this.control.loading &&
-            !this.hideClear);
+            (!this.hideAction || this.enableClear));
     }
     get showCalendar() {
-        return this.control.type === 'date';
+        return this.control.type === 'date' && !this.hideAction;
     }
     get showCurrency() {
         return this.control.currency;
@@ -928,13 +1471,14 @@ class MonkeyFormFieldComponent {
         return this.control.loading || false;
     }
     constructor() {
+        this.size = 'md';
         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._destroyRef = inject(DestroyRef);
         this._isFocused = null;
         this._previousControl = null;
         this.currencySymbol = getCurrencySymbol(inject(DEFAULT_CURRENCY_CODE));
@@ -1009,7 +1553,7 @@ class MonkeyFormFieldComponent {
         this._valueChanges?.unsubscribe();
         if (control.ngControl && control.ngControl.valueChanges) {
             this._valueChanges = control.ngControl.valueChanges
-                .pipe(takeUntil(this._destroyed))
+                .pipe(takeUntilDestroyed(this._destroyRef))
                 .subscribe(() => {
                 this._changeDetectorRef.markForCheck();
             });
@@ -1038,8 +1582,6 @@ class MonkeyFormFieldComponent {
     ngOnDestroy() {
         this._stateChanges?.unsubscribe();
         this._valueChanges?.unsubscribe();
-        this._destroyed.next();
-        this._destroyed.complete();
     }
     getFooterMessages() {
         const touched = this.control.ngControl?.touched;
@@ -1051,7 +1593,12 @@ class MonkeyFormFieldComponent {
         const isTouched = touched;
         const isInvalid = invalid;
         const isNotFocused = !isFocused;
-        if (isControlEnabled && isTouched && isInvalid && isNotFocused && isControlDisableToBeDirty) {
+        if (!this.showLoading &&
+            isControlEnabled &&
+            isTouched &&
+            isInvalid &&
+            isNotFocused &&
+            isControlDisableToBeDirty) {
             return 'error';
         }
         if (hasInfoChildren) {
@@ -1082,7 +1629,7 @@ class MonkeyFormFieldComponent {
         }
     }
     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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: { id: "id", hideAction: ["hideAction", "hideAction", booleanAttribute], enableClear: ["enableClear", "enableClear", booleanAttribute], size: "size" }, host: { properties: { "class.mecx-disabled": "control.disabled", "class.mecx-form-field-focused": "control.focused", "class.mecx-form-field-invalid": "showInvalid", "class.mecx-form-field-borderless": "hideBorder", "attr.id": "id", "id": "id", "class": "size" }, 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:4px;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;position:relative}.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)}.sm .mecx-form-field-body{height:32px}.md .mecx-form-field-body{height:40px}.lg .mecx-form-field-body{height:48px}.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)}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
             type: Component,
@@ -1091,14 +1638,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '[class.mecx-disabled]': 'control.disabled',
                         '[class.mecx-form-field-focused]': 'control.focused',
                         '[class.mecx-form-field-invalid]': 'showInvalid',
+                        '[class.mecx-form-field-borderless]': 'hideBorder',
                         '[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"] }]
+                        '[id]': 'id',
+                        '[class]': 'size'
+                    }, 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:4px;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;position:relative}.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)}.sm .mecx-form-field-body{height:32px}.md .mecx-form-field-body{height:40px}.lg .mecx-form-field-body{height:48px}.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)}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{
                 type: Input
-            }], hideClear: [{
+            }], hideAction: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], enableClear: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], size: [{
+                type: Input
             }], _formFieldControl: [{
                 type: ContentChild,
                 args: [MonkeyFormFieldControl]
@@ -1145,53 +1699,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * 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:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-icon-button .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!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 var(--mecx-color-gray-400);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:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-icon-button .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!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 var(--mecx-color-gray-400);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
@@ -1248,7 +1755,7 @@ class MonkeyInputCurrencyDirective {
         this._changeDetectorRef = inject(ChangeDetectorRef);
         this._currencyCode = inject(DEFAULT_CURRENCY_CODE);
         this._localeId = inject(LOCALE_ID);
-        this._destroyed = new Subject();
+        this._destroyRef = inject(DestroyRef);
         this._rawValue = 0;
         this.ngControl = inject(NgControl, { self: true, optional: true });
         this.focused = false;
@@ -1285,7 +1792,7 @@ class MonkeyInputCurrencyDirective {
         this.handleControlValue();
         this._valueChanges?.unsubscribe();
         this._valueChanges = this.ngControl?.control?.valueChanges
-            .pipe(takeUntil(this._destroyed))
+            .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             this.handleControlValue();
         });
@@ -1325,8 +1832,7 @@ class MonkeyInputCurrencyDirective {
                 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: [{
@@ -1354,8 +1860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             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: [{
@@ -1371,6 +1876,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
 const INPUT_INVALID_TYPES = [
     'button',
     'checkbox',
@@ -1426,6 +1936,24 @@ class MonkeyInputDirective {
         this._type = value || 'text';
         this._elementRef.nativeElement.type = this._type;
     }
+    get min() {
+        return this._min;
+    }
+    set min(value) {
+        this._min = value;
+        if (this._type === 'date') {
+            this._elementRef.nativeElement.min = this._min;
+        }
+    }
+    get max() {
+        return this._max;
+    }
+    set max(value) {
+        this._max = value;
+        if (this._type === 'date') {
+            this._elementRef.nativeElement.max = this._max;
+        }
+    }
     get currency() {
         return false;
     }
@@ -1490,13 +2018,12 @@ class MonkeyInputDirective {
         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: [
+    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", min: "min", max: "max", 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: [{
@@ -1525,8 +2052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             provide: MonkeyFormFieldControl,
                             // eslint-disable-next-line no-use-before-define
                             useExisting: MonkeyInputDirective
-                        },
-                        MonkeyDestroyService
+                        }
                     ]
                 }]
         }], ctorParameters: () => [], propDecorators: { name: [{
@@ -1540,6 +2066,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], type: [{
                 type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
             }], percent: [{
                 type: Input
             }] } });
@@ -1568,197 +2098,1142 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyModalRef {
-    constructor(overlayRef, config) {
-        this.overlayRef = overlayRef;
-        this.config = config;
-        this.closed = new Subject();
-        this.id = config.id;
-        this.icon = config.icon;
-        this.disableClose = config.disableClose;
-        this.closeOnNavigation = config.closeOnNavigation;
-        this.backdropClick = overlayRef.backdropClick();
-        this.keydownEvents = overlayRef.keydownEvents();
-        this.outsidePointerEvents = overlayRef.outsidePointerEvents();
-        this.keydownEvents.subscribe((event) => {
-            if (event.key === 'Escape' && !this.disableClose && !hasModifierKey(event)) {
-                event.preventDefault();
-                this.close(undefined);
-            }
-        });
-        this.backdropClick.subscribe(() => {
-            if (!this.disableClose) {
-                this.close(undefined);
-            }
-        });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyIconButtonComponent {
+    get id() {
+        return this._id;
     }
-    close(result) {
-        if (this.componentInstance) {
-            const closedSubject = this.closed;
-            this.overlayRef.dispose();
-            closedSubject.next(result);
-            closedSubject.complete();
-            // eslint-disable-next-line no-multi-assign
-            this.componentInstance = null;
-        }
+    set id(value) {
+        this._id = value || this._uid;
     }
-    afterClosed() {
-        return this.closed;
+    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:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-icon-button .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!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 var(--mecx-color-gray-400);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:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-icon-button .mecx-icon-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!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 var(--mecx-color-gray-400);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
  ************************* */
-const MECX_MODAL_DATA = new InjectionToken('mecxModalData');
-const MECX_MODAL_DEFAULT_CONFIG = new InjectionToken('mecxModalDefaultConfig');
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.dev/license
- */
-function reverseForEach(items, callback) {
-    let i = items.length;
-    // eslint-disable-next-line no-plusplus
-    while (i--) {
-        callback(items[i]);
-    }
-}
 
-class MonkeyModalComponent {
-    constructor(_elementRef, viewContainerRef, overlayRef, modalRef) {
-        this._elementRef = _elementRef;
-        this.viewContainerRef = viewContainerRef;
-        this.overlayRef = overlayRef;
-        this.modalRef = modalRef;
-        this._navigationSubscription = null;
-        this._router = inject(Router);
-        // not to do
-    }
-    ngAfterViewInit() {
-        console.log(this.modalRef);
-        if (this._elementRef) {
-            this._elementRef.nativeElement.focus();
+/* eslint-disable no-unused-vars */
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+var QuickActionsEnum;
+(function (QuickActionsEnum) {
+    QuickActionsEnum[QuickActionsEnum["LAST_30_DAYS"] = -30] = "LAST_30_DAYS";
+    QuickActionsEnum[QuickActionsEnum["LAST_60_DAYS"] = -60] = "LAST_60_DAYS";
+    QuickActionsEnum[QuickActionsEnum["LAST_90_DAYS"] = -90] = "LAST_90_DAYS";
+    QuickActionsEnum[QuickActionsEnum["LAST_6_MONTHS"] = -180] = "LAST_6_MONTHS";
+    QuickActionsEnum[QuickActionsEnum["LAST_12_MONTHS"] = -365] = "LAST_12_MONTHS";
+    QuickActionsEnum[QuickActionsEnum["NEXT_30_DAYS"] = 30] = "NEXT_30_DAYS";
+    QuickActionsEnum[QuickActionsEnum["NEXT_60_DAYS"] = 60] = "NEXT_60_DAYS";
+    QuickActionsEnum[QuickActionsEnum["NEXT_90_DAYS"] = 90] = "NEXT_90_DAYS";
+    QuickActionsEnum[QuickActionsEnum["NEXT_6_MONTHS"] = 180] = "NEXT_6_MONTHS";
+    QuickActionsEnum[QuickActionsEnum["NEXT_12_MONTHS"] = 365] = "NEXT_12_MONTHS";
+})(QuickActionsEnum || (QuickActionsEnum = {}));
+function parseStringDate(val) {
+    if (typeof val === 'string') {
+        return format(parseISO(val), 'yyyy-MM-dd');
+    }
+    return val.toISOString().split('T')[0];
+}
+function getDefaultdates() {
+    return {
+        minDate: format(subYears(new Date(), 15), 'yyyy-MM-dd'),
+        maxDate: format(addYears(new Date(), 15), 'yyyy-MM-dd')
+    };
+}
+function buildCalendars(date, action) {
+    if (action) {
+        if (action === 'previous') {
+            date = subMonths(date, 1);
         }
-        if (this.modalRef?.closeOnNavigation) {
-            this._navigationSubscription = this._router.events.subscribe((event) => {
-                if (event instanceof NavigationStart) {
-                    this.close();
-                }
-            });
+        else {
+            date = addMonths(date, 1);
         }
     }
-    ngOnDestroy() {
-        if (this._navigationSubscription) {
-            this._navigationSubscription.unsubscribe();
-            this._navigationSubscription = null;
+    const firstMonth = getMonth(date);
+    const firstYear = getYear(date);
+    const secondDate = addMonths(date, 1);
+    const secondMonth = getMonth(secondDate);
+    const secondYear = getYear(secondDate);
+    return {
+        firstCalendar: {
+            month: firstMonth,
+            year: firstYear
+        },
+        secondCalendar: {
+            month: secondMonth,
+            year: secondYear
         }
+    };
+}
+function buildMonthByDays(year, month, minDate, maxDate) {
+    const date = new Date(year, month, 1);
+    const start = startOfWeek(startOfMonth(date), { weekStartsOn: 0 });
+    const end = endOfWeek(endOfMonth(date), { weekStartsOn: 0 });
+    const days = [];
+    let blockPrev = false;
+    let blockNext = false;
+    let current = start;
+    while (current <= end) {
+        const isCurrentMonth = isSameMonth(current, date);
+        const isBeforeMin = minDate
+            ? isBefore(parseStringDate(current), parseStringDate(minDate))
+            : false;
+        if (isBeforeMin) {
+            blockPrev = true;
+        }
+        const isAfterMax = maxDate
+            ? isAfter(parseStringDate(current), parseStringDate(maxDate))
+            : false;
+        if (isAfterMax) {
+            blockNext = true;
+        }
+        days.push({
+            date: isCurrentMonth ? current : null,
+            isDisabled: !isCurrentMonth || isBeforeMin || isAfterMax,
+            isToday: isToday(current)
+        });
+        current = addDays(current, 1);
     }
-    close() {
-        this.overlayRef?.dispose();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalComponent, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1.OverlayRef, optional: true }, { token: MonkeyModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyModalComponent, selector: "monkey-modal", host: { attributes: { "tabindex": "-1" }, properties: { "attr.id": "modalRef?.id || null" }, classAttribute: "mecx-modal" }, ngImport: i0, template: `
-    <div class="mecx-modal-header">
-      <div class="mecx-modal-header-group">
-        <div class="mecx-modal-header-title">
-          @if (modalRef?.icon) {
-            <div class="mecx-modal-header-icon">
-              <monkey-icon [icon]="modalRef?.icon + ''" first></monkey-icon>
-            </div>
-          }
-          <ng-content select="monkey-modal-title"></ng-content>
-          <ng-content select="[monkey-modal-title]"></ng-content>
-        </div>
-
-        <ng-content select="monkey-modal-subtitle"></ng-content>
-        <ng-content select="[monkey-modal-subtitle]"></ng-content>
-      </div>
-      @if (!modalRef?.disableClose) {
-        <monkey-icon-button
-          size="sm"
-          type="tertiary"
-          icon="close"
-          class="mecx-modal-close"
-          (click)="close()"
-        >
-          x
-        </monkey-icon-button>
-      }
-    </div>
-    <ng-content select="monkey-modal-content"></ng-content>
-    <ng-content select="[monkey-modal-content]"></ng-content>
-    <ng-content select="monkey-modal-actions"></ng-content>
-    <ng-content select="[monkey-modal-actions]"></ng-content>
-  `, isInline: true, styles: ["monkey-modal{display:flex;flex-direction:column;background:#fff;border-radius:8px}.mecx-modal-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--mecx-color-gray-200);padding:12px;position:relative}.mecx-modal-header-group{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.mecx-modal-header-title{display:flex;gap:8px;align-items:center;justify-content:flex-start}.mecx-modal-header-icon{padding:8px;display:flex;align-items:center;justify-content:center;background:var(--mecx-color-gray-100);border-radius:8px;font-size:24px;color:var(--mecx-color-gray-900)}.mecx-modal-title{font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;color:var(--mecx-color-gray-900)}.mecx-modal-subtitle{font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;color:var(--mecx-color-gray-700)}.mecx-modal-content{display:block;flex-grow:1;box-sizing:border-box;overflow:auto;max-height:65vh;padding:12px;scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-modal-actions{display:flex;gap:8px;border-top:1px solid var(--mecx-color-gray-200);padding:12px}.mecx-modal-actions.align-start{justify-content:flex-start}.mecx-modal-actions.align-center{justify-content:center}.mecx-modal-actions.align-end{justify-content:flex-end}.mecx-modal-overlay{background:#00000052}\n"], dependencies: [{ kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "id"] }, { kind: "component", type: MonkeyIconComponent, selector: "monkey-icon", inputs: ["icon", "size", "id"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    return {
+        blockPrev,
+        blockNext,
+        days
+    };
+}
+function getEnumKeys(enumObj) {
+    return Object.entries(enumObj)
+        .filter(([key]) => {
+        return Number.isNaN(Number(key));
+    })
+        .map(([key, value]) => {
+        return { key, value };
+    });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalComponent, decorators: [{
-            type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-modal', template: `
-    <div class="mecx-modal-header">
-      <div class="mecx-modal-header-group">
-        <div class="mecx-modal-header-title">
-          @if (modalRef?.icon) {
-            <div class="mecx-modal-header-icon">
-              <monkey-icon [icon]="modalRef?.icon + ''" first></monkey-icon>
-            </div>
-          }
-          <ng-content select="monkey-modal-title"></ng-content>
-          <ng-content select="[monkey-modal-title]"></ng-content>
-        </div>
 
-        <ng-content select="monkey-modal-subtitle"></ng-content>
-        <ng-content select="[monkey-modal-subtitle]"></ng-content>
-      </div>
-      @if (!modalRef?.disableClose) {
-        <monkey-icon-button
-          size="sm"
-          type="tertiary"
-          icon="close"
-          class="mecx-modal-close"
-          (click)="close()"
-        >
-          x
-        </monkey-icon-button>
-      }
-    </div>
-    <ng-content select="monkey-modal-content"></ng-content>
-    <ng-content select="[monkey-modal-content]"></ng-content>
-    <ng-content select="monkey-modal-actions"></ng-content>
-    <ng-content select="[monkey-modal-actions]"></ng-content>
-  `, host: {
-                        class: 'mecx-modal',
-                        tabindex: '-1',
-                        '[attr.id]': 'modalRef?.id || null'
-                    }, styles: ["monkey-modal{display:flex;flex-direction:column;background:#fff;border-radius:8px}.mecx-modal-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--mecx-color-gray-200);padding:12px;position:relative}.mecx-modal-header-group{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.mecx-modal-header-title{display:flex;gap:8px;align-items:center;justify-content:flex-start}.mecx-modal-header-icon{padding:8px;display:flex;align-items:center;justify-content:center;background:var(--mecx-color-gray-100);border-radius:8px;font-size:24px;color:var(--mecx-color-gray-900)}.mecx-modal-title{font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;color:var(--mecx-color-gray-900)}.mecx-modal-subtitle{font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;color:var(--mecx-color-gray-700)}.mecx-modal-content{display:block;flex-grow:1;box-sizing:border-box;overflow:auto;max-height:65vh;padding:12px;scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-modal-actions{display:flex;gap:8px;border-top:1px solid var(--mecx-color-gray-200);padding:12px}.mecx-modal-actions.align-start{justify-content:flex-start}.mecx-modal-actions.align-center{justify-content:center}.mecx-modal-actions.align-end{justify-content:flex-end}.mecx-modal-overlay{background:#00000052}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1.OverlayRef, decorators: [{
-                    type: Optional
-                }] }, { type: MonkeyModalRef, decorators: [{
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyDateRangeMonthComponent {
+    set startDate(val) {
+        this._handledStartDate = val;
+    }
+    set endDate(val) {
+        this._handledEndDate = val;
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.onNavigate = new EventEmitter();
+        this.onDate = new EventEmitter();
+        this._uid = inject(IdGenerator).getId('monkey-date-range-month-');
+        this._today = new Date();
+        this.i18nDictionary = inject(MonkeyDictionaryService).get('DATE-RANGE');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    ngOnChanges() {
+        this.daysInMonth = buildMonthByDays(this.year, this.month, this.minDate, this.maxDate);
+    }
+    isFirst(param) {
+        const date = format(param.date, 'yyyy-MM-dd');
+        return (this._handledStartDate && this._handledStartDate === date) || false;
+    }
+    isLast(param) {
+        const date = format(param.date, 'yyyy-MM-dd');
+        return (this._handledEndDate && this._handledEndDate === date) || false;
+    }
+    isSelected(param) {
+        const date = format(param.date, 'yyyy-MM-dd');
+        return ((this._handledStartDate && this._handledStartDate === date) ||
+            (this._handledEndDate && this._handledEndDate === date) ||
+            false);
+    }
+    isInRange(param) {
+        if (!this._handledStartDate || !this._handledEndDate || !param.date)
+            return false;
+        const date = format(param.date, 'yyyy-MM-dd');
+        return isWithinInterval(new Date(date), {
+            start: new Date(this._handledStartDate),
+            end: new Date(this._handledEndDate)
+        });
+    }
+    isInRangeTemporary(param) {
+        if (!this._handledStartDate ||
+            !this.temporaryEndDate?.date ||
+            !param.date ||
+            param.isDisabled ||
+            (this._handledStartDate && this._handledEndDate))
+            return false;
+        const date = format(param.date, 'yyyy-MM-dd');
+        return isWithinInterval(new Date(date), {
+            start: new Date(this._handledStartDate),
+            end: new Date(this.temporaryEndDate.date)
+        });
+    }
+    isInLastTemporary(param) {
+        if (!this.temporaryEndDate?.date || !param.date || this._handledEndDate)
+            return false;
+        const date = format(param.date, 'yyyy-MM-dd');
+        const cmp = format(this.temporaryEndDate?.date, 'yyyy-MM-dd');
+        return (this.temporaryEndDate?.date && cmp === date) || false;
+    }
+    onSelectDate(event, param) {
+        if (param?.isDisabled || !param.date) {
+            event.preventDefault();
+            return;
+        }
+        const date = format(param.date, 'yyyy-MM-dd');
+        if (this._handledStartDate && this._handledEndDate) {
+            this._handledStartDate = '';
+            this._handledEndDate = '';
+        }
+        if (!this._handledStartDate) {
+            this._handledStartDate = date;
+        }
+        else {
+            this._handledEndDate = date;
+        }
+        const cmp = isAfter(this._handledStartDate, this._handledEndDate);
+        if (this._handledStartDate && this._handledEndDate && cmp) {
+            const start = this._handledStartDate;
+            const end = this._handledEndDate;
+            this._handledStartDate = end;
+            this._handledEndDate = start;
+        }
+        this.onDate.next({
+            startDate: this._handledStartDate,
+            endDate: this._handledEndDate
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDateRangeMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyDateRangeMonthComponent, isStandalone: true, selector: "monkey-date-range-month", inputs: { month: "month", year: "year", startDate: "startDate", endDate: "endDate", hidePrevious: ["hidePrevious", "hidePrevious", booleanAttribute], hideNext: ["hideNext", "hideNext", booleanAttribute], minDate: "minDate", maxDate: "maxDate", id: "id" }, outputs: { onNavigate: "onNavigate", onDate: "onDate" }, host: { attributes: { "data-testid": "month" }, properties: { "attr.id": "id", "id": "id" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n  <div class=\"header\">\n    @if (!hidePrevious) {\n      <monkey-icon-button\n        size=\"sm\"\n        icon=\"arrow-left\"\n        type=\"secondary\"\n        class=\"previous\"\n        [disabled]=\"daysInMonth.blockPrev\"\n        (click)=\"onNavigate.next('previous')\"\n      >\n      </monkey-icon-button>\n    }\n\n    {{ i18n?.['MONTHS']?.[month] }} {{ year }}\n\n    @if (!hideNext) {\n      <monkey-icon-button\n        size=\"sm\"\n        icon=\"arrow-right\"\n        type=\"secondary\"\n        class=\"next\"\n        [disabled]=\"daysInMonth.blockNext\"\n        (click)=\"onNavigate.next('next')\"\n      >\n      </monkey-icon-button>\n    }\n  </div>\n\n  <div class=\"week-labels\">\n    @for (day of i18n?.['WEEK-DAYS']; track day) {\n      <span class=\"day\">{{ day }}</span>\n    }\n  </div>\n\n  <div class=\"dates\">\n    @for (day of daysInMonth.days; track $index) {\n      <div\n        class=\"day\"\n        [class.disabled]=\"day!.isDisabled\"\n        [class.in-range]=\"isInRange(day!)\"\n        [class.selected]=\"isSelected(day!)\"\n        [class.first]=\"isFirst(day!)\"\n        [class.last]=\"isLast(day!)\"\n        [class.in-range-temporary]=\"isInRangeTemporary(day!)\"\n        [class.temporary-last]=\"isInLastTemporary(day!)\"\n        (click)=\"onSelectDate($event, day!)\"\n        (mouseenter)=\"temporaryEndDate = day!\"\n        (mouseleave)=\"temporaryEndDate = null\"\n      >\n        {{ day!.date | date: 'd' }}\n        @if (day?.isToday) {\n          <span class=\"today\"></span>\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n", styles: [":host{width:100%}:host .header{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:12px}:host .header monkey-icon-button{max-width:32px;background:transparent}:host .header monkey-icon-button.previous{position:absolute;left:0}:host .header monkey-icon-button.next{position:absolute;right:0}:host .week-labels{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:700;font-size:.9rem;margin-bottom:4px;gap:12px 0}:host .week-labels .day{height:24px;border:none;background:transparent;text-align:center;display:flex;align-items:center;justify-content:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px}:host .dates{display:grid;grid-template-columns:repeat(7,1fr);gap:12px 0}:host .dates .day{height:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;position:relative;border:1px solid transparent;-webkit-user-select:none;user-select:none}:host .dates .day .today{position:absolute;width:60%;bottom:1px;font-size:36px;letter-spacing:1.48!important}:host .dates .day .today:not(.selected){border-bottom:2px solid var(--mecx-color-theme-main)}:host .dates .day.disabled{color:var(--mecx-color-gray-400);font-weight:400;cursor:not-allowed}:host .dates .day.selected{background-color:var(--mecx-color-theme-main)!important;color:var(--mecx-color-white)!important}:host .dates .day.in-range{background-color:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}:host .dates .day.in-range-temporary{background-color:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}:host .dates .day.first,:host .dates .day.last{background-color:var(--mecx-color-theme-main);color:var(--mecx-color-white)}:host .dates .day.first{border-top-left-radius:8px;border-bottom-left-radius:8px}:host .dates .day.last,:host .dates .day.temporary-last{border-top-right-radius:8px;border-bottom-right-radius:8px}:host .dates .day:hover:not(.disabled,.in-range):before{content:\"\";border:1px solid var(--mecx-color-theme-main);border-radius:8px;height:100%;width:100%;position:absolute}:host .dates .day:hover:not(.disabled,.in-range).selected{background:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "id"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDateRangeMonthComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-date-range-month', standalone: true, imports: [CommonModule, MonkeyIconButtonComponent], host: {
+                        'data-testid': 'month',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n  <div class=\"header\">\n    @if (!hidePrevious) {\n      <monkey-icon-button\n        size=\"sm\"\n        icon=\"arrow-left\"\n        type=\"secondary\"\n        class=\"previous\"\n        [disabled]=\"daysInMonth.blockPrev\"\n        (click)=\"onNavigate.next('previous')\"\n      >\n      </monkey-icon-button>\n    }\n\n    {{ i18n?.['MONTHS']?.[month] }} {{ year }}\n\n    @if (!hideNext) {\n      <monkey-icon-button\n        size=\"sm\"\n        icon=\"arrow-right\"\n        type=\"secondary\"\n        class=\"next\"\n        [disabled]=\"daysInMonth.blockNext\"\n        (click)=\"onNavigate.next('next')\"\n      >\n      </monkey-icon-button>\n    }\n  </div>\n\n  <div class=\"week-labels\">\n    @for (day of i18n?.['WEEK-DAYS']; track day) {\n      <span class=\"day\">{{ day }}</span>\n    }\n  </div>\n\n  <div class=\"dates\">\n    @for (day of daysInMonth.days; track $index) {\n      <div\n        class=\"day\"\n        [class.disabled]=\"day!.isDisabled\"\n        [class.in-range]=\"isInRange(day!)\"\n        [class.selected]=\"isSelected(day!)\"\n        [class.first]=\"isFirst(day!)\"\n        [class.last]=\"isLast(day!)\"\n        [class.in-range-temporary]=\"isInRangeTemporary(day!)\"\n        [class.temporary-last]=\"isInLastTemporary(day!)\"\n        (click)=\"onSelectDate($event, day!)\"\n        (mouseenter)=\"temporaryEndDate = day!\"\n        (mouseleave)=\"temporaryEndDate = null\"\n      >\n        {{ day!.date | date: 'd' }}\n        @if (day?.isToday) {\n          <span class=\"today\"></span>\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n", styles: [":host{width:100%}:host .header{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:12px}:host .header monkey-icon-button{max-width:32px;background:transparent}:host .header monkey-icon-button.previous{position:absolute;left:0}:host .header monkey-icon-button.next{position:absolute;right:0}:host .week-labels{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:700;font-size:.9rem;margin-bottom:4px;gap:12px 0}:host .week-labels .day{height:24px;border:none;background:transparent;text-align:center;display:flex;align-items:center;justify-content:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px}:host .dates{display:grid;grid-template-columns:repeat(7,1fr);gap:12px 0}:host .dates .day{height:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.14px;position:relative;border:1px solid transparent;-webkit-user-select:none;user-select:none}:host .dates .day .today{position:absolute;width:60%;bottom:1px;font-size:36px;letter-spacing:1.48!important}:host .dates .day .today:not(.selected){border-bottom:2px solid var(--mecx-color-theme-main)}:host .dates .day.disabled{color:var(--mecx-color-gray-400);font-weight:400;cursor:not-allowed}:host .dates .day.selected{background-color:var(--mecx-color-theme-main)!important;color:var(--mecx-color-white)!important}:host .dates .day.in-range{background-color:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}:host .dates .day.in-range-temporary{background-color:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}:host .dates .day.first,:host .dates .day.last{background-color:var(--mecx-color-theme-main);color:var(--mecx-color-white)}:host .dates .day.first{border-top-left-radius:8px;border-bottom-left-radius:8px}:host .dates .day.last,:host .dates .day.temporary-last{border-top-right-radius:8px;border-bottom-right-radius:8px}:host .dates .day:hover:not(.disabled,.in-range):before{content:\"\";border:1px solid var(--mecx-color-theme-main);border-radius:8px;height:100%;width:100%;position:absolute}:host .dates .day:hover:not(.disabled,.in-range).selected{background:var(--mecx-color-gray-100);color:var(--mecx-color-theme-main)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { month: [{
+                type: Input,
+                args: [{ required: true }]
+            }], year: [{
+                type: Input,
+                args: [{ required: true }]
+            }], startDate: [{
+                type: Input
+            }], endDate: [{
+                type: Input
+            }], hidePrevious: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideNext: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], onNavigate: [{
+                type: Output
+            }], onDate: [{
+                type: Output
+            }], id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyDateRangeQuickActionsComponent {
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.onChange = new EventEmitter();
+        this._uid = inject(IdGenerator).getId('monkey-date-range-month-quick-actions-');
+        this.selectedAction = '';
+        this.actions = getEnumKeys(QuickActionsEnum);
+        this.i18nDictionary = inject(MonkeyDictionaryService).get('DATE-RANGE');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    onHandleAction({ key, value }) {
+        this.selectedAction = key;
+        this.onChange.next(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDateRangeQuickActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyDateRangeQuickActionsComponent, isStandalone: true, selector: "monkey-date-range-quick-actions", inputs: { id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "quick-actions" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n  @for (item of actions; track item.key) {\n    <div\n      class=\"item\"\n      [class.selected]=\"item.key === selectedAction\"\n      (click)=\"onHandleAction(item)\"\n      [attr.tabindex]=\"$index\"\n    >\n      {{ i18n?.['QUICK-ACTIONS']?.[item.key] }}\n    </div>\n  }\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:column;padding:24px 8px 12px 12px;gap:4px}:host .item{color:var(--mecx-color-gray-900);font-size:13px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.26px;padding:4px 12px;cursor:pointer;display:flex;align-items:center;-webkit-user-select:none;user-select:none;border-radius:4px}:host .item.selected{border-radius:4px;background:var(--mecx-color-gray-100)}:host .item:hover{border-radius:4px;background:var(--mecx-color-gray-100)}:host .item:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDateRangeQuickActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-date-range-quick-actions', standalone: true, imports: [CommonModule], host: {
+                        'data-testid': 'quick-actions',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n  @for (item of actions; track item.key) {\n    <div\n      class=\"item\"\n      [class.selected]=\"item.key === selectedAction\"\n      (click)=\"onHandleAction(item)\"\n      [attr.tabindex]=\"$index\"\n    >\n      {{ i18n?.['QUICK-ACTIONS']?.[item.key] }}\n    </div>\n  }\n</ng-container>\n", styles: [":host{display:inline-flex;flex-direction:column;padding:24px 8px 12px 12px;gap:4px}:host .item{color:var(--mecx-color-gray-900);font-size:13px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.26px;padding:4px 12px;cursor:pointer;display:flex;align-items:center;-webkit-user-select:none;user-select:none;border-radius:4px}:host .item.selected{border-radius:4px;background:var(--mecx-color-gray-100)}:host .item:hover{border-radius:4px;background:var(--mecx-color-gray-100)}:host .item:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { onChange: [{
+                type: Output
+            }], id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyDateRangeComponent {
+    set startDate(val) {
+        this.handledStartDate = val;
+    }
+    set endDate(val) {
+        this.handledEndDate = val;
+    }
+    set minDate(val) {
+        this.handledMinDate = parseStringDate(val);
+    }
+    set maxDate(val) {
+        this.handledMaxDate = parseStringDate(val);
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.onCancel = new EventEmitter();
+        this.onDate = new EventEmitter();
+        this._uid = inject(IdGenerator).getId('monkey-date-range-');
+        this._screenWidth = window.innerWidth;
+        this._allowChangeFastAction = true;
+        this._allowChangeSecondCalendar = true;
+        this._today = new Date();
+        this.i18nDictionary = inject(MonkeyDictionaryService).get('DATE-RANGE');
+        this.isInvalidInterval = false;
+        this.handledMinDate = getDefaultdates().minDate;
+        this.handledMaxDate = getDefaultdates().maxDate;
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    handleInitialValues() {
+        const calendars = buildCalendars(this.handledStartDate || new Date());
+        this.firstCalendar = calendars.firstCalendar;
+        this.secondCalendar = calendars.secondCalendar;
+    }
+    handleProperties() {
+        if (this._screenWidth < 950) {
+            if (this._allowChangeFastAction) {
+                this.hideQuickAction = true;
+                this.allowFastActionOnHeader = false;
+            }
+            if (this._allowChangeSecondCalendar) {
+                this.hideSecondCalendar = true;
+            }
+        }
+        else {
+            if (this._allowChangeFastAction) {
+                this.hideQuickAction = false;
+                this.allowFastActionOnHeader = false;
+            }
+            if (this._allowChangeSecondCalendar) {
+                this.hideSecondCalendar = false;
+            }
+        }
+    }
+    handleInputChange(event, isStart) {
+        const input = event.target;
+        const { value } = input;
+        const [year] = value.split('-');
+        if (`${Number(year)}`.length < 4)
+            return;
+        if (!input.checkValidity()) {
+            event.preventDefault();
+            input.value = '';
+            this.isInvalidInterval = true;
+            return;
+        }
+        this.isInvalidInterval = false;
+        if (isStart) {
+            this.handledStartDate = value;
+        }
+        else {
+            this.handledEndDate = value;
+        }
+        if (this.hideActions) {
+            this.onSubmit();
+        }
+    }
+    onResize(event) {
+        this._screenWidth = event.target.innerWidth;
+        this.handleProperties();
+    }
+    ngOnInit() {
+        if (this.hideQuickAction) {
+            this._allowChangeFastAction = false;
+        }
+        if (this.hideSecondCalendar) {
+            this._allowChangeSecondCalendar = false;
+        }
+        if (this.allowFastActionOnHeader) {
+            this._allowChangeFastAction = false;
+            this.hideQuickAction = true;
+        }
+        this.handleInitialValues();
+        this.handleProperties();
+    }
+    onHandleDate({ startDate, endDate }) {
+        this.handledStartDate = startDate;
+        this.handledEndDate = endDate;
+        if (this.hideActions) {
+            this.onSubmit();
+        }
+    }
+    onSubmit() {
+        this.onDate.next({
+            startDate: this.handledStartDate ?? '',
+            endDate: this.handledEndDate ?? ''
+        });
+    }
+    onHandleQuickAction(event) {
+        const isBackward = event < 0;
+        const days = Math.abs(event);
+        if (isBackward) {
+            const baseDate = parseStringDate(this.handledEndDate || this.handledStartDate || this._today);
+            let startDate = subDays(baseDate, days);
+            if (isBefore(startDate, this.handledMinDate)) {
+                startDate = this.handledMinDate;
+            }
+            this.handledStartDate = parseStringDate(startDate);
+            this.handledEndDate = parseStringDate(baseDate);
+        }
+        else {
+            const baseDate = parseStringDate(this.handledStartDate || this.handledEndDate || this._today);
+            let endDate = addDays(baseDate, days);
+            if (isAfter(endDate, this.handledMaxDate)) {
+                endDate = this.handledMaxDate;
+            }
+            this.handledStartDate = parseStringDate(baseDate);
+            this.handledEndDate = parseStringDate(endDate);
+        }
+    }
+    onChangeInputStartDate(event) {
+        this.handleInputChange(event, true);
+    }
+    onChangeInputEndDate(event) {
+        this.handleInputChange(event, false);
+    }
+    onDataChange(event, isStart) {
+        if (isStart) {
+            this.handledStartDate = event;
+            this.handledEndDate = '';
+        }
+        else {
+            this.handledEndDate = event;
+        }
+        if (this.hideActions) {
+            this.onSubmit();
+        }
+    }
+    onHandleNavigate(action) {
+        if (!action)
+            return;
+        const date = new Date(this.firstCalendar.year, this.firstCalendar.month, 1);
+        const calendars = buildCalendars(date, action);
+        this.firstCalendar = calendars.firstCalendar;
+        this.secondCalendar = calendars.secondCalendar;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyDateRangeComponent, isStandalone: true, selector: "monkey-date-range", inputs: { startDate: "startDate", endDate: "endDate", hideQuickAction: ["hideQuickAction", "hideQuickAction", booleanAttribute], hideHeader: ["hideHeader", "hideHeader", booleanAttribute], hideActions: ["hideActions", "hideActions", booleanAttribute], hideSecondCalendar: ["hideSecondCalendar", "hideSecondCalendar", booleanAttribute], allowFastActionOnHeader: ["allowFastActionOnHeader", "allowFastActionOnHeader", booleanAttribute], minDate: "minDate", maxDate: "maxDate", id: "id" }, outputs: { onCancel: "onCancel", onDate: "onDate" }, host: { attributes: { "data-testid": "monkey-date-range" }, listeners: { "window:resize": "onResize($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n  <div class=\"container-group\">\n    @if (!hideQuickAction) {\n      <div class=\"quick-actions\">\n        <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n        </monkey-date-range-quick-actions>\n      </div>\n    }\n\n    <div class=\"container\">\n      @if (!hideHeader) {\n        <div class=\"header\" [class.no-quick-action]=\"hideQuickAction\">\n          @if (allowFastActionOnHeader) {\n            <div class=\"quick-actions\">\n              <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n              </monkey-date-range-quick-actions>\n            </div>\n          } @else {\n            <div class=\"inputs\">\n              <monkey-form-field hideAction enableClear size=\"sm\">\n                <monkey-label>{{ i18n?.['START-DATE'] }}</monkey-label>\n                <input\n                  type=\"date\"\n                  monkey-input\n                  id=\"startDate\"\n                  [(ngModel)]=\"handledStartDate\"\n                  (ngModelChange)=\"onDataChange($event, true)\"\n                  [min]=\"handledMinDate\"\n                  [max]=\"handledEndDate ? handledEndDate : handledMaxDate\"\n                  (change)=\"onChangeInputStartDate($event)\"\n                />\n              </monkey-form-field>\n              <monkey-form-field hideAction enableClear size=\"sm\">\n                <monkey-label>{{ i18n?.['END-DATE'] }}</monkey-label>\n                <input\n                  type=\"date\"\n                  monkey-input\n                  id=\"endDate\"\n                  [(ngModel)]=\"handledEndDate\"\n                  (ngModelChange)=\"onDataChange($event, false)\"\n                  [min]=\"handledStartDate ? handledStartDate : ''\"\n                  [max]=\"handledMaxDate\"\n                  (change)=\"onChangeInputEndDate($event)\"\n                />\n              </monkey-form-field>\n            </div>\n            @if (isInvalidInterval) {\n              <monkey-error>{{ i18n?.['INVALID'] }}</monkey-error>\n            }\n          }\n        </div>\n      }\n\n      <div class=\"body\">\n        <div class=\"calendars\">\n          <monkey-date-range-month\n            [month]=\"firstCalendar.month\"\n            [year]=\"firstCalendar.year\"\n            [startDate]=\"handledStartDate\"\n            [endDate]=\"handledEndDate\"\n            (onDate)=\"onHandleDate($event)\"\n            (onNavigate)=\"onHandleNavigate($event)\"\n            [hideNext]=\"!hideSecondCalendar\"\n            [minDate]=\"handledMinDate\"\n            [maxDate]=\"handledMaxDate\"\n          >\n          </monkey-date-range-month>\n\n          @if (!hideSecondCalendar) {\n            <monkey-date-range-month\n              [month]=\"secondCalendar.month\"\n              [year]=\"secondCalendar.year\"\n              [startDate]=\"handledStartDate\"\n              [endDate]=\"handledEndDate\"\n              (onDate)=\"onHandleDate($event)\"\n              (onNavigate)=\"onHandleNavigate($event)\"\n              hidePrevious\n              [minDate]=\"handledMinDate\"\n              [maxDate]=\"handledMaxDate\"\n            >\n            </monkey-date-range-month>\n          }\n        </div>\n      </div>\n\n      @if (!hideActions) {\n        <div class=\"actions\">\n          <monkey-button size=\"md\" type=\"secondary\" (click)=\"onCancel.next(null)\">\n            {{ i18n?.ACTIONS?.CANCEL }}\n          </monkey-button>\n          <monkey-button\n            size=\"md\"\n            (click)=\"onSubmit()\"\n            [disabled]=\"!this.handledStartDate || !this.handledEndDate\"\n          >\n            {{ i18n?.ACTIONS?.APPLY }}\n          </monkey-button>\n        </div>\n      }\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;border:2px solid var(--mecx-color-gray-200);border-radius:16px}:host .container-group{width:100%;display:inline-flex}:host .container-group .quick-actions{width:100%;max-width:172px;border-top-left-radius:16px;border-bottom-left-radius:16px;border-right:2px solid var(--mecx-color-gray-200);background:var(--mecx-color-white)}:host .container-group .container{width:100%;display:inline-flex;flex-direction:column}:host .header{padding:16px 24px;border-radius:1px 16px 1px 1px;border-bottom:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50)}:host .header .quick-actions{max-width:unset;border:unset}:host .header .quick-actions monkey-date-range-quick-actions{flex-flow:row wrap;padding:unset;justify-content:space-between;background:var(--mecx-color-gray-50)}:host .header.no-quick-action{border-top-left-radius:16px}:host .header .inputs{max-width:400px;display:flex;gap:16px}:host .header monkey-error{margin-top:2px}:host .body{padding:16px 24px}:host .body .calendars{display:inline-flex;width:100%;gap:48px}:host .actions{border-top:1px solid var(--mecx-color-gray-200);padding:16px 24px;display:flex;justify-content:flex-end;align-items:center;gap:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MonkeyInputModule }, { kind: "directive", type: MonkeyInputDirective, selector: "input[monkey-input],textarea[monkey-input]", inputs: ["name", "disabled", "id", "required", "type", "min", "max", "percent"], exportAs: ["monkeyInput"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size"], exportAs: ["monkeyFormField"] }, { kind: "ngmodule", type: MonkeyDirectivesModule }, { kind: "directive", type: MonkeyError, selector: "monkey-error" }, { kind: "directive", type: MonkeyLabel, selector: "monkey-label" }, { kind: "component", type: MonkeyButtonComponent, selector: "monkey-button", inputs: ["disabled", "size", "type", "id"] }, { kind: "component", type: MonkeyDateRangeMonthComponent, selector: "monkey-date-range-month", inputs: ["month", "year", "startDate", "endDate", "hidePrevious", "hideNext", "minDate", "maxDate", "id"], outputs: ["onNavigate", "onDate"] }, { kind: "component", type: MonkeyDateRangeQuickActionsComponent, selector: "monkey-date-range-quick-actions", inputs: ["id"], outputs: ["onChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDateRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-date-range', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MonkeyInputModule,
+                        MonkeyFormFieldModule,
+                        MonkeyDirectivesModule,
+                        MonkeyButtonComponent,
+                        MonkeyDateRangeMonthComponent,
+                        MonkeyDateRangeQuickActionsComponent
+                    ], host: {
+                        'data-testid': 'monkey-date-range',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<ng-container *ngIf=\"i18nDictionary | async as i18n\">\n  <div class=\"container-group\">\n    @if (!hideQuickAction) {\n      <div class=\"quick-actions\">\n        <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n        </monkey-date-range-quick-actions>\n      </div>\n    }\n\n    <div class=\"container\">\n      @if (!hideHeader) {\n        <div class=\"header\" [class.no-quick-action]=\"hideQuickAction\">\n          @if (allowFastActionOnHeader) {\n            <div class=\"quick-actions\">\n              <monkey-date-range-quick-actions (onChange)=\"onHandleQuickAction($event)\">\n              </monkey-date-range-quick-actions>\n            </div>\n          } @else {\n            <div class=\"inputs\">\n              <monkey-form-field hideAction enableClear size=\"sm\">\n                <monkey-label>{{ i18n?.['START-DATE'] }}</monkey-label>\n                <input\n                  type=\"date\"\n                  monkey-input\n                  id=\"startDate\"\n                  [(ngModel)]=\"handledStartDate\"\n                  (ngModelChange)=\"onDataChange($event, true)\"\n                  [min]=\"handledMinDate\"\n                  [max]=\"handledEndDate ? handledEndDate : handledMaxDate\"\n                  (change)=\"onChangeInputStartDate($event)\"\n                />\n              </monkey-form-field>\n              <monkey-form-field hideAction enableClear size=\"sm\">\n                <monkey-label>{{ i18n?.['END-DATE'] }}</monkey-label>\n                <input\n                  type=\"date\"\n                  monkey-input\n                  id=\"endDate\"\n                  [(ngModel)]=\"handledEndDate\"\n                  (ngModelChange)=\"onDataChange($event, false)\"\n                  [min]=\"handledStartDate ? handledStartDate : ''\"\n                  [max]=\"handledMaxDate\"\n                  (change)=\"onChangeInputEndDate($event)\"\n                />\n              </monkey-form-field>\n            </div>\n            @if (isInvalidInterval) {\n              <monkey-error>{{ i18n?.['INVALID'] }}</monkey-error>\n            }\n          }\n        </div>\n      }\n\n      <div class=\"body\">\n        <div class=\"calendars\">\n          <monkey-date-range-month\n            [month]=\"firstCalendar.month\"\n            [year]=\"firstCalendar.year\"\n            [startDate]=\"handledStartDate\"\n            [endDate]=\"handledEndDate\"\n            (onDate)=\"onHandleDate($event)\"\n            (onNavigate)=\"onHandleNavigate($event)\"\n            [hideNext]=\"!hideSecondCalendar\"\n            [minDate]=\"handledMinDate\"\n            [maxDate]=\"handledMaxDate\"\n          >\n          </monkey-date-range-month>\n\n          @if (!hideSecondCalendar) {\n            <monkey-date-range-month\n              [month]=\"secondCalendar.month\"\n              [year]=\"secondCalendar.year\"\n              [startDate]=\"handledStartDate\"\n              [endDate]=\"handledEndDate\"\n              (onDate)=\"onHandleDate($event)\"\n              (onNavigate)=\"onHandleNavigate($event)\"\n              hidePrevious\n              [minDate]=\"handledMinDate\"\n              [maxDate]=\"handledMaxDate\"\n            >\n            </monkey-date-range-month>\n          }\n        </div>\n      </div>\n\n      @if (!hideActions) {\n        <div class=\"actions\">\n          <monkey-button size=\"md\" type=\"secondary\" (click)=\"onCancel.next(null)\">\n            {{ i18n?.ACTIONS?.CANCEL }}\n          </monkey-button>\n          <monkey-button\n            size=\"md\"\n            (click)=\"onSubmit()\"\n            [disabled]=\"!this.handledStartDate || !this.handledEndDate\"\n          >\n            {{ i18n?.ACTIONS?.APPLY }}\n          </monkey-button>\n        </div>\n      }\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;border:2px solid var(--mecx-color-gray-200);border-radius:16px}:host .container-group{width:100%;display:inline-flex}:host .container-group .quick-actions{width:100%;max-width:172px;border-top-left-radius:16px;border-bottom-left-radius:16px;border-right:2px solid var(--mecx-color-gray-200);background:var(--mecx-color-white)}:host .container-group .container{width:100%;display:inline-flex;flex-direction:column}:host .header{padding:16px 24px;border-radius:1px 16px 1px 1px;border-bottom:1px solid var(--mecx-color-gray-200);background:var(--mecx-color-gray-50)}:host .header .quick-actions{max-width:unset;border:unset}:host .header .quick-actions monkey-date-range-quick-actions{flex-flow:row wrap;padding:unset;justify-content:space-between;background:var(--mecx-color-gray-50)}:host .header.no-quick-action{border-top-left-radius:16px}:host .header .inputs{max-width:400px;display:flex;gap:16px}:host .header monkey-error{margin-top:2px}:host .body{padding:16px 24px}:host .body .calendars{display:inline-flex;width:100%;gap:48px}:host .actions{border-top:1px solid var(--mecx-color-gray-200);padding:16px 24px;display:flex;justify-content:flex-end;align-items:center;gap:16px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { startDate: [{
+                type: Input
+            }], endDate: [{
+                type: Input
+            }], hideQuickAction: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideHeader: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideActions: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideSecondCalendar: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], allowFastActionOnHeader: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], onCancel: [{
+                type: Output
+            }], onDate: [{
+                type: Output
+            }], id: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+/** ************************
+ * 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:var(--mecx-color-gray-200)}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:var(--mecx-color-gray-200)}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
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyInputCodeComponent {
+    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();
+        }
+    }
+    set value(value) {
+        if (this._value !== value && value !== undefined) {
+            this._value = value;
+            this._onChange(value);
+            this._onTouched();
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    constructor(formField) {
+        this.formField = formField;
+        this.stateChanges = new Subject();
+        this.type = 'input-code';
+        this.currency = false;
+        this.percent = false;
+        this.id = inject(IdGenerator).getId('monkey-input-code-');
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        this._value = null;
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.focused = false;
+        this.length = input(6);
+        this.inputType = input('numeric');
+        this.inputIndices = computed(() => {
+            return Array.from({ length: this.length() }, (_, i) => {
+                return '';
+            });
+        });
+        this._disabled = false;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        if (this.formField) {
+            this.formField.hideAction = true;
+        }
+    }
+    ngAfterViewInit() {
+        if (this.formField) {
+            const input = this.formField.elementRef.nativeElement.querySelector('.mecx-form-field-body');
+            const height = input.offsetHeight > 40 ? input.offsetHeight : 40;
+            this.inputs.forEach((inputEl) => {
+                inputEl.nativeElement.style.height = `${height}px`;
+                inputEl.nativeElement.style.width = `${height}px`;
+            });
+        }
+    }
+    _onFocus() {
+        if (!this.disabled) {
+            this.focused = true;
+            this._onTouched();
+            this.stateChanges.next();
+        }
+    }
+    propagateCode() {
+        const code = this.inputIndices().join('');
+        this.writeValue(code);
+    }
+    focusNextInput(input) {
+        const next = input.nextElementSibling;
+        next?.focus();
+    }
+    focusPreviousInput(input) {
+        const previous = input.previousElementSibling;
+        previous?.focus();
+    }
+    setFullInputValue(value) {
+        const chars = value?.slice(0, this.length()).split('') || '';
+        chars.forEach((digit, index) => {
+            this.inputIndices()[index] = digit;
+        });
+    }
+    isInvalid() {
+        return this.formField.showInvalid;
+    }
+    onContainerClick() {
+        if (!this._value) {
+            this.inputs.first.nativeElement.focus();
+        }
+    }
+    onKeyDown(event, index) {
+        const input = event.target;
+        this.inputIndices()[index] = input.value;
+        const { key } = event;
+        const keys = {
+            Backspace: () => {
+                if (input.value === '') {
+                    this.focusPreviousInput(input);
+                }
+            },
+            Delete: () => {
+                if (input.value === '') {
+                    this.focusNextInput(input);
+                }
+            },
+            ArrowLeft: () => {
+                if (index > 0) {
+                    this.focusPreviousInput(input);
+                    event.preventDefault();
+                }
+            },
+            ArrowUp: () => {
+                if (index > 0) {
+                    this.focusPreviousInput(input);
+                    event.preventDefault();
+                }
+            },
+            ArrowRight: () => {
+                if (index < this.length()) {
+                    this.focusNextInput(input);
+                    event.preventDefault();
+                }
+            },
+            ArrowDown: () => {
+                if (index < this.length()) {
+                    this.focusNextInput(input);
+                    event.preventDefault();
+                }
+            }
+        };
+        if (keys[key]) {
+            keys[key]();
+        }
+    }
+    onInput(event, index) {
+        const input = event.target;
+        const { value } = input;
+        if (value.length > 1) {
+            this.setFullInputValue(value);
+            input.value = value.charAt(0);
+        }
+        else {
+            input.value = value;
+        }
+        this.inputIndices()[index] = input.value;
+        if (input.value && index < this.length()) {
+            this.focusNextInput(input);
+        }
+        this.propagateCode();
+    }
+    onPaste(event) {
+        event.preventDefault();
+        const pastedData = event.clipboardData?.getData('text').trim() ?? '';
+        const chars = pastedData.slice(0, this.length()).split('');
+        chars.forEach((digit, index) => {
+            this.inputIndices()[index] = digit;
+        });
+        if (this.inputs.length > chars.length) {
+            this.inputs.get(chars.length)?.nativeElement.focus();
+        }
+        if (this.inputs.length <= chars.length) {
+            this.onBlur();
+        }
+        this.propagateCode();
+    }
+    onBlur() {
+        this.focused = false;
+        this.stateChanges.next();
+    }
+    onFocus(event) {
+        const input = event.target;
+        input.select();
+        this._onFocus();
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputCodeComponent, deps: [{ token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyInputCodeComponent, isStandalone: true, selector: "monkey-input-code", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, inputType: { classPropertyName: "inputType", publicName: "inputType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-input-code" }, properties: { "attr.id": "id", "id": "id" } }, providers: [
+            // eslint-disable-next-line no-use-before-define
+            { provide: MonkeyFormFieldControl, useExisting: MonkeyInputCodeComponent }
+        ], viewQueries: [{ propertyName: "inputs", predicate: ["codeInput"], descendants: true }], ngImport: i0, template: "<div class=\"monkey-input-code\">\n  @for (idx of inputIndices(); track $index; let i = $index) {\n    <input\n      #codeInput\n      class=\"focus\"\n      autocomplete=\"one-time-code\"\n      [attr.type]=\"inputType()\"\n      [disabled]=\"_disabled\"\n      [attr.maxlength]=\"1\"\n      [class.invalid]=\"isInvalid()\"\n      [(ngModel)]=\"inputIndices()[i]\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event, i)\"\n      (keydown)=\"onKeyDown($event, i)\"\n      (paste)=\"onPaste($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n</div>\n", styles: [".monkey-input-code{display:flex;gap:12px}.monkey-input-code input{box-sizing:border-box;border-radius:4px;border:2px solid var(--mecx-color-gray-400);color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;letter-spacing:.14px;line-height:24px;text-align:center}.monkey-input-code input:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:2px}.monkey-input-code input.invalid{border:2px solid var(--mecx-color-error-700)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputCodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-input-code', standalone: true, imports: [CommonModule, FormsModule], host: {
+                        'data-testid': 'monkey-input-code',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, providers: [
+                        // eslint-disable-next-line no-use-before-define
+                        { provide: MonkeyFormFieldControl, useExisting: MonkeyInputCodeComponent }
+                    ], template: "<div class=\"monkey-input-code\">\n  @for (idx of inputIndices(); track $index; let i = $index) {\n    <input\n      #codeInput\n      class=\"focus\"\n      autocomplete=\"one-time-code\"\n      [attr.type]=\"inputType()\"\n      [disabled]=\"_disabled\"\n      [attr.maxlength]=\"1\"\n      [class.invalid]=\"isInvalid()\"\n      [(ngModel)]=\"inputIndices()[i]\"\n      (focus)=\"onFocus($event)\"\n      (input)=\"onInput($event, i)\"\n      (keydown)=\"onKeyDown($event, i)\"\n      (paste)=\"onPaste($event)\"\n      (blur)=\"onBlur()\"\n    />\n  }\n</div>\n", styles: [".monkey-input-code{display:flex;gap:12px}.monkey-input-code input{box-sizing:border-box;border-radius:4px;border:2px solid var(--mecx-color-gray-400);color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;letter-spacing:.14px;line-height:24px;text-align:center}.monkey-input-code input:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:2px}.monkey-input-code input.invalid{border:2px solid var(--mecx-color-error-700)}\n"] }]
+        }], ctorParameters: () => [{ type: MonkeyFormFieldComponent, decorators: [{
                     type: Optional
-                }] }] });
+                }] }], propDecorators: { disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }], inputs: [{
+                type: ViewChildren,
+                args: ['codeInput']
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyInputUploadComponent {
+    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 && value !== undefined) {
+            this._value = value;
+            this._onChange(value);
+            this._onTouched(value);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    constructor() {
+        this.progress = 0;
+        this.placeholder = '';
+        this.maxSizeBytes = 5 * 1024 * 1024;
+        this.allowedExtensions = ['.jpg', '.jpeg', '.png', '.pdf', '.txt', '.xls', '.xlsx'];
+        this.loading = false;
+        this.tabIndex = 0;
+        this._disabled = false;
+        this._value = null;
+        this.onChange = new EventEmitter();
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.idGenerator = inject(IdGenerator);
+        this.id = this.idGenerator.getId('monkey-input-upload-');
+        this.focused = false;
+        this.type = '';
+        this.currency = false;
+        this.percent = false;
+        this.stateChanges = new Subject();
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    validateFileSize(file) {
+        return file.size <= this.maxSizeBytes;
+    }
+    validateFileExtension(file) {
+        if (!this.allowedExtensions || !this.allowedExtensions.length) {
+            return true;
+        }
+        const fileExtension = getFileExtension(file.name);
+        const allowedExts = this.allowedExtensions.map((ext) => {
+            return ext.trim().replace('.', '').toLowerCase();
+        });
+        return allowedExts.includes(fileExtension);
+    }
+    onContainerClick(event) {
+        if (!this.loading) {
+            this.fileInput.nativeElement.click();
+        }
+    }
+    _onFocus() {
+        if (!this.disabled) {
+            this.focused = true;
+            this._onTouched();
+            this.stateChanges.next();
+        }
+    }
+    _onBlur() {
+        this.focused = false;
+        this.stateChanges.next();
+    }
+    ngAfterContentInit() { }
+    ngOnChanges(changes) { }
+    ngOnDestroy() { }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        if (this.fileInput) {
+            this.fileInput.nativeElement.disabled = isDisabled;
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    reset() {
+        if (this.fileInput) {
+            this.fileInput.nativeElement.value = '';
+        }
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        this._onTouched();
+        if (!input.files?.length) {
+            return;
+        }
+        const file = input.files.item(0);
+        if (this.fileInput) {
+            this.fileInput.nativeElement.value = '';
+        }
+        if (!this.validateFileSize(file)) {
+            this.ngControl?.control?.setErrors({
+                maxFileSize: true,
+                sizeAllowed: formatFileSize(this.maxSizeBytes)
+            });
+            this._onBlur();
+            this.reset();
+            return;
+        }
+        if (!this.validateFileExtension(file)) {
+            this.ngControl?.control?.setErrors({
+                fileExtension: true,
+                extensionAllowed: this.allowedExtensions.join(', ')
+            });
+            this._onBlur();
+            this.reset();
+            return;
+        }
+        this._onBlur();
+        if (this.onChange.observed) {
+            this.onChange.emit({ component: this, file: file });
+        }
+        else {
+            this.value = {
+                fileName: file.name,
+                file
+            };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyInputUploadComponent, isStandalone: true, selector: "monkey-input-upload", inputs: { progress: "progress", placeholder: "placeholder", maxSizeBytes: "maxSizeBytes", allowedExtensions: "allowedExtensions", loading: ["loading", "loading", booleanAttribute], tabIndex: "tabIndex", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-input-upload'", "class.mecx-input-upload-disabled": "_disabled", "class.mecx-input-upload-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-input-upload" }, providers: [
+            // eslint-disable-next-line no-use-before-define
+            { provide: MonkeyFormFieldControl, useExisting: MonkeyInputUploadComponent }
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div class="mecx-input-upload-value" [class.has-value]="value">
+      {{ value?.fileName || placeholder }}
+    </div>
+    <input
+      (change)="onFileSelected($event)"
+      type="file"
+      class="file-input"
+      #fileInput
+      [accept]="allowedExtensions.join(',')"
+    />
+    @if (loading) {
+      <div class="progress">
+        <div class="progress-bar" [style.width.%]="progress"></div>
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0;cursor:pointer}:host .progress{position:absolute;left:0;bottom:0;right:0;height:2px;background-color:var(--mecx-color-gray-300);width:100%}:host .progress .progress-bar{background-color:var(--mecx-color-success-main);height:100%;transition:width .2s}:host:focus-visible,:host:focus{outline:none}:host .mecx-input-upload-value{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}:host .mecx-input-upload-value.has-value{color:var(--mecx-color-gray-900)}:host.mecx-input-upload-disabled .mecx-input-upload-value{color:var(--mecx-color-gray-400)!important}:host .file-input{display:none}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-input-upload', standalone: true, imports: [], template: `
+    <div class="mecx-input-upload-value" [class.has-value]="value">
+      {{ value?.fileName || placeholder }}
+    </div>
+    <input
+      (change)="onFileSelected($event)"
+      type="file"
+      class="file-input"
+      #fileInput
+      [accept]="allowedExtensions.join(',')"
+    />
+    @if (loading) {
+      <div class="progress">
+        <div class="progress-bar" [style.width.%]="progress"></div>
+      </div>
+    }
+  `, providers: [
+                        // eslint-disable-next-line no-use-before-define
+                        { provide: MonkeyFormFieldControl, useExisting: MonkeyInputUploadComponent }
+                    ], host: {
+                        '[attr.data-testid]': "'monkey-input-upload'",
+                        class: 'mecx-input-upload',
+                        '[class.mecx-input-upload-disabled]': '_disabled',
+                        '[class.mecx-input-upload-focused]': 'focused',
+                        '[attr.id]': 'id',
+                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
+                        '(focus)': '_onFocus()',
+                        '(blur)': '_onBlur()'
+                    }, styles: [":host{display:inline-flex;width:100%;min-width:0;cursor:pointer}:host .progress{position:absolute;left:0;bottom:0;right:0;height:2px;background-color:var(--mecx-color-gray-300);width:100%}:host .progress .progress-bar{background-color:var(--mecx-color-success-main);height:100%;transition:width .2s}:host:focus-visible,:host:focus{outline:none}:host .mecx-input-upload-value{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px}:host .mecx-input-upload-value.has-value{color:var(--mecx-color-gray-900)}:host.mecx-input-upload-disabled .mecx-input-upload-value{color:var(--mecx-color-gray-400)!important}:host .file-input{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }], progress: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], maxSizeBytes: [{
+                type: Input
+            }], allowedExtensions: [{
+                type: Input
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], tabIndex: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }] } });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyModalTitleDirective {
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyModalActionsDirective {
     constructor() {
-        this.id = inject(IdGenerator).getId('monkey-modal-title-');
+        this.mkAlign = 'end';
+        this.id = inject(IdGenerator).getId('monkey-modal-actions-');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalTitleDirective, selector: "monkey-modal-title, [monkey-modal-title]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-title" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: { mkAlign: "mkAlign" }, host: { properties: { "class": "'mecx-modal-actions align-'+mkAlign", "attr.id": "id || null" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalActionsDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'monkey-modal-title, [monkey-modal-title]',
+                    selector: 'monkey-modal-actions, [monkey-modal-actions]',
                     host: {
-                        class: 'mecx-modal-title',
+                        '[class]': `'mecx-modal-actions align-'+mkAlign`,
+                        '[attr.id]': 'id || null'
+                    }
+                }]
+        }], propDecorators: { mkAlign: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyModalContentDirective {
+    constructor() {
+        this.id = inject(IdGenerator).getId('monkey-modal-content-');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-content" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-modal-content, [monkey-modal-content]',
+                    host: {
+                        class: 'mecx-modal-content',
                         '[attr.id]': 'id || null'
                     }
                 }]
@@ -1792,19 +3267,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyModalContentDirective {
+class MonkeyModalTitleDirective {
     constructor() {
-        this.id = inject(IdGenerator).getId('monkey-modal-content-');
+        this.id = inject(IdGenerator).getId('monkey-modal-title-');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-content" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalTitleDirective, selector: "monkey-modal-title, [monkey-modal-title]", host: { properties: { "attr.id": "id || null" }, classAttribute: "mecx-modal-title" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalTitleDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'monkey-modal-content, [monkey-modal-content]',
+                    selector: 'monkey-modal-title, [monkey-modal-title]',
                     host: {
-                        class: 'mecx-modal-content',
+                        class: 'mecx-modal-title',
                         '[attr.id]': 'id || null'
                     }
                 }]
@@ -1815,27 +3290,205 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyModalActionsDirective {
-    constructor() {
-        this.mkAlign = 'end';
-        this.id = inject(IdGenerator).getId('monkey-modal-actions-');
+class MonkeyModalConfig {
+    constructor() {
+        this.panelClass = '';
+        this.hasBackdrop = true;
+        this.backdropClass = 'mecx-modal-overlay';
+        this.disableClose = false;
+        this.disableBackdropClose = false;
+        this.width = '';
+        this.height = '';
+        this.position = 'center-center';
+        this.data = null;
+        this.closeOnNavigation = true;
+    }
+}
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyModalRef {
+    constructor(overlayRef, config) {
+        this.overlayRef = overlayRef;
+        this.config = config;
+        this.closed = new Subject();
+        this.id = config.id;
+        this.icon = config.icon;
+        this.disableClose = config.disableClose;
+        this.disableBackdropClose = config.disableBackdropClose;
+        this.closeOnNavigation = config.closeOnNavigation;
+        this.backdropClick = overlayRef.backdropClick();
+        this.keydownEvents = overlayRef.keydownEvents();
+        this.outsidePointerEvents = overlayRef.outsidePointerEvents();
+        if (!this.disableBackdropClose) {
+            this.keydownEvents.subscribe((event) => {
+                if (event.key === 'Escape' && !this.disableClose && !hasModifierKey(event)) {
+                    event.preventDefault();
+                    this.close(undefined);
+                }
+            });
+            this.backdropClick.subscribe(() => {
+                if (!this.disableClose) {
+                    this.close(undefined);
+                }
+            });
+        }
+    }
+    close(result) {
+        if (this.componentInstance) {
+            const closedSubject = this.closed;
+            this.overlayRef.dispose();
+            closedSubject.next(result);
+            closedSubject.complete();
+            // eslint-disable-next-line no-multi-assign
+            this.componentInstance = null;
+        }
+    }
+    afterClosed() {
+        return this.closed;
+    }
+}
+
+class MonkeyModalComponent {
+    constructor(_elementRef, overlayRef, modalRef) {
+        this._elementRef = _elementRef;
+        this.overlayRef = overlayRef;
+        this.modalRef = modalRef;
+        this._navigationSubscription = null;
+        this._router = inject(Router);
+        // not to do
+    }
+    ngAfterViewInit() {
+        if (this._elementRef) {
+            this._elementRef.nativeElement.focus();
+        }
+        if (this.modalRef?.closeOnNavigation) {
+            this._navigationSubscription = this._router.events.subscribe((event) => {
+                if (event instanceof NavigationStart) {
+                    this.close();
+                }
+            });
+        }
+    }
+    ngOnDestroy() {
+        if (this._navigationSubscription) {
+            this._navigationSubscription.unsubscribe();
+            this._navigationSubscription = null;
+        }
+    }
+    close() {
+        this.modalRef?.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalComponent, deps: [{ token: i0.ElementRef }, { token: i1.OverlayRef, optional: true }, { token: MonkeyModalRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyModalComponent, selector: "monkey-modal", host: { attributes: { "tabindex": "-1" }, properties: { "attr.id": "modalRef?.id || null" }, classAttribute: "mecx-modal" }, ngImport: i0, template: `
+    <div class="mecx-modal-header">
+      <div class="mecx-modal-header-group">
+        <div class="mecx-modal-header-title">
+          @if (modalRef?.icon) {
+            <div class="mecx-modal-header-icon">
+              <monkey-icon [icon]="modalRef?.icon + ''" first></monkey-icon>
+            </div>
+          }
+          <ng-content select="monkey-modal-title"></ng-content>
+          <ng-content select="[monkey-modal-title]"></ng-content>
+        </div>
+
+        <ng-content select="monkey-modal-subtitle"></ng-content>
+        <ng-content select="[monkey-modal-subtitle]"></ng-content>
+      </div>
+      @if (!modalRef?.disableClose) {
+        <monkey-icon-button
+          size="sm"
+          type="tertiary"
+          icon="close"
+          class="mecx-modal-close"
+          (click)="close()"
+        >
+          x
+        </monkey-icon-button>
+      }
+    </div>
+    <ng-content select="monkey-modal-content"></ng-content>
+    <ng-content select="[monkey-modal-content]"></ng-content>
+    <ng-content select="monkey-modal-actions"></ng-content>
+    <ng-content select="[monkey-modal-actions]"></ng-content>
+  `, isInline: true, styles: ["monkey-modal{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:8px}.mecx-modal-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--mecx-color-gray-200);padding:12px;position:relative}.mecx-modal-header-group{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.mecx-modal-header-title{display:flex;gap:8px;align-items:center;justify-content:flex-start}.mecx-modal-header-icon{padding:8px;display:flex;align-items:center;justify-content:center;background:var(--mecx-color-gray-100);border-radius:8px;font-size:24px;color:var(--mecx-color-gray-900)}.mecx-modal-title{font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;color:var(--mecx-color-gray-900)}.mecx-modal-subtitle{font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;color:var(--mecx-color-gray-700)}.mecx-modal-content{display:block;flex-grow:1;box-sizing:border-box;overflow:auto;max-height:65vh;padding:12px;scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-modal-actions{display:flex;gap:8px;border-top:1px solid var(--mecx-color-gray-200);padding:12px}.mecx-modal-actions.align-start{justify-content:flex-start}.mecx-modal-actions.align-center{justify-content:center}.mecx-modal-actions.align-end{justify-content:flex-end}.mecx-modal-overlay{background:#00000052}\n"], dependencies: [{ kind: "component", type: MonkeyIconButtonComponent, selector: "monkey-icon-button", inputs: ["type", "size", "disabled", "icon", "id"] }, { 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: MonkeyModalComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, selector: 'monkey-modal', template: `
+    <div class="mecx-modal-header">
+      <div class="mecx-modal-header-group">
+        <div class="mecx-modal-header-title">
+          @if (modalRef?.icon) {
+            <div class="mecx-modal-header-icon">
+              <monkey-icon [icon]="modalRef?.icon + ''" first></monkey-icon>
+            </div>
+          }
+          <ng-content select="monkey-modal-title"></ng-content>
+          <ng-content select="[monkey-modal-title]"></ng-content>
+        </div>
+
+        <ng-content select="monkey-modal-subtitle"></ng-content>
+        <ng-content select="[monkey-modal-subtitle]"></ng-content>
+      </div>
+      @if (!modalRef?.disableClose) {
+        <monkey-icon-button
+          size="sm"
+          type="tertiary"
+          icon="close"
+          class="mecx-modal-close"
+          (click)="close()"
+        >
+          x
+        </monkey-icon-button>
+      }
+    </div>
+    <ng-content select="monkey-modal-content"></ng-content>
+    <ng-content select="[monkey-modal-content]"></ng-content>
+    <ng-content select="monkey-modal-actions"></ng-content>
+    <ng-content select="[monkey-modal-actions]"></ng-content>
+  `, host: {
+                        class: 'mecx-modal',
+                        tabindex: '-1',
+                        '[attr.id]': 'modalRef?.id || null'
+                    }, styles: ["monkey-modal{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:8px}.mecx-modal-header{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--mecx-color-gray-200);padding:12px;position:relative}.mecx-modal-header-group{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.mecx-modal-header-title{display:flex;gap:8px;align-items:center;justify-content:flex-start}.mecx-modal-header-icon{padding:8px;display:flex;align-items:center;justify-content:center;background:var(--mecx-color-gray-100);border-radius:8px;font-size:24px;color:var(--mecx-color-gray-900)}.mecx-modal-title{font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;color:var(--mecx-color-gray-900)}.mecx-modal-subtitle{font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;color:var(--mecx-color-gray-700)}.mecx-modal-content{display:block;flex-grow:1;box-sizing:border-box;overflow:auto;max-height:65vh;padding:12px;scrollbar-color:var(--mecx-color-gray-400) transparent}.mecx-modal-actions{display:flex;gap:8px;border-top:1px solid var(--mecx-color-gray-200);padding:12px}.mecx-modal-actions.align-start{justify-content:flex-start}.mecx-modal-actions.align-center{justify-content:center}.mecx-modal-actions.align-end{justify-content:flex-end}.mecx-modal-overlay{background:#00000052}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.OverlayRef, decorators: [{
+                    type: Optional
+                }] }, { type: MonkeyModalRef, decorators: [{
+                    type: Optional
+                }] }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+const MECX_MODAL_DATA = new InjectionToken('mecxModalData');
+const MECX_MODAL_DEFAULT_CONFIG = new InjectionToken('mecxModalDefaultConfig');
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+function reverseForEach(items, callback) {
+    let i = items.length;
+    // eslint-disable-next-line no-plusplus
+    while (i--) {
+        callback(items[i]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: { mkAlign: "mkAlign" }, host: { properties: { "class": "'mecx-modal-actions align-'+mkAlign", "attr.id": "id || null" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalActionsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-modal-actions, [monkey-modal-actions]',
-                    host: {
-                        '[class]': `'mecx-modal-actions align-'+mkAlign`,
-                        '[attr.id]': 'id || null'
-                    }
-                }]
-        }], propDecorators: { mkAlign: [{
-                type: Input
-            }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
 class MonkeyModalDefaultComponent {
     constructor(config, modalRef) {
         this.config = config;
@@ -1847,9 +3500,6 @@ class MonkeyModalDefaultComponent {
         this.okLabel = '';
         // not to do
     }
-    ngAfterViewInit() {
-        // console.log(this.data);
-    }
     onSubmit() {
         this.modalRef.close(true);
     }
@@ -1893,24 +3543,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     args: [MonkeyModalRef]
                 }] }] });
 
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyModalConfig {
-    constructor() {
-        this.panelClass = '';
-        this.hasBackdrop = true;
-        this.backdropClass = 'mecx-modal-overlay';
-        this.disableClose = false;
-        this.width = '';
-        this.height = '';
-        this.data = null;
-        this.closeOnNavigation = true;
-    }
-}
-
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -1970,9 +3602,45 @@ class MonkeyModalService {
         return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;
     }
     getOverlayConfig(config) {
+        let positionStrategy;
+        const marginStrategy = '20px';
+        if (config.position === 'left-top') {
+            positionStrategy = this.overlay.position().global().left(marginStrategy).top(marginStrategy);
+        }
+        else if (config.position === 'center-top') {
+            positionStrategy = this.overlay.position().global().centerHorizontally().top(marginStrategy);
+        }
+        else if (config.position === 'right-top') {
+            positionStrategy = this.overlay.position().global().right(marginStrategy).top(marginStrategy);
+        }
+        else if (config.position === 'left-center') {
+            positionStrategy = this.overlay.position().global().left(marginStrategy).centerVertically();
+        }
+        else if (config.position === 'center-center') {
+            positionStrategy = this.overlay.position().global().centerHorizontally().centerVertically();
+        }
+        else if (config.position === 'right-center') {
+            positionStrategy = this.overlay.position().global().right(marginStrategy).centerVertically();
+        }
+        else if (config.position === 'left-bottom') {
+            positionStrategy = this.overlay
+                .position()
+                .global()
+                .left(marginStrategy)
+                .bottom(marginStrategy);
+        }
+        else if (config.position === 'center-bottom') {
+            positionStrategy = this.overlay.position().global().centerHorizontally().bottom('20px');
+        }
+        else if (config.position === 'right-bottom') {
+            positionStrategy = this.overlay
+                .position()
+                .global()
+                .right(marginStrategy)
+                .bottom(marginStrategy);
+        }
         const state = new OverlayConfig({
-            positionStrategy: config?.positionStrategy ||
-                this.overlay.position().global().centerHorizontally().centerVertically(),
+            positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.block(),
             panelClass: config.panelClass,
             hasBackdrop: config.hasBackdrop,
@@ -1987,6 +3655,12 @@ class MonkeyModalService {
         if (config.backdropClass) {
             state.backdropClass = config.backdropClass;
         }
+        if (!config.width && config.maxWidth) {
+            state.width = '100%';
+        }
+        if (!config.height && config.maxHeight) {
+            state.height = '100%';
+        }
         return state;
     }
     createInjector(config, dialogRef, overlayRef, fallbackInjector) {
@@ -2010,6 +3684,9 @@ class MonkeyModalService {
         const injector = this.createInjector(config, modalRef, overlayRef, this.injector);
         const componentPortal = new ComponentPortal(component, null, injector);
         const componentRef = overlayRef.attach(componentPortal);
+        const componentElement = componentRef.location.nativeElement;
+        componentElement.style.width = '100%';
+        componentElement.style.height = '100%';
         modalRef.componentInstance = componentRef.instance;
         this.openDialogs.push(modalRef);
         return modalRef;
@@ -2034,6 +3711,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.Injector }] });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -2085,6 +3768,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['click', ['$event']]
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -2137,6 +3826,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -2179,13 +3874,16 @@ class MonkeySelectComponent {
         this.formField = formField;
         this.tabIndex = 0;
         this.onChange = new EventEmitter();
+        this.onSearch = new EventEmitter();
         this.placeholder = '';
         this.loading = false;
+        this.showSearch = true;
+        this.searchPlaceholder = '';
+        this.callbackSearch = false;
         this._value = null;
         this.labelSelected = '';
         this.overlayRef = null;
-        this.isOpen = false;
-        this._destroyed = inject(MonkeyDestroyService);
+        this._destroyRef = inject(DestroyRef);
         this.iconArrowDown = inject(MonkeyIconsService).arrowDown;
         this.idGenerator = inject(IdGenerator);
         this.ngControl = inject(NgControl, { self: true, optional: true });
@@ -2197,6 +3895,14 @@ class MonkeySelectComponent {
         this.percent = false;
         this.stateChanges = new Subject();
         this.type = '';
+        this.searchHandle = new EventEmitter();
+        this.searchDictionary = inject(MonkeyDictionaryService).get('NO-DATA');
+        this.loadingDictionary = inject(MonkeyDictionaryService).get('LOADING');
+        this.imgSearchNoData = inject(MonkeyIconsService).searchFail;
+        this.imgSearch = inject(MonkeyIconsService).search;
+        this.showSearchNoData = false;
+        this.isOpen = false;
+        this.searchData = '';
         this.onAnimationEnd = (event) => {
             if (event.toState === 'closed') {
                 this.closeOverlay();
@@ -2231,30 +3937,6 @@ class MonkeySelectComponent {
             }
         });
     }
-    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;
@@ -2267,6 +3949,9 @@ class MonkeySelectComponent {
         this.isOpen = false;
         this.focused = false;
         this.formField.control.disableToBeDirty = false;
+        if (!this.callbackSearch) {
+            this.searchData = '';
+        }
     }
     closeOverlay() {
         if (this.overlayRef) {
@@ -2274,6 +3959,30 @@ class MonkeySelectComponent {
             this.overlayRef = null;
         }
     }
+    initializeWithOverlay() {
+        if (this.showSearch) {
+            const element = this.overlayRef?.overlayElement.querySelector(`#${this.id}-search`);
+            this.options.forEach((opt) => {
+                const element = this.overlayRef?.overlayElement.querySelector(`#${opt.id}`);
+                if (!element)
+                    return;
+                element.style.display = '';
+            });
+            setTimeout(() => {
+                element?.focus();
+            }, 0);
+            this.showSearchNoData = false;
+        }
+        setTimeout(() => {
+            const selected = this.options.find((opt) => {
+                return opt.selected;
+            });
+            if (selected) {
+                const element = this.overlayRef?.overlayElement.querySelector(`#${selected.id}`);
+                element?.scrollIntoView({ behavior: 'instant', block: 'center' });
+            }
+        }, 0);
+    }
     createOverlay() {
         if (this.overlayRef) {
             return;
@@ -2318,10 +4027,75 @@ class MonkeySelectComponent {
         this.overlayRef.attach(portal);
         this.overlayRef
             .backdropClick()
-            .pipe(takeUntil(this._destroyed))
+            .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             return this.closeDropdown();
         });
+        this.initializeWithOverlay();
+    }
+    updateSelectedLabel() {
+        const selectedOption = this.options.find((opt) => {
+            return opt.value === this.value;
+        });
+        this.labelSelected = selectedOption ? selectedOption.displayContent : '';
+    }
+    executeSearch(search) {
+        let found = false;
+        this.options.forEach((opt) => {
+            const element = this.overlayRef?.overlayElement.querySelector(`#${opt.id}`);
+            if (!element)
+                return;
+            const isMatch = normalizeStringToSearch(opt.displayContent).includes(normalizeStringToSearch(search));
+            if (isMatch) {
+                found = true;
+            }
+            element.style.display = isMatch ? '' : 'none';
+        });
+        this.repositionScroll();
+        this.showSearchNoData = !found;
+    }
+    repositionScroll() {
+        const overlayElement = this.overlayRef?.overlayElement.querySelector('.mecx-select-overlay');
+        if (overlayElement) {
+            overlayElement.scrollTop = 0;
+        }
+    }
+    ngOnInit() {
+        this.searchHandle
+            .pipe(debounceTime(200), takeUntilDestroyed(this._destroyRef))
+            .subscribe((search) => {
+            if (this.callbackSearch) {
+                this.onSearch.next(search);
+                this.repositionScroll();
+            }
+            else {
+                this.executeSearch(search);
+            }
+        });
+    }
+    ngAfterContentInit() {
+        this.initializeOptions();
+        this.options.changes.pipe(takeUntilDestroyed(this._destroyRef)).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();
+            }
+        }
     }
     selectOption(option) {
         if (!option.disabled && !this.disabled) {
@@ -2335,12 +4109,6 @@ class MonkeySelectComponent {
             });
         }
     }
-    updateSelectedLabel() {
-        const selectedOption = this.options.find((opt) => {
-            return opt.value === this.value;
-        });
-        this.labelSelected = selectedOption ? selectedOption.displayContent : '';
-    }
     writeValue(value) {
         this.value = value;
         this.changeSelected();
@@ -2383,12 +4151,21 @@ class MonkeySelectComponent {
             this.stateChanges.next();
         }
     }
+    onHandleSearch(event) {
+        try {
+            const { value } = event.target;
+            const handled = sanitizeString(value);
+            this.searchHandle.next(handled || '');
+        }
+        catch (e) {
+            // not to do
+        }
+    }
     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: [
+    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], showSearch: ["showSearch", "showSearch", booleanAttribute], searchPlaceholder: "searchPlaceholder", callbackSearch: ["callbackSearch", "callbackSearch", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange", onSearch: "onSearch" }, 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: [
+            { provide: MonkeyFormFieldControl, useExisting: MonkeySelectComponent }
+        ], 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 class=\"mecx-select-body-overlay\">\n    @if (showSearch) {\n      <div class=\"mecx-select-search\">\n        <div class=\"mecx-select-search-icon\" [innerHTML]=\"imgSearch\"></div>\n        <input\n          (input)=\"onHandleSearch($event)\"\n          type=\"text\"\n          [id]=\"id + '-search'\"\n          autocomplete=\"off\"\n          maxlength=\"50\"\n          [placeholder]=\"searchPlaceholder\"\n          [(ngModel)]=\"searchData\"\n        />\n      </div>\n    }\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    @if (showSearch && showSearchNoData) {\n      <div class=\"mecx-select-search-no-data\">\n        <div class=\"mecx-select-search-no-data-icon\" [innerHTML]=\"imgSearchNoData\"></div>\n        {{ searchDictionary | async }}\n      </div>\n    }\n    @if (loading) {\n      <div class=\"mecx-select-search-loading\">\n        {{ loadingDictionary | async }}\n      </div>\n    }\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-body-overlay{width:100%;background:#fff;border:2px solid var(--mecx-color-gray-400);overflow:hidden;border-radius:4px;box-shadow:0 16px 32px #d6d6d694}.mecx-select-body-overlay .mecx-select-search{display:flex;gap:4px;border-bottom:2px solid var(--mecx-color-gray-400);padding:8px}.mecx-select-body-overlay .mecx-select-search-icon{width:12px;display:flex}.mecx-select-body-overlay .mecx-select-search-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-body-overlay input{border:none;width:90%;color:var(--mecx-color-gray-600)!important;font-size:12px;letter-spacing:.54px}.mecx-select-body-overlay .mecx-select-search-no-data,.mecx-select-body-overlay .mecx-select-search-loading{padding:12px;display:flex;justify-content:center;flex-direction:column;align-items:center;gap:4px;color:var(--mecx-color-gray-600);font-size:12px;letter-spacing:.54px;text-align:center}.mecx-select-body-overlay .mecx-select-search-no-data-icon svg path,.mecx-select-body-overlay .mecx-select-search-loading-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-overlay{width:100%;background:#fff;overflow:hidden auto;max-height:360px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [
             trigger('animation', [
                 transition(':enter', [
                     style({
@@ -2410,10 +4187,9 @@ class MonkeySelectComponent {
 }
 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: [
+            args: [{ selector: 'monkey-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         // eslint-disable-next-line no-use-before-define
-                        { provide: MonkeyFormFieldControl, useExisting: MonkeySelectComponent },
-                        MonkeyDestroyService
+                        { provide: MonkeyFormFieldControl, useExisting: MonkeySelectComponent }
                     ], animations: [
                         trigger('animation', [
                             transition(':enter', [
@@ -2441,7 +4217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '[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"] }]
+                    }, 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 class=\"mecx-select-body-overlay\">\n    @if (showSearch) {\n      <div class=\"mecx-select-search\">\n        <div class=\"mecx-select-search-icon\" [innerHTML]=\"imgSearch\"></div>\n        <input\n          (input)=\"onHandleSearch($event)\"\n          type=\"text\"\n          [id]=\"id + '-search'\"\n          autocomplete=\"off\"\n          maxlength=\"50\"\n          [placeholder]=\"searchPlaceholder\"\n          [(ngModel)]=\"searchData\"\n        />\n      </div>\n    }\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    @if (showSearch && showSearchNoData) {\n      <div class=\"mecx-select-search-no-data\">\n        <div class=\"mecx-select-search-no-data-icon\" [innerHTML]=\"imgSearchNoData\"></div>\n        {{ searchDictionary | async }}\n      </div>\n    }\n    @if (loading) {\n      <div class=\"mecx-select-search-loading\">\n        {{ loadingDictionary | async }}\n      </div>\n    }\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-body-overlay{width:100%;background:#fff;border:2px solid var(--mecx-color-gray-400);overflow:hidden;border-radius:4px;box-shadow:0 16px 32px #d6d6d694}.mecx-select-body-overlay .mecx-select-search{display:flex;gap:4px;border-bottom:2px solid var(--mecx-color-gray-400);padding:8px}.mecx-select-body-overlay .mecx-select-search-icon{width:12px;display:flex}.mecx-select-body-overlay .mecx-select-search-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-body-overlay input{border:none;width:90%;color:var(--mecx-color-gray-600)!important;font-size:12px;letter-spacing:.54px}.mecx-select-body-overlay .mecx-select-search-no-data,.mecx-select-body-overlay .mecx-select-search-loading{padding:12px;display:flex;justify-content:center;flex-direction:column;align-items:center;gap:4px;color:var(--mecx-color-gray-600);font-size:12px;letter-spacing:.54px;text-align:center}.mecx-select-body-overlay .mecx-select-search-no-data-icon svg path,.mecx-select-body-overlay .mecx-select-search-loading-icon svg path{stroke:var(--mecx-color-gray-600)}.mecx-select-overlay{width:100%;background:#fff;overflow:hidden auto;max-height:360px}\n"] }]
         }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: MonkeyFormFieldComponent, decorators: [{
                     type: Optional
                 }] }], propDecorators: { overlayTemplate: [{
@@ -2460,12 +4236,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], onChange: [{
                 type: Output
+            }], onSearch: [{
+                type: Output
             }], placeholder: [{
                 type: Input,
                 args: [{ required: true }]
             }], loading: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], showSearch: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], searchPlaceholder: [{
+                type: Input
+            }], callbackSearch: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -2476,6 +4262,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -2516,6 +4308,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -2615,7 +4413,7 @@ class MonkeyPaginationSizeComponent {
         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 }); }
+    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 size=\"sm\">\n  <monkey-select\n    placeholder=\"''\"\n    [ngModel]=\"size\"\n    (onChange)=\"onChange.next($event)\"\n    [disabled]=\"disabled\"\n    [showSearch]=\"false\"\n  >\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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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", "showSearch", "searchPlaceholder", "callbackSearch", "disabled", "required", "value"], outputs: ["onChange", "onSearch"] }, { kind: "component", type: MonkeyOptionComponent, selector: "monkey-option", inputs: ["value", "disabled"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }, { kind: "component", type: MonkeyFormFieldComponent, selector: "monkey-form-field", inputs: ["id", "hideAction", "enableClear", "size"], exportAs: ["monkeyFormField"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPaginationSizeComponent, decorators: [{
             type: Component,
@@ -2630,7 +4428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '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"] }]
+                    }, template: "<ng-content></ng-content>\n<monkey-form-field hideClear size=\"sm\">\n  <monkey-select\n    placeholder=\"''\"\n    [ngModel]=\"size\"\n    (onChange)=\"onChange.next($event)\"\n    [disabled]=\"disabled\"\n    [showSearch]=\"false\"\n  >\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 }]
@@ -2731,7 +4529,7 @@ class MonkeyTableComponent {
         }
     }
     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 }); }
+    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"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyTableComponent, decorators: [{
             type: Component,
@@ -3131,7 +4929,8 @@ class MonkeyTableModule {
             MonkeyColumnStick,
             MonkeyColumnChecked,
             MonkeyColumnSortable,
-            MonkeyColumnExpansible], imports: [MonkeyButtonComponent,
+            MonkeyColumnExpansible], imports: [CommonModule,
+            MonkeyButtonComponent,
             MonkeyPaginationSizeComponent,
             MonkeyPaginationLabelComponent,
             MonkeyPaginationActionComponent], exports: [MonkeyTableComponent,
@@ -3139,7 +4938,8 @@ class MonkeyTableModule {
             MonkeyColumnChecked,
             MonkeyColumnSortable,
             MonkeyColumnExpansible] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyTableModule, imports: [MonkeyButtonComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyTableModule, imports: [CommonModule,
+            MonkeyButtonComponent,
             MonkeyPaginationSizeComponent,
             MonkeyPaginationActionComponent] }); }
 }
@@ -3147,6 +4947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: NgModule,
             args: [{
                     imports: [
+                        CommonModule,
                         MonkeyButtonComponent,
                         MonkeyPaginationSizeComponent,
                         MonkeyPaginationLabelComponent,
@@ -3169,6 +4970,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
 class MonkeyToastComponent {
     get id() {
         return this._id;
@@ -3200,7 +5012,7 @@ class MonkeyToastComponent {
         }
     }
     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:var(--mecx-color-gray-400)}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 }); }
+    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=\"monkey-toast-content\">\n  @if (icon) {\n    <monkey-icon [icon]=\"icon\" size=\"lg\"></monkey-icon>\n  }\n  <div class=\"monkey-toast-message\">\n    {{ message }}\n  </div>\n</div>\n@if (actionLabel) {\n  <div class=\"monkey-toast-action\">\n    <monkey-button\n      class=\"monkey-toast-btn-action\"\n      type=\"tertiary\"\n      size=\"sm\"\n      (click)=\"onActionClick.emit(id)\"\n    >\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=\"monkey-toast-divider\"></div>\n  <div class=\"monkey-toast-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 .monkey-toast-content{display:flex;gap:8px;line-height:24px;font-size:14px;letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:#fff!important;outline-color:#fff}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:#fff!important}monkey-toast .monkey-toast-divider{width:1px;height:24px;background-color:var(--mecx-color-gray-400)}monkey-toast .monkey-toast-close{display:flex}monkey-toast .monkey-toast-close .btn-close{margin:0!important}monkey-toast .monkey-toast-close .btn-close .mecx-icon-button{height:24px;width:24px;color:#fff!important;outline-color:#fff}monkey-toast .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.13", ngImport: i0, type: MonkeyToastComponent, decorators: [{
             type: Component,
@@ -3209,7 +5021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '(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:var(--mecx-color-gray-400)}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"] }]
+                    }, template: "<div class=\"monkey-toast-content\">\n  @if (icon) {\n    <monkey-icon [icon]=\"icon\" size=\"lg\"></monkey-icon>\n  }\n  <div class=\"monkey-toast-message\">\n    {{ message }}\n  </div>\n</div>\n@if (actionLabel) {\n  <div class=\"monkey-toast-action\">\n    <monkey-button\n      class=\"monkey-toast-btn-action\"\n      type=\"tertiary\"\n      size=\"sm\"\n      (click)=\"onActionClick.emit(id)\"\n    >\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=\"monkey-toast-divider\"></div>\n  <div class=\"monkey-toast-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 .monkey-toast-content{display:flex;gap:8px;line-height:24px;font-size:14px;letter-spacing:.48px;flex-grow:1}monkey-toast .monkey-toast-action .monkey-toast-btn-action{margin:0!important}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button{height:24px;color:#fff!important;outline-color:#fff}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button .content{padding:12px 8px}monkey-toast .monkey-toast-action .monkey-toast-btn-action .mecx-button:hover{color:#fff!important}monkey-toast .monkey-toast-divider{width:1px;height:24px;background-color:var(--mecx-color-gray-400)}monkey-toast .monkey-toast-close{display:flex}monkey-toast .monkey-toast-close .btn-close{margin:0!important}monkey-toast .monkey-toast-close .btn-close .mecx-icon-button{height:24px;width:24px;color:#fff!important;outline-color:#fff}monkey-toast .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: [{
@@ -3237,6 +5049,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['animation']
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
 class MonkeyToggleComponent {
     set value(_) {
         if (typeof _ === 'string') {
@@ -3301,6 +5124,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['click', ['$event']]
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -3312,17 +5141,23 @@ class MonkeyToggleLineButtonComponent {
         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:var(--mecx-color-gray-900);cursor:pointer;padding:4px 8px;border:2px solid var(--mecx-color-gray-400);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:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-toggle-line-button input:disabled+label monkey-icon{color:var(--mecx-color-gray-400)!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 }); }
+    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:var(--mecx-color-gray-900);cursor:pointer;padding:4px 8px;border:2px solid var(--mecx-color-gray-400);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:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-toggle-line-button input:disabled+label monkey-icon{color:var(--mecx-color-gray-400)!important}monkey-toggle-line-button input:checked+label[for*=true]{background-color:var(--mecx-color-success-main);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:var(--mecx-color-error-700);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:var(--mecx-color-gray-900);cursor:pointer;padding:4px 8px;border:2px solid var(--mecx-color-gray-400);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:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-toggle-line-button input:disabled+label monkey-icon{color:var(--mecx-color-gray-400)!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"] }]
+            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:var(--mecx-color-gray-900);cursor:pointer;padding:4px 8px;border:2px solid var(--mecx-color-gray-400);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:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-toggle-line-button input:disabled+label monkey-icon{color:var(--mecx-color-gray-400)!important}monkey-toggle-line-button input:checked+label[for*=true]{background-color:var(--mecx-color-success-main);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:var(--mecx-color-error-700);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
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -3372,7 +5207,7 @@ class MonkeyToggleLineComponent {
         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 }); }
+    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:var(--mecx-color-error-700)}monkey-toggle-line :last-child label{border-radius:0 8px 8px 0}monkey-toggle-line :last-child label monkey-icon{color:var(--mecx-color-success-main)}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,
@@ -3380,7 +5215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '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"] }]
+                    }, 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:var(--mecx-color-error-700)}monkey-toggle-line :last-child label{border-radius:0 8px 8px 0}monkey-toggle-line :last-child label monkey-icon{color:var(--mecx-color-success-main)}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: [{
@@ -3402,6 +5237,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
 class MonkeyTooltipComponent {
     get id() {
         return this._id;
@@ -3425,7 +5271,7 @@ class MonkeyTooltipComponent {
         }
     }
     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:var(--mecx-color-gray-900);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.ɵ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}\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:var(--mecx-color-gray-900);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.13", ngImport: i0, type: MonkeyTooltipComponent, decorators: [{
             type: Component,
@@ -3436,7 +5282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '(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:var(--mecx-color-gray-900);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"] }]
+                    }, template: "@if (template) {\n  <ng-container *ngTemplateOutlet=\"template\"> </ng-container>\n}\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:var(--mecx-color-gray-900);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
             }], template: [{
@@ -3451,6 +5297,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
 class MonkeyTooltipDirective {
     constructor(viewContainerRef, elementRef, appRef, document) {
         this.viewContainerRef = viewContainerRef;
@@ -3628,9 +5485,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * MIT Licence
  ************************* */
 
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, 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, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalDefaultComponent, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPrefix, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeySuffix, MonkeyTableComponent, MonkeyTableModule, MonkeyToastComponent, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, ToastRef, getCurrencySymbol, reverseForEach, validateType };
+export { MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDirectivesModule, MonkeyDividerComponent, MonkeyError, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelper, MonkeyIconButtonComponent, MonkeyIconComponent, MonkeyIconsService, MonkeyInfo, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDirective, MonkeyInputModule, MonkeyInputUploadComponent, MonkeyLabel, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPrefix, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeySuffix, MonkeyTableComponent, MonkeyTableModule, MonkeyToastComponent, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, ToastRef, getCurrencySymbol };
 //# sourceMappingURL=monkey-style-guide-v2.mjs.map