@dropi/ui 0.1.36 → 0.1.41

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-C8kwDvpf.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, #ffffff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:28px}.input-container--has-icon label.label-bottom{left:28px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
+const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:50%;left:12px;transform:translateY(-50%);z-index:1;display:flex;align-items:center;justify-content:center}.icon-input-password{position:absolute;top:50%;right:13px;transform:translateY(-50%);cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:40px}.input-container--has-icon label.label-bottom{left:40px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
 
 const DropiInput = class {
     constructor(hostRef) {
@@ -22,7 +22,7 @@ const DropiInput = class {
     internals;
     // ── Identification ──────────────────────────────────────────
     /** Input id. Defaults to label label. */
-    id = '';
+    inputId = '';
     /** Name attribute for native form submission */
     name = '';
     // ── Content ─────────────────────────────────────────────────
@@ -96,7 +96,9 @@ const DropiInput = class {
         if (!val)
             return;
         if (val.id !== undefined)
-            this.id = val.id;
+            this.inputId = val.id;
+        if (val.inputId !== undefined)
+            this.inputId = val.inputId;
         if (val.label !== undefined)
             this.label = val.label;
         if (val.placeholder !== undefined)
@@ -212,7 +214,7 @@ const DropiInput = class {
     }
     // ── Computed ─────────────────────────────────────────────────
     get resolvedId() {
-        return this.id || this.label;
+        return this.inputId || this.label;
     }
     get inputType() {
         if (this.passwordInput)
@@ -233,14 +235,14 @@ const DropiInput = class {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (index.h("div", { key: 'cc38b113d77982ba53665a6c8ccbf39a393da696', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (index.h("div", { key: '06bb6b6df585f859dc7a903fac4ed3f9f6c31077', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && index.h("span", { key: '6e87d6717a312d7497c2cf438aec7a692b974dda', class: "asterisk" }, " *"))), index.h("div", { key: '2eb67324cb06e04ee9fc5507a319a2eda8b5e410', class: "form-group" }, index.h("div", { key: '9d8d6f8df83c33782fd61810267e433fdab452d9', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && index.h("dropi-icon", { key: '370070a0e75a929438cb564698ee10c866e944a9', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" }), this.passwordInput && (index.h("dropi-icon", { key: '675958939e32a94060993515f9b9a58513ec2adc', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), index.h("input", { key: 'd2ac98c43f9863ea8153dc66dd3fe347a7c28473', id: this.resolvedId, class: {
+        return (index.h("div", { key: 'a6c762070ca5c0ffb5028f1899d4e026721664ee', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (index.h("div", { key: 'fb223818b568114400aa456e595623c882b8bcd2', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && index.h("span", { key: '04c522a21ba3e0ec9710d267feb866d79dae7cbb', class: "asterisk" }, " *"))), index.h("div", { key: '1672e9954f11ad61e6f224953f97aa7036e5b212', class: "form-group" }, index.h("div", { key: 'd9bfc41486fe3f93d5144f55bf89a4ae1a916f5e', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (index.h("dropi-icon", { key: 'e7d21fd9b115925ed2bc584a6f5c614ea3761922', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (index.h("dropi-icon", { key: '5593f56ed03acdb79a9e8e4fefac58d585a5a092', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), index.h("input", { key: 'ef70c2be1606334593269be63234295bdbdf86b1', id: this.resolvedId, class: {
                 'form-control': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
                 'padding-icon': showIconInline,
                 'text-password': this.passwordInput && !this.showPassword,
                 'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (index.h("label", { key: '45eb57801e7d199532215ba069af8ba01714a46f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && index.h("span", { key: '5d4d83ce2575d60567a4a947d643a89f760cb3bd', class: "asterisk" }, " *"))), this.showHelper && (index.h("div", { key: 'b78fdac5f0c46b827c9dd2895d43a5e1724058d8', class: "form-control-helper" }, this.isInvalid && index.h("dropi-icon", { key: 'f037c95230fe0fa57540a1b74a26c14e56e555e4', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), index.h("span", { key: 'fc48f7418c36f7ded7a999e446323ca8adb2b590', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (index.h("label", { key: 'c0d079355d299b26dc2e8bde4347fd30aa791e21', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && index.h("span", { key: 'fca9bc2745e0ccb7ba3b10c4e3e6b5d8bbb6f645', class: "asterisk" }, " *"))), this.showHelper && (index.h("div", { key: 'f864cc07f591d0948cb06d6dde1e910bab10187a', class: "form-control-helper" }, this.isInvalid && index.h("dropi-icon", { key: 'be2cf0d632fd8245e817d4023b4e4f060bc80d24', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), index.h("span", { key: '3768369a635e8ac03db24b0ba7fa7a214cc71577', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));
@@ -317,9 +319,9 @@ const DropiPaginator = class {
         const pages = this.pageNumbers;
         const isFirst = this.currentPage <= 1;
         const isLast = this.currentPage >= this.totalPages;
-        return (index.h("div", { key: 'b601f88e4f971f885835d81fe876303fe97027c7', class: "paginator" }, index.h("div", { key: '988ffb7ed122d4a666af4525bc85159d8d36538a', class: "paginator-pages" }, !isFirst && !this.noLabels && (index.h("button", { key: '920a1a407782bde436fb6560caeb39848e9c7e28', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, index.h("dropi-icon", { key: '67bc6ba66852a8883a19b2a3182be3cb298f2c8d', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (index.h("button", { key: 'b1d0c5a8f66056cb53c31b01959177754632a906', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, index.h("dropi-icon", { key: '951435cbf9b7a8b9bd0e0f33d2c9eacaea6e7af1', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && index.h("span", { key: 'fed8a203b3e62f5da3e6fa055b1ee6e35453147c', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+        return (index.h("div", { key: 'b601f88e4f971f885835d81fe876303fe97027c7', class: "paginator" }, index.h("div", { key: '988ffb7ed122d4a666af4525bc85159d8d36538a', class: "paginator-pages" }, !isFirst && !this.noLabels && (index.h("button", { key: '920a1a407782bde436fb6560caeb39848e9c7e28', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, index.h("dropi-icon", { key: '249d4f2fc0a7ba2d790e3cf1c7a36a8d853a8cfe', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (index.h("button", { key: '7b3cbe1cbd33db77fe540b5e179ed759e2d515e9', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, index.h("dropi-icon", { key: '4f162e4df1573f5b6df40477099c3dc50347b738', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && index.h("span", { key: 'a569b225a577e3dfb41466247be33846254ba1f6', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
             ? index.h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
-            : index.h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (index.h("button", { key: '35a728e031880403ee0ff984484237ab701bd406', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && index.h("span", { key: '4a73ba225105e449f8dfe8a504c5b1ad3e9c31cd', class: "paginator-label" }, "Siguiente"), index.h("dropi-icon", { key: '7b140df9437922acc8c24d6ee1ff15d69ce7b7f1', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (index.h("button", { key: '6157fa189ca011be4c13da803d2cd110d882bb8e', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, index.h("dropi-icon", { key: '7b6c1b31d4caed8203b739cc10f3084568e40f10', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
+            : index.h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (index.h("button", { key: 'ad51ec2f21741cf89e0e692cca2057c8cacea9f3', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && index.h("span", { key: '3eb463a7749ef9f419613c07975a87073df29ecf', class: "paginator-label" }, "Siguiente"), index.h("dropi-icon", { key: 'a6ece1855840a3ada48de22151bab4a43fd1972e', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (index.h("button", { key: '4ac9168aba1221ad17a08f7463cc2f065ea1ce6f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, index.h("dropi-icon", { key: '9e3618334ec1d476ea59ea00a600499f47a45a9a', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
     }
 };
 DropiPaginator.style = dropiPaginatorCss();
@@ -374,7 +376,7 @@ const DropiTag = class {
         return typeof this.text === 'string' && this.text.trim().length > 0;
     }
     render() {
-        return (index.h("div", { key: '1736efc48b3ccaf5f3ca85ad29622f42b4fb3c8d', class: "container-chips" }, index.h("div", { key: '96c2b0e9d22881ca71c58488dcd622a1eef1a120', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (index.h("dropi-icon", { key: 'aab0330382fe0690177edcb364ab043459b9a316', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && index.h("span", { key: 'be38207ca7668b6b4976d5f3f2f506c380ee0491' }, this.text))));
+        return (index.h("div", { key: '1736efc48b3ccaf5f3ca85ad29622f42b4fb3c8d', class: "container-chips" }, index.h("div", { key: '96c2b0e9d22881ca71c58488dcd622a1eef1a120', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (index.h("dropi-icon", { key: '4c94cf3fcabd31b6b50fc711815472f8b12e43d9', class: "file-icon", name: this.icon, iconWidth: "16px", iconHeight: "16px", color: this.iconColor })), this.hasContent && index.h("span", { key: '26f06b85d085e58aa854533a9fd238e70957212b' }, this.text))));
     }
     static get watchers() { return {
         "type": [{

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

@@ -45,7 +45,7 @@ const DropiLanguagesSelector = class {
     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)))))));
+        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", iconWidth: "16px", iconHeight: "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": [{

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

@@ -181,10 +181,10 @@ const DropiMediaPlayer = class {
             }, onMouseMove: () => this.onMouseMove(), onMouseLeave: () => this.onMouseLeave() }, index.h("div", { class: "dropi-media-player__blur-bg", style: { backgroundImage: `url(${this.poster})` } }), index.h("div", { class: "dropi-media-player__blur-overlay" }), index.h("video", { class: "dropi-media-player__video", ref: (el) => this.mediaEl = el, src: this.src, poster: this.poster, onClick: () => this.togglePlay(), onPlay: () => { this.playing = true; this.startHideControlsTimer(); this.dropiPlay.emit(true); }, onPause: () => { this.playing = false; this.showControls = true; clearTimeout(this.controlsTimeout); this.dropiPlay.emit(false); }, onEnded: () => { this.playing = false; this.showControls = true; this.dropiEnded.emit(); }, onTimeUpdate: () => this.handleTimeUpdate(), onLoadedMetaData: () => this.handleLoadedMetadata() }), index.h("div", { class: {
                 'dropi-media-player__center-play': true,
                 'dropi-media-player__center-play--hidden': this.playing && !this.showControls
-            }, style: { width: `${this.playButtonSize}px`, height: `${this.playButtonSize}px` }, onClick: (e) => { e.stopPropagation(); this.togglePlay(); } }, this.playing ? (index.h("svg", { width: `${this.playIconSize}px`, height: `${this.playIconSize}px`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", style: { color: '#ffffff' } }, index.h("rect", { x: "6.5", y: "4", width: "3.5", height: "16", rx: "1.75" }), index.h("rect", { x: "14", y: "4", width: "3.5", height: "16", rx: "1.75" }))) : (index.h("dropi-icon", { name: "Play", color: "Neutral-White", width: `${this.playIconSize}px`, height: `${this.playIconSize}px` }))), index.h("div", { class: {
+            }, style: { width: `${this.playButtonSize}px`, height: `${this.playButtonSize}px` }, onClick: (e) => { e.stopPropagation(); this.togglePlay(); } }, this.playing ? (index.h("svg", { width: `${this.playIconSize}px`, height: `${this.playIconSize}px`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", style: { color: '#ffffff' } }, index.h("rect", { x: "6.5", y: "4", width: "3.5", height: "16", rx: "1.75" }), index.h("rect", { x: "14", y: "4", width: "3.5", height: "16", rx: "1.75" }))) : (index.h("dropi-icon", { name: "Play", color: "Neutral-White", iconWidth: `${this.playIconSize}px`, iconHeight: `${this.playIconSize}px` }))), index.h("div", { class: {
                 'dropi-media-player__controls-bar': true,
                 'dropi-media-player__controls-bar--hidden': !this.showControls
-            }, onClick: (e) => e.stopPropagation() }, index.h("span", { class: "dropi-media-player__timestamp" }, this.currentTimeStr, " / ", this.durationStr), index.h("div", { class: "dropi-media-player__progress", onClick: (e) => { e.stopPropagation(); this.handleSeek(e); } }, index.h("div", { class: "dropi-media-player__progress-track" }, index.h("div", { class: "dropi-media-player__progress-fill", style: { width: `${this.progress}%` } }), index.h("div", { class: "dropi-media-player__progress-thumb", style: { left: `${this.progress}%` } }))), index.h("div", { class: "dropi-media-player__actions" }, index.h("div", { class: "dropi-media-player__speed-control", onClick: (e) => e.stopPropagation() }, this.showSpeedMenu && (index.h("div", { class: "dropi-media-player__speed-menu" }, this.speeds.map(s => (index.h("button", { type: "button", class: { 'dropi-media-player__speed-option': true, 'dropi-media-player__speed-option--active': this.speed === s }, onClick: (e) => { e.stopPropagation(); this.selectSpeed(s); } }, "x", s))))), index.h("button", { class: "dropi-media-player__btn dropi-media-player__btn--speed", onClick: (e) => { e.stopPropagation(); this.toggleSpeedMenu(); }, type: "button" }, "x", this.speed)), index.h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleFullscreen(); }, type: "button" }, index.h("dropi-icon", { name: this.isFullscreen ? 'Compress' : 'Expand', color: "Neutral-White", width: "20px", height: "20px" })), index.h("div", { class: "dropi-media-player__volume-control", onClick: (e) => e.stopPropagation() }, this.showVolumeSlider && (index.h("div", { class: "dropi-media-player__volume-popup" }, index.h("input", { type: "range", class: "dropi-media-player__volume-slider", min: "0", max: "1", step: "0.01", value: this.muted ? 0 : this.volume, style: { background: this.volumeGradient }, onInput: (e) => this.handleVolume(e) }))), index.h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleVolume(); }, type: "button" }, index.h("dropi-icon", { name: this.volumeIcon, color: "Neutral-White", width: "20px", height: "20px" })))))));
+            }, onClick: (e) => e.stopPropagation() }, index.h("span", { class: "dropi-media-player__timestamp" }, this.currentTimeStr, " / ", this.durationStr), index.h("div", { class: "dropi-media-player__progress", onClick: (e) => { e.stopPropagation(); this.handleSeek(e); } }, index.h("div", { class: "dropi-media-player__progress-track" }, index.h("div", { class: "dropi-media-player__progress-fill", style: { width: `${this.progress}%` } }), index.h("div", { class: "dropi-media-player__progress-thumb", style: { left: `${this.progress}%` } }))), index.h("div", { class: "dropi-media-player__actions" }, index.h("div", { class: "dropi-media-player__speed-control", onClick: (e) => e.stopPropagation() }, this.showSpeedMenu && (index.h("div", { class: "dropi-media-player__speed-menu" }, this.speeds.map(s => (index.h("button", { type: "button", class: { 'dropi-media-player__speed-option': true, 'dropi-media-player__speed-option--active': this.speed === s }, onClick: (e) => { e.stopPropagation(); this.selectSpeed(s); } }, "x", s))))), index.h("button", { class: "dropi-media-player__btn dropi-media-player__btn--speed", onClick: (e) => { e.stopPropagation(); this.toggleSpeedMenu(); }, type: "button" }, "x", this.speed)), index.h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleFullscreen(); }, type: "button" }, index.h("dropi-icon", { name: this.isFullscreen ? 'Compress' : 'Expand', color: "Neutral-White", iconWidth: "20px", iconHeight: "20px" })), index.h("div", { class: "dropi-media-player__volume-control", onClick: (e) => e.stopPropagation() }, this.showVolumeSlider && (index.h("div", { class: "dropi-media-player__volume-popup" }, index.h("input", { type: "range", class: "dropi-media-player__volume-slider", min: "0", max: "1", step: "0.01", value: this.muted ? 0 : this.volume, style: { background: this.volumeGradient }, onInput: (e) => this.handleVolume(e) }))), index.h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleVolume(); }, type: "button" }, index.h("dropi-icon", { name: this.volumeIcon, color: "Neutral-White", iconWidth: "20px", iconHeight: "20px" })))))));
     }
 };
 DropiMediaPlayer.style = dropiMediaPlayerCss();

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

@@ -36,7 +36,7 @@ const DropiModal = class {
     /** Enable a before-close hook (matches Angular `enableBeforeClose`) */
     enableBeforeClose = false;
     /** No-op — kept for API parity with Angular (matches Angular `draggable`) */
-    draggable = false;
+    isDraggable = false;
     /** No-op — kept for API parity with Angular (matches Angular `resizable`) */
     resizable = false;
     onShow;
@@ -129,7 +129,7 @@ const DropiModal = class {
         }
     }
     render() {
-        return (index.h("div", { key: '6f790289cbdcb0cb92040abc471e8dc592f3d0ab', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}`, style: { display: this.mounted || this.isClosing ? 'flex' : 'none' } }, (this.modal ?? true) && index.h("div", { key: '6667d2df75ac67352346f454452a360a6506473a', class: "modal-mask", onClick: () => this.dismissable && this.hide() }), index.h("div", { key: '3a5485798cec9e986f411631aee819f10716e441', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (index.h("div", { key: '795afcb76540a52beefd1ca4c0fb80d88156ef98', class: "modal-header" }, this.header && index.h("span", { key: '3df861b36deca9caaf6c64c54b89dc897f5b9453', class: "modal-title" }, this.header), index.h("slot", { key: 'b6b1913314b2c05daa299d273ff7b495d4f72c39', name: "header" }), this.showCloseIcon && (index.h("button", { key: '529dd7e8787a09fc588e28c0c77f0f27c304659f', class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), index.h("div", { key: 'eeeae841372a788a34cee76b38de7689a7a296fc', class: "modal-content" }, index.h("slot", { key: '83c67fb239b5579169368b5b2ba6c2ee22564a73' })), this.showFooter && index.h("div", { key: 'd86cd40508a7b6ea3c9cd4583aaa5a69646bb549', class: "modal-footer" }, index.h("slot", { key: 'f70503acd5f2b5e672700cec46e4e9705d944e22', name: "footer" })))));
+        return (index.h("div", { key: '1aee093f108c54540005a6cb2f48bef700f05d63', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}`, style: { display: this.mounted || this.isClosing ? 'flex' : 'none' } }, (this.modal ?? true) && index.h("div", { key: '06ebd29da0c7dc699e7c16769476e310336ab149', class: "modal-mask", onClick: () => this.dismissable && this.hide() }), index.h("div", { key: '87cb9bbd4c1c6c27a6a7d09f561ea781c1571803', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (index.h("div", { key: '86f22ef920b7a7437825f4c5f9ccff23b591c499', class: "modal-header" }, this.header && index.h("span", { key: '2ae7c9b879ee6c025b6b42977bad643ff4d28370', class: "modal-title" }, this.header), index.h("slot", { key: '85a0a54691ca191719202c8fea6b30ffff30aacc', name: "header" }), this.showCloseIcon && (index.h("button", { key: 'dc1f570830d22535a39c9e9fbf0bccdb8e4bfcf7', class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), index.h("div", { key: 'ceca42f33ff7d4762c79b2d133e23bc7cedb3cb3', class: "modal-content" }, index.h("slot", { key: '14a82735c521c45deda61e8a69ae8673ad754b3d' })), this.showFooter && index.h("div", { key: 'e71a5393c19de696247502abd09d26a38cd1b979', class: "modal-footer" }, index.h("slot", { key: '1364eed1b66e82d321d06d13d9d34615c7634ce0', name: "footer" })))));
     }
     static get watchers() { return {
         "visible": [{

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

@@ -44,9 +44,9 @@ const DropiNavbar = class {
     }
     render() {
         const items = this.parsedData;
-        return (index.h("nav", { key: '15c337396dbe445ac7a13d7e0f2d99f88b4de439', class: "navbar" }, index.h("div", { key: '922a217dfe53f3f34dd6746033996bcd71dadfb2', class: "navbar__left" }, this.showMenuToggle && (index.h("button", { key: 'db80ad1fd6f47807196c81ae60bf9cea8bb16e77', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, index.h("dropi-icon", { key: 'c35615cbfd5dc807def32957062ea25b059664b5', name: "Menu", width: "20px", height: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (index.h("img", { key: 'ffc532e501bc7bc0a5625c865955a43c84857a58', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && index.h("span", { key: '7fb10d4a5e42030a7701bf0933587ecdaf5ab20b', class: "navbar__title" }, this.title)), items.length > 0 && (index.h("ul", { key: '338118e694ca0a46d94fee60211302efe8bbee51', 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.clickLoadItem.emit(item), 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.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (index.h("span", { class: "navbar__badge" }, item.badge)))))))), index.h("div", { key: 'f2ac52b78963fa9165b6614a7abaa6fe822b2a89', class: "navbar__right" }, index.h("button", { key: '4e78c3fbc69899f8b1f0206dc27372c3c0d15c31', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, index.h("dropi-icon", { key: 'a94bbd4aa73b7be9a735b31b92d882c53616f8e6', name: "Bell", width: "20px", height: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (index.h("span", { key: 'c2157fca16e1c3f992562027d4dfeb348ef7ad23', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), index.h("button", { key: 'ba2cb25cda984ba8ea180ff8edb3d3ffc955ab27', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+        return (index.h("nav", { key: '15c337396dbe445ac7a13d7e0f2d99f88b4de439', class: "navbar" }, index.h("div", { key: '922a217dfe53f3f34dd6746033996bcd71dadfb2', class: "navbar__left" }, this.showMenuToggle && (index.h("button", { key: 'db80ad1fd6f47807196c81ae60bf9cea8bb16e77', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, index.h("dropi-icon", { key: 'eca18144260cb6471a19f78f7ce75254ba5a138e', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (index.h("img", { key: '374ea8553605f289c413882c757eda70054ba71d', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && index.h("span", { key: '8e2abceb591c0de10ca99d2090fea7a0da792a7b', class: "navbar__title" }, this.title)), items.length > 0 && (index.h("ul", { key: 'fd26fc64ea3325ddc439a802ab56e69b329020dd', 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.clickLoadItem.emit(item), type: "button" }, item.icon && index.h("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), index.h("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (index.h("span", { class: "navbar__badge" }, item.badge)))))))), index.h("div", { key: '51a6532caac773ea7236e95b0aa5ee9ee052db4a', class: "navbar__right" }, index.h("button", { key: '309b47a8fa074e7d47632a95490c5ba0d2950745', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, index.h("dropi-icon", { key: '2a970ae36fdd4e42d9fbab5d8ebb61a1d14d54c8', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (index.h("span", { key: '67412b6d3c7689f78cca15e91a1e8e3ee88152a2', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), index.h("button", { key: '38cc70fdc1c204b06b62c54a23f4b8c76647fd6b', 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: '11b4c378a089644e63d6186fe40e31ca7b4ab924', class: "navbar__user-name" }, this.userName), index.h("dropi-icon", { key: 'c2a140081f5ad014b73d35f45476cc1ac41391b5', name: "Arrow-Down-2", width: "12px", height: "12px", color: "Gray-Gray-400" })))));
+            : index.h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && index.h("span", { key: '1f2cfe4bddef60d31751c24c3f02cace2f07d6dd', class: "navbar__user-name" }, this.userName), index.h("dropi-icon", { key: '520aff19c56964eefb3b1f59646c19df779c7e47', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
     }
 };
 DropiNavbar.style = dropiNavbarCss();

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

@@ -10,6 +10,7 @@ const DropiOtpSendCode = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.codeCompleted = index.createEvent(this, "codeCompleted", 7);
+        this.codeAccepted = index.createEvent(this, "codeAccepted", 7);
         this.dropiResend = index.createEvent(this, "dropiResend", 7);
     }
     /** Delivery method label */
@@ -27,8 +28,10 @@ const DropiOtpSendCode = class {
     error = false;
     inputs = [];
     timer;
-    /** Emitted when all 6 digits are entered. e.detail = the complete code string */
+    /** Emitted when all 6 digits are entered. */
     codeCompleted;
+    /** Emitted when all 6 digits are entered (alternative event). */
+    codeAccepted;
     /** Emitted when resend is requested */
     dropiResend;
     componentDidLoad() { this.startCountdown(); }
@@ -56,7 +59,9 @@ const DropiOtpSendCode = class {
         if (val && index < OTP_LENGTH - 1)
             this.inputs[index + 1]?.focus();
         if (newDigits.every(d => d !== '')) {
-            this.codeCompleted.emit(newDigits.join(''));
+            const finalCode = newDigits.join('');
+            this.codeCompleted.emit(finalCode);
+            this.codeAccepted.emit(finalCode);
         }
     }
     handleKeyDown(e, index) {
@@ -72,19 +77,22 @@ const DropiOtpSendCode = class {
         this.digits = newDigits;
         this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');
         this.inputs[Math.min(text.length, OTP_LENGTH - 1)]?.focus();
-        if (newDigits.every(d => d !== ''))
-            this.codeCompleted.emit(newDigits.join(''));
+        if (newDigits.every(d => d !== '')) {
+            const finalCode = newDigits.join('');
+            this.codeCompleted.emit(finalCode);
+            this.codeAccepted.emit(finalCode);
+        }
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (index.h("div", { key: '3cfe0d64890b2c90f500c662fe8572f9630d614b', class: "otp" }, this.showLabelContact && (index.h("p", { key: 'd791c408a5393ae82e00e758b67530d4b21381ac', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && index.h("strong", { key: '3d6ca9c3a00a71ba99800a94f1b95d3247d75522' }, " ", this.labelContact))), index.h("div", { key: '22d172d48ae8748fa27aaead4c65145d848ae4f2', 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: '09eb961c43257d0a2a852ec05bafa7c050d9e4ec', class: "otp" }, this.showLabelContact && (index.h("p", { key: '46b215b5343892c5bca4d5aab6590e8da791fc9d', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && index.h("strong", { key: '0c0871dbb99ad85a15275be1ed7f698cf9e4a808' }, " ", this.labelContact))), index.h("div", { key: 'd11d2c4f094a82240b3bde49039ff2e2d027f5d5', 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: 'c6434be80f44e6f8a277bdff49503f67db5cdca7', class: "otp__error" }, this.errorMessage)), index.h("div", { key: '281e56d25ec3b01136aae2220605037d4dff4e16', 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: 'a9156a4da398eeeec8128a012978e8e2c5f7eef4', class: "otp__error" }, this.errorMessage)), index.h("div", { key: '9c685306ba97d19907b92bbf6c203f0473a809fb', 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();

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

@@ -181,7 +181,7 @@ const DropiPhoneInput = class {
         return (index.h("div", { key: 'e4a9468971ff90e3e1c2cf6944a8475451843428', class: "phone-wrap" }, index.h("div", { key: 'dabdccaf0453e98afb3db78ee6b6f83a66615baa', class: "phone-input-container" }, index.h("div", { key: '6481136b782da271fe47c19cfd359398bf632f35', class: "custom-select" }, index.h("button", { key: 'd314c0e2c74724eff20eae8f34241caf1fc2448c', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, index.h("span", { key: 'c8b2aa7801a5c633c70010e7eeb2d5d9f3fb6b37', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, index.h("img", { key: 'c2a6583a02b029cee578b9c931f185f7d4102e3f', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), index.h("dropi-icon", { key: '0ace7b7188e846793d66373ea3d2c2d8ae881c24', name: this.open ? 'Dropdown-up' : 'Dropdown-down', width: "14px", height: "14px", color: "Gray-Gray-500" })), index.h("ul", { key: '832b37902ce54aac152e956d671fb6f899781029', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (index.h("li", null, index.h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, index.h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), index.h("input", { key: 'eaf32641b019e1ffd3fe5a1d7a3c4597e1cd0cb5', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
+            } }, index.h("span", { key: 'c8b2aa7801a5c633c70010e7eeb2d5d9f3fb6b37', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, index.h("img", { key: 'c2a6583a02b029cee578b9c931f185f7d4102e3f', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), index.h("dropi-icon", { key: '26e6e575c9072c008060560f03fcaba942ae5157', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), index.h("ul", { key: 'ad2d7688f2de26aa1c8ac080819203c7f5839764', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (index.h("li", null, index.h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, index.h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), index.h("input", { key: '399968a68860688b9e91084dc5530aa5464ef5f1', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
     }
     static get watchers() { return {
         "codArea": [{

package/dist/cjs/dropi-radio-selection-list.cjs.entry.js

@@ -41,10 +41,10 @@ const DropiRadioSelectionList = class {
         return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
     }
     render() {
-        return (index.h("div", { key: '7fdbf3d20a030a78ab4f48e7dba8333a34b1017b', class: "rsl" }, this.showFilter && (index.h("div", { key: '12e2abb8f8ed76c6b3231f28b63c842ba3c3c326', class: "rsl__search" }, index.h("dropi-icon", { key: '4f6a63480a811ed22d67485274b7edf3bf9765f4', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.h("input", { key: 'c1f1c5942d422fceaa967640b7795a981896d68d', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (index.h("div", { key: '7fdbf3d20a030a78ab4f48e7dba8333a34b1017b', class: "rsl" }, this.showFilter && (index.h("div", { key: '12e2abb8f8ed76c6b3231f28b63c842ba3c3c326', class: "rsl__search" }, index.h("dropi-icon", { key: '0d3e759696ceefdc997fadec75cc73f281caafd0', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), index.h("input", { key: 'd5605975ebfda35d7abb0e69fe0a2baa929faddb', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
                 this.onSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });
-            } }))), index.h("div", { key: '425b4048cbf4fa4a22c13d932f296cb594ffe993', class: "rsl__list" }, this.filtered.map(opt => {
+            } }))), index.h("div", { key: '25dae74884621ce4f27f214de94c9ddb0fa1799f', class: "rsl__list" }, this.filtered.map(opt => {
             const isSelected = opt.id === this.selectedOption;
             return (index.h("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.valueChange.emit(opt.id); } }, index.h("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && index.h("div", { class: "rsl__radio-dot" })), index.h("div", { class: "rsl__content" }, index.h("span", { class: "rsl__name" }, opt.name), (isSelected || this.alwaysShowDescription) && opt.description && (index.h("span", { class: "rsl__desc" }, opt.description)))));
         }))));

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

@@ -108,10 +108,10 @@ const DropiSearch = class {
     }
     render() {
         const showDropdown = this.open && this.parsedOptions.length > 0;
-        return (index.h("div", { key: 'ec00c8851a1d2d4ddda50edea458589a62d9451a', class: "search-wrap" }, this.label && index.h("label", { key: '31cadba1b21276ec43f3623676fe1a7f9bac4da2', class: "search-label" }, this.label), index.h("div", { key: 'bf68dbb7cfa657e8a7e441a2fe47db0e7d214e44', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && index.h("dropi-icon", { key: 'c1c442a8fed018f774d6addc9dcaf3d1e89d6121', class: "search-icon", name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.h("input", { key: 'd22791b1864320c54060827cc601bbc242d6c37d', class: "search-input", type: this.typeInput, placeholder: this.placeholder, value: this.textInput, maxLength: this.maxLength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
+        return (index.h("div", { key: 'ec00c8851a1d2d4ddda50edea458589a62d9451a', class: "search-wrap" }, this.label && index.h("label", { key: '31cadba1b21276ec43f3623676fe1a7f9bac4da2', class: "search-label" }, this.label), index.h("div", { key: 'bf68dbb7cfa657e8a7e441a2fe47db0e7d214e44', class: `search-input-row search-input-row--${this.type}` }, this.showIcon && index.h("dropi-icon", { key: '21239271d90ba7adcc64e3f7ecb9b836619bd11e', class: "search-icon", name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), index.h("input", { key: '64735f2618f993cbca379e72b3c87435158b4f0c', class: "search-input", type: this.typeInput, placeholder: this.placeholder, value: this.textInput, maxLength: this.maxLength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
                 if (this.parsedOptions.length)
                     this.open = true;
-            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.onBlur.emit(); } }), this.showClear && this.textInput && (index.h("button", { key: '55e8653e330b06d488c6d65f6a8ffe6465a24289', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, index.h("dropi-icon", { key: '0c154c2a95119caefe84bd9cfc40860d4b722137', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))), showDropdown && (index.h("div", { key: 'a4b4691ff29a427755f19c4bc4932f2634736701', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, this.filtered.length === 0 ? (index.h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (index.h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multipleSelectModel && index.h("dropi-checkbox", { checked: this.isSelected(opt) }), index.h("span", { class: "search-option__label" }, opt[this.dataName])))))))));
+            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.onBlur.emit(); } }), this.showClear && this.textInput && (index.h("button", { key: 'c6a1dab911f262e0b2da88e59cdbaf6b4c1c74a9', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, index.h("dropi-icon", { key: 'ddf404e0be3d95f1154ecd22dd9b9f7a06e3c187', name: "Close-small", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), showDropdown && (index.h("div", { key: 'a8c5ecbfe700bcb116119f172c3cb017b9693113', class: `search-dropdown search-dropdown--${this.position}`, style: { '--dropdown-height': `${this.heightOverlay}px` } }, this.filtered.length === 0 ? (index.h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (index.h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multipleSelectModel && index.h("dropi-checkbox", { checked: this.isSelected(opt) }), index.h("span", { class: "search-option__label" }, opt[this.dataName])))))))));
     }
     static get watchers() { return {
         "dataToSearch": [{

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

@@ -321,7 +321,7 @@ const DropiSelect = class {
             }, disabled: this.disabled, ref: el => (this.buttonRef = el), onClick: () => this.toggleDropdown() }, index.h("div", { class: {
                 'button-content': true,
                 'option-radio': this.radioOptions && !!this._selectedOption && !this.multiSelect,
-            } }, this.preIcon && (index.h("dropi-icon", { name: this.preIcon, width: "20px", height: "20px", color: "Gray-Gray-500" })), this.radioOptions && this._selectedOption && !this.multiSelect && [
+            } }, this.preIcon && (index.h("dropi-icon", { name: this.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), this.radioOptions && this._selectedOption && !this.multiSelect && [
             this._selectedOption.imageUrl && !this._selectedOption.isFallback
                 ? index.h("img", { class: "option-image small-image", src: this._selectedOption.imageUrl, alt: "", onError: () => {
                         if (this._selectedOption)
@@ -331,7 +331,7 @@ const DropiSelect = class {
                     ? index.h("span", { class: "option-image-fallback small-image" }, this._selectedOption.label.charAt(0).toUpperCase())
                     : null,
             index.h("div", { class: "labels-container elipsis" }, index.h("span", null, this._selectedOption.label), this._selectedOption.secondLabel && index.h("span", { class: "option-second-label" }, this._selectedOption.secondLabel)),
-        ], !(this.radioOptions && this._selectedOption && !this.multiSelect) && (index.h("div", { class: "elipsis" }, this.triggerLabel))), index.h("dropi-icon", { name: this.isOpen ? 'Dropdown-up' : 'Dropdown-down', width: iconSize, height: iconSize, color: iconColor })));
+        ], !(this.radioOptions && this._selectedOption && !this.multiSelect) && (index.h("div", { class: "elipsis" }, this.triggerLabel))), index.h("dropi-icon", { name: this.isOpen ? 'Dropdown-up' : 'Dropdown-down', iconWidth: iconSize, iconHeight: iconSize, color: iconColor })));
     }
     renderOption(option) {
         const isSelected = this.multiSelect
@@ -343,23 +343,23 @@ const DropiSelect = class {
                 'option-with-flag': this.showCountryFlags && !!option.countryCode,
                 'disabled-option': !!option.disabled,
                 'selected-option': isSelected,
-            }, disabled: option.disabled, onClick: () => this.selectOption(option) }, this.multiSelect && (index.h("span", { class: { 'multi-checkbox': true, checked: isSelected } }, isSelected && (index.h("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { d: "M20.6 5.7L9.1 17.2c-.2.2-.5.3-.8.3s-.6-.1-.8-.3L3 12.8c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l3.9 3.9L19.2 4.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4z", fill: "white" }))))), this.radioOptions && (index.h("div", { class: { radio: true, selected: isSelected } }, isSelected && index.h("div", { class: "circle" }))), !this.radioOptions && option.preIcon && (index.h("dropi-icon", { name: option.preIcon, width: "20px", height: "20px", color: "Gray-Gray-500" })), this.radioOptions && option.imageUrl && !option.isFallback && (index.h("img", { class: "option-image", src: option.imageUrl, alt: "", onError: () => { option.isFallback = true; this.options = [...this.options]; } })), this.radioOptions && option.isFallback && (index.h("span", { class: "option-image-fallback" }, option.label.charAt(0).toUpperCase())), this.showCountryFlags && option.countryCode && (index.h("span", { class: "flag-placeholder" }, option.countryCode)), this.radioOptions
+            }, disabled: option.disabled, onClick: () => this.selectOption(option) }, this.multiSelect && (index.h("span", { class: { 'multi-checkbox': true, checked: isSelected } }, isSelected && (index.h("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { d: "M20.6 5.7L9.1 17.2c-.2.2-.5.3-.8.3s-.6-.1-.8-.3L3 12.8c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l3.9 3.9L19.2 4.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4z", fill: "white" }))))), this.radioOptions && (index.h("div", { class: { radio: true, selected: isSelected } }, isSelected && index.h("div", { class: "circle" }))), !this.radioOptions && option.preIcon && (index.h("dropi-icon", { name: option.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), this.radioOptions && option.imageUrl && !option.isFallback && (index.h("img", { class: "option-image", src: option.imageUrl, alt: "", onError: () => { option.isFallback = true; this.options = [...this.options]; } })), this.radioOptions && option.isFallback && (index.h("span", { class: "option-image-fallback" }, option.label.charAt(0).toUpperCase())), this.showCountryFlags && option.countryCode && (index.h("span", { class: "flag-placeholder" }, option.countryCode)), this.radioOptions
             ? (index.h("div", { class: "labels-container" }, index.h("span", { class: "elipsis" }, option.label), option.secondLabel && index.h("span", { class: "option-second-label" }, option.secondLabel)))
             : (index.h("span", { class: "elipsis" }, this.showCountryFlags && option.shortLabel ? option.shortLabel : option.label)))));
     }
     renderDropdown() {
         if (!this.isOpen)
             return null;
-        return (index.h("ul", { class: `select-dropdown-overlay ${this.overlayClass}`, style: this.dropdownStyle, onScroll: (e) => this.handleScroll(e) }, this.searchEnabled && (index.h("li", { class: "sticky-search" }, index.h("div", { class: "search-wrapper" }, index.h("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), index.h("input", { class: "search-input", type: "text", placeholder: this.placeHolderSearch, value: this.searchTerm, onInput: (e) => this.handleSearch(e.target.value), onKeyDown: (e) => {
+        return (index.h("ul", { class: `select-dropdown-overlay ${this.overlayClass}`, style: this.dropdownStyle, onScroll: (e) => this.handleScroll(e) }, this.searchEnabled && (index.h("li", { class: "sticky-search" }, index.h("div", { class: "search-wrapper" }, index.h("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), index.h("input", { class: "search-input", type: "text", placeholder: this.placeHolderSearch, value: this.searchTerm, onInput: (e) => this.handleSearch(e.target.value), onKeyDown: (e) => {
                 if (e.key === 'Enter')
                     this.onKeyEnter.emit(e);
-            } }), this.searchTerm && (index.h("button", { type: "button", class: "search-clear", onClick: () => this.handleSearch('') }, index.h("dropi-icon", { name: "Close", width: "14px", height: "14px", color: "Gray-Gray-400" })))))), this.isGrouped && this.filteredOptions.map(group => [
+            } }), this.searchTerm && (index.h("button", { type: "button", class: "search-clear", onClick: () => this.handleSearch('') }, index.h("dropi-icon", { name: "Close", iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-400" })))))), this.isGrouped && this.filteredOptions.map(group => [
             index.h("li", { class: "option-group-title" }, group.category),
-            ...group.options.map(opt => (index.h("li", { key: opt.id }, index.h("button", { type: "button", class: { option: true, 'option-group': true, 'disabled-option': !!opt.disabled }, disabled: opt.disabled, onClick: () => this.selectOption(opt) }, opt.preIcon && index.h("dropi-icon", { name: opt.preIcon, width: "20px", height: "20px", color: "Gray-Gray-500" }), index.h("span", { class: "elipsis" }, opt.label))))),
+            ...group.options.map(opt => (index.h("li", { key: opt.id }, index.h("button", { type: "button", class: { option: true, 'option-group': true, 'disabled-option': !!opt.disabled }, disabled: opt.disabled, onClick: () => this.selectOption(opt) }, opt.preIcon && index.h("dropi-icon", { name: opt.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }), index.h("span", { class: "elipsis" }, opt.label))))),
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (index.h("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (index.h("div", { key: '932cad965441a784f51d6b82ffc5a100cf438fb6', class: "custom-select" }, !this.dropdownType && this.label && (index.h("label", { key: '1c46242dcbd7862b32a36e2132bc4689b3c95aab', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && index.h("span", { key: '79e2df6ae0a55c4e51ff7354486903d58bdb7d36', class: "asterisk" }, " *"))), index.h("div", { key: 'd4a48dcc513b5ae7171598709b0d00c3ffd7f42b', class: "dropdown-container" }, this.dropdownType && this.label && (index.h("div", { key: 'f9d8b6f87dcc8438c00ec04edabe10ebb2cceb79', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (index.h("div", { key: 'e8cc2e4ccb3a5919fe30411003153bfe6434b0d0', class: "select-helper" }, index.h("span", { key: '2fe857a4efac70882ec58835534bb22739c4fb26' }, this.textHelper))), this.hasError && this.errorText && (index.h("div", { key: 'e357992bf4a391052fe3a8444b24777292f71bf0', class: "select-helper-error" }, index.h("dropi-icon", { key: '9a32ef1f5ae2ccf18996bdc451e5de4e2c923a0a', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), index.h("span", { key: '919259f76022b34162f680234a3c1cf93492666b' }, this.errorText))), this.renderDropdown()));
+        return (index.h("div", { key: '9f5397dca313ba676a5a038f89ded457c324ac7a', class: "custom-select" }, !this.dropdownType && this.label && (index.h("label", { key: '5924d81286019ca01ca5eda924078e64db5ead66', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && index.h("span", { key: '1565c47c081c8fb497185417aa46559f3754db89', class: "asterisk" }, " *"))), index.h("div", { key: '6be308aeafb7a4a2da302db925ccc07e5eb27718', class: "dropdown-container" }, this.dropdownType && this.label && (index.h("div", { key: 'a2ea9c5e67274181c5bc020c990281ac425b489b', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (index.h("div", { key: 'a13ebbf9fe6e975724b2441f5c1c71b18dacf128', class: "select-helper" }, index.h("span", { key: '55f2369bc0a8c156454b4c29a323f98bd13321fb' }, this.textHelper))), this.hasError && this.errorText && (index.h("div", { key: 'bc5dc3394916459576798d5f1db4126992b30d58', class: "select-helper-error" }, index.h("dropi-icon", { key: '12bcece304d9de3cc807921ba69af29b9b763fc9', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), index.h("span", { key: 'c221b88fde03aa2d66ce212272ff999f2ba5a9ad' }, this.errorText))), this.renderDropdown()));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

@@ -53,10 +53,10 @@ const DropiSidebar = class {
                         'sidebar-option': true,
                         'sidebar-active-option': !!item.active,
                         'sidebar-default-option': !item.active
-                    }, onClick: () => this.onItemClick(item) }, index.h("dropi-icon", { name: item.icon || 'Cube', width: "20px", height: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }), index.h("span", null, item.text), item.subItems && item.subItems.length > 0 && (index.h("dropi-icon", { class: {
+                    }, onClick: () => this.onItemClick(item) }, index.h("dropi-icon", { name: item.icon || 'Cube', iconWidth: "20px", iconHeight: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }), index.h("span", null, item.text), item.subItems && item.subItems.length > 0 && (index.h("dropi-icon", { class: {
                         'arrow': true,
                         'arrow-expanded': !!item.expandedMenu
-                    }, name: "Dropdown-down", width: "20px", height: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }))),
+                    }, name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: item.active ? 'Primary-Primary-500' : 'Gray-Gray-500' }))),
                 /* SubItems Renderizados al mismo nivel DOM que instruye Angular ng-container */
                 item.subItems && item.subItems.length > 0 && (item.subItems.map(subOption => (index.h("div", { class: {
                         'sidebar-sub-item': true,

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

@@ -43,7 +43,7 @@ const DropiSteps = class {
             const state = this.stepState(step);
             const label = labels[step - 1];
             const isLast = step === this.stepsCount;
-            return (index.h("div", { class: "stepper__step", key: step }, index.h("div", { class: "stepper__circle-wrap" }, index.h("div", { class: { 'stepper__circle': true, [`stepper__circle--${state}`]: true } }, state === 'completed' ? (index.h("dropi-icon", { name: "Check", width: "12px", height: "12px", color: "Neutral-White" })) : (this.showNumberOfStep ? index.h("span", null, step) : null)), !isLast && index.h("div", { class: { 'stepper__line': true, 'stepper__line--done': state === 'completed' } })), label && (index.h("div", { class: "stepper__label" }, label.title && index.h("span", { class: "stepper__title" }, label.title), label.description && index.h("span", { class: "stepper__desc" }, label.description)))));
+            return (index.h("div", { class: "stepper__step", key: step }, index.h("div", { class: "stepper__circle-wrap" }, index.h("div", { class: { 'stepper__circle': true, [`stepper__circle--${state}`]: true } }, state === 'completed' ? (index.h("dropi-icon", { name: "Check", iconWidth: "12px", iconHeight: "12px", color: "Neutral-White" })) : (this.showNumberOfStep ? index.h("span", null, step) : null)), !isLast && index.h("div", { class: { 'stepper__line': true, 'stepper__line--done': state === 'completed' } })), label && (index.h("div", { class: "stepper__label" }, label.title && index.h("span", { class: "stepper__title" }, label.title), label.description && index.h("span", { class: "stepper__desc" }, label.description)))));
         })));
     }
 };

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

@@ -33,7 +33,7 @@ const DropiTable = class {
     /** Empty state message */
     emptyMessage = 'No hay datos disponibles';
     /** Table title */
-    title = '';
+    tableTitle = '';
     /** Show search input */
     showSearch = false;
     /** Show column selector button */
@@ -226,7 +226,7 @@ const DropiTable = class {
                 case 'country':
                     return (index.h("div", { class: "flag-container" }, value.flag && index.h("dropi-country-flags", { width: "24", height: "24", country: value.flag, style: { display: 'inline-flex' } }), index.h("span", null, value.value)));
                 case 'textIcon':
-                    return (index.h("div", { class: "text-icon-label" }, index.h("dropi-icon", { name: value.icon, width: "24px", height: "24px", color: value.iconColor || 'Gray-Gray-500' }), value.value && index.h("span", null, value.value)));
+                    return (index.h("div", { class: "text-icon-label" }, index.h("dropi-icon", { name: value.icon, iconWidth: "24px", iconHeight: "24px", color: value.iconColor || 'Gray-Gray-500' }), value.value && index.h("span", null, value.value)));
                 case 'status':
                     return (index.h("div", { class: "status-label" }, index.h("div", { class: "status-dot" }, index.h("div", { class: `dot dot-${(value.status || '').toLowerCase()}` }), index.h("span", { class: "status-text" }, value.status)), value.value && index.h("span", { class: "status-description" }, value.value)));
                 case 'image':
@@ -247,11 +247,11 @@ const DropiTable = class {
         const allSelected = rows.length > 0 && this.selectedKeys.size === rows.length;
         const hasActions = this.parsedRowActions.length > 0;
         const cols = this.visibleColumns;
-        return (index.h("div", { class: "table-container" }, (this.showSearch || this.showColumnSelector || this.title) && (index.h("div", { class: "search-container" }, this.title && index.h("h3", { class: "table-title" }, this.title), index.h("div", { class: `search-actions${this.showSearch ? '' : ' only-filter'}` }, this.showSearch && (index.h("dropi-input", { placeholder: "Buscar", value: this.searchTerm, onOnInput: (e) => {
+        return (index.h("div", { class: "table-container" }, (this.showSearch || this.showColumnSelector || this.tableTitle) && (index.h("div", { class: "search-container" }, this.tableTitle && index.h("div", { class: "table-title Body-L-Bold" }, this.tableTitle), index.h("div", { class: `search-actions${this.showSearch ? '' : ' only-filter'}` }, this.showSearch && (index.h("dropi-input", { placeholder: "Buscar", value: this.searchTerm, onOnInput: (e) => {
                 this.searchTerm = e.detail;
                 this.dropiSearch.emit(e.detail);
                 this.onSearchChange.emit(e.detail);
-            } })), this.showColumnSelector && (index.h("div", { class: "table-tools" }, index.h("div", { class: "column-selector-container" }, index.h("button", { class: "column-selector-btn", onClick: () => this.showColumnMenu = !this.showColumnMenu }, index.h("dropi-icon", { name: "list-table", width: "20px", height: "20px", color: "Gray-Gray-500" })), this.showColumnMenu && (index.h("div", { class: "column-selector-menu" }, this.parsedColumns.map(col => (index.h("div", { class: "column-selector-option", onClick: () => {
+            } })), this.showColumnSelector && (index.h("div", { class: "table-tools" }, index.h("div", { class: "column-selector-container" }, index.h("button", { class: "column-selector-btn", onClick: () => this.showColumnMenu = !this.showColumnMenu }, index.h("dropi-icon", { name: "list-table", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), this.showColumnMenu && (index.h("div", { class: "column-selector-menu" }, this.parsedColumns.map(col => (index.h("div", { class: "column-selector-option", onClick: () => {
                 const next = new Set(this.hiddenColumns);
                 if (next.has(col.key))
                     next.delete(col.key);
@@ -262,7 +262,7 @@ const DropiTable = class {
                 this.hiddenColumns = this.hiddenColumns.size === 0
                     ? new Set(this.parsedColumns.map(c => c.key))
                     : new Set();
-            } }, index.h("dropi-checkbox", { checked: this.hiddenColumns.size === 0 }), index.h("span", null, "Mostrar / Ocultar todo"))))))))))), index.h("div", { class: `table-wrapper${hasActions ? ' has-sticky-actions' : ''}` }, index.h("table", { class: `custom-table${this.showCheckbox ? ' has-checkbox' : ''}` }, index.h("thead", null, index.h("tr", null, this.showCheckbox && (index.h("th", { class: "checkbox-header" }, index.h("dropi-checkbox", { checked: allSelected, onOnChange: (e) => this.toggleAll(e.detail) }))), cols.map(col => (index.h("th", { class: { sortable: !!col.sortable, 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { textAlign: col.align || 'center', minWidth: col.minWidth, maxWidth: col.maxWidth }, onClick: () => this.handleSort(col) }, index.h("div", { class: `headers-container${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, index.h("div", { class: `headers${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, index.h("span", null, col.label), col.sortable && (index.h("div", { class: "order-icons" }, index.h("dropi-icon", { name: "Caret-up", width: "12px", height: "12px", color: this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' }), index.h("dropi-icon", { name: "Caret-down", width: "12px", height: "12px", color: !this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' })))))))), hasActions && index.h("th", { class: "actions-header actions" }, "Acciones"))), index.h("tbody", null, this.loading ? (Array.from({ length: 5 }).map(() => (index.h("tr", { class: "table-row" }, this.showCheckbox && index.h("td", null, index.h("div", { class: "skeleton skeleton--sm" })), cols.map(() => index.h("td", null, index.h("div", { class: "skeleton" }))), hasActions && index.h("td", null))))) : rows.length === 0 ? (index.h("tr", null, index.h("td", { colSpan: cols.length + (this.showCheckbox ? 1 : 0) + (hasActions ? 1 : 0) }, index.h("div", { class: "empty-table" }, index.h("div", { class: "empty-message-container" }, this.emptyMessage))))) : (rows.map((row, i) => (index.h("tr", { class: "table-row", onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.showCheckbox && (index.h("td", { onClick: (e) => e.stopPropagation() }, index.h("dropi-checkbox", { checked: this.selectedKeys.has(i), onOnChange: () => this.toggleRow(i) }))), cols.map(col => (index.h("td", { class: { 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { minWidth: col.minWidth, maxWidth: col.maxWidth, overflow: col.maxWidth ? 'hidden' : undefined } }, index.h("div", { class: "cell-content", style: { textAlign: col.align || 'center' } }, this.renderCellValue(row[col.key]))))), hasActions && (index.h("td", { class: "action-button actions", onClick: (e) => e.stopPropagation() }, this.parsedRowActions.length > 3 ? (index.h("div", { style: { display: "flex", justifyContent: "center", width: "100%" } }, index.h("dropi-icon", { class: "action-icon", name: "Menu-dots-vertical", width: "24px", height: "24px", color: "Gray-Gray-500", onClick: () => this.openActionRow = this.openActionRow === i ? -1 : i }), this.openActionRow === i && (index.h("div", { class: "actions-menu" }, this.parsedRowActions.map(action => (index.h("div", { class: "action-item", onClick: () => { this.openActionRow = -1; this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } }, index.h("dropi-icon", { name: action.icon, width: "20px", height: "20px", color: action.iconColor || 'Gray-Gray-500' }), action.label))))))) : (index.h("div", { class: "short-actions" }, this.parsedRowActions.map(action => (index.h("dropi-icon", { class: "action-icon", name: action.icon, width: "24px", height: "24px", color: action.iconColor || 'Gray-Gray-500', onClick: () => { this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } })))))))))))))), this.showPaginator && (index.h("div", { class: "pagination" }, index.h("div", { class: "page-size-selector" }, index.h("label", null, "Mostrar"), index.h("select", { onChange: (e) => {
+            } }, index.h("dropi-checkbox", { checked: this.hiddenColumns.size === 0 }), index.h("span", null, "Mostrar / Ocultar todo"))))))))))), index.h("div", { class: `table-wrapper${hasActions ? ' has-sticky-actions' : ''}` }, index.h("table", { class: `custom-table${this.showCheckbox ? ' has-checkbox' : ''}` }, index.h("thead", null, index.h("tr", null, this.showCheckbox && (index.h("th", { class: "checkbox-header" }, index.h("dropi-checkbox", { checked: allSelected, onOnChange: (e) => this.toggleAll(e.detail) }))), cols.map(col => (index.h("th", { class: { sortable: !!col.sortable, 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { textAlign: col.align || 'center', minWidth: col.minWidth, maxWidth: col.maxWidth }, onClick: () => this.handleSort(col) }, index.h("div", { class: `headers-container${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, index.h("div", { class: `headers${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, index.h("span", null, col.label), col.sortable && (index.h("div", { class: "order-icons" }, index.h("dropi-icon", { name: "Caret-up", iconWidth: "12px", iconHeight: "12px", color: this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' }), index.h("dropi-icon", { name: "Caret-down", iconWidth: "12px", iconHeight: "12px", color: !this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' })))))))), hasActions && index.h("th", { class: "actions-header actions" }, "Acciones"))), index.h("tbody", null, this.loading ? (Array.from({ length: 5 }).map(() => (index.h("tr", { class: "table-row" }, this.showCheckbox && index.h("td", null, index.h("div", { class: "skeleton skeleton--sm" })), cols.map(() => index.h("td", null, index.h("div", { class: "skeleton" }))), hasActions && index.h("td", null))))) : rows.length === 0 ? (index.h("tr", null, index.h("td", { colSpan: cols.length + (this.showCheckbox ? 1 : 0) + (hasActions ? 1 : 0) }, index.h("div", { class: "empty-table" }, index.h("div", { class: "empty-message-container" }, this.emptyMessage))))) : (rows.map((row, i) => (index.h("tr", { class: "table-row", onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.showCheckbox && (index.h("td", { onClick: (e) => e.stopPropagation() }, index.h("dropi-checkbox", { checked: this.selectedKeys.has(i), onOnChange: () => this.toggleRow(i) }))), cols.map(col => (index.h("td", { class: { 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { minWidth: col.minWidth, maxWidth: col.maxWidth, overflow: col.maxWidth ? 'hidden' : undefined } }, index.h("div", { class: "cell-content", style: { textAlign: col.align || 'center' } }, this.renderCellValue(row[col.key]))))), hasActions && (index.h("td", { class: "action-button actions", onClick: (e) => e.stopPropagation() }, this.parsedRowActions.length > 3 ? (index.h("div", { style: { display: "flex", justifyContent: "center", width: "100%" } }, index.h("dropi-icon", { class: "action-icon", name: "Menu-dots-vertical", iconWidth: "24px", iconHeight: "24px", color: "Gray-Gray-500", onClick: () => this.openActionRow = this.openActionRow === i ? -1 : i }), this.openActionRow === i && (index.h("div", { class: "actions-menu" }, this.parsedRowActions.map(action => (index.h("div", { class: "action-item", onClick: () => { this.openActionRow = -1; this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } }, index.h("dropi-icon", { name: action.icon, iconWidth: "20px", iconHeight: "20px", color: action.iconColor || 'Gray-Gray-500' }), action.label))))))) : (index.h("div", { class: "short-actions" }, this.parsedRowActions.map(action => (index.h("dropi-icon", { class: "action-icon", name: action.icon, iconWidth: "24px", iconHeight: "24px", color: action.iconColor || 'Gray-Gray-500', onClick: () => { this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } })))))))))))))), this.showPaginator && (index.h("div", { class: "pagination" }, index.h("div", { class: "page-size-selector" }, index.h("label", null, "Mostrar"), index.h("select", { onChange: (e) => {
                 this.pageSize = Number(e.target.value);
                 this.currentPage = 1;
                 this.dropiPageSizeChange.emit(this.pageSize);

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

@@ -36,7 +36,7 @@ const DropiTabs = class {
         return (index.h("div", { key: '337040015b29581ebb15ac347bb62220ed0a2d4d', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
             const isActive = tab.id === this.activeTab;
             return (index.h("div", { role: "tab", "aria-selected": String(isActive), class: { 'tab-item': true, 'tab-item--active': isActive && !tab.disabled, 'tab-item--disabled': !!tab.disabled }, onClick: () => this.handleClick(tab) }, index.h("span", { class: "tab-label-row" }, index.h("span", { class: "tab-label" }, tab.label), tab.counter !== undefined && tab.counter !== null && (index.h("span", { class: { 'tab-counter': true, 'tab-counter--active': isActive } }, tab.counter))), this.showIcon && (tab.completed
-                ? index.h("dropi-icon", { name: "Check-circle", width: "12px", height: "12px", color: "Success-Success-500" })
+                ? index.h("dropi-icon", { name: "Check-circle", iconWidth: "12px", iconHeight: "12px", color: "Success-Success-500" })
                 : index.h("span", { class: "tab-status-dot" }))));
         })));
     }

package/dist/cjs/dropi-text-area.cjs.entry.js

@@ -117,7 +117,7 @@ const DropiTextArea = class {
                 'Body-M-Regular': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
-            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (index.h("div", { key: 'e3271eeea7e85a64454c344986e36c85197f3782', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (index.h("div", { key: 'c4b83072b96e56b45b6afc8209f4d124cb6d6bf3', class: "form-control-helper" }, this.isInvalid && (index.h("dropi-icon", { key: '98aef0a346f1ca3fe33cf9f2e6519f61aa787374', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), index.h("span", { key: 'f820d6043b390dc22d1b7ee1ee58dfd9a3fcd333', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
+            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (index.h("div", { key: 'e3271eeea7e85a64454c344986e36c85197f3782', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (index.h("div", { key: 'c4b83072b96e56b45b6afc8209f4d124cb6d6bf3', class: "form-control-helper" }, this.isInvalid && (index.h("dropi-icon", { key: '07a2884a516118f3169a0427701a2271d24f2bcc', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" })), index.h("span", { key: 'a518a81fdba8df18083ef92a1dbc9936d3fcc17d', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/cjs/dropi-time-line.cjs.entry.js

@@ -25,7 +25,7 @@ const DropiTimeLine = class {
         const steps = this.parsedSteps;
         return (index.h("div", { key: '0b43d3e673cda6f31476abcbc55ef2b6b9dbd7ac', class: "timeline" }, steps.map((step, i) => {
             const isLast = i === steps.length - 1;
-            return (index.h("div", { class: { 'tl-step': true, [`tl-step--${step.status}`]: true }, key: step.id || i }, index.h("div", { class: "tl-step__marker" }, index.h("div", { class: "tl-step__icon" }, step.icon ? (index.h("dropi-icon", { name: step.icon, width: "16px", height: "16px", color: step.status === 'done' ? 'Neutral-White' : step.status === 'active' ? 'Primary-Primary-500' : 'Gray-Gray-400' })) : (index.h("span", { class: "tl-step__dot" }))), !isLast && index.h("div", { class: "tl-step__line" })), index.h("div", { class: "tl-step__content" }, index.h("span", { class: "tl-step__label" }, step.label), step.subtitle && index.h("span", { class: "tl-step__subtitle" }, step.subtitle))));
+            return (index.h("div", { class: { 'tl-step': true, [`tl-step--${step.status}`]: true }, key: step.id || i }, index.h("div", { class: "tl-step__marker" }, index.h("div", { class: "tl-step__icon" }, step.icon ? (index.h("dropi-icon", { name: step.icon, iconWidth: "16px", iconHeight: "16px", color: step.status === 'done' ? 'Neutral-White' : step.status === 'active' ? 'Primary-Primary-500' : 'Gray-Gray-400' })) : (index.h("span", { class: "tl-step__dot" }))), !isLast && index.h("div", { class: "tl-step__line" })), index.h("div", { class: "tl-step__content" }, index.h("span", { class: "tl-step__label" }, step.label), step.subtitle && index.h("span", { class: "tl-step__subtitle" }, step.subtitle))));
         })));
     }
 };

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

@@ -48,7 +48,7 @@ const DropiToast = class {
         return `<lottie-player src="${this.lottieMap[severity]}" background="transparent" speed="1" loop autoplay></lottie-player>`;
     }
     render() {
-        return (index.h("div", { key: '0ad8903921fd1bd773d206029bcc4e12e8b21349', class: `toast-container toast-container--${this.position}` }, (this.items ?? []).map(item => (index.h("div", { key: item.msg.id, class: { 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving } }, index.h("div", { class: `toast toast--${item.msg.severity}` }, index.h("div", { class: "toast-content" }, index.h("div", { class: "lottie-img" }, index.h("div", { class: "lottie-player-container", innerHTML: this.getLottieHtml(item.msg.severity) })), index.h("div", { class: "info-container" }, index.h("p", { class: "title" }, item.msg.summary), item.msg.detail && index.h("p", { class: "description" }, item.msg.detail))), item.msg.closable && (index.h("button", { class: "toast-close", onClick: () => this.remove(item.msg.id) }, index.h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-400" })))))))));
+        return (index.h("div", { key: '0ad8903921fd1bd773d206029bcc4e12e8b21349', class: `toast-container toast-container--${this.position}` }, (this.items ?? []).map(item => (index.h("div", { key: item.msg.id, class: { 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving } }, index.h("div", { class: `toast toast--${item.msg.severity}` }, index.h("div", { class: "toast-content" }, index.h("div", { class: "lottie-img" }, index.h("div", { class: "lottie-player-container", innerHTML: this.getLottieHtml(item.msg.severity) })), index.h("div", { class: "info-container" }, index.h("p", { class: "title" }, item.msg.summary), item.msg.detail && index.h("p", { class: "description" }, item.msg.detail))), item.msg.closable && (index.h("button", { class: "toast-close", onClick: () => this.remove(item.msg.id) }, index.h("dropi-icon", { name: "Close-small", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-400" })))))))));
     }
 };
 DropiToast.style = dropiToastCss();

package/dist/cjs/dropi-tooltip-v2.cjs.entry.js

@@ -118,12 +118,12 @@ const DropiTooltipV2 = class {
         const bubbleStyle = { maxWidth: this.maxWidth };
         if (this.minWidth)
             bubbleStyle.minWidth = this.minWidth;
-        return (index.h("div", { key: '85f49bcb2af567a8fb70cd92afab893a2e0bf567', class: "tooltip-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleClick, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout }, this.showIcon && (index.h("dropi-icon", { key: 'f40ebe0c12bdfa251cbe6086f7ea432aed0124fa', name: this.iconName, width: `${this.iconSize}px`, height: `${this.iconSize}px`, color: this.iconColor })), index.h("slot", { key: '77d2aa944f57cc5f858bbff97f88dfda6e71e088' }), this.displayContent && (index.h("div", { key: '4fcbbbf1a3b163ad2992efd8c8dfbef695f4f422', class: {
+        return (index.h("div", { key: '85f49bcb2af567a8fb70cd92afab893a2e0bf567', class: "tooltip-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onClick: this.handleClick, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout }, this.showIcon && (index.h("dropi-icon", { key: '0ec2770a45d95e2dc655886d086f7f44c12fdda5', name: this.iconName, iconWidth: `${this.iconSize}px`, iconHeight: `${this.iconSize}px`, color: this.iconColor })), index.h("slot", { key: 'caeff259dfaecdd7757d85bee3e93b15d8b53173' }), this.displayContent && (index.h("div", { key: 'e1be3f25c37b978b79db639a245d1030e9de2d59', class: {
                 'tooltip-bubble': true,
                 [`tooltip-bubble--${this.position}`]: true,
                 [`tooltip-bubble--arrow-${this.arrowPosition}`]: true,
                 'tooltip-bubble--visible': this.visible,
-            }, style: bubbleStyle, role: "tooltip" }, this.showX && (index.h("button", { key: '48428c1dcdd6c52f8a0b26641a016a00cf04444d', class: "tooltip-close", onClick: this.handleClose, "aria-label": "Cerrar" }, index.h("dropi-icon", { key: '6c870fc88739ba5e09c1f77eda783d21af476f98', name: "Close-small", width: "12px", height: "12px", color: "Gray-Gray-500" }))), this.title && !this.text && index.h("strong", { key: 'c501f266a5d3cc4250f9b205f8fa641c1f9be7ad', class: "tooltip-title" }, this.title), this.label && !this.text && index.h("span", { key: '6fb281665f9c84a7cb1f86bf8718da8ef5b95204', class: "tooltip-label" }, this.label), this.text && index.h("span", { key: '4d1a3445cb4b5361e8604404bfb970fc0e9ea289' }, this.text), index.h("span", { key: 'f7d0ac1b155d486c55cbeebc63cca32838e25811', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
+            }, style: bubbleStyle, role: "tooltip" }, this.showX && (index.h("button", { key: 'ba9f719b7066bb953a45b60f03fce20383c2eac5', class: "tooltip-close", onClick: this.handleClose, "aria-label": "Cerrar" }, index.h("dropi-icon", { key: '8660e8130e643393c9cd70846247ccae8e3ebf24', name: "Close-small", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-500" }))), this.title && !this.text && index.h("strong", { key: '2d2a39d2d2a3993b62901497660a31193bcece12', class: "tooltip-title" }, this.title), this.label && !this.text && index.h("span", { key: 'b34e2e997629c5700b64a6ae527b71c44e8939f4', class: "tooltip-label" }, this.label), this.text && index.h("span", { key: '4cd22e60cce211b96cf8441a33dcd7afe5b88e40' }, this.text), index.h("span", { key: 'deb83c9f7c1a9cfbb3f68ec087cae81d0f64a56b', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
     }
 };
 DropiTooltipV2.style = dropiTooltipCss();