@dropi/ui 0.1.16 → 0.1.17

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

@@ -0,0 +1,111 @@
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+
+const dropiModalCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:1100}.modal-root--open{opacity:1;pointer-events:auto}.modal-root--closing{opacity:1;pointer-events:none}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:700;flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--Size-1, 4px);width:100%}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer{justify-content:center}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}`;
+
+const DropiModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiShow = createEvent(this, "dropiShow");
+        this.dropiHide = createEvent(this, "dropiHide");
+        this.visibleChange = createEvent(this, "visibleChange");
+    }
+    visible = false;
+    header = '';
+    showCloseIcon = true;
+    dismissable = true;
+    closeOnEscape = true;
+    modal = true;
+    showHeader = true;
+    position = 'center';
+    size = 'm';
+    dropiShow;
+    dropiHide;
+    visibleChange;
+    isOpen = false;
+    isClosing = false;
+    mounted = false;
+    closeTimer = null;
+    keyHandler = null;
+    visibleChanged(val) {
+        val ? this.openModal() : this.startClose();
+    }
+    componentDidLoad() {
+        if (this.visible)
+            this.openModal();
+    }
+    disconnectedCallback() {
+        this.removeKeyHandler();
+        if (this.closeTimer)
+            clearTimeout(this.closeTimer);
+        document.body.style.overflow = '';
+    }
+    async hide() {
+        this.visible = false;
+        this.visibleChange.emit(false);
+        this.startClose();
+    }
+    async show() {
+        this.visible = true;
+        this.visibleChange.emit(true);
+        this.openModal();
+    }
+    openModal() {
+        if (this.closeTimer) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+        this.mounted = true;
+        this.isClosing = false;
+        this.isOpen = false;
+        requestAnimationFrame(() => requestAnimationFrame(() => {
+            this.isOpen = true;
+            this.dropiShow.emit();
+        }));
+        this.addKeyHandler();
+        if (this.modal)
+            document.body.style.overflow = 'hidden';
+    }
+    startClose() {
+        if (this.isClosing)
+            return;
+        this.isClosing = true;
+        this.isOpen = false;
+        this.removeKeyHandler();
+        if (this.closeTimer)
+            clearTimeout(this.closeTimer);
+        this.closeTimer = setTimeout(() => {
+            this.mounted = false;
+            this.isClosing = false;
+            document.body.style.overflow = '';
+            this.dropiHide.emit();
+        }, 200);
+    }
+    addKeyHandler() {
+        if (!this.closeOnEscape)
+            return;
+        this.keyHandler = (e) => {
+            if (e.key === 'Escape' && this.visible && this.dismissable)
+                this.hide();
+        };
+        document.addEventListener('keydown', this.keyHandler);
+    }
+    removeKeyHandler() {
+        if (this.keyHandler) {
+            document.removeEventListener('keydown', this.keyHandler);
+            this.keyHandler = null;
+        }
+    }
+    render() {
+        if (!this.mounted)
+            return null;
+        return (h("div", { class: { 'modal-root': true, [`modal-root--${this.position}`]: true, 'modal-root--open': this.isOpen, 'modal-root--closing': this.isClosing } }, this.modal && h("div", { class: "modal-mask", onClick: () => this.dismissable && this.hide() }), h("div", { class: { 'modal-panel': true, [`size-${this.size}`]: !!this.size }, role: "dialog", "aria-modal": "true" }, this.showHeader && (h("div", { class: "modal-header" }, this.header && h("span", { class: "modal-title" }, this.header), h("slot", { name: "header" }), this.showCloseIcon && (h("button", { class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", width: "24px", height: "24px", color: "Gray-Gray-400" }))))), h("div", { class: "modal-content" }, h("slot", null)), h("div", { class: "modal-footer" }, h("slot", { name: "footer" })))));
+    }
+    static get watchers() { return {
+        "visible": [{
+                "visibleChanged": 0
+            }]
+    }; }
+};
+DropiModal.style = dropiModalCss();
+
+export { DropiModal as dropi_modal };

package/dist/esm/dropi-paginator.entry.js

@@ -0,0 +1,87 @@
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+
+const dropiPaginatorCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.paginator{display:flex;align-items:center;justify-content:flex-end;gap:var(--Size-4, 16px);flex-wrap:wrap}.paginator-pages{display:flex;align-items:center;gap:var(--Size-1, 4px)}.paginator-btn{min-width:32px;height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s ease, border-color 0.15s ease}.paginator-btn:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-300, #a3abbf)}.paginator-btn:disabled{opacity:0.4;cursor:not-allowed}.paginator-btn--active{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff);font-weight:var(--font-weight-bold, 700)}.paginator-btn--active:hover{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.paginator-btn--arrow{border-color:transparent;background:transparent}.paginator-btn--arrow:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2)}.paginator-ellipsis{color:var(--Gray-Gray-400, #858ea6);padding:0 4px;font-size:var(--font-size-s, 12px);display:flex;align-items:center}.paginator-size{display:flex;align-items:center;gap:var(--Size-2, 8px)}.paginator-size-label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c)}.paginator-size-select{height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;outline:none}`;
+
+const DropiPaginator = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiPageChange = createEvent(this, "dropiPageChange");
+    }
+    /** Total number of items */
+    total = 0;
+    /** Items per page */
+    pageSize = 10;
+    /** Current page (1-based) */
+    page = 1;
+    /** Max page buttons to show at once */
+    maxPages = 5;
+    /** Whether to show the items-per-page selector */
+    showPageSizeSelector = false;
+    /** Options for items per page */
+    pageSizeOptions = [10, 25, 50, 100];
+    /** Emitted when page changes. e.detail = { page, pageSize } */
+    dropiPageChange;
+    parsedOptions = [10, 25, 50, 100];
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : val;
+    }
+    componentWillLoad() {
+        this.optionsChanged(this.pageSizeOptions);
+    }
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.total / this.pageSize));
+    }
+    get pageNumbers() {
+        const total = this.totalPages;
+        const cur = this.page;
+        const max = this.maxPages;
+        if (total <= max)
+            return Array.from({ length: total }, (_, i) => i + 1);
+        const half = Math.floor(max / 2);
+        let start = Math.max(1, cur - half);
+        let end = Math.min(total, start + max - 1);
+        if (end - start < max - 1)
+            start = Math.max(1, end - max + 1);
+        const pages = [];
+        if (start > 1) {
+            pages.push(1);
+            if (start > 2)
+                pages.push('...');
+        }
+        for (let i = start; i <= end; i++)
+            pages.push(i);
+        if (end < total) {
+            if (end < total - 1)
+                pages.push('...');
+            pages.push(total);
+        }
+        return pages;
+    }
+    goTo(p) {
+        if (p < 1 || p > this.totalPages || p === this.page)
+            return;
+        this.page = p;
+        this.dropiPageChange.emit({ page: this.page, pageSize: this.pageSize });
+    }
+    onPageSizeChange(e) {
+        this.pageSize = Number(e.target.value);
+        this.page = 1;
+        this.dropiPageChange.emit({ page: this.page, pageSize: this.pageSize });
+    }
+    render() {
+        const pages = this.pageNumbers;
+        const isFirst = this.page <= 1;
+        const isLast = this.page >= this.totalPages;
+        return (h("div", { key: '3fbb545d6ff0b345da7698e51bfdee51a13de49e', class: "paginator" }, this.showPageSizeSelector && (h("div", { key: '7ae643988a60f2016dce24b53bb9f5ac13414cf0', class: "paginator-size" }, h("span", { key: 'fee6db32b0d13e6c455174f1c57fb35401e65c10', class: "paginator-size-label" }, "Por p\u00E1gina:"), h("select", { key: '0e37733de81c70ac274c8e89af65f0f94115ecb5', class: "paginator-size-select", onChange: (e) => this.onPageSizeChange(e) }, this.parsedOptions.map(opt => (h("option", { value: opt, selected: opt === this.pageSize }, opt)))))), h("div", { key: 'fb70589d0fd3d8072190099fe187359439707dc1', class: "paginator-pages" }, h("button", { key: '6348dda14005ed8dcd3e96d788715bbd5a9d432e', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, disabled: isFirst, onClick: () => this.goTo(this.page - 1), "aria-label": "Anterior" }, h("dropi-icon", { key: '2b2c17304b3c246a660b71f5ab5feedfb93ba044', name: "Dropdown-left", width: "16px", height: "16px", color: isFirst ? 'Gray-Gray-300' : 'Gray-Gray-600' })), pages.map((p, i) => p === '...'
+            ? h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
+            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.page }, onClick: () => this.goTo(p), "aria-current": p === this.page ? 'page' : undefined }, p)), h("button", { key: 'fea38306411fd4a73f35231ff632d8846301dd5f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, disabled: isLast, onClick: () => this.goTo(this.page + 1), "aria-label": "Siguiente" }, h("dropi-icon", { key: 'f7ed587cb578ef0b9872f290cdc17eebe2f9efeb', name: "Dropdown-Right", width: "16px", height: "16px", color: isLast ? 'Gray-Gray-300' : 'Gray-Gray-600' })))));
+    }
+    static get watchers() { return {
+        "pageSizeOptions": [{
+                "optionsChanged": 0
+            }]
+    }; }
+};
+DropiPaginator.style = dropiPaginatorCss();
+
+export { DropiPaginator as dropi_paginator };

package/dist/esm/dropi-radio-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DFz-gwFP.js';
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
 
 const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;align-self:center;vertical-align:middle;margin:0}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
 
