monkey-style-guide-v2 0.0.21 → 0.0.23

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

@@ -1,20 +1,21 @@
 import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
-import * as i1$1 from '@angular/common';
-import { CommonModule, CurrencyPipe, NgTemplateOutlet, DOCUMENT } from '@angular/common';
+import * as i1 from '@angular/common';
+import { CommonModule, NgTemplateOutlet, CurrencyPipe, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-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 { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, ViewEncapsulation, HostBinding, output, effect, ElementRef, HostListener, Directive, InjectionToken, EventEmitter, Output, ViewContainerRef, NgZone, DestroyRef, Optional, Inject, NgModule, Injector, ChangeDetectorRef, forwardRef, ChangeDetectionStrategy, ContentChildren, LOCALE_ID, DEFAULT_CURRENCY_CODE, ContentChild, computed, ViewChildren, ViewChild } from '@angular/core';
 import { Router, NavigationStart } from '@angular/router';
 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 * as i1$1 from '@angular/cdk/overlay';
+import { Overlay, OverlayPositionBuilder, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+import { filter, BehaviorSubject, map, merge, Subject, debounceTime, Subscription } from 'rxjs';
 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 parsePhoneNumberFromString, { getCountries, getCountryCallingCode, getExampleNumber, AsYouType, isValidPhoneNumber } from 'libphonenumber-js';
+import examples from 'libphonenumber-js/examples.mobile.json';
 import { hasModifierKey } from '@angular/cdk/keycodes';
 
 const counters = {};
@@ -81,141 +82,279 @@ function normalizeStringToSearch(text) {
 }
 
 /* eslint-disable max-len */
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyIconsService {
+class UtilIconComponent {
     constructor() {
-        this._sanitizer = inject(DomSanitizer);
-    }
-    handleTrust(icon) {
-        return this._sanitizer.bypassSecurityTrustHtml(icon);
-    }
-    get clear() {
-        return this.handleTrust(`
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M7.815 7.277a.802.802 0 0 0-.459.349c-.103.167-.123.529-.038.694.028.055.854.906 1.836 1.89L10.939 12l-1.785 1.79c-.982.985-1.808 1.835-1.836 1.89a.926.926 0 0 0-.051.324c0 .494.414.812.922.707.183-.038.266-.114 2.001-1.844L12 13.062l1.81 1.805c1.731 1.725 1.818 1.806 2 1.844.58.12 1.021-.321.901-.901-.038-.182-.119-.269-1.844-2L13.062 12l1.805-1.81c1.73-1.735 1.806-1.818 1.844-2.001.105-.508-.213-.922-.707-.922a.926.926 0 0 0-.324.051c-.055.028-.905.854-1.89 1.836L12 10.939l-1.79-1.785c-.984-.982-1.826-1.803-1.87-1.825a.99.99 0 0 0-.525-.052" fill-rule="evenodd" fill="var(--mecx-color-gray-900)"/></svg>
-    `);
-    }
-    get calendar() {
-        return this.handleTrust(`
-      <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.815 1.277a.8.8 0 0 0-.462.354c-.087.139-.094.198-.107.875l-.013.725-1.347.019c-1.236.018-1.371.026-1.646.107A2.807 2.807 0 0 0 2.352 5.26l-.092.32v13.84l.092.32a2.797 2.797 0 0 0 1.908 1.908l.32.092h14.84l.32-.092a2.797 2.797 0 0 0 1.908-1.908l.092-.32V5.58l-.092-.32a2.807 2.807 0 0 0-1.888-1.903c-.276-.081-.41-.089-1.65-.107l-1.35-.019v-.593c0-.757-.042-.96-.238-1.156-.349-.349-.903-.279-1.169.149-.087.139-.094.198-.107.879l-.014.73H8.76l-.001-.61c-.001-.68-.039-.91-.179-1.094-.159-.209-.502-.325-.765-.259M7.246 5.49c.013.681.02.74.107.879.357.574 1.223.443 1.363-.207.024-.113.044-.475.044-.804V4.76h6.472l.014.73c.013.681.02.74.107.879.357.574 1.223.443 1.363-.207.024-.113.044-.475.044-.804V4.76h1.238c1.452 0 1.525.014 1.876.366.352.351.366.424.366 1.876V8.24H3.756l.012-1.31c.012-1.277.014-1.314.104-1.482.155-.29.475-.562.768-.651.055-.016.661-.032 1.346-.034l1.246-.003.014.73m12.994 9.008c0 4.664-.001 4.742-.081 4.956-.109.29-.415.596-.705.705-.215.08-.28.081-7.454.081-7.159 0-7.239-.001-7.453-.081-.245-.091-.544-.363-.679-.615l-.088-.164-.011-4.81-.01-4.81H20.24v4.738M6.7 12.028a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m5 0a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m5 0a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m-10 4a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m5 0a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048" fill-rule="evenodd" fill="var(--mecx-color-gray-900)"/></svg>
-    `);
-    }
-    get arrowDown() {
-        return this.handleTrust(`
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 10L12 14L16 10" stroke="var(--mecx-color-gray-900)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
-    `);
-    }
-    get check() {
-        return this.handleTrust(`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.808 2.528 C 9.752 2.542,9.671 2.574,9.628 2.599 C 9.585 2.625,8.414 3.781,7.025 5.168 L 4.500 7.690 3.475 6.667 C 2.865 6.059,2.414 5.624,2.360 5.594 C 2.137 5.467,1.822 5.478,1.603 5.620 C 1.226 5.863,1.141 6.369,1.419 6.715 C 1.558 6.887,4.068 9.375,4.140 9.411 C 4.366 9.525,4.634 9.525,4.860 9.411 C 4.931 9.376,10.438 3.892,10.581 3.715 C 10.688 3.582,10.742 3.425,10.742 3.250 C 10.742 2.758,10.293 2.410,9.808 2.528 " stroke="none" fill-rule="evenodd" fill="var(--mecx-color-theme-contrast-500"></path></svg>`);
-    }
-    get minus() {
-        return this.handleTrust(`<svg width="8" height="2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.333 0.268 C 1.300 0.274,1.225 0.303,1.167 0.332 C 1.054 0.388,0.939 0.490,0.866 0.599 C 0.776 0.732,0.732 0.936,0.757 1.098 C 0.786 1.283,0.848 1.405,0.977 1.532 C 1.071 1.624,1.148 1.673,1.253 1.710 L 1.340 1.740 4.000 1.740 L 6.660 1.740 6.747 1.710 C 6.943 1.642,7.128 1.462,7.200 1.270 C 7.265 1.095,7.265 0.904,7.200 0.730 C 7.118 0.510,6.880 0.308,6.655 0.267 C 6.565 0.250,1.420 0.251,1.333 0.268" stroke="none" fill-rule="evenodd" fill="var(--mecx-color-theme-contrast-500"></path></svg>`);
-    }
-    get loading() {
-        return this.handleTrust(`<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_ajPY{transform-origin:center;animation:spinner_AtaB .75s infinite linear}@keyframes spinner_AtaB{100%{transform:rotate(360deg)}}</style><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="spinner_ajPY"/></svg>`);
-    }
-    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>');
+        this.name = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UtilIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UtilIconComponent, isStandalone: true, selector: "util-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @switch (name()) {
+      @case ('clear') {
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+          <path
+            d="M7.815 7.277a.802.802 0 0 0-.459.349c-.103.167-.123.529-.038.694.028.055.854.906 1.836 1.89L10.939 12l-1.785 1.79c-.982.985-1.808 1.835-1.836 1.89a.926.926 0 0 0-.051.324c0 .494.414.812.922.707.183-.038.266-.114 2.001-1.844L12 13.062l1.81 1.805c1.731 1.725 1.818 1.806 2 1.844.58.12 1.021-.321.901-.901-.038-.182-.119-.269-1.844-2L13.062 12l1.805-1.81c1.73-1.735 1.806-1.818 1.844-2.001.105-.508-.213-.922-.707-.922a.926.926 0 0 0-.324.051c-.055.028-.905.854-1.89 1.836L12 10.939l-1.79-1.785c-.984-.982-1.826-1.803-1.87-1.825a.99.99 0 0 0-.525-.052"
+            fill-rule="evenodd"
+            fill="var(--mecx-color-gray-900)"
+          />
+        </svg>
+      }
+
+      @case ('calendar') {
+        <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M7.815 1.277a.8.8 0 0 0-.462.354c-.087.139-.094.198-.107.875l-.013.725-1.347.019c-1.236.018-1.371.026-1.646.107A2.807 2.807 0 0 0 2.352 5.26l-.092.32v13.84l.092.32a2.797 2.797 0 0 0 1.908 1.908l.32.092h14.84l.32-.092a2.797 2.797 0 0 0 1.908-1.908l.092-.32V5.58l-.092-.32a2.807 2.807 0 0 0-1.888-1.903c-.276-.081-.41-.089-1.65-.107l-1.35-.019v-.593c0-.757-.042-.96-.238-1.156-.349-.349-.903-.279-1.169.149-.087.139-.094.198-.107.879l-.014.73H8.76l-.001-.61c-.001-.68-.039-.91-.179-1.094-.159-.209-.502-.325-.765-.259M7.246 5.49c.013.681.02.74.107.879.357.574 1.223.443 1.363-.207.024-.113.044-.475.044-.804V4.76h6.472l.014.73c.013.681.02.74.107.879.357.574 1.223.443 1.363-.207.024-.113.044-.475.044-.804V4.76h1.238c1.452 0 1.525.014 1.876.366.352.351.366.424.366 1.876V8.24H3.756l.012-1.31c.012-1.277.014-1.314.104-1.482.155-.29.475-.562.768-.651.055-.016.661-.032 1.346-.034l1.246-.003.014.73m12.994 9.008c0 4.664-.001 4.742-.081 4.956-.109.29-.415.596-.705.705-.215.08-.28.081-7.454.081-7.159 0-7.239-.001-7.453-.081-.245-.091-.544-.363-.679-.615l-.088-.164-.011-4.81-.01-4.81H20.24v4.738M6.7 12.028a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m5 0a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m5 0a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m-10 4a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m5 0a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048"
+            fill-rule="evenodd"
+            fill="var(--mecx-color-gray-900)"
+          />
+        </svg>
+      }
+
+      @case ('arrowDown') {
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 10L12 14L16 10"
+            stroke="var(--mecx-color-gray-900)"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      }
+
+      @case ('check') {
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9.808 2.528 C 9.752 2.542,9.671 2.574,9.628 2.599 C 9.585 2.625,8.414 3.781,7.025 5.168 L 4.500 7.690 3.475 6.667 C 2.865 6.059,2.414 5.624,2.360 5.594 C 2.137 5.467,1.822 5.478,1.603 5.620 C 1.226 5.863,1.141 6.369,1.419 6.715 C 1.558 6.887,4.068 9.375,4.140 9.411 C 4.366 9.525,4.634 9.525,4.860 9.411 C 4.931 9.376,10.438 3.892,10.581 3.715 C 10.688 3.582,10.742 3.425,10.742 3.250 C 10.742 2.758,10.293 2.410,9.808 2.528 "
+            stroke="none"
+            fill-rule="evenodd"
+            fill="var(--mecx-color-theme-contrast-500"
+          ></path>
+        </svg>
+      }
+
+      @case ('minus') {
+        <svg width="8" height="2" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M1.333 0.268 C 1.300 0.274,1.225 0.303,1.167 0.332 C 1.054 0.388,0.939 0.490,0.866 0.599 C 0.776 0.732,0.732 0.936,0.757 1.098 C 0.786 1.283,0.848 1.405,0.977 1.532 C 1.071 1.624,1.148 1.673,1.253 1.710 L 1.340 1.740 4.000 1.740 L 6.660 1.740 6.747 1.710 C 6.943 1.642,7.128 1.462,7.200 1.270 C 7.265 1.095,7.265 0.904,7.200 0.730 C 7.118 0.510,6.880 0.308,6.655 0.267 C 6.565 0.250,1.420 0.251,1.333 0.268"
+            stroke="none"
+            fill-rule="evenodd"
+            fill="var(--mecx-color-theme-contrast-500"
+          ></path>
+        </svg>
+      }
+
+      @case ('loading') {
+        <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 0.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>
+      }
+
+      @case ('searchFail') {
+        <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>
+      }
+
+      @case ('search') {
+        <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' }); }
+  `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyIconsService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UtilIconComponent, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root'
-                }]
-        }] });
+                    selector: 'util-icon',
+                    standalone: true,
+                    template: `
+    @switch (name()) {
+      @case ('clear') {
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+          <path
+            d="M7.815 7.277a.802.802 0 0 0-.459.349c-.103.167-.123.529-.038.694.028.055.854.906 1.836 1.89L10.939 12l-1.785 1.79c-.982.985-1.808 1.835-1.836 1.89a.926.926 0 0 0-.051.324c0 .494.414.812.922.707.183-.038.266-.114 2.001-1.844L12 13.062l1.81 1.805c1.731 1.725 1.818 1.806 2 1.844.58.12 1.021-.321.901-.901-.038-.182-.119-.269-1.844-2L13.062 12l1.805-1.81c1.73-1.735 1.806-1.818 1.844-2.001.105-.508-.213-.922-.707-.922a.926.926 0 0 0-.324.051c-.055.028-.905.854-1.89 1.836L12 10.939l-1.79-1.785c-.984-.982-1.826-1.803-1.87-1.825a.99.99 0 0 0-.525-.052"
+            fill-rule="evenodd"
+            fill="var(--mecx-color-gray-900)"
+          />
+        </svg>
+      }
 
-class MonkeyToastRef {
-    constructor(componentRef) {
-        this.componentRef = componentRef;
-        // not to do
-    }
-    close() {
-        this.componentRef.instance.close();
-    }
-}
+      @case ('calendar') {
+        <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M7.815 1.277a.8.8 0 0 0-.462.354c-.087.139-.094.198-.107.875l-.013.725-1.347.019c-1.236.018-1.371.026-1.646.107A2.807 2.807 0 0 0 2.352 5.26l-.092.32v13.84l.092.32a2.797 2.797 0 0 0 1.908 1.908l.32.092h14.84l.32-.092a2.797 2.797 0 0 0 1.908-1.908l.092-.32V5.58l-.092-.32a2.807 2.807 0 0 0-1.888-1.903c-.276-.081-.41-.089-1.65-.107l-1.35-.019v-.593c0-.757-.042-.96-.238-1.156-.349-.349-.903-.279-1.169.149-.087.139-.094.198-.107.879l-.014.73H8.76l-.001-.61c-.001-.68-.039-.91-.179-1.094-.159-.209-.502-.325-.765-.259M7.246 5.49c.013.681.02.74.107.879.357.574 1.223.443 1.363-.207.024-.113.044-.475.044-.804V4.76h6.472l.014.73c.013.681.02.74.107.879.357.574 1.223.443 1.363-.207.024-.113.044-.475.044-.804V4.76h1.238c1.452 0 1.525.014 1.876.366.352.351.366.424.366 1.876V8.24H3.756l.012-1.31c.012-1.277.014-1.314.104-1.482.155-.29.475-.562.768-.651.055-.016.661-.032 1.346-.034l1.246-.003.014.73m12.994 9.008c0 4.664-.001 4.742-.081 4.956-.109.29-.415.596-.705.705-.215.08-.28.081-7.454.081-7.159 0-7.239-.001-7.453-.081-.245-.091-.544-.363-.679-.615l-.088-.164-.011-4.81-.01-4.81H20.24v4.738M6.7 12.028a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m5 0a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m5 0a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m-10 4a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048m5 0a.967.967 0 0 0-.24.126.992.992 0 0 0 .097 1.695 1.005 1.005 0 0 0 1.352-.427c.096-.185.114-.59.035-.797a1.104 1.104 0 0 0-.521-.549c-.154-.07-.507-.094-.723-.048"
+            fill-rule="evenodd"
+            fill="var(--mecx-color-gray-900)"
+          />
+        </svg>
+      }
 
-class MonkeyToastService {
-    constructor(overlay) {
-        this.overlay = overlay;
-        // no to do
-    }
-    getPositionStrategy(position) {
-        const globalPosition = this.overlay.position().global();
-        switch (position) {
-            case 'top-left':
-                return globalPosition.top('40px').start('40px');
-            case 'top-center':
-                return globalPosition.top('40px').centerHorizontally();
-            case 'top-right':
-                return globalPosition.top('40px').end('40px');
-            case 'bottom-left':
-                return globalPosition.bottom('40px').start('40px');
-            case 'bottom-center':
-                return globalPosition.bottom('40px').centerHorizontally();
-            default:
-                return globalPosition.bottom('40px').end('40px');
-        }
-    }
-    show(toastConfig) {
-        if (this.lastToast) {
-            this.lastToast.close();
-        }
-        const overlayRef = this.overlay.create({
-            hasBackdrop: false,
-            positionStrategy: this.getPositionStrategy(toastConfig.position)
-        });
-        const portal = new ComponentPortal(MonkeyToastComponent);
-        const componentRef = overlayRef.attach(portal);
-        this.lastToast = new MonkeyToastRef(componentRef);
-        componentRef.instance.id = getRandomString(6);
-        componentRef.instance.type = toastConfig.type ?? 'default';
-        componentRef.instance.icon = toastConfig.icon;
-        componentRef.instance.isClosable = toastConfig.isClosable ?? false;
-        componentRef.instance.message = toastConfig.message;
-        componentRef.instance.actionLabel = toastConfig.actionLabel;
-        componentRef.instance.actionIcon = toastConfig.actionIcon;
-        componentRef.instance.onActionClick.subscribe(() => {
-            if (toastConfig.action) {
-                toastConfig.action();
-                if (toastConfig.closeOnAction ?? true) {
-                    componentRef.instance.close();
-                }
+      @case ('arrowDown') {
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 10L12 14L16 10"
+            stroke="var(--mecx-color-gray-900)"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      }
+
+      @case ('check') {
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9.808 2.528 C 9.752 2.542,9.671 2.574,9.628 2.599 C 9.585 2.625,8.414 3.781,7.025 5.168 L 4.500 7.690 3.475 6.667 C 2.865 6.059,2.414 5.624,2.360 5.594 C 2.137 5.467,1.822 5.478,1.603 5.620 C 1.226 5.863,1.141 6.369,1.419 6.715 C 1.558 6.887,4.068 9.375,4.140 9.411 C 4.366 9.525,4.634 9.525,4.860 9.411 C 4.931 9.376,10.438 3.892,10.581 3.715 C 10.688 3.582,10.742 3.425,10.742 3.250 C 10.742 2.758,10.293 2.410,9.808 2.528 "
+            stroke="none"
+            fill-rule="evenodd"
+            fill="var(--mecx-color-theme-contrast-500"
+          ></path>
+        </svg>
+      }
+
+      @case ('minus') {
+        <svg width="8" height="2" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M1.333 0.268 C 1.300 0.274,1.225 0.303,1.167 0.332 C 1.054 0.388,0.939 0.490,0.866 0.599 C 0.776 0.732,0.732 0.936,0.757 1.098 C 0.786 1.283,0.848 1.405,0.977 1.532 C 1.071 1.624,1.148 1.673,1.253 1.710 L 1.340 1.740 4.000 1.740 L 6.660 1.740 6.747 1.710 C 6.943 1.642,7.128 1.462,7.200 1.270 C 7.265 1.095,7.265 0.904,7.200 0.730 C 7.118 0.510,6.880 0.308,6.655 0.267 C 6.565 0.250,1.420 0.251,1.333 0.268"
+            stroke="none"
+            fill-rule="evenodd"
+            fill="var(--mecx-color-theme-contrast-500"
+          ></path>
+        </svg>
+      }
+
+      @case ('loading') {
+        <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 0.75s infinite linear;
             }
-        });
-        componentRef.instance.onClose.subscribe(() => {
-            overlayRef.detach();
-        });
-        if (!toastConfig.keepOpen) {
-            setTimeout(() => {
-                componentRef.instance.close();
-            }, toastConfig.duration ?? 4000);
-        }
-        return componentRef.instance;
+            @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>
+      }
+
+      @case ('searchFail') {
+        <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>
+      }
+
+      @case ('search') {
+        <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: MonkeyToastService, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToastService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToastService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
+  `
                 }]
-        }], 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
@@ -238,10 +377,8 @@ class MonkeyAccordionComponent {
         this._id = value || this._uid;
     }
     constructor() {
-        this._icons = inject(MonkeyIconsService);
         this.open = false;
         this.disabled = false;
-        this.imgArrowDown = this._icons.arrowDown;
         this._uid = inject(IdGenerator).getId('monkey-accordion-');
         // eslint-disable-next-line no-self-assign
         this.id = this.id;
@@ -252,22 +389,19 @@ class MonkeyAccordionComponent {
         this.open = !this.open;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyAccordionComponent, isStandalone: true, selector: "monkey-accordion", inputs: { open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], title: "title", id: "id" }, host: { attributes: { "data-testid": "monkey-accordion" }, properties: { "class.disabled": "disabled", "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div class=\"header\" (click)=\"onClick()\">\n  <div class=\"title\">\n    @if (titleRef) {\n      <ng-container *ngTemplateOutlet=\"titleRef\" />\n    } @else {\n      {{ titleStr }}\n    }\n  </div>\n  <div [innerHTML]=\"imgArrowDown\" class=\"icon\" [class.rotated]=\"open\"></div>\n</div>\n<div class=\"content-wrapper\">\n  @if (open) {\n    <div [@content]>\n      <div class=\"content\">\n        <ng-content />\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;border-radius:16px;border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white);overflow:hidden}:host .header{display:flex;align-items:center;justify-content:space-between;padding:24px;gap:24px;cursor:pointer}:host .header .title{color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px}:host .header .icon{transform:rotate(0);transition:transform .2s ease-in-out}:host .header .icon.rotated{transform:rotate(180deg)}:host.disabled .header{cursor:not-allowed;background:var(--mecx-color-gray-200)}:host .content-wrapper{border-top:1px solid var(--mecx-color-gray-200);overflow:hidden}:host .content-wrapper .content{padding:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyAccordionComponent, isStandalone: true, selector: "monkey-accordion", inputs: { open: ["open", "open", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], title: "title", id: "id" }, host: { attributes: { "data-testid": "monkey-accordion" }, properties: { "class.disabled": "disabled", "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div class=\"header\" (click)=\"onClick()\">\n  <div class=\"title\">\n    @if (titleRef) {\n      <ng-container *ngTemplateOutlet=\"titleRef\" />\n    } @else {\n      {{ titleStr }}\n    }\n  </div>\n  <util-icon class=\"icon\" name=\"arrowDown\" [class.rotated]=\"open\" />\n</div>\n<div class=\"content-wrapper\">\n  @if (open) {\n    <div [@content]>\n      <div class=\"content\">\n        <ng-content />\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;border-radius:16px;border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white);overflow:hidden}:host .header{display:flex;align-items:center;justify-content:space-between;padding:24px;gap:24px;cursor:pointer}:host .header .title{color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px}:host .header .icon{transform:rotate(0);transition:transform .2s ease-in-out}:host .header .icon.rotated{transform:rotate(180deg)}:host.disabled .header{cursor:not-allowed;background:var(--mecx-color-gray-200)}:host .content-wrapper{overflow:hidden}:host .content-wrapper .content{border-top:1px solid var(--mecx-color-gray-200);padding:24px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], animations: [
             trigger('content', [
                 state('void', style({
-                    height: '0px',
-                    overflow: 'hidden'
+                    height: '0px'
                 })),
                 transition(':enter', [
                     animate('300ms ease-in-out', style({
-                        height: '*',
-                        overflow: 'hidden'
+                        height: '*'
                     }))
                 ]),
                 transition(':leave', [
                     animate('300ms ease-in-out', style({
-                        height: '0px',
-                        overflow: 'hidden'
+                        height: '0px'
                     }))
                 ])
             ])
@@ -275,7 +409,7 @@ class MonkeyAccordionComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyAccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'monkey-accordion', standalone: true, imports: [CommonModule], host: {
+            args: [{ selector: 'monkey-accordion', standalone: true, imports: [CommonModule, UtilIconComponent], host: {
                         'data-testid': 'monkey-accordion',
                         '[class.disabled]': 'disabled',
                         '[attr.id]': 'id',
@@ -283,23 +417,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     }, animations: [
                         trigger('content', [
                             state('void', style({
-                                height: '0px',
-                                overflow: 'hidden'
+                                height: '0px'
                             })),
                             transition(':enter', [
                                 animate('300ms ease-in-out', style({
-                                    height: '*',
-                                    overflow: 'hidden'
+                                    height: '*'
                                 }))
                             ]),
                             transition(':leave', [
                                 animate('300ms ease-in-out', style({
-                                    height: '0px',
-                                    overflow: 'hidden'
+                                    height: '0px'
                                 }))
                             ])
                         ])
-                    ], template: "<div class=\"header\" (click)=\"onClick()\">\n  <div class=\"title\">\n    @if (titleRef) {\n      <ng-container *ngTemplateOutlet=\"titleRef\" />\n    } @else {\n      {{ titleStr }}\n    }\n  </div>\n  <div [innerHTML]=\"imgArrowDown\" class=\"icon\" [class.rotated]=\"open\"></div>\n</div>\n<div class=\"content-wrapper\">\n  @if (open) {\n    <div [@content]>\n      <div class=\"content\">\n        <ng-content />\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;border-radius:16px;border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white);overflow:hidden}:host .header{display:flex;align-items:center;justify-content:space-between;padding:24px;gap:24px;cursor:pointer}:host .header .title{color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px}:host .header .icon{transform:rotate(0);transition:transform .2s ease-in-out}:host .header .icon.rotated{transform:rotate(180deg)}:host.disabled .header{cursor:not-allowed;background:var(--mecx-color-gray-200)}:host .content-wrapper{border-top:1px solid var(--mecx-color-gray-200);overflow:hidden}:host .content-wrapper .content{padding:24px}\n"] }]
+                    ], template: "<div class=\"header\" (click)=\"onClick()\">\n  <div class=\"title\">\n    @if (titleRef) {\n      <ng-container *ngTemplateOutlet=\"titleRef\" />\n    } @else {\n      {{ titleStr }}\n    }\n  </div>\n  <util-icon class=\"icon\" name=\"arrowDown\" [class.rotated]=\"open\" />\n</div>\n<div class=\"content-wrapper\">\n  @if (open) {\n    <div [@content]>\n      <div class=\"content\">\n        <ng-content />\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex;flex-direction:column;border-radius:16px;border:2px solid var(--mecx-color-gray-400);background:var(--mecx-color-white);overflow:hidden}:host .header{display:flex;align-items:center;justify-content:space-between;padding:24px;gap:24px;cursor:pointer}:host .header .title{color:var(--mecx-color-gray-900);font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px}:host .header .icon{transform:rotate(0);transition:transform .2s ease-in-out}:host .header .icon.rotated{transform:rotate(180deg)}:host.disabled .header{cursor:not-allowed;background:var(--mecx-color-gray-200)}:host .content-wrapper{overflow:hidden}:host .content-wrapper .content{border-top:1px solid var(--mecx-color-gray-200);padding:24px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -339,7 +470,7 @@ class MonkeyActionBarComponent {
     </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 }); }
+  }`, 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 var(--mecx-color-box-shadow),0 8px 8px 0 var(--mecx-color-box-shadow),0 16px 16px 8px var(--mecx-color-box-shadow);z-index:999}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.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,
@@ -354,7 +485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '[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"] }]
+                    }, 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 var(--mecx-color-box-shadow),0 8px 8px 0 var(--mecx-color-box-shadow),0 16px 16px 8px var(--mecx-color-box-shadow);z-index:999}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']
@@ -384,7 +515,7 @@ class MonkeyIconComponent {
         this._id = value || this._uid;
     }
     constructor() {
-        this.size = '';
+        this.size = 'lg';
         this._icon = '';
         this._uid = inject(IdGenerator).getId('monkey-icon-');
         // eslint-disable-next-line no-self-assign
@@ -396,7 +527,7 @@ 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: '', 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 }); }
+    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:16px;width:16px;height:16px}monkey-icon.md{font-size:18px;width:18px;height:18px}monkey-icon.lg{font-size:24px;width:24px;height:24px}monkey-icon.xl{font-size:32px;width:32px;height:32px}monkey-icon.xxl{font-size:48px;width:48px;height:48px}\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,
@@ -404,7 +535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '[class]': `_icon+' '+size`,
                         '[attr.id]': 'id',
                         '[id]': 'id'
-                    }, 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:16px;width:16px;height:16px}monkey-icon.md{font-size:18px;width:18px;height:18px}monkey-icon.lg{font-size:24px;width:24px;height:24px}monkey-icon.xl{font-size:32px;width:32px;height:32px}monkey-icon.xxl{font-size:48px;width:48px;height:48px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { icon: [{
                 type: Input
             }], size: [{
@@ -631,7 +762,7 @@ class MonkeyBreadcrumbComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyBreadcrumbComponent, isStandalone: true, selector: "monkey-breadcrumb", inputs: { first: "first", last: "last", colapsed: ["colapsed", "colapsed", booleanAttribute], id: "id" }, host: { attributes: { "data-testid": "monkey-breadcrumb" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div class=\"breadcrumbs\">\n  <a class=\"first\" (click)=\"handleNavigate(first)\">\n    {{ first.label | titlecase }}\n  </a>\n  <span>/</span>\n  @if(colapsed){\n  <span>...</span>\n  <span>/</span>\n  }\n  <a class=\"last\" (click)=\"handleNavigate(last)\">\n    {{ last.label | titlecase }}\n  </a>\n</div>\n", styles: ["monkey-breadcrumb .last{color:var(--mecx-color-theme-main);text-decoration:none}monkey-breadcrumb .last:hover{text-decoration:underline}monkey-breadcrumb .first{color:#000;text-decoration:none}monkey-breadcrumb .first:hover{text-decoration:underline}monkey-breadcrumb .breadcrumbs{display:flex;gap:8px;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyBreadcrumbComponent, isStandalone: true, selector: "monkey-breadcrumb", inputs: { first: "first", last: "last", colapsed: ["colapsed", "colapsed", booleanAttribute], id: "id" }, host: { attributes: { "data-testid": "monkey-breadcrumb" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<div class=\"breadcrumbs\">\n  <a class=\"first\" (click)=\"handleNavigate(first)\">\n    {{ first.label | titlecase }}\n  </a>\n  <span>/</span>\n  @if(colapsed){\n  <span>...</span>\n  <span>/</span>\n  }\n  <a class=\"last\" (click)=\"handleNavigate(last)\">\n    {{ last.label | titlecase }}\n  </a>\n</div>\n", styles: ["monkey-breadcrumb .last{color:var(--mecx-color-theme-main);text-decoration:none}monkey-breadcrumb .last:hover{text-decoration:underline}monkey-breadcrumb .first{color:#000;text-decoration:none}monkey-breadcrumb .first:hover{text-decoration:underline}monkey-breadcrumb .breadcrumbs{display:flex;gap:8px;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyBreadcrumbComponent, decorators: [{
             type: Component,
@@ -674,6 +805,7 @@ class MonkeyButtonComponent {
     constructor() {
         this.size = 'md';
         this.type = 'primary';
+        this.elementRef = inject(ElementRef);
         this._uid = inject(IdGenerator).getId('monkey-button-');
         // eslint-disable-next-line no-self-assign
         this.id = this.id;
@@ -685,8 +817,11 @@ class MonkeyButtonComponent {
             event.stopImmediatePropagation();
         }
     }
+    get element() {
+        return this.elementRef.nativeElement;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyButtonComponent, isStandalone: true, selector: "monkey-button", inputs: { disabled: "disabled", size: "size", type: "type", id: "id" }, host: { attributes: { "data-testid": "monkey-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button class=\"mecx-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled\">\n  <div class=\"content\">\n    <ng-content select=\"[first]\"></ng-content>\n    <span><ng-content></ng-content></span>\n    <ng-content select=\"[last]\"></ng-content>\n  </div>\n</button>\n", styles: ["monkey-button{display:inline-block}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:unset}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyButtonComponent, isStandalone: true, selector: "monkey-button", inputs: { disabled: "disabled", size: "size", type: "type", id: "id" }, host: { attributes: { "data-testid": "monkey-button" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id" } }, ngImport: i0, template: "<button class=\"mecx-button\" [ngClass]=\"type + ' ' + size\" [disabled]=\"disabled\">\n  <div class=\"content\">\n    <ng-content select=\"[first]\"></ng-content>\n    <span><ng-content></ng-content></span>\n    <ng-content select=\"[last]\"></ng-content>\n  </div>\n</button>\n", styles: ["monkey-button{display:inline-block}monkey-button .mecx-button{width:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:background-color .15s ease-out,color .15s ease-out}monkey-button .mecx-button .content{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;flex-shrink:0;letter-spacing:.48px;font-weight:400;transition:transform .2s cubic-bezier(0,.5,.2,1)}monkey-button .mecx-button .content span{width:100%}monkey-button .mecx-button .content .mk-i{display:flex}monkey-button .mecx-button.secondary{border:2px solid var(--mecx-color-gray-400);background:unset}monkey-button .mecx-button.secondary:disabled{border-width:1px}monkey-button .mecx-button:disabled{background:var(--mecx-color-gray-100)!important;color:var(--mecx-color-gray-400)!important;cursor:not-allowed!important}monkey-button .mecx-button:disabled.secondary{background:unset!important;border:1px solid var(--mecx-color-gray-400)!important}monkey-button .mecx-button.primary{color:var(--mecx-color-theme-contrast-main);background:var(--mecx-color-theme-main)}monkey-button .mecx-button.primary:hover:not(:disabled){background:var(--mecx-color-theme-600)}monkey-button .mecx-button.secondary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.tertiary{background:unset}monkey-button .mecx-button.tertiary span{text-decoration:underline}monkey-button .mecx-button.tertiary:disabled{background:unset!important;border-width:1px}monkey-button .mecx-button.tertiary:hover:not(:disabled){color:var(--mecx-color-theme-main)}monkey-button .mecx-button.sm{height:32px}monkey-button .mecx-button.sm .mk-i{font-size:20px}monkey-button .mecx-button.md{height:40px}monkey-button .mecx-button.md .mk-i{font-size:22px}monkey-button .mecx-button.lg{height:48px;text-align:center;font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.48px}monkey-button .mecx-button.lg .mk-i{font-size:24px}monkey-button .mecx-button.full-width{width:100%}monkey-button .mecx-button:focus{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-button .mecx-button:active:not(:disabled).primary{background:var(--mecx-color-theme-main);opacity:.8;outline:none}monkey-button .mecx-button:active:not(:disabled) .content{transform:scale(.8)}:host:has(.mecx-button:active) .mecx-button{outline:unset;outline-offset:unset}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyButtonComponent, decorators: [{
             type: Component,
@@ -791,11 +926,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyError {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyError, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyError, selector: "monkey-error", ngImport: i0 }); }
+class MonkeyErrorDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyErrorDirective, selector: "monkey-error", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyError, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyErrorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'monkey-error'
@@ -807,11 +942,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyHelper {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyHelper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyHelper, selector: "monkey-helper", ngImport: i0 }); }
+class MonkeyHelperDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyHelperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyHelperDirective, selector: "monkey-helper", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyHelperDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'monkey-helper'
@@ -823,11 +958,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyInfo {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInfo, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyInfo, selector: "monkey-info", ngImport: i0 }); }
+class MonkeyInfoDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInfoDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyInfoDirective, selector: "monkey-info", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInfo, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInfoDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'monkey-info'
@@ -839,65 +974,438 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyLabel {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyLabel, selector: "monkey-label", ngImport: i0 }); }
+class MonkeyLabelDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyLabelDirective, selector: "monkey-label", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyLabelDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'monkey-label'
                 }]
         }] });
 
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeyPrefix {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyPrefix, selector: "monkey-prefix", ngImport: i0 }); }
+const MONKEY_I18N_WRAPPER = new InjectionToken('');
+const MONKEY_POPOVER_OPTIONS = new InjectionToken('MONKEY_POPOVER_OPTIONS');
+const MONKEY_COUNTRY_CODE = new InjectionToken('+55');
+
+class MonkeyPopoverContentComponent {
+    constructor(host) {
+        this.host = host;
+        this.onClose = new EventEmitter();
+        // not to do
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            const focusable = this.host.nativeElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            focusable?.focus();
+        });
+    }
+    isTemplate(value) {
+        return value instanceof TemplateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPopoverContentComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyPopoverContentComponent, isStandalone: true, selector: "monkey-popover-content", inputs: { title: "title", content: "content", actions: "actions", hideHeader: ["hideHeader", "hideHeader", booleanAttribute], hideClose: ["hideClose", "hideClose", booleanAttribute], hideActions: ["hideActions", "hideActions", booleanAttribute] }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
+    <div class="mecx-popover-container">
+      @if (!hideHeader) {
+        <div class="mecx-popover-header">
+          @if (title) {
+            <div>
+              <ng-container *ngIf="isTemplate(title); else stringTitle">
+                <ng-container *ngTemplateOutlet="title"></ng-container>
+              </ng-container>
+              <ng-template #stringTitle>
+                {{ title }}
+              </ng-template>
+            </div>
+          }
+
+          @if (!hideClose) {
+            <util-icon class="mecx-popover-close" name="clear" (click)="onClose.next(null)" />
+          }
+        </div>
+      }
+
+      <div class="mecx-popover-content" [class.add-radius]="hideHeader">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </div>
+
+      @if (!hideActions) {
+        <div class="mecx-popover-actions" *ngIf="actions">
+          <ng-container *ngIf="isTemplate(actions); else stringActions">
+            <ng-container *ngTemplateOutlet="actions"></ng-container>
+          </ng-container>
+          <ng-template #stringActions>
+            <span>{{ actions }}</span>
+          </ng-template>
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPrefix, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPopoverContentComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: 'monkey-prefix'
-                }]
-        }] });
+                    selector: 'monkey-popover-content',
+                    standalone: true,
+                    imports: [CommonModule, NgTemplateOutlet, UtilIconComponent],
+                    template: `
+    <div class="mecx-popover-container">
+      @if (!hideHeader) {
+        <div class="mecx-popover-header">
+          @if (title) {
+            <div>
+              <ng-container *ngIf="isTemplate(title); else stringTitle">
+                <ng-container *ngTemplateOutlet="title"></ng-container>
+              </ng-container>
+              <ng-template #stringTitle>
+                {{ title }}
+              </ng-template>
+            </div>
+          }
 
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeySuffix {
+          @if (!hideClose) {
+            <util-icon class="mecx-popover-close" name="clear" (click)="onClose.next(null)" />
+          }
+        </div>
+      }
+
+      <div class="mecx-popover-content" [class.add-radius]="hideHeader">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </div>
+
+      @if (!hideActions) {
+        <div class="mecx-popover-actions" *ngIf="actions">
+          <ng-container *ngIf="isTemplate(actions); else stringActions">
+            <ng-container *ngTemplateOutlet="actions"></ng-container>
+          </ng-container>
+          <ng-template #stringActions>
+            <span>{{ actions }}</span>
+          </ng-template>
+        </div>
+      }
+    </div>
+  `
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { title: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], onClose: [{
+                type: Output
+            }], hideHeader: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideClose: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideActions: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+class MonkeyPopoverDirective {
+    set popover(show) {
+        if (this._show === show) {
+            return;
+        }
+        this._show = show;
+        if (show) {
+            this.createPopover();
+        }
+        else {
+            this.disposePopover();
+        }
+    }
+    get popover() {
+        return this._show;
+    }
+    set target(value) {
+        this._target = value;
+    }
+    get target() {
+        return this._target;
+    }
     constructor() {
-        this.hasAction = false;
-        this.action = null;
+        this._tpl = inject(TemplateRef);
+        this._vcr = inject(ViewContainerRef);
+        this._el = inject(ElementRef);
+        this._zone = inject(NgZone);
+        this._overlay = inject(Overlay);
+        this._overlayPositionBuilder = inject(OverlayPositionBuilder);
+        this._router = inject(Router);
+        this._destroyRef = inject(DestroyRef);
+        this._show = false;
+        this.minwidth = false;
+        this.backdrop = true;
+        this.watch = false;
+        this.dir = 'ltr';
+        this.contextmenu = false;
+        this._router.events
+            .pipe(filter((event) => {
+            return event instanceof NavigationStart;
+        }), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this.closePopover();
+        });
     }
