@dropi/ui 0.1.18 → 0.1.20

package/dist/cjs/dropi-empty-state.cjs.entry.js

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-B6R6Ojma.js');
+var index = require('./index-DcOH2ZjX.js');
 
-const dropiEmptyStateCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--Size-3, 12px);padding:var(--Size-6, 32px) var(--Size-5, 20px);text-align:center}.empty-state-img{max-width:200px;width:100%;height:auto;object-fit:contain}.empty-state-svg{width:80px;height:80px}.empty-state-placeholder{display:flex;align-items:center;justify-content:center}.empty-state-title{margin:0;font-size:var(--font-size-l, 18px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);line-height:1.3}.empty-state-description{margin:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);line-height:1.6;max-width:400px}.empty-state-actions{display:flex;align-items:center;gap:var(--Size-3, 12px);flex-wrap:wrap;justify-content:center;margin-top:var(--Size-2, 8px)}`;
+const dropiEmptyStateCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--Size-3, 12px);padding:var(--Size-6, 32px) var(--Size-5, 20px);text-align:center}.empty-state-img{max-width:200px;width:100%;height:auto;object-fit:contain;filter:brightness(0) saturate(100%) invert(73%) sepia(9%) saturate(503%) hue-rotate(187deg) brightness(91%) contrast(88%)}.empty-state-svg{width:80px;height:80px}.empty-state-placeholder{display:flex;align-items:center;justify-content:center}.empty-state-title{margin:0;font-size:var(--font-size-l, 18px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);line-height:1.3}.empty-state-description{margin:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);line-height:1.6;max-width:400px}.empty-state-actions{display:flex;align-items:center;gap:var(--Size-3, 12px);flex-wrap:wrap;justify-content:center;margin-top:var(--Size-2, 8px)}`;
 
 const DropiEmptyState = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiAction = index.createEvent(this, "dropiAction");
-        this.dropiSecondaryAction = index.createEvent(this, "dropiSecondaryAction");
+        this.dropiAction = index.createEvent(this, "dropiAction", 7);
+        this.dropiSecondaryAction = index.createEvent(this, "dropiSecondaryAction", 7);
     }
     /** Title text */
     header = '';