@@ -31,7 +31,7 @@ const DropiRadioButton = class {
         this.dropiChange.emit(e);
     }
     render() {
-        return (h("div", { key: '3b31699bf088bee52465981074c0aea48b6fe112', class: "dropi-radio-button" }, h("label", { key: '072d19bd9c88739b849db0e264c65183eaab2132', htmlFor: this.inputId }, h("input", { key: '82d1600002e9dc2795cdc5c731997742adc8e2db', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: 'fd1153aa79130eeb865c0289b7e323bdf2459a8c', class: "dropi-radio-button" }, h("label", { key: 'b4fbe10ac36213905779f0976e2e80b549323a52', htmlFor: this.inputId }, h("input", { key: '8f9b74ed53912bdff637b879a50faf4d83b7d62b', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DFz-gwFP.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Twbb5MNM.js';
 
 const dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #fff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #fff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:bold;display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:700;white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:600;color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}`;
 
@@ -313,7 +313,7 @@ const DropiSelect = class {
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (h("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (h("div", { key: '94383b3267955dcb8d1a6c523730e291976157b2', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '4ff14d77b301a275f6c608d227361ff2829ac7a1', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '8345af7646d8cea8e66c996f0eb4abf210c9d211', class: "asterisk" }, " *"))), h("div", { key: '290a9521e39c2e1bdb1a8aacf35b2b22bf4966de', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'a9ad2741e23d31b3b0dc69a3aa89f54eaa291b04', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: '8dd7cd895c1124b07020f396ac316390d4ee8cc8', class: "select-helper" }, h("span", { key: 'cdcaeb30b27baf4441d6ef87f6f553fd2b73e145' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '8e1a4da603de7b6c730a9946b63652fbe5e68321', class: "select-helper-error" }, h("dropi-icon", { key: 'f831c9f543c4f4be52d969f1d26f7d7e8816d08f', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '1eefbade098b9743b23abee3e43836ed33ecbadb' }, this.errorText))), this.renderDropdown()));
+        return (h("div", { key: '0062ad3d0ca25d9126dff2f8130c9159a6b356f6', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: 'ad5db5fa4fe19ee2200ab65fd1f3fcdf65bd851f', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '27e474c585d345168d01e156acf8fdaa9c70dbfc', class: "asterisk" }, " *"))), h("div", { key: '2cc4da6a0109022a7bdb21b4b7410cf1ea2a6c01', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'c60838f5ce7a250bb36164a989b68c93973aa661', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: 'a30c3cb4f8abf4b820c1e1d73005547398c8ff12', class: "select-helper" }, h("span", { key: '239dffdcdc8bceca6c21b0160a78078acf96eb09' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '76fced13295c9dff83389920caf128430c2fd35c', class: "select-helper-error" }, h("dropi-icon", { key: 'f1c5798ee5f504387ba80a4ddeca817a6416b770', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '84a93d1b293b2abe0027316c6fd9824410f20efd' }, this.errorText))), this.renderDropdown()));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/esm/dropi-skeleton.entry.js

@@ -0,0 +1,45 @@
+import { r as registerInstance, h } from './index-Twbb5MNM.js';
+
+const dropiSkeletonCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.skeleton-lines{display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(     90deg,     var(--Gray-Gray-100, #e6eaf2) 25%,     var(--Gray-Gray-50, #f7f8fa) 50%,     var(--Gray-Gray-100, #e6eaf2) 75%   );background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}`;
+
+const DropiSkeleton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Shape variant: 'text' | 'circle' | 'rect' */
+    variant = 'text';
+    /** Width (CSS value, e.g. "100%", "200px") */
+    width = '100%';
+    /** Height (CSS value, e.g. "16px", "48px") */
+    height = '16px';
+    /** Border radius override */
+    borderRadius = '';
+    /** Number of lines to repeat (text variant only) */
+    lines = 1;
+    getRadius() {
+        if (this.borderRadius)
+            return this.borderRadius;
+        if (this.variant === 'circle')
+            return '50%';
+        if (this.variant === 'text')
+            return '4px';
+        return 'var(--Border-1, 4px)';
+    }
+    render() {
+        if (this.variant === 'text' && this.lines > 1) {
+            return (h("div", { class: "skeleton-lines" }, Array.from({ length: this.lines }).map((_, i) => (h("div", { class: "skeleton", style: {
+                    width: i === this.lines - 1 ? '70%' : this.width,
+                    height: this.height,
+                    borderRadius: this.getRadius(),
+                } })))));
+        }
+        return (h("div", { class: "skeleton", style: {
+                width: this.width,
+                height: this.height,
+                borderRadius: this.getRadius(),
+            } }));
+    }
+};
+DropiSkeleton.style = dropiSkeletonCss();
+
+export { DropiSkeleton as dropi_skeleton };

package/dist/esm/dropi-switch.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DFz-gwFP.js';
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
 
 const dropiSwitchCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.toggle-switch{position:relative;display:inline-block;width:40px;height:21px;margin-bottom:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--Gray-Gray-200, #c3c9d9);transition:0.4s;border-radius:34px}.slider::before{position:absolute;content:'';height:17px;width:17px;left:3px;bottom:2px;background-color:var(--Neutral-White, #ffffff);transition:0.4s;border-radius:50%}input:checked+.slider{background-color:var(--Primary-Primary-500, #f49a3d)}input:checked+.slider::before{transform:translateX(17px)}:host([disabled]) .toggle-switch{cursor:not-allowed;opacity:0.5}`;
 
@@ -19,7 +19,7 @@ const DropiSwitch = class {
         this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (h("label", { key: '336fa18042e7b128d2e6e0b680ddd67e30ce917e', class: "toggle-switch" }, h("input", { key: '57e2fa77fa9b49341b03f6ff041ce4987a6b277b', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: 'e7617599947289a6e21b9db573dd7bec80dbeb43', class: "slider" })));
+        return (h("label", { key: '790db7283a976472fd3f8de502f73ece29134878', class: "toggle-switch" }, h("input", { key: '7199dcfb1a4f81eb30d7510966d56fd0111d648f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '2c62e927e77e58993ab44f2b4fafefcea556b71e', class: "slider" })));
     }
     static get formAssociated() { return true; }
 };

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

@@ -0,0 +1,47 @@
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
+
+const dropiTabsCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.tabs-container{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;height:52px;scrollbar-width:none}.tabs-container::-webkit-scrollbar{width:0;height:0}.tab-item{padding:var(--Size-4,16px) var(--Size-5,20px);background:var(--Neutral-White,#fff);border-bottom:2px solid var(--Gray-Gray-100,#e6eaf2);cursor:pointer;display:flex;gap:16px;align-items:center;white-space:nowrap;flex-shrink:0;transition:border-color 0.15s ease;user-select:none}.tab-item:hover:not(.tab-item--disabled):not(.tab-item--active){border-color:var(--Gray-Gray-300,#a3abbf)}.tab-item--active{border-bottom:2px solid var(--Primary-Primary-500,#f49a3d)}.tab-item--disabled{background:rgba(223,228,237,0.22);cursor:not-allowed;opacity:0.7;pointer-events:none}.tab-label-row{display:flex;align-items:center;gap:8px}.tab-label{font-size:var(--font-size-m,14px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-400,#858ea6);line-height:20px}.tab-item--active .tab-label{color:var(--Gray-Gray-600,#475066)}.tab-item--disabled .tab-label{font-weight:300;color:var(--Gray-Gray-300,#a3abbf)}.tab-counter{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:20px;font-size:var(--font-size-xs,10px);font-weight:var(--font-weight-medium,500);background:var(--Gray-Gray-100,#e6eaf2);color:var(--Gray-Gray-500,#69738c)}.tab-counter--active{background:var(--Primary-Primary-100,#fde8d0);color:var(--Primary-Primary-500,#f49a3d)}.tab-status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--Primary-Primary-500, #f49a3d);flex-shrink:0}`;
+
+const DropiTabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiTabChange = createEvent(this, "dropiTabChange");
+    }
+    /** Array of TabItem or JSON string */
+    tabs = [];
+    /** Id of the active tab */
+    activeTab = 0;
+    /** Whether to show a check/pending icon per tab */
+    showIcon = false;
+    /** Emitted on tab click. e.detail = TabItem */
+    dropiTabChange;
+    parsedTabs = [];
+    tabsChanged(val) {
+        this.parsedTabs = typeof val === 'string' ? JSON.parse(val) : (val ?? []);
+    }
+    componentWillLoad() {
+        this.tabsChanged(this.tabs);
+    }
+    handleClick(tab) {
+        if (tab.disabled)
+            return;
+        this.activeTab = tab.id;
+        this.dropiTabChange.emit(tab);
+    }
+    render() {
+        return (h("div", { key: '5b28faac5789a5e29aa68fe2892854cdebccda75', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
+            const isActive = tab.id === this.activeTab;
+            return (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) }, h("span", { class: "tab-label-row" }, h("span", { class: "tab-label" }, tab.label), tab.counter !== undefined && tab.counter !== null && (h("span", { class: { 'tab-counter': true, 'tab-counter--active': isActive } }, tab.counter))), this.showIcon && (tab.completed
+                ? h("dropi-icon", { name: "Check-circle", width: "12px", height: "12px", color: "Success-Success-500" })
+                : h("span", { class: "tab-status-dot" }))));
+        })));
+    }
+    static get watchers() { return {
+        "tabs": [{
+                "tabsChanged": 0
+            }]
+    }; }
+};
+DropiTabs.style = dropiTabsCss();
+
+export { DropiTabs as dropi_tabs };

package/dist/esm/dropi-tag.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-DFz-gwFP.js';
+import { r as registerInstance, h } from './index-Twbb5MNM.js';
 
 const dropiTagCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.container-chips{display:inline-block}.tags{display:inline-flex;padding:4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:var(--Border-5, 9999px);overflow:hidden;text-align:center;text-overflow:ellipsis;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);line-height:var(--Size-5, 24px);animation:fade-in 200ms ease-out}.tags.icon-only{gap:0}.file-icon{display:flex;margin-right:4px}@keyframes fade-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}`;
 
@@ -50,7 +50,7 @@ const DropiTag = class {
         return typeof this.text === 'string' && this.text.trim().length > 0;
     }
     render() {
-        return (h("div", { key: '7044b9b910b9216c8674f5aa21afc8ec79310af2', class: "container-chips" }, h("div", { key: '1097981d0e3709a57a95e4a7c87937a24930e416', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: 'ba69aac6bb39a5cdc27d3d0ff2cc949cff1fb1a1', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: '94aa2c494391b45341f14167bed97fa73f389b69' }, this.text))));
+        return (h("div", { key: 'd559f6c2ed27d543f018d3533d8d972bc47ceb9d', class: "container-chips" }, h("div", { key: 'd131a4626ead2d3d53d5c77875f8ebb19acc3b52', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: '54775a2ca1bd87be3293b3d6417f4a26c6da0c85', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: 'bce897f4094c33fd53dc98571cae60cd456e0706' }, this.text))));
     }
     static get watchers() { return {
         "type": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-DFz-gwFP.js';
+import { r as registerInstance, c as createEvent, h } from './index-Twbb5MNM.js';
 
 const dropiTextAreaCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.textarea-wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:4px}.textarea-wrapper label{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.asterisk{color:var(--Error-Error-500, #f46a6b)}.textarea-container{position:relative}textarea.form-control{box-sizing:border-box;width:100%;overflow:auto;padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #fff);transition:border-color 0.3s ease-in-out;outline:none;appearance:none}textarea.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}textarea.form-control:focus::placeholder{color:var(--Gray-Gray-400, #858ea6)}textarea.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}textarea.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}textarea.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}.char-counter{position:absolute;bottom:10px;right:16px;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c);pointer-events:none}.form-control-helper{display:flex;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}`;
 
@@ -82,12 +82,12 @@ const DropiTextArea = class {
     render() {
         const showAsterisk = this.required && this.showAsterisk && !this.disabled;
         const showHelper = this.helperText || this.isInvalid;
-        return (h("div", { key: 'b35dec5dc3d7ab2992542f4008b97c330c060fbf', class: "textarea-wrapper" }, this.label && (h("label", { key: '89c67611b34012f24fc8377b181215f20ff5b626', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: '74f091ab3e5aee1162943e54795e69b789ff1a84', class: "asterisk" }, " *"))), h("div", { key: '4a1193b310160f3a782692faa798390a2c60f32d', class: "textarea-container" }, h("textarea", { key: '68f62069a7b768cbfa2263ff66970b79a2fca007', id: this.resolvedId, class: {
+        return (h("div", { key: '652b432e3f23f6ca383ca4c44ad3b0da599ecbfb', class: "textarea-wrapper" }, this.label && (h("label", { key: '370698235edc4d8f8d449e66ee4ef90ea9e191d0', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && h("span", { key: 'd7c90f3a45b987d7b3229410f141d7fa51fd003d', class: "asterisk" }, " *"))), h("div", { key: '579fadaf791012ab93ddcdff06d237dab27efc9a', class: "textarea-container" }, h("textarea", { key: 'd81a5f25b541e044f7f632512570f53966b156cf', id: this.resolvedId, class: {
                 'form-control': true,
                 'Body-M-Regular': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
-            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxlength, minLength: this.minlength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxlength > 0 && (h("div", { key: '71596e1da89db842a391efca26cdef906b4e9982', class: "char-counter" }, this.charCount, "/", this.maxlength))), showHelper && (h("div", { key: '58f1124e504b85e5fdb2737f99524e4334e2dac5', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '9dd89e05639d924d96e0d117ee677461d30801e1', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '823ad2ae0b9e6337a347c83075123b3af675d1a4', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.helperText)))));
+            }, 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 && (h("div", { key: 'd6c80f4f693e12069a2b1147b489717d61e53e53', class: "char-counter" }, this.charCount, "/", this.maxlength))), showHelper && (h("div", { key: 'af317619d37311746ceefa083bb44ceff6514f92', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '2d92acfcb808a67319c8c1aa1a2c9c6c05affcef', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: 'd2fad4506be938c8376d41ed41186a808364adbf', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.helperText)))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

@@ -0,0 +1,53 @@
+import { r as registerInstance, h } from './index-Twbb5MNM.js';
+
+const dropiToastCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.toast-container{position:fixed;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:380px;width:100%;pointer-events:none}.toast-container--top-right{top:80px;right:0;padding:var(--Size-2, 8px)}.toast-container--top-left{top:80px;left:0;padding:var(--Size-2, 8px)}.toast-container--bottom-right{bottom:24px;right:0;padding:var(--Size-2, 8px);flex-direction:column-reverse}.toast-container--bottom-left{bottom:24px;left:0;padding:var(--Size-2, 8px);flex-direction:column-reverse}.toast-container--top-center{top:80px;left:50%;transform:translateX(-50%);padding:var(--Size-2, 8px)}.toast-container--bottom-center{bottom:24px;left:50%;transform:translateX(-50%);padding:var(--Size-2, 8px);flex-direction:column-reverse}.toast-wrapper{pointer-events:auto;animation:toast-in 0.28s ease;transition:opacity 0.28s ease, transform 0.28s ease, max-height 0.32s ease;overflow:hidden;max-height:200px}.toast-wrapper--leaving{opacity:0;transform:translateX(20px);max-height:0;pointer-events:none}@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.toast{position:relative;display:flex;align-items:flex-start;border-radius:var(--Border-2,8px);background:var(--Neutral-White,#fff);box-shadow:0.5px -1px 7px 0px rgba(0, 0, 0, 0.06);border-left:var(--Size-2, 8px) solid;overflow:hidden;min-width:300px}.toast--success{border-color:var(--Success-Success-500,#34c38f)}.toast--error{border-color:var(--Error-Error-500,#f46a6b)}.toast--warn{border-color:var(--Warning-Warning-500,#f1b44c)}.toast--info{border-color:var(--Info-Info-500,#50a5f1)}.toast-content{display:flex;flex-direction:row;align-items:flex-start;padding:var(--Size-5) var(--Size-5) var(--Size-5) calc(var(--Size-5) - var(--Size-2, 8px));gap:var(--Size-4, 16px)}.lottie-img{width:50px;height:50px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.lottie-player-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;display:flex;align-items:center;justify-content:center}lottie-player{width:100%;height:100%;display:block}.info-container{flex:1;min-width:0;align-self:center;display:flex;flex-direction:column;gap:var(--Size-1, 4px)}.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.1;text-align:left;max-width:250px}.description{margin:0;font-size:var(--font-size-s,14px);color:var(--Gray-Gray-500,#6b7280);line-height:1.4;text-align:left;max-width:250px}.toast-close{position:absolute;top:18px;right:10px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}.toast-close:hover{opacity:0.7}`;
+
+const DropiToast = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Toast position */
+    position = 'top-right';
+    /** Default auto-close ms (0 = manual) */
+    life = 4000;
+    items = [];
+    idCounter = 0;
+    /** Show a toast */
+    async show(msg) {
+        const id = msg.id ?? `t${++this.idCounter}`;
+        const item = { msg: { ...msg, id, closable: msg.closable ?? true }, leaving: false };
+        this.items = [...this.items, item];
+        const ms = msg.life !== undefined ? msg.life : this.life;
+        if (ms > 0)
+            item.timer = setTimeout(() => this.remove(id), ms);
+    }
+    /** Remove all toasts */
+    async clear() {
+        this.items.forEach(i => {
+            if (i.timer)
+                clearTimeout(i.timer);
+        });
+        this.items = [];
+    }
+    remove(id) {
+        this.items = this.items.map(i => (i.msg.id === id ? { ...i, leaving: true } : i));
+        setTimeout(() => {
+            this.items = this.items.filter(i => i.msg.id !== id);
+        }, 320);
+    }
+    lottieMap = {
+        success: '/assets/lottie-files/success.json',
+        error: '/assets/lottie-files/failure.json',
+        warn: '/assets/lottie-files/warning.json',
+        info: '/assets/lottie-files/question.json',
+    };
+    getLottieHtml(severity) {
+        return `<lottie-player src="${this.lottieMap[severity]}" background="transparent" speed="1" loop autoplay></lottie-player>`;
+    }
+    render() {
+        return (h("div", { key: '8cce9f62a0b8cac6415881be5f2e6d82bd35668e', class: `toast-container toast-container--${this.position}` }, this.items.map(item => (h("div", { key: item.msg.id, class: { 'toast-wrapper': true, 'toast-wrapper--leaving': item.leaving } }, h("div", { class: `toast toast--${item.msg.severity}` }, h("div", { class: "toast-content" }, h("div", { class: "lottie-img" }, h("div", { class: "lottie-player-container", innerHTML: this.getLottieHtml(item.msg.severity) })), h("div", { class: "info-container" }, h("p", { class: "title" }, item.msg.summary), item.msg.detail && h("p", { class: "description" }, item.msg.detail))), item.msg.closable && (h("button", { class: "toast-close", onClick: () => this.remove(item.msg.id) }, h("dropi-icon", { name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-400" })))))))));
+    }
+};
+DropiToast.style = dropiToastCss();
+
+export { DropiToast as dropi_toast };

package/dist/esm/dropi-tooltip.entry.js

@@ -0,0 +1,40 @@
+import { r as registerInstance, h } from './index-Twbb5MNM.js';
+
+const dropiTooltipCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.tooltip-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center}.tooltip-bubble{position:absolute;z-index:9999;background:#1f2433;color:var(--Neutral-White,#fff);font-size:var(--font-size-s,14px);line-height:1.5;padding:8px 12px;border-radius:8px;white-space:normal;pointer-events:none;opacity:0;transition:opacity 0.15s ease, transform 0.15s ease;word-break:break-word;box-shadow:var(--Shadow-medium);text-align:left;width:max-content}.tooltip-bubble--visible{opacity:1}.tooltip-bubble--top{bottom:calc(100% + 12px);left:50%;transform:translateX(-50%)}.tooltip-bubble--bottom{top:calc(100% + 12px);left:50%;transform:translateX(-50%)}.tooltip-bubble--left{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.tooltip-bubble--right{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}.tooltip-arrow{position:absolute;width:12px;height:6px}.tooltip-arrow::before{content:'';position:absolute;width:0;height:0}.tooltip-arrow--top{top:100%;left:50%;transform:translateX(-50%)}.tooltip-arrow--top::before{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #1f2433}.tooltip-arrow--bottom{bottom:100%;left:50%;transform:translateX(-50%)}.tooltip-arrow--bottom::before{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #1f2433}.tooltip-arrow--left{left:100%;top:50%;transform:translateY(-50%)}.tooltip-arrow--left::before{border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #1f2433}.tooltip-arrow--right{right:100%;top:50%;transform:translateY(-50%)}.tooltip-arrow--right::before{border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #1f2433}`;
+
+const DropiTooltip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Tooltip text */
+    text = '';
+    /** Position: top | bottom | left | right */
+    position = 'top';
+    /** Max CSS width of the bubble */
+    maxWidth = '280px';
+    /** Delay in ms before showing */
+    showDelay = 0;
+    visible = false;
+    showTimer = null;
+    show = () => {
+        if (this.showDelay > 0) {
+            this.showTimer = setTimeout(() => { this.visible = true; }, this.showDelay);
+        }
+        else {
+            this.visible = true;
+        }
+    };
+    hide = () => {
+        if (this.showTimer) {
+            clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+        this.visible = false;
+    };
+    render() {
+        return (h("div", { key: 'c6179d8dfb9f4c3cc2a6a4e79f2e1a9ff8bbd641', class: "tooltip-wrapper", onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide }, h("slot", { key: 'aee7bae9d384369faaa5b078e40f3a8763690bb3' }), this.text && (h("div", { key: 'd00e75f536c5f88c7062ac6359dec3fe7d866cd0', class: { 'tooltip-bubble': true, [`tooltip-bubble--${this.position}`]: true, 'tooltip-bubble--visible': this.visible }, style: { maxWidth: this.maxWidth }, role: "tooltip" }, this.text, h("span", { key: 'aec6a936bbc6677b0e1abf3a18233d90d757cd96', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
+    }
+};
+DropiTooltip.style = dropiTooltipCss();
+
+export { DropiTooltip as dropi_tooltip };

package/dist/esm/dropi-ui.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-DFz-gwFP.js';
-export { s as setNonce } from './index-DFz-gwFP.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-Twbb5MNM.js';
+export { s as setNonce } from './index-Twbb5MNM.js';
 
 /*
  Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["dropi-icon",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["dropi-button",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"text":[1]}]]],["dropi-input",[[577,"dropi-input",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"fixedLabel":[4,"fixed-label"],"inputMode":[1,"input-mode"],"passwordInput":[4,"password-input"],"moneyFormat":[4,"money-format"],"thousandSeparator":[4,"thousand-separator"],"onlyNumbers":[4,"only-numbers"],"allowDecimals":[4,"allow-decimals"],"onlyLetters":[4,"only-letters"],"icon":[1],"iconColor":[1,"icon-color"],"invalid":[4],"helperText":[1,"helper-text"],"showHelperOnlyOnError":[4,"show-helper-only-on-error"],"showPassword":[32],"touched":[32]},null,{"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}]]],["dropi-select",[[577,"dropi-select",{"label":[1],"placeholder":[1],"options":[1040],"name":[1],"disabled":[516],"invalid":[4],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"showObligatory":[4,"show-obligatory"],"searchEnabled":[4,"search-enabled"],"multiSelect":[4,"multi-select"],"dropdownType":[4,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[4,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"value":[1040],"isOpen":[32],"selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"value":[{"valueChanged":0}]}]]],["dropi-tag",[[513,"dropi-tag",{"type":[1],"state":[1],"showIcon":[4,"show-icon"],"icon":[1],"text":[1]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["dropi-text-area",[[577,"dropi-text-area",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"minlength":[2],"rows":[2],"resize":[1],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"helperText":[1,"helper-text"],"invalid":[4],"touched":[32]},null,{"value":[{"valueChanged":0}]}]]],["dropi-badge",[[513,"dropi-badge",{"state":[1]}]]],["dropi-checkbox",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]],["dropi-radio-button",[[577,"dropi-radio-button",{"label":[1],"name":[1],"inputId":[1,"input-id"],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["dropi-switch",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]]], options);
+  return bootstrapLazy([["dropi-icon",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["dropi-empty-state",[[769,"dropi-empty-state",{"header":[1],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"actionLabel":[1,"action-label"],"secondaryLabel":[1,"secondary-label"]}]]],["dropi-accordion",[[769,"dropi-accordion",{"header":[1],"open":[1540],"disabled":[4],"preIcon":[1,"pre-icon"],"contentHeight":[32]},null,{"open":[{"openChanged":0}]}]]],["dropi-input",[[577,"dropi-input",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"fixedLabel":[4,"fixed-label"],"inputMode":[1,"input-mode"],"passwordInput":[4,"password-input"],"moneyFormat":[4,"money-format"],"thousandSeparator":[4,"thousand-separator"],"onlyNumbers":[4,"only-numbers"],"allowDecimals":[4,"allow-decimals"],"onlyLetters":[4,"only-letters"],"icon":[1],"iconColor":[1,"icon-color"],"invalid":[4],"helperText":[1,"helper-text"],"showHelperOnlyOnError":[4,"show-helper-only-on-error"],"showPassword":[32],"touched":[32]},null,{"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}]]],["dropi-modal",[[769,"dropi-modal",{"visible":[1540],"header":[1],"showCloseIcon":[4,"show-close-icon"],"dismissable":[4],"closeOnEscape":[4,"close-on-escape"],"modal":[4],"showHeader":[4,"show-header"],"position":[1],"size":[1],"isOpen":[32],"isClosing":[32],"mounted":[32],"hide":[64],"show":[64]},null,{"visible":[{"visibleChanged":0}]}]]],["dropi-paginator",[[513,"dropi-paginator",{"total":[2],"pageSize":[1026,"page-size"],"page":[1538],"maxPages":[2,"max-pages"],"showPageSizeSelector":[4,"show-page-size-selector"],"pageSizeOptions":[1,"page-size-options"],"parsedOptions":[32]},null,{"pageSizeOptions":[{"optionsChanged":0}]}]]],["dropi-select",[[577,"dropi-select",{"label":[1],"placeholder":[1],"options":[1040],"name":[1],"disabled":[516],"invalid":[4],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"showObligatory":[4,"show-obligatory"],"searchEnabled":[4,"search-enabled"],"multiSelect":[4,"multi-select"],"dropdownType":[4,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[4,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"value":[1040],"isOpen":[32],"selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"value":[{"valueChanged":0}]}]]],["dropi-tabs",[[513,"dropi-tabs",{"tabs":[1],"activeTab":[1544,"active-tab"],"showIcon":[4,"show-icon"],"parsedTabs":[32]},null,{"tabs":[{"tabsChanged":0}]}]]],["dropi-tag",[[513,"dropi-tag",{"type":[1],"state":[1],"showIcon":[4,"show-icon"],"icon":[1],"text":[1]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["dropi-text-area",[[577,"dropi-text-area",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"minlength":[2],"rows":[2],"resize":[1],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"helperText":[1,"helper-text"],"invalid":[4],"touched":[32]},null,{"value":[{"valueChanged":0}]}]]],["dropi-toast",[[513,"dropi-toast",{"position":[1],"life":[2],"items":[32],"show":[64],"clear":[64]}]]],["dropi-badge",[[513,"dropi-badge",{"state":[1]}]]],["dropi-checkbox",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]],["dropi-radio-button",[[577,"dropi-radio-button",{"label":[1],"name":[1],"inputId":[1,"input-id"],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["dropi-skeleton",[[513,"dropi-skeleton",{"variant":[1],"width":[1],"height":[1],"borderRadius":[1,"border-radius"],"lines":[2]}]]],["dropi-switch",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]],["dropi-tooltip",[[769,"dropi-tooltip",{"text":[1],"position":[1],"maxWidth":[1,"max-width"],"showDelay":[2,"show-delay"],"visible":[32]}]]],["dropi-button",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"text":[1]}]]]], options);
 });

package/dist/esm/{index-DFz-gwFP.js → index-Twbb5MNM.js}

@@ -2,7 +2,7 @@ const NAMESPACE = 'dropi-ui';
 const BUILD = /* dropi-ui */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, state: true, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = ":root{--Primary-Primary-50:#fef8f2;--Primary-Primary-100:#ffecda;--Primary-Primary-200:#fcddbd;--Primary-Primary-300:#f2bc85;--Primary-Primary-400:#f7b46f;--Primary-Primary-500:#f49a3d;--Primary-Primary-600:#e58017;--Primary-Primary-700:#99540f;--Primary-Primary-800:#66380a;--Primary-Primary-900:#331c05;--Secondary-Secondary-50:#f0fafc;--Secondary-Secondary-100:#cee8f2;--Secondary-Secondary-200:#95d0e5;--Secondary-Secondary-300:#62bad9;--Secondary-Secondary-400:#33a4cc;--Secondary-Secondary-500:#008dbf;--Secondary-Secondary-600:#007199;--Secondary-Secondary-700:#005573;--Secondary-Secondary-800:#00384d;--Secondary-Secondary-900:#001c26;--Neutral-White:#ffffff;--Neutral-Black:#000000;--Gray-Gray-50:#f7f8fa;--Gray-Gray-100:#e6eaf2;--Gray-Gray-200:#c3c9d9;--Gray-Gray-300:#a3abbf;--Gray-Gray-400:#858ea6;--Gray-Gray-500:#69738c;--Gray-Gray-600:#475066;--Gray-Gray-700:#32394d;--Gray-Gray-800:#1f2433;--Gray-Gray-900:#0e111a;--Success-Success-50:#e7f8f3;--Success-Success-100:#b3eada;--Success-Success-200:#8ee0c8;--Success-Success-300:#5bd1af;--Success-Success-400:#3bc99f;--Success-Success-500:#0abb87;--Success-Success-600:#09aa7b;--Success-Success-700:#078560;--Success-Success-800:#06674a;--Success-Success-900:#044f39;--Error-Error-50:#fef0f0;--Error-Error-100:#fcd1d1;--Error-Error-200:#fababb;--Error-Error-300:#f89b9c;--Error-Error-400:#f68889;--Error-Error-500:#f46a6b;--Error-Error-600:#de6061;--Error-Error-700:#ad4b4c;--Error-Error-800:#863a3b;--Error-Error-900:#662d2d;--Info-Info-50:#eef6fe;--Info-Info-100:#c9e3fb;--Info-Info-200:#afd6f9;--Info-Info-300:#8ac3f6;--Info-Info-400:#73b7f4;--Info-Info-500:#50a5f1;--Info-Info-600:#4996db;--Info-Info-700:#3975ab;--Info-Info-800:#2c5b85;--Info-Info-900:#224565;--Warning-Warning-50:#fef8ed;--Warning-Warning-100:#fbe8c8;--Warning-Warning-200:#f9ddad;--Warning-Warning-300:#f6cd87;--Warning-Warning-400:#f4c370;--Warning-Warning-500:#f1b44c;--Warning-Warning-600:#dba445;--Warning-Warning-700:#ab8036;--Warning-Warning-800:#85632a;--Warning-Warning-900:#654c20;--Orange-orange-50:#fef5ec;--Orange-orange-500:#f49a3d;--Size-1:4px;--Size-2:8px;--Size-3:12px;--Size-4:16px;--Size-5:24px;--Size-6:32px;--Size-7:40px;--Size-8:48px;--Size-9:56px;--Size-10:64px;--Border-1:4px;--Border-2:8px;--Border-3:12px;--Border-4:24px;--Border-5:32px;--Border-full:9999px;--font-size-xxxxl:36px;--font-size-xxxl:30px;--font-size-xxl:24px;--font-size-xl:20px;--font-size-l:18px;--font-size-m:16px;--font-size-s:14px;--font-size-xs:12px;--font-size-xxs:10px;--lineheight-simple:110%;--lineheight-large:150%;--font-weight-bold:700;--font-weight-semibold:600;--font-weight-medium:500;--font-weight-regular:400;--font-weight-light:300;--font-family-01:'Inter', sans-serif;--breakpoint-extra-small:576px;--breakpoint-small:600px;--breakpoint-medium:1000px;--breakpoint-large:1200px;--breakpoint-extra-large:1536px;--breakpoint-full-width:1920px;--Shadow-small:0px 0px 12px rgba(0, 0, 0, 0.04);--Shadow-medium:0.5px 4px 8px rgba(0, 0, 0, 0.08);--Shadow-large:0px 4px 16px rgba(0, 0, 0, 0.16);--Shadow-icon:0px 0px 4px rgba(0, 0, 0, 0.16);--Interrapidisimo:#383637;--Domina:#464ffe;--Coordinadora:#2686c5;--Servientrega:#1ba558;--99-minutos:#9cd453;--TCC:#f8dd49;--Veloces:#dc2e76;--Envia:#e7484e;--Restlogix:#90dd92;--Tiui:#0596a5;--Fedex:#4d148c;--Laarcourier:#faf063;--Gintracom:#ff3939;--Blue-express:#1542a3;--Lulu:#f03a3e;--Urbano:#e53237;--Tipsa:#1d3681}@media (max-width: 600px){:root{--font-size-xxxxl:32px;--font-size-xxxl:26px;--font-size-xxl:20px;--font-size-xl:18px;--font-size-l:16px;--font-size-m:16px;--font-size-s:14px;--font-size-xs:12px;--font-size-xxs:10px}}*{font-family:var(--font-family-01);box-sizing:border-box}h1{color:var(--Gray-Gray-700);font-size:var(--font-size-xxxxl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h2{color:var(--Gray-Gray-700);font-size:var(--font-size-xxxl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h3{color:var(--Gray-Gray-700);font-size:var(--font-size-xxl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h4{color:var(--Gray-Gray-700);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h5{color:var(--Gray-Gray-700);font-size:var(--font-size-l);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Body-L-Medium{color:var(--Gray-Gray-700);font-size:var(--font-size-m);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.Body-L-Regular{color:var(--Gray-Gray-600);font-size:var(--font-size-m);font-weight:var(--font-weight-regular);line-height:var(--lineheight-large)}.Body-M-Medium{color:var(--Gray-Gray-700);font-size:var(--font-size-s);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.Body-M-Regular{color:var(--Gray-Gray-600);font-size:var(--font-size-s);font-weight:var(--font-weight-regular);line-height:var(--lineheight-large)}.Body-S-Medium{color:var(--Gray-Gray-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.Body-S-Regular{color:var(--Gray-Gray-600);font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);line-height:var(--lineheight-large)}.Caption-M{color:var(--Gray-Gray-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Caption-S{color:var(--Gray-Gray-700);font-size:var(--font-size-xxs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Label-L{color:var(--Gray-Gray-700);font-size:var(--font-size-m);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Label-M{color:var(--Gray-Gray-700);font-size:var(--font-size-s);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Label-S{color:var(--Gray-Gray-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}";
+const globalStyles = ":root{--Primary-Primary-50:#fef8f2;--Primary-Primary-100:#ffecda;--Primary-Primary-200:#fcddbd;--Primary-Primary-300:#f2bc85;--Primary-Primary-400:#f7b46f;--Primary-Primary-500:#f49a3d;--Primary-Primary-600:#e58017;--Primary-Primary-700:#99540f;--Primary-Primary-800:#66380a;--Primary-Primary-900:#331c05;--Secondary-Secondary-50:#f0fafc;--Secondary-Secondary-100:#cee8f2;--Secondary-Secondary-200:#95d0e5;--Secondary-Secondary-300:#62bad9;--Secondary-Secondary-400:#33a4cc;--Secondary-Secondary-500:#008dbf;--Secondary-Secondary-600:#007199;--Secondary-Secondary-700:#005573;--Secondary-Secondary-800:#00384d;--Secondary-Secondary-900:#001c26;--Neutral-White:#ffffff;--Neutral-Black:#000000;--Gray-Gray-50:#f7f8fa;--Gray-Gray-100:#e6eaf2;--Gray-Gray-200:#c3c9d9;--Gray-Gray-300:#a3abbf;--Gray-Gray-400:#858ea6;--Gray-Gray-500:#69738c;--Gray-Gray-600:#475066;--Gray-Gray-700:#32394d;--Gray-Gray-800:#1f2433;--Gray-Gray-900:#0e111a;--Success-Success-50:#e7f8f3;--Success-Success-100:#b3eada;--Success-Success-200:#8ee0c8;--Success-Success-300:#5bd1af;--Success-Success-400:#3bc99f;--Success-Success-500:#0abb87;--Success-Success-600:#09aa7b;--Success-Success-700:#078560;--Success-Success-800:#06674a;--Success-Success-900:#044f39;--Error-Error-50:#fef0f0;--Error-Error-100:#fcd1d1;--Error-Error-200:#fababb;--Error-Error-300:#f89b9c;--Error-Error-400:#f68889;--Error-Error-500:#f46a6b;--Error-Error-600:#de6061;--Error-Error-700:#ad4b4c;--Error-Error-800:#863a3b;--Error-Error-900:#662d2d;--Info-Info-50:#eef6fe;--Info-Info-100:#c9e3fb;--Info-Info-200:#afd6f9;--Info-Info-300:#8ac3f6;--Info-Info-400:#73b7f4;--Info-Info-500:#50a5f1;--Info-Info-600:#4996db;--Info-Info-700:#3975ab;--Info-Info-800:#2c5b85;--Info-Info-900:#224565;--Warning-Warning-50:#fef8ed;--Warning-Warning-100:#fbe8c8;--Warning-Warning-200:#f9ddad;--Warning-Warning-300:#f6cd87;--Warning-Warning-400:#f4c370;--Warning-Warning-500:#f1b44c;--Warning-Warning-600:#dba445;--Warning-Warning-700:#ab8036;--Warning-Warning-800:#85632a;--Warning-Warning-900:#654c20;--Orange-orange-50:#fef5ec;--Orange-orange-500:#f49a3d;--Size-1:4px;--Size-2:8px;--Size-3:12px;--Size-4:16px;--Size-5:24px;--Size-6:32px;--Size-7:40px;--Size-8:48px;--Size-9:56px;--Size-10:64px;--Border-1:4px;--Border-2:8px;--Border-3:12px;--Border-4:24px;--Border-5:32px;--Border-full:9999px;--font-size-xxxxl:36px;--font-size-xxxl:30px;--font-size-xxl:24px;--font-size-xl:20px;--font-size-l:18px;--font-size-m:16px;--font-size-s:14px;--font-size-xs:12px;--font-size-xxs:10px;--lineheight-simple:110%;--lineheight-large:150%;--font-weight-bold:700;--font-weight-semibold:600;--font-weight-medium:500;--font-weight-regular:400;--font-weight-light:300;--font-family-01:'Inter', sans-serif;--breakpoint-extra-small:576px;--breakpoint-small:600px;--breakpoint-medium:1000px;--breakpoint-large:1200px;--breakpoint-extra-large:1536px;--breakpoint-full-width:1920px;--Shadow-small:0px 0px 12px rgba(0, 0, 0, 0.04);--Shadow-medium:0.5px 4px 8px rgba(0, 0, 0, 0.08);--Shadow-large:0px 4px 16px rgba(0, 0, 0, 0.16);--Shadow-icon:0px 0px 4px rgba(0, 0, 0, 0.16);--Interrapidisimo:#383637;--Domina:#464ffe;--Coordinadora:#2686c5;--Servientrega:#1ba558;--99-minutos:#9cd453;--TCC:#f8dd49;--Veloces:#dc2e76;--Envia:#e7484e;--Restlogix:#90dd92;--Tiui:#0596a5;--Fedex:#4d148c;--Laarcourier:#faf063;--Gintracom:#ff3939;--Blue-express:#1542a3;--Lulu:#f03a3e;--Urbano:#e53237;--Tipsa:#1d3681}@media (max-width: 600px){:root{--font-size-xxxxl:32px;--font-size-xxxl:26px;--font-size-xxl:20px;--font-size-xl:18px;--font-size-l:16px;--font-size-m:16px;--font-size-s:14px;--font-size-xs:12px;--font-size-xxs:10px}}*{font-family:var(--font-family-01);box-sizing:border-box;text-align:left}h1{color:var(--Gray-Gray-700);font-size:var(--font-size-xxxxl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h2{color:var(--Gray-Gray-700);font-size:var(--font-size-xxxl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h3{color:var(--Gray-Gray-700);font-size:var(--font-size-xxl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h4{color:var(--Gray-Gray-700);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}h5{color:var(--Gray-Gray-700);font-size:var(--font-size-l);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Body-L-Medium{color:var(--Gray-Gray-700);font-size:var(--font-size-m);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.Body-L-Regular{color:var(--Gray-Gray-600);font-size:var(--font-size-m);font-weight:var(--font-weight-regular);line-height:var(--lineheight-large)}.Body-M-Medium{color:var(--Gray-Gray-700);font-size:var(--font-size-s);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.Body-M-Regular{color:var(--Gray-Gray-600);font-size:var(--font-size-s);font-weight:var(--font-weight-regular);line-height:var(--lineheight-large)}.Body-S-Medium{color:var(--Gray-Gray-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:var(--lineheight-large)}.Body-S-Regular{color:var(--Gray-Gray-600);font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);line-height:var(--lineheight-large)}.Caption-M{color:var(--Gray-Gray-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Caption-S{color:var(--Gray-Gray-700);font-size:var(--font-size-xxs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Label-L{color:var(--Gray-Gray-700);font-size:var(--font-size-m);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Label-M{color:var(--Gray-Gray-700);font-size:var(--font-size-s);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}.Label-S{color:var(--Gray-Gray-700);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple)}";
 
 /*
  Stencil Client Platform v4.43.3 | MIT Licensed | https://stenciljs.com