@dropi/ui 0.1.19 → 0.1.20

package/dist/cjs/dropi-icon.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
 const dropiIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;fill:var(--icon-fill, currentColor)}svg{fill:inherit;display:block;vertical-align:middle}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
 
@@ -37,7 +37,7 @@ const DropiIcon = class {
         this.el.style.setProperty('--icon-fill', fill);
     }
     render() {
-        return (index.h("svg", { key: 'd92e0c9deb01962dfb172ae25af4f1236647e24c', width: this.width, height: this.height, class: { spin: this.name === 'Spinner' }, "aria-hidden": "true" }, index.h("use", { key: '76be21d4bcbb2a5409e0c784cd17c6ca3cd243f6', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name}` })));
+        return (index.h("svg", { key: '2ddcab388d4a4aa5eeb4068160210581977f270d', width: this.width, height: this.height, class: { spin: this.name === 'Spinner' }, "aria-hidden": "true" }, index.h("use", { key: 'cf485e8fb45231b2ad43b069f3d0d69047f7bc9c', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name}` })));
     }
     static get watchers() { return {
         "color": [{

package/dist/cjs/dropi-ilustration-icon.cjs.entry.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiIlustrationIconCss = () => `:host{display:inline-flex}.dropi-ilustration{display:inline-flex;align-items:center;justify-content:center}.dropi-ilustration__image,.dropi-ilustration-insignia{margin:0;display:flex;align-items:center;justify-content:center}.dropi-ilustration__image img{max-width:100%;height:auto}.dropi-ilustration__image-mb{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin:0}.dropi-ilustration__image-mb.success{background:var(--Success-Success-500, #22c55e)}.dropi-ilustration__image-mb.error{background:var(--Error-Error-500, #ef4444)}.dropi-ilustration__image-mb.info{background:var(--Info-Info-500, #3b82f6)}.dropi-ilustration__image-mb.warning{background:url('assets/icons/ilustration/bg-warning.svg') no-repeat center;background-size:contain;border-radius:0}.dropi-ilustration-insignia-tag{display:flex;align-items:center;margin:0}.dropi-ilustration-insignia-tag img{position:relative;z-index:2;height:32px;width:auto}.tag{border-radius:32px;color:var(--Neutral-White, #fff);text-transform:capitalize;margin:0 0 0 -20px;display:flex;align-items:center;justify-content:flex-start}.tag span{color:var(--Neutral-White, #fff);padding:4px 8px 4px 18px;font-size:10px}.tag--verified{background:linear-gradient(90deg, #ffc10d 41.3%, #ff6102 112.32%)}.tag--premium{background:linear-gradient(90deg, #ff6102 56.52%, #ffc10d 107.25%)}.tag--exclusive{background:linear-gradient(90deg, var(--Gray-900, #0e111a) 26.09%, #ff6102 116.67%)}`;
+
+const DropiIlustrationIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Display mode */
+    type = 'dropi';
+    /** State for dropi/mb types */
+    state = 'default';
+    /** Insignia variant */
+    stateInsignia = 'verified';
+    /** Show insignia as tag with label (for product cards) */
+    tagProduct = false;
+    insigniaIcons = {
+        verified: 'assets/icons/ilustration/verified-new.svg',
+        premium: 'assets/icons/ilustration/premium-new.svg',
+        exclusive: 'assets/icons/ilustration/exclusive.svg',
+    };
+    getIconName(state) {
+        const map = {
+            success: 'Check-circle',
+            error: 'Cross-circle',
+            info: 'Info',
+            warning: 'Info',
+        };
+        return map[state] || 'Info';
+    }
+    render() {
+        return (index.h("div", { key: '1acaca4fb04f69aa08d582f77912daf20bc810a0', class: "dropi-ilustration" }, this.type === 'dropi' && (index.h("figure", { key: '926b2097628ed235167c996440cf1324ad915f10', class: "dropi-ilustration__image" }, index.h("img", { key: 'ca44d2ac9abf55255554d0f332f93e5663125307', src: `assets/icons/ilustration/${this.state}.svg`, alt: this.state, onError: (e) => { e.target.src = 'assets/icons/ilustration/default.svg'; } }))), this.type === 'mb' && (index.h("figure", { key: 'f47a3b50f13c75d9637482120df85c8a7654a0d5', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (index.h("dropi-icon", { key: 'ccd33ef7664a7474333e3af1bfe8b4718d714268', name: this.getIconName(this.state), width: "24px", height: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (index.h("figure", { key: '24d7552d743a7fc5abbb1fc85e37c46025cd6860', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, index.h("img", { key: 'bbc80f0b9ae663dc0f01600d338ad5297ab3f6ce', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (index.h("p", { key: 'b5efd7dc951609a478524e0861f26a0dd6780d7c', class: `tag tag--${this.stateInsignia}` }, index.h("span", { key: '09dbe7100e081804eff89f7e45cd4770be434d7b', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
+    }
+};
+DropiIlustrationIcon.style = dropiIlustrationIconCss();
+
+exports.dropi_ilustration_icon = DropiIlustrationIcon;

package/dist/cjs/dropi-image-miniature.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
 const dropiImageMiniatureCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.miniature__label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:var(--Size-2, 8px)}.miniature__grid{display:flex;flex-wrap:wrap;gap:var(--Size-2, 8px)}.miniature__item{position:relative;border-radius:var(--Border-2, 8px);overflow:hidden;cursor:pointer;flex-shrink:0}.miniature__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.2s}.miniature__zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);opacity:0;transition:opacity 0.2s}.miniature__item:hover img{transform:scale(1.05)}.miniature__item:hover .miniature__zoom{opacity:1}`;
 
 const DropiImageMiniature = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiImageClick = index.createEvent(this, "dropiImageClick");
+        this.dropiImageClick = index.createEvent(this, "dropiImageClick", 7);
     }
     /** Optional label above the grid */
     label = '';
@@ -36,7 +36,7 @@ const DropiImageMiniature = class {
     }
     render() {
         const imgs = this.parsedImages;
-        return (index.h("div", { key: '5182a02b3f7da5b1440230c87c8661f5f33bb7be', class: "miniature" }, this.label && index.h("span", { key: 'bf649e5c27972799d600df583c0953938a1cacad', class: "miniature__label" }, this.label), index.h("div", { key: '7197ca2d4bbf5d65db4ca71addcf352045734d94', class: "miniature__grid" }, imgs.map((src, i) => (index.h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, index.h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), index.h("div", { class: "miniature__zoom" }, index.h("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Neutral-White" }))))))));
+        return (index.h("div", { key: '158c35ef76539561c66eaeb2f825752cd94c8cc6', class: "miniature" }, this.label && index.h("span", { key: '7817f19c245b61a0b3730cc353a6e0f9fd30d41e', class: "miniature__label" }, this.label), index.h("div", { key: 'ca1ecbbeb3134fe46e83ae89a1cc4e36836188a3', class: "miniature__grid" }, imgs.map((src, i) => (index.h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, index.h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), index.h("div", { class: "miniature__zoom" }, index.h("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Neutral-White" }))))))));
     }
 };
 DropiImageMiniature.style = dropiImageMiniatureCss();

package/dist/cjs/dropi-image-overlay.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
-const dropiImageOverlayCss = () => `:host{display:block}.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;gap:var(--Size-3, 12px)}.overlay__close{position:absolute;top:var(--Size-4, 16px);right:var(--Size-4, 16px);background:rgba(255,255,255,0.1);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s}.overlay__close:hover{background:rgba(255,255,255,0.2)}.overlay__main{position:relative;display:flex;align-items:center;gap:var(--Size-3, 12px);max-width:90vw;max-height:75vh}.overlay__image{max-width:80vw;max-height:72vh;object-fit:contain;border-radius:var(--Border-2, 8px)}.overlay__nav{background:rgba(255,255,255,0.1);border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background 0.15s}.overlay__nav:hover{background:rgba(255,255,255,0.2)}.overlay__thumbs{display:flex;gap:var(--Size-2, 8px);flex-wrap:wrap;justify-content:center;max-width:90vw}.overlay__thumb{width:56px;height:56px;object-fit:cover;border-radius:var(--Border-1, 4px);cursor:pointer;opacity:0.5;border:2px solid transparent;transition:opacity 0.15s, border-color 0.15s}.overlay__thumb:hover{opacity:0.8}.overlay__thumb--active{opacity:1;border-color:var(--Primary-Primary-500, #f49a3d)}`;
+const dropiImageOverlayCss = () => `:host{display:block}.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:flex;justify-content:center;align-items:center;z-index:9999;animation:fade-in 0.3s ease-out}.overlay__close{position:absolute;top:24px;right:24px;background:rgba(255, 255, 255, 0.1);border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10010;transition:background 0.15s}.overlay__close:hover{background:rgba(255, 255, 255, 0.2)}.overlay__body{display:flex;width:90%;height:80%;max-width:1200px;gap:32px;align-items:center}.overlay__body--single{justify-content:center}.overlay__thumbs{display:flex;flex-direction:column;gap:12px;height:100%;overflow-y:auto;padding-right:8px;width:100px;flex-shrink:0}.overlay__thumbs::-webkit-scrollbar{width:4px}.overlay__thumbs::-webkit-scrollbar-thumb{background:#475066;border-radius:4px}.overlay__thumb-box{width:80px;height:80px;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;flex-shrink:0;transition:border-color 0.2s}.overlay__thumb-box--active{border-color:var(--Primary-Primary-500, #f49a3d)}.overlay__thumb-img{width:100%;height:100%;object-fit:cover}.overlay__content{flex:1;height:100%;position:relative;display:flex;justify-content:center;align-items:center}.overlay__main-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.5);animation:scale-up 0.3s ease-out}.overlay__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255, 255, 255, 0.1);border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s;z-index:5}.overlay__nav:hover{background:rgba(255, 255, 255, 0.2)}.overlay__nav--prev{left:-24px}.overlay__nav--next{right:-24px}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes scale-up{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}`;
 
 const DropiImageOverlay = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiClose = index.createEvent(this, "dropiClose");
+        this.dropiClose = index.createEvent(this, "dropiClose", 7);
     }
     /** Whether the overlay is visible */
     visible = false;
@@ -43,7 +43,7 @@ const DropiImageOverlay = class {
             return null;
         const imgs = this.parsedImages;
         const multi = imgs.length > 1;
-        return (index.h("div", { class: "overlay", onClick: () => this.close() }, index.h("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, index.h("dropi-icon", { name: "Close-small", width: "24px", height: "24px", color: "Neutral-White" })), index.h("div", { class: "overlay__main", onClick: (e) => e.stopPropagation() }, multi && (index.h("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, index.h("dropi-icon", { name: "Dropdown-left", width: "24px", height: "24px", color: "Neutral-White" }))), index.h("img", { class: "overlay__image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (index.h("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, index.h("dropi-icon", { name: "Dropdown-Right", width: "24px", height: "24px", color: "Neutral-White" })))), multi && (index.h("div", { class: "overlay__thumbs", onClick: (e) => e.stopPropagation() }, imgs.map((src, i) => (index.h("img", { key: i, class: { 'overlay__thumb': true, 'overlay__thumb--active': i === this.current }, src: src, alt: `miniatura ${i + 1}`, onClick: () => this.current = i, onError: (e) => this.handleError(e) })))))));
+        return (index.h("div", { class: "overlay", onClick: () => this.close() }, index.h("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, index.h("dropi-icon", { name: "Close-large", width: "24px", height: "24px", color: "Neutral-White" })), index.h("div", { class: { 'overlay__body': true, 'overlay__body--single': !multi }, onClick: (e) => e.stopPropagation() }, multi && (index.h("div", { class: "overlay__thumbs" }, imgs.map((src, i) => (index.h("div", { key: i, class: { 'overlay__thumb-box': true, 'overlay__thumb-box--active': i === this.current }, onClick: () => this.current = i }, index.h("img", { src: src, alt: `miniatura ${i + 1}`, class: "overlay__thumb-img", onError: (e) => this.handleError(e) })))))), index.h("div", { class: "overlay__content" }, multi && (index.h("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, index.h("dropi-icon", { name: "Dropdown-left", width: "18px", height: "18px", color: "Gray-Gray-500" }))), index.h("img", { class: "overlay__main-image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (index.h("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, index.h("dropi-icon", { name: "Dropdown-Right", width: "18px", height: "18px", color: "Gray-Gray-500" })))))));
     }
     static get watchers() { return {
         "images": [{

package/dist/cjs/dropi-input.cjs.entry.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
 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, #fff);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 DropiInput = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiInput = index.createEvent(this, "dropiInput");
-        this.dropiChange = index.createEvent(this, "dropiChange");
-        this.dropiFocus = index.createEvent(this, "dropiFocus");
-        this.dropiBlur = index.createEvent(this, "dropiBlur");
+        this.dropiInput = index.createEvent(this, "dropiInput", 7);
+        this.dropiChange = index.createEvent(this, "dropiChange", 7);
+        this.dropiFocus = index.createEvent(this, "dropiFocus", 7);
+        this.dropiBlur = index.createEvent(this, "dropiBlur", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -183,14 +183,14 @@ const DropiInput = class {
     render() {
         const showAsterisk = this.required && this.showAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (index.h("div", { key: '444e873dc4175e75a5c85814499e28afb3f80b37', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (index.h("div", { key: 'a501500f872b87ad701f5c18e0e3b532005c3fcb', class: "input-label Body-S-Regular" }, this.label, showAsterisk && index.h("span", { key: '1ca3afb47b67cfb61cd8bceb8657c9f061462064', class: "asterisk" }, " *"))), index.h("div", { key: 'eb31110de652f6db7c5fdd747046280b0e81e2b6', class: "form-group" }, index.h("div", { key: 'b0bb2cac1e8d7f20d927437e4ba6327e333d1fdb', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (index.h("dropi-icon", { key: '604a369b358b1c95a19cc23dd4bc4f9c77e4b050', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (index.h("dropi-icon", { key: 'b1b3b979d172ada0c3fe616f795c7cd5b2bf45cb', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), index.h("input", { key: 'b5488711765a12b6e9fea7b0f8d5a23ae95de925', id: this.resolvedId, class: {
+        return (index.h("div", { key: '49a1b6d02f59e1c67a70a219a7f7d0fbbd2a460d', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (index.h("div", { key: '326d90a0361fe5ab90adee1479439aab34c99951', class: "input-label Body-S-Regular" }, this.label, showAsterisk && index.h("span", { key: 'cf5677966af627addc69a2735803845b54f41a9f', class: "asterisk" }, " *"))), index.h("div", { key: '1f7b7c614dc424ad4b1aa1819d05573fd08b30a1', class: "form-group" }, index.h("div", { key: 'c2f88e7f7f2f0da585e8ac20c6373b451290dfdd', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (index.h("dropi-icon", { key: 'c6f7cc14c56452768e4e49092a2be7968951255b', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (index.h("dropi-icon", { key: '5ddbd5e176b61dc46d817fa6a32d3d3c0e2cc589', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), index.h("input", { key: '51a17c36e9ed49fef0d2f0ea97d4aca10e4722d6', 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 && (index.h("label", { key: 'f3008d901c41e6f362977e1232e7597733c4288e', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && index.h("span", { key: '1b982a1630f88557380df2f22c0c27bcceebbdc6', class: "asterisk" }, " *"))), this.showHelper && (index.h("div", { key: '30382a8e7beb0a14bb06f8fd25dae3da5371efd3', class: "form-control-helper" }, this.isInvalid && (index.h("dropi-icon", { key: 'a1ef2b7a9a659301cc22c19d5e5f65bd7a595a2c', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), index.h("span", { key: '289250769c59d1ddde821395a9e97368404ca1ab', 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 && (index.h("label", { key: '9fa96019e84dd543e3e74a15e8f0681ea7bb7823', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && index.h("span", { key: '740936c43be963fc7383e3ae6eb21c9d02ffde03', class: "asterisk" }, " *"))), this.showHelper && (index.h("div", { key: '9381fc81799162f20df8d2df914adc4ebee5e8ed', class: "form-control-helper" }, this.isInvalid && (index.h("dropi-icon", { key: 'fea3d178b9b00f87d2a266cb665fca2774ec963a', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), index.h("span", { key: '390caaa2dfdfb673b8d1fdd8fada2d7c2f6ba764', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.helperText)))))));

package/dist/cjs/dropi-languages-selector.cjs.entry.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiLanguagesSelectorCss = () => `:host{display:inline-block;position:relative}*,*::before,*::after{box-sizing:border-box}.custom-dropdown{position:relative;cursor:pointer;user-select:none}.custom-dropdown.open dropi-icon{transform:rotate(180deg)}.selected-option{display:flex;height:38px;padding:var(--Size-2, 8px) var(--Size-3, 12px);align-items:center;gap:var(--Size-2, 8px);border-radius:4px;border:1px solid var(--Gray-Gray-200, #c3c9d9);background:var(--Neutral-White, #fff);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options{position:absolute;top:100%;left:0;right:0;background:white;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:6px;margin-top:4px;z-index:1000;overflow-y:auto;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);padding:0;list-style:none;height:0;opacity:0;visibility:hidden;transition:height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;max-height:0}.dropdown-options.dropdown-open{max-height:300px;height:auto;opacity:1;visibility:visible}.dropdown-options li{padding:8px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options li:hover,.dropdown-options li.active{background:var(--Gray-Gray-50, #f7f8fa)}@media screen and (max-width: 720px){.selected-option span,.dropdown-options li span{display:none}}`;
+
+const DropiLanguagesSelector = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiLanguageChange = index.createEvent(this, "dropiLanguageChange", 7);
+    }
+    /** Language options (array or JSON string) */
+    languages = [];
+    /** Currently selected language (LanguageOption or JSON string) */
+    selectedLang = null;
+    dropiLanguageChange;
+    isOpen = false;
+    parsedLanguages = [];
+    currentLang = null;
+    languagesChanged(val) {
+        this.parsedLanguages = typeof val === 'string' ? JSON.parse(val) : val;
+        if (!this.currentLang && this.parsedLanguages.length > 0) {
+            this.currentLang = this.parsedLanguages[0];
+        }
+    }
+    selectedLangChanged(val) {
+        if (!val)
+            return;
+        this.currentLang = typeof val === 'string' ? JSON.parse(val) : val;
+    }
+    componentWillLoad() {
+        this.languagesChanged(this.languages);
+        if (this.selectedLang)
+            this.selectedLangChanged(this.selectedLang);
+    }
+    select(lang) {
+        this.currentLang = lang;
+        this.isOpen = false;
+        this.dropiLanguageChange.emit(lang);
+    }
+    render() {
+        if (!this.currentLang)
+            return null;
+        return (index.h("div", { class: `custom-dropdown${this.isOpen ? ' open' : ''}` }, index.h("div", { class: "selected-option", onClick: () => { this.isOpen = !this.isOpen; } }, index.h("dropi-country-flags", { country: this.currentLang.flag, "flag-style": "rectangle", width: "20", height: "15" }), index.h("span", { class: "Body-S-Regular" }, this.currentLang.label), index.h("dropi-icon", { name: "Caret-down", width: "16px", height: "16px", color: "Gray-Gray-500" })), index.h("ul", { class: `dropdown-options${this.isOpen ? ' dropdown-open' : ''}` }, this.parsedLanguages.map(lang => (index.h("li", { key: lang.code, class: lang.code === this.currentLang?.code ? 'active' : '', onClick: () => this.select(lang) }, index.h("dropi-country-flags", { country: lang.flag, "flag-style": "rectangle", width: "20", height: "15" }), index.h("span", { class: "Body-S-Regular" }, lang.label)))))));
+    }
+    static get watchers() { return {
+        "languages": [{
+                "languagesChanged": 0
+            }],
+        "selectedLang": [{
+                "selectedLangChanged": 0
+            }]
+    }; }
+};
+DropiLanguagesSelector.style = dropiLanguagesSelectorCss();
+
+exports.dropi_languages_selector = DropiLanguagesSelector;

package/dist/cjs/dropi-logo.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
 const dropiLogoCss = () => `:host{display:inline-block}.dropi-logo{margin:0;padding:0;display:flex;align-items:center;justify-content:center}.dropi-logo img{display:block;object-fit:contain}.dropi-logo--large img{width:256px;height:84px}.dropi-logo--small img{width:86px;height:81px}`;
 
-const FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iI2Y0OWEzZCI+ZHJvcGk8L3RleHQ+PC9zdmc+`;
+const FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iIzg1OGVhNiI+ZHJvcGk8L3RleHQ+PC9zdmc+`;
 const DropiLogo = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -19,7 +19,7 @@ const DropiLogo = class {
         e.target.src = FALLBACK_SVG;
     }
     render() {
-        return (index.h("figure", { key: '6b3335e9c4e8d799106f3c2080822d35d74bb16d', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, index.h("img", { key: 'e54ff2f0d1fb1f0f4eea4c46aae7a39f69268217', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", loading: "lazy", onError: (e) => this.handleError(e) })));
+        return (index.h("figure", { key: '416498bbb93314e2a69a3fdba9def0f8fb4d940a', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, index.h("img", { key: '137ae999c9db95e87d8ee76a46b328c34f97f58e', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", loading: "lazy", onError: (e) => this.handleError(e) })));
     }
 };
 DropiLogo.style = dropiLogoCss();

package/dist/cjs/dropi-lottie-loader.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
 const dropiLottieLoaderCss = () => `:host{display:block}.loader-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255, 255, 255, 0.85);z-index:9999}.loader-container{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.lottie-animation{display:flex;align-items:center;justify-content:center;width:200px;height:200px}.loader-text{display:flex;flex-direction:column;align-items:center;gap:var(--Size-2, 8px);text-align:center}.loader-title{margin:0;font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.loader-message{margin:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-500, #69738c)}`;
 
@@ -11,15 +11,15 @@ const DropiLottieLoader = class {
     /** Show or hide the loader */
     visible = false;
     /** Path to the Lottie JSON animation file */
-    loadingAnimation = '';
+    loadingAnimation = '/assets/lottie-files/loading.json';
     /** Title shown below the animation */
-    loaderTitle = '';
+    loaderTitle = 'Cargando...';
     /** Descriptive message below the title */
-    message = '';
+    message = 'Por favor, espere un momento';
     render() {
         if (!this.visible)
             return null;
-        return (index.h("div", { class: "loader-overlay" }, index.h("div", { class: "loader-container" }, this.loadingAnimation && (index.h("div", { class: "lottie-animation", innerHTML: `<lottie-player src="${this.loadingAnimation}" background="transparent" speed="1" style="width:200px;height:200px" loop autoplay></lottie-player>` })), (this.loaderTitle || this.message) && (index.h("div", { class: "loader-text" }, this.loaderTitle && index.h("h3", { class: "loader-title" }, this.loaderTitle), this.message && index.h("p", { class: "loader-message" }, this.message))))));
+        return (index.h("div", { class: "loader-overlay" }, index.h("div", { class: "loader-container" }, index.h("div", { class: "lottie-animation" }, index.h("lottie-player", { src: this.loadingAnimation, background: "transparent", speed: "1", style: { width: '200px', height: '200px' }, loop: true, autoplay: true })), (this.loaderTitle || this.message) && (index.h("div", { class: "loader-text" }, this.loaderTitle && index.h("h3", { class: "loader-title" }, this.loaderTitle), this.message && index.h("p", { class: "loader-message" }, this.message))))));
     }
 };
 DropiLottieLoader.style = dropiLottieLoaderCss();

package/dist/cjs/dropi-media-player.cjs.entry.js

@@ -0,0 +1,102 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiMediaPlayerCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.player{background:var(--Gray-Gray-800, #1a2033);border-radius:var(--Border-2, 8px);overflow:hidden;display:flex;flex-direction:column}.player__video{width:100%;display:block;max-height:400px;object-fit:contain;background:#000}.player__controls{padding:var(--Size-3, 12px);display:flex;flex-direction:column;gap:var(--Size-2, 8px)}.player__title{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-300, #a0a9c0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player__seek-wrap{display:flex;align-items:center;gap:var(--Size-2, 8px)}.player__time{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);white-space:nowrap;flex-shrink:0}.player__seek-track{flex:1;position:relative;height:4px;background:var(--Gray-Gray-600, #475066);border-radius:100px}.player__seek-fill{position:absolute;left:0;top:0;bottom:0;background:var(--Primary-Primary-500, #f49a3d);border-radius:100px;pointer-events:none}.player__seek{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0;accent-color:var(--Primary-Primary-500, #f49a3d)}.player__buttons{display:flex;align-items:center;gap:var(--Size-2, 8px)}.player__btn{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;border-radius:var(--Border-1, 4px);transition:background 0.15s}.player__btn:hover{background:rgba(255,255,255,0.08)}.player__btn--play{width:36px;height:36px;background:var(--Primary-Primary-500, #f49a3d);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.player__btn--play:hover{background:var(--Primary-Primary-600, #e08526)}.player__volume{display:flex;align-items:center;gap:4px}.player__volume-slider{width:60px;accent-color:var(--Primary-Primary-500, #f49a3d);cursor:pointer}.player__spacer{flex:1}.player--audio .player__controls{padding:var(--Size-4, 16px)}`;
+
+const DropiMediaPlayer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiPlay = index.createEvent(this, "dropiPlay", 7);
+        this.dropiEnded = index.createEvent(this, "dropiEnded", 7);
+    }
+    get el() { return index.getElement(this); }
+    /** Media source URL */
+    src = '';
+    /** "audio" or "video" */
+    mediaType = 'audio';
+    /** Poster image (video only) */
+    poster = '';
+    /** Autoplay */
+    autoplay = false;
+    /** Loop */
+    loop = false;
+    /** Initial volume 0–1 */
+    initialVolume = 1;
+    /** Title shown above controls */
+    mediaTitle = '';
+    playing = false;
+    currentTime = 0;
+    duration = 0;
+    volume = 1;
+    muted = false;
+    loading = true;
+    mediaEl;
+    /** Emitted when playback starts/pauses. e.detail = playing */
+    dropiPlay;
+    /** Emitted when media ends */
+    dropiEnded;
+    componentDidLoad() {
+        if (this.mediaEl) {
+            this.mediaEl.volume = this.initialVolume;
+            this.volume = this.initialVolume;
+        }
+    }
+    togglePlay() {
+        if (!this.mediaEl)
+            return;
+        if (this.playing) {
+            this.mediaEl.pause();
+        }
+        else {
+            this.mediaEl.play();
+        }
+    }
+    handleTimeUpdate() {
+        this.currentTime = this.mediaEl.currentTime;
+    }
+    handleLoadedMetadata() {
+        this.duration = this.mediaEl.duration;
+        this.loading = false;
+    }
+    handleSeek(e) {
+        const val = Number(e.target.value);
+        this.mediaEl.currentTime = val;
+        this.currentTime = val;
+    }
+    handleVolume(e) {
+        const val = Number(e.target.value);
+        this.mediaEl.volume = val;
+        this.volume = val;
+        this.muted = val === 0;
+    }
+    toggleMute() {
+        this.muted = !this.muted;
+        this.mediaEl.muted = this.muted;
+    }
+    handleFullscreen() {
+        if (this.mediaType !== 'video')
+            return;
+        const vid = this.mediaEl;
+        if (document.fullscreenElement)
+            document.exitFullscreen();
+        else
+            vid.requestFullscreen?.();
+    }
+    formatTime(secs) {
+        if (isNaN(secs))
+            return '0:00';
+        const m = Math.floor(secs / 60);
+        const s = Math.floor(secs % 60);
+        return `${m}:${String(s).padStart(2, '0')}`;
+    }
+    render() {
+        const pct = this.duration ? (this.currentTime / this.duration) * 100 : 0;
+        return (index.h("div", { key: '76ee9c93a56b78e8ebdad1a77a59b56bbd1ae8f6', class: `player player--${this.mediaType}` }, this.mediaType === 'video' ? (index.h("video", { class: "player__video", ref: (el) => this.mediaEl = el, src: this.src, poster: this.poster, autoplay: this.autoplay, loop: this.loop, preload: "metadata", onPlay: () => { this.playing = true; this.dropiPlay.emit(true); }, onPause: () => { this.playing = false; this.dropiPlay.emit(false); }, onTimeUpdate: () => this.handleTimeUpdate(), onLoadedMetaData: () => this.handleLoadedMetadata(), onEnded: () => { this.playing = false; this.dropiEnded.emit(); }, onWaiting: () => this.loading = true, onCanPlay: () => this.loading = false })) : (index.h("audio", { ref: (el) => this.mediaEl = el, src: this.src, autoplay: this.autoplay, loop: this.loop, preload: "metadata", onPlay: () => { this.playing = true; this.dropiPlay.emit(true); }, onPause: () => { this.playing = false; this.dropiPlay.emit(false); }, onTimeUpdate: () => this.handleTimeUpdate(), onLoadedMetaData: () => this.handleLoadedMetadata(), onEnded: () => { this.playing = false; this.dropiEnded.emit(); } })), index.h("div", { key: '444cb9c86d3a69042d827ab4785e8c0995f82e6d', class: "player__controls" }, this.mediaTitle && (index.h("span", { key: '39bee7040cddfae5ce17e6ee62d0713ba0062ae4', class: "player__title" }, this.mediaTitle)), index.h("div", { key: '05ccbde97d88387d1b167495887877f0d3443cc4', class: "player__seek-wrap" }, index.h("span", { key: '1e8f81054b851975a0526224f5b2455687d6d1ba', class: "player__time" }, this.formatTime(this.currentTime)), index.h("div", { key: 'aecd083653f3384e47938ff00bcd0f913eab4e13', class: "player__seek-track" }, index.h("div", { key: '2bef10203f1c0d22e371e8e7ee223ec9aaf9b496', class: "player__seek-fill", style: { width: `${pct}%` } }), index.h("input", { key: '7d8b658dca7b663e01d86d69480113edc8849951', class: "player__seek", type: "range", min: 0, max: this.duration || 100, step: 0.1, value: this.currentTime, onInput: (e) => this.handleSeek(e) })), index.h("span", { key: '0127fa197a59db81f224db1a168b52fc4be154fe', class: "player__time" }, this.formatTime(this.duration))), index.h("div", { key: '171eff82a5f55544cb0ad601ae4ae07954e93c43', class: "player__buttons" }, index.h("button", { key: '0d207dcd555e040999e6434009b7762e9caf8359', class: "player__btn player__btn--play", onClick: () => this.togglePlay(), type: "button" }, this.loading
+            ? index.h("dropi-icon", { name: "Spinner", width: "20px", height: "20px", color: "Neutral-White" })
+            : index.h("dropi-icon", { name: this.playing ? 'Pause' : 'Play', width: "20px", height: "20px", color: "Neutral-White" })), index.h("div", { key: 'd8eeb92e14729c49e0b2ef459c44ed1f402ce9f8', class: "player__volume" }, index.h("button", { key: '4bdf9ca4d03e1e7a420b280f0106e67d50fe6285', class: "player__btn", onClick: () => this.toggleMute(), type: "button" }, index.h("dropi-icon", { key: '715e93fc8b50f42c07c545ace9dbbf757ac0742a', name: this.muted || this.volume === 0 ? 'Volume-off' : this.volume < 0.5 ? 'Volume-low' : 'Volume-high', width: "16px", height: "16px", color: "Gray-Gray-600" })), index.h("input", { key: 'd2a3f93696c8c1a42ce99c04c4fbf419e2f8b3e6', class: "player__volume-slider", type: "range", min: 0, max: 1, step: 0.05, value: this.muted ? 0 : this.volume, onInput: (e) => this.handleVolume(e) })), index.h("span", { key: '7dc77449676683256fbf746ff9e3679d0b8ed41d', class: "player__spacer" }), this.mediaType === 'video' && (index.h("button", { key: '442d58c35ca6e8649849e30f46d33274bbff577b', class: "player__btn", onClick: () => this.handleFullscreen(), type: "button" }, index.h("dropi-icon", { key: '89a88d82501bfa0af389a8bc3c17cb3eeca9af00', name: "Fullscreen", width: "16px", height: "16px", color: "Gray-Gray-600" })))))));
+    }
+};
+DropiMediaPlayer.style = dropiMediaPlayerCss();
+
+exports.dropi_media_player = DropiMediaPlayer;

package/dist/cjs/dropi-modal.cjs.entry.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
-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, #fff);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:700;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}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;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:center;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%}.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-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.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: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, #fff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-6, 32px);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:700;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:24px;line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;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-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.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 DropiModal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiShow = index.createEvent(this, "dropiShow");
-        this.dropiHide = index.createEvent(this, "dropiHide");
-        this.visibleChange = index.createEvent(this, "visibleChange");
+        this.dropiShow = index.createEvent(this, "dropiShow", 5);
+        this.dropiHide = index.createEvent(this, "dropiHide", 5);
+        this.visibleChange = index.createEvent(this, "visibleChange", 5);
     }
     visible = false;
     header = '';
@@ -64,8 +64,9 @@ const DropiModal = class {
             this.dropiShow.emit();
         }));
         this.addKeyHandler();
-        if (this.modal)
-            document.body.style.overflow = 'hidden';
+        if (this.modal && document.body && document.body.style) {
+            document.body.style.setProperty('overflow', 'hidden');
+        }
     }
     startClose() {
         if (this.isClosing)
@@ -78,7 +79,9 @@ const DropiModal = class {
         this.closeTimer = setTimeout(() => {
             this.mounted = false;
             this.isClosing = false;
-            document.body.style.overflow = '';
+            if (document.body && document.body.style) {
+                document.body.style.setProperty('overflow', '');
+            }
             this.dropiHide.emit();
         }, 200);
     }
@@ -100,7 +103,7 @@ const DropiModal = class {
     render() {
         if (!this.mounted)
             return null;
-        return (index.h("div", { class: { 'modal-root': true, [`modal-root--${this.position}`]: true, 'modal-root--open': this.isOpen, 'modal-root--closing': this.isClosing } }, this.modal && index.h("div", { class: "modal-mask", onClick: () => this.dismissable && this.hide() }), index.h("div", { class: { 'modal-panel': true, [`size-${this.size}`]: !!this.size }, role: "dialog", "aria-modal": "true" }, this.showHeader && (index.h("div", { class: "modal-header" }, this.header && index.h("span", { class: "modal-title" }, this.header), index.h("slot", { name: "header" }), this.showCloseIcon && (index.h("button", { class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, index.h("dropi-icon", { name: "Close-small", width: "24px", height: "24px", color: "Gray-Gray-400" }))))), index.h("div", { class: "modal-content" }, index.h("slot", null)), index.h("div", { class: "modal-footer" }, index.h("slot", { name: "footer" })))));
+        return (index.h("div", { class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, this.modal && index.h("div", { class: "modal-mask", onClick: () => this.dismissable && this.hide() }), index.h("div", { class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (index.h("div", { class: "modal-header" }, this.header && index.h("span", { class: "modal-title" }, this.header), index.h("slot", { name: "header" }), this.showCloseIcon && (index.h("button", { class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), index.h("div", { class: "modal-content" }, index.h("slot", null)), index.h("div", { class: "modal-footer" }, index.h("slot", { name: "footer" })))));
     }
     static get watchers() { return {
         "visible": [{

package/dist/cjs/dropi-navbar.cjs.entry.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiNavbarCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.navbar{display:flex;align-items:center;height:56px;padding:0 var(--Size-4, 16px);background:var(--Neutral-White, #fff);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);gap:var(--Size-4, 16px);position:relative}.navbar__left{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.navbar__menu-btn{background:none;border:none;padding:6px;cursor:pointer;border-radius:var(--Border-1, 4px);display:flex;align-items:center;transition:background 0.15s}.navbar__menu-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__logo{height:28px;object-fit:contain}.navbar__items{flex:1;list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--Size-1, 4px)}.navbar__item{display:flex;align-items:center;gap:var(--Size-1, 4px);padding:6px var(--Size-3, 12px);background:none;border:none;border-radius:var(--Border-1, 4px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-600, #475066);cursor:pointer;transition:background 0.15s, color 0.15s;white-space:nowrap}.navbar__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__item--active{background:var(--Primary-Primary-50, #fff5eb);color:var(--Primary-Primary-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.navbar__badge{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #fff);font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 4px}.navbar__right{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.navbar__icon-btn{position:relative;background:none;border:none;padding:6px;cursor:pointer;border-radius:var(--Border-1, 4px);display:flex;align-items:center;transition:background 0.15s}.navbar__icon-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__notif-badge{position:absolute;top:2px;right:2px;background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #fff);font-size:9px;font-weight:700;min-width:14px;height:14px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 3px}.navbar__user-btn{display:flex;align-items:center;gap:var(--Size-1, 4px);background:none;border:none;padding:4px 8px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background 0.15s;font-family:inherit}.navbar__user-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}.navbar__avatar-placeholder{width:28px;height:28px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700)}.navbar__user-name{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
+
+const DropiNavbar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiNavItemClick = index.createEvent(this, "dropiNavItemClick", 7);
+        this.dropiNotificationsClick = index.createEvent(this, "dropiNotificationsClick", 7);
+        this.dropiUserClick = index.createEvent(this, "dropiUserClick", 7);
+        this.dropiMenuToggle = index.createEvent(this, "dropiMenuToggle", 7);
+    }
+    /** Logo URL */
+    logoUrl = '';
+    /** Logo alt */
+    logoAlt = 'Logo';
+    /** Navigation items (array or JSON string) */
+    items = [];
+    /** Active item ID */
+    activeId = '';
+    /** User name */
+    userName = '';
+    /** User avatar URL */
+    userAvatar = '';
+    /** Notification count (0 = no badge) */
+    notifications = 0;
+    /** Show menu toggle (mobile) */
+    showMenuToggle = true;
+    /** Emitted when a nav item is clicked. e.detail = item id */
+    dropiNavItemClick;
+    /** Emitted when notification bell is clicked */
+    dropiNotificationsClick;
+    /** Emitted when avatar/user is clicked */
+    dropiUserClick;
+    /** Emitted when mobile menu toggle clicked */
+    dropiMenuToggle;
+    get parsedItems() {
+        const val = this.items;
+        return typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    render() {
+        const items = this.parsedItems;
+        return (index.h("nav", { key: '014281e03d0d6d2619add2319c3df90a5b6246a5', class: "navbar" }, index.h("div", { key: '4c1ac832042995edbe98e03d9ffd722879d7667c', class: "navbar__left" }, this.showMenuToggle && (index.h("button", { key: 'b244829263b1fa8f10365be75f8e6a86780b23bb', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, index.h("dropi-icon", { key: '082a2ec0c22c31d0e50c6c4268deb91db91a4a0a', name: "Menu", width: "20px", height: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (index.h("img", { key: 'bb999a5b53a2e667715b8b8152e68f567bf6735d', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt }))), items.length > 0 && (index.h("ul", { key: '0d8fc800d7e8eb42ba7971c323dcd7366c564c6f', class: "navbar__items" }, items.map(item => (index.h("li", null, index.h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.dropiNavItemClick.emit(item.id), type: "button" }, item.icon && index.h("dropi-icon", { name: item.icon, width: "16px", height: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), index.h("span", null, item.label), item.badge != null && String(item.badge) !== '0' && (index.h("span", { class: "navbar__badge" }, item.badge)))))))), index.h("div", { key: 'ce34e9989a27f875880cc674f68cd1348ba830ea', class: "navbar__right" }, index.h("button", { key: '8786409d275d115e363d4675d51d33a004881287', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, index.h("dropi-icon", { key: '6d8475c54109cf3535464029d906779a1ef5613d', name: "Bell", width: "20px", height: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (index.h("span", { key: 'f38458c5cf0e805cf7bc20ca6d9c2f59570c2813', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), index.h("button", { key: 'aa82799088ef91868967988a48b51d5426175733', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+            ? index.h("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
+            : index.h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && index.h("span", { key: '512bb7945572d2a2c117d8fa27d82d1d53b78120', class: "navbar__user-name" }, this.userName), index.h("dropi-icon", { key: 'feac223f33239f1b1d2add2139aef3408a73de44', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })))));
+    }
+};
+DropiNavbar.style = dropiNavbarCss();
+
+exports.dropi_navbar = DropiNavbar;

package/dist/cjs/dropi-otp-send-code.cjs.entry.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
-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-2, 8px)}.otp__digit{width:48px;height:56px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);text-align:center;font-size:var(--font-size-xl, 20px);font-weight:var(--font-weight-bold, 700);font-family:inherit;color:var(--Gray-Gray-800, #1a2033);outline:none;transition:border-color 0.15s;background:var(--Neutral-White, #fff)}.otp__digit:focus{border-color:var(--Info-Info-500, #50a5f1)}.otp__digit--filled{border-color:var(--Success-Success-500, #34c55a);color:var(--Success-Success-500, #34c55a)}.otp__digit--error{border-color: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 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, #495057);outline:none;transition:border-color 0.15s ease;background:var(--Neutral-White, #fff)}.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;
 const DropiOtpSendCode = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiCodeCompleted = index.createEvent(this, "dropiCodeCompleted");
-        this.dropiResend = index.createEvent(this, "dropiResend");
+        this.dropiCodeCompleted = index.createEvent(this, "dropiCodeCompleted", 7);
+        this.dropiResend = index.createEvent(this, "dropiResend", 7);
     }
     /** Delivery method label */
     engine = 'email';
@@ -77,14 +77,14 @@ const DropiOtpSendCode = class {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (index.h("div", { key: '9c8e1efcdb61bd8f6988826b769240354d42339e', class: "otp" }, this.showLabelContact && (index.h("p", { key: 'dd8ccef18ed569371c1bba5fc2a39a43b6daf1b9', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && index.h("strong", { key: 'a3fc70430e66b153cf12ed2c0240f2fb00ec4a47' }, " ", this.labelContact))), index.h("div", { key: '450a3a7923a363c1ebbbbd06ca1cc291eba3281c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (index.h("input", { key: i, ref: (el) => {
+        return (index.h("div", { key: '385270734b7b0d6be9e4c8fb4767feae951eef2a', class: "otp" }, this.showLabelContact && (index.h("p", { key: '6b837aa51683c913c14f001781b037dfc802c3f7', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && index.h("strong", { key: 'ea75ddf873d4380e100477ac4e939a4e2e1b2ef3' }, " ", this.labelContact))), index.h("div", { key: 'ecdd5b47d1acbee3a6d5a67bbe189471d1af234c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (index.h("input", { key: i, ref: (el) => {
                 if (el)
                     this.inputs[i] = el;
             }, class: {
                 'otp__digit': true,
                 'otp__digit--filled': this.digitStates[i] === 'filled',
                 'otp__digit--error': this.error,
-            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i], onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (index.h("p", { key: '4c6f9131d4a5b197dea318d6309540823b4cdfeb', class: "otp__error" }, this.errorMessage)), index.h("div", { key: 'a6a32b9ee19bc1b0394d5c14fbc44ddf73536630', class: "otp__resend" }, this.canResend ? (index.h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (index.h("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 && (index.h("p", { key: '99bb12e401d9b7758ae6996c9f1b156f49ada55e', class: "otp__error" }, this.errorMessage)), index.h("div", { key: '61e80ca8a938025ad49c453255a23b3b44880e7e', class: "otp__resend" }, this.canResend ? (index.h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (index.h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
     }
 };
 DropiOtpSendCode.style = dropiOtpSendCodeCss();