@dropi/ui 0.1.37 → 0.1.42

package/hydrate/index.mjs

@@ -1770,9 +1770,9 @@ var createEvent = (ref, name, flags) => {
   return {
     emit: (detail) => {
       return emitEvent(elm, name, {
-        bubbles: !!(flags & 4 /* Bubbles */),
-        composed: !!(flags & 2 /* Composed */),
-        cancelable: !!(flags & 1 /* Cancellable */),
+        bubbles: true,
+        composed: true,
+        cancelable: true,
         detail
       });
     }
@@ -5341,7 +5341,7 @@ class DropiAccordion {
     /** Allows multiple sections to be open at the same time. If false, only one section can be open. */
     multiple = false;
     render() {
-        return (hAsync("div", { key: '15575b05adec26235378bb459cdf158bdabe2852', class: "accordion-container" }, hAsync("slot", { key: 'e5411aee85b69e50c777657b0cb2aa7d04d09fa4' })));
+        return (hAsync("div", { key: 'c8c70f9c2210e1bc6de7d0933f082a0d1c008837', class: "accordion-container" }, hAsync("slot", { key: '9fe1055ed6f5a2fc5c3e8dde47b694ea0acdbcb9' })));
     }
     static get style() { return dropiAccordionCss(); }
     static get cmpMeta() { return {
@@ -5399,7 +5399,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: '98de1df9b82f0e4e5e72702b7eaca12c0ed92586', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, hAsync("button", { key: 'bd5c3e6ea29feb33e5280908c98929369dc7377e', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, hAsync("span", { key: 'ced161eb1187d50b7eb2002081cd3fc008c9a16f', class: "accordion-header-left" }, this.preIcon && hAsync("dropi-icon", { key: '09a157623f0978153b57e85a79d7beeca3faf9ab', name: this.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), hAsync("span", { key: '649617f263370d1314e3145c07a3a29ce5c807b5', class: "accordion-title" }, this.sectionTitle)), hAsync("span", { key: 'd99e3933a40ffa4b1da8091a8b6d767011f1bf6f', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, hAsync("dropi-icon", { key: '3d12ae988429fea2612c0c32c12cd81a486ad255', name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))), hAsync("div", { key: 'cedff4803c6fa83ae9dc5cb3ce68f48150cdef67', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, hAsync("div", { key: 'a37dd42bf39cf08479d847286860e78a1d80a233', class: "accordion-content" }, hAsync("slot", { key: 'd797eac747716be1af2a6addbefe583be4a816b1' })))));
     }
     static get watchers() { return {
         "open": [{
@@ -5428,8 +5428,8 @@ const dropiAlertCss = () => `:host{display:block;width:100%}*,*::before,*::after
 
 const STATE_ICONS = {
     success: 'Check-circle',
-    error: 'Warning-circle',
-    warning: 'Warning-triangle',
+    error: 'Cross-circle',
+    warning: 'Warning-circle',
     info: 'Info',
 };
 const STATE_COLORS = {
@@ -5446,9 +5446,9 @@ const STATE_COLORS = {
 class DropiAlert {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onClose = createEvent(this, "onClose", 7);
-        this.onButtonClick = createEvent(this, "onButtonClick", 7);
-        this.onClickLink = createEvent(this, "onClickLink", 7);
+        this.dropiClose = createEvent(this, "dropiClose");
+        this.dropiButtonClick = createEvent(this, "dropiButtonClick");
+        this.dropiLinkClick = createEvent(this, "dropiLinkClick");
     }
     /** Alert message text (supports plain text) */
     message = '';
@@ -5463,9 +5463,9 @@ class DropiAlert {
     /** Action button label */
     buttonText = 'Close';
     /** Anchor/link label */
-    anchorText = 'none';
+    anchorText = '';
     /** Anchor href */
-    anchorUrl = 'none';
+    anchorUrl = '';
     /** Whether the alert is visible */
     showAlert = true;
     /** Link text (alternative to anchorText) */
@@ -5475,15 +5475,15 @@ class DropiAlert {
     /** Clicked text tracking */
     clickedText = '';
     /** Emitted when the alert is dismissed */
-    onClose;
+    dropiClose;
     /** Emitted when the action button is clicked */
-    onButtonClick;
+    dropiButtonClick;
     /** Emitted when the anchor link is clicked */
-    onClickLink;
+    dropiLinkClick;
     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", innerHTML: this.message }), this.clickedText && (hAsync("a", { class: "alert__link", href: "#", onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.clickedText)), (this.anchorText || this.textLink) && (hAsync("a", { class: "alert__link", href: this.anchorUrl || this.linkUrl || '#', onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.anchorText || this.textLink))), hAsync("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (hAsync("button", { class: "alert__btn", onClick: () => this.dropiButtonClick.emit() }, this.buttonText)), this.dismissable && (hAsync("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.dropiClose.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 {
@@ -5574,10 +5574,10 @@ const dropiAlertModalCss = () => `:host{display:contents}.body-alert{display:fle
 class DropiAlertModal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.primaryButtonEvent = createEvent(this, "primaryButtonEvent", 7);
-        this.secondaryButtonEvent = createEvent(this, "secondaryButtonEvent", 7);
-        this.modalOpenChange = createEvent(this, "modalOpenChange", 7);
-        this.onHide = createEvent(this, "onHide", 7);
+        this.dropiPrimaryClick = createEvent(this, "dropiPrimaryClick");
+        this.dropiSecondaryClick = createEvent(this, "dropiSecondaryClick");
+        this.dropiVisibleChange = createEvent(this, "dropiVisibleChange");
+        this.dropiHide = createEvent(this, "dropiHide");
     }
     /** Controls visibility */
     visible = false;
@@ -5608,6 +5608,10 @@ class DropiAlertModal {
     isStep = false;
     /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */
     baseZIndex = 0;
+    /**
+     * Use White Label (MB) illustration style instead of Lottie animation.
+     */
+    isWhiteLabel = false;
     /**
      * Convenience object prop — matches Angular `params: ModalParams`.
      * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,
@@ -5638,13 +5642,13 @@ class DropiAlertModal {
             this.displayButtons = val.displayButtons;
     }
     /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */
-    primaryButtonEvent;
+    dropiPrimaryClick;
     /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */
-    secondaryButtonEvent;
+    dropiSecondaryClick;
     /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */
-    modalOpenChange;
+    dropiVisibleChange;
     /** Emitted when modal is hidden — matches Angular 'onHide' */
-    onHide;
+    dropiHide;
     lottieMap = {
         question: '/assets/lottie-files/question.json',
         warning: '/assets/lottie-files/warning.json',
@@ -5663,26 +5667,26 @@ class DropiAlertModal {
         this.visible = false;
     }
     handlePrimary() {
-        this.primaryButtonEvent.emit(true);
+        this.dropiPrimaryClick.emit(true);
         if (!this.isStep) {
             this.visible = false;
-            this.modalOpenChange.emit(false);
+            this.dropiVisibleChange.emit(false);
         }
     }
     handleSecondary() {
-        this.secondaryButtonEvent.emit(true);
+        this.dropiSecondaryClick.emit(true);
         this.visible = false;
-        this.modalOpenChange.emit(false);
+        this.dropiVisibleChange.emit(false);
     }
     onModalHide() {
         this.visible = false;
-        this.modalOpenChange.emit(false);
-        this.onHide.emit();
+        this.dropiVisibleChange.emit(false);
+        this.dropiHide.emit();
     }
     render() {
         const lottieKey = this.loading ? 'loading' : this.type;
         const isLottieLoading = lottieKey === 'loading';
-        return (hAsync("dropi-modal", { key: '8581cbc944d42889228cb21fa27bf4e8b3bf1e16', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onOnHide: () => this.onModalHide() }, hAsync("div", { key: '7208cbe742dab77bcee14150998aff5647fd41af', class: "body-alert" }, this.lottieMap[lottieKey] && (hAsync("div", { key: '3b4d36963f8d6547556eee704823c8e34805b8d8', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, hAsync("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), hAsync("div", { key: 'dc52f3daec2eaf7ff9f1d51c90c67bcfaafe370f', class: "content-alert" }, hAsync("h2", { key: '685df4cb76145cf6e965dd94e5f3fe60f828100c' }, this.loading ? this.loadingTitle : this.tittle), hAsync("p", { key: 'f9e5b699816236148bc00c5046c6cc67eb86ae01' }, this.loading ? this.loadingMessage : this.message)), hAsync("div", { key: '2e9280865cad761bea5cdd88b972734c11ab7737', class: "custom-content" }, hAsync("slot", { key: '4fd36baa1455e7793a1e5291b52448707e3aa448' })), !this.loading && this.displayButtons && (hAsync("div", { key: '451bd3d90ec780499d9956a8a57a0d1461406fa9', class: "actions" }, this.secondaryButton && hAsync("dropi-button", { key: 'b60c30cc92cc080c01e1bf337a5e4b78f561be81', text: this.secondaryButton, severity: "secondary", onClick: () => this.handleSecondary(), fullWidth: true }), hAsync("dropi-button", { key: '2b8696a02b253d289a1baef2116cffe436346717', text: this.primaryButton, severity: "primary", onClick: () => this.handlePrimary(), fullWidth: true }))))));
+        return (hAsync("dropi-modal", { key: '322c59ea0a067a4c0cb28a5ffbe9cbc0c642eee6', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onDropiHide: () => this.onModalHide() }, hAsync("div", { key: '06530f3da45738d1ed75a4e8b5b8b0b80dfd2647', class: "body-alert" }, this.lottieMap[lottieKey] && (hAsync("div", { key: '7a4ab4fbbdf3cbbacfa22f918d212b788f4392a4', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, hAsync("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), hAsync("div", { key: '0e72f42d10c59047e82df8b2842affd38ab60fc7', class: "content-alert" }, hAsync("h2", { key: '8262de8fbcf5b87fbac34740d34d99d0b6ff921d' }, this.loading ? this.loadingTitle : this.tittle), hAsync("p", { key: 'ca9c734e0b9686bff7e2616ae98224446ac0ca33' }, this.loading ? this.loadingMessage : this.message)), hAsync("div", { key: '1b5edb3af1044cb0dd0b57a425517b1d824672be', class: "custom-content" }, hAsync("slot", { key: '57f4a8acdbcf8a11445f7c8233355bb4ac46c9ab' })), !this.loading && this.displayButtons && (hAsync("div", { key: '32580f42d98f628b4c1d1f300b5a3aaaa1be2486', class: "actions" }, this.secondaryButton && hAsync("dropi-button", { key: 'dcf8707a7f4d8b80126a10022dd6de1c0ea44dc7', text: this.secondaryButton, severity: "secondary", onDropiClick: () => this.handleSecondary(), fullWidth: true }), hAsync("dropi-button", { key: '3ed494fc7a83021174c4d006ae4327348d400e93', text: this.primaryButton, severity: "primary", onDropiClick: () => this.handlePrimary(), fullWidth: true }))))));
     }
     static get watchers() { return {
         "params": [{
@@ -5707,6 +5711,7 @@ class DropiAlertModal {
             "loadingMessage": [1025, "loading-message"],
             "isStep": [4, "is-step"],
             "baseZIndex": [2, "base-z-index"],
+            "isWhiteLabel": [4, "is-white-label"],
             "params": [8],
             "show": [64],
             "hide": [64]
@@ -5826,7 +5831,7 @@ class DropiBadgeLegacy {
     count = 0;
     render() {
         const isCounter = this.type === 'counter';
-        return (hAsync("div", { key: 'f3d7bf7be848acee4077acef4f8e2ab4cfd99d83', class: {
+        return (hAsync("div", { key: '58bb5c6625539109f010cccdcaafc37ab6da38ba', class: {
                 'badge-legacy': true,
                 [`badge-legacy--${this.variant}`]: true,
                 [`badge-legacy--${this.type}`]: true
@@ -5864,8 +5869,8 @@ const dropiBannerExternalCss = () => `:host{display:block;width:100%}.dropi-bann
 class DropiBannerExternal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.bannerClick = createEvent(this, "bannerClick", 7);
-        this.isVisible = createEvent(this, "isVisible", 7);
+        this.bannerClick = createEvent(this, "bannerClick");
+        this.isVisible = createEvent(this, "isVisible");
     }
     /** Image URL to display */
     imageUrl = '';
@@ -5911,7 +5916,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(); }
@@ -5948,7 +5953,7 @@ const dropiBreadcrumbCss = () => `:host{display:block}*,*::before,*::after{box-s
 class DropiBreadcrumb {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiNavigate = createEvent(this, "dropiNavigate", 7);
+        this.dropiNavigate = createEvent(this, "dropiNavigate");
     }
     /** Breadcrumb items (array or JSON string). Last item is rendered as current. */
     items = [];
@@ -5973,14 +5978,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(); }
@@ -5999,7 +6004,7 @@ class DropiBreadcrumb {
     }; }
 }
 
-const dropiButtonCss = () => `:host{display:inline-block}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:var(--font-weight-bold);min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease,     color 0.25s ease,     border-color 0.25s ease,     transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--font-size-s, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #ffffff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #ffffff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #ffffff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #ffffff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #ffffff)}.btn.secondary{background:var(--Neutral-White, #ffffff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
+const dropiButtonCss = () => `:host{display:inline-block;border:0}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:var(--font-weight-bold);min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease,     color 0.25s ease,     border-color 0.25s ease,     transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--font-size-s, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #ffffff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #ffffff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #ffffff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #ffffff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #ffffff)}.btn.secondary{background:var(--Neutral-White, #ffffff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:none !important;box-shadow:none !important;color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{background:var(--Gray-Gray-50, #f5f6f8);box-shadow:none !important;color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:none !important;color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
 
 /**
  * @component dropi-button
@@ -6009,7 +6014,7 @@ const dropiButtonCss = () => `:host{display:inline-block}:host([full-width]){dis
 class DropiButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onClick = createEvent(this, "onClick", 7);
+        this.dropiClick = createEvent(this, "dropiClick");
     }
     /** Visual color palette */
     type = 'default';
@@ -6030,7 +6035,7 @@ class DropiButton {
     /** Button label */
     text = '';
     /** Emitted on click (not emitted when disabled or loading) */
-    onClick;
+    dropiClick;
     colorMap = {
         default: 'Primary-Primary-',
         success: 'Success-Success-',
@@ -6062,7 +6067,7 @@ class DropiButton {
     }
     handleClick(e) {
         if (this.state !== 'disabled' && this.state !== 'loading') {
-            this.onClick.emit(e);
+            this.dropiClick.emit(e);
         }
     }
     renderLoadingSpinner() {
@@ -6073,7 +6078,7 @@ class DropiButton {
         const hasText = (this.text ?? '') !== '';
         const showPostIcon = (this.postIcon ?? '') !== '' || (this.type ?? 'default') === 'dropdown';
         const dropdownIcon = (this.type ?? 'default') === 'dropdown' ? 'Dropdown-down' : (this.postIcon ?? '');
-        return (hAsync("button", { key: 'a8771ab61e78941d1bfd7b987a02dfe2e9d22a31', class: {
+        return (hAsync("button", { key: 'eefda6c7ac5090173a545d67e72073dc410ff05c', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity ?? 'primary']: true,
@@ -6081,7 +6086,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: '869ee8fc34dee93de0381a86db643c0fa9dc6918', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && hAsync("span", { key: '927ef142b4c549d01b087722e9f6759cff44e6b2', class: "text" }, this.text), showPostIcon && (hAsync("dropi-icon", { key: 'cda1f5d0fa59a87abc1d3d73a87d4390f05f79eb', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), hAsync("slot", { key: 'c83dd79efe5d858361815878192c0c554a9234ca' })));
     }
     static get style() { return dropiButtonCss(); }
     static get cmpMeta() { return {
@@ -6121,7 +6126,7 @@ const dropiCardCheckboxCss = () => `:host{display:block;width:100%}*,*::before,*
 class DropiCardCheckbox {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChange = createEvent(this, "onChange", 7);
+        this.dropiChange = createEvent(this, "dropiChange");
     }
     /** Visual type — matches Angular: 'default' | 'with card' */
     type = 'default';
@@ -6138,7 +6143,7 @@ class DropiCardCheckbox {
     /** Disables interaction */
     disabled = false;
     /** Emitted with the new checked state when clicked */
-    onChange;
+    dropiChange;
     get isChecked() {
         return this.state === 'checked';
     }
@@ -6146,15 +6151,15 @@ class DropiCardCheckbox {
         if (this.disabled)
             return;
         this.state = this.isChecked ? 'default' : 'checked';
-        this.onChange.emit(this.isChecked);
+        this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (hAsync("div", { key: '238a146e7500efbc01d83a8494ee577fbb600729', class: {
+        return (hAsync("div", { key: 'b9004c813a03956904cfed8484cac2d8290be86f', class: {
                 'container-card-check': true,
                 'default-card': this.type === 'default',
                 'is-checked': this.isChecked && this.type === 'with card',
                 'disabled': this.disabled,
-            }, onClick: () => this.handleClick() }, hAsync("dropi-checkbox", { key: '405d834de33790be58fba7e50b0e579889f04394', checked: this.isChecked, disabled: this.disabled }), hAsync("div", { key: '49659771de9ca8ee8c2fa9fbe828a1d94fbd3c9e', class: "container-text" }, hAsync("div", { key: '7d39435ef56cd61605e9d9b69d6917e3ec8470fa', class: "title-check" }, this.title), this.description && hAsync("div", { key: '00a7723401979d7a9d926ce939eb09430ddb7372', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (hAsync("div", { key: '4d1c9e49f6e397f0433827960167ff88bcd669db', class: "extra-info" }, this.extraInfo && hAsync("div", { key: 'b9da8514c2013cd6cab9cf6005dad8d3ae30b930' }, this.extraInfo), this.extraInfoDescription && hAsync("h4", { key: 'ac2fcbc6359ea173911f181b2a145de59af10c9d' }, this.extraInfoDescription)))));
+            }, onClick: () => this.handleClick() }, hAsync("dropi-checkbox", { key: '0c5c50811559c6472173fced2f04eee4626f118f', checked: this.isChecked, disabled: this.disabled }), hAsync("div", { key: '1cb17bf8aea55a498d451922942b4fba6d99492c', class: "container-text" }, hAsync("div", { key: '6e2eab2ae82c13cb4e7a654cc989530cee1122c6', class: "title-check" }, this.title), this.description && hAsync("div", { key: '040e5d8f633975bf3eb806835aae8aa308b1d4f8', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (hAsync("div", { key: 'a5c794b5f2fa249b309b2fb00a759aea5b9e0d6c', class: "extra-info" }, this.extraInfo && hAsync("div", { key: '1587e1a0801312fa8e759af2a367b36f842e1354' }, this.extraInfo), this.extraInfoDescription && hAsync("h4", { key: '930811071657dfbbeff7c2bdc4cd2c2776d38177' }, this.extraInfoDescription)))));
     }
     static get style() { return dropiCardCheckboxCss(); }
     static get cmpMeta() { return {
@@ -6184,10 +6189,10 @@ const dropiCardProductCss = () => `:host{display:block;font-family:'Inter', sans
 class DropiCardProduct {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onProductClick = createEvent(this, "onProductClick", 7);
-        this.changeFavorite = createEvent(this, "changeFavorite", 7);
-        this.dropiAddProduct = createEvent(this, "dropiAddProduct", 7);
-        this.dropiSupplierClick = createEvent(this, "dropiSupplierClick", 7);
+        this.dropiProductClick = createEvent(this, "dropiProductClick");
+        this.dropiFavoriteChange = createEvent(this, "dropiFavoriteChange");
+        this.dropiAddProduct = createEvent(this, "dropiAddProduct");
+        this.dropiSupplierClick = createEvent(this, "dropiSupplierClick");
     }
     /** Product image URL */
     image = '';
@@ -6214,9 +6219,9 @@ class DropiCardProduct {
     /** Show "Enviar a cliente" button */
     showAddButton = true;
     /** Emitted when card is clicked — matches Angular 'onProductClick' */
-    onProductClick;
+    dropiProductClick;
     /** Emitted when favorite toggled — matches Angular 'changeFavorite' */
-    changeFavorite;
+    dropiFavoriteChange;
     /** Emitted when "Enviar a cliente" button clicked */
     dropiAddProduct;
     /** Emitted when supplier name clicked */
@@ -6237,17 +6242,17 @@ class DropiCardProduct {
         return 'var(--Success-Success-500, #0abb87)';
     }
     render() {
-        return (hAsync("div", { key: '42990ea883dcd6cc72e1f62771f7b9554c36bdba', class: "dropi-card-product", onClick: () => this.onProductClick.emit() }, hAsync("div", { key: '59295427ddc350ec3c70d7d1bd4803ffa6bf26b0', class: "product-image-container" }, hAsync("div", { key: '9d10e18f2eadf16f0c0b1b7cb7860d08f2ca778f', class: "product-image" }, hAsync("img", { key: '19f7af8eddcbea880d32ef30603d55bfe9337f17', src: this.image || '', alt: this.productName, onError: (e) => {
+        return (hAsync("div", { key: '2fe4ce42e1c331a99fd1171c82e6e48bfb5dbff0', class: "dropi-card-product", onClick: () => this.dropiProductClick.emit() }, hAsync("div", { key: '3f94077ee059e347f3ff4fff808a3a3f3a0ac827', class: "product-image-container" }, hAsync("div", { key: '1d6e8181cc630ab03efc90e316c349dfe9765b46', class: "product-image" }, hAsync("img", { key: 'f6647c21ac24d378482c6e6fe5220d6d18ff694b', src: this.image || '', alt: this.productName, onError: (e) => {
                 e.target.src = './assets/utils/no-image.jpg';
-            }, class: !this.image ? 'error-img' : '' }), this.showFavorite && (hAsync("button", { key: 'a6e13eea7c211fd772fe5ee7c13c7d475d54986c', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
+            }, class: !this.image ? 'error-img' : '' }), this.showFavorite && (hAsync("button", { key: '37c23af5e1345e2f2b2ac42dd38f88eb17254889', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
                 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) => {
+                this.dropiFavoriteChange.emit(this.isFavorite);
+            }, "aria-label": "Favorito" }, hAsync("dropi-icon", { key: 'c6d6c87dcb5ae0f9a0d416667a3d39c7e153b7a6', name: this.isFavorite ? 'Heart-solid' : 'Heart', iconWidth: "18px", iconHeight: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), hAsync("div", { key: '66dbcb028acb35e9a43502e9ff9a00fd2ebf8bf2', class: "product-info" }, this.supplierCategory && (hAsync("dropi-ilustration-icon", { key: 'fd3d94e953a6b91418decc09ed426755a85bac1b', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), hAsync("div", { key: '45817e3bb0bfdaa0ec8cb4a23fdac1bb943e93dc', class: "product-header" }, this.category && (hAsync("span", { key: 'c721519a5339a2ac40d20c283bbe8797b78e4b27', class: "category" }, this.category)), hAsync("div", { key: '49f5013738dfffcdb83dfde628f5d1d21164c3d2', class: "stock-info" }, hAsync("span", { key: 'bd49d5069d07b3ae10ac9c85a4b84bbb573f926e', class: "stock-label" }, "Stock:"), hAsync("span", { key: 'd0eefb88240c13c9c56e7470e79cbacc9d86caf4', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), hAsync("h3", { key: 'a880d0df13af0b75d553daf18e876905b93e6ef1', class: "product-name" }, this.productName), this.supplier && (hAsync("div", { key: 'faa82e269979084e7510b6a17fb1f3caee8ad181', class: "supplier-info" }, hAsync("span", { key: 'b4b223620c58cb30945b1c6be50559614937eb5f', class: "supplier-label" }, "Proveedor:"), hAsync("span", { key: '989580f42383c3b6adb6484a493d1293a2a11904', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), hAsync("div", { key: '451c1ab830c7ab38c4e414e94f11f63ffcf86162', class: "price-container" }, hAsync("div", { key: '755f3f8aac6f7b1d458d28b74dec2734b42794a6', class: "price-item" }, hAsync("span", { key: 'fff0a718b4f22641adcd28bbcb7e81a0f21755e9', class: "price-label" }, "Precio proveedor"), hAsync("span", { key: '5bb6843a4a293195f0dbda5c3eccfc4f38c719b1', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), hAsync("div", { key: '468b1d7596ec5d727846a087b5d89461c5fef858', class: "price-item" }, hAsync("span", { key: '91b15e4d58d27997b2dfdb9c73fd417a8f8ba5fb', class: "price-label" }, "Precio sugerido"), hAsync("span", { key: '378483760ffac07491f5b65b37d5e27d41423ec5', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), hAsync("div", { key: '71467832049894083ea3454618a12d082cb15844', class: "separator" }), this.showAddButton && (hAsync("div", { key: 'f9f0450e3dfa2b91ae7caa468811cc739d7a280e', 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: '50a9fad974460c2728fb1fca74628d093cbb1875', name: "Shopping-cart-arrow-rigth", iconWidth: "20px", iconHeight: "20px", color: "#f49a3d" }), hAsync("span", { key: 'f5ac44dd20e01bc644e863c3cbf51e3493821e70', class: "button-text" }, "Enviar a cliente")))));
     }
     static get style() { return dropiCardProductCss(); }
     static get cmpMeta() { return {
@@ -6282,8 +6287,8 @@ const dropiCardSectionCss = () => `:host{display:block;width:100%}*,*::before,*:
 class DropiCardSection {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChange = createEvent(this, "onChange", 7);
-        this.onClick = createEvent(this, "onClick", 7);
+        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiClick = createEvent(this, "dropiClick");
     }
     /** Section title — matches Angular 'title' */
     title = 'title';
@@ -6296,16 +6301,16 @@ class DropiCardSection {
     /** Switch checked state */
     isChecked = false;
     /** Emitted when switch changes */
-    onChange;
+    dropiChange;
     /** Emitted when dropdown icon is clicked */
-    onClick;
+    dropiClick;
     render() {
-        return (hAsync("div", { key: 'aa7548c223bf3238b7af10e52821e3ffd19fefca', class: "card-section" }, hAsync("div", { key: '6b0ed1e7f7c282b0f67277567a2fa1ffbab9d04e', class: "card-section__text" }, this.type === 'important'
+        return (hAsync("div", { key: '06fe2a580fb23484419ea4b1c41a265facb722de', class: "card-section" }, hAsync("div", { key: '1020ea256b0311a200a721387b3ecb8d0f3809ab', class: "card-section__text" }, this.type === 'important'
             ? hAsync("h5", { class: "card-section__title card-section__title--important" }, this.title)
-            : 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) => {
+            : hAsync("h6", { class: "card-section__title" }, this.title), this.description && hAsync("p", { key: '52ea93b6b2736c4c6e3ebb953c2878db90d34b4c', class: "card-section__desc" }, this.description)), hAsync("div", { key: '7ec0ed96e43b45256fd5dec5ee24b0dfd6488403', class: "card-section__control" }, this.typeElement === 'switch' ? (hAsync("dropi-switch", { isChecked: this.isChecked, onDropiChange: (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" }))))));
+                this.dropiChange.emit(e.detail);
+            } })) : (hAsync("button", { class: "card-section__dropdown-btn", onClick: () => this.dropiClick.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 {
@@ -6329,8 +6334,8 @@ const dropiCarouselCss = () => `:host{display:block;width:100%}*,*::before,*::af
 class DropiCarousel {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.pageChange = createEvent(this, "pageChange", 7);
-        this.onPage = createEvent(this, "onPage", 7);
+        this.dropiPageChange = createEvent(this, "dropiPageChange");
+        this.dropiPage = createEvent(this, "dropiPage");
     }
     get el() { return getElement(this); }
     /** Items to display (Array of URLs or objects) */
@@ -6357,8 +6362,8 @@ class DropiCarousel {
     totalPages = 0;
     itemsContainer;
     timer;
-    pageChange;
-    onPage;
+    dropiPageChange;
+    dropiPage;
     handleValue(val) {
         this.parsedValue = typeof val === 'string' ? JSON.parse(val) : (val || []);
         this.updateTotalPages();
@@ -6430,7 +6435,7 @@ class DropiCarousel {
             this.internalPage = (this.internalPage + 1) % this.totalPages;
             this.page = this.internalPage;
             this.updateTransform();
-            this.pageChange.emit(this.internalPage);
+            this.dropiPageChange.emit(this.internalPage);
             setTimeout(() => (this.isAnimating = false), 500);
         }
     };
@@ -6442,7 +6447,7 @@ class DropiCarousel {
             this.internalPage = (this.internalPage - 1 + this.totalPages) % this.totalPages;
             this.page = this.internalPage;
             this.updateTransform();
-            this.pageChange.emit(this.internalPage);
+            this.dropiPageChange.emit(this.internalPage);
             setTimeout(() => (this.isAnimating = false), 500);
         }
     };
@@ -6451,7 +6456,7 @@ class DropiCarousel {
         this.internalPage = index;
         this.page = this.internalPage;
         this.updateTransform();
-        this.pageChange.emit(this.internalPage);
+        this.dropiPageChange.emit(this.internalPage);
         setTimeout(() => (this.isAnimating = false), 500);
     }
     render() {
@@ -6504,27 +6509,27 @@ const dropiCheckboxCss = () => `:host{display:inline-block}*,*::before,*::after{
 class DropiCheckbox {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChange = createEvent(this, "onChange", 7);
+        this.dropiChange = createEvent(this, "dropiChange");
     }
     /** Whether the checkbox is checked */
     checked = false;
     /** Whether the checkbox is disabled */
     disabled = false;
     /** Emitted when the checked state changes */
-    onChange;
+    dropiChange;
     changeState() {
         if (this.disabled)
             return;
         this.checked = !this.checked;
-        this.onChange.emit(this.checked);
+        this.dropiChange.emit(this.checked);
     }
     render() {
-        return (hAsync("div", { key: 'fdc1c54733617c0dab1ae11050d90650dc3eba91', class: "container-dropi-checkbox", onClick: () => this.changeState() }, hAsync("div", { key: '6329c1a53e8b9f85ea26ca01afb920583570e85f', class: {
+        return (hAsync("div", { key: '071505574decbf6b138256f73affe101c01080ef', class: "container-dropi-checkbox", onClick: () => this.changeState() }, hAsync("div", { key: '03e7ec24a87e22c4a5fe1d94cc4ca1fe349d6e6f', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, hAsync("svg", { key: '50b1ebd160e1ee6b28ef23651f1e12afc9406f8a', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, hAsync("path", { key: '518070eaa2902d4cdc5e905f8a80d06b3d044f3d', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
+            } }, hAsync("svg", { key: 'c56f01268919995cc7aac0173edf44a01a62e13e', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, hAsync("path", { key: '575f863c9e82e862ea7049bf633b0d86ba374bb2', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
     }
     static get formAssociated() { return true; }
     static get style() { return dropiCheckboxCss(); }
@@ -6550,8 +6555,8 @@ const dropiCheckboxSelectionListCss = () => `:host{display:block;width:100%}*,*:
 class DropiCheckboxSelectionList {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.checkedValues = createEvent(this, "checkedValues", 7);
-        this.onSearch = createEvent(this, "onSearch", 7);
+        this.dropiCheckedValues = createEvent(this, "dropiCheckedValues");
+        this.dropiSearch = createEvent(this, "dropiSearch");
     }
     /** Options array or JSON string */
     options = [];
@@ -6571,9 +6576,9 @@ class DropiCheckboxSelectionList {
     selected = [];
     parsedOptions = [];
     /** Emitted when selection changes — matches Angular 'checkedValues' */
-    checkedValues;
+    dropiCheckedValues;
     /** Emitted on search — matches Angular 'onSearch' */
-    onSearch;
+    dropiSearch;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -6593,14 +6598,14 @@ class DropiCheckboxSelectionList {
         else {
             this.selected = this.selected.includes(id) ? [] : [id];
         }
-        this.checkedValues.emit(this.selected);
+        this.dropiCheckedValues.emit(this.selected);
     }
     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: '95774833547807d6001525158bf199883661b649', class: "csl" }, this.showFilter && (hAsync("div", { key: '13f6bfd33150cdf138e90b93fc8121dfcc311050', class: "csl__search" }, hAsync("dropi-icon", { key: '4edf5c21eeac0aa442e58845621b7715d8484c1b', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: '40071d0c189c7fd1f1bf8090ebe1d64ce9605602', 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.dropiSearch.emit(this.filterText);
+            } }), this.filterText && (hAsync("button", { key: 'a560cab7ce53e57e036696194054286aa1dd6fd9', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, hAsync("dropi-icon", { key: 'f1ae7e38fcb954761edb02bb32af139fb5eea610', name: "Close-small", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" }))))), hAsync("div", { key: 'e93dfccc8215e96640ebe8c69f33f0bff5f655f2', 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)));
         })))));
@@ -6642,7 +6647,7 @@ const dropiChipsCss = () => `:host{display:inline-flex}*,*::before,*::after{box-
 class DropiChips {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onClose = createEvent(this, "onClose", 7);
+        this.dropiClose = createEvent(this, "dropiClose");
     }
     /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */
     customStyle = 'fill';
@@ -6655,9 +6660,9 @@ class DropiChips {
     /** Icon name (when type = 'icon') */
     icon = '';
     /** Emitted when the close icon is clicked */
-    onClose;
+    dropiClose;
     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: '394a3ff5219535e9f4e1d6c9fbb320c32f1ce2e7', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (hAsync("img", { key: 'c7ea7ce319e2ab0a179f7b0b61ad9fe39be7c1ec', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (hAsync("dropi-icon", { key: '67e2edfbe37af83868a665cf65a85ecc27b7cfb5', class: "chip__pre-icon", name: this.icon, iconWidth: "14px", iconHeight: "14px", color: "currentColor" })), hAsync("span", { key: '1916b1796d69cf6742177b8f4013315323bdf16f', class: "chip__text" }, hAsync("slot", { key: '167e1b230b1c4406ba3f40ba7783966c6b523c96' })), this.showIcon && (hAsync("button", { key: '118d46db1615e9ed14485500b5a754407c361139', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, hAsync("dropi-icon", { key: '1639e4ae068d0361512469d2915b392101b2b923', name: "Cross-circle", iconWidth: "14px", iconHeight: "14px", color: "currentColor" })))));
     }
     static get style() { return dropiChipsCss(); }
     static get cmpMeta() { return {
@@ -6692,7 +6697,7 @@ const dropiCitySelectorCss = () => `:host{display:block;width:100%;position:rela
 class DropiCitySelector {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.selectedCitiesChange = createEvent(this, "selectedCitiesChange", 7);
+        this.selectedCitiesChange = createEvent(this, "selectedCitiesChange");
     }
     /** Grouped city options (array or JSON string) */
     options = [];
@@ -6770,9 +6775,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 {
@@ -6808,7 +6813,7 @@ const dropiColorPickerCss = () => `:host{display:block}.general-container{positi
 class DropiColorPicker {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.colorChange = createEvent(this, "colorChange", 7);
+        this.colorChange = createEvent(this, "colorChange");
     }
     get el() { return getElement(this); }
     currentColor = '#ffffff';
@@ -7104,10 +7109,10 @@ class DropiColorPicker {
         }
     }
     render() {
-        return (hAsync("div", { key: '2ee2bd6abd837388d8169961f6b1024da228b453', class: "general-container" }, hAsync("div", { key: '15416c1a844daf774dda53f1c08bbe6b15435b64', class: "main-input-container" }, hAsync("div", { key: 'e08aacd3ebb059a8467cf6f597d2b3bb3419e286', class: "overlay", onClick: () => this.showEditor() }), hAsync("div", { key: 'dda8addee7afb351fb1f6c18dda516d29259220d', class: "line-color-preview" }, hAsync("div", { key: 'b242eac802dc0c1d0a9965fb6fc9b6f010408ae2', class: "color-preview", style: { background: this.currentColor } })), hAsync("div", { key: '8dddc6632dddae52cc58d964ee50cae1e6460b12', class: "color-info" }, hAsync("input", { key: '7181e30bddae8005260d285653425cd5cad2386e', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), hAsync("div", { key: '0ad3b547299fc1a4ccab9ddb7efebd7962fd7855', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, hAsync("div", { key: 'c49847d5a6ca7a90f27889afe26f6c30c1959676', class: "main-color-canvas-container" }, hAsync("canvas", { key: '44531a25415492782d70d070aacf17797f9e3818', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), hAsync("div", { key: '325bc14afacafa6dddd0a9bc837c6448ff803bd8', class: "color-selector-pointer", style: {
+        return (hAsync("div", { key: '18ea41f637e46cb88d57cb2bc513f5e6e3ef9617', class: "general-container" }, hAsync("div", { key: '653748e883bc4deaf05739ced8e516f857a7a26b', class: "main-input-container" }, hAsync("div", { key: 'b8a4e60b25d6017c3987fa4ea3420c78e3400db0', class: "overlay", onClick: () => this.showEditor() }), hAsync("div", { key: 'e22f4b3e95f099e2444a46ee560fefb9f6556b65', class: "line-color-preview" }, hAsync("div", { key: 'cf513dbb5ee9652a6d20aad0608508cae3e000af', class: "color-preview", style: { background: this.currentColor } })), hAsync("div", { key: '025b264ae8aca0fca79f662c58250eea43ccf0e7', class: "color-info" }, hAsync("input", { key: '60a379b53bd0cf0bb1f80d5e1bd5b4c4038686f9', type: "text", class: "color-input", value: this.currentColor, maxLength: 9, readOnly: true }))), hAsync("div", { key: '06e15b97ba156a9aa9dec9f60f2b24c924c0ac53', class: `color-picker-container position-${this.position} ${this.showEdit ? 'show' : ''}` }, hAsync("div", { key: 'ea9df13cdf62ae1378b600dc7689df61bec5fc9b', class: "main-color-canvas-container" }, hAsync("canvas", { key: '5d73426ccfcccca44102300588472fe5e54744f9', ref: (el) => this.colorCanvas = el, width: 256, height: 150, onMouseDown: (e) => this.onColorMouseDown(e) }), hAsync("div", { key: 'e710e7f8c1558ad20dcfb0f03c98969d9aee5e91', class: "color-selector-pointer", style: {
                 left: `${(this.saturation / 100) * 256}px`,
                 top: `${((100 - this.currentVal) / 100) * 150}px`
-            } })), hAsync("div", { key: 'ab6d2a987b4c317fa218e70a1602ea829505fe0a', class: "slider-container" }, hAsync("div", { key: 'fe9ae897de10c04322653870cb9e5b79f61a2b86', class: "slider-group" }, hAsync("div", { key: 'f39f1935c0410509f6ecbf69b718730201d70be7', class: "hue-slider-container" }, hAsync("canvas", { key: '6a08c8dd36f3c9d70aa0f0438006bc4efa4df401', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), hAsync("div", { key: 'a91a4f4469e3152b24bf1e7dfd3d4738eb17f661', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), hAsync("div", { key: '2a45b1e24dcb447e515d8dbfac2ecd4032661af8', class: "slider-group" }, hAsync("div", { key: 'ec945cd912ecf046ca16e7520bae48d3e998f8fd', class: "opacity-slider-container" }, hAsync("canvas", { key: 'f181f9a8b16274d94377f3dd300c3bff231088df', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), hAsync("div", { key: '2e246b9e62991569c60024ac4f8b1ae32543e03e', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), hAsync("div", { key: 'c8c539dda06f8ce70b4c669a32e56cb693132f49', class: "color-info" }, hAsync("div", { key: '5939e97e1331e57a5837e868ea6088b069e3c3eb', class: "color-label" }, "HEX"), hAsync("input", { key: '321cebcb041223d4cb6c072f310720edcdb2391c', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
+            } })), hAsync("div", { key: '239c7986572fade46b913629bbd374ec6f15e6fb', class: "slider-container" }, hAsync("div", { key: '35c4231f321c42fa95f362da5bf211daf1671c79', class: "slider-group" }, hAsync("div", { key: '20be2dc7eff210e31ab3215da10473a23db921f1', class: "hue-slider-container" }, hAsync("canvas", { key: '0795238e2a59747c4bfbd3437a2a2fd9396dc9e2', ref: (el) => this.hueCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onHueMouseDown(e) }), hAsync("div", { key: '17296210ecef2a958a46f23971a04da61d59402e', class: "slider-pointer", style: { left: `${(this.hue / 360) * 234}px` } }))), hAsync("div", { key: 'af7504663561d0e811ae7ef163cce80cfa256187', class: "slider-group" }, hAsync("div", { key: '7f3f01cfb0e4ca93403dad15787ab8acd7c1cd82', class: "opacity-slider-container" }, hAsync("canvas", { key: '9bac8eca65bfba529748eb9788fc749b87115ca6', ref: (el) => this.opacityCanvas = el, width: 256, height: 20, onMouseDown: (e) => this.onOpacityMouseDown(e) }), hAsync("div", { key: '34166bf45efd6f4148395ede39680164662f8a33', class: "slider-pointer", style: { left: `${(this.opacity / 100) * 234}px` } }))), hAsync("div", { key: 'b43c40db224a560adb19fd91a8790efe11719ff9', class: "color-info" }, hAsync("div", { key: 'aad6ef925f30835b5d8f51d23f872560bcb62360', class: "color-label" }, "HEX"), hAsync("input", { key: 'bdb5fd6ca689251a7c566f32bc6c308873117b2c', type: "text", class: "color-input", value: this.color, onInput: (e) => this.onHexInputChange(e), maxLength: 9 }))))));
     }
     static get watchers() { return {
         "value": [{
@@ -7168,7 +7173,7 @@ class DropiCountryFlags {
             style['width'] = this.width.includes('px') ? this.width : `${this.width}px`;
         if (this.height)
             style['height'] = this.height.includes('px') ? this.height : `${this.height}px`;
-        return (hAsync("figure", { key: '924adeb5372e2c02ce1c0471a162b57fc53616bd', class: `flag ${this.customStyle ?? 'flat'}` }, hAsync("img", { key: '8433b69bbfc51aa5e72f8bd7166382e1d7907cfa', src: this.src, style: style, alt: `flag-${this.country}` })));
+        return (hAsync("figure", { key: '451765b675d5b27dc0357a1a2b6dd338690361c8', class: `flag ${this.customStyle ?? 'flat'}` }, hAsync("img", { key: 'f58a64e7d78298d328be2ba625c852a5eddc392f', src: this.src, style: style, alt: `flag-${this.country}` })));
     }
     static get style() { return dropiCountryFlagsCss(); }
     static get cmpMeta() { return {
@@ -7289,7 +7294,7 @@ const COUNTRIES$1 = [
 class DropiCountrySelector {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChangeSelect = createEvent(this, "onChangeSelect", 7);
+        this.dropiChange = createEvent(this, "dropiChange");
     }
     /** Label above the select */
     label = '';
@@ -7313,7 +7318,7 @@ class DropiCountrySelector {
      */
     selectProperties = null;
     /** Emitted when a country is selected. Detail is the CountryItem. */
-    onChangeSelect;
+    dropiChange;
     isOpen = false;
     selected = null;
     get el() { return getElement(this); }
@@ -7365,14 +7370,14 @@ class DropiCountrySelector {
         this.isOpen = false;
         this.searchTerm = '';
         this.currentSelection = country.code;
-        this.onChangeSelect.emit(country);
+        this.dropiChange.emit(country);
     }
     render() {
-        return (hAsync("div", { key: '78179f7b5e30c4eb7d5345431f476f625a60534a', class: "custom-select" }, this.label && (hAsync("label", { key: '13566e714a55c3820facffab298a97fc37c97133' }, this.label, this.showObligatory && hAsync("span", { key: '7772ddd762bd50da043ed030b5a3442e10de47b0', class: "required" }, "*"))), hAsync("button", { key: '649759c1d921318a48fd1abf8e71977d52b6ae2d', type: "button", class: {
+        return (hAsync("div", { key: '036ea5668f8ff842f69f13c9d94000ecdc96126b', class: "custom-select" }, this.label && (hAsync("label", { key: '457b2a26a2e9ea425aa95a2a162f2f3e547376e3' }, this.label, this.showObligatory && hAsync("span", { key: 'fc2b04e48d9372e0e5c1f593e57797558dc2e359', class: "required" }, "*"))), hAsync("button", { key: '0239ee64b4859e45a9b8dcff0e175124d16cdc09', type: "button", class: {
                 '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: 'dd468a1977089ada40f93e1e76f0d55349c5f80d', 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: '397055b90b0dab05effdcd2bc26a9839f963fa89', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), hAsync("ul", { key: 'cac3fd861f38331eb4fada4f65ee897d1017cc52', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, hAsync("li", { key: '0ccd958e816ff47fd53647d59f078483c7dbb3eb', class: "search-li" }, hAsync("div", { key: '7ad42859a5743aa27aea9a001f1424e50cdc9f60', class: "search-field" }, hAsync("input", { key: 'cb599f62e811383caeda0e329b688123f74fa571', 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: 'c60f6af4051d721a9c4c9b09f562f80d72a538eb', class: "search-icon" }, hAsync("dropi-icon", { key: '93477b3d42c8022424ea886820db795c5dc1194a', 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: 'e8fd998ffea654db0bac5e91b40ebd221781b12d', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && hAsync("dropi-icon", { key: 'c7a334f5c2813cd0c4db5c8d36157b14ed2bdb11', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '04c7b006f67d6a4a3564fbe39c214f2fe9708cb4' }, this.textHelper)))));
     }
     static get watchers() { return {
         "currentSelection": [{
@@ -7420,9 +7425,9 @@ const DAYS_ES = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
 class DropiDatePicker {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChangeDate = createEvent(this, "onChangeDate", 7);
-        this.onClosePanel = createEvent(this, "onClosePanel", 7);
-        this.dropiRangeChange = createEvent(this, "dropiRangeChange", 7);
+        this.dropiChangeDate = createEvent(this, "dropiChangeDate");
+        this.dropiClosePanel = createEvent(this, "dropiClosePanel");
+        this.dropiRangeChange = createEvent(this, "dropiRangeChange");
     }
     /** Selected date (ISO string, single mode) - matches Angular 'selectedDate' */
     selectedDate = '';
@@ -7457,9 +7462,9 @@ class DropiDatePicker {
         }
     }
     /** Emitted when date selected — matches Angular 'onChangeDate' */
-    onChangeDate;
+    dropiChangeDate;
     /** Emitted when panel closes — matches Angular 'onClosePanel' */
-    onClosePanel;
+    dropiClosePanel;
     /** Emitted when range selected */
     dropiRangeChange;
     get displayValue() {
@@ -7529,7 +7534,7 @@ class DropiDatePicker {
         if (this.selectionMode !== 'range') {
             this.selectedDate = iso;
             this.open = false;
-            this.onChangeDate.emit(iso);
+            this.dropiChangeDate.emit(iso);
             return;
         }
         // Range mode
@@ -7581,12 +7586,12 @@ class DropiDatePicker {
     render() {
         const days = this.buildDays();
         const today = new Date().toISOString().slice(0, 10);
-        return (hAsync("div", { key: 'ff426d80bb5bf05ca8b0c27773dee52f13cf4090', class: "dp-wrap" }, this.label && hAsync("label", { key: 'fc7ebd6f14227533288b02c95933f6d4833e3f51', class: "dp-label" }, this.label), hAsync("button", { key: '2fa9b1f3d2c9bfc4876724492a265ff0b29f8d23', class: {
+        return (hAsync("div", { key: '0c3cb89d77d6d8e7d3f955354d6be4b7a1f507fb', class: "dp-wrap" }, this.label && hAsync("label", { key: '672ad3d08337ed0df7c7e7d582ba8fe5af8d2b23', class: "dp-label" }, this.label), hAsync("button", { key: '848428a5ce236b37e8e988223c9ef8bd91ea16b3', class: {
                 'dp-trigger': true,
                 '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: 'c51b9238996ec454f64f53d4e9ede35bf494fd95', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("span", { key: 'b34ed963710695296a2986b0e790457b90a3ee60', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder), hAsync("dropi-icon", { key: '8cbefce39dab39a5cba941f4538f46cf97db1c06', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })), this.open && (hAsync("div", { key: '36a5db42655b136cee1abf31bb5e206a6d118beb', class: "dp-popup" }, hAsync("div", { key: '456c2778f035fae19450841baa20df5092f6dca4', class: "dp-nav" }, hAsync("button", { key: '8f05a6aa4e1f4e0dda08ee9dad89f189c130eef0', class: "dp-nav__btn", onClick: () => this.prevMonth(), type: "button" }, hAsync("dropi-icon", { key: '41f4e9b157e56669fa179cfed62d960ff1eadfd6', name: "Arrow-Left-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), hAsync("span", { key: '53556f3a356e1d2b63b59d4edda40ddf5fda9e5f', class: "dp-nav__title" }, hAsync("span", { key: '4bad1d735d4235b2ddaac33f3fa8f6335e753984' }, MONTHS_ES[this.viewMonth]), hAsync("span", { key: 'c7af6bb7edc5dead7751c65ee024485aa2a6cf65' }, this.viewYear)), hAsync("button", { key: '5ff7b70b69732c01ae7a45c7b65336982ea6eed8', class: "dp-nav__btn", onClick: () => this.nextMonth(), type: "button" }, hAsync("dropi-icon", { key: '718725e17a530de4e8081c97e639342ff7fd9a96', name: "Arrow-Right-2", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), hAsync("div", { key: 'd3d899342a15a9a0f2b508dbd39945831ebbad0d', 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;
@@ -7608,16 +7613,16 @@ 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: '84c799762393b9de0161795f20188a680490d4d8', class: "dp-footer" }, hAsync("button", { key: '4696558b1be6bf8abe8461f341c129c640af46ce', 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: 'a87f6f92fa10829560d223835e70fd2951edc482', class: "dp-footer__today", type: "button", onClick: () => {
                 if (this.selectionMode !== 'range') {
                     this.selectedDate = today;
                     this.open = false;
-                    this.onChangeDate.emit(today);
+                    this.dropiChangeDate.emit(today);
                 }
                 else {
                     this.startDate = today;
@@ -7664,9 +7669,9 @@ const dropiDatePickerRangeCss = () => `:host{display:block;width:100%;max-width:
 class DropiDatePickerRange {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.startDateChange = createEvent(this, "startDateChange", 7);
-        this.endDateChange = createEvent(this, "endDateChange", 7);
-        this.dropiRangeChange = createEvent(this, "dropiRangeChange", 7);
+        this.startDateChange = createEvent(this, "startDateChange");
+        this.endDateChange = createEvent(this, "endDateChange");
+        this.dropiRangeChange = createEvent(this, "dropiRangeChange");
     }
     /** Start date (YYYY-MM-DD) */
     startDate = '';
@@ -7799,7 +7804,7 @@ const dropiDrawerCss = () => `:host{display:contents;font-family:'Inter', sans-s
 class DropiDrawer {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiClose = createEvent(this, "dropiClose", 7);
+        this.dropiClose = createEvent(this, "dropiClose");
     }
     drawerTitle = '';
     /** Controls visibility (alias of open for Angular parity) */
@@ -7852,10 +7857,10 @@ class DropiDrawer {
             else
                 panelStyle['height'] = this.height;
         }
-        return (hAsync("div", { key: '7792ce8e001adf404aef387e35c5fb601f69b1e2', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, hAsync("div", { key: '186c33be6a7cd1e34e6d1f852219be91b24a15b9', class: "drawer-backdrop", onClick: () => {
+        return (hAsync("div", { key: 'e5138752d1821a27ec3b0396cdc3d09bc15f7c73', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, hAsync("div", { key: 'ca7f2dff57eee0cc1d5a71486c8ce765b27c7307', 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: '985b7c295391fa2326ee5880bed829910c56d082', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, hAsync("div", { key: 'be62a0009ab8c829cd20643552a66d17b8e877cf', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, hAsync("h3", { key: 'e6f6a03c224c83fe8de9a2895a07bf93b9dbdea4', class: "drawer-header__title" }, this.drawerTitle), hAsync("button", { key: '66c251c8d8da1e0a0036f9bdeaeb6f09514dbfd4', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, hAsync("dropi-icon", { key: '150a59e552636ec623d31926fc419ec36443cc22', name: "Close-small", iconWidth: "32px", iconHeight: "32px", color: "Gray-Gray-400" }))), hAsync("div", { key: '6982100fcf4e5ce4193bbff79baea9c557ad0722', class: "drawer-body" }, hAsync("slot", { key: '6ae61a0451322969ddb4684b77eb5851b942dd9a' })), hAsync("div", { key: '5d4df79ea4044d86edd51331a6c1cdd3a43bfc5d', class: "drawer-footer" }, hAsync("slot", { key: '49de1183444123c36076e20e882952b9d802a567', name: "footer" })))));
     }
     static get watchers() { return {
         "open": [{
@@ -7896,7 +7901,7 @@ const dropiDropdownCss = () => `:host{display:block;width:100%}*,*::before,*::af
 class DropiDropdown {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.modelChange = createEvent(this, "modelChange", 7);
+        this.modelChange = createEvent(this, "modelChange");
     }
     /** Options array or JSON string */
     options = [];
@@ -7976,7 +7981,7 @@ const dropiEmptyStateCss = () => `:host{display:block}*,*::before,*::after{box-s
 class DropiEmptyState {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.buttonClickEvent = createEvent(this, "buttonClickEvent", 7);
+        this.buttonClickEvent = createEvent(this, "buttonClickEvent");
     }
     /** Title text (matches Angular 'title') */
     title = '';
@@ -7997,7 +8002,7 @@ class DropiEmptyState {
     /** Emitted when button is clicked — matches Angular 'buttonClickEvent' */
     buttonClickEvent;
     render() {
-        return (hAsync("div", { key: '1b7c0fd20a119ae17ee09f7c68b7ae2b4e77ee98', class: "empty-state" }, hAsync("div", { key: 'cb4fd9dc6a8b491359fd9cd8b6983e68f64af994', class: "empty-state-visual" }, this.imageUrl ? (hAsync("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (hAsync("img", { class: "empty-state-img", src: `assets/icons/ilustration/${(!this.dropiIcon || String(this.dropiIcon) === 'undefined' || String(this.dropiIcon) === 'null') ? 'default' : this.dropiIcon}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.title && hAsync("h3", { key: '14c09482953e39975c74ca454df3131e3233a712', class: "empty-state-title" }, this.title), this.description && hAsync("p", { key: '5fccb02b2b21d8895c5b122aa0fb6684fc9d7611', class: "empty-state-description" }, this.description), hAsync("slot", { key: '6e53d450b4dbb8cff81addd3e7fc528c599bf730' }), this.buttonText && (hAsync("div", { key: '4325f23a357c43b970dce907a63f24b63b10070e', class: "empty-state-actions" }, hAsync("dropi-button", { key: 'a475b2fec4e00343fa4b4fa29ac08d5564e4e21a', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
+        return (hAsync("div", { key: '50a720a8b293a19dbabccce8f7aa0fa996e5fd63', class: "empty-state" }, hAsync("div", { key: 'd13894b011225337234301bd514891d89caac3d7', class: "empty-state-visual" }, this.imageUrl ? (hAsync("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (hAsync("img", { class: "empty-state-img", src: `assets/icons/ilustration/${(!this.dropiIcon || String(this.dropiIcon) === 'undefined' || String(this.dropiIcon) === 'null') ? 'default' : this.dropiIcon}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.title && hAsync("h3", { key: 'eb40395b4bd3c623f27bc3290bb37427420c5e94', class: "empty-state-title" }, this.title), this.description && hAsync("p", { key: 'f942c17f7a8d320bbe81dfcd45d13e56d7ea8eba', class: "empty-state-description" }, this.description), hAsync("slot", { key: '513f49ffeeb77e2be1318d6d251a1bcabff2689a' }), this.buttonText && (hAsync("div", { key: 'f6d9c391feee26eac44a8904e1768678bbb1604c', class: "empty-state-actions" }, hAsync("dropi-button", { key: 'f9ea9563a76a80bd29b6e6aaf8405092046a62a8', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
     }
     static get style() { return dropiEmptyStateCss(); }
     static get cmpMeta() { return {
@@ -8028,7 +8033,7 @@ const dropiFavoriteButtonCss = () => `:host{display:inline-flex}.fav-btn{display
 class DropiFavoriteButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.toggleFavorite = createEvent(this, "toggleFavorite", 7);
+        this.toggleFavorite = createEvent(this, "toggleFavorite");
     }
     /** Whether the item is currently marked as favorite */
     isFavorite = false;
@@ -8040,7 +8045,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: 'da3d3c03b4c297f1d4bb754f8ade9222d3edc39d', 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: '857967dd6982df82f5ac29db4370fa607369da34', 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 {
@@ -8066,7 +8071,7 @@ const dropiFileUploadCss = () => `:host{display:block;width:100%}*,*::before,*::
 class DropiFileUpload {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.uploadedUrlsChange = createEvent(this, "uploadedUrlsChange", 7);
+        this.uploadedUrlsChange = createEvent(this, "uploadedUrlsChange");
     }
     /** Título mostrado arriba del componente */
     title = '';
@@ -8276,7 +8281,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...")))));
@@ -8288,7 +8293,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: 'e5f37c05ca644260f8c2ba4c549cdde8e908a570', class: "upload-container" }, (this.title || this.label) && (hAsync("div", { key: '493ff72b35f924431d94b6906d654a2413a59c47', class: "upload-header" }, this.title && hAsync("div", { key: '8fe37e760e44f5db9a5e42578a92d9a939661bf9', class: "text title" }, this.title), this.label && hAsync("div", { key: '3329bea57a935a907e47d2f40f82d3044e5992ad', class: "text label" }, this.label))), this.error && (hAsync("dropi-alert", { key: '1551176ccb8ec320df5eeea8b42f937a795c02a8', message: this.errorMessage, type: "default", state: "error", dismissable: true, showButton: false, onDropiClose: () => { this.error = false; } })), showDropZone && (hAsync("div", { key: '2522e795c006794c20bfea3534014227636cc4bd', 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: 'da75ce3acdf2d3490079c0d8c25bfadcdda49586', class: `file-upload__zone${this.dragging ? ' drag-over' : ''}` }, !isSmall && (hAsync("svg", { key: 'e9fb52b7ceda0e0e463ab26739b294bffdf9ea34', width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: 'dfec7aa24e681811dfc8d6ff3b721dec084aa4a0', 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: '9fffcd3ce8931d8b7beeb6417585a7eb7f222f96', "clip-path": "url(#up)" }, hAsync("path", { key: '6f1aec8a5a60f26c09645b2655e51c6aa7b34ca2', 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: '0c194dc527a19345b9fabc55e24cca08987a486a', 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: '9b8c3526d936553239141c3cb4f81212377b5811' }, hAsync("clipPath", { key: '1be0970786af27a069ea237ec5bbd5292891b0cd', id: "up" }, hAsync("rect", { key: '5dbf5e86d6a7a9f07f9ada6e0c2d132b4eebd969', width: "16", height: "16", fill: "white", transform: "translate(12 12)" }))))), hAsync("div", { key: '5d06acbe6b129e60a49ae97c04bcd906e9abdfb9', class: isSmall ? 'info size-small-upload' : 'info' }, hAsync("div", { key: '30faf6e1ce359a4f2ed477a84c062994c3713506', class: "title" }, this.textDropZone), isSmall && (hAsync("dropi-button", { key: 'e6c3d40ff6c4c8b6381a7f0f49eedfbd407c0687', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } }))), !isSmall && (hAsync("div", { key: '2680ec20dc360e2ccadb9a677569a5d51ebe2009', class: "info-desc" }, this.accept && hAsync("div", { key: '2ced48c536a4c9385b6941141f78566cf1624db6', class: "description" }, "Formatos admitidos: ", this.accept), hAsync("div", { key: '58bf63818e70de35113be94c9bf20bcd728d88ae', class: "description" }, "Tama\u00F1o m\u00E1ximo: ", this.maxFileSizeMB, "MB"))), !isSmall && (hAsync("dropi-button", { key: '96b20bf6d68b8e3f2572784ed8f27ffff4336cd1', text: this.textButton, size: "small", onClick: (e) => { e.stopPropagation(); this.openFilePicker(); } })), hAsync("input", { key: '3fefcd08176ad885be131d5be25b8a25e874da47', 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: 'ab0c9d2d0067e594a2c5047f86ed4ca0a9f576cb', class: "files-container" }, gridFiles.length > 0 && (hAsync("div", { key: '13894a0c569b88051fe0dc695839562e054862e2', class: "grid-list" }, gridFiles.map(f => this.renderGridItem(f)), gridFiles.length < this.maxFiles && (hAsync("div", { key: 'ba4ff34d4e686891b056cd4f189741ace807294c', class: "add-img", onClick: () => this.addImage() }, hAsync("div", { key: '95c341ae449bb857fc39563ba3fec9764139d429', class: "icon" }, hAsync("svg", { key: '28dcdb54a5856683c455d11864af4e2f7ecc0414', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: '50514d670498a1fbdaee785b0a883aebc5f4b66c', 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: '44a13026e2324e33d1a5432b371fc89019e1909e', class: "text" }, "Agregar"))))), cardFiles.length > 0 && (hAsync("div", { key: 'e66fbbc9aad1dc78030e62e89c2470b018563655', class: "card-list" }, cardFiles.map(f => this.renderCardItem(f))))))));
     }
     static get style() { return dropiFileUploadCss(); }
     static get cmpMeta() { return {
@@ -8328,9 +8333,9 @@ const dropiFileUploadProgressBarCss = () => `:host{display:block;width:100%}*,*:
 class DropiFileUploadProgressBar {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.deleteFile = createEvent(this, "deleteFile", 7);
-        this.uploadComplete = createEvent(this, "uploadComplete", 7);
-        this.viewFile = createEvent(this, "viewFile", 7);
+        this.deleteFile = createEvent(this, "deleteFile");
+        this.uploadComplete = createEvent(this, "uploadComplete");
+        this.viewFile = createEvent(this, "viewFile");
     }
     /** File name to display */
     textFile = 'Nombre del archivo.xlsx';
@@ -8382,7 +8387,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: '7de4db6162b6c7cea620c37bbd9dca5ae48ac26c', class: "container-progress-bar" }, hAsync("div", { key: '17f46bfb02d60643be4fea506aec6b00947a3700', class: "container-icon-info", style: { display: this.fileExtension !== 'pdf' ? 'flex' : 'none' } }, this.type !== 'image' && (hAsync("dropi-icon", { key: '43a34efb7bb1f5915758c9f04f06d354c028c8fd', name: "File-text", iconWidth: "24px", iconHeight: "24px", color: "Info-Info-600" })), this.type === 'image' && !this.urlImage && (hAsync("div", { key: 'a55ea895221f090db621162a265373c4cb71879b', style: { width: '34px', height: '34px', borderRadius: '8px', background: 'var(--Gray-Gray-100)' } })), this.type === 'image' && this.urlImage && (hAsync("img", { key: '85a7a6b045aa4447c03aef43060189eab84743d3', src: this.urlImage, class: "image-to-view", width: "34", height: "34", alt: "" }))), this.fileExtension === 'pdf' && (hAsync("div", { key: '4736fdefc583b44b9d19e397cc6662aa4bb71ef6', class: "icon-pdf" }, hAsync("svg", { key: '9e6e7074855d676bac56d856c94ed37534256193', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, hAsync("g", { key: '91fd32e4f2946a6cf4ddfbb7febbc43977d7a3e4', "clip-path": "url(#clip0_6227_22223)" }, hAsync("path", { key: 'bb19f6eea9ccc07d2c74cca23a20902e228ec876', 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: '6b761a9e96b13b85dbd2d87b0b1c108450f3c3a0' }, hAsync("clipPath", { key: 'c019250b1926e389eb053c10f9c1c67e0b11e55a', id: "clip0_6227_22223" }, hAsync("rect", { key: 'ced06b676a19158d7e93f41a8c4a47c7cd355dd2', width: "20", height: "20", fill: "white" })))))), hAsync("div", { key: 'c1ddf6e727ce42bf5be1f534f706195fae7fdd3d', class: "container-bar-title" }, hAsync("p", { key: 'a6707326b8351ba93f61d969347db84c9627d597' }, this.textFile), hAsync("progress", { key: 'b118931b77a2f51b3a8813bfc7676147d189d566', value: this.progress, max: "100" })), this.progress === 100 && this.isPreview && (hAsync("div", { key: '648edb23c1a2cba83ea7fda5dd02471b5e4dfb35', class: "view-icon", onClick: () => this.viewFile.emit() }, hAsync("svg", { key: '134717d673466a552625eaf167951f1d6c0942c0', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "14", viewBox: "0 0 18 14", fill: "none" }, hAsync("path", { key: 'a80c09f43697d6fe264fdd6df7e43e004dce9f0c', "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: '12fc2332c38fd8c41319d47744e0f5e0b40c1f6b', "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: '1b93e90541615b5b45cabff2262cfc1668563f82', class: "container-icon-trash", onClick: () => this.deleteFile.emit() }, hAsync("svg", { key: 'b95127b8ee2ba3aeb6aaeb4050f194097a8dfa05', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "21", viewBox: "0 0 20 21", fill: "none" }, hAsync("path", { key: '33534ae79504bfa0c1d1ee3f9c132ba4bc1a3a82', 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: '56a2b6323d63c9d06fcb5044cb4aae51823fb357', 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: '2487b04fb28c8d9f6e4cc2d325b9983e2c8c4cf5', 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": [{
@@ -8411,7 +8416,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;stroke:var(--icon-fill, currentColor);stroke-width:var(--icon-stroke-width, 0);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
@@ -8426,36 +8431,39 @@ 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';
+    /** Stroke width for icons that use strokes */
+    strokeWidth = '';
+    widthChanged() {
+        this.updateHostStyles();
+    }
+    heightChanged() {
+        this.updateHostStyles();
+    }
     colorChanged() {
         this.applyColor();
     }
+    strokeWidthChanged() {
+        this.applyStrokeWidth();
+    }
     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.applyStrokeWidth();
         this.updateHostStyles();
     }
     componentDidUpdate() {
         this.updateHostStyles();
     }
+    applyStrokeWidth() {
+        if (this.strokeWidth) {
+            this.el.style.setProperty('--icon-stroke-width', this.strokeWidth);
+        }
+    }
     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)
@@ -8468,11 +8476,20 @@ 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: '99f511720c6654b3f97490c966061520ee17d27f', width: this.iconWidth, height: this.iconHeight, class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, hAsync("use", { key: '04792170d8c23b3606249d051f8cc903bd5d1211', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}` })));
     }
     static get watchers() { return {
+        "iconWidth": [{
+                "widthChanged": 0
+            }],
+        "iconHeight": [{
+                "heightChanged": 0
+            }],
         "color": [{
                 "colorChanged": 0
+            }],
+        "strokeWidth": [{
+                "strokeWidthChanged": 0
             }]
     }; }
     static get style() { return dropiIconCss(); }
@@ -8481,9 +8498,10 @@ class DropiIcon {
         "$tagName$": "dropi-icon",
         "$members$": {
             "name": [1],
-            "width": [1],
-            "height": [1],
-            "color": [1]
+            "iconWidth": [1, "icon-width"],
+            "iconHeight": [1, "icon-height"],
+            "color": [1],
+            "strokeWidth": [1, "stroke-width"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8522,13 +8540,13 @@ class DropiIlustrationIcon {
         const map = {
             success: 'Check-circle',
             error: 'Cross-circle',
-            info: 'Info',
-            warning: 'Info',
+            info: 'Comment-round_info',
+            warning: 'Comment-round_info',
         };
-        return map[state] || 'Info';
+        return map[state] || 'Comment-round_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: 'd7fa7fce7346d3496ae99c580dee9de5fea934b8', class: "dropi-ilustration" }, this.type === 'dropi' && (hAsync("figure", { key: 'faa5686e775ac3a373037b6e1f9bf32076cfb495', class: "dropi-ilustration__image" }, hAsync("img", { key: '209017a72b774b3e14c8e34f7e3bface75ba592b', 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: '75c82f5356c427d4ed35db3e9697d232e7f1b132', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (hAsync("dropi-icon", { key: '86a371bef276d6c945959405d39cea3a8dcecde3', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (hAsync("figure", { key: 'c1bef5162ba49d8493a1c8d6b16d886543215046', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, hAsync("img", { key: '8d1313457cda0f356f278f095b42d75d960a1c27', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (hAsync("p", { key: '303cce4a3a632e9e36f8c7e6d186b56cec9c5ed6', class: `tag tag--${this.stateInsignia}` }, hAsync("span", { key: '3c2b051198e41dcfc2944aa7b1f869ba30e56c2a', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
     }
     static get style() { return dropiIlustrationIconCss(); }
     static get cmpMeta() { return {
@@ -8555,7 +8573,7 @@ const dropiImageMiniatureCss = () => `:host{display:block}*,*::before,*::after{b
 class DropiImageMiniature {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiImageClick = createEvent(this, "dropiImageClick", 7);
+        this.dropiImageClick = createEvent(this, "dropiImageClick");
     }
     /** Optional label above the grid */
     label = '';
@@ -8584,7 +8602,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: 'aefd44eab41f586a8a5bf4bbc1675b6c9cc67124', class: "miniature" }, this.label && hAsync("span", { key: 'f61ea53ad1dfa354a93781877e0f02c120e0f445', class: "miniature__label" }, this.label), hAsync("div", { key: 'fbde49689bed4e93c63cab97e787e6d877a7fcb2', 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 {
@@ -8611,7 +8629,7 @@ const dropiImageOverlayCss = () => `:host{display:block}.overlay{position:fixed;
 class DropiImageOverlay {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiClose = createEvent(this, "dropiClose", 7);
+        this.dropiClose = createEvent(this, "dropiClose");
     }
     /** Whether the overlay is visible */
     visible = false;
@@ -8648,7 +8666,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": [{
@@ -8678,7 +8696,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
@@ -8698,10 +8716,10 @@ const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after
 class DropiInput {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onInput = createEvent(this, "onInput", 7);
-        this.onChange = createEvent(this, "onChange", 7);
-        this.onFocus = createEvent(this, "onFocus", 7);
-        this.onBlur = createEvent(this, "onBlur", 7);
+        this.dropiInput = createEvent(this, "dropiInput");
+        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiFocus = createEvent(this, "dropiFocus");
+        this.dropiBlur = createEvent(this, "dropiBlur");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -8713,7 +8731,7 @@ class DropiInput {
     internals;
     // ── Identification ──────────────────────────────────────────
     /** Input id. Defaults to label label. */
-    id = '';
+    inputId = '';
     /** Name attribute for native form submission */
     name = '';
     // ── Content ─────────────────────────────────────────────────
@@ -8776,18 +8794,20 @@ class DropiInput {
     touched = false;
     // ── Events ──────────────────────────────────────────────────
     /** Emitted on every keystroke with the current value */
-    onInput;
+    dropiInput;
     /** Emitted on blur with the final value */
-    onChange;
+    dropiChange;
     /** Emitted on focus */
-    onFocus;
+    dropiFocus;
     /** Emitted on blur */
-    onBlur;
+    dropiBlur;
     inputPropertiesChanged(val) {
         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)
@@ -8843,7 +8863,7 @@ class DropiInput {
             val = this.formatThousands(val, this.isMoneyInput);
         this.value = val;
         this.internals.setFormValue(val);
-        this.onInput.emit(val);
+        this.dropiInput.emit(val);
     }
     handleKeyDown(e) {
         if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {
@@ -8854,12 +8874,12 @@ class DropiInput {
         }
     }
     handleFocus() {
-        this.onFocus.emit();
+        this.dropiFocus.emit();
     }
     handleBlur() {
         this.touched = true;
-        this.onChange.emit(this.value);
-        this.onBlur.emit();
+        this.dropiChange.emit(this.value);
+        this.dropiBlur.emit();
     }
     togglePassword() {
         if (this.disabled)
@@ -8903,7 +8923,7 @@ class DropiInput {
     }
     // ── Computed ─────────────────────────────────────────────────
     get resolvedId() {
-        return this.id || this.label;
+        return this.inputId || this.label;
     }
     get inputType() {
         if (this.passwordInput)
@@ -8924,14 +8944,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: '36a33fdb7048e3ba43dae3c2d3d71c9f69643cac', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (hAsync("div", { key: '699adfe37d662ed328cd13fdad428e857b70f01d', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && hAsync("span", { key: 'b2d6f4757cdb50eacfb7879e4a878e30adf5235d', class: "asterisk" }, " *"))), hAsync("div", { key: 'dc080fc5d0ab12f0eadf7e1bb30cae5539f76640', class: "form-group" }, hAsync("div", { key: 'cf228d5e4c7e0a04735d38ba239a2b989f5247ca', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (hAsync("dropi-icon", { key: '049e396ea1f2f11625de73bc074c0e0aecea96ab', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (hAsync("dropi-icon", { key: '544316f6e7a284acf65d3a2b7fb3a2654c80d95b', 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: '6d23ac748d0768d6eea0eb347bde7b13d8f20321', 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: '8f26c9430cbc1c6b55286d62c2a350724dd0101f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && hAsync("span", { key: '95d953c160cf22457b0e1d6265b8137a24d4092b', class: "asterisk" }, " *"))), this.showHelper && (hAsync("div", { key: 'ad3d4b5230fd32e97c661c64deadf97830caa550', class: "form-control-helper" }, this.isInvalid && hAsync("dropi-icon", { key: '7c28120d1cc46ccd288948b1d2d9e5cc24521af7', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '40eb1eedd2a204975aed61fcd24ccadd26d8aaef', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));
@@ -8953,7 +8973,7 @@ class DropiInput {
         "$flags$": 585,
         "$tagName$": "dropi-input",
         "$members$": {
-            "id": [1025],
+            "inputId": [1025, "input-id"],
             "name": [1],
             "label": [1025],
             "placeholder": [1025],
@@ -8999,13 +9019,13 @@ const dropiLanguagesSelectorCss = () => `:host{display:inline-block;position:rel
 class DropiLanguagesSelector {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.languageChange = createEvent(this, "languageChange", 7);
+        this.dropiLanguageChange = createEvent(this, "dropiLanguageChange");
     }
     /** Language options (array or JSON string) */
     languages = [];
     /** Currently selected language (LanguageOption or JSON string) */
     selectedLang = null;
-    languageChange;
+    dropiLanguageChange;
     isOpen = false;
     parsedLanguages = [];
     currentLang = null;
@@ -9032,12 +9052,12 @@ class DropiLanguagesSelector {
     select(lang) {
         this.currentLang = lang;
         this.isOpen = false;
-        this.languageChange.emit(lang);
+        this.dropiLanguageChange.emit(lang);
     }
     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": [{
@@ -9095,7 +9115,7 @@ class DropiLogo {
         e.target.src = FALLBACK_SVG;
     }
     render() {
-        return (hAsync("figure", { key: '479af3da2dc04c7d6e79b99494fce0fb5419af4d', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, hAsync("img", { key: '6b78e7004f4b1dd782e4c17dae7b264fff483875', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
+        return (hAsync("figure", { key: '2a5ed49bd2ac8592db5b06256ff4e911e26ee6fd', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, hAsync("img", { key: 'f0f63e2e5ceb30c24eac3f7f5a3446858b632f90', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
     }
     static get style() { return dropiLogoCss(); }
     static get cmpMeta() { return {
@@ -9156,8 +9176,8 @@ const dropiMediaPlayerCss = () => `:host{display:block;width:100%}*,*::before,*:
 class DropiMediaPlayer {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiPlay = createEvent(this, "dropiPlay", 7);
-        this.dropiEnded = createEvent(this, "dropiEnded", 7);
+        this.dropiPlay = createEvent(this, "dropiPlay");
+        this.dropiEnded = createEvent(this, "dropiEnded");
     }
     get el() { return getElement(this); }
     src = '';
@@ -9330,10 +9350,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 {
@@ -9366,7 +9386,7 @@ class DropiMediaPlayer {
     }; }
 }
 
-const dropiModalCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:1100}.modal-root--open{opacity:1;pointer-events:auto}.modal-root--closing{opacity:1;pointer-events:none}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:var(--font-weight-bold);flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}::slotted(.button-container)>*{width:100%}::slotted(.button-container) dropi-button{width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer{justify-content:center}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-xxl{width:1214px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}`;
+const dropiModalCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:9999;visibility:hidden}.modal-root--open{opacity:1;pointer-events:auto;visibility:visible}.modal-root--closing{opacity:1;pointer-events:none;visibility:visible}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:var(--font-weight-bold);flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%;margin-top:auto;flex-shrink:0}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}::slotted(.button-container)>*{width:100%}::slotted(.button-container) dropi-button{width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer,.modal-panel.size-xs .modal-footer{justify-content:flex-end}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container),.modal-panel.size-xs .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-panel.size-xs{width:320px;padding:24px;gap:16px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-xxl{width:1214px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}`;
 
 /**
  * @component dropi-modal
@@ -9376,9 +9396,9 @@ const dropiModalCss = () => `:host{display:contents}*,*::before,*::after{box-siz
 class DropiModal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onShow = createEvent(this, "onShow", 5);
-        this.onHide = createEvent(this, "onHide", 5);
-        this.visibleChange = createEvent(this, "visibleChange", 5);
+        this.dropiShow = createEvent(this, "dropiShow");
+        this.dropiHide = createEvent(this, "dropiHide");
+        this.dropiVisibleChange = createEvent(this, "dropiVisibleChange");
     }
     visible = false;
     header = null;
@@ -9405,28 +9425,28 @@ 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;
-    onHide;
-    visibleChange;
+    dropiShow;
+    dropiHide;
+    dropiVisibleChange;
     isOpen = false;
     isClosing = false;
     mounted = false;
     closeTimer = null;
     keyHandler = null;
-    visibleChanged(val, oldVal) {
-        const isVisible = val === true || String(val) === 'true';
-        const wasVisible = oldVal === true || String(oldVal) === 'true';
-        if (isVisible === wasVisible)
-            return;
-        console.log('[DropiModal] visibleChanged:', isVisible);
-        isVisible ? this.openModal() : (this.mounted && this.startClose());
+    canDismiss = false;
+    visibleChanged(val) {
+        if (val) {
+            this.openModal();
+        }
+        else {
+            this.startClose();
+        }
     }
     componentDidLoad() {
-        const isVisible = this.visible === true || String(this.visible) === 'true';
-        if (isVisible)
+        if (this.visible)
             this.openModal();
     }
     disconnectedCallback() {
@@ -9437,32 +9457,37 @@ class DropiModal {
             document.body.classList.remove('dropi-modal-open');
         }
     }
-    async hide() {
-        this.visible = false;
-        this.visibleChange.emit(false);
-        this.startClose();
+    async dismiss() {
+        if (this.visible) {
+            this.visible = false;
+            this.dropiVisibleChange.emit(false);
+        }
+        else {
+            this.startClose();
+        }
     }
-    async show() {
+    async openModalExternally() {
         this.visible = true;
-        this.visibleChange.emit(true);
-        this.openModal();
+        this.dropiVisibleChange.emit(true);
     }
     openModal() {
         if (this.closeTimer) {
             clearTimeout(this.closeTimer);
             this.closeTimer = null;
         }
-        this.mounted = true;
+        // Safety: ensure it's not already open or in a closing state
         this.isClosing = false;
-        this.isOpen = false;
+        this.mounted = true;
         requestAnimationFrame(() => requestAnimationFrame(() => {
             this.isOpen = true;
-            this.onShow.emit();
+            this.dropiShow.emit();
         }));
         this.addKeyHandler();
+        this.canDismiss = false;
+        setTimeout(() => { this.canDismiss = true; }, 300);
     }
     startClose() {
-        if (this.isClosing)
+        if (this.isClosing || !this.mounted)
             return;
         this.isClosing = true;
         this.isOpen = false;
@@ -9473,15 +9498,15 @@ class DropiModal {
             this.mounted = false;
             this.isClosing = false;
             this.closeTimer = null;
-            this.onHide.emit();
+            this.dropiHide.emit();
         }, 200);
     }
     addKeyHandler() {
         if (!this.closeOnEscape)
             return;
         this.keyHandler = (e) => {
-            if (e.key === 'Escape' && this.visible && this.dismissable)
-                this.hide();
+            if (e.key === 'Escape' && this.visible && this.dismissable && this.canDismiss)
+                this.dismiss();
         };
         document.addEventListener('keydown', this.keyHandler);
     }
@@ -9492,7 +9517,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: '95847ba48baae69b93888cb59ecaa9d2130ae17a', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, (this.modal ?? true) && hAsync("div", { key: '78acc3c2f1b7327b6fc1770a9536cdf0c2c57f99', class: "modal-mask", onClick: () => this.canDismiss && this.dismissable && this.dismiss() }), hAsync("div", { key: '63906a7ed0432879c3256a659ddd9773099244bc', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true", style: this.maxWidth ? { maxWidth: this.maxWidth, width: '100%' } : {} }, this.showHeader && (hAsync("div", { key: '7d960505ea8fd7804ac67ceb88b9195e6ad1998d', class: "modal-header" }, this.header && hAsync("span", { key: 'fed4b8a2e6c89fca39a8766d0e843db7c184be59', class: "modal-title" }, this.header), hAsync("slot", { key: 'b2c6c5cc1f019229c3ad5028e42b1fd887494abd', name: "header" }), this.showCloseIcon && (hAsync("button", { key: '24fc8ff422ea5c7e6a8c0737acbb29c1d7467f40', class: "modal-close", onClick: () => this.dismiss(), "aria-label": "Cerrar" }, "\u00D7")))), hAsync("div", { key: '472a7dfe704b0b8d129b00bc88204602ead66403', class: "modal-content" }, hAsync("slot", { key: '6b3e6fdefca0c6510d4fdbbccce53a5efa52e4c8' })), this.showFooter && hAsync("div", { key: '5bd3c15d4d1fb2ebffad79c9314d03d1d72dae29', class: "modal-footer" }, hAsync("slot", { key: '1980d019b142e2a00f55a3a755e9e08d0393c5e5', name: "footer" })))));
     }
     static get watchers() { return {
         "visible": [{
@@ -9504,7 +9529,7 @@ class DropiModal {
         "$flags$": 777,
         "$tagName$": "dropi-modal",
         "$members$": {
-            "visible": [1544],
+            "visible": [1540],
             "header": [1],
             "showCloseIcon": [4, "show-close-icon"],
             "dismissable": [4],
@@ -9524,13 +9549,13 @@ 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],
             "mounted": [32],
-            "hide": [64],
-            "show": [64]
+            "dismiss": [64],
+            "openModalExternally": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -9547,10 +9572,10 @@ const dropiNavbarCss = () => `:host{display:block;width:100%}*,*::before,*::afte
 class DropiNavbar {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.clickLoadItem = createEvent(this, "clickLoadItem", 7);
-        this.dropiNotificationsClick = createEvent(this, "dropiNotificationsClick", 7);
-        this.dropiUserClick = createEvent(this, "dropiUserClick", 7);
-        this.dropiMenuToggle = createEvent(this, "dropiMenuToggle", 7);
+        this.clickLoadItem = createEvent(this, "clickLoadItem");
+        this.dropiNotificationsClick = createEvent(this, "dropiNotificationsClick");
+        this.dropiUserClick = createEvent(this, "dropiUserClick");
+        this.dropiMenuToggle = createEvent(this, "dropiMenuToggle");
     }
     /** Logo URL */
     logoUrl = '';
@@ -9584,9 +9609,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: '83ec218a7545739c65d8f1f61197b429b0e7d407', class: "navbar" }, hAsync("div", { key: 'e40038630c33a280f3c231b3dd26643f1c853ea3', class: "navbar__left" }, this.showMenuToggle && (hAsync("button", { key: '0ecbae684b9324c48cd01a6081fd1951b3ba7cf8', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, hAsync("dropi-icon", { key: '9edea72a4508a984be2e6785f3f0fa6abe0625c4', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (hAsync("img", { key: 'b8cd9896736d505dad05b8df5f10928d40f250dd', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && hAsync("span", { key: '4e5dae851fe28f1bc913d7a5d4d42a2413342635', class: "navbar__title" }, this.title)), items.length > 0 && (hAsync("ul", { key: 'b951cc880b8aaf718b85403e3420d73ac976aa60', 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: '8fe68f93af722982bac11890b106a35a292b3d98', class: "navbar__right" }, hAsync("button", { key: 'a4d0ff928dca2502384cd21e0bc852cacc895a30', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, hAsync("dropi-icon", { key: '41007746a151c27059d41db7c4672a2b551882d1', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (hAsync("span", { key: 'a0e5c6c9f8e2aaf3e67cc22bdff2ae65472b7cb5', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), hAsync("button", { key: 'e1996f9e1fa922cd03a4e9c5721f5be838a941d3', 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: 'd539c8f456564aa8d3a29e9d2e2ed6250241f411', class: "navbar__user-name" }, this.userName), hAsync("dropi-icon", { key: 'd32cba548201f28a051142e889f6de207a4e67d2', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
     }
     static get style() { return dropiNavbarCss(); }
     static get cmpMeta() { return {
@@ -9611,17 +9636,17 @@ class DropiNavbar {
 
 const dropiOtpSendCodeCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.otp{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.otp__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066);text-align:center;margin:0}.otp__inputs{display:flex;gap:var(--Size-4, 16px)}.otp__digit{width:56px;height:56px;border:1.5px solid var(--Gray-Gray-200, #d3d7de);border-radius:var(--Border-2, 8px);text-align:center;font-size:22px;font-weight:var(--font-weight-bold, 700);font-family:inherit;color:var(--Gray-Gray-800, #1f2433);outline:none;transition:border-color 0.15s ease;background:var(--Neutral-White, #ffffff)}.otp__digit:focus{border:2px solid var(--Primary-Primary-500, #f49a3d)}.otp__digit--filled{border:1px solid var(--Success-Success-500, #0abb87);color:var(--Neutral-Neutral-900, #0e111a)}.otp__digit--error{border:1px solid var(--Error-Error-500, #f46a6b)}.otp__error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b);text-align:center}.otp__resend{text-align:center}.otp__countdown{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.otp__resend-btn{background:none;border:none;padding:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);cursor:pointer;text-decoration:underline}`;
 
-const OTP_LENGTH = 6;
 const RESEND_SECONDS = 30;
 /**
  * @component dropi-otp-send-code
- * 6-digit OTP input with countdown timer and resend capability.
+ * OTP input with configurable length, countdown timer and resend capability.
  */
 class DropiOtpSendCode {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.codeCompleted = createEvent(this, "codeCompleted", 7);
-        this.dropiResend = createEvent(this, "dropiResend", 7);
+        this.codeCompleted = createEvent(this, "codeCompleted");
+        this.codeAccepted = createEvent(this, "codeAccepted");
+        this.dropiResend = createEvent(this, "dropiResend");
     }
     /** Delivery method label */
     engine = 'email';
@@ -9631,17 +9656,30 @@ class DropiOtpSendCode {
     showLabelContact = false;
     /** Error message to display */
     errorMessage = '';
-    digits = Array(OTP_LENGTH).fill('');
-    digitStates = Array(OTP_LENGTH).fill('idle');
+    /** Number of digits for the OTP */
+    digitsCount = 6;
+    digits = [];
+    digitStates = [];
     countdown = RESEND_SECONDS;
     canResend = false;
     error = false;
     inputs = [];
     timer;
-    /** Emitted when all 6 digits are entered. e.detail = the complete code string */
+    handleDigitsCountChange(newValue) {
+        this.digits = Array(newValue).fill('');
+        this.digitStates = Array(newValue).fill('idle');
+        this.inputs = [];
+    }
+    /** Emitted when all digits are entered. */
     codeCompleted;
+    /** Emitted when all digits are entered (alternative event). */
+    codeAccepted;
     /** Emitted when resend is requested */
     dropiResend;
+    componentWillLoad() {
+        this.digits = Array(this.digitsCount).fill('');
+        this.digitStates = Array(this.digitsCount).fill('idle');
+    }
     componentDidLoad() { this.startCountdown(); }
     disconnectedCallback() { clearInterval(this.timer); }
     startCountdown() {
@@ -9658,45 +9696,55 @@ class DropiOtpSendCode {
     }
     handleInput(e, index) {
         const val = e.target.value.replace(/\D/g, '').slice(-1);
-        const newDigits = [...(this.digits ?? Array(OTP_LENGTH).fill(''))];
+        const newDigits = [...this.digits];
         newDigits[index] = val;
         this.digits = newDigits;
-        const newStates = [...(this.digitStates ?? Array(OTP_LENGTH).fill('idle'))];
+        const newStates = [...this.digitStates];
         newStates[index] = val ? 'filled' : 'idle';
         this.digitStates = newStates;
-        if (val && index < OTP_LENGTH - 1)
+        if (val && index < this.digitsCount - 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) {
-        if (e.key === 'Backspace' && !(this.digits ?? [])[index] && index > 0) {
+        if (e.key === 'Backspace' && !this.digits[index] && index > 0) {
             this.inputs[index - 1]?.focus();
         }
     }
     handlePaste(e) {
         e.preventDefault();
-        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, OTP_LENGTH) || '';
-        const newDigits = Array(OTP_LENGTH).fill('');
+        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, this.digitsCount) || '';
+        const newDigits = Array(this.digitsCount).fill('');
         text.split('').forEach((c, i) => { newDigits[i] = c; });
         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(''));
+        this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();
+        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: 'c9c6c3387cec2371049c547d87742563268bf28d', class: "otp" }, this.showLabelContact && (hAsync("p", { key: 'c3f36c62d7502eff8f86ef8202c3dfc65d846ba1', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && hAsync("strong", { key: '25c05d8f0773bf6f2af83f6154ac76638499e4d7' }, " ", this.labelContact))), hAsync("div", { key: '3ca2687723735b3eb6ada997f622a4a50c2d7ee9', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, 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--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: 'ddcdd5dacc533b73e6353c2670f762168c2803d3', class: "otp__error" }, this.errorMessage)), hAsync("div", { key: 'a21650c43d7a62f9e187bd9f4eb307d275ff37be', 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 watchers() { return {
+        "digitsCount": [{
+                "handleDigitsCountChange": 0
+            }]
+    }; }
     static get style() { return dropiOtpSendCodeCss(); }
     static get cmpMeta() { return {
         "$flags$": 521,
@@ -9706,6 +9754,7 @@ class DropiOtpSendCode {
             "labelContact": [1, "label-contact"],
             "showLabelContact": [4, "show-label-contact"],
             "errorMessage": [1, "error-message"],
+            "digitsCount": [2, "digits-count"],
             "digits": [32],
             "digitStates": [32],
             "countdown": [32],
@@ -9727,7 +9776,7 @@ const dropiPaginatorCss = () => `:host{display:block}*,*::before,*::after{box-si
 class DropiPaginator {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.pageChange = createEvent(this, "pageChange", 7);
+        this.dropiPageChange = createEvent(this, "dropiPageChange");
     }
     /** Total number of pages */
     totalPages = 1;
@@ -9742,7 +9791,7 @@ class DropiPaginator {
     /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
     noLabels = false;
     /** Emitted when page changes. e.detail = new page number */
-    pageChange;
+    dropiPageChange;
     get pageNumbers() {
         const total = this.totalPages;
         const cur = this.currentPage;
@@ -9773,15 +9822,15 @@ class DropiPaginator {
         if (this.disabled || p < 1 || p > this.totalPages || p === this.currentPage)
             return;
         this.currentPage = p;
-        this.pageChange.emit(this.currentPage);
+        this.dropiPageChange.emit(this.currentPage);
     }
     render() {
         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: 'af6614df5a241ef536b6723d30bde12c8a6f474f', class: "paginator" }, hAsync("div", { key: '8b5405baa717a36042fc03ca2e68370799c01ff7', class: "paginator-pages" }, !isFirst && !this.noLabels && (hAsync("button", { key: 'c340304b29d658ef9eaa8105a91540660c829048', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, hAsync("dropi-icon", { key: '3adfc1508cbcedbb91f99e467db2270c40a4ac83', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (hAsync("button", { key: '5936642c4b9e5b72546229996fbc72fe973e6f5f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, hAsync("dropi-icon", { key: 'c9f7eb1c0c27a738ee31e859617964fc75e514cc', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && hAsync("span", { key: '5d448a9a6536c90c56fafd700e7c5998a85d6fdf', 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: '1a43d8dde37cdbc40527eb1c66bc5001a64cf59f', 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: 'f76ccd791d02b25d78c509341b73e1c1bca0b986', class: "paginator-label" }, "Siguiente"), hAsync("dropi-icon", { key: '822a3a7e4ac651e00c469b565e300a7efcc5614b', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (hAsync("button", { key: '2b4f7435f9083ab9c4d9ce81be5c259eda830e4a', 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: '63ab5568c44ed3cbda917842defe4dc4254bb3f1', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
     }
     static get style() { return dropiPaginatorCss(); }
     static get cmpMeta() { return {
@@ -9905,10 +9954,10 @@ const COUNTRIES = [
 class DropiPhoneInput {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.ngModelChangeCod = createEvent(this, "ngModelChangeCod", 7);
-        this.ngModelChangePhone = createEvent(this, "ngModelChangePhone", 7);
-        this.verifiedField = createEvent(this, "verifiedField", 7);
-        this.onChangeSelect = createEvent(this, "onChangeSelect", 7);
+        this.dropiCodChange = createEvent(this, "dropiCodChange");
+        this.dropiPhoneChange = createEvent(this, "dropiPhoneChange");
+        this.dropiVerify = createEvent(this, "dropiVerify");
+        this.dropiChangeSelect = createEvent(this, "dropiChangeSelect");
     }
     get el() { return getElement(this); }
     /** Initial country dial code (e.g. "57") — matches Angular 'CodArea' setter */
@@ -9936,13 +9985,13 @@ class DropiPhoneInput {
     selectProperties = null;
     open = false;
     /** Emitted when country dial code changes — matches Angular 'ngModelChangeCod' */
-    ngModelChangeCod;
+    dropiCodChange;
     /** Emitted when phone number changes — matches Angular 'ngModelChangePhone' */
-    ngModelChangePhone;
+    dropiPhoneChange;
     /** Emitted on field verification — matches Angular 'verifiedField' */
-    verifiedField;
+    dropiVerify;
     /** Emitted when country selection changes — matches Angular 'onChangeSelect' */
-    onChangeSelect;
+    dropiChangeSelect;
     codAreaChanged() {
         this.ngModelPhone = '';
     }
@@ -9964,14 +10013,14 @@ class DropiPhoneInput {
     selectCountry(c) {
         this.codArea = c.code;
         this.open = false;
-        this.ngModelChangeCod.emit(c.code);
-        this.onChangeSelect.emit(c);
+        this.dropiCodChange.emit(c.code);
+        this.dropiChangeSelect.emit(c);
     }
     handleInput(e) {
         const raw = e.target.value.replace(/\D/g, '');
         this.ngModelPhone = raw.slice(0, this.selectedCountry.maxLength);
         e.target.value = this.ngModelPhone;
-        this.ngModelChangePhone.emit(this.ngModelPhone);
+        this.dropiPhoneChange.emit(this.ngModelPhone);
     }
     handleWindowClick(ev) {
         const path = ev.composedPath();
@@ -9982,10 +10031,10 @@ class DropiPhoneInput {
     render() {
         const country = this.selectedCountry;
         const isInvalid = this.isValidPhone === false;
-        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: () => {
+        return (hAsync("div", { key: 'a377fcfcfdb239d79f319f0e058f5d54cbcfac02', class: "phone-wrap" }, hAsync("div", { key: '83719d2b76b491f1f7a9f3e202eb61c61abb2c31', class: "phone-input-container" }, hAsync("div", { key: 'c92ff5d9f260b80ad4e7b8f7e290b7b4e1f595f0', class: "custom-select" }, hAsync("button", { key: '35c56642c1828d86b7f211face2845dc79878fd4', 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: 'e39cdac451df1c9a47c6552e7f133cb7662cae7f', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, hAsync("img", { key: '620c8efc2695ee26fed0c2bcd7f6132af05cdbed', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), hAsync("dropi-icon", { key: 'cf57cc1ef06e12b0112fdbbb063fb8f045c17e39', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), hAsync("ul", { key: '1009d2e4212267bbfaf4aa26c0c2152606a8d092', 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: '87be58fc820c63741b076b04d807b7410e292344', 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": [{
@@ -10016,6 +10065,59 @@ class DropiPhoneInput {
     }; }
 }
 
+const dropiProgressBarCss = () => `:host{display:block;width:100%}.progress-container{width:100%;display:flex;flex-direction:column;gap:4px}.progress-header{display:flex;justify-content:flex-end}.progress-value{font-size:var(--font-size-xs, 12px);color:var(--Gray-Gray-600, #475066);font-weight:500}.progress-track{width:100%;border-radius:999px;overflow:hidden;position:relative}.progress-fill{height:100%;border-radius:999px;transition:width 0.3s ease-in-out, background-color 0.3s ease-in-out}`;
+
+class DropiProgressBar {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The progress value (0-100) */
+    value = 0;
+    /** The color scheme of the progress bar */
+    severity = 'primary';
+    /** Height of the progress bar */
+    height = '8px';
+    /** Whether to show the value as text */
+    showValue = false;
+    /** Background color of the track (optional, defaults to gray-100) */
+    trackColor = 'var(--Gray-Gray-100, #F7F8FA)';
+    /** Custom color for the progress fill (overrides severity) */
+    color = '';
+    render() {
+        const fillStyle = {
+            width: `${Math.min(100, Math.max(0, this.value))}%`,
+            backgroundColor: this.color || `var(--${this.getSeverityVariable()}, #50A5F1)`,
+        };
+        return (hAsync("div", { key: 'f68b88240ebc188f1f0378424b8d1617c2e7440e', class: "progress-container" }, this.showValue && (hAsync("div", { key: 'f8116e4eb824031d4bd1ac9d694e2bd3bca1ed6d', class: "progress-header" }, hAsync("span", { key: '892813f8e0a028ce286c00edd0489d489dd271c4', class: "progress-value" }, this.value, "%"))), hAsync("div", { key: '2e740487a59df1ec7def96565a9ee64d53b773b8', class: "progress-track", style: { height: this.height, backgroundColor: this.trackColor } }, hAsync("div", { key: '4f6fd1c436563cacac31e385d84c4a21945f6e10', class: "progress-fill", style: fillStyle }))));
+    }
+    getSeverityVariable() {
+        switch (this.severity) {
+            case 'success': return 'Success-Success-500';
+            case 'warning': return 'Warning-Warning-500';
+            case 'error': return 'Error-Error-500';
+            case 'info': return 'Info-Info-500';
+            case 'neutral': return 'Gray-Gray-400';
+            default: return 'Primary-Primary-500';
+        }
+    }
+    static get style() { return dropiProgressBarCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 521,
+        "$tagName$": "dropi-progress-bar",
+        "$members$": {
+            "value": [2],
+            "severity": [1],
+            "height": [1],
+            "showValue": [4, "show-value"],
+            "trackColor": [1, "track-color"],
+            "color": [1]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;align-self:center;vertical-align:middle;margin:0}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
 
 /**
@@ -10025,7 +10127,7 @@ const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::aft
 class DropiRadioButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChange = createEvent(this, "onChange", 7);
+        this.dropiChange = createEvent(this, "dropiChange");
     }
     /** Label text displayed next to the radio */
     label = '';
@@ -10041,17 +10143,17 @@ class DropiRadioButton {
      */
     resetTrigger = false;
     /** Emitted when the radio is selected */
-    onChange;
+    dropiChange;
     onResetTrigger(val) {
         if (val)
             this.checked = false;
     }
     handleChange(e) {
         this.checked = e.target.checked;
-        this.onChange.emit(e);
+        this.dropiChange.emit(e);
     }
     render() {
-        return (hAsync("div", { key: '86430f601f7ddb6144682c0356938886217eb2ae', class: "dropi-radio-button" }, hAsync("label", { key: '653fa8d5c33fc64ab44174e6d0fe35c6fd992be7', htmlFor: this.id }, hAsync("input", { key: 'd99eae69867b0a09b6585a18dfaa52da353c5bd2', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (hAsync("div", { key: '9f4c4f3be63c0aa0bcd1c48dacb97cec903db98d', class: "dropi-radio-button" }, hAsync("label", { key: 'c29bd1ccc6c468b57fdcb4dd6c15cf541255cb71', htmlFor: this.id }, hAsync("input", { key: '19533ffd5e5eb1b43d7e0f42971aa81652c8c926', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -10085,8 +10187,8 @@ const dropiRadioSelectionListCss = () => `:host{display:block;width:100%}*,*::be
 class DropiRadioSelectionList {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.valueChange = createEvent(this, "valueChange", 7);
-        this.onSearch = createEvent(this, "onSearch", 7);
+        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiSearch = createEvent(this, "dropiSearch");
     }
     /** Options array or JSON string */
     options = [];
@@ -10105,9 +10207,9 @@ class DropiRadioSelectionList {
     filterText = '';
     parsedOptions = [];
     /** Emitted on selection change. e.detail = selected option id */
-    valueChange;
+    dropiChange;
     /** Emitted on search — matches Angular 'onSearch' */
-    onSearch;
+    dropiSearch;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -10119,12 +10221,12 @@ 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: '296bdc955d13b8163ca954f6d399543343e7e121', class: "rsl" }, this.showFilter && (hAsync("div", { key: '4cdd3764411f389d2b6ce1145f5b6759bb20fc7b', class: "rsl__search" }, hAsync("dropi-icon", { key: '81af80a3dddb6176625b6ba575b084501741cd81', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: 'aa0e762f4403431225375f95c792af8596529588', 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 => {
+                this.dropiSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });
+            } }))), hAsync("div", { key: 'd153875a1c09957b74648f61f70320968ea6cd40', 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)))));
+            return (hAsync("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.dropiChange.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)))));
         }))));
     }
     static get watchers() { return {
@@ -10187,7 +10289,7 @@ class DropiReadMore {
     }
     render() {
         const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
-        return (hAsync("div", { key: '125c5f1d75c1e06f02d9898f375626bb75a67cd8', class: "read-more" }, hAsync("p", { key: '4a4450a3468e7fe7297fdae98d370f8cd77b8553', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (hAsync("button", { key: 'cfe58b2781b908d9a0a802b4bd68cedf8dea827e', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
+        return (hAsync("div", { key: '6accf9aa0a6f7377c7de6e8cbcb9e2a7ee99573a', class: "read-more" }, hAsync("p", { key: '96e5493df8b065008f9bc45cea1ba768eabfc0a2', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (hAsync("button", { key: '195d962715c5c618701c3e86df618289915e3a9b', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
     }
     static get style() { return dropiReadMoreCss(); }
     static get cmpMeta() { return {
@@ -10217,12 +10319,12 @@ const dropiSearchCss = () => `:host{display:block;width:100%;position:relative}*
 class DropiSearch {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onInput = createEvent(this, "onInput", 7);
-        this.onBlur = createEvent(this, "onBlur", 7);
-        this.onKeyEnter = createEvent(this, "onKeyEnter", 7);
-        this.onChange = createEvent(this, "onChange", 7);
-        this.onClear = createEvent(this, "onClear", 7);
-        this.modelChange = createEvent(this, "modelChange", 7);
+        this.dropiInput = createEvent(this, "dropiInput");
+        this.dropiBlur = createEvent(this, "dropiBlur");
+        this.dropiKeyEnter = createEvent(this, "dropiKeyEnter");
+        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiClear = createEvent(this, "dropiClear");
+        this.dropiModelChange = createEvent(this, "dropiModelChange");
     }
     /** Visual variant (matches Angular `type`) */
     type = 'default';
@@ -10256,17 +10358,17 @@ class DropiSearch {
     selected = [];
     parsedOptions = [];
     /** Emitted on input change. e.detail = current text */
-    onInput;
+    dropiInput;
     /** Emitted on blur */
-    onBlur;
+    dropiBlur;
     /** Emitted when Enter is pressed. e.detail = current text */
-    onKeyEnter;
+    dropiKeyEnter;
     /** Emitted on change event of the native input (matches Angular `onChange`) */
-    onChange;
+    dropiChange;
     /** Emitted when clear button clicked */
-    onClear;
+    dropiClear;
     /** Emitted when selection changes. e.detail = selected items */
-    modelChange;
+    dropiModelChange;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -10282,20 +10384,20 @@ class DropiSearch {
     handleInput(e) {
         this.textInput = e.target.value;
         this.open = this.parsedOptions.length > 0;
-        this.onInput.emit(this.textInput);
-        this.onChange.emit(this.textInput);
+        this.dropiInput.emit(this.textInput);
+        this.dropiChange.emit(this.textInput);
     }
     handleKeyDown(e) {
         if (e.key === 'Enter')
-            this.onKeyEnter.emit(this.textInput);
+            this.dropiKeyEnter.emit(this.textInput);
         if (e.key === 'Escape')
             this.open = false;
     }
     handleClear() {
         this.textInput = '';
         this.open = false;
-        this.onClear.emit();
-        this.onInput.emit('');
+        this.dropiClear.emit();
+        this.dropiInput.emit('');
     }
     isSelected(opt) {
         return this.selected.some(s => s[this.dataName] === opt[this.dataName]);
@@ -10314,14 +10416,14 @@ class DropiSearch {
             this.selected = [opt];
             this.open = false;
         }
-        this.modelChange.emit(this.selected);
+        this.dropiModelChange.emit(this.selected);
     }
     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: '594b15b4b31044f4a02376dc773ea36da893d773', class: "search-wrap" }, this.label && hAsync("label", { key: '297a989441ad892715b09421f9a53618851c1b52', class: "search-label" }, this.label), hAsync("div", { key: '6bbaf4ea5c1bc6ff831626117fccde647e68ba19', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && hAsync("dropi-icon", { key: 'e94c3a3895a14e950a018023d5d7a281a230abae', class: "search-icon", name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), hAsync("input", { key: '820bf2f4c9ecaf9907aceaaa08bd3fa309606e90', 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.dropiBlur.emit(); } }), this.showClear && this.textInput && (hAsync("button", { key: 'e2fd7c3d5fee45a83f030589f58d4fee9f3af69c', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, hAsync("dropi-icon", { key: 'a530b0adb83d76b205cd2b22792f14229950836e', name: "Close-small", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), showDropdown && (hAsync("div", { key: '8c062d43dccb41c84b2a599ed6d1a5e049a75b65', 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": [{
@@ -10357,7 +10459,7 @@ class DropiSearch {
     }; }
 }
 
-const dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #ffffff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #ffffff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:var(--font-weight-bold);display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:var(--font-weight-bold);white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}`;
+const dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}.select-dropdown-overlay.within-modal{position:absolute}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #ffffff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #ffffff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:var(--font-weight-bold);display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:var(--font-weight-bold);white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}`;
 
 /**
  * @component dropi-select
@@ -10382,11 +10484,11 @@ const dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*
 class DropiSelect {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChangeSelect = createEvent(this, "onChangeSelect", 7);
-        this.onClear = createEvent(this, "onClear", 7);
-        this.onSearch = createEvent(this, "onSearch", 7);
-        this.scrolledToEnd = createEvent(this, "scrolledToEnd", 7);
-        this.onKeyEnter = createEvent(this, "onKeyEnter", 7);
+        this.dropiChangeSelect = createEvent(this, "dropiChangeSelect");
+        this.dropiClear = createEvent(this, "dropiClear");
+        this.dropiSearch = createEvent(this, "dropiSearch");
+        this.dropiScrollEnd = createEvent(this, "dropiScrollEnd");
+        this.dropiKeyEnter = createEvent(this, "dropiKeyEnter");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -10432,6 +10534,8 @@ class DropiSelect {
     selectedOption = null;
     /** Custom CSS class for the dropdown overlay */
     overlayClass = '';
+    /** If true, uses absolute positioning instead of fixed (better for modals with transforms) */
+    withinModal = false;
     /**
      * Convenience object prop — matches Angular `selectProperties: SelectProperties`.
      * Fields: label, placeholder, options, showObligatory, textHelper,
@@ -10451,15 +10555,15 @@ class DropiSelect {
     };
     // ── Events ───────────────────────────────────────────────────
     /** Emitted when an option is selected — matches Angular 'onChangeSelect' */
-    onChangeSelect;
+    dropiChangeSelect;
     /** Emitted when the selection is cleared — matches Angular 'onClear' */
-    onClear;
+    dropiClear;
     /** Emitted on search input — matches Angular 'onSearch' */
-    onSearch;
+    dropiSearch;
     /** Emitted when the list is scrolled to the end — matches Angular 'scrolledToEnd' */
-    scrolledToEnd;
+    dropiScrollEnd;
     /** Emitted on Enter key inside search — matches Angular 'onKeyEnter' */
-    onKeyEnter;
+    dropiKeyEnter;
     // ── Lifecycle ────────────────────────────────────────────────
     componentWillLoad() {
         if (this.selectProperties)
@@ -10540,13 +10644,27 @@ class DropiSelect {
         this._selectedOption = null;
         this.multiSelected = [];
         this.internals.setFormValue('');
-        this.onClear.emit();
+        this.dropiClear.emit();
     }
     /** Reset multi-select state and show a placeholder label */
     async resetMultiSelect(_placeholder) {
         this.multiSelected = [];
         this.internals.setFormValue('');
     }
+    // ── Scroll & Resize listeners ──────────────────────────────
+    handleWindowScroll(e) {
+        if (!this.isOpen || this.withinModal)
+            return;
+        // When scroll originates inside shadow DOM, e.target is retargeted to the host element
+        if (e.target === this.el)
+            return;
+        this.closeDropdown();
+    }
+    handleWindowResize() {
+        if (this.isOpen && !this.withinModal) {
+            this.closeDropdown();
+        }
+    }
     // ── Click outside ────────────────────────────────────────────
     handleOutsideClick(e) {
         if (this.isOpen && !e.composedPath().includes(this.el)) {
@@ -10590,8 +10708,8 @@ class DropiSelect {
         return this.placeholder;
     }
     // ── Dropdown positioning ─────────────────────────────────────
-    openDropdown() {
-        if (this.disabled)
+    updateDropdownPosition() {
+        if (!this.buttonRef)
             return;
         const rect = this.buttonRef.getBoundingClientRect();
         const viewportHeight = window.innerHeight;
@@ -10605,6 +10723,18 @@ class DropiSelect {
             left: `${rect.left}px`,
             width: `${rect.width}px`,
         };
+    }
+    openDropdown() {
+        if (this.withinModal) {
+            this.dropdownStyle = {
+                top: `${this.el.offsetHeight}px`,
+                left: '0px',
+                width: '100%',
+            };
+        }
+        else {
+            this.updateDropdownPosition();
+        }
         this.isOpen = true;
         if (this.searchEnabled) {
             setTimeout(() => {
@@ -10634,12 +10764,12 @@ class DropiSelect {
                 this.multiSelected = [...this.multiSelected, option];
             }
             this.internals.setFormValue(this.multiSelected.map(o => o.id).join(','));
-            this.onChangeSelect.emit([...this.multiSelected]);
+            this.dropiChangeSelect.emit([...this.multiSelected]);
         }
         else {
             this._selectedOption = option;
             this.internals.setFormValue(String(option.id));
-            this.onChangeSelect.emit(option);
+            this.dropiChangeSelect.emit(option);
             this.closeDropdown();
         }
     }
@@ -10649,7 +10779,7 @@ class DropiSelect {
     // ── Search ───────────────────────────────────────────────────
     handleSearch(term) {
         this.searchTerm = term;
-        this.onSearch.emit(term);
+        this.dropiSearch.emit(term);
         const lower = term.toLowerCase().trim();
         if (!lower) {
             this.filteredOptions = [...this.options];
@@ -10677,7 +10807,7 @@ class DropiSelect {
                 this.hasEmittedScrollEnd = false;
             this.lastScrollTop = el.scrollTop;
             if (distFromBottom <= threshold && !this.hasEmittedScrollEnd) {
-                this.scrolledToEnd.emit();
+                this.dropiScrollEnd.emit();
                 this.hasEmittedScrollEnd = true;
                 setTimeout(() => { this.hasEmittedScrollEnd = false; }, 1000);
             }
@@ -10696,7 +10826,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)
@@ -10706,7 +10836,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
@@ -10718,23 +10848,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} ${this.withinModal ? 'within-modal' : ''}`, 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.dropiKeyEnter.emit(e);
+            } }), 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: '4f34c329d9993926758230f0e9ca0f8d0e57ef6e', class: "custom-select" }, !this.dropdownType && this.label && (hAsync("label", { key: '743013592658ee415d4a9e3db8ec648472a3428e', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && hAsync("span", { key: '56183248733eb18956664c859c8f7d4057f3fa11', class: "asterisk" }, " *"))), hAsync("div", { key: 'c93f45456478ac5419d542512092e877a04f28b7', class: "dropdown-container" }, this.dropdownType && this.label && (hAsync("div", { key: '0632779b9ba71f1fb91944b54b477999f607a3f5', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (hAsync("div", { key: '3e57fc2b53715abb9800db573119cf77b0333d37', class: "select-helper" }, hAsync("span", { key: 'baf3d1f0ae4d535acae2a08df8d2079996afdcff' }, this.textHelper))), this.hasError && this.errorText && (hAsync("div", { key: '8b25aae92b9370a02fcfd81f50b98df145d3cb0e', class: "select-helper-error" }, hAsync("dropi-icon", { key: '60643f0b7e54f8533dc9fd7dd17715aec59d851c', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), hAsync("span", { key: '35bcdfd3c9825cbac269b1085d4c552df694f33a' }, this.errorText))), this.renderDropdown()));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -10775,6 +10905,7 @@ class DropiSelect {
             "defaultSelectedId": [1032, "default-selected-id"],
             "selectedOption": [1040],
             "overlayClass": [1, "overlay-class"],
+            "withinModal": [4, "within-modal"],
             "selectProperties": [8, "select-properties"],
             "isOpen": [32],
             "_selectedOption": [32],
@@ -10787,7 +10918,7 @@ class DropiSelect {
             "clearSelection": [64],
             "resetMultiSelect": [64]
         },
-        "$listeners$": [[4, "click", "handleOutsideClick"]],
+        "$listeners$": [[11, "scroll", "handleWindowScroll"], [9, "resize", "handleWindowResize"], [4, "click", "handleOutsideClick"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["disabled", "disabled"]]
     }; }
@@ -10803,7 +10934,7 @@ const dropiSidebarCss = () => `:host{display:block}.main-sidebar-container{margi
 class DropiSidebar {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onIndexChanged = createEvent(this, "onIndexChanged", 7);
+        this.dropiIndexChange = createEvent(this, "dropiIndexChange");
     }
     /**
      * Define las propiedades y la cantidad de elementos a renderizar.
@@ -10813,7 +10944,7 @@ class DropiSidebar {
     /**
      * Evento emitido cuando se selecciona una opción en el menú o un sub-hijo.
      */
-    onIndexChanged;
+    dropiIndexChange;
     parsedProperties = [];
     watchPropHandler(newValue) {
         this.parsedProperties = typeof newValue === 'string' ? JSON.parse(newValue) : (newValue || []);
@@ -10833,26 +10964,26 @@ class DropiSidebar {
         }
     }
     onItemClick(itemClicked) {
-        this.onIndexChanged.emit(itemClicked);
+        this.dropiIndexChange.emit(itemClicked);
         if (itemClicked.subItems && itemClicked.subItems.length > 0) {
             this.setExpandedPropertie(itemClicked.id);
         }
     }
     onSubItemClick(itemClicked) {
-        this.onIndexChanged.emit(itemClicked);
+        this.dropiIndexChange.emit(itemClicked);
     }
     render() {
-        return (hAsync("div", { key: '9f79e6370ff61c6278a8238b0dc92881832f9b8f', class: "main-sidebar-container" }, this.parsedProperties.map(item => {
+        return (hAsync("div", { key: '3e45416a116488871747c54c14cbb73ecf1d9a4d', class: "main-sidebar-container" }, this.parsedProperties.map(item => {
             return [
                 /* Item Principal */
                 hAsync("div", { class: {
                         '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,
@@ -11065,7 +11196,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(); }
@@ -11094,21 +11225,21 @@ const dropiSwitchCss = () => `:host{display:inline-block}*,*::before,*::after{bo
 class DropiSwitch {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onChange = createEvent(this, "onChange", 7);
+        this.dropiChange = createEvent(this, "dropiChange");
     }
     /** Whether the switch is on */
     isChecked = false;
     /** Whether the switch is disabled */
     disabled = false;
     /** Emitted when the toggle state changes */
-    onChange;
+    dropiChange;
     onToggleChange(event) {
         const input = event.target;
         this.isChecked = input.checked;
-        this.onChange.emit(this.isChecked);
+        this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (hAsync("label", { key: 'c12214e051cfd7ca50d0df9fb3374ee9f3b72c1a', class: "toggle-switch" }, hAsync("input", { key: '2821a935d4614447900d35028261b5c6620c104f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), hAsync("span", { key: '1370a1ea4b9bb48849f9d998eac3a36ac3fa75b6', class: "slider" })));
+        return (hAsync("label", { key: '977f209e9d6411bf386637c1073dca0f5d1c72f3', class: "toggle-switch" }, hAsync("input", { key: '8deef7c0c079d8d5662bd05372eb74d5cc68429f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), hAsync("span", { key: '2f6dd3b87996271d0c6abddc86697791de4da9b1', class: "slider" })));
     }
     static get formAssociated() { return true; }
     static get style() { return dropiSwitchCss(); }
@@ -11134,20 +11265,20 @@ const dropiTableCss = () => `:host{display:block;width:100%;min-width:0}*,*::bef
 class DropiTable {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiSort = createEvent(this, "dropiSort", 7);
-        this.dropiSelection = createEvent(this, "dropiSelection", 7);
-        this.dropiRowClick = createEvent(this, "dropiRowClick", 7);
-        this.dropiSearch = createEvent(this, "dropiSearch", 7);
-        this.dropiPageChange = createEvent(this, "dropiPageChange", 7);
-        this.dropiPageSizeChange = createEvent(this, "dropiPageSizeChange", 7);
-        this.dropiAction = createEvent(this, "dropiAction", 7);
-        this.rowsSelected = createEvent(this, "rowsSelected", 7);
-        this.actionClicked = createEvent(this, "actionClicked", 7);
-        this.onPageChange = createEvent(this, "onPageChange", 7);
-        this.onSizeChange = createEvent(this, "onSizeChange", 7);
-        this.onSortChange = createEvent(this, "onSortChange", 7);
-        this.onSearchChange = createEvent(this, "onSearchChange", 7);
-        this.expandChildren = createEvent(this, "expandChildren", 7);
+        this.dropiSort = createEvent(this, "dropiSort");
+        this.dropiSelection = createEvent(this, "dropiSelection");
+        this.dropiRowClick = createEvent(this, "dropiRowClick");
+        this.dropiSearch = createEvent(this, "dropiSearch");
+        this.dropiPageChange = createEvent(this, "dropiPageChange");
+        this.dropiPageSizeChange = createEvent(this, "dropiPageSizeChange");
+        this.dropiAction = createEvent(this, "dropiAction");
+        this.dropiRowsSelected = createEvent(this, "dropiRowsSelected");
+        this.dropiActionClick = createEvent(this, "dropiActionClick");
+        this.dropiPageChangeAngular = createEvent(this, "dropiPageChangeAngular");
+        this.dropiSizeChangeAngular = createEvent(this, "dropiSizeChangeAngular");
+        this.dropiSortChangeAngular = createEvent(this, "dropiSortChangeAngular");
+        this.dropiSearchChangeAngular = createEvent(this, "dropiSearchChangeAngular");
+        this.expandChildren = createEvent(this, "expandChildren");
     }
     /** Column definitions */
     columns = [];
@@ -11160,7 +11291,7 @@ class DropiTable {
     /** Empty state message */
     emptyMessage = 'No hay datos disponibles';
     /** Table title */
-    title = '';
+    tableTitle = '';
     /** Show search input */
     showSearch = false;
     /** Show column selector button */
@@ -11220,17 +11351,17 @@ class DropiTable {
     dropiAction;
     // ── Angular-parity events ────────────────────────────────────
     /** Matches Angular `rowsSelected` */
-    rowsSelected;
+    dropiRowsSelected;
     /** Matches Angular `actionClicked` */
-    actionClicked;
+    dropiActionClick;
     /** Matches Angular `onPageChange` */
-    onPageChange;
+    dropiPageChangeAngular;
     /** Matches Angular `onSizeChange` */
-    onSizeChange;
+    dropiSizeChangeAngular;
     /** Matches Angular `onSortChange` */
-    onSortChange;
+    dropiSortChangeAngular;
     /** Matches Angular `onSearchChange` */
-    onSearchChange;
+    dropiSearchChangeAngular;
     /** Matches Angular `expandChildren` */
     expandChildren;
     columnsChanged(val) {
@@ -11322,7 +11453,7 @@ class DropiTable {
             this.sortAsc = true;
         }
         this.dropiSort.emit({ key: this.sortKey, dir: this.sortDir });
-        this.onSortChange.emit({ key: this.sortKey, dir: this.sortDir });
+        this.dropiSortChangeAngular.emit({ key: this.sortKey, dir: this.sortDir });
     }
     toggleRow(idx) {
         const next = new Set(this.selectedKeys);
@@ -11333,13 +11464,13 @@ class DropiTable {
         this.selectedKeys = next;
         const selected = Array.from(next);
         this.dropiSelection.emit(selected);
-        this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));
+        this.dropiRowsSelected.emit(selected.map(i => this.pagedRows[i]));
     }
     toggleAll(checked) {
         this.selectedKeys = checked ? new Set(this.pagedRows.map((_, i) => i)) : new Set();
         const selected = Array.from(this.selectedKeys);
         this.dropiSelection.emit(selected);
-        this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));
+        this.dropiRowsSelected.emit(selected.map(i => this.pagedRows[i]));
     }
     renderCellValue(value) {
         if (value === null || value === undefined)
@@ -11353,13 +11484,21 @@ 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':
                     return (hAsync("div", { class: "image-label" }, hAsync("div", { class: "img-container" }, hAsync("img", { src: value.imageUrl, alt: value.value })), hAsync("span", null, value.value)));
                 case 'textWrap':
                     return hAsync("div", { class: "text-wrap-label", style: { maxWidth: value.maxWidth || '220px' } }, value.value);
+                case 'textCopy':
+                case 'tokenAction':
+                    return (hAsync("div", { class: "text-icon-label", style: { display: 'flex', alignItems: 'center' } }, hAsync("div", { style: { display: 'flex', alignItems: 'center' } }, hAsync("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, value.value)), hAsync("div", { style: { display: 'flex', justifyContent: 'flex-start', paddingLeft: '0.5rem' } }, hAsync("dropi-icon", { name: value.revealed ? "Clon" : "Eye", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500", style: { cursor: 'pointer', flexShrink: '0' }, onClick: (e) => {
+                            e.stopPropagation();
+                            const actionId = value.revealed ? 'copy' : 'reveal';
+                            this.dropiAction.emit({ row: value.row, action: { id: actionId, value: value.value } });
+                            this.dropiActionClick.emit({ row: value.row, action: { id: actionId, value: value.value } });
+                        } }))));
                 default:
                     return hAsync("span", { class: "table-labels" }, String(value.value ?? '—'));
             }
@@ -11374,11 +11513,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, onDropiInput: (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.dropiSearchChangeAngular.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", 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);
@@ -11389,15 +11528,15 @@ 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, onDropiChange: (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), onDropiChange: () => 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 > 2 ? (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.dropiActionClick.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.dropiActionClick.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);
-                this.onSizeChange.emit(this.pageSize);
-            } }, this.parsedPageSizes.map(s => (hAsync("option", { value: s, selected: this.pageSize === s }, s))))), hAsync("dropi-paginator", { totalPages: this.totalPages, currentPage: this.currentPage, onPageChange: (e) => {
+                this.dropiSizeChangeAngular.emit(this.pageSize);
+            } }, this.parsedPageSizes.map(s => (hAsync("option", { value: s, selected: this.pageSize === s }, s))))), hAsync("dropi-paginator", { totalPages: this.totalPages, currentPage: this.currentPage, onDropiPageChange: (e) => {
                 this.currentPage = e.detail;
                 this.dropiPageChange.emit(e.detail);
-                this.onPageChange.emit(e.detail);
+                this.dropiPageChangeAngular.emit(e.detail);
             } })))));
     }
     static get watchers() { return {
@@ -11430,7 +11569,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"],
@@ -11481,7 +11620,7 @@ const dropiTabsCss = () => `:host{display:block;width:100%}*,*::before,*::after{
 class DropiTabs {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onIndexChanged = createEvent(this, "onIndexChanged", 7);
+        this.dropiIndexChange = createEvent(this, "dropiIndexChange");
     }
     /** Array of TabItem or JSON string (matches Angular 'configuration') */
     configuration = [];
@@ -11492,7 +11631,7 @@ class DropiTabs {
     /** Stop tab action programmatically */
     stopAction = false;
     /** Emitted on tab click. e.detail = TabItem */
-    onIndexChanged;
+    dropiIndexChange;
     parsedTabs = [];
     tabsChanged(val) {
         this.parsedTabs = typeof val === 'string' ? JSON.parse(val) : (val ?? []);
@@ -11504,13 +11643,13 @@ class DropiTabs {
         if (tab.disabled || this.stopAction)
             return;
         this.activeTab = tab.id;
-        this.onIndexChanged.emit(tab);
+        this.dropiIndexChange.emit(tab);
     }
     render() {
-        return (hAsync("div", { key: '337040015b29581ebb15ac347bb62220ed0a2d4d', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
+        return (hAsync("div", { key: '5e8facb7611d02c9b7fad97f676a50ce419c6852', 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" }))));
         })));
     }
@@ -11536,7 +11675,7 @@ class DropiTabs {
     }; }
 }
 
-const dropiTagCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.container-chips{display:inline-block}.tags{display:inline-flex;padding:4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:var(--Border-5, 9999px);overflow:hidden;text-align:center;text-overflow:ellipsis;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);line-height:var(--Size-5, 24px);animation:fade-in 200ms ease-out}.tags.icon-only{gap:0}.file-icon{display:flex}@keyframes fade-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}`;
+const dropiTagCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.container-chips{display:flex;align-items:center;justify-content:center}.tags{display:inline-flex;padding:4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:var(--Border-5, 9999px);overflow:hidden;text-align:center;text-overflow:ellipsis;font-size:var(--font-size-xs, 12px);font-weight:var(--font-weight-medium, 500);line-height:var(--lineheight-large, 150%);animation:fade-in 200ms ease-out}.tags.dot-variant,.tags.text-variant{padding:0;gap:8px;background-color:transparent !important;line-height:normal}.dot-indicator{width:10px;height:10px;border-radius:50%;flex-shrink:0}@keyframes fade-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}`;
 
 /**
  * @component dropi-tag
@@ -11546,6 +11685,8 @@ class DropiTag {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    /** tag (default) | dot (status dot + text) | text (colored text only) */
+    variant = 'tag';
     /** primary (filled) | secondary (soft) */
     type = 'primary';
     /** Color state of the tag */
@@ -11574,11 +11715,25 @@ class DropiTag {
     }
     get textColor() {
         const base = this.colorMap[this.state];
+        if (this.variant === 'text')
+            return this.dotColor;
+        if (this.variant === 'dot' || this.showIcon) {
+            return 'var(--Gray-Gray-500)';
+        }
         if (this.type === 'primary')
             return `var(--Neutral-White)`;
         const shade = this.state === 'default' ? '-500' : '-700';
         return `var(--${base}${shade})`;
     }
+    get dotColor() {
+        const base = this.colorMap[this.state];
+        return `var(--${base}-500)`;
+    }
+    get fontWeight() {
+        if (this.type === 'secondary' && !this.showIcon)
+            return '300';
+        return '500';
+    }
     get iconColor() {
         if (this.type === 'primary')
             return 'Neutral-White';
@@ -11590,7 +11745,16 @@ 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: '6a50111c0057b7ef3380dde9f639e9409b7fbea9', class: "container-chips" }, hAsync("div", { key: 'f2f78c3682aa2e8bef5f3f1b43a1729cae8ae293', class: {
+                tags: true,
+                'icon-only': this.showIcon && !this.hasContent,
+                'dot-variant': this.variant === 'dot',
+                'text-variant': this.variant === 'text'
+            }, style: {
+                backgroundColor: (this.variant === 'dot' || this.variant === 'text') ? 'transparent' : this.bgColor,
+                color: this.textColor,
+                fontWeight: this.fontWeight
+            } }, this.variant === 'dot' && (hAsync("div", { key: '5364569230575b79b1160e06cc29046220bdf198', class: "dot-indicator", style: { backgroundColor: this.dotColor } })), this.showIcon && this.icon && (hAsync("dropi-icon", { key: '8ea74f9ad58e7892405e3e748289b71456945de6', class: "file-icon", name: this.icon, iconWidth: "16px", iconHeight: "16px", color: this.variant === 'dot' ? 'Gray-Gray-500' : this.iconColor })), this.hasContent && hAsync("span", { key: '99409549735fd48cf0a40e411f1f236716e53939' }, this.text))));
     }
     static get watchers() { return {
         "type": [{
@@ -11598,6 +11762,9 @@ class DropiTag {
             }],
         "state": [{
                 "propsChanged": 0
+            }],
+        "variant": [{
+                "propsChanged": 0
             }]
     }; }
     static get style() { return dropiTagCss(); }
@@ -11605,6 +11772,7 @@ class DropiTag {
         "$flags$": 521,
         "$tagName$": "dropi-tag",
         "$members$": {
+            "variant": [513],
             "type": [513],
             "state": [513],
             "showIcon": [4, "show-icon"],
@@ -11613,7 +11781,7 @@ class DropiTag {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["type", "type"], ["state", "state"], ["icon", "icon"], ["text", "text"]]
+        "$attrsToReflect$": [["variant", "variant"], ["type", "type"], ["state", "state"], ["icon", "icon"], ["text", "text"]]
     }; }
 }
 
@@ -11630,7 +11798,7 @@ class DropiTagTypeProduct {
     /** Label text. Default: VARIABLE */
     label = 'VARIABLE';
     render() {
-        return hAsync("div", { key: 'ae1cd50cd3e82180704ae4f5406b4dc13ffbd12c', class: "type-variation" }, this.label);
+        return hAsync("div", { key: '6d27b4fc40c66e6bfd8400e4727aa9a9c2e8dc8c', class: "type-variation" }, this.label);
     }
     static get style() { return dropiTagTypeProductCss(); }
     static get cmpMeta() { return {
@@ -11655,10 +11823,10 @@ const dropiTextAreaCss = () => `:host{display:flex;flex-direction:column;width:1
 class DropiTextArea {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiInput = createEvent(this, "dropiInput", 7);
-        this.dropiChange = createEvent(this, "dropiChange", 7);
-        this.dropiFocus = createEvent(this, "dropiFocus", 7);
-        this.dropiBlur = createEvent(this, "dropiBlur", 7);
+        this.dropiInput = createEvent(this, "dropiInput");
+        this.dropiChange = createEvent(this, "dropiChange");
+        this.dropiFocus = createEvent(this, "dropiFocus");
+        this.dropiBlur = createEvent(this, "dropiBlur");
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -11760,12 +11928,12 @@ class DropiTextArea {
     render() {
         const showAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showHelper = this.textHelper || this.isInvalid;
-        return (hAsync("div", { key: 'd2333346006f94a5582d49cb2f34237b8b97d039', class: "textarea-wrapper" }, this.label && (hAsync("label", { key: '0963e3d312bec5a96b4b3f8387c07ecfd97d6906', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && hAsync("span", { key: '1e9bfecb2669fe2c6cd8b74a153fe21bbf8053b9', class: "asterisk" }, " *"))), hAsync("div", { key: '6ac5236d0cb7ec4322339048eb364b7c41bfea5e', class: "textarea-container" }, hAsync("textarea", { key: '94a18a7af80592659237d54e5897fcbd8b4aa47c', id: this.resolvedId, class: {
+        return (hAsync("div", { key: 'cd317dd0e813d6ce6ae659b56ddac00fa822e68e', class: "textarea-wrapper" }, this.label && (hAsync("label", { key: '220344751b55843a6d1ee3a8188b53e8d0fc5d34', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && hAsync("span", { key: '3ddb9f3adac61fa8990f81e16ae6334de8552849', class: "asterisk" }, " *"))), hAsync("div", { key: '1a6d603bd7cfe7e6b37fd20c4dad6c7bc2bf0278', class: "textarea-container" }, hAsync("textarea", { key: '3eb838fece4e03cc68be9e01eeb1e02709a926f9', id: this.resolvedId, class: {
                 'form-control': true,
                 '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: '49dfd2cb7fe373769a945c405e58e7716e9489f2', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (hAsync("div", { key: 'e1388e815c35baab42466029ae17914da28c9294', class: "form-control-helper" }, this.isInvalid && (hAsync("dropi-icon", { key: '39aebce7cca327e9c535ce918d053eb5f106f734', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" })), hAsync("span", { key: 'ae255ca0db1e35e0069ef8b68fa901bced14ba8a', 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 {
@@ -11829,9 +11997,9 @@ class DropiTimeLine {
     }
     render() {
         const steps = this.parsedSteps;
-        return (hAsync("div", { key: '0b43d3e673cda6f31476abcbc55ef2b6b9dbd7ac', class: "timeline" }, steps.map((step, i) => {
+        return (hAsync("div", { key: '22a2f8ff7a33e892096c3aaf381e23b110ec6b0a', 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(); }
@@ -11901,7 +12069,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: '962972e53e84a968b538feb28c2588f9051276ff', 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 {
@@ -11935,7 +12103,7 @@ class DropiTooltip {
     /** Whether the tooltip has an outline style (matches Angular `outlined`) */
     outlined = false;
     render() {
-        return (hAsync("div", { key: '0b14943b628c231fbb530620e7829f70e6099c7a', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, hAsync("slot", { key: 'bf0245c6fab0ba938834d2d3e84ccaa9cb14f5c8' }), this.text && (hAsync("div", { key: 'e1e33acf8628f79b36c5cc66c7076a03ce8167f7', class: "tooltip-simple-bubble" }, this.text))));
+        return (hAsync("div", { key: '1c580849e5fdfc99ecfedc7c14508dfd50b789c9', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, hAsync("slot", { key: '8881e587966e67408a725e36a5a45828755e10a6' }), this.text && (hAsync("div", { key: 'f4f1c4a1d47e3324fe4d9af25d46342c4c650a0f', class: "tooltip-simple-bubble" }, this.text))));
     }
     static get style() { return dropiTooltipCss$1(); }
     static get cmpMeta() { return {
@@ -12076,12 +12244,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: 'e2ce31df52e00568920e754904b1f5910ff4c8ba', class: "tooltip-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleClick, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout }, this.showIcon && (hAsync("dropi-icon", { key: 'aa3213451bcfb60561043b0c3854bb20c3a4703a', name: this.iconName, iconWidth: `${this.iconSize}px`, iconHeight: `${this.iconSize}px`, color: this.iconColor })), hAsync("slot", { key: '5ce4929e6f96d4c605d149a970aba1746e82078a' }), this.displayContent && (hAsync("div", { key: '66a1193abf25ce4161ec35f1ca0c344ec418cce8', 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: '168741ebb1986f7235aee5be58695ae7cfacfe7b', class: "tooltip-close", onClick: this.handleClose, "aria-label": "Cerrar" }, hAsync("dropi-icon", { key: 'c9154dada59cced1056f24689591f0fead22328f', name: "Close-small", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-500" }))), this.title && !this.text && hAsync("strong", { key: 'cd432eb19d7616f50d27613b55c191d59f70732e', class: "tooltip-title" }, this.title), this.label && !this.text && hAsync("span", { key: 'c443cab1372947d0219a7384f491184fb1a7c5b3', class: "tooltip-label" }, this.label), this.text && hAsync("span", { key: 'ea5dafb67ec9533052a66cf045b288cbefdf9d69' }, this.text), hAsync("span", { key: '977257d29af4688c8a264685a1687c048faac9e5', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
     }
     static get style() { return dropiTooltipCss(); }
     static get cmpMeta() { return {
@@ -12120,7 +12288,7 @@ const dropiVerticalStepsCss = () => `:host{display:block}*,*::before,*::after{bo
 class DropiVerticalSteps {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.stepClick = createEvent(this, "stepClick", 7);
+        this.stepClick = createEvent(this, "stepClick");
     }
     /** Array of steps. Pass as JSON string or array */
     steps = [];
@@ -12155,11 +12323,11 @@ class DropiVerticalSteps {
     }
     render() {
         const steps = this.parsedSteps;
-        return (hAsync("div", { key: 'c1ffd563da957d398f064ee0423f50f21d7e45b6', class: "vertical-steps" }, steps.map((step, i) => {
+        return (hAsync("div", { key: '9b0e19a21eaa78b51d82994747604623f9431d56', class: "vertical-steps" }, steps.map((step, i) => {
             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(); }
@@ -12208,7 +12376,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: 'c3fadb91dcf1c32964ed0f0cb847ab3d874f2d7a', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (hAsync("div", { key: '7bc533e24d3221d8c4dd763e629ec836642d504f', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, hAsync("img", { key: '6e47aefd8e8fab4ecf8b6a7160bc5557ecace088', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), hAsync("button", { key: '1acb93790a95117c78d5855807f24dac76b98008', class: "play-button", "aria-label": "Reproducir video" }, hAsync("dropi-icon", { key: '09974fac159a0c88b160c8044f88e1c3dfab79c0', name: "Play", iconWidth: "17px", iconHeight: "21px", color: "Neutral-White" })))), this.isPlaying && (hAsync("iframe", { key: '7650e6f8f8591cc1b24e0958e0924e5eff118ad9', 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 {
@@ -12271,6 +12439,7 @@ registerComponents([
   DropiOtpSendCode,
   DropiPaginator,
   DropiPhoneInput,
+  DropiProgressBar,
   DropiRadioButton,
   DropiRadioSelectionList,
   DropiReadMore,