@dropi/ui 0.1.36 → 0.1.41

package/hydrate/index.js

@@ -5401,7 +5401,7 @@ class DropiAccordionItem {
         setTimeout(() => this.updateHeight(this.open), 0);
     }
     render() {
-        return (hAsync("div", { key: '43f4ce6c38338a90a3b866a449f14e48b478e738', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, hAsync("button", { key: 'b5150a903bf75b82ffea9707e5906dc17f0bcd1c', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, hAsync("span", { key: '53f5c6a4e5a9d02412145395112368ddea9af746', class: "accordion-header-left" }, this.preIcon && hAsync("dropi-icon", { key: '5fea3e2916fe5dfb6c1435f08c3b63aca4656523', name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-600" }), hAsync("span", { key: '3ad504dcf5d8b4f05d11a0e951a81b79428de3ec', class: "accordion-title" }, this.sectionTitle)), hAsync("span", { key: 'bd44cf2fe9989fc80badb6e46a33a9d699c90f49', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, hAsync("dropi-icon", { key: '7a4b261df5ffd4c6276e4cccc6bc5e8f8e43a717', name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))), hAsync("div", { key: 'cb8789f49d4c83e33f2c366b90220b79b5619502', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, hAsync("div", { key: '72d302242a40c9aa60a941814ac311a540b319f6', class: "accordion-content" }, hAsync("slot", { key: 'b5a4a42f0d366f1f0409f719a52d5af11d77e3c3' })))));
+        return (hAsync("div", { key: '43f4ce6c38338a90a3b866a449f14e48b478e738', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, hAsync("button", { key: 'b5150a903bf75b82ffea9707e5906dc17f0bcd1c', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, hAsync("span", { key: '53f5c6a4e5a9d02412145395112368ddea9af746', class: "accordion-header-left" }, this.preIcon && hAsync("dropi-icon", { key: '28acd44875849665dfc58a5b3040a7ef78e92b6e', name: this.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), hAsync("span", { key: 'c19a8f8b33ce36c1903fc428400b2e1bf9b20971', class: "accordion-title" }, this.sectionTitle)), hAsync("span", { key: '7163175dca488646dd13de60978cd623cfc61d12', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, hAsync("dropi-icon", { key: '10c1ea131aaaa8d0fe6542b9d8effe8b3319e3c8', name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))), hAsync("div", { key: '2d514054e305d92ac97bf661f85d795ff4cc04a9', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, hAsync("div", { key: '3ff920a3cd55f22af681b90f220ce05d15db09e1', class: "accordion-content" }, hAsync("slot", { key: 'f703b47dc51acb41b7d455c991a08c8286d53fc2' })))));
     }
     static get watchers() { return {
         "open": [{
@@ -5485,7 +5485,7 @@ class DropiAlert {
     render() {
         if (!this.showAlert)
             return null;
-        return (hAsync("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, this.type !== 'flag' && (hAsync("div", { class: "alert__icon" }, hAsync("dropi-icon", { name: STATE_ICONS[this.state], width: "18px", height: "18px", color: STATE_COLORS[this.state] }))), hAsync("div", { class: "alert__body" }, hAsync("span", { class: "alert__message" }, this.message), this.anchorText && (hAsync("a", { class: "alert__link", href: this.anchorUrl || this.linkUrl || '#', onClick: (e) => { e.preventDefault(); this.onClickLink.emit(); } }, this.anchorText))), hAsync("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (hAsync("button", { class: "alert__btn", onClick: () => this.onButtonClick.emit() }, this.buttonText)), this.dismissable && (hAsync("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.onClose.emit(); }, "aria-label": "Cerrar" }, hAsync("dropi-icon", { name: "Close-small", width: "18px", height: "18px", color: "Gray-Gray-500" }))))));
+        return (hAsync("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, this.type !== 'flag' && (hAsync("div", { class: "alert__icon" }, hAsync("dropi-icon", { name: STATE_ICONS[this.state], iconWidth: "18px", iconHeight: "18px", color: STATE_COLORS[this.state] }))), hAsync("div", { class: "alert__body" }, hAsync("span", { class: "alert__message" }, this.message), this.anchorText && (hAsync("a", { class: "alert__link", href: this.anchorUrl || this.linkUrl || '#', onClick: (e) => { e.preventDefault(); this.onClickLink.emit(); } }, this.anchorText))), hAsync("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (hAsync("button", { class: "alert__btn", onClick: () => this.onButtonClick.emit() }, this.buttonText)), this.dismissable && (hAsync("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.onClose.emit(); }, "aria-label": "Cerrar" }, hAsync("dropi-icon", { name: "Close-small", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" }))))));
     }
     static get style() { return dropiAlertCss(); }
     static get cmpMeta() { return {
@@ -5913,7 +5913,7 @@ class DropiBannerExternal {
     render() {
         if (this.closed || !this.imageUrl)
             return null;
-        const inner = (hAsync("div", { class: "inner" }, hAsync("img", { src: this.imageUrl, alt: this.alt }), hAsync("button", { class: "close-btn", "aria-label": "Cerrar banner", onClick: (e) => this.closeBanner(e) }, hAsync("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-600" }))));
+        const inner = (hAsync("div", { class: "inner" }, hAsync("img", { src: this.imageUrl, alt: this.alt }), hAsync("button", { class: "close-btn", "aria-label": "Cerrar banner", onClick: (e) => this.closeBanner(e) }, hAsync("dropi-icon", { name: "Close-small", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }))));
         return (hAsync("div", { class: "dropi-banner-external", style: { background: this.backgroundColor } }, this.link ? (hAsync("a", { href: this.link, target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.handleClick(e) }, inner)) : (hAsync("div", { class: "click-wrapper", onClick: (e) => this.handleClick(e) }, inner))));
     }
     static get style() { return dropiBannerExternalCss(); }
@@ -5975,14 +5975,14 @@ class DropiBreadcrumb {
     }
     render() {
         const items = this.parsedItems;
-        return (hAsync("nav", { key: 'c4546d7a0c7852e01f685176b5365f1e0082ad24', class: "breadcrumb", "aria-label": "Breadcrumb" }, hAsync("div", { key: '924ab634ae4e71f6bd39a67b4b3889cdca20234d', class: "crumb-list" }, hAsync("div", { key: 'e7b1b285bdd497a028a041ada1eb8b34f77384b0', class: "crumb-home" }, hAsync("a", { key: '9e288d5f5761daed20b35dbf056c7de9c2e7b8e3', href: this.homeRoute, class: "home-link", "aria-label": "Inicio", onClick: (e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); } }, hAsync("dropi-icon", { key: '15210c5feb41fc5a8dd37f52eba1e5a211834f84', name: this.homeIconName, width: "16px", color: "Gray-Gray-500" })), items.length > 0 && (hAsync("dropi-icon", { key: '5acd21133859ec42b078fd323f82b7bc13c7b359', name: "Dropdown-Right", width: "16px", color: "Gray-Gray-500" }))), items.map((item, idx) => {
+        return (hAsync("nav", { key: 'c4546d7a0c7852e01f685176b5365f1e0082ad24', class: "breadcrumb", "aria-label": "Breadcrumb" }, hAsync("div", { key: '924ab634ae4e71f6bd39a67b4b3889cdca20234d', class: "crumb-list" }, hAsync("div", { key: 'e7b1b285bdd497a028a041ada1eb8b34f77384b0', class: "crumb-home" }, hAsync("a", { key: '9e288d5f5761daed20b35dbf056c7de9c2e7b8e3', href: this.homeRoute, class: "home-link", "aria-label": "Inicio", onClick: (e) => { e.preventDefault(); this.dropiNavigate.emit(this.homeRoute); } }, hAsync("dropi-icon", { key: '803ab6d710976b341f19ad7d49fde670acc2c466', name: this.homeIconName, iconWidth: "16px", color: "Gray-Gray-500" })), items.length > 0 && (hAsync("dropi-icon", { key: '44d1cad9efa9cbc6a52bc26a2229af6680cd8733', name: "Dropdown-Right", iconWidth: "16px", color: "Gray-Gray-500" }))), items.map((item, idx) => {
             const isLast = idx === items.length - 1;
             const href = item.url || item.routerLink || '#';
             return (hAsync("div", { class: "crumb", key: idx }, (!isLast || this.lastItemClickable) ? (hAsync("a", { class: `crumb-link Body-S-Regular${item.disabled ? ' disabled' : ''}`, href: href, onClick: (e) => {
                     e.preventDefault();
                     if (!item.disabled)
                         this.dropiNavigate.emit(item);
-                } }, item.label)) : (hAsync("span", { class: "current Body-S-Regular", "aria-current": "page" }, item.label)), !isLast && (hAsync("dropi-icon", { name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-500" }))));
+                } }, item.label)) : (hAsync("span", { class: "current Body-S-Regular", "aria-current": "page" }, item.label)), !isLast && (hAsync("dropi-icon", { name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-500" }))));
         }))));
     }
     static get style() { return dropiBreadcrumbCss(); }
@@ -6083,7 +6083,7 @@ class DropiButton {
                 [this.size ?? 'normal']: true,
                 [this.state ?? 'default']: true,
                 'full-width': this.fullWidth,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (hAsync("dropi-icon", { key: 'ff3890de446e5b48c88a980f01cce4e7b9764b24', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && hAsync("span", { key: 'aa9090eb010740370b8480e4590f59de4b1acad2', class: "text" }, this.text), showPostIcon && (hAsync("dropi-icon", { key: '16122968ee4d343333950fcdabe67ac6a104729a', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), hAsync("slot", { key: 'fa5b1fd7d32b2619e4c19eac12cf75c75c72dd47' })));
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (hAsync("dropi-icon", { key: '374403bce1d33e39f3834d6e10dfec5ac7ca7e0c', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && hAsync("span", { key: '65d5e45f4df8df2795be3b6bf09c9576f8497664', class: "text" }, this.text), showPostIcon && (hAsync("dropi-icon", { key: 'b3d1459260a3d7159ddf1193aa29672e8d8d3800', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), hAsync("slot", { key: 'ae37b4195f35b02d70e166fcba27939f38d35326' })));
     }
     static get style() { return dropiButtonCss(); }
     static get cmpMeta() { return {
@@ -6245,11 +6245,11 @@ class DropiCardProduct {
                 e.stopPropagation();
                 this.isFavorite = !this.isFavorite;
                 this.changeFavorite.emit(this.isFavorite);
-            }, "aria-label": "Favorito" }, hAsync("dropi-icon", { key: '0020aaa1beffedd0243c62f616dfeb6428ec63e5', name: this.isFavorite ? 'Heart-solid' : 'Heart', width: "18px", height: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), hAsync("div", { key: '390a04f46d8394deb0591969a04525f3687509a0', class: "product-info" }, this.supplierCategory && (hAsync("dropi-ilustration-icon", { key: '7fa320fcc36f6d4929197a2d88e59deb76d34ab0', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), hAsync("div", { key: '67e922b0afc44b3f376db3b20a33d7cc0ae8e987', class: "product-header" }, this.category && (hAsync("span", { key: '421f39afc07922579610fe57abdfa37b4fa68586', class: "category" }, this.category)), hAsync("div", { key: 'e4ad1d38535bd876298efb6d819d3355ac6b7446', class: "stock-info" }, hAsync("span", { key: '5dbdabc282dbfaee4adec81668d38a909e04227d', class: "stock-label" }, "Stock:"), hAsync("span", { key: 'f14a47956953779f4527404930b4a988ac5c5737', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), hAsync("h3", { key: '4403e622316112df4075fafbbbbc17151d2e1b39', class: "product-name" }, this.productName), this.supplier && (hAsync("div", { key: '28554238023a313e1698847a5faccd17e9bbd750', class: "supplier-info" }, hAsync("span", { key: 'e34245925f659f232050ad835cf83690b112d7d0', class: "supplier-label" }, "Proveedor:"), hAsync("span", { key: 'cabf8743951095acf0c05dd6e48ee74140984773', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), hAsync("div", { key: '193982dc4aea14f337f64c9156d97f7c23d02db7', class: "price-container" }, hAsync("div", { key: 'f2925c29fe4d5f9be2f92c501b92351e9a4f60e0', class: "price-item" }, hAsync("span", { key: 'd0a8f99140d6ced64e19a69a2f198ba861cca017', class: "price-label" }, "Precio proveedor"), hAsync("span", { key: '6fa5b8b5cd1f6d6e7b2551bdceedf65e3cb0029d', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), hAsync("div", { key: '0a37ead7f660608ed6303c97893fdd9156b5bfad', class: "price-item" }, hAsync("span", { key: '8bb33b1b418fdbb79c31ed69ddfa2598f6450efd', class: "price-label" }, "Precio sugerido"), hAsync("span", { key: '2df4c30b299190461f0032a66cc8d281ce9c9dab', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), hAsync("div", { key: '91a8306e386ac8d0422a02d3b4bac2d96ba7bebc', class: "separator" }), this.showAddButton && (hAsync("div", { key: '69fd0267e5388770f5067a23d4ddf2636867b030', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
+            }, "aria-label": "Favorito" }, hAsync("dropi-icon", { key: '35300a450b8fff37e7c469b5b8a1f39ebfb717dc', name: this.isFavorite ? 'Heart-solid' : 'Heart', iconWidth: "18px", iconHeight: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), hAsync("div", { key: 'b6792c07dbcc37f636add6bd0f9bfbb88b28fc6b', class: "product-info" }, this.supplierCategory && (hAsync("dropi-ilustration-icon", { key: 'f4074d38a1e7999ffde2b4906de21b91348b4a63', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), hAsync("div", { key: '7a085de7400576ba2595770268845916eecfa3cf', class: "product-header" }, this.category && (hAsync("span", { key: 'c5002b0b82d8483e3ea88d884cdeaa015341e7ca', class: "category" }, this.category)), hAsync("div", { key: '4c24e0f3dc3ea31764290e97a600beb411ce7b50', class: "stock-info" }, hAsync("span", { key: '453b6b6ba34aa1c060052ec6a1aa4b6aeabe454b', class: "stock-label" }, "Stock:"), hAsync("span", { key: '46733d6335c72a16411b27c1cae7dbb1e46a26cc', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), hAsync("h3", { key: '69179b355604ffbf594f192c47ba8ac18964d1c8', class: "product-name" }, this.productName), this.supplier && (hAsync("div", { key: 'b53d6667872f959cc5e48b365b42b5744c4c0ae8', class: "supplier-info" }, hAsync("span", { key: 'e2cb385de94697533b0ac8f8832246dac955efb1', class: "supplier-label" }, "Proveedor:"), hAsync("span", { key: '17e2d2ce7a5d6113fbef89a5c49ec183e189aeee', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), hAsync("div", { key: 'eb146caf735601d1ed0f3ff0f81e234a9a768d04', class: "price-container" }, hAsync("div", { key: '0516aaeb1f4d087b262b5692abfac9993c8b378a', class: "price-item" }, hAsync("span", { key: '837eb19a5bb50dbd05d999a5c3fb0d642f2701b7', class: "price-label" }, "Precio proveedor"), hAsync("span", { key: '4bdba27153a06e39d5449b61eed4707a90123336', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), hAsync("div", { key: '82040761c0b63df23fbc80d0e990d3a1c610d8eb', class: "price-item" }, hAsync("span", { key: 'c93307dba668d60e22e6b7d9215abf289495935c', class: "price-label" }, "Precio sugerido"), hAsync("span", { key: 'd9aca439201e07756e298b0be7d41aa9396cf67d', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), hAsync("div", { key: '79e9e143ddb87209a550069abe839b89ec703e22', class: "separator" }), this.showAddButton && (hAsync("div", { key: 'b3261c8db5e3fd9c97f9894f6aea420495f0577b', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
                 e.stopPropagation();
                 if (this.inStock)
                     this.dropiAddProduct.emit();
-            } }, hAsync("dropi-icon", { key: '6e9a7333778b5a4e75bca612f7900909e9b52c80', name: "Shopping-cart-arrow-rigth", width: "20px", height: "20px", color: "#f49a3d" }), hAsync("span", { key: '1f3eb20049a94cb74bef8c89f8773a831667dc7b', class: "button-text" }, "Enviar a cliente")))));
+            } }, hAsync("dropi-icon", { key: '89cf58b72a1500616eb47b9f6e0bcf1e67229d94', name: "Shopping-cart-arrow-rigth", iconWidth: "20px", iconHeight: "20px", color: "#f49a3d" }), hAsync("span", { key: '60843cb9e54337eae7e570827190f1d60a8f0450', class: "button-text" }, "Enviar a cliente")))));
     }
     static get style() { return dropiCardProductCss(); }
     static get cmpMeta() { return {
@@ -6307,7 +6307,7 @@ class DropiCardSection {
             : hAsync("h6", { class: "card-section__title" }, this.title), this.description && hAsync("p", { key: 'f0c83d631d541d95c19e4a246634da56413a3de9', class: "card-section__desc" }, this.description)), hAsync("div", { key: '976d78401ab26872df88115ae0f0449bcd2faae9', class: "card-section__control" }, this.typeElement === 'switch' ? (hAsync("dropi-switch", { isChecked: this.isChecked, onOnChange: (e) => {
                 this.isChecked = e.detail;
                 this.onChange.emit(e.detail);
-            } })) : (hAsync("button", { class: "card-section__dropdown-btn", onClick: () => this.onClick.emit(), "aria-label": "Expandir" }, hAsync("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));
+            } })) : (hAsync("button", { class: "card-section__dropdown-btn", onClick: () => this.onClick.emit(), "aria-label": "Expandir" }, hAsync("dropi-icon", { name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))))));
     }
     static get style() { return dropiCardSectionCss(); }
     static get cmpMeta() { return {
@@ -6599,10 +6599,10 @@ class DropiCheckboxSelectionList {
     }
     render() {
         const items = this.filtered;
-        return (hAsync("div", { key: 'a86957a361ddab935966496e85da0474d6c7618a', class: "csl" }, this.showFilter && (hAsync("div", { key: 'c6e6d3c7386a788c0e3141ac77b78b597020e43d', class: "csl__search" }, hAsync("dropi-icon", { key: '02b8bbc778c1811f65f4cd07bfd0618a0c647573', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: '935768e39f732099837e2d3dc4791ab2f7f31273', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (hAsync("div", { key: 'a86957a361ddab935966496e85da0474d6c7618a', class: "csl" }, this.showFilter && (hAsync("div", { key: 'c6e6d3c7386a788c0e3141ac77b78b597020e43d', class: "csl__search" }, hAsync("dropi-icon", { key: '5746663be651673a23e8fc062febad9a920512de', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: '47f43fae660a7b3d6c8b56ea0c2bb1f94a22e366', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
                 this.onSearch.emit(this.filterText);
-            } }), this.filterText && (hAsync("button", { key: 'b93947ffd70113fc80e425dd0da04cce04ad3f27', class: "csl__clear", onClick: () => { this.filterText = ''; this.onSearch.emit(''); } }, hAsync("dropi-icon", { key: 'b2e152f7276a914fc03664dabdb3574a2cbeb2c6', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), hAsync("div", { key: '6010ffc9d6ff60dc444da1274609f2b15f69d4a8', class: "csl__list" }, items.length === 0 && this.showNotFound ? (hAsync("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
+            } }), this.filterText && (hAsync("button", { key: '96faed8cb5ce7660af9735e73622dc31570e1daa', class: "csl__clear", onClick: () => { this.filterText = ''; this.onSearch.emit(''); } }, hAsync("dropi-icon", { key: '2fc4bfceb57c9fc2506db5e7c238e7bf48f45cb9', name: "Close-small", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" }))))), hAsync("div", { key: '283d6e1127fbfa7e8206133a6a32bff04e8b2ebc', class: "csl__list" }, items.length === 0 && this.showNotFound ? (hAsync("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
             const checked = this.selected.includes(opt.id);
             return (hAsync("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, hAsync("dropi-checkbox", { checked: checked }), opt.icon && hAsync("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), hAsync("span", { class: "csl__label" }, opt.label)));
         })))));
@@ -6659,7 +6659,7 @@ class DropiChips {
     /** Emitted when the close icon is clicked */
     onClose;
     render() {
-        return (hAsync("div", { key: '1d2faf302cc3eb832d55f46f98a7817fb616e4e1', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (hAsync("img", { key: '3014d189c71a8d3bc23f11caf1181285c6b1b0ed', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (hAsync("dropi-icon", { key: '42c60e26f35e08582045833049d140c3aceaa11d', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), hAsync("span", { key: '474a4adfc086e20b2007f1b423f53b29454546be', class: "chip__text" }, hAsync("slot", { key: '3c3460ffc17a54b8446b63f7b7c7a76162bb5838' })), this.showIcon && (hAsync("button", { key: '6da5b10c81f203dcd204c0fa93babbcab8aaba16', class: "chip__close", onClick: () => this.onClose.emit(), "aria-label": "Eliminar" }, hAsync("dropi-icon", { key: '14ef2e91ede7847830b0e491fd844f9efa637f9a', name: "Cross-circle", width: "14px", height: "14px", color: "currentColor" })))));
+        return (hAsync("div", { key: '1d2faf302cc3eb832d55f46f98a7817fb616e4e1', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (hAsync("img", { key: '3014d189c71a8d3bc23f11caf1181285c6b1b0ed', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (hAsync("dropi-icon", { key: 'b8c57ece5d9451a95aee7d2e90bfe294e788dfc8', class: "chip__pre-icon", name: this.icon, iconWidth: "14px", iconHeight: "14px", color: "currentColor" })), hAsync("span", { key: 'e141b08e2b7c07e45eb065a001c53f40fe36a757', class: "chip__text" }, hAsync("slot", { key: 'aa2c06f8e00b37492034ea0950603ffa3a7638d7' })), this.showIcon && (hAsync("button", { key: 'ea9d1674848c27b06d6e92a0a5bd4fcf8de499a4', class: "chip__close", onClick: () => this.onClose.emit(), "aria-label": "Eliminar" }, hAsync("dropi-icon", { key: '0a67633f6f3c898958359730b635430e53d7565c', name: "Cross-circle", iconWidth: "14px", iconHeight: "14px", color: "currentColor" })))));
     }
     static get style() { return dropiChipsCss(); }
     static get cmpMeta() { return {
@@ -6772,9 +6772,9 @@ class DropiCitySelector {
     }
     render() {
         const groups = this.filtered;
-        return (hAsync("div", { key: '5b1e27677c34d0dc85dc9c8544e4b0ba9a66216b', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, hAsync("button", { key: 'e359c1baff0a255cd396ee35836430486bc67cd3', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, hAsync("div", { key: '082246999f826e8cfe1b2d09fd801a5d7db7e1b2', class: "chips-area" }, this.selected.length === 0 && (hAsync("span", { key: '90453c84cae3561412f795ec1ffc01923cd87040', class: "placeholder" }, this.placeholder)), this.selected.map(val => (hAsync("span", { class: "chip", key: String(val) }, this.getLabel(val), hAsync("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, hAsync("dropi-icon", { name: "Close-small", width: "10px", height: "10px", color: "Primary-Primary-500" })))))), hAsync("dropi-icon", { key: '27f05e3fcf08bdb4e83ee52f7bba02a5c87f2d3e', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "16px", height: "16px", color: "Gray-Gray-500" })), this.isOpen && (hAsync("div", { key: '2fd2d164c186d9d4d1f6664e531449373dfce023', class: "dropdown", role: "listbox" }, hAsync("div", { key: 'e6fb9fc7938296d696598e2984167cec5d693b07', class: "search-wrap" }, hAsync("div", { key: '9a56582e19bf264065bb11e9bccdf3179e56fb7b', class: "search-field" }, hAsync("input", { key: '9228debd9abc4e2a884006bd45046e8e5b3cce25', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), hAsync("span", { key: '609751d699dc6227347ec565ff14c3f35fa9a6cf', class: "search-icon" }, hAsync("dropi-icon", { key: 'fcacc7c73eeb3f2dc27f83f9dfcbe2476b85136e', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), hAsync("div", { key: 'c71c2b0303f37169ee221387aeec6ceea499b8e1', class: "options-list" }, groups.length === 0 && (hAsync("div", { key: 'a5525ef28be665b337658032318507ae01f69a0d', class: "no-results" }, "Sin resultados")), groups.map(group => (hAsync("div", { key: group.value, class: "group" }, hAsync("div", { class: "group-label" }, group.label), group.items.map(city => {
+        return (hAsync("div", { key: '5b1e27677c34d0dc85dc9c8544e4b0ba9a66216b', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, hAsync("button", { key: 'e359c1baff0a255cd396ee35836430486bc67cd3', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, hAsync("div", { key: '082246999f826e8cfe1b2d09fd801a5d7db7e1b2', class: "chips-area" }, this.selected.length === 0 && (hAsync("span", { key: '90453c84cae3561412f795ec1ffc01923cd87040', class: "placeholder" }, this.placeholder)), this.selected.map(val => (hAsync("span", { class: "chip", key: String(val) }, this.getLabel(val), hAsync("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, hAsync("dropi-icon", { name: "Close-small", iconWidth: "10px", iconHeight: "10px", color: "Primary-Primary-500" })))))), hAsync("dropi-icon", { key: 'f99675449127fb19fdea950db057d8c14ca62644', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-500" })), this.isOpen && (hAsync("div", { key: '2a14a55016c19128fde45359f4b29b6f04f9b035', class: "dropdown", role: "listbox" }, hAsync("div", { key: '1321152ed7b0d3f50b04c7f28b05f1523c41cce4', class: "search-wrap" }, hAsync("div", { key: '7c94a7506d44cd89b83e5782cce16319f266f82c', class: "search-field" }, hAsync("input", { key: '5f40db9a8df0adc09776b4adcfe03a4a6d1d1467', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), hAsync("span", { key: '3140903ef4355b970c8f348e4f55d43f852e247d', class: "search-icon" }, hAsync("dropi-icon", { key: 'b59235b0d7a685000033d2a294fbce246d0ba4c2', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), hAsync("div", { key: 'bfd40e336b402bd92ec212466cf89e1cffb0d4be', class: "options-list" }, groups.length === 0 && (hAsync("div", { key: '9fce9b4df1ffb122278480f0ab60255ea0c795ec', class: "no-results" }, "Sin resultados")), groups.map(group => (hAsync("div", { key: group.value, class: "group" }, hAsync("div", { class: "group-label" }, group.label), group.items.map(city => {
             const isSelected = this.selected.includes(city.value);
-            return (hAsync("div", { key: String(city.value), class: { 'city-option': true, 'city-option--selected': isSelected }, onClick: (e) => this.toggleCity(city.value, e), role: "option", "aria-selected": isSelected }, hAsync("span", { class: { 'checkbox': true, 'checkbox--checked': isSelected } }, isSelected && (hAsync("dropi-icon", { name: "Check", width: "10px", height: "10px", color: "Neutral-White" }))), hAsync("span", { class: "city-label" }, city.label)));
+            return (hAsync("div", { key: String(city.value), class: { 'city-option': true, 'city-option--selected': isSelected }, onClick: (e) => this.toggleCity(city.value, e), role: "option", "aria-selected": isSelected }, hAsync("span", { class: { 'checkbox': true, 'checkbox--checked': isSelected } }, isSelected && (hAsync("dropi-icon", { name: "Check", iconWidth: "10px", iconHeight: "10px", color: "Neutral-White" }))), hAsync("span", { class: "city-label" }, city.label)));
         })))))))));
     }
     static get watchers() { return {
@@ -7374,7 +7374,7 @@ class DropiCountrySelector {
                 'select-button': true,
                 'select-completed': !!this.selected,
                 'select-invalid': this.hasError,
-            }, disabled: this.disabled, onClick: () => this.open() }, hAsync("div", { key: '79df14d64f598d312a1cd82f294edf8aa14ed32e', class: "selected-content" }, this.selected ? (hAsync("span", { class: "selected-option" }, hAsync("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (hAsync("span", { class: "placeholder-text" }, this.placeholder))), hAsync("dropi-icon", { key: 'dfa717ce51975386fab6a3af796637a27a8cb039', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "20px", height: "20px", color: "Gray-Gray-500" })), hAsync("ul", { key: '4f72db336c9d1bc1ce149279970cdaa4dcaa4f77', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, hAsync("li", { key: '3badbda75f609e979f5edf7ad3f5783bf9cdf001', class: "search-li" }, hAsync("div", { key: 'cae7ee12d3d3d40a3bb9728f4c109cd0ba513995', class: "search-field" }, hAsync("input", { key: '82b7703b0531c80d51b5fb70d3e2f0b804e3089f', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), hAsync("span", { key: '45378fac8b73b656fc8c5bb16d7f072398890508', class: "search-icon" }, hAsync("dropi-icon", { key: '39c3a426407fd68367a3494c3d319bdbcf9692bb', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (hAsync("li", { key: country.code }, hAsync("button", { class: "option", type: "button", onClick: () => this.select(country) }, hAsync("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (hAsync("div", { key: '58f747d7cfecd23d3bdc166f21c3560e642f336d', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && hAsync("dropi-icon", { key: 'fb68e291bd8dcfe5955281504b3de80699fa0ff0', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), hAsync("span", { key: '9d5287f387f09f2b90b41f14f05c3572a44d74a3' }, this.textHelper)))));
+            }, disabled: this.disabled, onClick: () => this.open() }, hAsync("div", { key: '79df14d64f598d312a1cd82f294edf8aa14ed32e', class: "selected-content" }, this.selected ? (hAsync("span", { class: "selected-option" }, hAsync("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (hAsync("span", { class: "placeholder-text" }, this.placeholder))), hAsync("dropi-icon", { key: 'dc74219468e838cb5cf06a5ab5036809f84c8f44', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), hAsync("ul", { key: 'ef8ce166ba747d7973b09a3c0183629d42e344d9', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, hAsync("li", { key: '04d0b6b0dc3fb431ad606c0df115d4966f3b5a24', class: "search-li" }, hAsync("div", { key: '735a83924982308b4ec92eb19f09c449717fa05d', class: "search-field" }, hAsync("input", { key: '3d6a0db7489e59e310bf50731b5f48ae3a244fe3', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), hAsync("span", { key: '00bdb2ddd3f67929246f89faed2a2ef2ab169860', class: "search-icon" }, hAsync("dropi-icon", { key: 'bffe43141d5de99b143751c4a80fd972ba8b274c', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (hAsync("li", { key: country.code }, hAsync("button", { class: "option", type: "button", onClick: () => this.select(country) }, hAsync("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (hAsync("div", { key: '32baa238875d15f41d1b308fc7adb418c6acc2b1', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && hAsync("dropi-icon", { key: 'bfcfecc740f2cd9044ba2e1d2188ea2a9a208836', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: 'd1ced64bb98903ce46e692ddf008f885edf3162b' }, this.textHelper)))));
     }
     static get watchers() { return {
         "currentSelection": [{
@@ -7588,7 +7588,7 @@ class DropiDatePicker {
                 'dp-trigger--disabled': this.disabled,
                 'dp-trigger--invalid': this.isInvalid,
                 'dp-trigger--loading': this.loading
-            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, hAsync("dropi-icon", { key: '51b6fed8a232d7d22494c0bdf9f17e8c6ae0dbbe', name: "Calendar", width: "16px", height: "16px", color: "Gray-Gray-400" }), hAsync("span", { key: 'ecbe872cd13efb112ef106f1dfde58cd745c124c', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), hAsync("dropi-icon", { key: '6025abcf99d825dd885c9916f755c6b06e0657ed', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })), this.open && (hAsync("div", { key: 'b46a2bd022bc6ec2edfdf07a8a21b010b56610a4', class: "dp-popup" }, hAsync("div", { key: '8aedcc47ab11c03bf8bc3309fc92ba3f83587520', class: "dp-nav" }, hAsync("button", { key: 'e5a7f2a8edc8d33e08449713a976008b83108f36', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, hAsync("dropi-icon", { key: '515211fe3c12cd2e9399bd8fad7c0dd84a4de3cd', name: "Arrow-Left-2", width: "16px", height: "16px", color: "Gray-Gray-600" })), hAsync("span", { key: '0d5acefc9c8418749b4065d3bc92c8fb53744557', class: "dp-nav__title" }, hAsync("span", { key: 'd4b68ef6a5c2885cf7cd05e7b49e47623b8c0d00' }, MONTHS_ES[this.viewMonth]), hAsync("span", { key: '8aefcf2e7e383111994c58a743706d6d19607f65' }, this.viewYear)), hAsync("button", { key: 'b7524552e5b05f592633bd6e16cdcda8659aeacf', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, hAsync("dropi-icon", { key: '5e14a0dafb227ba6f2e90298005401050b55a3bb', name: "Arrow-Right-2", width: "16px", height: "16px", color: "Gray-Gray-600" }))), hAsync("div", { key: '37d7428dc36bdc805fb60c36126a86509f3b1188', class: "dp-grid" }, DAYS_ES.map(d => (hAsync("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
+            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, hAsync("dropi-icon", { key: '773df10339713e2900abf37a27814f11919723a6', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("span", { key: '2dfb36f49f70b658eb3e614aaafd7d55b84bd8ff', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), hAsync("dropi-icon", { key: '285147bc4a042263f760b36779d05453f041b452', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (hAsync("div", { key: '44e0c6e10690c3acf8b6d1df295fa9806da11921', class: "dp-popup" }, hAsync("div", { key: 'd901f7614790294623a192bfca1821ddac2f93eb', class: "dp-nav" }, hAsync("button", { key: 'd6ce30acaaf801e3c373b2c3f2835cc2d52dd0f6', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, hAsync("dropi-icon", { key: 'bce4421271b1d662c909d8934992567e33dac651', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), hAsync("span", { key: 'bd483b0fe673fda734b6acc526e1cb6e7682c5be', class: "dp-nav__title" }, hAsync("span", { key: 'cd9e36ca306145ad39371a7a147c5efbb6ea9922' }, MONTHS_ES[this.viewMonth]), hAsync("span", { key: '99b3f4cb1f8d5cef1b07fa39ab6afd51d77080da' }, this.viewYear)), hAsync("button", { key: '1fc969593153c3b920a8c99e7beae8e6ba2d0e9d', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, hAsync("dropi-icon", { key: 'b200e12b9267232f9e01794ff47e4b613cdeaf53', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), hAsync("div", { key: 'ea473f30463db209687e9f8ecf4f3e9f9422e379', class: "dp-grid" }, DAYS_ES.map(d => (hAsync("div", { class: "dp-day-header" }, d))), days.map(({ iso, day, currentMonth }) => {
             const isSelected = this.selectionMode !== 'range'
                 ? iso === this.selectedDate
                 : iso === this.startDate || iso === this.endDate;
@@ -7610,12 +7610,12 @@ class DropiDatePicker {
                     if (this.selectionMode === 'range' && this.startDate && !this.endDate)
                         this.hoverDate = iso;
                 }, onMouseLeave: () => this.hoverDate = '' }, day));
-        })), hAsync("div", { key: '9a16f2d3aaffda303f2cf7c4d8045ad355eb3e88', class: "dp-footer" }, hAsync("button", { key: '2c236322d33b4dbc37e683c328bc2c17aa1422cf', class: "dp-footer__clear", type: "button", onClick: () => {
+        })), hAsync("div", { key: 'eb232baf8ece9768a26f5be6bcb6c9d965916643', class: "dp-footer" }, hAsync("button", { key: '97e25f18c4af3e4c43f762944b21bfd3941b0ea0', class: "dp-footer__clear", type: "button", onClick: () => {
                 this.selectedDate = '';
                 this.startDate = '';
                 this.endDate = '';
                 this.open = false;
-            } }, "Limpiar"), hAsync("button", { key: 'a08afb2358819fc8c15c7949dc7e4cbdf14b52fb', class: "dp-footer__today", type: "button", onClick: () => {
+            } }, "Limpiar"), hAsync("button", { key: '7e9cf51936868db07c3b940001c2b310b1de2b6d', class: "dp-footer__today", type: "button", onClick: () => {
                 if (this.selectionMode !== 'range') {
                     this.selectedDate = today;
                     this.open = false;
@@ -7857,7 +7857,7 @@ class DropiDrawer {
         return (hAsync("div", { key: '7792ce8e001adf404aef387e35c5fb601f69b1e2', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, hAsync("div", { key: '186c33be6a7cd1e34e6d1f852219be91b24a15b9', class: "drawer-backdrop", onClick: () => {
                 if (this.closeOnBackdrop)
                     this.close();
-            } }), hAsync("div", { key: '3a48c465707125c2de1e369e70375689fe5ff9c1', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, hAsync("div", { key: '840bb2933bc7e2264269bbadd5d9d61649fe58fe', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, hAsync("h3", { key: 'bfd9c7db02e9db07ce32115ca6386a9840c61288', class: "drawer-header__title" }, this.drawerTitle), hAsync("button", { key: '6dc350e26f74d4e3aead7697bd2f5552e49e833c', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, hAsync("dropi-icon", { key: 'fcc5331391009f97254db5f729c61631edc33d8c', name: "Close-small", width: "32px", height: "32px", color: "Gray-Gray-400" }))), hAsync("div", { key: 'e50ae31043bde759a79fbc9b4f734e06dc6c2a3f', class: "drawer-body" }, hAsync("slot", { key: 'f1f0d7314b8bd7f6fd6fdec88a818963c1d5834f' })), hAsync("div", { key: 'b14833f885757bbcfa687b7b2ee1cf847301134b', class: "drawer-footer" }, hAsync("slot", { key: '5cba1759160a934c3b54166914a10b1335075151', name: "footer" })))));
+            } }), hAsync("div", { key: '3a48c465707125c2de1e369e70375689fe5ff9c1', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, hAsync("div", { key: '840bb2933bc7e2264269bbadd5d9d61649fe58fe', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, hAsync("h3", { key: 'bfd9c7db02e9db07ce32115ca6386a9840c61288', class: "drawer-header__title" }, this.drawerTitle), hAsync("button", { key: '6dc350e26f74d4e3aead7697bd2f5552e49e833c', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, hAsync("dropi-icon", { key: 'aa887706723f327e48cdb836ee2ea0597fca3f3b', name: "Close-small", iconWidth: "32px", iconHeight: "32px", color: "Gray-Gray-400" }))), hAsync("div", { key: 'e6f301a6253d930e116a6e68a3e8f280b32f00ef', class: "drawer-body" }, hAsync("slot", { key: 'f05c00171734247aec82b8b504a53e11c3612fc9' })), hAsync("div", { key: 'f0f4aaba5926a2d0c78b3b1869d8d8efa0f03845', class: "drawer-footer" }, hAsync("slot", { key: '45e370e62b5d2e7c221f37ad8582656bed159637', name: "footer" })))));
     }
     static get watchers() { return {
         "open": [{
@@ -8042,7 +8042,7 @@ class DropiFavoriteButton {
         this.toggleFavorite.emit(this.isFavorite);
     }
     render() {
-        return (hAsync("button", { key: '07acf3b1f81e69ddea79672fd4853ad575b4d2af', class: { 'fav-btn': true, 'fav-btn--active': this.isFavorite }, onClick: () => this.toggle(), onMouseEnter: () => this.hovered = true, onMouseLeave: () => this.hovered = false, "aria-label": this.isFavorite ? 'Quitar de favoritos' : 'Agregar a favoritos', "aria-pressed": String(this.isFavorite) }, hAsync("dropi-icon", { key: 'fcf3cc2b3b107eb43c6a83a9d6dc6cbff7ee202f', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', width: "19px", height: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
+        return (hAsync("button", { key: '07acf3b1f81e69ddea79672fd4853ad575b4d2af', class: { 'fav-btn': true, 'fav-btn--active': this.isFavorite }, onClick: () => this.toggle(), onMouseEnter: () => this.hovered = true, onMouseLeave: () => this.hovered = false, "aria-label": this.isFavorite ? 'Quitar de favoritos' : 'Agregar a favoritos', "aria-pressed": String(this.isFavorite) }, hAsync("dropi-icon", { key: '4ce84ce1876e76c07666c609d427484cef65c460', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', iconWidth: "19px", iconHeight: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
     }
     static get style() { return dropiFavoriteButtonCss(); }
     static get cmpMeta() { return {
@@ -8278,7 +8278,7 @@ class DropiFileUpload {
     renderCardItem(item) {
         const isImage = item.fileType === 'image' && item.previewUrl && !item.previewUrl.includes('.pdf');
         const isPdf = item.file?.type?.includes('pdf');
-        return (hAsync("div", { key: item.id, class: `file-card ${item.state} ${this.getFileTypeClass(item)}` }, isImage ? (hAsync("div", { class: "preview-wrapper" }, hAsync("img", { class: `preview ${item.state}`, src: item.previewUrl, alt: item.file?.name }), item.state === 'complete' && (hAsync("div", { class: "overlay-icon" }, this.renderCheckSvg())))) : (hAsync("div", { class: "file-icon" }, isPdf ? this.renderPdfSvg() : this.renderDocSvg())), item.state !== 'confirm-delete' && item.state !== 'deleting' && (hAsync("div", { class: "info-container" }, hAsync("div", { class: `file-name${item.state === 'error' ? ' error-text' : ''}` }, item.file?.name ?? item.previewUrl?.split('/').pop()), item.state === 'uploading' && (hAsync("div", { class: "progress-bar-container" }, hAsync("div", { class: "progress-bar", style: { width: `${item.progress}%` } }))), item.state === 'error' && (hAsync("div", { class: "error-label" }, "Error al subir el archivo")))), item.state === 'deleting' && (hAsync("div", { class: "deleting-container" }, hAsync("span", { class: "deleting-label" }, "Eliminando..."))), item.state !== 'confirm-delete' && item.state !== 'error' && item.state !== 'deleting' && (hAsync("div", { class: "preview-image", onClick: () => { } }, hAsync("dropi-icon", { name: "Eye", width: "20px", height: "20px", color: "Gray-Gray-600" }))), item.state !== 'confirm-delete' && item.state !== 'deleting' && !this.onlyView && (hAsync("div", { class: "delete", onClick: () => this.handleFileAction(item, 'delete') }, this.renderTrashSvg())), item.state === 'confirm-delete' && (hAsync("div", { class: "delete-confirm" }, hAsync("span", { class: "message" }, item.previewUrl ? '¿Eliminar imagen?' : '¿Eliminar archivo?'), hAsync("div", { class: "actions" }, hAsync("dropi-button", { size: "small", text: "S\u00ED", onClick: () => this.handleFileAction(item, 'confirm-delete') }), hAsync("dropi-button", { text: "No", size: "small", severity: "secondary", onClick: () => this.handleFileAction(item, 'cancel-delete') }))))));
+        return (hAsync("div", { key: item.id, class: `file-card ${item.state} ${this.getFileTypeClass(item)}` }, isImage ? (hAsync("div", { class: "preview-wrapper" }, hAsync("img", { class: `preview ${item.state}`, src: item.previewUrl, alt: item.file?.name }), item.state === 'complete' && (hAsync("div", { class: "overlay-icon" }, this.renderCheckSvg())))) : (hAsync("div", { class: "file-icon" }, isPdf ? this.renderPdfSvg() : this.renderDocSvg())), item.state !== 'confirm-delete' && item.state !== 'deleting' && (hAsync("div", { class: "info-container" }, hAsync("div", { class: `file-name${item.state === 'error' ? ' error-text' : ''}` }, item.file?.name ?? item.previewUrl?.split('/').pop()), item.state === 'uploading' && (hAsync("div", { class: "progress-bar-container" }, hAsync("div", { class: "progress-bar", style: { width: `${item.progress}%` } }))), item.state === 'error' && (hAsync("div", { class: "error-label" }, "Error al subir el archivo")))), item.state === 'deleting' && (hAsync("div", { class: "deleting-container" }, hAsync("span", { class: "deleting-label" }, "Eliminando..."))), item.state !== 'confirm-delete' && item.state !== 'error' && item.state !== 'deleting' && (hAsync("div", { class: "preview-image", onClick: () => { } }, hAsync("dropi-icon", { name: "Eye", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }))), item.state !== 'confirm-delete' && item.state !== 'deleting' && !this.onlyView && (hAsync("div", { class: "delete", onClick: () => this.handleFileAction(item, 'delete') }, this.renderTrashSvg())), item.state === 'confirm-delete' && (hAsync("div", { class: "delete-confirm" }, hAsync("span", { class: "message" }, item.previewUrl ? '¿Eliminar imagen?' : '¿Eliminar archivo?'), hAsync("div", { class: "actions" }, hAsync("dropi-button", { size: "small", text: "S\u00ED", onClick: () => this.handleFileAction(item, 'confirm-delete') }), hAsync("dropi-button", { text: "No", size: "small", severity: "secondary", onClick: () => this.handleFileAction(item, 'cancel-delete') }))))));
     }
     renderGridItem(item) {
         return (hAsync("div", { key: item.id, class: `img-view ${item.state} ${this.getFileTypeClass(item)}` }, hAsync("div", { class: "preview-wrapper" }, hAsync("div", { class: "preview-container" }, hAsync("img", { class: `preview ${item.state}`, src: item.previewUrl || '', alt: "preview" })), item.state === 'complete' && (hAsync("div", { class: "overlay-icon" }, this.renderCheckSvg())), item.state !== 'confirm-delete' && item.state !== 'deleting' && (hAsync("div", { class: "delete", onClick: () => this.handleFileAction(item, 'confirm-delete') }, this.renderTrashGridSvg()))), item.state === 'uploading' && (hAsync("div", { class: "progress-bar-container" }, hAsync("div", { class: "progress-bar", style: { width: `${item.progress}%` } }))), item.state === 'deleting' && (hAsync("div", { class: "deleting-info" }, hAsync("span", { class: "deleting-info-label" }, "Eliminando...")))));
@@ -8290,7 +8290,7 @@ class DropiFileUpload {
         const cardFiles = files.filter(f => f.typeView === 'card');
         const showDropZone = files.length < (this.maxFiles ?? 1) && !this.isDropZoneHidden();
         const isSmall = this.dragAndDropSize === 'small';
-        return (hAsync("div", { key: '2823263b5c803c23eb1bf091676a0fd86243117a', class: "upload-container" }, (this.title || this.label) && (hAsync("div", { key: 'ec9c8a63c9c34f8c8ce68310c07dd8fda66ffda2', class: "upload-header" }, this.title && hAsync("div", { key: 'f26ade32fe339a0382166345110ef3445bb58475', class: "text title" }, this.title), this.label && hAsync("div", { key: 'becc99e74e8d555fc40bcd0854575c5b435faf85', class: "text label" }, this.label))), this.error && (hAsync("dropi-alert", { key: 'b01f441d6083e31f5ddaa2bc661722835134e8f0', message: this.errorMessage, type: "default", state: "error", dismissable: true, showButton: false, onOnClose: () => { this.error = false; } })), showDropZone && (hAsync("div", { key: 'e221786da335f56a6160874d56ad4b50c9b0702f', class: { 'file-upload': true, 'drag-over': this.dragging }, onDragOver: (e) => this.onDragOver(e), onDragEnter: (e) => this.onDragEnter(e), onDragLeave: () => this.onDragLeave(), onDrop: (e) => this.onDrop(e) }, hAsync("div", { key: 'ad6d5ed22aa64c4a33e3861cc48271dbecc59279', class: `file-upload__zone${this.dragging ? ' drag-over' : ''}` }, !isSmall && (hAsync("svg", { key: 'a5666c9aaad62e8a4b6677b288d853953ada6169', width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '98a2c4e40aa67249f0b8b13f956846334a1b8652', d: "M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z", fill: "#FEF8F1" }), hAsync("g", { key: '892e4f122e593fd77f37048fcd68157a682bf1b7', "clip-path": "url(#up)" }, hAsync("path", { key: 'aaaddae87cb45b9c00ddc98142c1ef5b2ec25a0a', d: "M19.3379 13.7187L19.3332 24.0107C19.3332 24.1875 19.4035 24.357 19.5285 24.4821C19.6535 24.6071 19.8231 24.6773 19.9999 24.6773C20.1767 24.6773 20.3463 24.6071 20.4713 24.4821C20.5963 24.357 20.6666 24.1875 20.6666 24.0107L20.6712 13.73L22.6126 15.672C22.7376 15.797 22.9071 15.8672 23.0839 15.8672C23.2607 15.8672 23.4302 15.797 23.5552 15.672C23.6802 15.547 23.7504 15.3774 23.7504 15.2007C23.7504 15.0239 23.6802 14.8543 23.5552 14.7293L21.4145 12.586C21.2288 12.4001 21.0083 12.2527 20.7655 12.1521C20.5228 12.0515 20.2626 11.9998 19.9999 11.9998C19.7371 11.9998 19.477 12.0515 19.2342 12.1521C18.9915 12.2527 18.771 12.4001 18.5852 12.586L16.4445 14.7273C16.3196 14.8523 16.2494 15.0219 16.2494 15.1987C16.2494 15.3754 16.3196 15.545 16.4445 15.67C16.5696 15.795 16.7391 15.8652 16.9159 15.8652C17.0927 15.8652 17.2622 15.795 17.3872 15.67L19.3379 13.7187Z", fill: "#F49A3D" }), hAsync("path", { key: '4c9eddf5c6348984c7478701fe67e411d01cf8c5', d: "M26.6667 23.3329V25.9996C26.6667 26.1764 26.5964 26.346 26.4714 26.471C26.3464 26.596 26.1768 26.6663 26 26.6663H14C13.8232 26.6663 13.6536 26.596 13.5286 26.471C13.4036 26.346 13.3333 26.1764 13.3333 25.9996V23.3329C13.3333 23.1561 13.2631 22.9865 13.1381 22.8615C13.013 22.7365 12.8435 22.6663 12.6667 22.6663C12.4899 22.6663 12.3203 22.7365 12.1953 22.8615C12.0702 22.9865 12 23.1561 12 23.3329V25.9996C12 26.53 12.2107 27.0387 12.5858 27.4138C12.9609 27.7889 13.4696 27.9996 14 27.9996H26C26.5304 27.9996 27.0391 27.7889 27.4142 27.4138C27.7893 27.0387 28 26.53 28 25.9996V23.3329C28 23.1561 27.9298 22.9865 27.8047 22.8615C27.6797 22.7365 27.5101 22.6663 27.3333 22.6663C27.1565 22.6663 26.987 22.7365 26.8619 22.8615C26.7369 22.9865 26.6667 23.1561 26.6667 23.3329Z", fill: "#F49A3D" })), hAsync("defs", { key: 'bcc8c24fcf8d9ea939dec31a36e5fce8c0fd203e' }, hAsync("clipPath", { key: '9724c45ddf4d8983116baf1b4baadb8e1c83ed9d', id: "up" }, hAsync("rect", { key: '1d0ca58ddc76c661f8278a177ad670633008bd5a', width: "16", height: "16", fill: "white", transform: "translate(12 12)" }))))), hAsync("div", { key: 'd1a2c7a7cc539b1c519dcc5931c80eb38c230e1f', class: isSmall ? 'info size-small-upload' : 'info' }, hAsync("div", { key: '4265e328f1bab72a221746afc15b0e7e8b6324b0', class: "title" }, this.textDropZone), isSmall && (hAsync("dropi-button", { key: '076a0dfc2f087b9724e60980bb1217e676bdaeda', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } }))), !isSmall && (hAsync("div", { key: '070c2a5374d4262b4b66ea2a9f51a75358865011', class: "info-desc" }, this.accept && hAsync("div", { key: '6482d13398d8ea654dbd5f5c684c7b0602da0b7d', class: "description" }, "Formatos admitidos: ", this.accept), hAsync("div", { key: '25ccba2cd7a16f732f111aeefe076516b0c360f6', class: "description" }, "Tama\u00F1o m\u00E1ximo: ", this.maxFileSizeMB, "MB"))), !isSmall && (hAsync("dropi-button", { key: 'a1ed64460aa8c9aead966d33fa8ef25ddc383000', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } })), hAsync("input", { key: 'b5debf074ef579d4bd74d1507ba63b912eeba37e', ref: (el) => this.inputRef = el, type: "file", accept: this.accept, multiple: this.multiple, class: "upload-hidden", onChange: (e) => this.onInputChange(e) })))), this.selectedFiles.length > 0 && (hAsync("div", { key: '40d77d3c697b18637fa7669e857f5d931d91543d', class: "files-container" }, gridFiles.length > 0 && (hAsync("div", { key: 'c8b2eac24568959a83500930fc36c54be04d3d75', class: "grid-list" }, gridFiles.map(f => this.renderGridItem(f)), gridFiles.length < this.maxFiles && (hAsync("div", { key: '6782016ecee648dff31baa352db02413a37ad2ae', class: "add-img", onClick: () => this.addImage() }, hAsync("div", { key: '08ecf1dae23fc4dac7818fd178d40a50a10a4508', class: "icon" }, hAsync("svg", { key: 'c41793f302e1c0f7eeb91c0e524cd398988c62c2', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: 'cf066997fbfb0aa31bacbb72ef037f67b74de5ec', d: "M9.77774 6.4444H7.55551V4.22218C7.55551 4.07484 7.49698 3.93353 7.3928 3.82934C7.28861 3.72516 7.1473 3.66663 6.99996 3.66663C6.85262 3.66663 6.71131 3.72516 6.60712 3.82934C6.50294 3.93353 6.4444 4.07484 6.4444 4.22218V6.4444H4.22218C4.07484 6.4444 3.93353 6.50294 3.82934 6.60712C3.72516 6.71131 3.66663 6.85262 3.66663 6.99996C3.66663 7.1473 3.72516 7.28861 3.82934 7.3928C3.93353 7.49698 4.07484 7.55551 4.22218 7.55551H6.4444V9.77774C6.4444 9.92508 6.50294 10.0664 6.60712 10.1706C6.71131 10.2748 6.85262 10.3333 6.99996 10.3333C7.1473 10.3333 7.28861 10.2748 7.3928 10.1706C7.49698 10.0664 7.55551 9.92508 7.55551 9.77774V7.55551H9.77774C9.92508 7.55551 10.0664 7.49698 10.1706 7.3928C10.2748 7.28861 10.3333 7.1473 10.3333 6.99996C10.3333 6.85262 10.2748 6.71131 10.1706 6.60712C10.0664 6.50294 9.92508 6.4444 9.77774 6.4444Z", fill: "#32394D" }))), hAsync("div", { key: '03214b3dd6dad6b7d3973f36d041aafcb9089819', class: "text" }, "Agregar"))))), cardFiles.length > 0 && (hAsync("div", { key: '4fb7c564b557885680f2aa2723273dac6f15cc72', class: "card-list" }, cardFiles.map(f => this.renderCardItem(f))))))));
+        return (hAsync("div", { key: 'c09a5505630f5fa711bfd4bf20961c12b72a3fd8', class: "upload-container" }, (this.title || this.label) && (hAsync("div", { key: '1bf146f7faacca9e28002ea36e36bfffbead52e2', class: "upload-header" }, this.title && hAsync("div", { key: '00541bbf16b27c4a110cdde47826e5cc873e81c8', class: "text title" }, this.title), this.label && hAsync("div", { key: '3794f66b232427eab5b046ddf0e5aa70e7752967', class: "text label" }, this.label))), this.error && (hAsync("dropi-alert", { key: 'bfa68d17ac941905787526e3f8804e3e0f2f1778', message: this.errorMessage, type: "default", state: "error", dismissable: true, showButton: false, onOnClose: () => { this.error = false; } })), showDropZone && (hAsync("div", { key: '81c39eb2291b04e57414c7e8912e975557f8216f', class: { 'file-upload': true, 'drag-over': this.dragging }, onDragOver: (e) => this.onDragOver(e), onDragEnter: (e) => this.onDragEnter(e), onDragLeave: () => this.onDragLeave(), onDrop: (e) => this.onDrop(e) }, hAsync("div", { key: 'e6f548754efa4c94d882b305887cf57aa42ce72c', class: `file-upload__zone${this.dragging ? ' drag-over' : ''}` }, !isSmall && (hAsync("svg", { key: '52e3baa97a868e8e1dea0e2c8767514804e8ebd0', width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: 'bb4a9b1a1a84ac80a2f0b8fef7400f47a256cdee', d: "M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.0457 40 20 40C8.95431 40 0 31.0457 0 20Z", fill: "#FEF8F1" }), hAsync("g", { key: 'a65c0b3d112c7ab0ac22195a5f955f79dae859a8', "clip-path": "url(#up)" }, hAsync("path", { key: 'fa3e06035df1bcbfe3d6baee2fdf458815a56e70', d: "M19.3379 13.7187L19.3332 24.0107C19.3332 24.1875 19.4035 24.357 19.5285 24.4821C19.6535 24.6071 19.8231 24.6773 19.9999 24.6773C20.1767 24.6773 20.3463 24.6071 20.4713 24.4821C20.5963 24.357 20.6666 24.1875 20.6666 24.0107L20.6712 13.73L22.6126 15.672C22.7376 15.797 22.9071 15.8672 23.0839 15.8672C23.2607 15.8672 23.4302 15.797 23.5552 15.672C23.6802 15.547 23.7504 15.3774 23.7504 15.2007C23.7504 15.0239 23.6802 14.8543 23.5552 14.7293L21.4145 12.586C21.2288 12.4001 21.0083 12.2527 20.7655 12.1521C20.5228 12.0515 20.2626 11.9998 19.9999 11.9998C19.7371 11.9998 19.477 12.0515 19.2342 12.1521C18.9915 12.2527 18.771 12.4001 18.5852 12.586L16.4445 14.7273C16.3196 14.8523 16.2494 15.0219 16.2494 15.1987C16.2494 15.3754 16.3196 15.545 16.4445 15.67C16.5696 15.795 16.7391 15.8652 16.9159 15.8652C17.0927 15.8652 17.2622 15.795 17.3872 15.67L19.3379 13.7187Z", fill: "#F49A3D" }), hAsync("path", { key: '97456d13ef7a8a75ecf7e172ccb85ca859e3d535', d: "M26.6667 23.3329V25.9996C26.6667 26.1764 26.5964 26.346 26.4714 26.471C26.3464 26.596 26.1768 26.6663 26 26.6663H14C13.8232 26.6663 13.6536 26.596 13.5286 26.471C13.4036 26.346 13.3333 26.1764 13.3333 25.9996V23.3329C13.3333 23.1561 13.2631 22.9865 13.1381 22.8615C13.013 22.7365 12.8435 22.6663 12.6667 22.6663C12.4899 22.6663 12.3203 22.7365 12.1953 22.8615C12.0702 22.9865 12 23.1561 12 23.3329V25.9996C12 26.53 12.2107 27.0387 12.5858 27.4138C12.9609 27.7889 13.4696 27.9996 14 27.9996H26C26.5304 27.9996 27.0391 27.7889 27.4142 27.4138C27.7893 27.0387 28 26.53 28 25.9996V23.3329C28 23.1561 27.9298 22.9865 27.8047 22.8615C27.6797 22.7365 27.5101 22.6663 27.3333 22.6663C27.1565 22.6663 26.987 22.7365 26.8619 22.8615C26.7369 22.9865 26.6667 23.1561 26.6667 23.3329Z", fill: "#F49A3D" })), hAsync("defs", { key: '502826c8a475fb8e39cd5c17412b3a5d08b8b57f' }, hAsync("clipPath", { key: 'ee19ab3b2a0a2ee79130eb7c864322f3b1b8ca12', id: "up" }, hAsync("rect", { key: '6928d7c2657125285176108904a87b12578e99c7', width: "16", height: "16", fill: "white", transform: "translate(12 12)" }))))), hAsync("div", { key: '712573aee556fba6f0ec4bc91ec6a8a6f7c9f2cd', class: isSmall ? 'info size-small-upload' : 'info' }, hAsync("div", { key: '68c9fa1d370aa6cfd46b70bcf178d1d2ea516d1a', class: "title" }, this.textDropZone), isSmall && (hAsync("dropi-button", { key: '68d657e48f013fcacfb8f77f82627849c0be88be', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } }))), !isSmall && (hAsync("div", { key: 'fba8a27308e72627d5dbe6a37bc4f9cbb3d5f58c', class: "info-desc" }, this.accept && hAsync("div", { key: 'c005fec3ae91d8d3919ea622b143390817e19b4a', class: "description" }, "Formatos admitidos: ", this.accept), hAsync("div", { key: 'b04d2d09f18b22232b60bb42f72f7016a2b4fc51', class: "description" }, "Tama\u00F1o m\u00E1ximo: ", this.maxFileSizeMB, "MB"))), !isSmall && (hAsync("dropi-button", { key: '4494470d4ea27f2022dbf057ed3fb519bbcc89df', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } })), hAsync("input", { key: 'ce6dfd7d09bca1cc7fea1c9164381d278a05c615', ref: (el) => this.inputRef = el, type: "file", accept: this.accept, multiple: this.multiple, class: "upload-hidden", onChange: (e) => this.onInputChange(e) })))), this.selectedFiles.length > 0 && (hAsync("div", { key: 'c556993924a8b5fdc7fcdb9b76e9ee9876cc1211', class: "files-container" }, gridFiles.length > 0 && (hAsync("div", { key: '3fef57fa5153ec594b46e222053a79e095156dff', class: "grid-list" }, gridFiles.map(f => this.renderGridItem(f)), gridFiles.length < this.maxFiles && (hAsync("div", { key: '57051294666455141dbe24837243f8bcbfe34dac', class: "add-img", onClick: () => this.addImage() }, hAsync("div", { key: 'c39387899c7b3696ce4611b5f9a91204ad04a91e', class: "icon" }, hAsync("svg", { key: 'f63ac4806187522457de8aecbcd299a19a3f7a90', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '4c6f3aefe963cf78aad8bdce421d776b2aac4c7e', d: "M9.77774 6.4444H7.55551V4.22218C7.55551 4.07484 7.49698 3.93353 7.3928 3.82934C7.28861 3.72516 7.1473 3.66663 6.99996 3.66663C6.85262 3.66663 6.71131 3.72516 6.60712 3.82934C6.50294 3.93353 6.4444 4.07484 6.4444 4.22218V6.4444H4.22218C4.07484 6.4444 3.93353 6.50294 3.82934 6.60712C3.72516 6.71131 3.66663 6.85262 3.66663 6.99996C3.66663 7.1473 3.72516 7.28861 3.82934 7.3928C3.93353 7.49698 4.07484 7.55551 4.22218 7.55551H6.4444V9.77774C6.4444 9.92508 6.50294 10.0664 6.60712 10.1706C6.71131 10.2748 6.85262 10.3333 6.99996 10.3333C7.1473 10.3333 7.28861 10.2748 7.3928 10.1706C7.49698 10.0664 7.55551 9.92508 7.55551 9.77774V7.55551H9.77774C9.92508 7.55551 10.0664 7.49698 10.1706 7.3928C10.2748 7.28861 10.3333 7.1473 10.3333 6.99996C10.3333 6.85262 10.2748 6.71131 10.1706 6.60712C10.0664 6.50294 9.92508 6.4444 9.77774 6.4444Z", fill: "#32394D" }))), hAsync("div", { key: '666a6f9501e1ff35e76526180d4c532ab57fe8f7', class: "text" }, "Agregar"))))), cardFiles.length > 0 && (hAsync("div", { key: 'b0b74121f4e4ce76076d027b7957e944cc1a7db6', class: "card-list" }, cardFiles.map(f => this.renderCardItem(f))))))));
     }
     static get style() { return dropiFileUploadCss(); }
     static get cmpMeta() { return {
@@ -8384,7 +8384,7 @@ class DropiFileUploadProgressBar {
         };
     }
     render() {
-        return (hAsync("div", { key: 'f1dd7e86c50078b35661e0514beff610dc2bc8e7', class: "container-progress-bar" }, hAsync("div", { key: '2f630eb29817c68b3246d520d3940611ae78c523', class: "container-icon-info", style: { display: this.fileExtension !== 'pdf' ? 'flex' : 'none' } }, this.type !== 'image' && (hAsync("dropi-icon", { key: '53bed511476369459951eac8c000129adebd6370', name: "File-text", width: "24px", height: "24px", color: "Info-Info-600" })), this.type === 'image' && !this.urlImage && (hAsync("div", { key: '4e5878dc43478af1da306ae04c829c357843a180', style: { width: '34px', height: '34px', borderRadius: '8px', background: 'var(--Gray-Gray-100)' } })), this.type === 'image' && this.urlImage && (hAsync("img", { key: 'd8c47b00b2e7a9983ca17ddf1bfb31da78bbb658', src: this.urlImage, class: "image-to-view", width: "34", height: "34", alt: "" }))), this.fileExtension === 'pdf' && (hAsync("div", { key: 'befec2d335a0bc2d5a2af1b475cd19d16951ea9a', class: "icon-pdf" }, hAsync("svg", { key: '5518e6204180b17d534358d913a625cd1ca31ed7', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, hAsync("g", { key: 'cd3e6e3066b22e29e07671add7dfeb4c742f4a82', "clip-path": "url(#clip0_6227_22223)" }, hAsync("path", { key: '936061bcda6e1b2324f519f03e434928335b2609', d: "M16.6243 4.61667L13.716 1.70833C12.616 0.608333 11.1493 0 9.59102 0H5.83268C3.53268 0 1.66602 1.86667 1.66602 4.16667V15.8333C1.66602 18.1333 3.53268 20 5.83268 20H14.166C16.466 20 18.3327 18.1333 18.3327 15.8333V8.74167C18.3327 7.18333 17.7243 5.71667 16.6243 4.61667ZM15.4493 5.79167C15.716 6.05833 15.941 6.35 16.1243 6.66667H12.5077C12.0493 6.66667 11.6743 6.29167 11.6743 5.83333V2.21667C11.991 2.4 12.2827 2.625 12.5493 2.89167L15.4577 5.8L15.4493 5.79167ZM16.666 15.8333C16.666 17.2083 15.541 18.3333 14.166 18.3333H5.83268C4.45768 18.3333 3.33268 17.2083 3.33268 15.8333V4.16667C3.33268 2.79167 4.45768 1.66667 5.83268 1.66667H9.59102C9.72435 1.66667 9.86602 1.66667 9.99935 1.68333V5.83333C9.99935 7.20833 11.1243 8.33333 12.4993 8.33333H16.6493C16.666 8.46667 16.666 8.6 16.666 8.74167V15.8333ZM5.90768 10.8333H4.99935C4.54102 10.8333 4.16602 11.2083 4.16602 11.6667V15.3667C4.16602 15.6583 4.39935 15.8833 4.68268 15.8833C4.96602 15.8833 5.19935 15.65 5.19935 15.3667V14.35H5.89935C6.88268 14.35 7.68268 13.5583 7.68268 12.5917C7.68268 11.625 6.88268 10.8333 5.89935 10.8333H5.90768ZM5.90768 13.3083H5.21602V11.875H5.91602C6.31602 11.875 6.65768 12.2 6.65768 12.5917C6.65768 12.9833 6.31602 13.3083 5.91602 13.3083H5.90768ZM15.8493 11.3583C15.8493 11.65 15.616 11.875 15.3327 11.875H13.9243V12.825H14.9577C15.2493 12.825 15.4743 13.0583 15.4743 13.3417C15.4743 13.625 15.241 13.8583 14.9577 13.8583H13.9243V15.3583C13.9243 15.65 13.691 15.875 13.4077 15.875C13.1243 15.875 12.891 15.6417 12.891 15.3583V11.35C12.891 11.0583 13.1243 10.8333 13.4077 10.8333H15.3327C15.6243 10.8333 15.8493 11.0667 15.8493 11.35V11.3583ZM10.0743 10.8417H9.16602C8.70768 10.8417 8.33268 11.2167 8.33268 11.675V15.375C8.33268 15.6667 8.56602 15.8417 8.84935 15.8417C9.13268 15.8417 10.066 15.8417 10.066 15.8417C11.0493 15.8417 11.8493 15.05 11.8493 14.0833V12.6C11.8493 11.6333 11.0493 10.8417 10.066 10.8417H10.0743ZM10.816 14.0833C10.816 14.475 10.4743 14.8 10.0743 14.8H9.38268V11.8833H10.0827C10.4827 11.8833 10.8243 12.2083 10.8243 12.6V14.0833H10.816Z", fill: "#DE6061" })), hAsync("defs", { key: 'afb99f7cd6b7481ed99aa82264c539e167cd8b90' }, hAsync("clipPath", { key: 'bf72e59ac0aea8eb3f6c812a98a3e50618499dfd', id: "clip0_6227_22223" }, hAsync("rect", { key: '57b7af08370d8901296ed329a5e390578b58c73e', width: "20", height: "20", fill: "white" })))))), hAsync("div", { key: '9df97315c7594dc0b77069f12e83ed8ce358794e', class: "container-bar-title" }, hAsync("p", { key: '5531067af3ff9e1efdffbd1aa88e7f3c21ab9c12' }, this.textFile), hAsync("progress", { key: '0492aa89233810538784c0dda705b9dc3cdb488d', value: this.progress, max: "100" })), this.progress === 100 && this.isPreview && (hAsync("div", { key: '9fe1548c4191eb4c4250c02ef3608c01d0944059', class: "view-icon", onClick: () => this.viewFile.emit() }, hAsync("svg", { key: '07b454b85b89af4a337a8b440c2adae74a048d0e', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "14", viewBox: "0 0 18 14", fill: "none" }, hAsync("path", { key: '1bbc9cfb792adabc41c44ce43c6f6f7b0935fcdb', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.07148 4.14758C7.64227 3.76618 8.31334 3.56262 8.99983 3.56262C9.92004 3.56372 10.8022 3.92976 11.4529 4.58045C12.1036 5.23114 12.4697 6.11334 12.4708 7.03355C12.4708 7.72004 12.2672 8.39111 11.8858 8.9619C11.5044 9.53269 10.9623 9.97757 10.3281 10.2403C9.69387 10.503 8.99598 10.5717 8.32268 10.4378C7.64939 10.3039 7.03092 9.9733 6.54551 9.48788C6.06009 9.00246 5.72951 8.384 5.59558 7.7107C5.46166 7.0374 5.53039 6.33951 5.7931 5.70528C6.05581 5.07105 6.50069 4.52897 7.07148 4.14758ZM7.84282 8.76514C8.18529 8.99398 8.58794 9.11612 8.99983 9.11612C9.55216 9.11612 10.0819 8.8967 10.4724 8.50615C10.863 8.11559 11.0824 7.58588 11.0824 7.03355C11.0824 6.62166 10.9602 6.21902 10.7314 5.87654C10.5026 5.53407 10.1773 5.26714 9.79679 5.10952C9.41625 4.95189 8.99752 4.91065 8.59354 4.99101C8.18956 5.07136 7.81849 5.26971 7.52723 5.56096C7.23598 5.85221 7.03764 6.22329 6.95728 6.62727C6.87693 7.03124 6.91817 7.44998 7.07579 7.83052C7.23342 8.21105 7.50034 8.53631 7.84282 8.76514Z", fill: "#475066" }), hAsync("path", { key: 'a25b946c2a1f4c1625cb3de790f54632c0efab86', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.99996 0.546387C13.2984 0.546387 15.7475 3.48835 16.8241 5.24187C17.157 5.78022 17.3333 6.40064 17.3333 7.03357C17.3333 7.6665 17.157 8.28692 16.8241 8.82526C15.7475 10.5788 13.2984 13.5207 8.99996 13.5207C4.70155 13.5207 2.25246 10.5788 1.17577 8.82526C0.842931 8.28692 0.666626 7.6665 0.666626 7.03357C0.666626 6.40064 0.842931 5.78022 1.17577 5.24187C2.25246 3.48835 4.70155 0.546387 8.99996 0.546387ZM8.99996 12.1324C12.6229 12.1324 14.7159 9.60206 15.6406 8.09845C15.8383 7.77846 15.943 7.40973 15.943 7.03357C15.943 6.6574 15.8383 6.28867 15.6406 5.96868C14.7159 4.4623 12.6229 1.93476 8.99996 1.93476C5.377 1.93476 3.28402 4.46507 2.35936 5.96868C2.16161 6.28867 2.05687 6.6574 2.05687 7.03357C2.05687 7.40973 2.16161 7.77846 2.35936 8.09845C3.28402 9.60206 5.377 12.1324 8.99996 12.1324Z", fill: "#475066" })))), this.progress === 100 && !this.disabled && (hAsync("div", { key: '587a02eec937b7054d4b1cd840cf82bae8c43ccf', class: "container-icon-trash", onClick: () => this.deleteFile.emit() }, hAsync("svg", { key: '7422db6af5abb405cc7e817f038bc5cabded6415', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "21", viewBox: "0 0 20 21", fill: "none" }, hAsync("path", { key: 'd5d725b550ba4440727dbcb05c6fd43096620088', d: "M16.2501 4.94477H14.0973C13.9362 4.16103 13.5097 3.45682 12.8899 2.95082C12.27 2.44483 11.4947 2.168 10.6946 2.16699H9.30566C8.50552 2.168 7.73019 2.44483 7.11035 2.95082C6.49051 3.45682 6.06406 4.16103 5.90289 4.94477H3.75011C3.56593 4.94477 3.3893 5.01793 3.25906 5.14817C3.12883 5.2784 3.05566 5.45504 3.05566 5.63921C3.05566 5.82339 3.12883 6.00003 3.25906 6.13026C3.3893 6.26049 3.56593 6.33366 3.75011 6.33366H4.44455V15.3614C4.44566 16.282 4.81183 17.1645 5.46276 17.8155C6.11369 18.4664 6.99622 18.8326 7.91677 18.8337H12.0834C13.004 18.8326 13.8865 18.4664 14.5375 17.8155C15.1884 17.1645 15.5546 16.282 15.5557 15.3614V6.33366H16.2501C16.4343 6.33366 16.6109 6.26049 16.7412 6.13026C16.8714 6.00003 16.9446 5.82339 16.9446 5.63921C16.9446 5.45504 16.8714 5.2784 16.7412 5.14817C16.6109 5.01793 16.4343 4.94477 16.2501 4.94477ZM9.30566 3.55588H10.6946C11.1253 3.55641 11.5453 3.69017 11.8971 3.93883C12.2488 4.18749 12.515 4.53886 12.6591 4.94477H7.34108C7.48524 4.53886 7.75143 4.18749 8.10315 3.93883C8.45488 3.69017 8.87492 3.55641 9.30566 3.55588ZM14.1668 15.3614C14.1668 15.914 13.9473 16.4439 13.5566 16.8346C13.1659 17.2253 12.636 17.4448 12.0834 17.4448H7.91677C7.36424 17.4448 6.83434 17.2253 6.44364 16.8346C6.05294 16.4439 5.83344 15.914 5.83344 15.3614V6.33366H14.1668V15.3614Z", fill: "#DE6061" }), hAsync("path", { key: '48d1dc3ba7c8f093c5ab7ee9ad5ed4307a1458e9', d: "M8.61128 14.6666C8.79545 14.6666 8.97209 14.5934 9.10232 14.4632C9.23256 14.3329 9.30572 14.1563 9.30572 13.9721V9.80545C9.30572 9.62127 9.23256 9.44464 9.10232 9.3144C8.97209 9.18417 8.79545 9.11101 8.61128 9.11101C8.4271 9.11101 8.25046 9.18417 8.12023 9.3144C7.99 9.44464 7.91683 9.62127 7.91683 9.80545V13.9721C7.91683 14.1563 7.99 14.3329 8.12023 14.4632C8.25046 14.5934 8.4271 14.6666 8.61128 14.6666Z", fill: "#DE6061" }), hAsync("path", { key: '588341c2b9c640a15e6ba454bd1ba28ae52630b9', d: "M11.389 14.6666C11.5731 14.6666 11.7498 14.5934 11.88 14.4632C12.0102 14.3329 12.0834 14.1563 12.0834 13.9721V9.80545C12.0834 9.62127 12.0102 9.44464 11.88 9.3144C11.7498 9.18417 11.5731 9.11101 11.389 9.11101C11.2048 9.11101 11.0281 9.18417 10.8979 9.3144C10.7677 9.44464 10.6945 9.62127 10.6945 9.80545V13.9721C10.6945 14.1563 10.7677 14.3329 10.8979 14.4632C11.0281 14.5934 11.2048 14.6666 11.389 14.6666Z", fill: "#DE6061" }))))));
+        return (hAsync("div", { key: 'f1dd7e86c50078b35661e0514beff610dc2bc8e7', class: "container-progress-bar" }, hAsync("div", { key: '2f630eb29817c68b3246d520d3940611ae78c523', class: "container-icon-info", style: { display: this.fileExtension !== 'pdf' ? 'flex' : 'none' } }, this.type !== 'image' && (hAsync("dropi-icon", { key: 'd74c46e94eb264e7dbd86129e7f4cd57026cfe88', name: "File-text", iconWidth: "24px", iconHeight: "24px", color: "Info-Info-600" })), this.type === 'image' && !this.urlImage && (hAsync("div", { key: '46a73ab30276c5438c84c406a2555635c95a432a', style: { width: '34px', height: '34px', borderRadius: '8px', background: 'var(--Gray-Gray-100)' } })), this.type === 'image' && this.urlImage && (hAsync("img", { key: 'c30d73c158f1bd7f571549dae0f31e36978c3dbb', src: this.urlImage, class: "image-to-view", width: "34", height: "34", alt: "" }))), this.fileExtension === 'pdf' && (hAsync("div", { key: 'e27d245c793b30cd44694bdc8fae1b43fd0eeff8', class: "icon-pdf" }, hAsync("svg", { key: '05fe527f3f84d68ce189b45c428db32fd94aa60a', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, hAsync("g", { key: '45465d04e01b989d6f41b9685024049f11d2fd8a', "clip-path": "url(#clip0_6227_22223)" }, hAsync("path", { key: 'b299e0b6b8254f08adbf38431cbd6c1a8ab55bd0', d: "M16.6243 4.61667L13.716 1.70833C12.616 0.608333 11.1493 0 9.59102 0H5.83268C3.53268 0 1.66602 1.86667 1.66602 4.16667V15.8333C1.66602 18.1333 3.53268 20 5.83268 20H14.166C16.466 20 18.3327 18.1333 18.3327 15.8333V8.74167C18.3327 7.18333 17.7243 5.71667 16.6243 4.61667ZM15.4493 5.79167C15.716 6.05833 15.941 6.35 16.1243 6.66667H12.5077C12.0493 6.66667 11.6743 6.29167 11.6743 5.83333V2.21667C11.991 2.4 12.2827 2.625 12.5493 2.89167L15.4577 5.8L15.4493 5.79167ZM16.666 15.8333C16.666 17.2083 15.541 18.3333 14.166 18.3333H5.83268C4.45768 18.3333 3.33268 17.2083 3.33268 15.8333V4.16667C3.33268 2.79167 4.45768 1.66667 5.83268 1.66667H9.59102C9.72435 1.66667 9.86602 1.66667 9.99935 1.68333V5.83333C9.99935 7.20833 11.1243 8.33333 12.4993 8.33333H16.6493C16.666 8.46667 16.666 8.6 16.666 8.74167V15.8333ZM5.90768 10.8333H4.99935C4.54102 10.8333 4.16602 11.2083 4.16602 11.6667V15.3667C4.16602 15.6583 4.39935 15.8833 4.68268 15.8833C4.96602 15.8833 5.19935 15.65 5.19935 15.3667V14.35H5.89935C6.88268 14.35 7.68268 13.5583 7.68268 12.5917C7.68268 11.625 6.88268 10.8333 5.89935 10.8333H5.90768ZM5.90768 13.3083H5.21602V11.875H5.91602C6.31602 11.875 6.65768 12.2 6.65768 12.5917C6.65768 12.9833 6.31602 13.3083 5.91602 13.3083H5.90768ZM15.8493 11.3583C15.8493 11.65 15.616 11.875 15.3327 11.875H13.9243V12.825H14.9577C15.2493 12.825 15.4743 13.0583 15.4743 13.3417C15.4743 13.625 15.241 13.8583 14.9577 13.8583H13.9243V15.3583C13.9243 15.65 13.691 15.875 13.4077 15.875C13.1243 15.875 12.891 15.6417 12.891 15.3583V11.35C12.891 11.0583 13.1243 10.8333 13.4077 10.8333H15.3327C15.6243 10.8333 15.8493 11.0667 15.8493 11.35V11.3583ZM10.0743 10.8417H9.16602C8.70768 10.8417 8.33268 11.2167 8.33268 11.675V15.375C8.33268 15.6667 8.56602 15.8417 8.84935 15.8417C9.13268 15.8417 10.066 15.8417 10.066 15.8417C11.0493 15.8417 11.8493 15.05 11.8493 14.0833V12.6C11.8493 11.6333 11.0493 10.8417 10.066 10.8417H10.0743ZM10.816 14.0833C10.816 14.475 10.4743 14.8 10.0743 14.8H9.38268V11.8833H10.0827C10.4827 11.8833 10.8243 12.2083 10.8243 12.6V14.0833H10.816Z", fill: "#DE6061" })), hAsync("defs", { key: '95b5ba8d3edc3cb106e12dae54d8444ced8599a2' }, hAsync("clipPath", { key: '7900ecc7f35430b3311352ea58cb874a39a9ec9e', id: "clip0_6227_22223" }, hAsync("rect", { key: 'e7c63063a879be36c37d6d39fdb295d3abb7667d', width: "20", height: "20", fill: "white" })))))), hAsync("div", { key: '3464f88661ff6fcacdfa125054cfa98a420db74f', class: "container-bar-title" }, hAsync("p", { key: 'f33ab366b12e67fcd4aa7f730a2881c1b41c736a' }, this.textFile), hAsync("progress", { key: '595b22ed789380419cb47babac54f86921df2c33', value: this.progress, max: "100" })), this.progress === 100 && this.isPreview && (hAsync("div", { key: '31a36abbe63cb31969b3516088c2e03db10a8982', class: "view-icon", onClick: () => this.viewFile.emit() }, hAsync("svg", { key: '5947e10eec9c446f886a7013c59d7efededca856', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "14", viewBox: "0 0 18 14", fill: "none" }, hAsync("path", { key: '5dfe9fe8793b5e9a91f0bbcfd300f40deee916a3', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.07148 4.14758C7.64227 3.76618 8.31334 3.56262 8.99983 3.56262C9.92004 3.56372 10.8022 3.92976 11.4529 4.58045C12.1036 5.23114 12.4697 6.11334 12.4708 7.03355C12.4708 7.72004 12.2672 8.39111 11.8858 8.9619C11.5044 9.53269 10.9623 9.97757 10.3281 10.2403C9.69387 10.503 8.99598 10.5717 8.32268 10.4378C7.64939 10.3039 7.03092 9.9733 6.54551 9.48788C6.06009 9.00246 5.72951 8.384 5.59558 7.7107C5.46166 7.0374 5.53039 6.33951 5.7931 5.70528C6.05581 5.07105 6.50069 4.52897 7.07148 4.14758ZM7.84282 8.76514C8.18529 8.99398 8.58794 9.11612 8.99983 9.11612C9.55216 9.11612 10.0819 8.8967 10.4724 8.50615C10.863 8.11559 11.0824 7.58588 11.0824 7.03355C11.0824 6.62166 10.9602 6.21902 10.7314 5.87654C10.5026 5.53407 10.1773 5.26714 9.79679 5.10952C9.41625 4.95189 8.99752 4.91065 8.59354 4.99101C8.18956 5.07136 7.81849 5.26971 7.52723 5.56096C7.23598 5.85221 7.03764 6.22329 6.95728 6.62727C6.87693 7.03124 6.91817 7.44998 7.07579 7.83052C7.23342 8.21105 7.50034 8.53631 7.84282 8.76514Z", fill: "#475066" }), hAsync("path", { key: 'b5dbe504a39e7d3d2d331e85f050c118f9c97b09', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.99996 0.546387C13.2984 0.546387 15.7475 3.48835 16.8241 5.24187C17.157 5.78022 17.3333 6.40064 17.3333 7.03357C17.3333 7.6665 17.157 8.28692 16.8241 8.82526C15.7475 10.5788 13.2984 13.5207 8.99996 13.5207C4.70155 13.5207 2.25246 10.5788 1.17577 8.82526C0.842931 8.28692 0.666626 7.6665 0.666626 7.03357C0.666626 6.40064 0.842931 5.78022 1.17577 5.24187C2.25246 3.48835 4.70155 0.546387 8.99996 0.546387ZM8.99996 12.1324C12.6229 12.1324 14.7159 9.60206 15.6406 8.09845C15.8383 7.77846 15.943 7.40973 15.943 7.03357C15.943 6.6574 15.8383 6.28867 15.6406 5.96868C14.7159 4.4623 12.6229 1.93476 8.99996 1.93476C5.377 1.93476 3.28402 4.46507 2.35936 5.96868C2.16161 6.28867 2.05687 6.6574 2.05687 7.03357C2.05687 7.40973 2.16161 7.77846 2.35936 8.09845C3.28402 9.60206 5.377 12.1324 8.99996 12.1324Z", fill: "#475066" })))), this.progress === 100 && !this.disabled && (hAsync("div", { key: '64cdb0fe5676b7db8c849960526904bdda458e16', class: "container-icon-trash", onClick: () => this.deleteFile.emit() }, hAsync("svg", { key: '31aef5958c89cce4d071be04c95dcb45f2004683', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "21", viewBox: "0 0 20 21", fill: "none" }, hAsync("path", { key: '5c479d37166fc686b1e95114a75b4b9f40b770ad', d: "M16.2501 4.94477H14.0973C13.9362 4.16103 13.5097 3.45682 12.8899 2.95082C12.27 2.44483 11.4947 2.168 10.6946 2.16699H9.30566C8.50552 2.168 7.73019 2.44483 7.11035 2.95082C6.49051 3.45682 6.06406 4.16103 5.90289 4.94477H3.75011C3.56593 4.94477 3.3893 5.01793 3.25906 5.14817C3.12883 5.2784 3.05566 5.45504 3.05566 5.63921C3.05566 5.82339 3.12883 6.00003 3.25906 6.13026C3.3893 6.26049 3.56593 6.33366 3.75011 6.33366H4.44455V15.3614C4.44566 16.282 4.81183 17.1645 5.46276 17.8155C6.11369 18.4664 6.99622 18.8326 7.91677 18.8337H12.0834C13.004 18.8326 13.8865 18.4664 14.5375 17.8155C15.1884 17.1645 15.5546 16.282 15.5557 15.3614V6.33366H16.2501C16.4343 6.33366 16.6109 6.26049 16.7412 6.13026C16.8714 6.00003 16.9446 5.82339 16.9446 5.63921C16.9446 5.45504 16.8714 5.2784 16.7412 5.14817C16.6109 5.01793 16.4343 4.94477 16.2501 4.94477ZM9.30566 3.55588H10.6946C11.1253 3.55641 11.5453 3.69017 11.8971 3.93883C12.2488 4.18749 12.515 4.53886 12.6591 4.94477H7.34108C7.48524 4.53886 7.75143 4.18749 8.10315 3.93883C8.45488 3.69017 8.87492 3.55641 9.30566 3.55588ZM14.1668 15.3614C14.1668 15.914 13.9473 16.4439 13.5566 16.8346C13.1659 17.2253 12.636 17.4448 12.0834 17.4448H7.91677C7.36424 17.4448 6.83434 17.2253 6.44364 16.8346C6.05294 16.4439 5.83344 15.914 5.83344 15.3614V6.33366H14.1668V15.3614Z", fill: "#DE6061" }), hAsync("path", { key: 'cd1b8cb60eafabf8cfe2b1842bf946aa73ea1f44', d: "M8.61128 14.6666C8.79545 14.6666 8.97209 14.5934 9.10232 14.4632C9.23256 14.3329 9.30572 14.1563 9.30572 13.9721V9.80545C9.30572 9.62127 9.23256 9.44464 9.10232 9.3144C8.97209 9.18417 8.79545 9.11101 8.61128 9.11101C8.4271 9.11101 8.25046 9.18417 8.12023 9.3144C7.99 9.44464 7.91683 9.62127 7.91683 9.80545V13.9721C7.91683 14.1563 7.99 14.3329 8.12023 14.4632C8.25046 14.5934 8.4271 14.6666 8.61128 14.6666Z", fill: "#DE6061" }), hAsync("path", { key: '99576e5c1f917aa043c749ba38c436eea64a18f4', d: "M11.389 14.6666C11.5731 14.6666 11.7498 14.5934 11.88 14.4632C12.0102 14.3329 12.0834 14.1563 12.0834 13.9721V9.80545C12.0834 9.62127 12.0102 9.44464 11.88 9.3144C11.7498 9.18417 11.5731 9.11101 11.389 9.11101C11.2048 9.11101 11.0281 9.18417 10.8979 9.3144C10.7677 9.44464 10.6945 9.62127 10.6945 9.80545V13.9721C10.6945 14.1563 10.7677 14.3329 10.8979 14.4632C11.0281 14.5934 11.2048 14.6666 11.389 14.6666Z", fill: "#DE6061" }))))));
     }
     static get watchers() { return {
         "progress": [{
@@ -8413,7 +8413,7 @@ class DropiFileUploadProgressBar {
     }; }
 }
 
-const dropiIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;fill:var(--icon-fill, currentColor);width:24px;height:24px;overflow:hidden}svg{fill:inherit;display:block;width:100%;height:100%;vertical-align:middle}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
+const dropiIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;fill:var(--icon-fill, currentColor);overflow:hidden}svg{fill:inherit;display:block;width:100%;height:100%;vertical-align:middle}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
 
 /**
  * @component dropi-icon
@@ -8428,27 +8428,19 @@ class DropiIcon {
     /** Icon name matching the id in the SVG sprite */
     name = '';
     /** Width of the icon (CSS value) */
-    width = '24px';
-    /** Height of the icon (CSS value) */
-    height = '24px';
-    /**
-     * Color of the icon. Accepts:
-     * - Hex color: `#ff0000`
-     * - CSS variable name without `--`: `Primary-Primary-500`
-     * - `currentColor` to inherit
-     */
+    iconWidth = '20px';
+    iconHeight = '20px';
     color = 'currentColor';
+    widthChanged() {
+        this.updateHostStyles();
+    }
+    heightChanged() {
+        this.updateHostStyles();
+    }
     colorChanged() {
         this.applyColor();
     }
     componentWillLoad() {
-        // SSR Fallback: Read attributes if props are not yet synced by hydration
-        if (!this.el.style.width && !this.el.style.height) {
-            const attrW = this.el.getAttribute('width') || '24px';
-            const attrH = this.el.getAttribute('height') || '24px';
-            this.width = attrW;
-            this.height = attrH;
-        }
         this.applyColor();
         this.updateHostStyles();
     }
@@ -8456,8 +8448,8 @@ class DropiIcon {
         this.updateHostStyles();
     }
     updateHostStyles() {
-        this.el.style.width = this.width;
-        this.el.style.height = this.height;
+        this.el.style.width = this.iconWidth;
+        this.el.style.height = this.iconHeight;
     }
     applyColor() {
         if (!this.color)
@@ -8470,9 +8462,15 @@ class DropiIcon {
         this.el.style.setProperty('--icon-fill', fill);
     }
     render() {
-        return (hAsync("svg", { key: 'c705712bd21c4da94dcff8ce12b0c0b880681e95', width: this.width ?? '24px', height: this.height ?? '24px', class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, hAsync("use", { key: 'b02addb8203904ec059b3c92bd40b09e3c79622d', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}` })));
+        return (hAsync("svg", { key: '7185e1861c44aafcec2117f53f61ce18992388ad', width: this.iconWidth, height: this.iconHeight, class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, hAsync("use", { key: 'b7913bfbf0bbb6bfa35f848f9fee19e09646004d', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}` })));
     }
     static get watchers() { return {
+        "iconWidth": [{
+                "widthChanged": 0
+            }],
+        "iconHeight": [{
+                "heightChanged": 0
+            }],
         "color": [{
                 "colorChanged": 0
             }]
@@ -8483,8 +8481,8 @@ class DropiIcon {
         "$tagName$": "dropi-icon",
         "$members$": {
             "name": [1],
-            "width": [1],
-            "height": [1],
+            "iconWidth": [1, "icon-width"],
+            "iconHeight": [1, "icon-height"],
             "color": [1]
         },
         "$listeners$": undefined,
@@ -8530,7 +8528,7 @@ class DropiIlustrationIcon {
         return map[state] || 'Info';
     }
     render() {
-        return (hAsync("div", { key: '2f956eddb214de168aae134374512600867e77a8', class: "dropi-ilustration" }, this.type === 'dropi' && (hAsync("figure", { key: '3d05624542d51f64cb6402fb958f039bc943afb7', class: "dropi-ilustration__image" }, hAsync("img", { key: '6fb383b378d989f675433c46710e246dc193f26b', src: `assets/icons/ilustration/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = 'assets/icons/ilustration/default.svg'; } }))), this.type === 'mb' && (hAsync("figure", { key: 'f66957ddbba9506d041ab1b2e8877872b25bdbf3', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (hAsync("dropi-icon", { key: '2844c2707906bcba57835c1e7652c52769b504fe', name: this.getIconName(this.state), width: "24px", height: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (hAsync("figure", { key: '4c091e2f415d252ae3cdaa7b62b1e4788192ae6c', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, hAsync("img", { key: 'dc9e11b8ecf525dbfd0c8c147a64e12350c2b6d5', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (hAsync("p", { key: '0fa7f6fdd1bb9075d1ef2a09a6701b0b464a746b', class: `tag tag--${this.stateInsignia}` }, hAsync("span", { key: 'dae1336fefa32471ebbc78f1bcdd0c9b1c89dcba', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
+        return (hAsync("div", { key: '2f956eddb214de168aae134374512600867e77a8', class: "dropi-ilustration" }, this.type === 'dropi' && (hAsync("figure", { key: '3d05624542d51f64cb6402fb958f039bc943afb7', class: "dropi-ilustration__image" }, hAsync("img", { key: '6fb383b378d989f675433c46710e246dc193f26b', src: `assets/icons/ilustration/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = 'assets/icons/ilustration/default.svg'; } }))), this.type === 'mb' && (hAsync("figure", { key: 'f66957ddbba9506d041ab1b2e8877872b25bdbf3', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (hAsync("dropi-icon", { key: '4f65eb91eb99c07abefc6089c6935b1fb573978b', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (hAsync("figure", { key: 'fd0db6cbdc7daf018446f03cf8dd13dbe218733a', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, hAsync("img", { key: '79cd16693eeb848db9c027c8d2e96c6760a9e2ac', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (hAsync("p", { key: '58ec25aa47c8756ec11a0fba679194a25dfaad0c', class: `tag tag--${this.stateInsignia}` }, hAsync("span", { key: '8354a3de165526351bc53021218b1fb2a0a4d064', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
     }
     static get style() { return dropiIlustrationIconCss(); }
     static get cmpMeta() { return {
@@ -8586,7 +8584,7 @@ class DropiImageMiniature {
     }
     render() {
         const imgs = this.parsedImages;
-        return (hAsync("div", { key: '111d908339df1d3fba74cb8737f3c72e2254e2f0', class: "miniature" }, this.label && hAsync("span", { key: '007ecc8149b6778eac7dd80a978a088f686001eb', class: "miniature__label" }, this.label), hAsync("div", { key: '95c18d71f5c753bd2610915b62632aca7fbd4d16', class: "miniature__grid" }, imgs.map((src, i) => (hAsync("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, hAsync("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), hAsync("div", { class: "miniature__zoom" }, hAsync("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Neutral-White" }))))))));
+        return (hAsync("div", { key: '111d908339df1d3fba74cb8737f3c72e2254e2f0', class: "miniature" }, this.label && hAsync("span", { key: '007ecc8149b6778eac7dd80a978a088f686001eb', class: "miniature__label" }, this.label), hAsync("div", { key: '95c18d71f5c753bd2610915b62632aca7fbd4d16', class: "miniature__grid" }, imgs.map((src, i) => (hAsync("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, hAsync("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), hAsync("div", { class: "miniature__zoom" }, hAsync("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Neutral-White" }))))))));
     }
     static get style() { return dropiImageMiniatureCss(); }
     static get cmpMeta() { return {
@@ -8650,7 +8648,7 @@ class DropiImageOverlay {
             return null;
         const imgs = this.parsedImages;
         const multi = imgs.length > 1;
-        return (hAsync("div", { class: "overlay", onClick: () => this.close() }, hAsync("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, hAsync("dropi-icon", { name: "Close-large", width: "24px", height: "24px", color: "Neutral-White" })), hAsync("div", { class: { 'overlay__body': true, 'overlay__body--single': !multi }, onClick: (e) => e.stopPropagation() }, multi && (hAsync("div", { class: "overlay__thumbs" }, imgs.map((src, i) => (hAsync("div", { key: i, class: { 'overlay__thumb-box': true, 'overlay__thumb-box--active': i === this.current }, onClick: () => this.current = i }, hAsync("img", { src: src, alt: `miniatura ${i + 1}`, class: "overlay__thumb-img", onError: (e) => this.handleError(e) })))))), hAsync("div", { class: "overlay__content" }, multi && (hAsync("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, hAsync("dropi-icon", { name: "Dropdown-left", width: "18px", height: "18px", color: "Gray-Gray-500" }))), hAsync("img", { class: "overlay__main-image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (hAsync("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, hAsync("dropi-icon", { name: "Dropdown-Right", width: "18px", height: "18px", color: "Gray-Gray-500" })))))));
+        return (hAsync("div", { class: "overlay", onClick: () => this.close() }, hAsync("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, hAsync("dropi-icon", { name: "Close-large", iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })), hAsync("div", { class: { 'overlay__body': true, 'overlay__body--single': !multi }, onClick: (e) => e.stopPropagation() }, multi && (hAsync("div", { class: "overlay__thumbs" }, imgs.map((src, i) => (hAsync("div", { key: i, class: { 'overlay__thumb-box': true, 'overlay__thumb-box--active': i === this.current }, onClick: () => this.current = i }, hAsync("img", { src: src, alt: `miniatura ${i + 1}`, class: "overlay__thumb-img", onError: (e) => this.handleError(e) })))))), hAsync("div", { class: "overlay__content" }, multi && (hAsync("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, hAsync("dropi-icon", { name: "Dropdown-left", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" }))), hAsync("img", { class: "overlay__main-image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (hAsync("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, hAsync("dropi-icon", { name: "Dropdown-Right", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" })))))));
     }
     static get watchers() { return {
         "images": [{
@@ -8680,7 +8678,7 @@ class DropiImageOverlay {
     }; }
 }
 
-const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:10px;left:5px;z-index:1}.icon-input-password{position:absolute;top:10px;right:13px;cursor:pointer;z-index:1}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:28px}.input-container--has-icon label.label-bottom{left:28px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
+const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:50%;left:12px;transform:translateY(-50%);z-index:1;display:flex;align-items:center;justify-content:center}.icon-input-password{position:absolute;top:50%;right:13px;transform:translateY(-50%);cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:40px}.input-container--has-icon label.label-bottom{left:40px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
 
 /**
  * @component dropi-input
@@ -8715,7 +8713,7 @@ class DropiInput {
     internals;
     // ── Identification ──────────────────────────────────────────
     /** Input id. Defaults to label label. */
-    id = '';
+    inputId = '';
     /** Name attribute for native form submission */
     name = '';
     // ── Content ─────────────────────────────────────────────────
@@ -8789,7 +8787,9 @@ class DropiInput {
         if (!val)
             return;
         if (val.id !== undefined)
-            this.id = val.id;
+            this.inputId = val.id;
+        if (val.inputId !== undefined)
+            this.inputId = val.inputId;
         if (val.label !== undefined)
             this.label = val.label;
         if (val.placeholder !== undefined)
@@ -8905,7 +8905,7 @@ class DropiInput {
     }
     // ── Computed ─────────────────────────────────────────────────
     get resolvedId() {
-        return this.id || this.label;
+        return this.inputId || this.label;
     }
     get inputType() {
         if (this.passwordInput)
@@ -8926,14 +8926,14 @@ class DropiInput {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (hAsync("div", { key: 'cc38b113d77982ba53665a6c8ccbf39a393da696', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (hAsync("div", { key: '06bb6b6df585f859dc7a903fac4ed3f9f6c31077', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && hAsync("span", { key: '6e87d6717a312d7497c2cf438aec7a692b974dda', class: "asterisk" }, " *"))), hAsync("div", { key: '2eb67324cb06e04ee9fc5507a319a2eda8b5e410', class: "form-group" }, hAsync("div", { key: '9d8d6f8df83c33782fd61810267e433fdab452d9', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && hAsync("dropi-icon", { key: '370070a0e75a929438cb564698ee10c866e944a9', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" }), this.passwordInput && (hAsync("dropi-icon", { key: '675958939e32a94060993515f9b9a58513ec2adc', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), hAsync("input", { key: 'd2ac98c43f9863ea8153dc66dd3fe347a7c28473', id: this.resolvedId, class: {
+        return (hAsync("div", { key: 'a6c762070ca5c0ffb5028f1899d4e026721664ee', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (hAsync("div", { key: 'fb223818b568114400aa456e595623c882b8bcd2', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && hAsync("span", { key: '04c522a21ba3e0ec9710d267feb866d79dae7cbb', class: "asterisk" }, " *"))), hAsync("div", { key: '1672e9954f11ad61e6f224953f97aa7036e5b212', class: "form-group" }, hAsync("div", { key: 'd9bfc41486fe3f93d5144f55bf89a4ae1a916f5e', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (hAsync("dropi-icon", { key: 'e7d21fd9b115925ed2bc584a6f5c614ea3761922', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (hAsync("dropi-icon", { key: '5593f56ed03acdb79a9e8e4fefac58d585a5a092', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), hAsync("input", { key: 'ef70c2be1606334593269be63234295bdbdf86b1', id: this.resolvedId, class: {
                 'form-control': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
                 'padding-icon': showIconInline,
                 'text-password': this.passwordInput && !this.showPassword,
                 'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (hAsync("label", { key: '45eb57801e7d199532215ba069af8ba01714a46f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && hAsync("span", { key: '5d4d83ce2575d60567a4a947d643a89f760cb3bd', class: "asterisk" }, " *"))), this.showHelper && (hAsync("div", { key: 'b78fdac5f0c46b827c9dd2895d43a5e1724058d8', class: "form-control-helper" }, this.isInvalid && hAsync("dropi-icon", { key: 'f037c95230fe0fa57540a1b74a26c14e56e555e4', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), hAsync("span", { key: 'fc48f7418c36f7ded7a999e446323ca8adb2b590', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (hAsync("label", { key: 'c0d079355d299b26dc2e8bde4347fd30aa791e21', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && hAsync("span", { key: 'fca9bc2745e0ccb7ba3b10c4e3e6b5d8bbb6f645', class: "asterisk" }, " *"))), this.showHelper && (hAsync("div", { key: 'f864cc07f591d0948cb06d6dde1e910bab10187a', class: "form-control-helper" }, this.isInvalid && hAsync("dropi-icon", { key: 'be2cf0d632fd8245e817d4023b4e4f060bc80d24', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '3768369a635e8ac03db24b0ba7fa7a214cc71577', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));
@@ -8955,7 +8955,7 @@ class DropiInput {
         "$flags$": 585,
         "$tagName$": "dropi-input",
         "$members$": {
-            "id": [1025],
+            "inputId": [1025, "input-id"],
             "name": [1],
             "label": [1025],
             "placeholder": [1025],
@@ -9039,7 +9039,7 @@ class DropiLanguagesSelector {
     render() {
         if (!this.currentLang)
             return null;
-        return (hAsync("div", { class: `custom-dropdown${this.isOpen ? ' open' : ''}` }, hAsync("div", { class: "selected-option", onClick: () => { this.isOpen = !this.isOpen; } }, hAsync("dropi-country-flags", { country: this.currentLang.flag, "flag-style": "rectangle", width: "20", height: "15" }), hAsync("span", { class: "Body-S-Regular" }, this.currentLang.label), hAsync("dropi-icon", { name: "Caret-down", width: "16px", height: "16px", color: "Gray-Gray-500" })), hAsync("ul", { class: `dropdown-options${this.isOpen ? ' dropdown-open' : ''}` }, this.parsedLanguages.map(lang => (hAsync("li", { key: lang.code, class: lang.code === this.currentLang?.code ? 'active' : '', onClick: () => this.select(lang) }, hAsync("dropi-country-flags", { country: lang.flag, "flag-style": "rectangle", width: "20", height: "15" }), hAsync("span", { class: "Body-S-Regular" }, lang.label)))))));
+        return (hAsync("div", { class: `custom-dropdown${this.isOpen ? ' open' : ''}` }, hAsync("div", { class: "selected-option", onClick: () => { this.isOpen = !this.isOpen; } }, hAsync("dropi-country-flags", { country: this.currentLang.flag, "flag-style": "rectangle", width: "20", height: "15" }), hAsync("span", { class: "Body-S-Regular" }, this.currentLang.label), hAsync("dropi-icon", { name: "Caret-down", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-500" })), hAsync("ul", { class: `dropdown-options${this.isOpen ? ' dropdown-open' : ''}` }, this.parsedLanguages.map(lang => (hAsync("li", { key: lang.code, class: lang.code === this.currentLang?.code ? 'active' : '', onClick: () => this.select(lang) }, hAsync("dropi-country-flags", { country: lang.flag, "flag-style": "rectangle", width: "20", height: "15" }), hAsync("span", { class: "Body-S-Regular" }, lang.label)))))));
     }
     static get watchers() { return {
         "languages": [{
@@ -9332,10 +9332,10 @@ class DropiMediaPlayer {
             }, onMouseMove: () => this.onMouseMove(), onMouseLeave: () => this.onMouseLeave() }, hAsync("div", { class: "dropi-media-player__blur-bg", style: { backgroundImage: `url(${this.poster})` } }), hAsync("div", { class: "dropi-media-player__blur-overlay" }), hAsync("video", { class: "dropi-media-player__video", ref: (el) => this.mediaEl = el, src: this.src, poster: this.poster, onClick: () => this.togglePlay(), onPlay: () => { this.playing = true; this.startHideControlsTimer(); this.dropiPlay.emit(true); }, onPause: () => { this.playing = false; this.showControls = true; clearTimeout(this.controlsTimeout); this.dropiPlay.emit(false); }, onEnded: () => { this.playing = false; this.showControls = true; this.dropiEnded.emit(); }, onTimeUpdate: () => this.handleTimeUpdate(), onLoadedMetaData: () => this.handleLoadedMetadata() }), hAsync("div", { class: {
                 'dropi-media-player__center-play': true,
                 'dropi-media-player__center-play--hidden': this.playing && !this.showControls
-            }, style: { width: `${this.playButtonSize}px`, height: `${this.playButtonSize}px` }, onClick: (e) => { e.stopPropagation(); this.togglePlay(); } }, this.playing ? (hAsync("svg", { width: `${this.playIconSize}px`, height: `${this.playIconSize}px`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", style: { color: '#ffffff' } }, hAsync("rect", { x: "6.5", y: "4", width: "3.5", height: "16", rx: "1.75" }), hAsync("rect", { x: "14", y: "4", width: "3.5", height: "16", rx: "1.75" }))) : (hAsync("dropi-icon", { name: "Play", color: "Neutral-White", width: `${this.playIconSize}px`, height: `${this.playIconSize}px` }))), hAsync("div", { class: {
+            }, style: { width: `${this.playButtonSize}px`, height: `${this.playButtonSize}px` }, onClick: (e) => { e.stopPropagation(); this.togglePlay(); } }, this.playing ? (hAsync("svg", { width: `${this.playIconSize}px`, height: `${this.playIconSize}px`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", style: { color: '#ffffff' } }, hAsync("rect", { x: "6.5", y: "4", width: "3.5", height: "16", rx: "1.75" }), hAsync("rect", { x: "14", y: "4", width: "3.5", height: "16", rx: "1.75" }))) : (hAsync("dropi-icon", { name: "Play", color: "Neutral-White", iconWidth: `${this.playIconSize}px`, iconHeight: `${this.playIconSize}px` }))), hAsync("div", { class: {
                 'dropi-media-player__controls-bar': true,
                 'dropi-media-player__controls-bar--hidden': !this.showControls
-            }, onClick: (e) => e.stopPropagation() }, hAsync("span", { class: "dropi-media-player__timestamp" }, this.currentTimeStr, " / ", this.durationStr), hAsync("div", { class: "dropi-media-player__progress", onClick: (e) => { e.stopPropagation(); this.handleSeek(e); } }, hAsync("div", { class: "dropi-media-player__progress-track" }, hAsync("div", { class: "dropi-media-player__progress-fill", style: { width: `${this.progress}%` } }), hAsync("div", { class: "dropi-media-player__progress-thumb", style: { left: `${this.progress}%` } }))), hAsync("div", { class: "dropi-media-player__actions" }, hAsync("div", { class: "dropi-media-player__speed-control", onClick: (e) => e.stopPropagation() }, this.showSpeedMenu && (hAsync("div", { class: "dropi-media-player__speed-menu" }, this.speeds.map(s => (hAsync("button", { type: "button", class: { 'dropi-media-player__speed-option': true, 'dropi-media-player__speed-option--active': this.speed === s }, onClick: (e) => { e.stopPropagation(); this.selectSpeed(s); } }, "x", s))))), hAsync("button", { class: "dropi-media-player__btn dropi-media-player__btn--speed", onClick: (e) => { e.stopPropagation(); this.toggleSpeedMenu(); }, type: "button" }, "x", this.speed)), hAsync("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleFullscreen(); }, type: "button" }, hAsync("dropi-icon", { name: this.isFullscreen ? 'Compress' : 'Expand', color: "Neutral-White", width: "20px", height: "20px" })), hAsync("div", { class: "dropi-media-player__volume-control", onClick: (e) => e.stopPropagation() }, this.showVolumeSlider && (hAsync("div", { class: "dropi-media-player__volume-popup" }, hAsync("input", { type: "range", class: "dropi-media-player__volume-slider", min: "0", max: "1", step: "0.01", value: this.muted ? 0 : this.volume, style: { background: this.volumeGradient }, onInput: (e) => this.handleVolume(e) }))), hAsync("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleVolume(); }, type: "button" }, hAsync("dropi-icon", { name: this.volumeIcon, color: "Neutral-White", width: "20px", height: "20px" })))))));
+            }, onClick: (e) => e.stopPropagation() }, hAsync("span", { class: "dropi-media-player__timestamp" }, this.currentTimeStr, " / ", this.durationStr), hAsync("div", { class: "dropi-media-player__progress", onClick: (e) => { e.stopPropagation(); this.handleSeek(e); } }, hAsync("div", { class: "dropi-media-player__progress-track" }, hAsync("div", { class: "dropi-media-player__progress-fill", style: { width: `${this.progress}%` } }), hAsync("div", { class: "dropi-media-player__progress-thumb", style: { left: `${this.progress}%` } }))), hAsync("div", { class: "dropi-media-player__actions" }, hAsync("div", { class: "dropi-media-player__speed-control", onClick: (e) => e.stopPropagation() }, this.showSpeedMenu && (hAsync("div", { class: "dropi-media-player__speed-menu" }, this.speeds.map(s => (hAsync("button", { type: "button", class: { 'dropi-media-player__speed-option': true, 'dropi-media-player__speed-option--active': this.speed === s }, onClick: (e) => { e.stopPropagation(); this.selectSpeed(s); } }, "x", s))))), hAsync("button", { class: "dropi-media-player__btn dropi-media-player__btn--speed", onClick: (e) => { e.stopPropagation(); this.toggleSpeedMenu(); }, type: "button" }, "x", this.speed)), hAsync("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleFullscreen(); }, type: "button" }, hAsync("dropi-icon", { name: this.isFullscreen ? 'Compress' : 'Expand', color: "Neutral-White", iconWidth: "20px", iconHeight: "20px" })), hAsync("div", { class: "dropi-media-player__volume-control", onClick: (e) => e.stopPropagation() }, this.showVolumeSlider && (hAsync("div", { class: "dropi-media-player__volume-popup" }, hAsync("input", { type: "range", class: "dropi-media-player__volume-slider", min: "0", max: "1", step: "0.01", value: this.muted ? 0 : this.volume, style: { background: this.volumeGradient }, onInput: (e) => this.handleVolume(e) }))), hAsync("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleVolume(); }, type: "button" }, hAsync("dropi-icon", { name: this.volumeIcon, color: "Neutral-White", iconWidth: "20px", iconHeight: "20px" })))))));
     }
     static get style() { return dropiMediaPlayerCss(); }
     static get cmpMeta() { return {
@@ -9407,7 +9407,7 @@ class DropiModal {
     /** Enable a before-close hook (matches Angular `enableBeforeClose`) */
     enableBeforeClose = false;
     /** No-op — kept for API parity with Angular (matches Angular `draggable`) */
-    draggable = false;
+    isDraggable = false;
     /** No-op — kept for API parity with Angular (matches Angular `resizable`) */
     resizable = false;
     onShow;
@@ -9494,7 +9494,7 @@ class DropiModal {
         }
     }
     render() {
-        return (hAsync("div", { key: '6f790289cbdcb0cb92040abc471e8dc592f3d0ab', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}`, style: { display: this.mounted || this.isClosing ? 'flex' : 'none' } }, (this.modal ?? true) && hAsync("div", { key: '6667d2df75ac67352346f454452a360a6506473a', class: "modal-mask", onClick: () => this.dismissable && this.hide() }), hAsync("div", { key: '3a5485798cec9e986f411631aee819f10716e441', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (hAsync("div", { key: '795afcb76540a52beefd1ca4c0fb80d88156ef98', class: "modal-header" }, this.header && hAsync("span", { key: '3df861b36deca9caaf6c64c54b89dc897f5b9453', class: "modal-title" }, this.header), hAsync("slot", { key: 'b6b1913314b2c05daa299d273ff7b495d4f72c39', name: "header" }), this.showCloseIcon && (hAsync("button", { key: '529dd7e8787a09fc588e28c0c77f0f27c304659f', class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), hAsync("div", { key: 'eeeae841372a788a34cee76b38de7689a7a296fc', class: "modal-content" }, hAsync("slot", { key: '83c67fb239b5579169368b5b2ba6c2ee22564a73' })), this.showFooter && hAsync("div", { key: 'd86cd40508a7b6ea3c9cd4583aaa5a69646bb549', class: "modal-footer" }, hAsync("slot", { key: 'f70503acd5f2b5e672700cec46e4e9705d944e22', name: "footer" })))));
+        return (hAsync("div", { key: '1aee093f108c54540005a6cb2f48bef700f05d63', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}`, style: { display: this.mounted || this.isClosing ? 'flex' : 'none' } }, (this.modal ?? true) && hAsync("div", { key: '06ebd29da0c7dc699e7c16769476e310336ab149', class: "modal-mask", onClick: () => this.dismissable && this.hide() }), hAsync("div", { key: '87cb9bbd4c1c6c27a6a7d09f561ea781c1571803', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (hAsync("div", { key: '86f22ef920b7a7437825f4c5f9ccff23b591c499', class: "modal-header" }, this.header && hAsync("span", { key: '2ae7c9b879ee6c025b6b42977bad643ff4d28370', class: "modal-title" }, this.header), hAsync("slot", { key: '85a0a54691ca191719202c8fea6b30ffff30aacc', name: "header" }), this.showCloseIcon && (hAsync("button", { key: 'dc1f570830d22535a39c9e9fbf0bccdb8e4bfcf7', class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), hAsync("div", { key: 'ceca42f33ff7d4762c79b2d133e23bc7cedb3cb3', class: "modal-content" }, hAsync("slot", { key: '14a82735c521c45deda61e8a69ae8673ad754b3d' })), this.showFooter && hAsync("div", { key: 'e71a5393c19de696247502abd09d26a38cd1b979', class: "modal-footer" }, hAsync("slot", { key: '1364eed1b66e82d321d06d13d9d34615c7634ce0', name: "footer" })))));
     }
     static get watchers() { return {
         "visible": [{
@@ -9526,7 +9526,7 @@ class DropiModal {
             "baseZIndex": [2, "base-z-index"],
             "transitionOptions": [1, "transition-options"],
             "enableBeforeClose": [4, "enable-before-close"],
-            "draggable": [4],
+            "isDraggable": [4, "is-draggable"],
             "resizable": [4],
             "isOpen": [32],
             "isClosing": [32],
@@ -9586,9 +9586,9 @@ class DropiNavbar {
     }
     render() {
         const items = this.parsedData;
-        return (hAsync("nav", { key: '15c337396dbe445ac7a13d7e0f2d99f88b4de439', class: "navbar" }, hAsync("div", { key: '922a217dfe53f3f34dd6746033996bcd71dadfb2', class: "navbar__left" }, this.showMenuToggle && (hAsync("button", { key: 'db80ad1fd6f47807196c81ae60bf9cea8bb16e77', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, hAsync("dropi-icon", { key: 'c35615cbfd5dc807def32957062ea25b059664b5', name: "Menu", width: "20px", height: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (hAsync("img", { key: 'ffc532e501bc7bc0a5625c865955a43c84857a58', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && hAsync("span", { key: '7fb10d4a5e42030a7701bf0933587ecdaf5ab20b', class: "navbar__title" }, this.title)), items.length > 0 && (hAsync("ul", { key: '338118e694ca0a46d94fee60211302efe8bbee51', class: "navbar__items" }, items.map(item => (hAsync("li", null, hAsync("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && hAsync("dropi-icon", { name: item.icon, width: "16px", height: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), hAsync("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (hAsync("span", { class: "navbar__badge" }, item.badge)))))))), hAsync("div", { key: 'f2ac52b78963fa9165b6614a7abaa6fe822b2a89', class: "navbar__right" }, hAsync("button", { key: '4e78c3fbc69899f8b1f0206dc27372c3c0d15c31', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, hAsync("dropi-icon", { key: 'a94bbd4aa73b7be9a735b31b92d882c53616f8e6', name: "Bell", width: "20px", height: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (hAsync("span", { key: 'c2157fca16e1c3f992562027d4dfeb348ef7ad23', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), hAsync("button", { key: 'ba2cb25cda984ba8ea180ff8edb3d3ffc955ab27', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+        return (hAsync("nav", { key: '15c337396dbe445ac7a13d7e0f2d99f88b4de439', class: "navbar" }, hAsync("div", { key: '922a217dfe53f3f34dd6746033996bcd71dadfb2', class: "navbar__left" }, this.showMenuToggle && (hAsync("button", { key: 'db80ad1fd6f47807196c81ae60bf9cea8bb16e77', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, hAsync("dropi-icon", { key: 'eca18144260cb6471a19f78f7ce75254ba5a138e', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (hAsync("img", { key: '374ea8553605f289c413882c757eda70054ba71d', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && hAsync("span", { key: '8e2abceb591c0de10ca99d2090fea7a0da792a7b', class: "navbar__title" }, this.title)), items.length > 0 && (hAsync("ul", { key: 'fd26fc64ea3325ddc439a802ab56e69b329020dd', class: "navbar__items" }, items.map(item => (hAsync("li", null, hAsync("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && hAsync("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), hAsync("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (hAsync("span", { class: "navbar__badge" }, item.badge)))))))), hAsync("div", { key: '51a6532caac773ea7236e95b0aa5ee9ee052db4a', class: "navbar__right" }, hAsync("button", { key: '309b47a8fa074e7d47632a95490c5ba0d2950745', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, hAsync("dropi-icon", { key: '2a970ae36fdd4e42d9fbab5d8ebb61a1d14d54c8', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (hAsync("span", { key: '67412b6d3c7689f78cca15e91a1e8e3ee88152a2', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), hAsync("button", { key: '38cc70fdc1c204b06b62c54a23f4b8c76647fd6b', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
             ? hAsync("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
-            : hAsync("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && hAsync("span", { key: '11b4c378a089644e63d6186fe40e31ca7b4ab924', class: "navbar__user-name" }, this.userName), hAsync("dropi-icon", { key: 'c2a140081f5ad014b73d35f45476cc1ac41391b5', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })))));
+            : hAsync("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && hAsync("span", { key: '1f2cfe4bddef60d31751c24c3f02cace2f07d6dd', class: "navbar__user-name" }, this.userName), hAsync("dropi-icon", { key: '520aff19c56964eefb3b1f59646c19df779c7e47', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
     }
     static get style() { return dropiNavbarCss(); }
     static get cmpMeta() { return {
@@ -9623,6 +9623,7 @@ class DropiOtpSendCode {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.codeCompleted = createEvent(this, "codeCompleted", 7);
+        this.codeAccepted = createEvent(this, "codeAccepted", 7);
         this.dropiResend = createEvent(this, "dropiResend", 7);
     }
     /** Delivery method label */
@@ -9640,8 +9641,10 @@ class DropiOtpSendCode {
     error = false;
     inputs = [];
     timer;
-    /** Emitted when all 6 digits are entered. e.detail = the complete code string */
+    /** Emitted when all 6 digits are entered. */
     codeCompleted;
+    /** Emitted when all 6 digits are entered (alternative event). */
+    codeAccepted;
     /** Emitted when resend is requested */
     dropiResend;
     componentDidLoad() { this.startCountdown(); }
@@ -9669,7 +9672,9 @@ class DropiOtpSendCode {
         if (val && index < OTP_LENGTH - 1)
             this.inputs[index + 1]?.focus();
         if (newDigits.every(d => d !== '')) {
-            this.codeCompleted.emit(newDigits.join(''));
+            const finalCode = newDigits.join('');
+            this.codeCompleted.emit(finalCode);
+            this.codeAccepted.emit(finalCode);
         }
     }
     handleKeyDown(e, index) {
@@ -9685,19 +9690,22 @@ class DropiOtpSendCode {
         this.digits = newDigits;
         this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');
         this.inputs[Math.min(text.length, OTP_LENGTH - 1)]?.focus();
-        if (newDigits.every(d => d !== ''))
-            this.codeCompleted.emit(newDigits.join(''));
+        if (newDigits.every(d => d !== '')) {
+            const finalCode = newDigits.join('');
+            this.codeCompleted.emit(finalCode);
+            this.codeAccepted.emit(finalCode);
+        }
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (hAsync("div", { key: '3cfe0d64890b2c90f500c662fe8572f9630d614b', class: "otp" }, this.showLabelContact && (hAsync("p", { key: 'd791c408a5393ae82e00e758b67530d4b21381ac', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && hAsync("strong", { key: '3d6ca9c3a00a71ba99800a94f1b95d3247d75522' }, " ", this.labelContact))), hAsync("div", { key: '22d172d48ae8748fa27aaead4c65145d848ae4f2', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (hAsync("input", { key: i, ref: (el) => {
+        return (hAsync("div", { key: '8071fefc81136d40bbbb9e899e93cf482e824ccd', class: "otp" }, this.showLabelContact && (hAsync("p", { key: '811bc73073e180fe9094e99596c222870ed6c01f', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && hAsync("strong", { key: '3fe866ea995638f1b003330ee70c9f21e4c700a0' }, " ", this.labelContact))), hAsync("div", { key: '17701568ff66f89f89fce0f10fdda45840fffd5f', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (hAsync("input", { key: i, ref: (el) => {
                 if (el)
                     this.inputs[i] = el;
             }, class: {
                 'otp__digit': true,
                 'otp__digit--filled': (this.digitStates ?? [])[i] === 'filled',
                 'otp__digit--error': this.error,
-            }, type: "text", inputMode: "numeric", maxLength: 1, value: (this.digits ?? [])[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (hAsync("p", { key: 'c6434be80f44e6f8a277bdff49503f67db5cdca7', class: "otp__error" }, this.errorMessage)), hAsync("div", { key: '281e56d25ec3b01136aae2220605037d4dff4e16', class: "otp__resend" }, this.canResend ? (hAsync("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (hAsync("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: (this.digits ?? [])[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (hAsync("p", { key: 'ab3021f6227105d3bb2a244e4b9b08c8dca51dec', class: "otp__error" }, this.errorMessage)), hAsync("div", { key: '6915de3762c811ad365336e8dc2b129c20abe3a6', class: "otp__resend" }, this.canResend ? (hAsync("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (hAsync("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
     }
     static get style() { return dropiOtpSendCodeCss(); }
     static get cmpMeta() { return {
@@ -9781,9 +9789,9 @@ class DropiPaginator {
         const pages = this.pageNumbers;
         const isFirst = this.currentPage <= 1;
         const isLast = this.currentPage >= this.totalPages;
-        return (hAsync("div", { key: 'b601f88e4f971f885835d81fe876303fe97027c7', class: "paginator" }, hAsync("div", { key: '988ffb7ed122d4a666af4525bc85159d8d36538a', class: "paginator-pages" }, !isFirst && !this.noLabels && (hAsync("button", { key: '920a1a407782bde436fb6560caeb39848e9c7e28', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, hAsync("dropi-icon", { key: '67bc6ba66852a8883a19b2a3182be3cb298f2c8d', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (hAsync("button", { key: 'b1d0c5a8f66056cb53c31b01959177754632a906', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, hAsync("dropi-icon", { key: '951435cbf9b7a8b9bd0e0f33d2c9eacaea6e7af1', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && hAsync("span", { key: 'fed8a203b3e62f5da3e6fa055b1ee6e35453147c', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+        return (hAsync("div", { key: 'b601f88e4f971f885835d81fe876303fe97027c7', class: "paginator" }, hAsync("div", { key: '988ffb7ed122d4a666af4525bc85159d8d36538a', class: "paginator-pages" }, !isFirst && !this.noLabels && (hAsync("button", { key: '920a1a407782bde436fb6560caeb39848e9c7e28', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, hAsync("dropi-icon", { key: '249d4f2fc0a7ba2d790e3cf1c7a36a8d853a8cfe', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (hAsync("button", { key: '7b3cbe1cbd33db77fe540b5e179ed759e2d515e9', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, hAsync("dropi-icon", { key: '4f162e4df1573f5b6df40477099c3dc50347b738', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && hAsync("span", { key: 'a569b225a577e3dfb41466247be33846254ba1f6', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
             ? hAsync("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
-            : hAsync("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (hAsync("button", { key: '35a728e031880403ee0ff984484237ab701bd406', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && hAsync("span", { key: '4a73ba225105e449f8dfe8a504c5b1ad3e9c31cd', class: "paginator-label" }, "Siguiente"), hAsync("dropi-icon", { key: '7b140df9437922acc8c24d6ee1ff15d69ce7b7f1', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (hAsync("button", { key: '6157fa189ca011be4c13da803d2cd110d882bb8e', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, hAsync("dropi-icon", { key: '7b6c1b31d4caed8203b739cc10f3084568e40f10', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
+            : hAsync("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (hAsync("button", { key: 'ad51ec2f21741cf89e0e692cca2057c8cacea9f3', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && hAsync("span", { key: '3eb463a7749ef9f419613c07975a87073df29ecf', class: "paginator-label" }, "Siguiente"), hAsync("dropi-icon", { key: 'a6ece1855840a3ada48de22151bab4a43fd1972e', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (hAsync("button", { key: '4ac9168aba1221ad17a08f7463cc2f065ea1ce6f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, hAsync("dropi-icon", { key: '9e3618334ec1d476ea59ea00a600499f47a45a9a', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
     }
     static get style() { return dropiPaginatorCss(); }
     static get cmpMeta() { return {
@@ -9987,7 +9995,7 @@ class DropiPhoneInput {
         return (hAsync("div", { key: 'e4a9468971ff90e3e1c2cf6944a8475451843428', class: "phone-wrap" }, hAsync("div", { key: 'dabdccaf0453e98afb3db78ee6b6f83a66615baa', class: "phone-input-container" }, hAsync("div", { key: '6481136b782da271fe47c19cfd359398bf632f35', class: "custom-select" }, hAsync("button", { key: 'd314c0e2c74724eff20eae8f34241caf1fc2448c', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, hAsync("span", { key: 'c8b2aa7801a5c633c70010e7eeb2d5d9f3fb6b37', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, hAsync("img", { key: 'c2a6583a02b029cee578b9c931f185f7d4102e3f', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), hAsync("dropi-icon", { key: '0ace7b7188e846793d66373ea3d2c2d8ae881c24', name: this.open ? 'Dropdown-up' : 'Dropdown-down', width: "14px", height: "14px", color: "Gray-Gray-500" })), hAsync("ul", { key: '832b37902ce54aac152e956d671fb6f899781029', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (hAsync("li", null, hAsync("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, hAsync("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), hAsync("input", { key: 'eaf32641b019e1ffd3fe5a1d7a3c4597e1cd0cb5', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
+            } }, hAsync("span", { key: 'c8b2aa7801a5c633c70010e7eeb2d5d9f3fb6b37', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, hAsync("img", { key: 'c2a6583a02b029cee578b9c931f185f7d4102e3f', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), hAsync("dropi-icon", { key: '26e6e575c9072c008060560f03fcaba942ae5157', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), hAsync("ul", { key: 'ad2d7688f2de26aa1c8ac080819203c7f5839764', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (hAsync("li", null, hAsync("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, hAsync("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), hAsync("input", { key: '399968a68860688b9e91084dc5530aa5464ef5f1', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
     }
     static get watchers() { return {
         "codArea": [{
@@ -10121,10 +10129,10 @@ class DropiRadioSelectionList {
         return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
     }
     render() {
-        return (hAsync("div", { key: '7fdbf3d20a030a78ab4f48e7dba8333a34b1017b', class: "rsl" }, this.showFilter && (hAsync("div", { key: '12e2abb8f8ed76c6b3231f28b63c842ba3c3c326', class: "rsl__search" }, hAsync("dropi-icon", { key: '4f6a63480a811ed22d67485274b7edf3bf9765f4', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: 'c1f1c5942d422fceaa967640b7795a981896d68d', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (hAsync("div", { key: '7fdbf3d20a030a78ab4f48e7dba8333a34b1017b', class: "rsl" }, this.showFilter && (hAsync("div", { key: '12e2abb8f8ed76c6b3231f28b63c842ba3c3c326', class: "rsl__search" }, hAsync("dropi-icon", { key: '0d3e759696ceefdc997fadec75cc73f281caafd0', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: 'd5605975ebfda35d7abb0e69fe0a2baa929faddb', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
                 this.onSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });
-            } }))), hAsync("div", { key: '425b4048cbf4fa4a22c13d932f296cb594ffe993', class: "rsl__list" }, this.filtered.map(opt => {
+            } }))), hAsync("div", { key: '25dae74884621ce4f27f214de94c9ddb0fa1799f', class: "rsl__list" }, this.filtered.map(opt => {
             const isSelected = opt.id === this.selectedOption;
             return (hAsync("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.valueChange.emit(opt.id); } }, hAsync("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && hAsync("div", { class: "rsl__radio-dot" })), hAsync("div", { class: "rsl__content" }, hAsync("span", { class: "rsl__name" }, opt.name), (isSelected || this.alwaysShowDescription) && opt.description && (hAsync("span", { class: "rsl__desc" }, opt.description)))));
         }))));
@@ -10320,10 +10328,10 @@ class DropiSearch {
     }
     render() {
         const showDropdown = this.open && this.parsedOptions.length > 0;
-        return (hAsync("div", { key: 'ec00c8851a1d2d4ddda50edea458589a62d9451a', class: "search-wrap" }, this.label && hAsync("label", { key: '31cadba1b21276ec43f3623676fe1a7f9bac4da2', class: "search-label" }, this.label), hAsync("div", { key: 'bf68dbb7cfa657e8a7e441a2fe47db0e7d214e44', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && hAsync("dropi-icon", { key: 'c1c442a8fed018f774d6addc9dcaf3d1e89d6121', class: "search-icon", name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: 'd22791b1864320c54060827cc601bbc242d6c37d', class: "search-input", type: this.typeInput, placeholder: this.placeholder, value: this.textInput, maxLength: this.maxLength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
+        return (hAsync("div", { key: 'ec00c8851a1d2d4ddda50edea458589a62d9451a', class: "search-wrap" }, this.label && hAsync("label", { key: '31cadba1b21276ec43f3623676fe1a7f9bac4da2', class: "search-label" }, this.label), hAsync("div", { key: 'bf68dbb7cfa657e8a7e441a2fe47db0e7d214e44', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && hAsync("dropi-icon", { key: '21239271d90ba7adcc64e3f7ecb9b836619bd11e', class: "search-icon", name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: '64735f2618f993cbca379e72b3c87435158b4f0c', class: "search-input", type: this.typeInput, placeholder: this.placeholder, value: this.textInput, maxLength: this.maxLength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
                 if (this.parsedOptions.length)
                     this.open = true;
-            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.onBlur.emit(); } }), this.showClear && this.textInput && (hAsync("button", { key: '55e8653e330b06d488c6d65f6a8ffe6465a24289', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, hAsync("dropi-icon", { key: '0c154c2a95119caefe84bd9cfc40860d4b722137', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))), showDropdown && (hAsync("div", { key: 'a4b4691ff29a427755f19c4bc4932f2634736701', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, this.filtered.length === 0 ? (hAsync("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (hAsync("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multipleSelectModel && hAsync("dropi-checkbox", { checked: this.isSelected(opt) }), hAsync("span", { class: "search-option__label" }, opt[this.dataName])))))))));
+            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.onBlur.emit(); } }), this.showClear && this.textInput && (hAsync("button", { key: 'c6a1dab911f262e0b2da88e59cdbaf6b4c1c74a9', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, hAsync("dropi-icon", { key: 'ddf404e0be3d95f1154ecd22dd9b9f7a06e3c187', name: "Close-small", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), showDropdown && (hAsync("div", { key: 'a8c5ecbfe700bcb116119f172c3cb017b9693113', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, this.filtered.length === 0 ? (hAsync("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (hAsync("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multipleSelectModel && hAsync("dropi-checkbox", { checked: this.isSelected(opt) }), hAsync("span", { class: "search-option__label" }, opt[this.dataName])))))))));
     }
     static get watchers() { return {
         "dataToSearch": [{
@@ -10698,7 +10706,7 @@ class DropiSelect {
             }, disabled: this.disabled, ref: el => (this.buttonRef = el), onClick: () => this.toggleDropdown() }, hAsync("div", { class: {
                 'button-content': true,
                 'option-radio': this.radioOptions && !!this._selectedOption && !this.multiSelect,
-            } }, this.preIcon && (hAsync("dropi-icon", { name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-500" })), this.radioOptions && this._selectedOption && !this.multiSelect && [
+            } }, this.preIcon && (hAsync("dropi-icon", { name: this.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), this.radioOptions && this._selectedOption && !this.multiSelect && [
             this._selectedOption.imageUrl && !this._selectedOption.isFallback
                 ? hAsync("img", { class: "option-image small-image", src: this._selectedOption.imageUrl, alt: "", onError: () => {
                         if (this._selectedOption)
@@ -10708,7 +10716,7 @@ class DropiSelect {
                     ? hAsync("span", { class: "option-image-fallback small-image" }, this._selectedOption.label.charAt(0).toUpperCase())
                     : null,
             hAsync("div", { class: "labels-container elipsis" }, hAsync("span", null, this._selectedOption.label), this._selectedOption.secondLabel && hAsync("span", { class: "option-second-label" }, this._selectedOption.secondLabel)),
-        ], !(this.radioOptions && this._selectedOption && !this.multiSelect) && (hAsync("div", { class: "elipsis" }, this.triggerLabel))), hAsync("dropi-icon", { name: this.isOpen ? 'Dropdown-up' : 'Dropdown-down', width: iconSize, height: iconSize, color: iconColor })));
+        ], !(this.radioOptions && this._selectedOption && !this.multiSelect) && (hAsync("div", { class: "elipsis" }, this.triggerLabel))), hAsync("dropi-icon", { name: this.isOpen ? 'Dropdown-up' : 'Dropdown-down', iconWidth: iconSize, iconHeight: iconSize, color: iconColor })));
     }
     renderOption(option) {
         const isSelected = this.multiSelect
@@ -10720,23 +10728,23 @@ class DropiSelect {
                 'option-with-flag': this.showCountryFlags && !!option.countryCode,
                 'disabled-option': !!option.disabled,
                 'selected-option': isSelected,
-            }, disabled: option.disabled, onClick: () => this.selectOption(option) }, this.multiSelect && (hAsync("span", { class: { 'multi-checkbox': true, checked: isSelected } }, isSelected && (hAsync("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none" }, hAsync("path", { d: "M20.6 5.7L9.1 17.2c-.2.2-.5.3-.8.3s-.6-.1-.8-.3L3 12.8c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l3.9 3.9L19.2 4.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4z", fill: "white" }))))), this.radioOptions && (hAsync("div", { class: { radio: true, selected: isSelected } }, isSelected && hAsync("div", { class: "circle" }))), !this.radioOptions && option.preIcon && (hAsync("dropi-icon", { name: option.preIcon, width: "20px", height: "20px", color: "Gray-Gray-500" })), this.radioOptions && option.imageUrl && !option.isFallback && (hAsync("img", { class: "option-image", src: option.imageUrl, alt: "", onError: () => { option.isFallback = true; this.options = [...this.options]; } })), this.radioOptions && option.isFallback && (hAsync("span", { class: "option-image-fallback" }, option.label.charAt(0).toUpperCase())), this.showCountryFlags && option.countryCode && (hAsync("span", { class: "flag-placeholder" }, option.countryCode)), this.radioOptions
+            }, disabled: option.disabled, onClick: () => this.selectOption(option) }, this.multiSelect && (hAsync("span", { class: { 'multi-checkbox': true, checked: isSelected } }, isSelected && (hAsync("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none" }, hAsync("path", { d: "M20.6 5.7L9.1 17.2c-.2.2-.5.3-.8.3s-.6-.1-.8-.3L3 12.8c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l3.9 3.9L19.2 4.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4z", fill: "white" }))))), this.radioOptions && (hAsync("div", { class: { radio: true, selected: isSelected } }, isSelected && hAsync("div", { class: "circle" }))), !this.radioOptions && option.preIcon && (hAsync("dropi-icon", { name: option.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), this.radioOptions && option.imageUrl && !option.isFallback && (hAsync("img", { class: "option-image", src: option.imageUrl, alt: "", onError: () => { option.isFallback = true; this.options = [...this.options]; } })), this.radioOptions && option.isFallback && (hAsync("span", { class: "option-image-fallback" }, option.label.charAt(0).toUpperCase())), this.showCountryFlags && option.countryCode && (hAsync("span", { class: "flag-placeholder" }, option.countryCode)), this.radioOptions
             ? (hAsync("div", { class: "labels-container" }, hAsync("span", { class: "elipsis" }, option.label), option.secondLabel && hAsync("span", { class: "option-second-label" }, option.secondLabel)))
             : (hAsync("span", { class: "elipsis" }, this.showCountryFlags && option.shortLabel ? option.shortLabel : option.label)))));
     }
     renderDropdown() {
         if (!this.isOpen)
             return null;
-        return (hAsync("ul", { class: `select-dropdown-overlay ${this.overlayClass}`, style: this.dropdownStyle, onScroll: (e) => this.handleScroll(e) }, this.searchEnabled && (hAsync("li", { class: "sticky-search" }, hAsync("div", { class: "search-wrapper" }, hAsync("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), hAsync("input", { class: "search-input", type: "text", placeholder: this.placeHolderSearch, value: this.searchTerm, onInput: (e) => this.handleSearch(e.target.value), onKeyDown: (e) => {
+        return (hAsync("ul", { class: `select-dropdown-overlay ${this.overlayClass}`, style: this.dropdownStyle, onScroll: (e) => this.handleScroll(e) }, this.searchEnabled && (hAsync("li", { class: "sticky-search" }, hAsync("div", { class: "search-wrapper" }, hAsync("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { class: "search-input", type: "text", placeholder: this.placeHolderSearch, value: this.searchTerm, onInput: (e) => this.handleSearch(e.target.value), onKeyDown: (e) => {
                 if (e.key === 'Enter')
                     this.onKeyEnter.emit(e);
-            } }), this.searchTerm && (hAsync("button", { type: "button", class: "search-clear", onClick: () => this.handleSearch('') }, hAsync("dropi-icon", { name: "Close", width: "14px", height: "14px", color: "Gray-Gray-400" })))))), this.isGrouped && this.filteredOptions.map(group => [
+            } }), this.searchTerm && (hAsync("button", { type: "button", class: "search-clear", onClick: () => this.handleSearch('') }, hAsync("dropi-icon", { name: "Close", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" })))))), this.isGrouped && this.filteredOptions.map(group => [
             hAsync("li", { class: "option-group-title" }, group.category),
-            ...group.options.map(opt => (hAsync("li", { key: opt.id }, hAsync("button", { type: "button", class: { option: true, 'option-group': true, 'disabled-option': !!opt.disabled }, disabled: opt.disabled, onClick: () => this.selectOption(opt) }, opt.preIcon && hAsync("dropi-icon", { name: opt.preIcon, width: "20px", height: "20px", color: "Gray-Gray-500" }), hAsync("span", { class: "elipsis" }, opt.label))))),
+            ...group.options.map(opt => (hAsync("li", { key: opt.id }, hAsync("button", { type: "button", class: { option: true, 'option-group': true, 'disabled-option': !!opt.disabled }, disabled: opt.disabled, onClick: () => this.selectOption(opt) }, opt.preIcon && hAsync("dropi-icon", { name: opt.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }), hAsync("span", { class: "elipsis" }, opt.label))))),
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (hAsync("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (hAsync("div", { key: '932cad965441a784f51d6b82ffc5a100cf438fb6', class: "custom-select" }, !this.dropdownType && this.label && (hAsync("label", { key: '1c46242dcbd7862b32a36e2132bc4689b3c95aab', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && hAsync("span", { key: '79e2df6ae0a55c4e51ff7354486903d58bdb7d36', class: "asterisk" }, " *"))), hAsync("div", { key: 'd4a48dcc513b5ae7171598709b0d00c3ffd7f42b', class: "dropdown-container" }, this.dropdownType && this.label && (hAsync("div", { key: 'f9d8b6f87dcc8438c00ec04edabe10ebb2cceb79', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (hAsync("div", { key: 'e8cc2e4ccb3a5919fe30411003153bfe6434b0d0', class: "select-helper" }, hAsync("span", { key: '2fe857a4efac70882ec58835534bb22739c4fb26' }, this.textHelper))), this.hasError && this.errorText && (hAsync("div", { key: 'e357992bf4a391052fe3a8444b24777292f71bf0', class: "select-helper-error" }, hAsync("dropi-icon", { key: '9a32ef1f5ae2ccf18996bdc451e5de4e2c923a0a', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), hAsync("span", { key: '919259f76022b34162f680234a3c1cf93492666b' }, this.errorText))), this.renderDropdown()));
+        return (hAsync("div", { key: '9f5397dca313ba676a5a038f89ded457c324ac7a', class: "custom-select" }, !this.dropdownType && this.label && (hAsync("label", { key: '5924d81286019ca01ca5eda924078e64db5ead66', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && hAsync("span", { key: '1565c47c081c8fb497185417aa46559f3754db89', class: "asterisk" }, " *"))), hAsync("div", { key: '6be308aeafb7a4a2da302db925ccc07e5eb27718', class: "dropdown-container" }, this.dropdownType && this.label && (hAsync("div", { key: 'a2ea9c5e67274181c5bc020c990281ac425b489b', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (hAsync("div", { key: 'a13ebbf9fe6e975724b2441f5c1c71b18dacf128', class: "select-helper" }, hAsync("span", { key: '55f2369bc0a8c156454b4c29a323f98bd13321fb' }, this.textHelper))), this.hasError && this.errorText && (hAsync("div", { key: 'bc5dc3394916459576798d5f1db4126992b30d58', class: "select-helper-error" }, hAsync("dropi-icon", { key: '12bcece304d9de3cc807921ba69af29b9b763fc9', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: 'c221b88fde03aa2d66ce212272ff999f2ba5a9ad' }, this.errorText))), this.renderDropdown()));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -10851,10 +10859,10 @@ class DropiSidebar {
                         'sidebar-option': true,
                         'sidebar-active-option': !!item.active,
                         'sidebar-default-option': !item.active
-                    }, onClick: () => this.onItemClick(item) }, hAsync("dropi-icon", { name: item.icon || 'Cube', width: "20px", height: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }), hAsync("span", null, item.text), item.subItems && item.subItems.length > 0 && (hAsync("dropi-icon", { class: {
+                    }, onClick: () => this.onItemClick(item) }, hAsync("dropi-icon", { name: item.icon || 'Cube', iconWidth: "20px", iconHeight: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }), hAsync("span", null, item.text), item.subItems && item.subItems.length > 0 && (hAsync("dropi-icon", { class: {
                         'arrow': true,
                         'arrow-expanded': !!item.expandedMenu
-                    }, name: "Dropdown-down", width: "20px", height: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }))),
+                    }, name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }))),
                 /* SubItems Renderizados al mismo nivel DOM que instruye Angular ng-container */
                 item.subItems && item.subItems.length > 0 && (item.subItems.map(subOption => (hAsync("div", { class: {
                         'sidebar-sub-item': true,
@@ -11067,7 +11075,7 @@ class DropiSteps {
             const state = this.stepState(step);
             const label = labels[step - 1];
             const isLast = step === this.stepsCount;
-            return (hAsync("div", { class: "stepper__step", key: step }, hAsync("div", { class: "stepper__circle-wrap" }, hAsync("div", { class: { 'stepper__circle': true, [`stepper__circle--${state}`]: true } }, state === 'completed' ? (hAsync("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (this.showNumberOfStep ? hAsync("span", null, step) : null)), !isLast && hAsync("div", { class: { 'stepper__line': true, 'stepper__line--done': state === 'completed' } })), label && (hAsync("div", { class: "stepper__label" }, label.title && hAsync("span", { class: "stepper__title" }, label.title), label.description && hAsync("span", { class: "stepper__desc" }, label.description)))));
+            return (hAsync("div", { class: "stepper__step", key: step }, hAsync("div", { class: "stepper__circle-wrap" }, hAsync("div", { class: { 'stepper__circle': true, [`stepper__circle--${state}`]: true } }, state === 'completed' ? (hAsync("dropi-icon", { name: "Check", iconWidth: "12px", iconHeight: "12px", color: "Neutral-White" })) : (this.showNumberOfStep ? hAsync("span", null, step) : null)), !isLast && hAsync("div", { class: { 'stepper__line': true, 'stepper__line--done': state === 'completed' } })), label && (hAsync("div", { class: "stepper__label" }, label.title && hAsync("span", { class: "stepper__title" }, label.title), label.description && hAsync("span", { class: "stepper__desc" }, label.description)))));
         })));
     }
     static get style() { return dropiStepsCss(); }
@@ -11162,7 +11170,7 @@ class DropiTable {
     /** Empty state message */
     emptyMessage = 'No hay datos disponibles';
     /** Table title */
-    title = '';
+    tableTitle = '';
     /** Show search input */
     showSearch = false;
     /** Show column selector button */
@@ -11355,7 +11363,7 @@ class DropiTable {
                 case 'country':
                     return (hAsync("div", { class: "flag-container" }, value.flag && hAsync("dropi-country-flags", { width: "24", height: "24", country: value.flag, style: { display: 'inline-flex' } }), hAsync("span", null, value.value)));
                 case 'textIcon':
-                    return (hAsync("div", { class: "text-icon-label" }, hAsync("dropi-icon", { name: value.icon, width: "24px", height: "24px", color: value.iconColor || 'Gray-Gray-500' }), value.value && hAsync("span", null, value.value)));
+                    return (hAsync("div", { class: "text-icon-label" }, hAsync("dropi-icon", { name: value.icon, iconWidth: "24px", iconHeight: "24px", color: value.iconColor || 'Gray-Gray-500' }), value.value && hAsync("span", null, value.value)));
                 case 'status':
                     return (hAsync("div", { class: "status-label" }, hAsync("div", { class: "status-dot" }, hAsync("div", { class: `dot dot-${(value.status || '').toLowerCase()}` }), hAsync("span", { class: "status-text" }, value.status)), value.value && hAsync("span", { class: "status-description" }, value.value)));
                 case 'image':
@@ -11376,11 +11384,11 @@ class DropiTable {
         const allSelected = rows.length > 0 && this.selectedKeys.size === rows.length;
         const hasActions = this.parsedRowActions.length > 0;
         const cols = this.visibleColumns;
-        return (hAsync("div", { class: "table-container" }, (this.showSearch || this.showColumnSelector || this.title) && (hAsync("div", { class: "search-container" }, this.title && hAsync("h3", { class: "table-title" }, this.title), hAsync("div", { class: `search-actions${this.showSearch ? '' : ' only-filter'}` }, this.showSearch && (hAsync("dropi-input", { placeholder: "Buscar", value: this.searchTerm, onOnInput: (e) => {
+        return (hAsync("div", { class: "table-container" }, (this.showSearch || this.showColumnSelector || this.tableTitle) && (hAsync("div", { class: "search-container" }, this.tableTitle && hAsync("div", { class: "table-title Body-L-Bold" }, this.tableTitle), hAsync("div", { class: `search-actions${this.showSearch ? '' : ' only-filter'}` }, this.showSearch && (hAsync("dropi-input", { placeholder: "Buscar", value: this.searchTerm, onOnInput: (e) => {
                 this.searchTerm = e.detail;
                 this.dropiSearch.emit(e.detail);
                 this.onSearchChange.emit(e.detail);
-            } })), this.showColumnSelector && (hAsync("div", { class: "table-tools" }, hAsync("div", { class: "column-selector-container" }, hAsync("button", { class: "column-selector-btn", onClick: () => this.showColumnMenu = !this.showColumnMenu }, hAsync("dropi-icon", { name: "list-table", width: "20px", height: "20px", color: "Gray-Gray-500" })), this.showColumnMenu && (hAsync("div", { class: "column-selector-menu" }, this.parsedColumns.map(col => (hAsync("div", { class: "column-selector-option", onClick: () => {
+            } })), this.showColumnSelector && (hAsync("div", { class: "table-tools" }, hAsync("div", { class: "column-selector-container" }, hAsync("button", { class: "column-selector-btn", onClick: () => this.showColumnMenu = !this.showColumnMenu }, hAsync("dropi-icon", { name: "list-table", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), this.showColumnMenu && (hAsync("div", { class: "column-selector-menu" }, this.parsedColumns.map(col => (hAsync("div", { class: "column-selector-option", onClick: () => {
                 const next = new Set(this.hiddenColumns);
                 if (next.has(col.key))
                     next.delete(col.key);
@@ -11391,7 +11399,7 @@ class DropiTable {
                 this.hiddenColumns = this.hiddenColumns.size === 0
                     ? new Set(this.parsedColumns.map(c => c.key))
                     : new Set();
-            } }, hAsync("dropi-checkbox", { checked: this.hiddenColumns.size === 0 }), hAsync("span", null, "Mostrar / Ocultar todo"))))))))))), hAsync("div", { class: `table-wrapper${hasActions ? ' has-sticky-actions' : ''}` }, hAsync("table", { class: `custom-table${this.showCheckbox ? ' has-checkbox' : ''}` }, hAsync("thead", null, hAsync("tr", null, this.showCheckbox && (hAsync("th", { class: "checkbox-header" }, hAsync("dropi-checkbox", { checked: allSelected, onOnChange: (e) => this.toggleAll(e.detail) }))), cols.map(col => (hAsync("th", { class: { sortable: !!col.sortable, 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { textAlign: col.align || 'center', minWidth: col.minWidth, maxWidth: col.maxWidth }, onClick: () => this.handleSort(col) }, hAsync("div", { class: `headers-container${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, hAsync("div", { class: `headers${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, hAsync("span", null, col.label), col.sortable && (hAsync("div", { class: "order-icons" }, hAsync("dropi-icon", { name: "Caret-up", width: "12px", height: "12px", color: this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' }), hAsync("dropi-icon", { name: "Caret-down", width: "12px", height: "12px", color: !this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' })))))))), hasActions && hAsync("th", { class: "actions-header actions" }, "Acciones"))), hAsync("tbody", null, this.loading ? (Array.from({ length: 5 }).map(() => (hAsync("tr", { class: "table-row" }, this.showCheckbox && hAsync("td", null, hAsync("div", { class: "skeleton skeleton--sm" })), cols.map(() => hAsync("td", null, hAsync("div", { class: "skeleton" }))), hasActions && hAsync("td", null))))) : rows.length === 0 ? (hAsync("tr", null, hAsync("td", { colSpan: cols.length + (this.showCheckbox ? 1 : 0) + (hasActions ? 1 : 0) }, hAsync("div", { class: "empty-table" }, hAsync("div", { class: "empty-message-container" }, this.emptyMessage))))) : (rows.map((row, i) => (hAsync("tr", { class: "table-row", onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.showCheckbox && (hAsync("td", { onClick: (e) => e.stopPropagation() }, hAsync("dropi-checkbox", { checked: this.selectedKeys.has(i), onOnChange: () => this.toggleRow(i) }))), cols.map(col => (hAsync("td", { class: { 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { minWidth: col.minWidth, maxWidth: col.maxWidth, overflow: col.maxWidth ? 'hidden' : undefined } }, hAsync("div", { class: "cell-content", style: { textAlign: col.align || 'center' } }, this.renderCellValue(row[col.key]))))), hasActions && (hAsync("td", { class: "action-button actions", onClick: (e) => e.stopPropagation() }, this.parsedRowActions.length > 3 ? (hAsync("div", { style: { display: "flex", justifyContent: "center", width: "100%" } }, hAsync("dropi-icon", { class: "action-icon", name: "Menu-dots-vertical", width: "24px", height: "24px", color: "Gray-Gray-500", onClick: () => this.openActionRow = this.openActionRow === i ? -1 : i }), this.openActionRow === i && (hAsync("div", { class: "actions-menu" }, this.parsedRowActions.map(action => (hAsync("div", { class: "action-item", onClick: () => { this.openActionRow = -1; this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } }, hAsync("dropi-icon", { name: action.icon, width: "20px", height: "20px", color: action.iconColor || 'Gray-Gray-500' }), action.label))))))) : (hAsync("div", { class: "short-actions" }, this.parsedRowActions.map(action => (hAsync("dropi-icon", { class: "action-icon", name: action.icon, width: "24px", height: "24px", color: action.iconColor || 'Gray-Gray-500', onClick: () => { this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } })))))))))))))), this.showPaginator && (hAsync("div", { class: "pagination" }, hAsync("div", { class: "page-size-selector" }, hAsync("label", null, "Mostrar"), hAsync("select", { onChange: (e) => {
+            } }, hAsync("dropi-checkbox", { checked: this.hiddenColumns.size === 0 }), hAsync("span", null, "Mostrar / Ocultar todo"))))))))))), hAsync("div", { class: `table-wrapper${hasActions ? ' has-sticky-actions' : ''}` }, hAsync("table", { class: `custom-table${this.showCheckbox ? ' has-checkbox' : ''}` }, hAsync("thead", null, hAsync("tr", null, this.showCheckbox && (hAsync("th", { class: "checkbox-header" }, hAsync("dropi-checkbox", { checked: allSelected, onOnChange: (e) => this.toggleAll(e.detail) }))), cols.map(col => (hAsync("th", { class: { sortable: !!col.sortable, 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { textAlign: col.align || 'center', minWidth: col.minWidth, maxWidth: col.maxWidth }, onClick: () => this.handleSort(col) }, hAsync("div", { class: `headers-container${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, hAsync("div", { class: `headers${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, hAsync("span", null, col.label), col.sortable && (hAsync("div", { class: "order-icons" }, hAsync("dropi-icon", { name: "Caret-up", iconWidth: "12px", iconHeight: "12px", color: this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' }), hAsync("dropi-icon", { name: "Caret-down", iconWidth: "12px", iconHeight: "12px", color: !this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' })))))))), hasActions && hAsync("th", { class: "actions-header actions" }, "Acciones"))), hAsync("tbody", null, this.loading ? (Array.from({ length: 5 }).map(() => (hAsync("tr", { class: "table-row" }, this.showCheckbox && hAsync("td", null, hAsync("div", { class: "skeleton skeleton--sm" })), cols.map(() => hAsync("td", null, hAsync("div", { class: "skeleton" }))), hasActions && hAsync("td", null))))) : rows.length === 0 ? (hAsync("tr", null, hAsync("td", { colSpan: cols.length + (this.showCheckbox ? 1 : 0) + (hasActions ? 1 : 0) }, hAsync("div", { class: "empty-table" }, hAsync("div", { class: "empty-message-container" }, this.emptyMessage))))) : (rows.map((row, i) => (hAsync("tr", { class: "table-row", onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.showCheckbox && (hAsync("td", { onClick: (e) => e.stopPropagation() }, hAsync("dropi-checkbox", { checked: this.selectedKeys.has(i), onOnChange: () => this.toggleRow(i) }))), cols.map(col => (hAsync("td", { class: { 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { minWidth: col.minWidth, maxWidth: col.maxWidth, overflow: col.maxWidth ? 'hidden' : undefined } }, hAsync("div", { class: "cell-content", style: { textAlign: col.align || 'center' } }, this.renderCellValue(row[col.key]))))), hasActions && (hAsync("td", { class: "action-button actions", onClick: (e) => e.stopPropagation() }, this.parsedRowActions.length > 3 ? (hAsync("div", { style: { display: "flex", justifyContent: "center", width: "100%" } }, hAsync("dropi-icon", { class: "action-icon", name: "Menu-dots-vertical", iconWidth: "24px", iconHeight: "24px", color: "Gray-Gray-500", onClick: () => this.openActionRow = this.openActionRow === i ? -1 : i }), this.openActionRow === i && (hAsync("div", { class: "actions-menu" }, this.parsedRowActions.map(action => (hAsync("div", { class: "action-item", onClick: () => { this.openActionRow = -1; this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } }, hAsync("dropi-icon", { name: action.icon, iconWidth: "20px", iconHeight: "20px", color: action.iconColor || 'Gray-Gray-500' }), action.label))))))) : (hAsync("div", { class: "short-actions" }, this.parsedRowActions.map(action => (hAsync("dropi-icon", { class: "action-icon", name: action.icon, iconWidth: "24px", iconHeight: "24px", color: action.iconColor || 'Gray-Gray-500', onClick: () => { this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } })))))))))))))), this.showPaginator && (hAsync("div", { class: "pagination" }, hAsync("div", { class: "page-size-selector" }, hAsync("label", null, "Mostrar"), hAsync("select", { onChange: (e) => {
                 this.pageSize = Number(e.target.value);
                 this.currentPage = 1;
                 this.dropiPageSizeChange.emit(this.pageSize);
@@ -11432,7 +11440,7 @@ class DropiTable {
             "showCheckbox": [4, "show-checkbox"],
             "loading": [4],
             "emptyMessage": [1, "empty-message"],
-            "title": [1],
+            "tableTitle": [1, "table-title"],
             "showSearch": [4, "show-search"],
             "showColumnSelector": [4, "show-column-selector"],
             "showPaginator": [4, "show-paginator"],
@@ -11512,7 +11520,7 @@ class DropiTabs {
         return (hAsync("div", { key: '337040015b29581ebb15ac347bb62220ed0a2d4d', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
             const isActive = tab.id === this.activeTab;
             return (hAsync("div", { role: "tab", "aria-selected": String(isActive), class: { 'tab-item': true, 'tab-item--active': isActive && !tab.disabled, 'tab-item--disabled': !!tab.disabled }, onClick: () => this.handleClick(tab) }, hAsync("span", { class: "tab-label-row" }, hAsync("span", { class: "tab-label" }, tab.label), tab.counter !== undefined && tab.counter !== null && (hAsync("span", { class: { 'tab-counter': true, 'tab-counter--active': isActive } }, tab.counter))), this.showIcon && (tab.completed
-                ? hAsync("dropi-icon", { name: "Check-circle", width: "12px", height: "12px", color: "Success-Success-500" })
+                ? hAsync("dropi-icon", { name: "Check-circle", iconWidth: "12px", iconHeight: "12px", color: "Success-Success-500" })
                 : hAsync("span", { class: "tab-status-dot" }))));
         })));
     }
@@ -11592,7 +11600,7 @@ class DropiTag {
         return typeof this.text === 'string' && this.text.trim().length > 0;
     }
     render() {
-        return (hAsync("div", { key: '1736efc48b3ccaf5f3ca85ad29622f42b4fb3c8d', class: "container-chips" }, hAsync("div", { key: '96c2b0e9d22881ca71c58488dcd622a1eef1a120', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (hAsync("dropi-icon", { key: 'aab0330382fe0690177edcb364ab043459b9a316', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && hAsync("span", { key: 'be38207ca7668b6b4976d5f3f2f506c380ee0491' }, this.text))));
+        return (hAsync("div", { key: '1736efc48b3ccaf5f3ca85ad29622f42b4fb3c8d', class: "container-chips" }, hAsync("div", { key: '96c2b0e9d22881ca71c58488dcd622a1eef1a120', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (hAsync("dropi-icon", { key: '4c94cf3fcabd31b6b50fc711815472f8b12e43d9', class: "file-icon", name: this.icon, iconWidth: "16px", iconHeight: "16px", color: this.iconColor })), this.hasContent && hAsync("span", { key: '26f06b85d085e58aa854533a9fd238e70957212b' }, this.text))));
     }
     static get watchers() { return {
         "type": [{
@@ -11767,7 +11775,7 @@ class DropiTextArea {
                 'Body-M-Regular': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
-            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (hAsync("div", { key: 'e3271eeea7e85a64454c344986e36c85197f3782', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (hAsync("div", { key: 'c4b83072b96e56b45b6afc8209f4d124cb6d6bf3', class: "form-control-helper" }, this.isInvalid && (hAsync("dropi-icon", { key: '98aef0a346f1ca3fe33cf9f2e6519f61aa787374', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), hAsync("span", { key: 'f820d6043b390dc22d1b7ee1ee58dfd9a3fcd333', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
+            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (hAsync("div", { key: 'e3271eeea7e85a64454c344986e36c85197f3782', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (hAsync("div", { key: 'c4b83072b96e56b45b6afc8209f4d124cb6d6bf3', class: "form-control-helper" }, this.isInvalid && (hAsync("dropi-icon", { key: '07a2884a516118f3169a0427701a2271d24f2bcc', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" })), hAsync("span", { key: 'a518a81fdba8df18083ef92a1dbc9936d3fcc17d', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -11833,7 +11841,7 @@ class DropiTimeLine {
         const steps = this.parsedSteps;
         return (hAsync("div", { key: '0b43d3e673cda6f31476abcbc55ef2b6b9dbd7ac', class: "timeline" }, steps.map((step, i) => {
             const isLast = i === steps.length - 1;
-            return (hAsync("div", { class: { 'tl-step': true, [`tl-step--${step.status}`]: true }, key: step.id || i }, hAsync("div", { class: "tl-step__marker" }, hAsync("div", { class: "tl-step__icon" }, step.icon ? (hAsync("dropi-icon", { name: step.icon, width: "16px", height: "16px", color: step.status === 'done' ? 'Neutral-White' : step.status === 'active' ? 'Primary-Primary-500' : 'Gray-Gray-400' })) : (hAsync("span", { class: "tl-step__dot" }))), !isLast && hAsync("div", { class: "tl-step__line" })), hAsync("div", { class: "tl-step__content" }, hAsync("span", { class: "tl-step__label" }, step.label), step.subtitle && hAsync("span", { class: "tl-step__subtitle" }, step.subtitle))));
+            return (hAsync("div", { class: { 'tl-step': true, [`tl-step--${step.status}`]: true }, key: step.id || i }, hAsync("div", { class: "tl-step__marker" }, hAsync("div", { class: "tl-step__icon" }, step.icon ? (hAsync("dropi-icon", { name: step.icon, iconWidth: "16px", iconHeight: "16px", color: step.status === 'done' ? 'Neutral-White' : step.status === 'active' ? 'Primary-Primary-500' : 'Gray-Gray-400' })) : (hAsync("span", { class: "tl-step__dot" }))), !isLast && hAsync("div", { class: "tl-step__line" })), hAsync("div", { class: "tl-step__content" }, hAsync("span", { class: "tl-step__label" }, step.label), step.subtitle && hAsync("span", { class: "tl-step__subtitle" }, step.subtitle))));
         })));
     }
     static get style() { return dropiTimeLineCss(); }
@@ -11903,7 +11911,7 @@ class DropiToast {
         return `<lottie-player src="${this.lottieMap[severity]}" background="transparent" speed="1" loop autoplay></lottie-player>`;
     }
     render() {
-        return (hAsync("div", { key: '0ad8903921fd1bd773d206029bcc4e12e8b21349', class: `toast-container toast-container--${this.position}` }, (this.items ?? []).map(item => (hAsync("div", { key: item.msg.id, class: { 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving } }, hAsync("div", { class: `toast toast--${item.msg.severity}` }, hAsync("div", { class: "toast-content" }, hAsync("div", { class: "lottie-img" }, hAsync("div", { class: "lottie-player-container", innerHTML: this.getLottieHtml(item.msg.severity) })), hAsync("div", { class: "info-container" }, hAsync("p", { class: "title" }, item.msg.summary), item.msg.detail && hAsync("p", { class: "description" }, item.msg.detail))), item.msg.closable && (hAsync("button", { class: "toast-close", onClick: () => this.remove(item.msg.id) }, hAsync("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-400" })))))))));
+        return (hAsync("div", { key: '0ad8903921fd1bd773d206029bcc4e12e8b21349', class: `toast-container toast-container--${this.position}` }, (this.items ?? []).map(item => (hAsync("div", { key: item.msg.id, class: { 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving } }, hAsync("div", { class: `toast toast--${item.msg.severity}` }, hAsync("div", { class: "toast-content" }, hAsync("div", { class: "lottie-img" }, hAsync("div", { class: "lottie-player-container", innerHTML: this.getLottieHtml(item.msg.severity) })), hAsync("div", { class: "info-container" }, hAsync("p", { class: "title" }, item.msg.summary), item.msg.detail && hAsync("p", { class: "description" }, item.msg.detail))), item.msg.closable && (hAsync("button", { class: "toast-close", onClick: () => this.remove(item.msg.id) }, hAsync("dropi-icon", { name: "Close-small", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-400" })))))))));
     }
     static get style() { return dropiToastCss(); }
     static get cmpMeta() { return {
@@ -12078,12 +12086,12 @@ class DropiTooltipV2 {
         const bubbleStyle = { maxWidth: this.maxWidth };
         if (this.minWidth)
             bubbleStyle.minWidth = this.minWidth;
-        return (hAsync("div", { key: '85f49bcb2af567a8fb70cd92afab893a2e0bf567', class: "tooltip-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleClick, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout }, this.showIcon && (hAsync("dropi-icon", { key: 'f40ebe0c12bdfa251cbe6086f7ea432aed0124fa', name: this.iconName, width: `${this.iconSize}px`, height: `${this.iconSize}px`, color: this.iconColor })), hAsync("slot", { key: '77d2aa944f57cc5f858bbff97f88dfda6e71e088' }), this.displayContent && (hAsync("div", { key: '4fcbbbf1a3b163ad2992efd8c8dfbef695f4f422', class: {
+        return (hAsync("div", { key: '85f49bcb2af567a8fb70cd92afab893a2e0bf567', class: "tooltip-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleClick, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout }, this.showIcon && (hAsync("dropi-icon", { key: '0ec2770a45d95e2dc655886d086f7f44c12fdda5', name: this.iconName, iconWidth: `${this.iconSize}px`, iconHeight: `${this.iconSize}px`, color: this.iconColor })), hAsync("slot", { key: 'caeff259dfaecdd7757d85bee3e93b15d8b53173' }), this.displayContent && (hAsync("div", { key: 'e1be3f25c37b978b79db639a245d1030e9de2d59', class: {
                 'tooltip-bubble': true,
                 [`tooltip-bubble--${this.position}`]: true,
                 [`tooltip-bubble--arrow-${this.arrowPosition}`]: true,
                 'tooltip-bubble--visible': this.visible,
-            }, style: bubbleStyle, role: "tooltip" }, this.showX && (hAsync("button", { key: '48428c1dcdd6c52f8a0b26641a016a00cf04444d', class: "tooltip-close", onClick: this.handleClose, "aria-label": "Cerrar" }, hAsync("dropi-icon", { key: '6c870fc88739ba5e09c1f77eda783d21af476f98', name: "Close-small", width: "12px", height: "12px", color: "Gray-Gray-500" }))), this.title && !this.text && hAsync("strong", { key: 'c501f266a5d3cc4250f9b205f8fa641c1f9be7ad', class: "tooltip-title" }, this.title), this.label && !this.text && hAsync("span", { key: '6fb281665f9c84a7cb1f86bf8718da8ef5b95204', class: "tooltip-label" }, this.label), this.text && hAsync("span", { key: '4d1a3445cb4b5361e8604404bfb970fc0e9ea289' }, this.text), hAsync("span", { key: 'f7d0ac1b155d486c55cbeebc63cca32838e25811', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
+            }, style: bubbleStyle, role: "tooltip" }, this.showX && (hAsync("button", { key: 'ba9f719b7066bb953a45b60f03fce20383c2eac5', class: "tooltip-close", onClick: this.handleClose, "aria-label": "Cerrar" }, hAsync("dropi-icon", { key: '8660e8130e643393c9cd70846247ccae8e3ebf24', name: "Close-small", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-500" }))), this.title && !this.text && hAsync("strong", { key: '2d2a39d2d2a3993b62901497660a31193bcece12', class: "tooltip-title" }, this.title), this.label && !this.text && hAsync("span", { key: 'b34e2e997629c5700b64a6ae527b71c44e8939f4', class: "tooltip-label" }, this.label), this.text && hAsync("span", { key: '4cd22e60cce211b96cf8441a33dcd7afe5b88e40' }, this.text), hAsync("span", { key: 'deb83c9f7c1a9cfbb3f68ec087cae81d0f64a56b', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
     }
     static get style() { return dropiTooltipCss(); }
     static get cmpMeta() { return {
@@ -12161,7 +12169,7 @@ class DropiVerticalSteps {
             const state = this.resolveState(i, step);
             const isLast = i === steps.length - 1;
             const isClickable = this.clickable && state === 'completed';
-            return (hAsync("div", { class: { 'v-step': true, 'v-step--clickable': isClickable }, key: i, onClick: () => isClickable && this.stepClick.emit(i + 1) }, hAsync("div", { class: "v-step__indicator" }, hAsync("div", { class: { 'v-step__circle': true, [`v-step__circle--${state}`]: true } }, state === 'completed' && this.showCheckIcon ? (hAsync("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (hAsync("span", { class: "v-step__number" }, i + 1))), !isLast && hAsync("div", { class: { 'v-step__line': true, 'v-step__line--done': state === 'completed' } })), hAsync("span", { class: { 'v-step__label': true, [`v-step__label--${state}`]: true } }, step.label)));
+            return (hAsync("div", { class: { 'v-step': true, 'v-step--clickable': isClickable }, key: i, onClick: () => isClickable && this.stepClick.emit(i + 1) }, hAsync("div", { class: "v-step__indicator" }, hAsync("div", { class: { 'v-step__circle': true, [`v-step__circle--${state}`]: true } }, state === 'completed' && this.showCheckIcon ? (hAsync("dropi-icon", { name: "Check", iconWidth: "12px", iconHeight: "12px", color: "Neutral-White" })) : (hAsync("span", { class: "v-step__number" }, i + 1))), !isLast && hAsync("div", { class: { 'v-step__line': true, 'v-step__line--done': state === 'completed' } })), hAsync("span", { class: { 'v-step__label': true, [`v-step__label--${state}`]: true } }, step.label)));
         })));
     }
     static get style() { return dropiVerticalStepsCss(); }
@@ -12210,7 +12218,7 @@ class DropiYoutubeLazyVideo {
         return `https://www.youtube.com/embed/${this.videoId}?autoplay=1&rel=0&modestbranding=1`;
     }
     render() {
-        return (hAsync("div", { key: '0732bc87e7be10e422e80751a17527132301eb99', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (hAsync("div", { key: '540c46b66da3f67ec45614e0891827b7cc0be4e5', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, hAsync("img", { key: '843241c72688ca88ccd5d9391b542501575ea476', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), hAsync("button", { key: 'b068f79fb6b2140e1419e9d72a24f6e66eaab69d', class: "play-button", "aria-label": "Reproducir video" }, hAsync("dropi-icon", { key: 'ad254e3067ef72e2d97064cd47132cbf5961f06a', name: "Play", width: "17px", height: "21px", color: "Neutral-White" })))), this.isPlaying && (hAsync("iframe", { key: '5fd8f89fa322577b49e373710216b731685cb5f5', src: this.videoUrl, title: this.videoTitle, frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }))));
+        return (hAsync("div", { key: '0732bc87e7be10e422e80751a17527132301eb99', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (hAsync("div", { key: '540c46b66da3f67ec45614e0891827b7cc0be4e5', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, hAsync("img", { key: '843241c72688ca88ccd5d9391b542501575ea476', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), hAsync("button", { key: 'b068f79fb6b2140e1419e9d72a24f6e66eaab69d', class: "play-button", "aria-label": "Reproducir video" }, hAsync("dropi-icon", { key: 'b3b6d8b99583fd0a3c2c0d766beeda2459b8b13a', name: "Play", iconWidth: "17px", iconHeight: "21px", color: "Neutral-White" })))), this.isPlaying && (hAsync("iframe", { key: '42172a0c7bb386da9123b411af4ab5ebeb9e205c', src: this.videoUrl, title: this.videoTitle, frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }))));
     }
     static get style() { return dropiYoutubeLazyVideoCss(); }
     static get cmpMeta() { return {