-    set _hasAction(value) {
-        this.hasAction = true;
+    ngOnDestroy() {
+        this.disposePopover();
+        this._resizeObserver?.disconnect();
+    }
+    closePopover(event) {
+        if (this._show) {
+            this._show = false;
+            this.disposePopover();
+            this._zone.run(() => {
+                this.closed?.(event);
+            });
+        }
     }
-    onClick(event) {
-        if (!this.action) {
-            event.preventDefault();
-            event.stopPropagation();
+    disposePopover() {
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = undefined;
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = undefined;
         }
-        else {
-            this.action(event);
+    }
+    getPositions(dir) {
+        const oppositeVertical = {
+            top: 'bottom',
+            bottom: 'top',
+            center: 'center'
+        };
+        const oppositeHorizontal = {
+            start: 'end',
+            end: 'start',
+            center: 'center'
+        };
+        const centerY = (pos) => {
+            return {
+                originX: 'center',
+                originY: pos,
+                overlayX: 'center',
+                overlayY: oppositeVertical[pos]
+            };
+        };
+        const centerX = (pos) => {
+            return {
+                originX: oppositeHorizontal[pos],
+                originY: 'center',
+                overlayX: pos,
+                overlayY: 'center'
+            };
+        };
+        const ltr = (axis) => {
+            return {
+                originX: 'start',
+                originY: axis,
+                overlayX: 'start',
+                overlayY: oppositeVertical[axis]
+            };
+        };
+        const rtl = (axis) => {
+            return {
+                originX: 'end',
+                originY: axis,
+                overlayX: 'end',
+                overlayY: oppositeVertical[axis]
+            };
+        };
+        const side = (axisX, axisY) => {
+            return {
+                originX: axisX,
+                originY: axisY,
+                overlayX: oppositeHorizontal[axisX],
+                overlayY: axisY
+            };
+        };
+        const cmp = dir ?? this._options?.dir ?? this.dir;
+        switch (cmp) {
+            case 'ct':
+                return [centerY('top'), centerY('bottom'), centerX('start'), centerX('end')];
+            case 'cr':
+                return [centerX('end'), centerX('start'), centerY('top'), centerY('bottom')];
+            case 'cc':
+                return [centerX('center')];
+            case 'ltr':
+                return [ltr('bottom'), ltr('top')];
+            case 'rtl':
+                return [rtl('bottom'), rtl('top')];
+            case 'tltr':
+                return [ltr('top'), ltr('bottom')];
+            case 'trtl':
+                return [rtl('top'), rtl('bottom')];
+            case 'rt':
+                return [side('end', 'top'), side('end', 'bottom'), ltr('top')];
+            case 'rb':
+                return [side('end', 'bottom'), side('end', 'top'), ltr('bottom'), rtl('bottom')];
+            case 'lt':
+                return [side('start', 'top'), side('start', 'bottom'), rtl('top')];
+            case 'lb':
+                return [side('start', 'bottom'), side('start', 'top'), rtl('bottom')];
+            default:
+                return [];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeySuffix, selector: "monkey-suffix", inputs: { _hasAction: ["hasAction", "_hasAction"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.has-action": "hasAction" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySuffix, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'monkey-suffix',
-                    host: {
-                        '[class.has-action]': 'hasAction'
-                    }
+    createPopover(origin, options) {
+        if (!this.target) {
+            // eslint-disable-next-line no-console
+            console.error('MonkeyPopoverDirective -> target element is not defined.');
+            return;
+        }
+        const originEl = this.target instanceof HTMLElement ? this.target : this.target.element;
+        this._positionStrategy = this._overlayPositionBuilder
+            .flexibleConnectedTo(origin ?? originEl)
+            .withPush(true)
+            .withGrowAfterOpen(true)
+            .withPositions(this.getPositions(options?.dir));
+        this._overlayRef = this._overlay.create({
+            positionStrategy: this._positionStrategy,
+            disposeOnNavigation: true,
+            direction: 'ltr',
+            hasBackdrop: this.backdrop,
+            scrollStrategy: this._overlay.scrollStrategies.reposition(),
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            width: this._options?.minwidth || this.minwidth ? this.target.offsetWidth - 2 : undefined,
+            maxHeight: '95%',
+            height: this.height
+        });
+        this._overlayRef
+            .backdropClick()
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe((event) => {
+            this.closePopover(event);
+        });
+        const portal = new ComponentPortal(MonkeyPopoverContentComponent, this._vcr);
+        this._componentRef = this._overlayRef.attach(portal);
+        this._componentRef.instance.content = this._tpl;
+        this._componentRef.instance.title = this.title;
+        this._componentRef.instance.actions = this.actions;
+        this._componentRef.instance.hideClose = this.hideClose;
+        this._componentRef.instance.hideHeader = this.hideHeader;
+        this._componentRef.instance.hideActions = this.hideActions;
+        if (!this.hideClose || !this.hideHeader) {
+            this._componentRef.instance.onClose
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe(() => {
+                this.closePopover();
+            });
+        }
+        if (this.watch && 'ResizeObserver' in window) {
+            this._resizeObserver = new ResizeObserver(() => {
+                this._overlayRef?.updatePosition();
+            });
+            this._resizeObserver.observe(this._componentRef.location.nativeElement);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyPopoverDirective, selector: "[monkeyPopover]", inputs: { popover: ["monkeyPopover", "popover"], closed: ["monkeyPopoverClosed", "closed"], target: ["monkeyPopoverTarget", "target"], minwidth: ["monkeyPopoverMinwidth", "minwidth"], backdrop: ["monkeyPopoverBackdrop", "backdrop"], watch: ["monkeyPopoverWatch", "watch"], dir: ["monkeyPopoverDir", "dir"], contextmenu: ["monkeyPopoverContextmenu", "contextmenu"], height: ["monkeyPopoverHeight", "height"], title: ["monkeyPopoverTitle", "title"], actions: ["monkeyPopoverActions", "actions"], hideClose: ["monkeyPopoverHideClose", "hideClose", booleanAttribute], hideHeader: ["monkeyPopoverHideHeader", "hideHeader", booleanAttribute], hideActions: ["monkeyPopoverHideActions", "hideActions", booleanAttribute] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPopoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[monkeyPopover]'
+                }]
+        }], ctorParameters: () => [], propDecorators: { _options: [{
+                type: Optional
+            }, {
+                type: Inject,
+                args: [MONKEY_POPOVER_OPTIONS]
+            }], popover: [{
+                type: Input,
+                args: ['monkeyPopover']
+            }], closed: [{
+                type: Input,
+                args: ['monkeyPopoverClosed']
+            }], target: [{
+                type: Input,
+                args: ['monkeyPopoverTarget']
+            }], minwidth: [{
+                type: Input,
+                args: ['monkeyPopoverMinwidth']
+            }], backdrop: [{
+                type: Input,
+                args: ['monkeyPopoverBackdrop']
+            }], watch: [{
+                type: Input,
+                args: ['monkeyPopoverWatch']
+            }], dir: [{
+                type: Input,
+                args: ['monkeyPopoverDir']
+            }], contextmenu: [{
+                type: Input,
+                args: ['monkeyPopoverContextmenu']
+            }], height: [{
+                type: Input,
+                args: ['monkeyPopoverHeight']
+            }], title: [{
+                type: Input,
+                args: ['monkeyPopoverTitle']
+            }], actions: [{
+                type: Input,
+                args: ['monkeyPopoverActions']
+            }], hideClose: [{
+                type: Input,
+                args: [{ alias: 'monkeyPopoverHideClose', transform: booleanAttribute }]
+            }], hideHeader: [{
+                type: Input,
+                args: [{ alias: 'monkeyPopoverHideHeader', transform: booleanAttribute }]
+            }], hideActions: [{
+                type: Input,
+                args: [{ alias: 'monkeyPopoverHideActions', transform: booleanAttribute }]
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyPrefixDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyPrefixDirective, selector: "monkey-prefix", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyPrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-prefix'
+                }]
+        }] });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeySuffixDirective {
+    constructor() {
+        this.hasAction = false;
+        this.action = null;
+    }
+    set _hasAction(value) {
+        this.hasAction = true;
+    }
+    onClick(event) {
+        if (!this.action) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        else {
+            this.action(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: MonkeySuffixDirective, selector: "monkey-suffix", inputs: { _hasAction: ["hasAction", "_hasAction"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.has-action": "hasAction" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'monkey-suffix',
+                    host: {
+                        '[class.has-action]': 'hasAction'
+                    }
                 }]
         }], propDecorators: { _hasAction: [{
                 type: Input,
@@ -914,41 +1422,46 @@ 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,
-            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 }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDirectivesModule, declarations: [MonkeyErrorDirective,
+            MonkeyHelperDirective,
+            MonkeyInfoDirective,
+            MonkeyLabelDirective,
+            MonkeyPrefixDirective,
+            MonkeySuffixDirective,
+            MonkeyBadgeDirective,
+            MonkeyPopoverDirective], imports: [MonkeyPopoverContentComponent], exports: [MonkeyErrorDirective,
+            MonkeyHelperDirective,
+            MonkeyInfoDirective,
+            MonkeyLabelDirective,
+            MonkeyPrefixDirective,
+            MonkeySuffixDirective,
+            MonkeyBadgeDirective,
+            MonkeyPopoverDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDirectivesModule, imports: [MonkeyPopoverContentComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDirectivesModule, decorators: [{
             type: NgModule,
             args: [{
+                    imports: [MonkeyPopoverContentComponent],
                     declarations: [
-                        MonkeyError,
-                        MonkeyHelper,
-                        MonkeyInfo,
-                        MonkeyLabel,
-                        MonkeyPrefix,
-                        MonkeySuffix,
-                        MonkeyBadgeDirective
+                        MonkeyErrorDirective,
+                        MonkeyHelperDirective,
+                        MonkeyInfoDirective,
+                        MonkeyLabelDirective,
+                        MonkeyPrefixDirective,
+                        MonkeySuffixDirective,
+                        MonkeyBadgeDirective,
+                        MonkeyPopoverDirective
                     ],
                     exports: [
-                        MonkeyError,
-                        MonkeyHelper,
-                        MonkeyInfo,
-                        MonkeyLabel,
-                        MonkeyPrefix,
-                        MonkeySuffix,
-                        MonkeyBadgeDirective
+                        MonkeyErrorDirective,
+                        MonkeyHelperDirective,
+                        MonkeyInfoDirective,
+                        MonkeyLabelDirective,
+                        MonkeyPrefixDirective,
+                        MonkeySuffixDirective,
+                        MonkeyBadgeDirective,
+                        MonkeyPopoverDirective
                     ]
                 }]
         }] });
@@ -967,12 +1480,9 @@ class MonkeyCheckboxComponent {
         this.size = 'md';
         this.onChange = new EventEmitter();
         this._destroyRef = inject(DestroyRef);
-        this.icons = inject(MonkeyIconsService);
         this.idGenerator = inject(IdGenerator);
         this.injector = inject(Injector);
         this.cdr = inject(ChangeDetectorRef);
-        this.iconCheck = this.icons.check;
-        this.iconIndeterminate = this.icons.minus;
         this.inputId = this.idGenerator.getId('input-checkbox-');
         this.value = false;
         this.isFocused = false;
@@ -1074,7 +1584,7 @@ class MonkeyCheckboxComponent {
                 useExisting: MonkeyCheckboxComponent,
                 multi: true
             }
-        ], 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: [
+        ], queries: [{ propertyName: "infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "labelChildren", predicate: MonkeyLabelDirective, descendants: true }, { propertyName: "helperChildren", predicate: MonkeyHelperDirective, 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      <util-icon class=\"icon\" name=\"minus\" />\n    } @else if (value) {\n      <util-icon class=\"icon\" name=\"check\" />\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 }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], animations: [
             trigger('iconAnimation', [
                 transition(':enter', [
                     animate('250ms ease-in-out', keyframes([
@@ -1093,7 +1603,7 @@ class MonkeyCheckboxComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'monkey-checkbox', standalone: true, imports: [ReactiveFormsModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+            args: [{ selector: 'monkey-checkbox', standalone: true, imports: [ReactiveFormsModule, FormsModule, UtilIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('iconAnimation', [
                             transition(':enter', [
                                 animate('250ms ease-in-out', keyframes([
@@ -1134,16 +1644,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '[class.sm]': 'size.includes("sm")',
                         '[class.md]': 'size.includes("md")',
                         '[class.lg]': 'size.includes("lg")'
-                    }, template: "@if (hasHeader) {\n  <div class=\"header\">\n    <ng-content select=\"monkey-label\" />\n    <ng-content select=\"monkey-helper\" />\n  </div>\n}\n<label [attr.for]=\"inputId\">\n  <input\n    type=\"checkbox\"\n    [checked]=\"value\"\n    [indeterminate]=\"indeterminate\"\n    [disabled]=\"disabled\"\n    (change)=\"onChangeEvent($event)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"onFocus()\"\n    [id]=\"inputId\"\n    [required]=\"required\"\n  />\n  <span class=\"checkbox\">\n    @if (indeterminate) {\n      <div class=\"icon\" @iconAnimation [innerHTML]=\"iconIndeterminate\"></div>\n    } @else if (value) {\n      <div class=\"icon\" @iconAnimation [innerHTML]=\"iconCheck\"></div>\n    }\n  </span>\n  <span class=\"checkbox-label\">\n    <ng-content></ng-content>\n  </span>\n</label>\n@if (showFooter) {\n  @switch (getFooterMessages()) {\n    @case ('error') {\n      <ng-content select=\"monkey-error\" />\n    }\n    @case ('info') {\n      <ng-content select=\"monkey-info\" />\n    }\n  }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}:host .checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:#fff;border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box}:host .checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host .checkbox-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px}:host input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host.sm .checkbox{width:16px;height:16px;border-radius:4px}:host.sm .checkbox-label{line-height:16px}:host.lg .checkbox-label{font-size:16px}:host.mecx-checkbox-checked .checkbox,:host.mecx-checkbox-indeterminate .checkbox{border:none;background-color:var(--mecx-color-theme-main)}:host.mecx-checkbox-focused .checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}:host.mecx-disabled .checkbox-label{color:var(--mecx-color-gray-400)}:host.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-200)}:host.mecx-checkbox-invalid:not(.mecx-checkbox-indeterminate) .checkbox{border:2px solid var(--mecx-color-error-700)}:host.mecx-checkbox-checked.mecx-disabled .checkbox,:host.mecx-checkbox-indeterminate.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-400)}\n"] }]
+                    }, 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      <util-icon class=\"icon\" name=\"minus\" />\n    } @else if (value) {\n      <util-icon class=\"icon\" name=\"check\" />\n    }\n  </span>\n  <span class=\"checkbox-label\">\n    <ng-content></ng-content>\n  </span>\n</label>\n@if (showFooter) {\n  @switch (getFooterMessages()) {\n    @case ('error') {\n      <ng-content select=\"monkey-error\" />\n    }\n    @case ('info') {\n      <ng-content select=\"monkey-info\" />\n    }\n  }\n}\n", styles: [":host{display:inline-flex;flex-direction:column;gap:6px}:host .header{display:flex;justify-content:space-between;gap:6px}:host label{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}:host .checkbox{display:block;width:24px;height:24px;border:2px solid var(--mecx-color-gray-400);background-color:#fff;border-radius:8px;position:relative;transition:background-color .2s ease;box-sizing:border-box}:host .checkbox .icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}:host .checkbox-label{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px}:host input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}:host.sm .checkbox{width:16px;height:16px;border-radius:4px}:host.sm .checkbox-label{line-height:16px}:host.lg .checkbox-label{font-size:16px}:host.mecx-checkbox-checked .checkbox,:host.mecx-checkbox-indeterminate .checkbox{border:none;background-color:var(--mecx-color-theme-main)}:host.mecx-checkbox-focused .checkbox{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}:host.mecx-disabled .checkbox-label{color:var(--mecx-color-gray-400)}:host.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-50);border-color:var(--mecx-color-gray-200)}:host.mecx-checkbox-invalid:not(.mecx-checkbox-indeterminate) .checkbox{border:2px solid var(--mecx-color-error-700)}:host.mecx-checkbox-checked.mecx-disabled .checkbox,:host.mecx-checkbox-indeterminate.mecx-disabled .checkbox{background-color:var(--mecx-color-gray-400)}\n"] }]
         }], propDecorators: { infoChildren: [{
                 type: ContentChildren,
-                args: [MonkeyInfo, { descendants: true }]
+                args: [MonkeyInfoDirective, { descendants: true }]
             }], labelChildren: [{
                 type: ContentChildren,
-                args: [MonkeyLabel, { descendants: true }]
+                args: [MonkeyLabelDirective, { descendants: true }]
             }], helperChildren: [{
                 type: ContentChildren,
-                args: [MonkeyHelper, { descendants: true }]
+                args: [MonkeyHelperDirective, { descendants: true }]
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -1170,8 +1680,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * MIT Licence
  ************************* */
 
-const MECX_I18N_WRAPPER = new InjectionToken('');
-
 /* eslint-disable no-console */
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
@@ -1352,7 +1860,7 @@ class MonkeyDictionaryService {
                 }
             }
         });
-        const tokenSubject = inject(MECX_I18N_WRAPPER, { optional: true });
+        const tokenSubject = inject(MONKEY_I18N_WRAPPER, { optional: true });
         tokenSubject?.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((value) => {
             this.handleWrapperValues(value);
         });
@@ -1439,7 +1947,8 @@ class MonkeyFormFieldComponent {
         return this._labelId;
     }
     get hideBorder() {
-        return this.control.type === 'input-code';
+        const { control } = this;
+        return control?.type === 'input-code' || control?.type === 'radio-button';
     }
     get showHeader() {
         return this.hasLabel || this.hasHelper;
@@ -1465,10 +1974,10 @@ class MonkeyFormFieldComponent {
         return this.control.type === 'date' && !this.hideAction;
     }
     get showCurrency() {
-        return this.control.currency;
+        return this.control.currency || false;
     }
     get showPercent() {
-        return this.control.percent;
+        return this.control.percent || false;
     }
     get showLoading() {
         return this.control.loading || false;
@@ -1476,7 +1985,6 @@ class MonkeyFormFieldComponent {
     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-');
@@ -1486,9 +1994,6 @@ class MonkeyFormFieldComponent {
         this._previousControl = null;
         this.currencySymbol = getCurrencySymbol(inject(DEFAULT_CURRENCY_CODE));
         this.percentSymbol = '%';
-        this.imgClear = this._icons.clear;
-        this.imgCalendar = this._icons.calendar;
-        this.imgLoading = this._icons.loading;
         this.hasLabel = false;
         this.hasHelper = false;
         this.hasPrefix = false;
@@ -1632,7 +2137,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", 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 }); }
+    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: MonkeyLabelDirective, descendants: true }, { propertyName: "_helperChildren", predicate: MonkeyHelperDirective, descendants: true }, { propertyName: "_prefixChildren", predicate: MonkeyPrefixDirective, descendants: true }, { propertyName: "_suffixChildren", predicate: MonkeySuffixDirective, descendants: true }, { propertyName: "_infoChildren", predicate: MonkeyInfoDirective, descendants: true }, { propertyName: "_errorChildren", predicate: MonkeyErrorDirective, 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    <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n  }\n  @if (showCalendar) {\n    <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n  }\n  @if (showLoading) {\n    <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\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-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{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;height:unset;align-items:flex-start;outline:none;outline-offset:unset}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}\n"], dependencies: [{ kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
             type: Component,
@@ -1645,7 +2150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '[attr.id]': 'id',
                         '[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"] }]
+                    }, 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    <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\n  }\n  @if (showCalendar) {\n    <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\n  }\n  @if (showLoading) {\n    <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\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-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{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;height:unset;align-items:flex-start;outline:none;outline-offset:unset}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{
                 type: Input
             }], hideAction: [{
@@ -1661,22 +2166,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: [MonkeyFormFieldControl]
             }], _labelChildren: [{
                 type: ContentChildren,
-                args: [MonkeyLabel, { descendants: true }]
+                args: [MonkeyLabelDirective, { descendants: true }]
             }], _helperChildren: [{
                 type: ContentChildren,
-                args: [MonkeyHelper, { descendants: true }]
+                args: [MonkeyHelperDirective, { descendants: true }]
             }], _prefixChildren: [{
                 type: ContentChildren,
-                args: [MonkeyPrefix, { descendants: true }]
+                args: [MonkeyPrefixDirective, { descendants: true }]
             }], _suffixChildren: [{
                 type: ContentChildren,
-                args: [MonkeySuffix, { descendants: true }]
+                args: [MonkeySuffixDirective, { descendants: true }]
             }], _infoChildren: [{
                 type: ContentChildren,
-                args: [MonkeyInfo, { descendants: true }]
+                args: [MonkeyInfoDirective, { descendants: true }]
             }], _errorChildren: [{
                 type: ContentChildren,
-                args: [MonkeyError, { descendants: true }]
+                args: [MonkeyErrorDirective, { descendants: true }]
             }] } });
 
 /** ************************
@@ -1686,12 +2191,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  ************************* */
 class MonkeyFormFieldModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldModule, declarations: [MonkeyFormFieldComponent], exports: [MonkeyFormFieldComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldModule, declarations: [MonkeyFormFieldComponent], imports: [UtilIconComponent], exports: [MonkeyFormFieldComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyFormFieldModule, decorators: [{
             type: NgModule,
             args: [{
+                    imports: [UtilIconComponent],
                     declarations: [MonkeyFormFieldComponent],
                     exports: [MonkeyFormFieldComponent]
                 }]
@@ -1829,7 +2335,7 @@ class MonkeyInputCurrencyDirective {
     focusOutChanged() {
         this.ngControl?.control?.markAsTouched();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputCurrencyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputCurrencyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyInputCurrencyDirective, selector: "input[monkey-input-currency]", inputs: { name: "name", disabled: ["disabled", "disabled", booleanAttribute], id: "id", required: "required", type: "type" }, host: { listeners: { "focus": "focusChanged(true)", "focusout": "focusOutChanged()", "blur": "focusChanged(false)" }, properties: { "class.mecx-input-disabled": "disabled", "id": "id", "disabled": "disabled", "required": "required", "attr.name": "name || null", "attr.disabled": "disabled || null", "attr.aria-invalid": "(empty && required) ? null : errorState", "attr.aria-required": "required", "attr.id": "id" }, classAttribute: "mecx-input" }, providers: [
             {
                 provide: MonkeyFormFieldControl,
@@ -1866,7 +2372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         }
                     ]
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.CurrencyPipe }], propDecorators: { name: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.CurrencyPipe }], propDecorators: { name: [{
                 type: Input
             }], disabled: [{
                 type: Input,
@@ -2131,7 +2637,7 @@ class MonkeyIconButtonComponent {
         }
     }
     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 }); }
+    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:16px}monkey-icon-button .mecx-icon-button.md{width:40px;height:40px}monkey-icon-button .mecx-icon-button.md .mk-i{font-size:18px}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.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,
@@ -2139,7 +2645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '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"] }]
+                    }, 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:16px}monkey-icon-button .mecx-icon-button.md{width:40px;height:40px}monkey-icon-button .mecx-icon-button.md .mk-i{font-size:18px}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: [{
@@ -2364,7 +2870,7 @@ class MonkeyDateRangeMonthComponent {
         });
     }
     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"] }] }); }
+    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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.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,
@@ -2433,7 +2939,7 @@ class MonkeyDateRangeQuickActionsComponent {
         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" }] }); }
+    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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyDateRangeQuickActionsComponent, decorators: [{
             type: Component,
@@ -2621,7 +3127,7 @@ class MonkeyDateRangeComponent {
         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"] }] }); }
+    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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.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: MonkeyErrorDirective, selector: "monkey-error" }, { kind: "directive", type: MonkeyLabelDirective, 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,
@@ -2960,7 +3466,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeyInputUploadComponent {
+class MonkeyOptionComponent {
+    constructor() {
+        this.idGenerator = inject(IdGenerator);
+        this.disabled = false;
+        this.type = 'select';
+        this.selected = false;
+        this.tabIndex = 0;
+        this.id = this.idGenerator.getId('mecx-option-');
+    }
+    get displayContent() {
+        return (this._content?.nativeElement.textContent || '').trim();
+    }
+    handleAction(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+        else {
+            this.action?.();
+        }
+    }
+    onClick(event) {
+        this.handleAction(event);
+    }
+    handleKeyDown(event) {
+        const { key } = event;
+        if (key === 'Enter' || key === ' ') {
+            this.handleAction(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyOptionComponent, isStandalone: true, selector: "monkey-option", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute], type: "type" }, host: { attributes: { "data-testid": "monkey-option" }, listeners: { "click": "onClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "attr.id": "id", "class.mecx-option-disabled": "disabled", "class.mecx-option-selected": "selected", "attr.tabindex": "disabled ? -1 : tabIndex", "class": "type" }, classAttribute: "mecx-option" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `<div #content><ng-content /></div>`, isInline: true, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:#fff;cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus{outline:unset;outline-offset:1px}monkey-option.radio:focus:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-option', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<div #content><ng-content /></div>`, encapsulation: ViewEncapsulation.None, host: {
+                        'data-testid': 'monkey-option',
+                        '[attr.id]': 'id',
+                        class: 'mecx-option',
+                        '[class.mecx-option-disabled]': 'disabled',
+                        '[class.mecx-option-selected]': 'selected',
+                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
+                        '[class]': 'type'
+                    }, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option.select:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.select.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:#fff;cursor:default}monkey-option.select.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.select.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.radio{display:flex;align-items:center;gap:10px;padding:8px 24px 8px 0;cursor:pointer;border-radius:4px;-webkit-user-select:none;user-select:none;position:relative}monkey-option.radio:before{content:\"\";width:20px;height:20px;border:2px solid var(--mecx-color-gray-600);border-radius:800px;box-sizing:border-box;background-color:var(--mecx-color-white)}monkey-option.radio:focus{outline:unset;outline-offset:1px}monkey-option.radio:focus:before{outline:2px solid var(--mecx-color-theme-main);outline-offset:1px}monkey-option.radio.mecx-option-selected:before{border:5px solid var(--mecx-color-theme-main)}monkey-option.radio.mecx-option-disabled{opacity:.5;pointer-events:none}monkey-option.radio.mecx-option-disabled:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}\n"] }]
+        }], propDecorators: { _content: [{
+                type: ViewChild,
+                args: ['content', { static: true }]
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], type: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], handleKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$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 MonkeySelectComponent {
     get disabled() {
         if (this.ngControl && this.ngControl.disabled !== null) {
             return this.ngControl.disabled;
@@ -2982,86 +3561,836 @@ class MonkeyInputUploadComponent {
         this.stateChanges.next();
     }
     set value(value) {
-        if (this._value !== value && value !== undefined) {
+        if (this._value !== value) {
             this._value = value;
             this._onChange(value);
-            this._onTouched(value);
         }
     }
     get value() {
         return this._value;
     }
-    constructor() {
-        this.progress = 0;
+    constructor(overlay, changeDetectorRef, viewContainerRef, formField) {
+        this.overlay = overlay;
+        this.changeDetectorRef = changeDetectorRef;
+        this.viewContainerRef = viewContainerRef;
+        this.formField = formField;
+        this.tabIndex = 0;
+        this.onChange = new EventEmitter();
+        this.onSearch = new EventEmitter();
         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.showSearch = true;
+        this.searchPlaceholder = '';
+        this.callbackSearch = false;
         this._value = null;
-        this.onChange = new EventEmitter();
-        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.labelSelected = '';
+        this.overlayRef = null;
+        this._destroyRef = inject(DestroyRef);
         this.idGenerator = inject(IdGenerator);
-        this.id = this.idGenerator.getId('monkey-input-upload-');
-        this.focused = false;
-        this.type = '';
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this._elementRef = inject(ElementRef);
         this.currency = false;
+        this.focused = false;
+        this._disabled = false;
+        this.id = this.idGenerator.getId('monkey-select-');
         this.percent = false;
         this.stateChanges = new Subject();
+        this.type = '';
+        this.searchHandle = new EventEmitter();
+        this.searchDictionary = inject(MonkeyDictionaryService).get('NO-DATA');
+        this.loadingDictionary = inject(MonkeyDictionaryService).get('LOADING');
+        this.showSearchNoData = false;
+        this.isOpen = false;
+        this.searchData = '';
+        this.onAnimationEnd = (event) => {
+            if (event.toState === 'closed') {
+                this.closeOverlay();
+            }
+        };
         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;
+    changeControl() {
+        if (this.formField?.control) {
+            this.formField.control.loading = this.loading;
         }
-        const fileExtension = getFileExtension(file.name);
-        const allowedExts = this.allowedExtensions.map((ext) => {
-            return ext.trim().replace('.', '').toLowerCase();
+    }
+    changeSelected() {
+        setTimeout(() => {
+            if (this.options) {
+                this.options.forEach((opt) => {
+                    opt.selected = opt.value === this.value;
+                });
+                this.updateSelectedLabel();
+            }
+            this.changeDetectorRef.markForCheck();
         });
-        return allowedExts.includes(fileExtension);
     }
-    onContainerClick(event) {
-        if (!this.loading) {
-            this.fileInput.nativeElement.click();
-        }
+    initializeOptions() {
+        this.options.forEach((option) => {
+            if (!option.action) {
+                option.action = this.selectOption.bind(this, option);
+            }
+        });
     }
-    _onFocus() {
-        if (!this.disabled) {
-            this.focused = true;
-            this._onTouched();
-            this.stateChanges.next();
+    openDropdown() {
+        if (this.options?.length) {
+            this.formField.control.disableToBeDirty = true;
+            this.isOpen = true;
+            this.createOverlay();
         }
     }
-    _onBlur() {
+    closeDropdown() {
+        this.changeDetectorRef.markForCheck();
+        this.isOpen = false;
         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;
+        this.formField.control.disableToBeDirty = false;
+        if (!this.callbackSearch) {
+            this.searchData = '';
         }
     }
-    writeValue(value) {
-        this.value = value;
-    }
+    closeOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            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;
+        }
+        const offset = 4;
+        const positions = [
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: offset
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -offset
+            }
+        ];
+        let anchor = this.trigger;
+        let width = anchor.nativeElement.offsetWidth;
+        if (this.formField?.elementRef) {
+            const el = this.formField?.elementRef.nativeElement.querySelector('.mecx-form-field-body');
+            anchor = el;
+            width = el.offsetWidth;
+        }
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(anchor)
+            .withPositions(positions)
+            .withPush(true);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            width,
+            hasBackdrop: true,
+            backdropClass: 'no-class'
+        });
+        const portal = new TemplatePortal(this.overlayTemplate, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        this.overlayRef
+            .backdropClick()
+            .pipe(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) {
+            this.value = option.value;
+            this.updateSelectedLabel();
+            this.closeDropdown();
+            this._onChange(this.value);
+            this.onChange.emit(this.value);
+            this.options.forEach((opt) => {
+                opt.selected = opt.value === this.value;
+            });
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+        this.changeSelected();
+    }
+    onContainerClick(event) {
+        if (this.disabled)
+            return;
+        this.openDropdown();
+        this._elementRef.nativeElement.focus();
+    }
+    _onFocus() {
+        if (!this.disabled) {
+            this.focused = true;
+            this._onTouched();
+            this.stateChanges.next();
+        }
+    }
+    _onBlur() {
+        this.focused = false;
+        this.stateChanges.next();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    ngOnChanges(changes) {
+        let hasChanges = false;
+        // eslint-disable-next-line dot-notation
+        const changesLoading = changes?.['loading'];
+        if (changesLoading?.currentValue !== changesLoading?.previousValue) {
+            hasChanges = true;
+            this.changeControl();
+        }
+        if (hasChanges) {
+            this.stateChanges.next();
+        }
+    }
+    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$1.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], 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 }
+        ], 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    <util-icon class=\"mecx-select-icon\" name=\"arrowDown\" />\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        <util-icon class=\"mecx-select-search-icon\" name=\"search\" />\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        <util-icon class=\"mecx-select-search-no-data-icon\" name=\"searchFail\" />\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 0 var(--mecx-color-box-shadow)}.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.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"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }], animations: [
+            trigger('animation', [
+                transition(':enter', [
+                    style({
+                        opacity: 0,
+                        transform: 'scaleY(.9)'
+                    }),
+                    animate('100ms ease-in-out', style({
+                        opacity: 1,
+                        transform: 'scaleY(1)'
+                    }))
+                ]),
+                state('closed', style({
+                    transform: 'scaleY(.9)',
+                    opacity: 0
+                })),
+                transition('closed <=> open', animate('200ms ease-in-out'))
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, UtilIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        // eslint-disable-next-line no-use-before-define
+                        { provide: MonkeyFormFieldControl, useExisting: MonkeySelectComponent }
+                    ], animations: [
+                        trigger('animation', [
+                            transition(':enter', [
+                                style({
+                                    opacity: 0,
+                                    transform: 'scaleY(.9)'
+                                }),
+                                animate('100ms ease-in-out', style({
+                                    opacity: 1,
+                                    transform: 'scaleY(1)'
+                                }))
+                            ]),
+                            state('closed', style({
+                                transform: 'scaleY(.9)',
+                                opacity: 0
+                            })),
+                            transition('closed <=> open', animate('200ms ease-in-out'))
+                        ])
+                    ], host: {
+                        'data-testid': 'monkey-select',
+                        class: 'mecx-select',
+                        '[class.mecx-select-disabled]': '_disabled',
+                        '[class.mecx-select-focused]': 'focused',
+                        '[attr.id]': 'id',
+                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
+                        '(focus)': '_onFocus()',
+                        '(blur)': '_onBlur()'
+                    }, template: "<div\n  class=\"mecx-select-trigger\"\n  [class.open]=\"isOpen\"\n  (click)=\"toggleDropdown()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen\"\n  #trigger\n>\n  <div class=\"mecx-select-value\" [class.has-value]=\"value\">\n    <span>{{ labelSelected || placeholder }}</span>\n  </div>\n\n  @if (!loading) {\n    <util-icon class=\"mecx-select-icon\" name=\"arrowDown\" />\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        <util-icon class=\"mecx-select-search-icon\" name=\"search\" />\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        <util-icon class=\"mecx-select-search-no-data-icon\" name=\"searchFail\" />\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 0 var(--mecx-color-box-shadow)}.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$1.Overlay }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: MonkeyFormFieldComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { overlayTemplate: [{
+                type: ViewChild,
+                args: ['overlayTemplate']
+            }], overlayEl: [{
+                type: ViewChild,
+                args: ['overlay']
+            }], trigger: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], options: [{
+                type: ContentChildren,
+                args: [MonkeyOptionComponent]
+            }], tabIndex: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], 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 }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+class MonkeyInputPhoneComponent {
+    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.formatValue(value);
+            this._onChange(value);
+            this._onTouched(value);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    constructor() {
+        this.placeholder = '';
+        this.tabIndex = 0;
+        this._disabled = false;
+        this._value = null;
+        this.ngControl = inject(NgControl, { self: true, optional: true });
+        this.idGenerator = inject(IdGenerator);
+        this.countryCode = inject(MONKEY_COUNTRY_CODE);
+        this.locale = inject(LOCALE_ID);
+        this.id = this.idGenerator.getId('monkey-input-upload-');
+        this.inputId = this.idGenerator.getId('monkey-input-upload-input-');
+        this.focused = false;
+        this.type = 'input-phone';
+        this.stateChanges = new Subject();
+        this.countries = getCountries()
+            .map((code) => {
+            return {
+                code: `+${getCountryCallingCode(code)}`,
+                name: this.getCountryNameFromCode(code),
+                flag: `${this.isoToFlagEmoji(code)} `
+            };
+        })
+            .sort((a, b) => {
+            return a.name.localeCompare(b.name);
+        });
+        this.countriesFiltered = this.countries;
+        this.selectedCallingCode = this.countryCode.toString();
+        this.phoneFormatted = '';
+        this.phoneValid = false;
+        this._onChange = () => { };
+        this._onTouched = () => { };
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    getCountryNameFromCode(code) {
+        try {
+            const locale = this.locale.toString();
+            const display = new Intl.DisplayNames([locale], { type: 'region' });
+            return display.of(code.toUpperCase()) || code;
+        }
+        catch {
+            return code;
+        }
+    }
+    getCountryByCallingCode(code) {
+        const cleanCode = code.replace('+', '');
+        return (getCountries().find((country) => {
+            return getCountryCallingCode(country) === cleanCode;
+        }) || null);
+    }
+    isoToFlagEmoji(isoCode) {
+        return isoCode.toUpperCase().replace(/./g, (char) => {
+            return String.fromCodePoint(127397 + char.charCodeAt(0));
+        });
+    }
+    getCountryFromPhoneNumber(input, changedCountry) {
+        try {
+            if (changedCountry) {
+                return this.selectedCallingCode;
+            }
+            const parsed = parsePhoneNumberFromString(input);
+            const country = getCountryCallingCode(parsed?.country);
+            return `+${country}`;
+        }
+        catch (e) {
+            // not to do
+        }
+        return this.selectedCallingCode;
+    }
+    performValue(value) {
+        this._value = `${this.selectedCallingCode}${value}`;
+        this._onChange(this._value);
+        this._onTouched(this._value);
+    }
+    validateValue() {
+        const { phoneValid } = this;
+        if (!phoneValid) {
+            const countryCode = this.getCountryByCallingCode(this.selectedCallingCode);
+            const example = getExampleNumber(countryCode, examples);
+            this.ngControl?.control?.setErrors({
+                phone: true,
+                phoneAllowed: example?.nationalNumber
+            });
+        }
+    }
+    formatValue(value, changedCountry = false) {
+        if (!value) {
+            this.phoneFormatted = '';
+            this.phoneValid = false;
+            this.validateValue();
+            return;
+        }
+        const detectedCallingCode = this.getCountryFromPhoneNumber(value, changedCountry);
+        const isCountryChanged = changedCountry || detectedCallingCode !== this.selectedCallingCode;
+        if (isCountryChanged && detectedCallingCode) {
+            this.selectedCallingCode = detectedCallingCode;
+        }
+        const countryCode = this.getCountryByCallingCode(this.selectedCallingCode);
+        if (!countryCode) {
+            this.phoneFormatted = value;
+            this.phoneValid = false;
+            this.validateValue();
+            return;
+        }
+        const nationalPart = value.replace(this.selectedCallingCode, '').replace(/[^\d+]/g, '');
+        const formatter = new AsYouType(countryCode);
+        this.phoneFormatted = formatter.input(nationalPart);
+        this.performValue(nationalPart);
+        this.phoneValid = isValidPhoneNumber(nationalPart, countryCode);
+        this.validateValue();
+    }
+    ngAfterContentInit() { }
+    ngOnChanges(changes) { }
+    ngOnDestroy() { }
+    onContainerClick(event) {
+        this.inputs.first.nativeElement.focus();
+    }
+    _onFocus() {
+        if (!this.disabled) {
+            this.focused = true;
+            this._onTouched();
+            this.stateChanges.next();
+        }
+    }
+    _onBlur() {
+        this.focused = false;
+        this.stateChanges.next();
+        this.validateValue();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    onInputChange(event) {
+        const { value } = event.target;
+        this.formatValue(value);
+    }
+    onCountryChange() {
+        this.formatValue(this._value, true);
+        this.validateValue();
+    }
+    getMaxLength() {
+        try {
+            const countryCode = this.getCountryByCallingCode(this.selectedCallingCode);
+            if (!countryCode)
+                return 20;
+            const example = getExampleNumber(countryCode, examples);
+            const formatted = new AsYouType(countryCode).input(example.nationalNumber);
+            return formatted.length;
+        }
+        catch {
+            return 20;
+        }
+    }
+    onHandleSearchSelect(query) {
+        const normalizedQuery = query.trim().toLowerCase();
+        this.countriesFiltered = this.countries.filter(({ name }) => {
+            return name.toLowerCase().includes(normalizedQuery);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputPhoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyInputPhoneComponent, isStandalone: true, selector: "monkey-input-phone", inputs: { placeholder: "placeholder", tabIndex: "tabIndex", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, host: { listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "attr.data-testid": "'monkey-input-phone'", "class.mecx-input-phone-disabled": "_disabled", "class.mecx-input-phone-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-input-phone" }, providers: [
+            // eslint-disable-next-line no-use-before-define
+            { provide: MonkeyFormFieldControl, useExisting: MonkeyInputPhoneComponent }
+        ], viewQueries: [{ propertyName: "inputs", predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <monkey-select
+      placeholder=""
+      [disabled]="disabled"
+      showSearch
+      [(ngModel)]="selectedCallingCode"
+      class="mecx-phone-select-country"
+      (onChange)="onCountryChange()"
+      callbackSearch
+      (onSearch)="onHandleSearchSelect($event)"
+    >
+      @for (item of countriesFiltered; track $index) {
+        <monkey-option [value]="item.code">
+          <span class="option-flag">{{ item.flag }}</span>
+          <div class="option-name">{{ item.name }} {{ item.code }}</div>
+        </monkey-option>
+      }
+    </monkey-select>
+    <input
+      #input
+      class="mecx-input"
+      [attr.disabled]="disabled"
+      placeholder="Enter phone number"
+      (input)="onInputChange($event)"
+      [ngModel]="phoneFormatted"
+      [maxlength]="getMaxLength()"
+      (focus)="_onFocus()"
+      (blur)="_onBlur()"
+      [attr.id]="inputId"
+    />
+  `, isInline: true, styles: [":host{display:inline-flex;width:100%;min-width:0}:host.mecx-input-phone-disabled monkey-select{border-right:2px solid var(--mecx-color-gray-200)}:host monkey-select{width:164px;border-right:2px solid var(--mecx-color-gray-400)}:host input{width:100%;border:none;margin-left:8px}monkey-option .option-flag{font-size:30px}monkey-option .option-name{letter-spacing:.48px;margin-left:4px}\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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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", "type"] }, { kind: "ngmodule", type: MonkeyFormFieldModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyInputPhoneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-input-phone', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MonkeySelectComponent,
+                        MonkeyOptionComponent,
+                        MonkeyFormFieldModule
+                    ], template: `
+    <monkey-select
+      placeholder=""
+      [disabled]="disabled"
+      showSearch
+      [(ngModel)]="selectedCallingCode"
+      class="mecx-phone-select-country"
+      (onChange)="onCountryChange()"
+      callbackSearch
+      (onSearch)="onHandleSearchSelect($event)"
+    >
+      @for (item of countriesFiltered; track $index) {
+        <monkey-option [value]="item.code">
+          <span class="option-flag">{{ item.flag }}</span>
+          <div class="option-name">{{ item.name }} {{ item.code }}</div>
+        </monkey-option>
+      }
+    </monkey-select>
+    <input
+      #input
+      class="mecx-input"
+      [attr.disabled]="disabled"
+      placeholder="Enter phone number"
+      (input)="onInputChange($event)"
+      [ngModel]="phoneFormatted"
+      [maxlength]="getMaxLength()"
+      (focus)="_onFocus()"
+      (blur)="_onBlur()"
+      [attr.id]="inputId"
+    />
+  `, providers: [
+                        // eslint-disable-next-line no-use-before-define
+                        { provide: MonkeyFormFieldControl, useExisting: MonkeyInputPhoneComponent }
+                    ], host: {
+                        '[attr.data-testid]': "'monkey-input-phone'",
+                        class: 'mecx-input-phone',
+                        '[class.mecx-input-phone-disabled]': '_disabled',
+                        '[class.mecx-input-phone-focused]': 'focused',
+                        '[attr.id]': 'id',
+                        '[attr.tabindex]': 'disabled ? -1 : tabIndex',
+                        '(focus)': '_onFocus()',
+                        '(blur)': '_onBlur()'
+                    }, styles: [":host{display:inline-flex;width:100%;min-width:0}:host.mecx-input-phone-disabled monkey-select{border-right:2px solid var(--mecx-color-gray-200)}:host monkey-select{width:164px;border-right:2px solid var(--mecx-color-gray-400)}:host input{width:100%;border:none;margin-left:8px}monkey-option .option-flag{font-size:30px}monkey-option .option-name{letter-spacing:.48px;margin-left:4px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }], inputs: [{
+                type: ViewChildren,
+                args: ['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 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 = '';
@@ -3300,8 +4629,7 @@ class MonkeyModalConfig {
         this.backdropClass = 'mecx-modal-overlay';
         this.disableClose = false;
         this.disableBackdropClose = false;
-        this.width = '';
-        this.height = '';
+        this.fullscreen = false;
         this.position = 'center-center';
         this.data = null;
         this.closeOnNavigation = true;
@@ -3343,7 +4671,14 @@ class MonkeyModalRef {
     close(result) {
         if (this.componentInstance) {
             const closedSubject = this.closed;
-            this.overlayRef.dispose();
+            const active = document.activeElement;
+            if (active && this.componentElement.contains(active)) {
+                active.blur();
+            }
+            this.componentElement.querySelectorAll('monkey-modal')[0].classList.add('fade-out');
+            setTimeout(() => {
+                this.overlayRef.detach();
+            }, 150);
             closedSubject.next(result);
             closedSubject.complete();
             // eslint-disable-next-line no-multi-assign
@@ -3383,9 +4718,13 @@ class MonkeyModalComponent {
         }
     }
     close() {
-        this.modalRef?.close();
+        const element = this._elementRef.nativeElement;
+        element.classList.add('fade-out');
+        setTimeout(() => {
+            this.modalRef?.close();
+        }, 150);
     }
-    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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.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">
@@ -3410,7 +4749,6 @@ class MonkeyModalComponent {
           class="mecx-modal-close"
           (click)="close()"
         >
-          x
         </monkey-icon-button>
       }
     </div>
@@ -3418,7 +4756,7 @@ class MonkeyModalComponent {
     <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 }); }
+  `, isInline: true, styles: ["monkey-modal{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:8px}.mecx-modal{opacity:0;animation:modal-fade-in .2s ease-out forwards;transition:opacity .15s ease-in}.mecx-modal.fade-out{animation:modal-fade-out .15s ease-in forwards}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes modal-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.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;flex-wrap:wrap;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}.monkey-modal-panel{padding:16px}.monkey-modal-panel.monkey-modal-fullscreen{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;padding:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal{border-radius:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal .mecx-modal-content{max-height:100%}\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,
@@ -3446,7 +4784,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
           class="mecx-modal-close"
           (click)="close()"
         >
-          x
         </monkey-icon-button>
       }
     </div>
@@ -3458,8 +4795,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         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: [{
+                    }, styles: ["monkey-modal{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:8px}.mecx-modal{opacity:0;animation:modal-fade-in .2s ease-out forwards;transition:opacity .15s ease-in}.mecx-modal.fade-out{animation:modal-fade-out .15s ease-in forwards}@keyframes modal-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes modal-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.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;flex-wrap:wrap;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}.monkey-modal-panel{padding:16px}.monkey-modal-panel.monkey-modal-fullscreen{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;padding:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal{border-radius:0}.monkey-modal-panel.monkey-modal-fullscreen monkey-modal .mecx-modal-content{max-height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.OverlayRef, decorators: [{
                     type: Optional
                 }] }, { type: MonkeyModalRef, decorators: [{
                     type: Optional
@@ -3472,6 +4809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  ************************* */
 const MECX_MODAL_DATA = new InjectionToken('mecxModalData');
 const MECX_MODAL_DEFAULT_CONFIG = new InjectionToken('mecxModalDefaultConfig');
+const MECX_MODAL_CONFIRMATION_CONFIG = new InjectionToken('mecxModalConfirmationConfig');
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -3496,11 +4834,6 @@ class MonkeyModalDefaultComponent {
     constructor(config, modalRef) {
         this.config = config;
         this.modalRef = modalRef;
-        this.title = '';
-        this.subtitle = '';
-        this.content = '';
-        this.cancelLabel = '';
-        this.okLabel = '';
         // not to do
     }
     onSubmit() {
@@ -3546,6 +4879,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     args: [MonkeyModalRef]
                 }] }] });
 
+class MonkeyModalConfirmationComponent {
+    constructor(config, modalRef) {
+        this.config = config;
+        this.modalRef = modalRef;
+        // not to do
+    }
+    onSubmit() {
+        this.modalRef.close(true);
+    }
+    onClose() {
+        this.modalRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalConfirmationComponent, deps: [{ token: MECX_MODAL_CONFIRMATION_CONFIG }, { token: MonkeyModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MonkeyModalConfirmationComponent, selector: "monkey-modal-confirmation", ngImport: i0, template: `
+    <monkey-modal class="modal-confirmation">
+      <monkey-modal-content>
+        @if (config.icon) {
+          <div class="modal-confirmation-icon {{ config.type }}">
+            <monkey-icon [icon]="config.icon" size="xxl"></monkey-icon>
+          </div>
+        }
+        <div class="confirmation-title" [innerHTML]="config.title"></div>
+        <div class="confirmation-description" [innerHTML]="config.content"></div>
+      </monkey-modal-content>
+      <monkey-modal-actions>
+        <monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
+        <monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
+      </monkey-modal-actions>
+    </monkey-modal>
+  `, isInline: true, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 16px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon monkey-icon{color:var(--mecx-color-gray-900)}.modal-confirmation .modal-confirmation-icon.warning{background-color:var(--mecx-color-warning-100)}.modal-confirmation .modal-confirmation-icon.warning monkey-icon{color:var(--mecx-color-warning-500)}.modal-confirmation .modal-confirmation-icon.error{background-color:var(--mecx-color-error-100)}.modal-confirmation .modal-confirmation-icon.error monkey-icon{color:var(--mecx-color-error-500)}.modal-confirmation .modal-confirmation-icon.success{background-color:var(--mecx-color-success-100)}.modal-confirmation .modal-confirmation-icon.success monkey-icon{color:var(--mecx-color-success-500)}\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: MonkeyModalComponent, selector: "monkey-modal" }, { kind: "directive", type: MonkeyModalContentDirective, selector: "monkey-modal-content, [monkey-modal-content]" }, { kind: "directive", type: MonkeyModalActionsDirective, selector: "monkey-modal-actions, [monkey-modal-actions]", inputs: ["mkAlign"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalConfirmationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'monkey-modal-confirmation', encapsulation: ViewEncapsulation.None, template: `
+    <monkey-modal class="modal-confirmation">
+      <monkey-modal-content>
+        @if (config.icon) {
+          <div class="modal-confirmation-icon {{ config.type }}">
+            <monkey-icon [icon]="config.icon" size="xxl"></monkey-icon>
+          </div>
+        }
+        <div class="confirmation-title" [innerHTML]="config.title"></div>
+        <div class="confirmation-description" [innerHTML]="config.content"></div>
+      </monkey-modal-content>
+      <monkey-modal-actions>
+        <monkey-button type="tertiary" (click)="onClose()">{{ config.cancelLabel }}</monkey-button>
+        <monkey-button type="primary" (click)="onSubmit()">{{ config.okLabel }}</monkey-button>
+      </monkey-modal-actions>
+    </monkey-modal>
+  `, styles: [".modal-confirmation .mecx-modal-header{border:none}.modal-confirmation .confirmation-title{color:var(--mecx-color-gray-900);text-align:center;font-size:18px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.54px;margin-bottom:8px}.modal-confirmation .confirmation-description{color:var(--mecx-color-gray-700);text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px;margin-bottom:24px}.modal-confirmation .modal-confirmation-icon{width:80px;height:80px;border-radius:50%;display:flex;margin:0 auto 16px;align-items:center;justify-content:center;background-color:var(--mecx-color-gray-50)}.modal-confirmation .modal-confirmation-icon monkey-icon{color:var(--mecx-color-gray-900)}.modal-confirmation .modal-confirmation-icon.warning{background-color:var(--mecx-color-warning-100)}.modal-confirmation .modal-confirmation-icon.warning monkey-icon{color:var(--mecx-color-warning-500)}.modal-confirmation .modal-confirmation-icon.error{background-color:var(--mecx-color-error-100)}.modal-confirmation .modal-confirmation-icon.error monkey-icon{color:var(--mecx-color-error-500)}.modal-confirmation .modal-confirmation-icon.success{background-color:var(--mecx-color-success-100)}.modal-confirmation .modal-confirmation-icon.success monkey-icon{color:var(--mecx-color-success-500)}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MECX_MODAL_CONFIRMATION_CONFIG]
+                }] }, { type: MonkeyModalRef, decorators: [{
+                    type: Inject,
+                    args: [MonkeyModalRef]
+                }] }] });
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -3555,6 +4946,7 @@ class MonkeyModalModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalModule, declarations: [MonkeyModalComponent,
             MonkeyModalDefaultComponent,
+            MonkeyModalConfirmationComponent,
             MonkeyModalTitleDirective,
             MonkeyModalSubtitleDirective,
             MonkeyModalContentDirective,
@@ -3572,6 +4964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     declarations: [
                         MonkeyModalComponent,
                         MonkeyModalDefaultComponent,
+                        MonkeyModalConfirmationComponent,
                         MonkeyModalTitleDirective,
                         MonkeyModalSubtitleDirective,
                         MonkeyModalContentDirective,
@@ -3593,13 +4986,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * MIT Licence
  ************************* */
 class MonkeyModalService {
-    constructor(overlay, injector) {
-        this.overlay = overlay;
-        this.injector = injector;
+    constructor() {
         this._idGenerator = inject(IdGenerator);
+        this._injector = inject(Injector);
+        this._overlay = inject(Overlay);
         this._openDialogsAtThisLevel = [];
         this._parentDialog = inject(MonkeyModalService, { optional: true, skipSelf: true });
-        // not to do
     }
     get openDialogs() {
         return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel;
@@ -3608,226 +5000,125 @@ class MonkeyModalService {
         let positionStrategy;
         const marginStrategy = '20px';
         if (config.position === 'left-top') {
-            positionStrategy = this.overlay.position().global().left(marginStrategy).top(marginStrategy);
+            positionStrategy = this._overlay.position().global().left(marginStrategy).top(marginStrategy);
         }
         else if (config.position === 'center-top') {
-            positionStrategy = this.overlay.position().global().centerHorizontally().top(marginStrategy);
+            positionStrategy = this._overlay.position().global().centerHorizontally().top(marginStrategy);
         }
         else if (config.position === 'right-top') {
-            positionStrategy = this.overlay.position().global().right(marginStrategy).top(marginStrategy);
+            positionStrategy = this._overlay
+                .position()
+                .global()
+                .right(marginStrategy)
+                .top(marginStrategy);
         }
         else if (config.position === 'left-center') {
-            positionStrategy = this.overlay.position().global().left(marginStrategy).centerVertically();
+            positionStrategy = this._overlay.position().global().left(marginStrategy).centerVertically();
         }
         else if (config.position === 'center-center') {
-            positionStrategy = this.overlay.position().global().centerHorizontally().centerVertically();
+            positionStrategy = this._overlay.position().global().centerHorizontally().centerVertically();
         }
         else if (config.position === 'right-center') {
-            positionStrategy = this.overlay.position().global().right(marginStrategy).centerVertically();
+            positionStrategy = this._overlay.position().global().right(marginStrategy).centerVertically();
         }
         else if (config.position === 'left-bottom') {
-            positionStrategy = this.overlay
+            positionStrategy = this._overlay
                 .position()
                 .global()
                 .left(marginStrategy)
                 .bottom(marginStrategy);
         }
         else if (config.position === 'center-bottom') {
-            positionStrategy = this.overlay.position().global().centerHorizontally().bottom('20px');
+            positionStrategy = this._overlay.position().global().centerHorizontally().bottom('20px');
         }
         else if (config.position === 'right-bottom') {
-            positionStrategy = this.overlay
+            positionStrategy = this._overlay
                 .position()
                 .global()
                 .right(marginStrategy)
                 .bottom(marginStrategy);
         }
-        const state = new OverlayConfig({
-            positionStrategy,
-            scrollStrategy: this.overlay.scrollStrategies.block(),
-            panelClass: config.panelClass,
-            hasBackdrop: config.hasBackdrop,
-            minWidth: config.minWidth,
-            minHeight: config.minHeight,
-            maxWidth: config.maxWidth,
-            maxHeight: config.maxHeight,
-            width: config.width,
-            height: config.height,
-            disposeOnNavigation: config.closeOnNavigation
-        });
-        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) {
-        const providers = [
-            { provide: OverlayRef, useValue: overlayRef },
-            { provide: MonkeyModalRef, useValue: dialogRef },
-            { provide: MECX_MODAL_DATA, useValue: config.data }
-        ];
-        if (config.providers) {
-            providers.push(...config.providers);
+        let panelClass = ['monkey-modal-panel'];
+        if (config.fullscreen) {
+            panelClass.push('monkey-modal-fullscreen');
         }
-        return Injector.create({ parent: fallbackInjector, providers });
-    }
-    open(component, config) {
-        const defaultConfig = new MonkeyModalConfig();
-        config = { ...defaultConfig, ...config };
-        config.id = this._idGenerator.getId('monkey-modal-');
-        const overlayConfig = this.getOverlayConfig(config);
-        const overlayRef = this.overlay.create(overlayConfig);
-        const modalRef = new MonkeyModalRef(overlayRef, config);
-        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;
-    }
-    openDefault(params, config) {
-        const providers = [{ provide: MECX_MODAL_DEFAULT_CONFIG, useValue: params }];
-        config.providers = providers;
-        config.icon = config.icon ? config.icon : 'help';
-        return this.open(MonkeyModalDefaultComponent, config);
-    }
-    closeAll() {
-        reverseForEach(this.openDialogs, (dialog) => {
-            return dialog.close();
-        });
-        this.openDialogs.splice(0, this.openDialogs.length);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalService, deps: [{ token: i1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalService, decorators: [{
-            type: Injectable,
-            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
- * MIT Licence
- ************************* */
-class MonkeyOptionComponent {
-    constructor() {
-        this.idGenerator = inject(IdGenerator);
-        this.disabled = false;
-        this.selected = false;
-        this.tabIndex = 0;
-        this.id = this.idGenerator.getId('mecx-option-');
-    }
-    get displayContent() {
-        return (this._content?.nativeElement.textContent || '').trim();
-    }
-    onClick(event) {
-        if (this.disabled) {
-            event.stopPropagation();
-            event.preventDefault();
+        if (Array.isArray(config.panelClass)) {
+            panelClass = [...panelClass, ...config.panelClass];
         }
         else {
-            this.action?.();
+            panelClass.push(config.panelClass);
         }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyOptionComponent, isStandalone: true, selector: "monkey-option", inputs: { value: "value", disabled: ["disabled", "disabled", booleanAttribute] }, host: { attributes: { "data-testid": "monkey-option" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "class.mecx-option-disabled": "disabled", "class.mecx-option-selected": "selected", "attr.tabindex": "disabled ? -1 : tabIndex" }, classAttribute: "mecx-option" }, viewQueries: [{ propertyName: "_content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `<div #content><ng-content /></div>`, isInline: true, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:#fff;cursor:default}monkey-option.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyOptionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'monkey-option', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<div #content><ng-content /></div>`, encapsulation: ViewEncapsulation.None, host: {
-                        'data-testid': 'monkey-option',
-                        '[attr.id]': 'id',
-                        class: 'mecx-option',
-                        '[class.mecx-option-disabled]': 'disabled',
-                        '[class.mecx-option-selected]': 'selected',
-                        '[attr.tabindex]': 'disabled ? -1 : tabIndex'
-                    }, styles: ["monkey-option{display:flex;position:relative;cursor:pointer;padding:16px;line-height:16px;font-size:14px;color:var(--mecx-color-gray-900);transition:all .1s ease-in-out}monkey-option>div{display:flex;white-space:normal;word-break:break-all}monkey-option:hover{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}monkey-option.mecx-option-disabled{color:var(--mecx-color-gray-400);background-color:#fff;cursor:default}monkey-option.mecx-option-selected{color:var(--mecx-color-theme-contrast-main);background-color:var(--mecx-color-theme-main)}.ng-animating monkey-option.mecx-option-selected{color:var(--mecx-color-gray-900);background-color:var(--mecx-color-gray-100)}\n"] }]
-        }], propDecorators: { _content: [{
-                type: ViewChild,
-                args: ['content', { static: true }]
-            }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-
-/** ************************
- * Copyright Monkey Exchange. All Rights Reserved
- * This style guide was developed by Monkey Exchange Team
- * MIT Licence
- ************************* */
-class MonkeySecurityLevelComponent {
-    get class() {
-        if (this.score() === 0) {
-            return 'empty';
+        const state = new OverlayConfig({
+            positionStrategy,
+            scrollStrategy: this._overlay.scrollStrategies.block(),
+            panelClass,
+            hasBackdrop: config.hasBackdrop,
+            maxWidth: config.maxWidth,
+            maxHeight: config.maxHeight,
+            disposeOnNavigation: config.closeOnNavigation
+        });
+        if (config.backdropClass) {
+            state.backdropClass = config.backdropClass;
         }
-        if (this.score() < 300) {
-            return 'weak';
+        if (config.maxWidth) {
+            state.width = '100%';
         }
-        if (this.score() >= 300 && this.score() < 800) {
-            return 'medium';
+        if (config.maxHeight) {
+            state.height = '100%';
         }
-        if (this.score() >= 800 && this.score() < 1000) {
-            return 'strong';
+        return state;
+    }
+    createInjector(config, dialogRef, overlayRef, fallbackInjector) {
+        const providers = [
+            { provide: OverlayRef, useValue: overlayRef },
+            { provide: MonkeyModalRef, useValue: dialogRef },
+            { provide: MECX_MODAL_DATA, useValue: config.data }
+        ];
+        if (config.providers) {
+            providers.push(...config.providers);
         }
-        return 'very-strong';
+        return Injector.create({ parent: fallbackInjector, providers });
     }
-    get id() {
-        return this._id;
+    open(component, config) {
+        const defaultConfig = new MonkeyModalConfig();
+        config = { ...defaultConfig, ...config };
+        config.id = this._idGenerator.getId('monkey-modal-');
+        const overlayConfig = this.getOverlayConfig(config);
+        const overlayRef = this._overlay.create(overlayConfig);
+        const modalRef = new MonkeyModalRef(overlayRef, config);
+        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.componentElement = componentElement;
+        modalRef.componentInstance = componentRef.instance;
+        this.openDialogs.push(modalRef);
+        return modalRef;
     }
-    set id(value) {
-        this._id = value || this._uid;
+    openDefault(params, config) {
+        config.providers = [{ provide: MECX_MODAL_DEFAULT_CONFIG, useValue: params }];
+        config.icon = config.icon ? config.icon : 'help';
+        return this.open(MonkeyModalDefaultComponent, config);
     }
-    constructor() {
-        this.label = input();
-        this.score = input.required();
-        this.strengthLabel = input();
-        this._uid = inject(IdGenerator).getId('monkey-security-level-');
-        // eslint-disable-next-line no-self-assign
-        this.id = this.id;
+    openConfirmation(params, config) {
+        config.providers = [{ provide: MECX_MODAL_CONFIRMATION_CONFIG, useValue: params }];
+        return this.open(MonkeyModalConfirmationComponent, config);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySecurityLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MonkeySecurityLevelComponent, isStandalone: true, selector: "monkey-security-level", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, score: { classPropertyName: "score", publicName: "score", isSignal: true, isRequired: true, transformFunction: null }, strengthLabel: { classPropertyName: "strengthLabel", publicName: "strengthLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-security-level" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: ["monkey-security-level{display:flex;align-items:center;gap:8px;width:100%}monkey-security-level span{color:var(--mecx-color-gray-700);font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .level-info{color:var(--mecx-color-gray-900);margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .body{display:flex;flex-direction:column;align-items:baseline;width:100%}monkey-security-level .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:#d3d6da;position:relative;overflow:hidden}monkey-security-level .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}monkey-security-level.very-strong .bar:before{background:#00875a;width:100%}monkey-security-level.strong .bar:before{background:#00875a;width:80%}monkey-security-level.medium .bar:before{background:#efa30e;width:66%}monkey-security-level.weak .bar:before{background:#db0505;width:33%}monkey-security-level.empty .bar:before{background:#db0505;width:0%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    closeAll() {
+        reverseForEach(this.openDialogs, (dialog) => {
+            return dialog.close();
+        });
+        this.openDialogs.splice(0, this.openDialogs.length);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySecurityLevelComponent, decorators: [{
-            type: Component,
-            args: [{ encapsulation: ViewEncapsulation.None, imports: [CommonModule], selector: 'monkey-security-level', standalone: true, host: {
-                        'data-testid': 'monkey-security-level',
-                        '[attr.id]': 'id',
-                        '[id]': 'id'
-                    }, template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: ["monkey-security-level{display:flex;align-items:center;gap:8px;width:100%}monkey-security-level span{color:var(--mecx-color-gray-700);font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .level-info{color:var(--mecx-color-gray-900);margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .body{display:flex;flex-direction:column;align-items:baseline;width:100%}monkey-security-level .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:#d3d6da;position:relative;overflow:hidden}monkey-security-level .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}monkey-security-level.very-strong .bar:before{background:#00875a;width:100%}monkey-security-level.strong .bar:before{background:#00875a;width:80%}monkey-security-level.medium .bar:before{background:#efa30e;width:66%}monkey-security-level.weak .bar:before{background:#db0505;width:33%}monkey-security-level.empty .bar:before{background:#db0505;width:0%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { class: [{
-                type: HostBinding,
-                args: ['class']
-            }], id: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
@@ -3840,7 +5131,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
-class MonkeySelectComponent {
+class MonkeyRadioButtonComponent {
+    get classes() {
+        return `${this.position} ${this.size}`;
+    }
     get disabled() {
         if (this.ngControl && this.ngControl.disabled !== null) {
             return this.ngControl.disabled;
@@ -3870,241 +5164,61 @@ class MonkeySelectComponent {
     get value() {
         return this._value;
     }
-    constructor(overlay, changeDetectorRef, viewContainerRef, formField) {
-        this.overlay = overlay;
+    constructor(changeDetectorRef, formField) {
         this.changeDetectorRef = changeDetectorRef;
-        this.viewContainerRef = viewContainerRef;
         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.position = 'horizontal';
+        this.size = 'lg';
         this._value = null;
-        this.labelSelected = '';
-        this.overlayRef = null;
         this._destroyRef = inject(DestroyRef);
-        this.iconArrowDown = inject(MonkeyIconsService).arrowDown;
         this.idGenerator = inject(IdGenerator);
         this.ngControl = inject(NgControl, { self: true, optional: true });
         this._elementRef = inject(ElementRef);
-        this.currency = false;
         this.focused = false;
         this._disabled = false;
-        this.id = this.idGenerator.getId('monkey-select-');
-        this.percent = false;
+        this.id = this.idGenerator.getId('monkey-radiobutton-');
         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();
-            }
-        };
+        this.type = 'radio-button';
         this._onChange = () => { };
         this._onTouched = () => { };
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
     }
-    changeControl() {
-        if (this.formField?.control) {
-            this.formField.control.loading = this.loading;
-        }
-    }
     changeSelected() {
         setTimeout(() => {
             if (this.options) {
                 this.options.forEach((opt) => {
                     opt.selected = opt.value === this.value;
                 });
-                this.updateSelectedLabel();
             }
             this.changeDetectorRef.markForCheck();
         });
     }
     initializeOptions() {
-        this.options.forEach((option) => {
-            if (!option.action) {
-                option.action = this.selectOption.bind(this, option);
-            }
-        });
-    }
-    openDropdown() {
-        if (this.options?.length) {
-            this.formField.control.disableToBeDirty = true;
-            this.isOpen = true;
-            this.createOverlay();
-        }
-    }
-    closeDropdown() {
-        this.changeDetectorRef.markForCheck();
-        this.isOpen = false;
-        this.focused = false;
-        this.formField.control.disableToBeDirty = false;
-        if (!this.callbackSearch) {
-            this.searchData = '';
-        }
-    }
-    closeOverlay() {
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-            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;
+            this.options?.forEach((option) => {
+                option.type = 'radio';
+                if (!option.action) {
+                    option.action = this.selectOption.bind(this, option);
+                }
             });
-            if (selected) {
-                const element = this.overlayRef?.overlayElement.querySelector(`#${selected.id}`);
-                element?.scrollIntoView({ behavior: 'instant', block: 'center' });
-            }
+            this.changeDetectorRef.markForCheck();
         }, 0);
     }
-    createOverlay() {
-        if (this.overlayRef) {
-            return;
-        }
-        const offset = 4;
-        const positions = [
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: offset
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                offsetY: -offset
-            }
-        ];
-        let anchor = this.trigger;
-        let width = anchor.nativeElement.offsetWidth;
-        if (this.formField?.elementRef) {
-            const el = this.formField?.elementRef.nativeElement.querySelector('.mecx-form-field-body');
-            anchor = el;
-            width = el.offsetWidth;
-        }
-        const positionStrategy = this.overlay
-            .position()
-            .flexibleConnectedTo(anchor)
-            .withPositions(positions)
-            .withPush(true);
-        this.overlayRef = this.overlay.create({
-            positionStrategy,
-            scrollStrategy: this.overlay.scrollStrategies.block(),
-            width,
-            hasBackdrop: true,
-            backdropClass: 'no-class'
-        });
-        const portal = new TemplatePortal(this.overlayTemplate, this.viewContainerRef);
-        this.overlayRef.attach(portal);
-        this.overlayRef
-            .backdropClick()
-            .pipe(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.options.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
             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) {
             this.value = option.value;
-            this.updateSelectedLabel();
-            this.closeDropdown();
             this._onChange(this.value);
             this.onChange.emit(this.value);
             this.options.forEach((opt) => {
@@ -4119,7 +5233,6 @@ class MonkeySelectComponent {
     onContainerClick(event) {
         if (this.disabled)
             return;
-        this.openDropdown();
         this._elementRef.nativeElement.focus();
     }
     _onFocus() {
@@ -4141,98 +5254,32 @@ class MonkeySelectComponent {
     }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
+        this.initializeOptions();
     }
-    ngOnChanges(changes) {
-        let hasChanges = false;
-        // eslint-disable-next-line dot-notation
-        const changesLoading = changes?.['loading'];
-        if (changesLoading?.currentValue !== changesLoading?.previousValue) {
-            hasChanges = true;
-            this.changeControl();
-        }
-        if (hasChanges) {
-            this.stateChanges.next();
-        }
-    }
-    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], 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyRadioButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: MonkeyFormFieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyRadioButtonComponent, isStandalone: true, selector: "monkey-radiobutton", inputs: { tabIndex: "tabIndex", position: "position", size: "size", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], value: "value" }, outputs: { onChange: "onChange", onSearch: "onSearch" }, host: { attributes: { "data-testid": "monkey-radiobutton" }, listeners: { "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "class.mecx-disabled": "disabled", "class.mecx-radiobutton-focused": "focused", "attr.id": "id", "attr.tabindex": "disabled ? -1 : tabIndex", "class": "this.classes" }, classAttribute: "mecx-radiobutton" }, providers: [
             // eslint-disable-next-line no-use-before-define
-            { 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({
-                        opacity: 0,
-                        transform: 'scaleY(.9)'
-                    }),
-                    animate('100ms ease-in-out', style({
-                        opacity: 1,
-                        transform: 'scaleY(1)'
-                    }))
-                ]),
-                state('closed', style({
-                    transform: 'scaleY(.9)',
-                    opacity: 0
-                })),
-                transition('closed <=> open', animate('200ms ease-in-out'))
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+            { provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
+        ], queries: [{ propertyName: "options", predicate: MonkeyOptionComponent }], ngImport: i0, template: "<ng-content />\n", styles: ["monkey-radiobutton{display:inline-flex;width:100%;min-width:0;position:relative;flex-wrap:wrap}monkey-radiobutton:focus-visible,monkey-radiobutton:focus{outline:none}monkey-radiobutton.vertical{flex-direction:column}monkey-radiobutton.mecx-disabled monkey-option{opacity:.5;pointer-events:none}monkey-radiobutton.mecx-disabled monkey-option:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-radiobutton.mecx-form-field-invalid{background:var(--mecx-color-error-700)}monkey-radiobutton.md monkey-option:before{width:16px;height:16px}monkey-radiobutton.sm monkey-option:before{width:14px;height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyRadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'monkey-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'monkey-radiobutton', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, UtilIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         // eslint-disable-next-line no-use-before-define
-                        { provide: MonkeyFormFieldControl, useExisting: MonkeySelectComponent }
-                    ], animations: [
-                        trigger('animation', [
-                            transition(':enter', [
-                                style({
-                                    opacity: 0,
-                                    transform: 'scaleY(.9)'
-                                }),
-                                animate('100ms ease-in-out', style({
-                                    opacity: 1,
-                                    transform: 'scaleY(1)'
-                                }))
-                            ]),
-                            state('closed', style({
-                                transform: 'scaleY(.9)',
-                                opacity: 0
-                            })),
-                            transition('closed <=> open', animate('200ms ease-in-out'))
-                        ])
+                        { provide: MonkeyFormFieldControl, useExisting: MonkeyRadioButtonComponent }
                     ], host: {
-                        'data-testid': 'monkey-select',
-                        class: 'mecx-select',
-                        '[class.mecx-select-disabled]': '_disabled',
-                        '[class.mecx-select-focused]': 'focused',
+                        'data-testid': 'monkey-radiobutton',
+                        class: 'mecx-radiobutton',
+                        '[class.mecx-disabled]': 'disabled',
+                        '[class.mecx-radiobutton-focused]': 'focused',
                         '[attr.id]': 'id',
                         '[attr.tabindex]': 'disabled ? -1 : tabIndex',
                         '(focus)': '_onFocus()',
                         '(blur)': '_onBlur()'
-                    }, template: "<div\n  class=\"mecx-select-trigger\"\n  [class.open]=\"isOpen\"\n  (click)=\"toggleDropdown()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"isOpen\"\n  #trigger\n>\n  <div class=\"mecx-select-value\" [class.has-value]=\"value\">\n    <span>{{ labelSelected || placeholder }}</span>\n  </div>\n\n  @if (!loading) {\n    <div class=\"mecx-select-icon\" [innerHTML]=\"iconArrowDown\"></div>\n  }\n</div>\n\n<ng-template #overlayTemplate>\n  <div 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: [{
+                    }, template: "<ng-content />\n", styles: ["monkey-radiobutton{display:inline-flex;width:100%;min-width:0;position:relative;flex-wrap:wrap}monkey-radiobutton:focus-visible,monkey-radiobutton:focus{outline:none}monkey-radiobutton.vertical{flex-direction:column}monkey-radiobutton.mecx-disabled monkey-option{opacity:.5;pointer-events:none}monkey-radiobutton.mecx-disabled monkey-option:before{background:var(--mecx-color-white);border-color:var(--mecx-color-gray-400)}monkey-radiobutton.mecx-form-field-invalid{background:var(--mecx-color-error-700)}monkey-radiobutton.md monkey-option:before{width:16px;height:16px}monkey-radiobutton.sm monkey-option:before{width:14px;height:14px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: MonkeyFormFieldComponent, decorators: [{
                     type: Optional
-                }] }], propDecorators: { overlayTemplate: [{
-                type: ViewChild,
-                args: ['overlayTemplate']
-            }], overlayEl: [{
-                type: ViewChild,
-                args: ['overlay']
-            }], trigger: [{
-                type: ViewChild,
-                args: ['trigger']
-            }], options: [{
+                }] }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [MonkeyOptionComponent]
             }], tabIndex: [{
@@ -4241,20 +5288,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }], onSearch: [{
                 type: Output
-            }], placeholder: [{
-                type: Input,
-                args: [{ required: true }]
-            }], loading: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], showSearch: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], searchPlaceholder: [{
+            }], position: [{
                 type: Input
-            }], callbackSearch: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
+            }], size: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
             }], disabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -4271,6 +5311,64 @@ 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
+ ************************* */
+class MonkeySecurityLevelComponent {
+    get class() {
+        if (this.score() === 0) {
+            return 'empty';
+        }
+        if (this.score() < 300) {
+            return 'weak';
+        }
+        if (this.score() >= 300 && this.score() < 800) {
+            return 'medium';
+        }
+        if (this.score() >= 800 && this.score() < 1000) {
+            return 'strong';
+        }
+        return 'very-strong';
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this._uid;
+    }
+    constructor() {
+        this.label = input();
+        this.score = input.required();
+        this.strengthLabel = input();
+        this._uid = inject(IdGenerator).getId('monkey-security-level-');
+        // eslint-disable-next-line no-self-assign
+        this.id = this.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySecurityLevelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MonkeySecurityLevelComponent, isStandalone: true, selector: "monkey-security-level", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, score: { classPropertyName: "score", publicName: "score", isSignal: true, isRequired: true, transformFunction: null }, strengthLabel: { classPropertyName: "strengthLabel", publicName: "strengthLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-security-level" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: ["monkey-security-level{display:flex;align-items:center;gap:8px;width:100%}monkey-security-level span{color:var(--mecx-color-gray-700);font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .level-info{color:var(--mecx-color-gray-900);margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .body{display:flex;flex-direction:column;align-items:baseline;width:100%}monkey-security-level .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:var(--mecx-color-gray-300);position:relative;overflow:hidden}monkey-security-level .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}monkey-security-level.very-strong .bar:before{background:var(--mecx-color-success-main);width:100%}monkey-security-level.strong .bar:before{background:var(--mecx-color-success-main);width:80%}monkey-security-level.medium .bar:before{background:var(--mecx-color-warning-main);width:66%}monkey-security-level.weak .bar:before{background:var(--mecx-color-error-700);width:33%}monkey-security-level.empty .bar:before{background:var(--mecx-color-error-700);width:0%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeySecurityLevelComponent, decorators: [{
+            type: Component,
+            args: [{ encapsulation: ViewEncapsulation.None, imports: [CommonModule], selector: 'monkey-security-level', standalone: true, host: {
+                        'data-testid': 'monkey-security-level',
+                        '[attr.id]': 'id',
+                        '[id]': 'id'
+                    }, template: "<div class=\"body\">\n  <div>\n    <span data-testid=\"label\" *ngIf=\"label() as lb\">\n      {{ lb }}\n    </span>\n    <span data-testid=\"str-label\" class=\"level-info\" *ngIf=\"strengthLabel() as strLabel\">\n      {{ strLabel }}\n    </span>\n  </div>\n  <div class=\"bar\"></div>\n</div>\n", styles: ["monkey-security-level{display:flex;align-items:center;gap:8px;width:100%}monkey-security-level span{color:var(--mecx-color-gray-700);font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .level-info{color:var(--mecx-color-gray-900);margin-left:24px;font-size:14px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.42px}monkey-security-level .body{display:flex;flex-direction:column;align-items:baseline;width:100%}monkey-security-level .bar{height:4px;width:100%;max-width:426px;border-radius:8px;background:var(--mecx-color-gray-300);position:relative;overflow:hidden}monkey-security-level .bar:before{content:\"\";display:block;position:absolute;height:100%;left:0;top:0;transition:all 1s}monkey-security-level.very-strong .bar:before{background:var(--mecx-color-success-main);width:100%}monkey-security-level.strong .bar:before{background:var(--mecx-color-success-main);width:80%}monkey-security-level.medium .bar:before{background:var(--mecx-color-warning-main);width:66%}monkey-security-level.weak .bar:before{background:var(--mecx-color-error-700);width:33%}monkey-security-level.empty .bar:before{background:var(--mecx-color-error-700);width:0%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { class: [{
+                type: HostBinding,
+                args: ['class']
+            }], id: [{
+                type: Input
+            }] } });
+
+/** ************************
+ * Copyright Monkey Exchange. All Rights Reserved
+ * This style guide was developed by Monkey Exchange Team
+ * MIT Licence
+ ************************* */
+
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
  * This style guide was developed by Monkey Exchange Team
@@ -4295,7 +5393,7 @@ class MonkeyStatusComponent {
         this.id = this.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MonkeyStatusComponent, isStandalone: true, selector: "monkey-status", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-status" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n  {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:var(--mecx-color-gray-700);font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:var(--mecx-color-gray-300)}:host.success .status{background-color:#00875a}:host.warning .status{background-color:#efa30e}:host.error .status{background-color:#db0505}:host.question .status{background-color:#8d38fa}:host.info .status{background-color:#003687}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: MonkeyStatusComponent, isStandalone: true, selector: "monkey-status", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "monkey-status" }, properties: { "attr.id": "id", "id": "id", "class": "this.class" } }, ngImport: i0, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n  {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:var(--mecx-color-gray-700);font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:var(--mecx-color-gray-300)}:host.success .status{background-color:var(--mecx-color-success-main)}:host.warning .status{background-color:var(--mecx-color-warning-main)}:host.error .status{background-color:var(--mecx-color-error-700)}:host.question .status{background-color:var(--mecx-color-question-main)}:host.info .status{background-color:var(--mecx-color-info)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyStatusComponent, decorators: [{
             type: Component,
@@ -4303,7 +5401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         'data-testid': 'monkey-status',
                         '[attr.id]': 'id',
                         '[id]': 'id'
-                    }, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n  {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:var(--mecx-color-gray-700);font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:var(--mecx-color-gray-300)}:host.success .status{background-color:#00875a}:host.warning .status{background-color:#efa30e}:host.error .status{background-color:#db0505}:host.question .status{background-color:#8d38fa}:host.info .status{background-color:#003687}\n"] }]
+                    }, template: "<div class=\"status\"></div>\n<span *ngIf=\"label() as lb\">\n  {{ lb }}\n</span>\n", styles: [":host{display:flex;align-items:center;gap:8px}:host span{color:var(--mecx-color-gray-700);font-style:normal;font-weight:400;line-height:24px}:host .status{width:8px;height:8px;border-radius:50%;flex-shrink:0}:host.sm span{font-size:14px;letter-spacing:.42px}:host.sm .status{height:8px;width:8px}:host.md span{font-size:16px;letter-spacing:.48px}:host.md .status{height:12px;width:12px}:host.lg span{font-size:18px;letter-spacing:.52px}:host.lg .status{height:16px;width:16px}:host.default .status{background-color:var(--mecx-color-gray-300)}:host.success .status{background-color:var(--mecx-color-success-main)}:host.warning .status{background-color:var(--mecx-color-warning-main)}:host.error .status{background-color:var(--mecx-color-error-700)}:host.question .status{background-color:var(--mecx-color-question-main)}:host.info .status{background-color:var(--mecx-color-info)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -4416,7 +5514,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 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 }); }
+    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", "type"] }, { 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,
@@ -4532,7 +5630,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"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], 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.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,
@@ -5015,7 +6113,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=\"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 }); }
+    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 0 var(--mecx-color-box-shadow);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,
@@ -5024,7 +6122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '(animationend)': 'onAnimationEnd($event)',
                         '[attr.id]': 'id',
                         '[id]': 'id'
-                    }, 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"] }]
+                    }, 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 0 var(--mecx-color-box-shadow);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: [{
@@ -5097,7 +6195,7 @@ class MonkeyToggleComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyToggleComponent, isStandalone: true, selector: "monkey-toggle", inputs: { disabled: "disabled", size: "size", value: "value", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-toggle" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id", "class.disabled": "this.disabled", "class": "this.size" } }, ngImport: i0, template: "<input type=\"checkbox\" [checked]=\"_checked\" />\n<div class=\"slider\" [ngClass]=\"{ checked: _checked }\"></div>\n", styles: [":host{position:relative;display:inline-block}:host input{display:none}:host.disabled{box-shadow:none;pointer-events:none;opacity:.2}:host.lg{width:88px;height:48px}:host.lg input:checked+.checked:before{left:calc(100% - 42px)}:host.lg .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.lg .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:40px;width:40px}:host.lg .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.lg .slider.checked:before{background-color:#00875a}:host.md{width:72px;height:40px}:host.md input:checked+.checked:before{left:calc(100% - 34px)}:host.md .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.md .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:32px;width:32px}:host.md .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.md .slider.checked:before{background-color:#00875a}:host.sm{width:56px;height:32px}:host.sm input:checked+.checked:before{left:calc(100% - 26px)}:host.sm .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.sm .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:24px;width:24px}:host.sm .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.sm .slider.checked:before{background-color:#00875a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MonkeyToggleComponent, isStandalone: true, selector: "monkey-toggle", inputs: { disabled: "disabled", size: "size", value: "value", id: "id" }, outputs: { onChange: "onChange" }, host: { attributes: { "data-testid": "monkey-toggle" }, listeners: { "click": "onClick($event)" }, properties: { "attr.id": "id", "id": "id", "class.disabled": "this.disabled", "class": "this.size" } }, ngImport: i0, template: "<input type=\"checkbox\" [checked]=\"_checked\" />\n<div class=\"slider\" [ngClass]=\"{ checked: _checked }\"></div>\n", styles: [":host{position:relative;display:inline-block}:host input{display:none}:host.disabled{box-shadow:none;pointer-events:none;opacity:.2}:host.lg{width:88px;height:48px}:host.lg input:checked+.checked:before{left:calc(100% - 42px)}:host.lg .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.lg .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:40px;width:40px}:host.lg .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.lg .slider.checked:before{background-color:#00875a}:host.md{width:72px;height:40px}:host.md input:checked+.checked:before{left:calc(100% - 34px)}:host.md .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.md .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:32px;width:32px}:host.md .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.md .slider.checked:before{background-color:#00875a}:host.sm{width:56px;height:32px}:host.sm input:checked+.checked:before{left:calc(100% - 26px)}:host.sm .slider{position:absolute;cursor:pointer;inset:0;border-radius:34px;transition:all .4s ease;background-color:#f8fafb;border:2px solid #bdc1c7}:host.sm .slider:before{position:absolute;content:\"\";bottom:2px;transition:.4s;border-radius:50%;background-color:#1f2024;left:2px;height:24px;width:24px}:host.sm .slider.checked{background-color:#ebfff8;border:2px solid #00875a}:host.sm .slider.checked:before{background-color:#00875a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToggleComponent, decorators: [{
             type: Component,
@@ -5274,7 +6372,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}\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 0 var(--mecx-color-box-shadow);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,
@@ -5285,7 +6383,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}\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 0 var(--mecx-color-box-shadow);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: [{
@@ -5455,8 +6553,11 @@ class MonkeyTooltipDirective {
             subscribe.unsubscribe();
         });
     }
+    onScroll() {
+        this.hide();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyTooltipDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyTooltipDirective, isStandalone: true, selector: "[monkeyTooltip]", inputs: { tooltipText: ["monkeyTooltip", "tooltipText"], tooltipPosition: "tooltipPosition", enabled: ["enabled", "enabled", booleanAttribute] }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "click": "hide()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.13", type: MonkeyTooltipDirective, isStandalone: true, selector: "[monkeyTooltip]", inputs: { tooltipText: ["monkeyTooltip", "tooltipText"], tooltipPosition: "tooltipPosition", enabled: ["enabled", "enabled", booleanAttribute] }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()", "click": "hide()", "window:scroll": "onScroll()", "window:resize": "onScroll()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyTooltipDirective, decorators: [{
             type: Directive,
@@ -5480,6 +6581,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], enabled: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], onScroll: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }, {
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
 /** ************************
@@ -5488,6 +6595,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * MIT Licence
  ************************* */
 
+class MonkeyToastRef {
+    constructor(componentRef) {
+        this.componentRef = componentRef;
+        // not to do
+    }
+    close() {
+        this.componentRef.instance.close();
+    }
+}
+
+class MonkeyToastService {
+    constructor(overlay) {
+        this.overlay = overlay;
+        // no to do
+    }
+    getPositionStrategy(position) {
+        const globalPosition = this.overlay.position().global();
+        switch (position) {
+            case 'top-left':
+                return globalPosition.top('40px').start('40px');
+            case 'top-center':
+                return globalPosition.top('40px').centerHorizontally();
+            case 'top-right':
+                return globalPosition.top('40px').end('40px');
+            case 'bottom-left':
+                return globalPosition.bottom('40px').start('40px');
+            case 'bottom-center':
+                return globalPosition.bottom('40px').centerHorizontally();
+            default:
+                return globalPosition.bottom('40px').end('40px');
+        }
+    }
+    show(toastConfig) {
+        if (this.lastToast) {
+            this.lastToast.close();
+        }
+        const overlayRef = this.overlay.create({
+            hasBackdrop: false,
+            positionStrategy: this.getPositionStrategy(toastConfig.position)
+        });
+        const portal = new ComponentPortal(MonkeyToastComponent);
+        const componentRef = overlayRef.attach(portal);
+        this.lastToast = new MonkeyToastRef(componentRef);
+        componentRef.instance.id = getRandomString(6);
+        componentRef.instance.type = toastConfig.type ?? 'default';
+        componentRef.instance.icon = toastConfig.icon;
+        componentRef.instance.isClosable = toastConfig.isClosable ?? false;
+        componentRef.instance.message = toastConfig.message;
+        componentRef.instance.actionLabel = toastConfig.actionLabel;
+        componentRef.instance.actionIcon = toastConfig.actionIcon;
+        componentRef.instance.onActionClick.subscribe(() => {
+            if (toastConfig.action) {
+                toastConfig.action();
+                if (toastConfig.closeOnAction ?? true) {
+                    componentRef.instance.close();
+                }
+            }
+        });
+        componentRef.instance.onClose.subscribe(() => {
+            overlayRef.detach();
+        });
+        if (!toastConfig.keepOpen) {
+            setTimeout(() => {
+                componentRef.instance.close();
+            }, toastConfig.duration ?? 4000);
+        }
+        return componentRef.instance;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToastService, deps: [{ token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToastService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MonkeyToastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.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
@@ -5498,5 +6689,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MECX_I18N_WRAPPER, 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, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, getCurrencySymbol };
+export { MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MONKEY_COUNTRY_CODE, MONKEY_I18N_WRAPPER, MONKEY_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyColumnChecked, MonkeyColumnExpansible, MonkeyColumnSortable, MonkeyColumnStick, MonkeyDateRangeComponent, MonkeyDirectivesModule, MonkeyDividerComponent, MonkeyErrorDirective, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyIconComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeySuffixDirective, MonkeyTableComponent, MonkeyTableModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, getCurrencySymbol };
 //# sourceMappingURL=monkey-style-guide-v2.mjs.map