@@ -20,14 +20,18 @@ const DropiEmptyState = class {
     imageAlt = 'Sin resultados';
     /** Primary action button label (empty = hidden) */
     actionLabel = '';
+    /** State of the illustration (default, loading, sorry, love, success, error) */
+    iconState = 'default';
     /** Secondary action button label (empty = hidden) */
     secondaryLabel = '';
+    /** Severity for the action buttons */
+    actionSeverity = 'tertiary';
     /** Emitted when primary action button is clicked */
     dropiAction;
     /** Emitted when secondary action button is clicked */
     dropiSecondaryAction;
     render() {
-        return (index.h("div", { key: '1aea01715d0e50b308904d496be7bc2f607bf5aa', class: "empty-state" }, this.imageUrl ? (index.h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (index.h("div", { class: "empty-state-placeholder" }, index.h("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "empty-state-svg" }, index.h("rect", { width: "80", height: "80", rx: "40", fill: "var(--Gray-Gray-100, #e6eaf2)" }), index.h("path", { d: "M40 20C29 20 20 29 20 40s9 20 20 20 20-9 20-20S51 20 40 20zm0 36c-8.8 0-16-7.2-16-16S31.2 24 40 24s16 7.2 16 16-7.2 16-16 16zm-1-28h2v12h-2zm0 14h2v2h-2z", fill: "var(--Gray-Gray-400, #858ea6)" })))), this.header && index.h("h3", { key: '41e5da8d482456f4b9006449a27a9f9d172d87b4', class: "empty-state-title" }, this.header), this.description && index.h("p", { key: 'ffa6399489ec56cd2cf84bb39d12c112bee64302', class: "empty-state-description" }, this.description), index.h("slot", { key: '6ccdfed94a22ad7ece2388fba3d4734aa6a2b509' }), (this.actionLabel || this.secondaryLabel) && (index.h("div", { key: '0da97fd516eccd1cabe846b2d002fdf75306674d', class: "empty-state-actions" }, this.secondaryLabel && (index.h("dropi-button", { key: 'de1b1ad4d6a50cfd251de243a3b5ea3beb10019b', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (index.h("dropi-button", { key: '59f3b47ee14f3ac89aa4acc5b42d856f26d02d19', text: this.actionLabel, severity: "primary", onDropiClick: () => this.dropiAction.emit() }))))));
+        return (index.h("div", { key: 'a4aec0618cd8a0900c4d5e82528a86d30c027669', class: "empty-state" }, index.h("div", { key: '80565c251e85146d824c640cbce4602d509311bb', class: "empty-state-visual" }, this.imageUrl ? (index.h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (index.h("img", { class: "empty-state-img", src: `assets/icons/ilustration/${this.iconState}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.header && index.h("h3", { key: '9cd0fc5aac1aeb089f1ef4c46291c9ad5d630d9c', class: "empty-state-title" }, this.header), this.description && index.h("p", { key: '4f2fd55693d6376a7d782a8df5d71c33fa8ea523', class: "empty-state-description" }, this.description), index.h("slot", { key: 'a48aa738f9f9a3a2c1f62d86e36010f2eb6c9b06' }), (this.actionLabel || this.secondaryLabel) && (index.h("div", { key: 'dd2978b2422d1382461eaba5c92eba37817ddb61', class: "empty-state-actions" }, this.secondaryLabel && (index.h("dropi-button", { key: 'b2d76dd6da170d8af85384ffbe800a4789ea96d9', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (index.h("dropi-button", { key: '68efcbb4c4069302839501c74affc6d43f7d4c6b', text: this.actionLabel, severity: this.actionSeverity, onDropiClick: () => this.dropiAction.emit() }))))));
     }
 };
 DropiEmptyState.style = dropiEmptyStateCss();

package/dist/cjs/dropi-favorite-button.cjs.entry.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiFavoriteButtonCss = () => `:host{display:inline-flex}.fav-btn{display:flex;align-items:center;justify-content:center;width:37px;height:37px;border-radius:8px;border:1px solid var(--Gray-Gray-200);background:var(--Neutral-White);cursor:pointer;transition:all 0.2s ease-in-out}.fav-btn:hover,.fav-btn--active{background:var(--Gray-Gray-50)}.fav-btn:active{transform:scale(0.95)}`;
+
+const DropiFavoriteButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiToggleFavorite = index.createEvent(this, "dropiToggleFavorite", 7);
+    }
+    /** Whether the item is currently marked as favorite */
+    isFavorite = false;
+    /** Emitted when toggled. e.detail = new favorite state */
+    dropiToggleFavorite;
+    hovered = false;
+    toggle() {
+        this.isFavorite = !this.isFavorite;
+        this.dropiToggleFavorite.emit(this.isFavorite);
+    }
+    render() {
+        return (index.h("button", { key: '1911efe67d8e0ab2f7531e01a844880054fdf693', 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) }, index.h("dropi-icon", { key: 'be817f295f9e3e36ca86027f487781f07ae1561d', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', width: "19px", height: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
+    }
+};
+DropiFavoriteButton.style = dropiFavoriteButtonCss();
+
+exports.dropi_favorite_button = DropiFavoriteButton;

package/dist/cjs/dropi-file-upload-progress-bar.cjs.entry.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiFileUploadProgressBarCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.upload-item{display:flex;align-items:flex-start;gap:var(--Size-3, 12px);padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-100, #eceef4);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff)}.upload-item--success{border-color:var(--Success-Success-200, #a7edbb)}.upload-item--error{border-color:var(--Error-Error-200, #f9b4b4)}.upload-item__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--Gray-Gray-50, #f7f8fa);border-radius:var(--Border-1, 4px)}.upload-item__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--Size-1, 4px)}.upload-item__header{display:flex;align-items:center;justify-content:space-between;gap:var(--Size-2, 8px)}.upload-item__name{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.upload-item__size{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);flex-shrink:0}.upload-item__bar-wrap{display:flex;align-items:center;gap:var(--Size-2, 8px)}.upload-item__bar{flex:1;height:6px;background:var(--Gray-Gray-100, #eceef4);border-radius:100px;overflow:hidden}.upload-item__bar-fill{height:100%;background:var(--Primary-Primary-500, #f49a3d);border-radius:100px;transition:width 0.3s ease}.upload-item--success .upload-item__bar-fill{background:var(--Success-Success-500, #34c55a)}.upload-item--error .upload-item__bar-fill{background:var(--Error-Error-500, #f46a6b)}.upload-item--paused .upload-item__bar-fill{background:var(--Warning-Warning-500, #f49a3d)}.upload-item__pct{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);width:32px;text-align:right;flex-shrink:0}.upload-item__error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b)}.upload-item__cancel{background:none;border:none;padding:2px;cursor:pointer;display:flex;align-items:center;flex-shrink:0;border-radius:var(--Border-1, 4px);transition:background 0.15s}.upload-item__cancel:hover{background:var(--Gray-Gray-50, #f7f8fa)}`;
+
+const DropiFileUploadProgressBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiCancel = index.createEvent(this, "dropiCancel", 7);
+    }
+    /** File name */
+    fileName = '';
+    /** File size label (e.g. "1.2 MB") */
+    fileSize = '';
+    /** Upload progress 0–100 */
+    progress = 0;
+    /** Current status */
+    status = 'uploading';
+    /** Error message shown when status is "error" */
+    errorMessage = 'Error al cargar el archivo';
+    /** Show cancel/remove button */
+    showCancel = true;
+    /** Emitted when cancel/remove clicked */
+    dropiCancel;
+    get clampedProgress() {
+        return Math.min(100, Math.max(0, this.progress));
+    }
+    get iconName() {
+        switch (this.status) {
+            case 'success': return 'Check-circle';
+            case 'error': return 'Close-circle';
+            case 'paused': return 'Pause-circle';
+            default: return 'Document';
+        }
+    }
+    get iconColor() {
+        switch (this.status) {
+            case 'success': return 'Success-Success-500';
+            case 'error': return 'Error-Error-500';
+            case 'paused': return 'Warning-Warning-500';
+            default: return 'Primary-Primary-500';
+        }
+    }
+    render() {
+        const pct = this.clampedProgress;
+        return (index.h("div", { key: '1a7e98a56a7f60be4f9934f6e124ed9b78d815a2', class: `upload-item upload-item--${this.status}` }, index.h("div", { key: 'a3bd11ec50244ba045361e015202bf895e74ef54', class: "upload-item__icon" }, index.h("dropi-icon", { key: '0cbd181eb3cebab1feff8bc21748a62c66a4a38f', name: this.iconName, width: "24px", height: "24px", color: this.iconColor })), index.h("div", { key: 'fde507232d8105da36820a2dcd5e555ef28da37e', class: "upload-item__content" }, index.h("div", { key: '6d800c22fe3c659bfe39bf8b75f62668cfda6195', class: "upload-item__header" }, index.h("span", { key: 'cec4dc4b7c0658bf2f086742cc53caea655ef493', class: "upload-item__name" }, this.fileName), this.fileSize && index.h("span", { key: '9c523619ef47586b4236de2f21f9e483c6c100fc', class: "upload-item__size" }, this.fileSize)), this.status === 'error' ? (index.h("p", { class: "upload-item__error" }, this.errorMessage)) : (index.h("div", { class: "upload-item__bar-wrap" }, index.h("div", { class: "upload-item__bar" }, index.h("div", { class: "upload-item__bar-fill", style: { width: `${pct}%` } })), index.h("span", { class: "upload-item__pct" }, pct, "%")))), this.showCancel && (index.h("button", { key: '375c0fb876e6d2073ae55a96a2fe9654f399870e', class: "upload-item__cancel", onClick: () => this.dropiCancel.emit(), "aria-label": "Cancelar" }, index.h("dropi-icon", { key: '84dc8576cabe8846b7759411ad57fe7bab218ec2', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))));
+    }
+};
+DropiFileUploadProgressBar.style = dropiFileUploadProgressBarCss();
+
+exports.dropi_file_upload_progress_bar = DropiFileUploadProgressBar;

package/dist/cjs/dropi-file-upload.cjs.entry.js

@@ -0,0 +1,84 @@
+'use strict';
+
+var index = require('./index-DcOH2ZjX.js');
+
+const dropiFileUploadCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.upload-wrap{display:flex;flex-direction:column;gap:var(--Size-1, 4px)}.upload-label{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066)}.upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--Size-2, 8px);padding:var(--Size-6, 32px) var(--Size-4, 16px);border:2px dashed var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);cursor:pointer;transition:border-color 0.2s, background 0.2s;text-align:center}.upload-zone:hover:not(.upload-zone--disabled){border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fff5eb)}.upload-zone--dragging{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fff5eb)}.upload-zone--disabled{background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed;opacity:0.6}.upload-zone__text{margin:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d)}.upload-zone__hint{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.upload-hidden{display:none}.upload-error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b)}`;
+
+const DropiFileUpload = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dropiFilesSelected = index.createEvent(this, "dropiFilesSelected", 7);
+        this.dropiFileError = index.createEvent(this, "dropiFileError", 7);
+    }
+    /** Accepted MIME types (comma-separated, e.g. "image/*,application/pdf") */
+    accept = '';
+    /** Allow multiple file selection */
+    multiple = false;
+    /** Max file size in MB */
+    maxSizeMb = 10;
+    /** Disabled state */
+    disabled = false;
+    /** Label text above zone */
+    label = '';
+    /** Helper text inside drop zone */
+    helperText = 'Arrastra o haz clic para subir un archivo';
+    dragging = false;
+    errors = [];
+    inputRef;
+    /** Emitted with array of UploadedFile when files are selected/dropped */
+    dropiFilesSelected;
+    /** Emitted when a file fails validation. e.detail = error message */
+    dropiFileError;
+    async readFiles(fileList) {
+        const errs = [];
+        const valid = [];
+        for (let i = 0; i < fileList.length; i++) {
+            const file = fileList[i];
+            if (this.maxSizeMb && file.size > this.maxSizeMb * 1024 * 1024) {
+                const msg = `"${file.name}" supera el tamaño máximo de ${this.maxSizeMb} MB`;
+                errs.push(msg);
+                this.dropiFileError.emit(msg);
+                continue;
+            }
+            const dataUrl = await new Promise((resolve) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result);
+                reader.readAsDataURL(file);
+            });
+            valid.push({ name: file.name, size: file.size, type: file.type, dataUrl });
+        }
+        this.errors = errs;
+        if (valid.length)
+            this.dropiFilesSelected.emit(valid);
+    }
+    handleDrop(e) {
+        e.preventDefault();
+        this.dragging = false;
+        if (this.disabled || !e.dataTransfer?.files.length)
+            return;
+        this.readFiles(e.dataTransfer.files);
+    }
+    handleInputChange(e) {
+        const input = e.target;
+        if (input.files?.length)
+            this.readFiles(input.files);
+        input.value = '';
+    }
+    render() {
+        return (index.h("div", { key: '5498c6aa5d81a5265bf4e954e7674f4db8c5c538', class: "upload-wrap" }, this.label && index.h("label", { key: '94cd8bcaf7dba51e9d7861412d6a509841518367', class: "upload-label" }, this.label), index.h("div", { key: 'c3b5417103abab569b8a883967d567a4ec6ab483', class: {
+                'upload-zone': true,
+                'upload-zone--dragging': this.dragging,
+                'upload-zone--disabled': this.disabled,
+            }, onClick: () => {
+                if (!this.disabled)
+                    this.inputRef.click();
+            }, onDragOver: (e) => {
+                e.preventDefault();
+                if (!this.disabled)
+                    this.dragging = true;
+            }, onDragLeave: () => this.dragging = false, onDrop: (e) => this.handleDrop(e) }, index.h("dropi-icon", { key: '436802ec23dc677807ecac36947cd58f9d253e4d', name: "Upload", width: "32px", height: "32px", color: "Primary-Primary-500" }), index.h("p", { key: 'c80ed3536466ae22dcd96fabf353a736515e5bab', class: "upload-zone__text" }, this.helperText), this.maxSizeMb && (index.h("p", { key: '26defe6cece9a9ba6e9d7e2a1913a65607a20036', class: "upload-zone__hint" }, "Tama\u00F1o m\u00E1ximo: ", this.maxSizeMb, " MB")), index.h("input", { key: '00f7657bfc1646f01dfbc0339df6ed9f04a71ab0', ref: (el) => this.inputRef = el, type: "file", accept: this.accept, multiple: this.multiple, class: "upload-hidden", onChange: (e) => this.handleInputChange(e) })), this.errors.map(err => (index.h("p", { class: "upload-error" }, err)))));
+    }
+};
+DropiFileUpload.style = dropiFileUploadCss();
+
+exports.dropi_file_upload = DropiFileUpload;

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: '2bcb456155fc78c9602c5e34bc8f70d0d44bd050', width: this.width, height: this.height, class: { spin: this.name === 'Spinner' }, "aria-hidden": "true" }, index.h("use", { key: '92aa54406161cfdf5deda5f42a83e06480eb6208', 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

@@ -0,0 +1,44 @@
+'use strict';
+
+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", 7);
+    }
+    /** Optional label above the grid */
+    label = '';
+    /** Array of image URLs. Pass as JSON string or array */
+    images = [];
+    /** Thumbnail width (CSS value) */
+    width = '88px';
+    /** Thumbnail height (CSS value) */
+    height = '88px';
+    /** Emitted when a thumbnail is clicked. e.detail = { images, index } */
+    dropiImageClick;
+    get parsedImages() {
+        if (typeof this.images === 'string') {
+            try {
+                return JSON.parse(this.images);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.images || [];
+    }
+    handleError(e) {
+        e.target.src =
+            `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4OCA4OCI+PHJlY3Qgd2lkdGg9Ijg4IiBoZWlnaHQ9Ijg4IiBmaWxsPSIjZjdmOGZhIi8+PHRleHQgeD0iNDQiIHk9IjQ4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjYzNjOWQ5IiBmb250LXNpemU9IjEyIj5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
+    }
+    render() {
+        const imgs = this.parsedImages;
+        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();
+
+exports.dropi_image_miniature = DropiImageMiniature;

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

@@ -0,0 +1,62 @@
+'use strict';
+
+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;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", 7);
+    }
+    /** Whether the overlay is visible */
+    visible = false;
+    /** Images array or JSON string */
+    images = [];
+    /** Initially active image index */
+    activeIndex = 0;
+    current = 0;
+    parsedImages = [];
+    /** Emitted when overlay closes */
+    dropiClose;
+    imagesChanged(val) {
+        this.parsedImages = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    indexChanged(val) { this.current = val; }
+    visibleChanged(val) {
+        if (val)
+            this.current = this.activeIndex;
+    }
+    componentWillLoad() {
+        this.imagesChanged(this.images);
+        this.current = this.activeIndex;
+    }
+    close() { this.visible = false; this.dropiClose.emit(); }
+    prev() { this.current = (this.current - 1 + this.parsedImages.length) % this.parsedImages.length; }
+    next() { this.current = (this.current + 1) % this.parsedImages.length; }
+    handleError(e) {
+        e.target.src =
+            `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzFhMjAzMyIvPjx0ZXh0IHg9IjIwMCIgeT0iMTU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNDc1MDY2IiBmb250LXNpemU9IjE0Ij5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
+    }
+    render() {
+        if (!this.visible)
+            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-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": [{
+                "imagesChanged": 0
+            }],
+        "activeIndex": [{
+                "indexChanged": 0
+            }],
+        "visible": [{
+                "visibleChanged": 0
+            }]
+    }; }
+};
+DropiImageOverlay.style = dropiImageOverlayCss();
+
+exports.dropi_image_overlay = DropiImageOverlay;

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}.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: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"];
         }
@@ -105,7 +105,7 @@ const DropiInput = class {
         this.dropiInput.emit(val);
     }
     handleKeyDown(e) {
-        if (this.onlyNumbers && !this.isAllowedNumberKey(e)) {
+        if ((this.onlyNumbers || this.moneyFormat || this.thousandSeparator) && !this.isAllowedNumberKey(e)) {
             e.preventDefault();
         }
         if (this.onlyLetters && !this.isAllowedLetterKey(e)) {
@@ -182,15 +182,15 @@ const DropiInput = class {
     // ── Render ───────────────────────────────────────────────────
     render() {
         const showAsterisk = this.required && this.showAsterisk && !this.disabled;
-        const showIconInline = !!this.icon && !!this.value;
-        return (index.h("div", { key: '4ea9c2118e6452345a2a92eedc807e6d94019784', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (index.h("div", { key: 'b8c1269e9d583becd9614f6f3c28f6a2b536f18f', class: "input-label Body-S-Regular" }, this.label, showAsterisk && index.h("span", { key: '945665772caab1a1c95f1a054dea1b8dd88287a3', class: "asterisk" }, " *"))), index.h("div", { key: 'f550584dde83c907429255d9a98b8a59ff322cbb', class: "form-group" }, index.h("div", { key: '6cc46f5822e62d59bb211e7d9eb7909ab2b833c9', class: "input-container" }, showIconInline && (index.h("dropi-icon", { key: 'c860e808ae7cd805aa9c430d52743f7eab0aaeba', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.passwordInput && (index.h("dropi-icon", { key: 'ba571d4d14ec2a911a8b0bd4cdc7a8481aebe746', 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: 'aad18a94d94c9600236bac7c23e38b1c1c41f06a', id: this.resolvedId, class: {
+        const showIconInline = !!this.icon;
+        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: '8ba7ea50525aa8990662d45829ba732094c41f80', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showAsterisk && index.h("span", { key: '3916d3de6392da62b8086920cd2fce3b96238416', class: "asterisk" }, " *"))), this.showHelper && (index.h("div", { key: '83e17f7d0cdb503b86fd035775e1cb45d9f41709', class: "form-control-helper" }, this.isInvalid && (index.h("dropi-icon", { key: '4e034348270853f8a3aafbbbb938a5974076aebd', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), index.h("span", { key: '7832f200ccc6f6273d65012b9e642c313399a277', 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

@@ -0,0 +1,27 @@
+'use strict';
+
+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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iIzg1OGVhNiI+ZHJvcGk8L3RleHQ+PC9zdmc+`;
+const DropiLogo = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Logo image URL */
+    urlLogo = '';
+    /** Size variant */
+    size = 'large';
+    /** Theme (reserved for future use) */
+    theme = 'light';
+    handleError(e) {
+        e.target.src = FALLBACK_SVG;
+    }
+    render() {
+        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();
+
+exports.dropi_logo = DropiLogo;

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

@@ -0,0 +1,27 @@
+'use strict';
+
+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)}`;
+
+const DropiLottieLoader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Show or hide the loader */
+    visible = false;
+    /** Path to the Lottie JSON animation file */
+    loadingAnimation = '/assets/lottie-files/loading.json';
+    /** Title shown below the animation */
+    loaderTitle = 'Cargando...';
+    /** Descriptive message below the title */
+    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" }, 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();
+
+exports.dropi_lottie_loader = DropiLottieLoader;