@dropi/ui 0.1.51 → 0.1.53

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-04-30T18:05:41",
+  "timestamp": "2026-05-06T00:45:21",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.4",
@@ -5547,6 +5547,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "hideTodayShortcut",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "hide-today-shortcut",
+          "reflectToAttr": false,
+          "docs": "Hide \"Hoy\" shortcut",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "isInvalid",
           "type": "boolean",
@@ -5558,7 +5587,7 @@
           "mutable": false,
           "attr": "is-invalid",
           "reflectToAttr": false,
-          "docs": "Is invalid state - matches Angular",
+          "docs": "Is invalid state",
           "docsTags": [
             {
               "name": "default",
@@ -5616,7 +5645,7 @@
           "mutable": false,
           "attr": "loading",
           "reflectToAttr": false,
-          "docs": "Loading state - matches Angular",
+          "docs": "Loading state",
           "docsTags": [
             {
               "name": "default",
@@ -5755,7 +5784,7 @@
           "mutable": true,
           "attr": "selected-date",
           "reflectToAttr": false,
-          "docs": "Selected date (ISO string, single mode) - matches Angular 'selectedDate'",
+          "docs": "Selected date (ISO string, single mode)",
           "docsTags": [
             {
               "name": "default",
@@ -5784,7 +5813,7 @@
           "mutable": false,
           "attr": "selection-mode",
           "reflectToAttr": false,
-          "docs": "Enable range selection - matches Angular selectionMode",
+          "docs": "Enable range selection",
           "docsTags": [
             {
               "name": "default",
@@ -5850,7 +5879,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when date selected — matches Angular 'onChangeDate'",
+          "docs": "",
           "docsTags": []
         },
         {
@@ -5864,7 +5893,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when panel closes — matches Angular 'onClosePanel'",
+          "docs": "",
           "docsTags": []
         },
         {
@@ -5878,7 +5907,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when range selected",
+          "docs": "",
           "docsTags": []
         }
       ],
@@ -6174,7 +6203,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted with full range when both dates are set",
+          "docs": "",
           "docsTags": []
         },
         {
@@ -6188,7 +6217,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when end date changes",
+          "docs": "",
           "docsTags": []
         },
         {
@@ -6202,7 +6231,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when start date changes",
+          "docs": "",
           "docsTags": []
         }
       ],
@@ -17389,7 +17418,7 @@
     },
     {
       "filePath": "src/components/dropi-toast/dropi-toast.tsx",
-      "encapsulation": "shadow",
+      "encapsulation": "none",
       "tag": "dropi-toast",
       "readme": "# dropi-toast\n\n\n",
       "docs": "",

package/dist/dropi-ui/dropi-accordion-item.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, a as getElement, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, a as getElement, h } from './index-BKkSRXlb.js';
 
-const dropiAccordionItemCss = () => `:host{display:block;border-bottom:1px solid var(--Gray-Gray-100)}.accordion-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px;background:white;border:none;cursor:pointer;text-align:left}.accordion-header-left{display:flex;align-items:center;gap:8px}.accordion-title{font-size:var(--font-size-m);font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-700)}.accordion-chevron{transition:transform 0.3s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{overflow:hidden;transition:max-height 0.3s ease-out}.accordion-content{padding:0 16px 16px 16px}`;
+const dropiAccordionItemCss = () => `:host{display:block;border-bottom:1px solid var(--Gray-Gray-100);border-radius:0}.accordion-header{width:100%;display:flex;justify-content:space-between;align-items:center;background:transparent;border:none;cursor:pointer;text-align:left;transition:background 0.3s}.accordion-header:hover{background:var(--Gray-Gray-50)}.accordion-header-left{display:flex;align-items:center;gap:var(--Size-2)}.accordion-title{padding:var(--Size-5) var(--Size-4);margin:0;font-family:var(--font-family-01);font-size:var(--font-size-m);font-style:normal;font-weight:var(--font-weight-bold);color:var(--Gray-Gray-600);line-height:var(--lineheight-simple)}.accordion-chevron{padding:var(--Size-3);color:var(--Gray-Gray-500);transition:transform 0.3s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{overflow:hidden;transition:max-height 0.3s ease-in-out, opacity 0.3s ease-in-out}.accordion-content{padding:var(--Size-4);background:var(--Neutral-White)}`;
 
 const DropiAccordionItem = class {
     constructor(hostRef) {
@@ -42,7 +42,7 @@ const DropiAccordionItem = class {
         setTimeout(() => this.updateHeight(this.open), 0);
     }
     render() {
-        return (h("div", { key: '98de1df9b82f0e4e5e72702b7eaca12c0ed92586', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, h("button", { key: 'bd5c3e6ea29feb33e5280908c98929369dc7377e', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: 'ced161eb1187d50b7eb2002081cd3fc008c9a16f', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: '09a157623f0978153b57e85a79d7beeca3faf9ab', name: this.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), h("span", { key: '649617f263370d1314e3145c07a3a29ce5c807b5', class: "accordion-title" }, this.sectionTitle)), h("span", { key: 'd99e3933a40ffa4b1da8091a8b6d767011f1bf6f', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: '3d12ae988429fea2612c0c32c12cd81a486ad255', name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))), h("div", { key: 'cedff4803c6fa83ae9dc5cb3ce68f48150cdef67', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: 'a37dd42bf39cf08479d847286860e78a1d80a233', class: "accordion-content" }, h("slot", { key: 'd797eac747716be1af2a6addbefe583be4a816b1' })))));
+        return (h("div", { key: 'fe0990ea59f9484547404661e68f2dbe545a664c', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, h("button", { key: 'b54e7094354e716c9cd8d6096e514f96489c7f83', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: 'f4899647c2a6ec1b38b205f32646f1e5193a0969', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: '70d2358ee43a880d9f6abbdab7c745b9227bdd90', name: this.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), h("span", { key: '57e11bb9b1e6533a4861a66e8e97da16051f5efd', class: "accordion-title" }, this.sectionTitle)), h("span", { key: 'e4ab4e3d7b4463d9885696e634795673efaa5071', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: 'e7fa15870a92d2791e8a1e4c9dde172b81bb7ae8', name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))), h("div", { key: '7c59aa23ac8b628951dc79428b966e0d7ea5c770', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: 'a6eef2a694cb0e0b761353e7770e0e375da3c0a7', class: "accordion-content" }, h("slot", { key: '36e38e144c874c8b8bea9446c9606f5e026fe60e' })))));
     }
     static get watchers() { return {
         "open": [{

package/dist/dropi-ui/dropi-accordion-item.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-accordion-item.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-accordion/dropi-accordion-item.css?tag=dropi-accordion-item&encapsulation=shadow","src/components/dropi-accordion/dropi-accordion-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  border-bottom: 1px solid var(--Gray-Gray-100);\n}\n\n.accordion-header {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n  background: white;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n}\n\n.accordion-header-left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.accordion-title {\n  font-size: var(--font-size-m);\n  font-weight: var(--font-weight-semibold);\n  color: var(--Gray-Gray-700);\n}\n\n.accordion-chevron {\n  transition: transform 0.3s ease;\n}\n\n.accordion-chevron--open {\n  transform: rotate(180deg);\n}\n\n.accordion-body {\n  overflow: hidden;\n  transition: max-height 0.3s ease-out;\n}\n\n.accordion-content {\n  padding: 0 16px 16px 16px;\n}\n","import { Component, Prop, State, Watch, h, Element } from '@stencil/core';\n\n/**\n * @component dropi-accordion-item\n * Collapsible section item intended to be used inside <dropi-accordion>.\n */\n@Component({\n  tag: 'dropi-accordion-item',\n  styleUrl: 'dropi-accordion-item.css',\n  shadow: true,\n})\nexport class DropiAccordionItem {\n  @Element() el: HTMLElement;\n\n  /** The title of the item — matches Angular `sectionTitle` */\n  @Prop() sectionTitle: string = '';\n  /** Index of the item — matches Angular `index` */\n  @Prop() index: number;\n  /** Whether the section is expanded */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  /** Disable toggling */\n  @Prop() disabled: boolean = false;\n  /** Icon name before title */\n  @Prop() preIcon: string = '';\n\n  @State() private contentHeight: string = '0px';\n  private contentRef?: HTMLDivElement;\n\n  @Watch('open')\n  openChanged(val: boolean) {\n    this.updateHeight(val);\n  }\n\n  componentDidLoad() {\n    this.updateHeight(this.open);\n  }\n\n  private updateHeight(open: boolean) {\n    if (!this.contentRef) return;\n    this.contentHeight = open ? `${this.contentRef.scrollHeight}px` : '0px';\n  }\n\n  private handleToggle() {\n    if (this.disabled) return;\n    \n    // Notify parent if needed, or just toggle locally\n    const parent = this.el.closest('dropi-accordion');\n    if (parent && !(parent as any).multiple) {\n       // If parent is single-expand, we notify or handle via event\n    }\n\n    this.open = !this.open;\n    setTimeout(() => this.updateHeight(this.open), 0);\n  }\n\n  render() {\n    return (\n      <div class={{ 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled }}>\n        <button class=\"accordion-header\" onClick={() => this.handleToggle()} aria-expanded={String(this.open)} disabled={this.disabled}>\n          <span class=\"accordion-header-left\">\n            {this.preIcon && <dropi-icon name={this.preIcon} iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-600\" />}\n            <span class=\"accordion-title\">{this.sectionTitle}</span>\n          </span>\n          <span class={{ 'accordion-chevron': true, 'accordion-chevron--open': this.open }}>\n            <dropi-icon name=\"Dropdown-down\" iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-500\" />\n          </span>\n        </button>\n        <div class=\"accordion-body\" style={{ maxHeight: this.contentHeight }} ref={(el) => this.contentRef = el as HTMLDivElement}>\n          <div class=\"accordion-content\"><slot /></div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-accordion-item.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-accordion/dropi-accordion-item.css?tag=dropi-accordion-item&encapsulation=shadow","src/components/dropi-accordion/dropi-accordion-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  border-bottom: 1px solid var(--Gray-Gray-100);\n  border-radius: 0;\n}\n\n.accordion-header {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.3s;\n}\n\n.accordion-header:hover {\n  background: var(--Gray-Gray-50);\n}\n\n.accordion-header-left {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2);\n}\n\n/* Label-L — equivalente al <p> del host Angular */\n.accordion-title {\n  padding: var(--Size-5) var(--Size-4);\n  margin: 0;\n  font-family: var(--font-family-01);\n  font-size: var(--font-size-m);\n  font-style: normal;\n  font-weight: var(--font-weight-bold);\n  color: var(--Gray-Gray-600);\n  line-height: var(--lineheight-simple);\n}\n\n/* Equivalente al .icon del host Angular */\n.accordion-chevron {\n  padding: var(--Size-3);\n  color: var(--Gray-Gray-500);\n  transition: transform 0.3s ease;\n}\n\n.accordion-chevron--open {\n  transform: rotate(180deg);\n}\n\n.accordion-body {\n  overflow: hidden;\n  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;\n}\n\n.accordion-content {\n  padding: var(--Size-4);\n  background: var(--Neutral-White);\n}\n","import { Component, Prop, State, Watch, h, Element } from '@stencil/core';\n\n/**\n * @component dropi-accordion-item\n * Collapsible section item intended to be used inside <dropi-accordion>.\n */\n@Component({\n  tag: 'dropi-accordion-item',\n  styleUrl: 'dropi-accordion-item.css',\n  shadow: true,\n})\nexport class DropiAccordionItem {\n  @Element() el: HTMLElement;\n\n  /** The title of the item — matches Angular `sectionTitle` */\n  @Prop() sectionTitle: string = '';\n  /** Index of the item — matches Angular `index` */\n  @Prop() index: number;\n  /** Whether the section is expanded */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  /** Disable toggling */\n  @Prop() disabled: boolean = false;\n  /** Icon name before title */\n  @Prop() preIcon: string = '';\n\n  @State() private contentHeight: string = '0px';\n  private contentRef?: HTMLDivElement;\n\n  @Watch('open')\n  openChanged(val: boolean) {\n    this.updateHeight(val);\n  }\n\n  componentDidLoad() {\n    this.updateHeight(this.open);\n  }\n\n  private updateHeight(open: boolean) {\n    if (!this.contentRef) return;\n    this.contentHeight = open ? `${this.contentRef.scrollHeight}px` : '0px';\n  }\n\n  private handleToggle() {\n    if (this.disabled) return;\n    \n    // Notify parent if needed, or just toggle locally\n    const parent = this.el.closest('dropi-accordion');\n    if (parent && !(parent as any).multiple) {\n       // If parent is single-expand, we notify or handle via event\n    }\n\n    this.open = !this.open;\n    setTimeout(() => this.updateHeight(this.open), 0);\n  }\n\n  render() {\n    return (\n      <div class={{ 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled }}>\n        <button class=\"accordion-header\" onClick={() => this.handleToggle()} aria-expanded={String(this.open)} disabled={this.disabled}>\n          <span class=\"accordion-header-left\">\n            {this.preIcon && <dropi-icon name={this.preIcon} iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-600\" />}\n            <span class=\"accordion-title\">{this.sectionTitle}</span>\n          </span>\n          <span class={{ 'accordion-chevron': true, 'accordion-chevron--open': this.open }}>\n            <dropi-icon name=\"Dropdown-down\" iconWidth=\"20px\" iconHeight=\"20px\" color=\"Gray-Gray-500\" />\n          </span>\n        </button>\n        <div class=\"accordion-body\" style={{ maxHeight: this.contentHeight }} ref={(el) => this.contentRef = el as HTMLDivElement}>\n          <div class=\"accordion-content\"><slot /></div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-accordion.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
 
-const dropiAccordionCss = () => `:host{display:block;width:100%;margin-bottom:-1px}*,*::before,*::after{box-sizing:border-box}.accordion{border-top:1px solid var(--Gray-Gray-100,#e6eaf2);border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--Size-4,16px) var(--Size-5,20px);background:transparent;border:none;cursor:pointer;gap:12px;text-align:left}.accordion-header:disabled{cursor:not-allowed;opacity:0.5}.accordion--open .accordion-header{border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2)}.accordion-header-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.accordion-title{font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-600, #475066);line-height:1.4}.accordion-chevron{display:flex;align-items:center;flex-shrink:0;transition:transform 0.22s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{max-height:0;overflow:hidden;transition:max-height 0.28s ease}.accordion-content{padding:0 var(--Size-5,20px) var(--Size-4,16px);color:var(--Gray-Gray-600,#475066);font-size:var(--font-size-s,12px);line-height:1.6}`;
+const dropiAccordionCss = () => `:host{display:block;font-family:var(--font-family-01, 'Inter', sans-serif);width:100%;margin-bottom:-1px}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}.accordion{border-top:1px solid var(--Gray-Gray-100,#e6eaf2);border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--Size-4,16px) var(--Size-5,20px);background:transparent;border:none;cursor:pointer;gap:12px;text-align:left}.accordion-header:disabled{cursor:not-allowed;opacity:0.5}.accordion--open .accordion-header{border-bottom:1px solid var(--Gray-Gray-100,#e6eaf2)}.accordion-header-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.accordion-title{font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-600, #475066);line-height:1.4}.accordion-chevron{display:flex;align-items:center;flex-shrink:0;transition:transform 0.22s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{max-height:0;overflow:hidden;transition:max-height 0.28s ease}.accordion-content{padding:0 var(--Size-5,20px) var(--Size-4,16px);color:var(--Gray-Gray-600,#475066);font-size:var(--font-size-s,12px);line-height:1.6}`;
 
 const DropiAccordion = class {
     constructor(hostRef) {
@@ -9,7 +9,7 @@ const DropiAccordion = class {
     /** Allows multiple sections to be open at the same time. If false, only one section can be open. */
     multiple = false;
     render() {
-        return (h("div", { key: 'c8c70f9c2210e1bc6de7d0933f082a0d1c008837', class: "accordion-container" }, h("slot", { key: '9fe1055ed6f5a2fc5c3e8dde47b694ea0acdbcb9' })));
+        return (h("div", { key: '13c47160cdbedc1e1d0cd4996facee8f539a5ae8', class: "accordion-container" }, h("slot", { key: '6d333a462b616b28f0f6ea2f39d109d8d3ad472d' })));
     }
 };
 DropiAccordion.style = dropiAccordionCss();

package/dist/dropi-ui/dropi-accordion.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-accordion.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,gqCAAgqC,CAAC;;MCWrrC,cAAc,GAAA,MAAA;;;;;IAEjB,QAAQ,GAAY,KAAK;IAEjC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ;;;;;;;","names":[],"sources":["src/components/dropi-accordion/dropi-accordion.css?tag=dropi-accordion&encapsulation=shadow","src/components/dropi-accordion/dropi-accordion.tsx"],"sourcesContent":[":host { display: block; width: 100%; margin-bottom: -1px; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.accordion { border-top: 1px solid var(--Gray-Gray-100,#e6eaf2); border-bottom: 1px solid var(--Gray-Gray-100,#e6eaf2); overflow: hidden; }\n\n.accordion-header {\n  width: 100%; display: flex; align-items: center; justify-content: space-between;\n  padding: var(--Size-4,16px) var(--Size-5,20px);\n  background: transparent; border: none; cursor: pointer; gap: 12px; text-align: left;\n}\n.accordion-header:disabled { cursor: not-allowed; opacity: 0.5; }\n.accordion--open .accordion-header { border-bottom: 1px solid var(--Gray-Gray-100,#e6eaf2); }\n\n.accordion-header-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }\n.accordion-title { font-size: var(--font-size-m, 16px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-600, #475066); line-height: 1.4; }\n\n.accordion-chevron { display: flex; align-items: center; flex-shrink: 0; transition: transform 0.22s ease; }\n.accordion-chevron--open { transform: rotate(180deg); }\n\n.accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }\n.accordion-content { padding: 0 var(--Size-5,20px) var(--Size-4,16px); color: var(--Gray-Gray-600,#475066); font-size: var(--font-size-s,12px); line-height: 1.6; }\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-accordion\n * Container for <dropi-accordion-item> components.\n */\n@Component({\n  tag: 'dropi-accordion',\n  styleUrl: 'dropi-accordion.css',\n  shadow: true,\n})\nexport class DropiAccordion {\n  /** Allows multiple sections to be open at the same time. If false, only one section can be open. */\n  @Prop() multiple: boolean = false;\n\n  render() {\n    return (\n      <div class=\"accordion-container\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-accordion.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC,2yCAA2yC,CAAC;;MCWh0C,cAAc,GAAA,MAAA;;;;;IAEjB,QAAQ,GAAY,KAAK;IAEjC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ;;;;;;;","names":[],"sources":["src/components/dropi-accordion/dropi-accordion.css?tag=dropi-accordion&encapsulation=shadow","src/components/dropi-accordion/dropi-accordion.tsx"],"sourcesContent":[":host { display: block; font-family: var(--font-family-01, 'Inter', sans-serif); width: 100%; margin-bottom: -1px; }\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n*, *::before, *::after { box-sizing: border-box; }\n\n.accordion { border-top: 1px solid var(--Gray-Gray-100,#e6eaf2); border-bottom: 1px solid var(--Gray-Gray-100,#e6eaf2); overflow: hidden; }\n\n.accordion-header {\n  width: 100%; display: flex; align-items: center; justify-content: space-between;\n  padding: var(--Size-4,16px) var(--Size-5,20px);\n  background: transparent; border: none; cursor: pointer; gap: 12px; text-align: left;\n}\n.accordion-header:disabled { cursor: not-allowed; opacity: 0.5; }\n.accordion--open .accordion-header { border-bottom: 1px solid var(--Gray-Gray-100,#e6eaf2); }\n\n.accordion-header-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }\n.accordion-title { font-size: var(--font-size-m, 16px); font-weight: var(--font-weight-bold,700); color: var(--Gray-Gray-600, #475066); line-height: 1.4; }\n\n.accordion-chevron { display: flex; align-items: center; flex-shrink: 0; transition: transform 0.22s ease; }\n.accordion-chevron--open { transform: rotate(180deg); }\n\n.accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }\n.accordion-content { padding: 0 var(--Size-5,20px) var(--Size-4,16px); color: var(--Gray-Gray-600,#475066); font-size: var(--font-size-s,12px); line-height: 1.6; }\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-accordion\n * Container for <dropi-accordion-item> components.\n */\n@Component({\n  tag: 'dropi-accordion',\n  styleUrl: 'dropi-accordion.css',\n  shadow: true,\n})\nexport class DropiAccordion {\n  /** Allows multiple sections to be open at the same time. If false, only one section can be open. */\n  @Prop() multiple: boolean = false;\n\n  render() {\n    return (\n      <div class=\"accordion-container\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-alert-legacy.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
 
-const dropiAlertLegacyCss = () => `:host{display:block;margin:10px 0}.alert-legacy{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:var(--Border-2);font-size:var(--font-size-s)}.alert-legacy--success{background:var(--Success-Success-50);color:var(--Success-Success-700);border:1px solid var(--Success-Success-200)}.alert-legacy--error{background:var(--Error-Error-50);color:var(--Error-Error-700);border:1px solid var(--Error-Error-200)}.alert-legacy--warning{background:var(--Warning-Warning-50);color:var(--Warning-Warning-700);border:1px solid var(--Warning-Warning-200)}.alert-legacy--info{background:var(--Info-Info-50);color:var(--Info-Info-700);border:1px solid var(--Info-Info-200)}.alert-legacy__close{background:transparent;border:none;font-size:20px;cursor:pointer;color:currentColor;opacity:0.6}.alert-legacy__close:hover{opacity:1}`;
+const dropiAlertLegacyCss = () => `:host{display:block;margin:10px 0;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.alert-legacy{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:var(--Border-2);font-size:var(--font-size-s)}.alert-legacy--success{background:var(--Success-Success-50);color:var(--Success-Success-700);border:1px solid var(--Success-Success-200)}.alert-legacy--error{background:var(--Error-Error-50);color:var(--Error-Error-700);border:1px solid var(--Error-Error-200)}.alert-legacy--warning{background:var(--Warning-Warning-50);color:var(--Warning-Warning-700);border:1px solid var(--Warning-Warning-200)}.alert-legacy--info{background:var(--Info-Info-50);color:var(--Info-Info-700);border:1px solid var(--Info-Info-200)}.alert-legacy__close{background:transparent;border:none;font-size:20px;cursor:pointer;color:currentColor;opacity:0.6}.alert-legacy__close:hover{opacity:1}`;
 
 const DropiAlertLegacy = class {
     constructor(hostRef) {

package/dist/dropi-ui/dropi-alert-legacy.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-alert-legacy.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,s1BAAs1B,CAAC;;MCW72B,gBAAgB,GAAA,MAAA;;;;;IAEF,OAAO,GAAY,KAAK;;IAEzC,OAAO,GAAW,EAAE;;IAEpB,IAAI,GAA6C,SAAS;;IAE1D,SAAS,GAAY,KAAK;AAE1B,IAAA,KAAK;IAEb,gBAAgB,GAAA;QACd,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAClC,IAAI,CAAC,UAAU,EAAE;;;IAIb,UAAU,GAAA;AAChB,QAAA,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,MAAK;AAC3B,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;SACrB,EAAE,IAAI,CAAC;;IAGV,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,IAAI;AAE9B,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAA,cAAA,EAAiB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EACxE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,uBAAuB,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CACtD,EACN,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,KAAK,EAAA,EAAA,QAAA,CAE9D,CACL;;;;;;;","names":[],"sources":["src/components/dropi-alert-legacy/dropi-alert-legacy.css?tag=dropi-alert-legacy&encapsulation=shadow","src/components/dropi-alert-legacy/dropi-alert-legacy.tsx"],"sourcesContent":[":host {\n  display: block;\n  margin: 10px 0;\n}\n\n.alert-legacy {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  border-radius: var(--Border-2);\n  font-size: var(--font-size-s);\n}\n\n.alert-legacy--success { background: var(--Success-Success-50); color: var(--Success-Success-700); border: 1px solid var(--Success-Success-200); }\n.alert-legacy--error   { background: var(--Error-Error-50); color: var(--Error-Error-700); border: 1px solid var(--Error-Error-200); }\n.alert-legacy--warning { background: var(--Warning-Warning-50); color: var(--Warning-Warning-700); border: 1px solid var(--Warning-Warning-200); }\n.alert-legacy--info    { background: var(--Info-Info-50); color: var(--Info-Info-700); border: 1px solid var(--Info-Info-200); }\n\n.alert-legacy__close {\n  background: transparent;\n  border: none;\n  font-size: 20px;\n  cursor: pointer;\n  color: currentColor;\n  opacity: 0.6;\n}\n\n.alert-legacy__close:hover {\n  opacity: 1;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-alert-legacy\n * Legacy alert component for backward compatibility with Angular core.\n */\n@Component({\n  tag: 'dropi-alert-legacy',\n  styleUrl: 'dropi-alert-legacy.css',\n  shadow: true,\n})\nexport class DropiAlertLegacy {\n  /** Visibility toggle */\n  @Prop({ mutable: true }) visible: boolean = false;\n  /** Alert message */\n  @Prop() message: string = '';\n  /** Semantic type: success | error | warning | info */\n  @Prop() type: 'success' | 'error' | 'warning' | 'info' = 'success';\n  /** Automatically close after timeout */\n  @Prop() autoClose: boolean = false;\n\n  private timer: any;\n\n  componentDidLoad() {\n    if (this.autoClose && this.visible) {\n      this.startTimer();\n    }\n  }\n\n  private startTimer() {\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => {\n      this.visible = false;\n    }, 7000);\n  }\n\n  render() {\n    if (!this.visible) return null;\n\n    return (\n      <div class={{ 'alert-legacy': true, [`alert-legacy--${this.type}`]: true }}>\n        <div class=\"alert-legacy__content\">\n           <span class=\"alert-legacy__message\">{this.message}</span>\n        </div>\n        <button class=\"alert-legacy__close\" onClick={() => this.visible = false}>\n           &times;\n        </button>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-alert-legacy.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,26BAA26B,CAAC;;MCWl8B,gBAAgB,GAAA,MAAA;;;;;IAEF,OAAO,GAAY,KAAK;;IAEzC,OAAO,GAAW,EAAE;;IAEpB,IAAI,GAA6C,SAAS;;IAE1D,SAAS,GAAY,KAAK;AAE1B,IAAA,KAAK;IAEb,gBAAgB,GAAA;QACd,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;YAClC,IAAI,CAAC,UAAU,EAAE;;;IAIb,UAAU,GAAA;AAChB,QAAA,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AACxB,QAAA,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,MAAK;AAC3B,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;SACrB,EAAE,IAAI,CAAC;;IAGV,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,IAAI;AAE9B,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAA,cAAA,EAAiB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EACxE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,uBAAuB,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CACtD,EACN,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,KAAK,EAAA,EAAA,QAAA,CAE9D,CACL;;;;;;;","names":[],"sources":["src/components/dropi-alert-legacy/dropi-alert-legacy.css?tag=dropi-alert-legacy&encapsulation=shadow","src/components/dropi-alert-legacy/dropi-alert-legacy.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n  display: block;\n  margin: 10px 0;\n}\n\n.alert-legacy {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  border-radius: var(--Border-2);\n  font-size: var(--font-size-s);\n}\n\n.alert-legacy--success { background: var(--Success-Success-50); color: var(--Success-Success-700); border: 1px solid var(--Success-Success-200); }\n.alert-legacy--error   { background: var(--Error-Error-50); color: var(--Error-Error-700); border: 1px solid var(--Error-Error-200); }\n.alert-legacy--warning { background: var(--Warning-Warning-50); color: var(--Warning-Warning-700); border: 1px solid var(--Warning-Warning-200); }\n.alert-legacy--info    { background: var(--Info-Info-50); color: var(--Info-Info-700); border: 1px solid var(--Info-Info-200); }\n\n.alert-legacy__close {\n  background: transparent;\n  border: none;\n  font-size: 20px;\n  cursor: pointer;\n  color: currentColor;\n  opacity: 0.6;\n}\n\n.alert-legacy__close:hover {\n  opacity: 1;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-alert-legacy\n * Legacy alert component for backward compatibility with Angular core.\n */\n@Component({\n  tag: 'dropi-alert-legacy',\n  styleUrl: 'dropi-alert-legacy.css',\n  shadow: true,\n})\nexport class DropiAlertLegacy {\n  /** Visibility toggle */\n  @Prop({ mutable: true }) visible: boolean = false;\n  /** Alert message */\n  @Prop() message: string = '';\n  /** Semantic type: success | error | warning | info */\n  @Prop() type: 'success' | 'error' | 'warning' | 'info' = 'success';\n  /** Automatically close after timeout */\n  @Prop() autoClose: boolean = false;\n\n  private timer: any;\n\n  componentDidLoad() {\n    if (this.autoClose && this.visible) {\n      this.startTimer();\n    }\n  }\n\n  private startTimer() {\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => {\n      this.visible = false;\n    }, 7000);\n  }\n\n  render() {\n    if (!this.visible) return null;\n\n    return (\n      <div class={{ 'alert-legacy': true, [`alert-legacy--${this.type}`]: true }}>\n        <div class=\"alert-legacy__content\">\n           <span class=\"alert-legacy__message\">{this.message}</span>\n        </div>\n        <button class=\"alert-legacy__close\" onClick={() => this.visible = false}>\n           &times;\n        </button>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-alert-modal.entry.js

@@ -1,6 +1,7 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-BKkSRXlb.js';
+import { L as LOTTIE_MAP } from './lottie-map.generated-BEs9gbju.js';
 
-const dropiAlertModalCss = () => `:host{display:contents}.body-alert{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3);width:100%;flex:1;overflow:visible;padding-bottom:var(--Size-2)}.lottie-img{width:120px;height:120px;overflow:hidden;flex-shrink:0;align-self:center;margin-top:-8px;margin-bottom:var(--Size-2)}.lottie-img lottie-player{display:block;width:120px;height:120px}.lottie-img--loading{width:100%;height:120px;overflow:hidden;display:flex;align-items:center;justify-content:center}.lottie-img--loading lottie-player{width:300px;height:auto;flex-shrink:0}.content-alert{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center}.content-alert h2{color:var(--Gray-Gray-800);font-size:19px;font-weight:var(--font-weight-semibold);margin:0}.content-alert p{color:var(--Gray-Gray-500);font-size:var(--font-size-s);margin-bottom:var(--Size-2);overflow-wrap:anywhere;max-height:100px;overflow:auto}.custom-content{width:100%;text-align:left;margin-top:var(--Size-2);display:flex;flex-direction:column;gap:var(--Size-3)}.actions{display:flex;gap:var(--Size-3);width:100%}.actions dropi-button{flex:1;display:flex;justify-content:center}@media (max-width: 768px){.actions{flex-direction:column}.actions dropi-button{width:100%}}`;
+const dropiAlertModalCss = () => `:host{display:contents;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.body-alert{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3);width:100%;flex:1;overflow:visible;padding-bottom:var(--Size-2)}.lottie-img{width:120px;height:120px;overflow:hidden;flex-shrink:0;align-self:center;margin-top:-8px;margin-bottom:var(--Size-2)}.lottie-img lottie-player{display:block;width:120px;height:120px}.lottie-img--loading{width:100%;height:120px;overflow:hidden;display:flex;align-items:center;justify-content:center}.lottie-img--loading lottie-player{width:300px;height:auto;flex-shrink:0}.content-alert{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center}.content-alert h2{color:var(--Gray-Gray-800);font-size:19px;font-weight:var(--font-weight-semibold);margin:0}.content-alert p{color:var(--Gray-Gray-500);font-size:var(--font-size-s);margin-bottom:var(--Size-2);overflow-wrap:anywhere;max-height:100px;overflow:auto}.custom-content{width:100%;text-align:left;margin-top:var(--Size-2);display:flex;flex-direction:column;gap:var(--Size-3)}.actions{display:flex;gap:var(--Size-3);width:100%}.actions dropi-button{flex:1;display:flex;justify-content:center}@media (max-width: 768px){.actions{flex-direction:column}.actions dropi-button{width:100%}}`;
 
 const DropiAlertModal = class {
     constructor(hostRef) {
@@ -10,6 +11,7 @@ const DropiAlertModal = class {
         this.dropiVisibleChange = createEvent(this, "dropiVisibleChange", 7);
         this.dropiHide = createEvent(this, "dropiHide", 7);
     }
+    get el() { return getElement(this); }
     /** Controls visibility */
     visible = false;
     /** Modal type — determines Lottie animation */
@@ -80,13 +82,6 @@ const DropiAlertModal = class {
     dropiVisibleChange;
     /** Emitted when modal is hidden — matches Angular 'onHide' */
     dropiHide;
-    lottieMap = {
-        question: '/assets/lottie-files/question.json',
-        warning: '/assets/lottie-files/warning.json',
-        success: '/assets/lottie-files/success.json',
-        error: '/assets/lottie-files/failure.json',
-        loading: '/assets/lottie-files/loading.json',
-    };
     componentWillLoad() {
         if (this.params)
             this.paramsChanged(this.params);
@@ -117,7 +112,8 @@ const DropiAlertModal = class {
     render() {
         const lottieKey = this.loading ? 'loading' : this.type;
         const isLottieLoading = lottieKey === 'loading';
-        return (h("dropi-modal", { key: '322c59ea0a067a4c0cb28a5ffbe9cbc0c642eee6', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onDropiHide: () => this.onModalHide() }, h("div", { key: '06530f3da45738d1ed75a4e8b5b8b0b80dfd2647', class: "body-alert" }, this.lottieMap[lottieKey] && (h("div", { key: '7a4ab4fbbdf3cbbacfa22f918d212b788f4392a4', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, h("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), h("div", { key: '0e72f42d10c59047e82df8b2842affd38ab60fc7', class: "content-alert" }, h("h2", { key: '8262de8fbcf5b87fbac34740d34d99d0b6ff921d' }, this.loading ? this.loadingTitle : this.tittle), h("p", { key: 'ca9c734e0b9686bff7e2616ae98224446ac0ca33' }, this.loading ? this.loadingMessage : this.message)), h("div", { key: '1b5edb3af1044cb0dd0b57a425517b1d824672be', class: "custom-content" }, h("slot", { key: '57f4a8acdbcf8a11445f7c8233355bb4ac46c9ab' })), !this.loading && this.displayButtons && (h("div", { key: '32580f42d98f628b4c1d1f300b5a3aaaa1be2486', class: "actions" }, this.secondaryButton && h("dropi-button", { key: 'dcf8707a7f4d8b80126a10022dd6de1c0ea44dc7', text: this.secondaryButton, severity: "secondary", onDropiClick: () => this.handleSecondary(), fullWidth: true }), h("dropi-button", { key: '3ed494fc7a83021174c4d006ae4327348d400e93', text: this.primaryButton, severity: "primary", onDropiClick: () => this.handlePrimary(), fullWidth: true }))))));
+        const lottieSrc = LOTTIE_MAP[lottieKey];
+        return (h("dropi-modal", { key: '3ec522c38b68f8c8f945d4b2b3483083029e75f5', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onDropiHide: () => this.onModalHide() }, h("div", { key: '09a72cb6f1a85d37d6177da3eabc7d052ea050a8', class: "body-alert" }, lottieSrc && (h("div", { key: '684b18fb8d6f0236ea723ab9f17d947be0e6bfd3', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, h("lottie-player", { key: lottieKey, src: lottieSrc, background: "transparent", speed: "1", loop: true, autoplay: true }))), h("div", { key: 'edd1768074d30f39c2f19e9a70e498248075b22c', class: "content-alert" }, h("h2", { key: '5f6b281b169385b7ede465dbed71781e8a094832' }, this.loading ? this.loadingTitle : this.tittle), h("p", { key: '79c95d2ceb421a2fca91c85e748d82900f2247b7' }, this.loading ? this.loadingMessage : this.message)), h("div", { key: 'c06a3edb85f996c78debe786e6e1d2fe8924f028', class: "custom-content" }, h("slot", { key: '877c46b2b99e3f1f31a39358e614162cdedb12cb' })), !this.loading && this.displayButtons && (h("div", { key: '268846cf16c755f371b27efc66413f90b8742345', class: "actions" }, this.secondaryButton && h("dropi-button", { key: '026d2871b0e4aa29c4ff16124370348292648d13', text: this.secondaryButton, severity: "secondary", onDropiClick: () => this.handleSecondary(), fullWidth: true }), h("dropi-button", { key: '0f0423ffdb55994363a695603b4f4b2880d494f4', text: this.primaryButton, severity: "primary", onDropiClick: () => this.handlePrimary(), fullWidth: true }))))));
     }
     static get watchers() { return {
         "params": [{

package/dist/dropi-ui/dropi-alert-modal.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-alert-modal.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,mvCAAmvC,CAAC;;MCkBzwC,eAAe,GAAA,MAAA;;;;;;;;;IAEc,OAAO,GAAQ,KAAK;;IAEnC,IAAI,GAAmB,UAAU;;IAEjC,MAAM,GAAW,EAAE;;IAEnB,OAAO,GAAW,EAAE;;IAEpB,aAAa,GAAW,QAAQ;;IAEhC,eAAe,GAAW,EAAE;;IAE7C,OAAO,GAAY,KAAK;;IAEP,QAAQ,GAAY,KAAK;;IAEzB,cAAc,GAAY,IAAI;;IAE9B,YAAY,GAAW,SAAS;;IAEhC,cAAc,GAAW,sBAAsB;AACxE;;;AAGG;IACK,MAAM,GAAY,KAAK;;IAEvB,UAAU,GAAW,CAAC;AAC9B;;AAEG;IACK,YAAY,GAAY,KAAK;AACrC;;;;;AAKG;IACK,MAAM,GAAQ,IAAI;AAG1B,IAAA,aAAa,CAAC,GAAQ,EAAA;AACpB,QAAA,IAAI,CAAC,GAAG;YAAE;AACV,QAAA,IAAI,GAAG,CAAC,MAAM,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,MAAM;AACtD,QAAA,IAAI,GAAG,CAAC,IAAI,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI;AAChD,QAAA,IAAI,GAAG,CAAC,OAAO,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO;AACzD,QAAA,IAAI,GAAG,CAAC,aAAa,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,aAAa;AAC3E,QAAA,IAAI,GAAG,CAAC,eAAe,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,eAAe,GAAG,GAAG,CAAC,eAAe;AACjF,QAAA,IAAI,GAAG,CAAC,YAAY,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC,YAAY;AACxE,QAAA,IAAI,GAAG,CAAC,cAAc,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC,cAAc;AAC9E,QAAA,IAAI,GAAG,CAAC,QAAQ,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,QAAQ;AAC5D,QAAA,IAAI,GAAG,CAAC,cAAc,KAAK,SAAS;AAAE,YAAA,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC,cAAc;;;AAIvE,IAAA,iBAAiB;;AAEjB,IAAA,mBAAmB;;AAEnB,IAAA,kBAAkB;;AAElB,IAAA,SAAS;AAED,IAAA,SAAS,GAA2B;AACnD,QAAA,QAAQ,EAAE,oCAAoC;AAC9C,QAAA,OAAO,EAAE,mCAAmC;AAC5C,QAAA,OAAO,EAAE,mCAAmC;AAC5C,QAAA,KAAK,EAAE,mCAAmC;AAC1C,QAAA,OAAO,EAAE,mCAAmC;KAC7C;IAED,iBAAiB,GAAA;QACf,IAAI,IAAI,CAAC,MAAM;AAAE,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;;AAGxC,IAAA,MAAM,IAAI,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;AAEX,IAAA,MAAM,IAAI,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;IAGd,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;AACjC,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AAChB,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,YAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC;;;IAI/B,eAAe,GAAA;AACrB,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG7B,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC;AACnC,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;;IAGvB,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,IAAI;AACtD,QAAA,MAAM,eAAe,GAAG,SAAS,KAAK,SAAS;AAE/C,QAAA,QACE,oEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,UAAU,EAAE,IAAI,CAAC,QAAQ,EACzB,aAAa,EAAE,IAAI,CAAC,QAAQ,EAC5B,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,KAAK,EACpB,UAAU,EAAE,KAAK,EACjB,IAAI,EAAC,GAAG,EACR,WAAW,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAErC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACpB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,KACxB,4DAAK,KAAK,EAAE,CAAA,UAAA,EAAa,eAAe,GAAG,sBAAsB,GAAG,EAAE,EAAE,EAAA,EACtE,CAAA,CAAA,eAAA,EAAA,EACE,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,EAC9B,UAAU,EAAC,aAAa,EACxB,KAAK,EAAC,GAAG,EACT,IAAI,EAAA,IAAA,EACJ,QAAQ,EAAA,IAAA,EAAA,CACR,CACE,CACP,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxB,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAK,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAM,EACzD,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAI,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAK,CACtD,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EAEL,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,KACnC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,eAAe,IAAI,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,EAAC,WAAW,EAAC,YAAY,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,EAAE,SAAS,EAAA,IAAA,EAAA,CAAG,EAChJ,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,EAAC,SAAS,EAAC,YAAY,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EAAE,SAAS,EAAA,IAAA,EAAA,CAAG,CAC7G,CACP,CACG,CACM;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-alert-modal/dropi-alert-modal.css?tag=dropi-alert-modal","src/components/dropi-alert-modal/dropi-alert-modal.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.body-alert {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--Size-3);\n  width: 100%;\n  flex: 1;\n  overflow: visible;\n  padding-bottom: var(--Size-2);\n}\n\n/* ── Lottie regular ───────────────────────────────────────────────── */\n.lottie-img {\n  width: 120px;\n  height: 120px;\n  overflow: hidden;\n  flex-shrink: 0;\n  align-self: center;\n  margin-top: -8px;\n  margin-bottom: var(--Size-2);\n}\n\n.lottie-img lottie-player {\n  display: block;\n  width: 120px;\n  height: 120px;\n}\n\n/* ── Lottie loading ───────────────────────────────────────────────── */\n.lottie-img--loading {\n  width: 100%;\n  height: 120px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.lottie-img--loading lottie-player {\n  width: 300px;\n  height: auto;\n  flex-shrink: 0;\n}\n\n/* ── Content ──────────────────────────────────────────────────────── */\n.content-alert {\n  text-align: center;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.content-alert h2 {\n  color: var(--Gray-Gray-800);\n  font-size: 19px;\n  font-weight: var(--font-weight-semibold);\n  margin: 0;\n}\n\n.content-alert p {\n  color: var(--Gray-Gray-500);\n  font-size: var(--font-size-s);\n  margin-bottom: var(--Size-2);\n  overflow-wrap: anywhere;\n  max-height: 100px;\n  overflow: auto;\n}\n\n.custom-content {\n  width: 100%;\n  text-align: left;\n  margin-top: var(--Size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--Size-3);\n}\n\n/* ── Actions ──────────────────────────────────────────────────────── */\n.actions {\n  display: flex;\n  gap: var(--Size-3);\n  width: 100%;\n}\n\n.actions dropi-button {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n}\n\n@media (max-width: 768px) {\n  .actions {\n    flex-direction: column;\n  }\n\n  .actions dropi-button {\n    width: 100%;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Method, Watch, h } from '@stencil/core';\n\nexport type AlertModalType = 'question' | 'warning' | 'success' | 'error' | 'loading';\n\n/**\n * @component dropi-alert-modal\n * Confirmation/alert modal with Lottie animation, title, message and action buttons.\n * Uses dropi-modal internally.\n *\n * @example\n * const el = document.querySelector('dropi-alert-modal');\n * el.visible = true;\n */\n@Component({\n  tag: 'dropi-alert-modal',\n  styleUrl: 'dropi-alert-modal.css',\n  shadow: false,\n})\nexport class DropiAlertModal {\n  /** Controls visibility */\n  @Prop({ mutable: true, reflect: true }) visible: any = false;\n  /** Modal type — determines Lottie animation */\n  @Prop({ mutable: true }) type: AlertModalType = 'question';\n  /** Bold title */\n  @Prop({ mutable: true }) tittle: string = '';\n  /** Body message */\n  @Prop({ mutable: true }) message: string = '';\n  /** Primary button label */\n  @Prop({ mutable: true }) primaryButton: string = 'Accept';\n  /** Secondary button label (hidden if empty) */\n  @Prop({ mutable: true }) secondaryButton: string = '';\n  /** Show loading state with loading.json Lottie */\n  @Prop() loading: boolean = false;\n  /** Show close icon in header */\n  @Prop({ mutable: true }) closable: boolean = false;\n  /** Hide action buttons */\n  @Prop({ mutable: true }) displayButtons: boolean = true;\n  /** Loading title */\n  @Prop({ mutable: true }) loadingTitle: string = 'Loading';\n  /** Loading message */\n  @Prop({ mutable: true }) loadingMessage: string = 'Please wait a moment';\n  /**\n   * When true, primary button does NOT auto-close the modal (matches Angular `isStep`).\n   * Useful for step-by-step flows.\n   */\n  @Prop() isStep: boolean = false;\n  /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */\n  @Prop() baseZIndex: number = 0;\n  /**\n   * Use White Label (MB) illustration style instead of Lottie animation.\n   */\n  @Prop() isWhiteLabel: boolean = false;\n  /**\n   * Convenience object prop — matches Angular `params: ModalParams`.\n   * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,\n   * loadingMessage, closable, displayButtons.\n   * When provided, its values override the corresponding individual props.\n   */\n  @Prop() params: any = null;\n\n  @Watch('params')\n  paramsChanged(val: any) {\n    if (!val) return;\n    if (val.tittle !== undefined) this.tittle = val.tittle;\n    if (val.type !== undefined) this.type = val.type;\n    if (val.message !== undefined) this.message = val.message;\n    if (val.primaryButton !== undefined) this.primaryButton = val.primaryButton;\n    if (val.secondaryButton !== undefined) this.secondaryButton = val.secondaryButton;\n    if (val.loadingTitle !== undefined) this.loadingTitle = val.loadingTitle;\n    if (val.loadingMessage !== undefined) this.loadingMessage = val.loadingMessage;\n    if (val.closable !== undefined) this.closable = val.closable;\n    if (val.displayButtons !== undefined) this.displayButtons = val.displayButtons;\n  }\n\n  /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */\n  @Event() dropiPrimaryClick: EventEmitter<boolean>;\n  /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */\n  @Event() dropiSecondaryClick: EventEmitter<boolean>;\n  /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */\n  @Event() dropiVisibleChange: EventEmitter<boolean>;\n  /** Emitted when modal is hidden — matches Angular 'onHide' */\n  @Event() dropiHide: EventEmitter<void>;\n\n  private readonly lottieMap: Record<string, string> = {\n    question: '/assets/lottie-files/question.json',\n    warning: '/assets/lottie-files/warning.json',\n    success: '/assets/lottie-files/success.json',\n    error: '/assets/lottie-files/failure.json',\n    loading: '/assets/lottie-files/loading.json',\n  };\n\n  componentWillLoad() {\n    if (this.params) this.paramsChanged(this.params);\n  }\n\n  @Method() async show() {\n    this.visible = true;\n  }\n  @Method() async hide() {\n    this.visible = false;\n  }\n\n  private handlePrimary() {\n    this.dropiPrimaryClick.emit(true);\n    if (!this.isStep) {\n      this.visible = false;\n      this.dropiVisibleChange.emit(false);\n    }\n  }\n\n  private handleSecondary() {\n    this.dropiSecondaryClick.emit(true);\n    this.visible = false;\n    this.dropiVisibleChange.emit(false);\n  }\n\n  private onModalHide() {\n    this.visible = false;\n    this.dropiVisibleChange.emit(false);\n    this.dropiHide.emit();\n  }\n\n  render() {\n    const lottieKey = this.loading ? 'loading' : this.type;\n    const isLottieLoading = lottieKey === 'loading';\n\n    return (\n      <dropi-modal\n        visible={this.visible}\n        showHeader={this.closable}\n        showCloseIcon={this.closable}\n        dismissable={false}\n        closeOnEscape={false}\n        showFooter={false}\n        size=\"s\"\n        onDropiHide={() => this.onModalHide()}\n      >\n        <div class=\"body-alert\">\n          {this.lottieMap[lottieKey] && (\n            <div class={`lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}`}>\n              <lottie-player\n                key={lottieKey}\n                src={this.lottieMap[lottieKey]}\n                background=\"transparent\"\n                speed=\"1\"\n                loop\n                autoplay\n              />\n            </div>\n          )}\n\n          <div class=\"content-alert\">\n            <h2>{this.loading ? this.loadingTitle : this.tittle}</h2>\n            <p>{this.loading ? this.loadingMessage : this.message}</p>\n          </div>\n\n          <div class=\"custom-content\">\n            <slot />\n          </div>\n\n          {!this.loading && this.displayButtons && (\n            <div class=\"actions\">\n              {this.secondaryButton && <dropi-button text={this.secondaryButton} severity=\"secondary\" onDropiClick={() => this.handleSecondary()} fullWidth />}\n              <dropi-button text={this.primaryButton} severity=\"primary\" onDropiClick={() => this.handlePrimary()} fullWidth />\n            </div>\n          )}\n        </div>\n      </dropi-modal>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-alert-modal.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-alert-modal/dropi-alert-modal.css?tag=dropi-alert-modal","src/components/dropi-alert-modal/dropi-alert-modal.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n  display: contents;\n}\n\n.body-alert {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--Size-3);\n  width: 100%;\n  flex: 1;\n  overflow: visible;\n  padding-bottom: var(--Size-2);\n}\n\n/* ── Lottie regular ───────────────────────────────────────────────── */\n.lottie-img {\n  width: 120px;\n  height: 120px;\n  overflow: hidden;\n  flex-shrink: 0;\n  align-self: center;\n  margin-top: -8px;\n  margin-bottom: var(--Size-2);\n}\n\n.lottie-img lottie-player {\n  display: block;\n  width: 120px;\n  height: 120px;\n}\n\n/* ── Lottie loading ───────────────────────────────────────────────── */\n.lottie-img--loading {\n  width: 100%;\n  height: 120px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.lottie-img--loading lottie-player {\n  width: 300px;\n  height: auto;\n  flex-shrink: 0;\n}\n\n/* ── Content ──────────────────────────────────────────────────────── */\n.content-alert {\n  text-align: center;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.content-alert h2 {\n  color: var(--Gray-Gray-800);\n  font-size: 19px;\n  font-weight: var(--font-weight-semibold);\n  margin: 0;\n}\n\n.content-alert p {\n  color: var(--Gray-Gray-500);\n  font-size: var(--font-size-s);\n  margin-bottom: var(--Size-2);\n  overflow-wrap: anywhere;\n  max-height: 100px;\n  overflow: auto;\n}\n\n.custom-content {\n  width: 100%;\n  text-align: left;\n  margin-top: var(--Size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--Size-3);\n}\n\n/* ── Actions ──────────────────────────────────────────────────────── */\n.actions {\n  display: flex;\n  gap: var(--Size-3);\n  width: 100%;\n}\n\n.actions dropi-button {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n}\n\n@media (max-width: 768px) {\n  .actions {\n    flex-direction: column;\n  }\n\n  .actions dropi-button {\n    width: 100%;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Method, Watch, Element, h } from '@stencil/core';\nimport { LOTTIE_MAP } from '../../utils/lottie-map.generated';\n\nexport type AlertModalType = 'question' | 'warning' | 'success' | 'error' | 'loading';\n\n/**\n * @component dropi-alert-modal\n * Confirmation/alert modal with Lottie animation, title, message and action buttons.\n * Uses dropi-modal internally.\n *\n * @example\n * const el = document.querySelector('dropi-alert-modal');\n * el.visible = true;\n */\n@Component({\n  tag: 'dropi-alert-modal',\n  styleUrl: 'dropi-alert-modal.css',\n  shadow: false,\n})\nexport class DropiAlertModal {\n  @Element() el!: HTMLElement;\n\n  /** Controls visibility */\n  @Prop({ mutable: true, reflect: true }) visible: any = false;\n  /** Modal type — determines Lottie animation */\n  @Prop({ mutable: true }) type: AlertModalType = 'question';\n  /** Bold title */\n  @Prop({ mutable: true }) tittle: string = '';\n  /** Body message */\n  @Prop({ mutable: true }) message: string = '';\n  /** Primary button label */\n  @Prop({ mutable: true }) primaryButton: string = 'Accept';\n  /** Secondary button label (hidden if empty) */\n  @Prop({ mutable: true }) secondaryButton: string = '';\n  /** Show loading state with loading.json Lottie */\n  @Prop() loading: boolean = false;\n  /** Show close icon in header */\n  @Prop({ mutable: true }) closable: boolean = false;\n  /** Hide action buttons */\n  @Prop({ mutable: true }) displayButtons: boolean = true;\n  /** Loading title */\n  @Prop({ mutable: true }) loadingTitle: string = 'Loading';\n  /** Loading message */\n  @Prop({ mutable: true }) loadingMessage: string = 'Please wait a moment';\n  /**\n   * When true, primary button does NOT auto-close the modal (matches Angular `isStep`).\n   * Useful for step-by-step flows.\n   */\n  @Prop() isStep: boolean = false;\n  /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */\n  @Prop() baseZIndex: number = 0;\n  /**\n   * Use White Label (MB) illustration style instead of Lottie animation.\n   */\n  @Prop() isWhiteLabel: boolean = false;\n  /**\n   * Convenience object prop — matches Angular `params: ModalParams`.\n   * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,\n   * loadingMessage, closable, displayButtons.\n   * When provided, its values override the corresponding individual props.\n   */\n  @Prop() params: any = null;\n\n  @Watch('params')\n  paramsChanged(val: any) {\n    if (!val) return;\n    if (val.tittle !== undefined) this.tittle = val.tittle;\n    if (val.type !== undefined) this.type = val.type;\n    if (val.message !== undefined) this.message = val.message;\n    if (val.primaryButton !== undefined) this.primaryButton = val.primaryButton;\n    if (val.secondaryButton !== undefined) this.secondaryButton = val.secondaryButton;\n    if (val.loadingTitle !== undefined) this.loadingTitle = val.loadingTitle;\n    if (val.loadingMessage !== undefined) this.loadingMessage = val.loadingMessage;\n    if (val.closable !== undefined) this.closable = val.closable;\n    if (val.displayButtons !== undefined) this.displayButtons = val.displayButtons;\n  }\n\n  /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */\n  @Event() dropiPrimaryClick: EventEmitter<boolean>;\n  /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */\n  @Event() dropiSecondaryClick: EventEmitter<boolean>;\n  /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */\n  @Event() dropiVisibleChange: EventEmitter<boolean>;\n  /** Emitted when modal is hidden — matches Angular 'onHide' */\n  @Event() dropiHide: EventEmitter<void>;\n\n  componentWillLoad() {\n    if (this.params) this.paramsChanged(this.params);\n  }\n\n  @Method() async show() {\n    this.visible = true;\n  }\n  @Method() async hide() {\n    this.visible = false;\n  }\n\n  private handlePrimary() {\n    this.dropiPrimaryClick.emit(true);\n    if (!this.isStep) {\n      this.visible = false;\n      this.dropiVisibleChange.emit(false);\n    }\n  }\n\n  private handleSecondary() {\n    this.dropiSecondaryClick.emit(true);\n    this.visible = false;\n    this.dropiVisibleChange.emit(false);\n  }\n\n  private onModalHide() {\n    this.visible = false;\n    this.dropiVisibleChange.emit(false);\n    this.dropiHide.emit();\n  }\n\n  render() {\n    const lottieKey = this.loading ? 'loading' : this.type;\n    const isLottieLoading = lottieKey === 'loading';\n    const lottieSrc = LOTTIE_MAP[lottieKey];\n\n    return (\n      <dropi-modal\n        visible={this.visible}\n        showHeader={this.closable}\n        showCloseIcon={this.closable}\n        dismissable={false}\n        closeOnEscape={false}\n        showFooter={false}\n        size=\"s\"\n        onDropiHide={() => this.onModalHide()}\n      >\n        <div class=\"body-alert\">\n          {lottieSrc && (\n            <div class={`lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}`}>\n              <lottie-player\n                key={lottieKey}\n                src={lottieSrc}\n                background=\"transparent\"\n                speed=\"1\"\n                loop\n                autoplay\n              />\n            </div>\n          )}\n\n          <div class=\"content-alert\">\n            <h2>{this.loading ? this.loadingTitle : this.tittle}</h2>\n            <p>{this.loading ? this.loadingMessage : this.message}</p>\n          </div>\n\n          <div class=\"custom-content\">\n            <slot />\n          </div>\n\n          {!this.loading && this.displayButtons && (\n            <div class=\"actions\">\n              {this.secondaryButton && <dropi-button text={this.secondaryButton} severity=\"secondary\" onDropiClick={() => this.handleSecondary()} fullWidth />}\n              <dropi-button text={this.primaryButton} severity=\"primary\" onDropiClick={() => this.handlePrimary()} fullWidth />\n            </div>\n          )}\n        </div>\n      </dropi-modal>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-alert.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-BKkSRXlb.js';
 
-const dropiAlertCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.alert{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid transparent;width:100%}.alert--success{background:var(--Success-Success-50, #e7f8f3);border-color:var(--Success-Success-500, #0abb87)}.alert--error{background:var(--Error-Error-50, #fef0f0);border-color:var(--Error-Error-500, #f46a6b)}.alert--warning{background:var(--Warning-Warning-50, #fef8ed);border-color:var(--Warning-Warning-500, #f1b44c)}.alert--info{background:var(--Info-Info-50, #eef6fe);border-color:var(--Info-Info-500, #50a5f1)}.alert--flag{padding:var(--Size-1, 4px) var(--Size-2, 8px);border-radius:var(--Border-1, 4px);border:none !important;justify-content:center}.alert--flag .alert__body{justify-content:center;text-align:center}.alert--flag .alert__message{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular)}.alert__icon{display:flex;align-items:center;flex-shrink:0;padding-top:1px}.alert__body{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--Size-1, 4px)}.alert__message{font-size:var(--font-size-s);color:var(--Gray-600, #475066);font-weight:var(--font-weight-medium);line-height:1.5}.alert__link{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);text-decoration:underline;cursor:pointer}.alert__actions{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.alert__btn{height:28px;padding:0 var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid var(--Primary-Primary-500, #f49a3d);background:transparent;color:var(--Primary-Primary-500, #f49a3d);font-size:var(--font-size-xs, 10px);font-family:inherit;font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:background 0.15s, color 0.15s}.alert__btn:hover{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.alert__close{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;opacity:0.6;transition:opacity 0.15s}.alert__close:hover{opacity:1}`;
+const dropiAlertCss = () => `:host{display:block;width:100%;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}*,*::before,*::after{box-sizing:border-box}.alert{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid transparent;width:100%}.alert--success{background:var(--Success-Success-50, #e7f8f3);border-color:var(--Success-Success-500, #0abb87)}.alert--error{background:var(--Error-Error-50, #fef0f0);border-color:var(--Error-Error-500, #f46a6b)}.alert--warning{background:var(--Warning-Warning-50, #fef8ed);border-color:var(--Warning-Warning-500, #f1b44c)}.alert--info{background:var(--Info-Info-50, #eef6fe);border-color:var(--Info-Info-500, #50a5f1)}.alert--flag{padding:var(--Size-1, 4px) var(--Size-2, 8px);border-radius:var(--Border-1, 4px);border:none !important;justify-content:center}.alert--flag .alert__body{justify-content:center;text-align:center}.alert--flag .alert__message{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular)}.alert__icon{display:flex;align-items:center;flex-shrink:0;padding-top:1px}.alert__body{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--Size-1, 4px)}.alert__message{font-size:var(--font-size-s);color:var(--Gray-600, #475066);font-weight:var(--font-weight-medium);line-height:1.5}.alert__link{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);text-decoration:underline;cursor:pointer}.alert__actions{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.alert__btn{height:28px;padding:0 var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid var(--Primary-Primary-500, #f49a3d);background:transparent;color:var(--Primary-Primary-500, #f49a3d);font-size:var(--font-size-xs, 10px);font-family:var(--font-family-01, 'Inter', sans-serif);font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:background 0.15s, color 0.15s}.alert__btn:hover{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.alert__close{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;opacity:0.6;transition:opacity 0.15s}.alert__close:hover{opacity:1}`;
 
 const STATE_ICONS = {
     success: 'Check-circle',

package/dist/dropi-ui/dropi-alert.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-alert.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-alert/dropi-alert.css?tag=dropi-alert&encapsulation=shadow","src/components/dropi-alert/dropi-alert.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.alert {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: var(--Size-3, 12px);\n  border-radius: var(--Border-2, 8px);\n  border: 1px solid transparent;\n  width: 100%;\n}\n\n/* ── State colors ───────────────────────────────────────── */\n.alert--success {\n  background: var(--Success-Success-50, #e7f8f3);\n  border-color: var(--Success-Success-500, #0abb87);\n}\n\n.alert--error {\n  background: var(--Error-Error-50, #fef0f0);\n  border-color: var(--Error-Error-500, #f46a6b);\n}\n\n.alert--warning {\n  background: var(--Warning-Warning-50, #fef8ed);\n  border-color: var(--Warning-Warning-500, #f1b44c);\n}\n\n.alert--info {\n  background: var(--Info-Info-50, #eef6fe);\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n/* ── Flag type (left accent border) ────────────────────── */\n.alert--flag {\n  padding: var(--Size-1, 4px) var(--Size-2, 8px);\n  border-radius: var(--Border-1, 4px);\n  border: none !important;\n  justify-content: center;\n}\n.alert--flag .alert__body {\n  justify-content: center;\n  text-align: center;\n}\n.alert--flag .alert__message {\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-regular);\n}\n\n/* ── Icon ───────────────────────────────────────────────── */\n.alert__icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding-top: 1px;\n}\n\n/* ── Body ───────────────────────────────────────────────── */\n.alert__body {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--Size-1, 4px);\n}\n\n.alert__message {\n  font-size: var(--font-size-s);\n  color: var(--Gray-600, #475066);\n  font-weight: var(--font-weight-medium);\n  line-height: 1.5;\n}\n\n.alert__link {\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Primary-Primary-500, #f49a3d);\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n/* ── Actions ────────────────────────────────────────────── */\n.alert__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  flex-shrink: 0;\n}\n\n.alert__btn {\n  height: 28px;\n  padding: 0 var(--Size-3, 12px);\n  border-radius: var(--Border-2, 8px);\n  border: 1px solid var(--Primary-Primary-500, #f49a3d);\n  background: transparent;\n  color: var(--Primary-Primary-500, #f49a3d);\n  font-size: var(--font-size-xs, 10px);\n  font-family: inherit;\n  font-weight: var(--font-weight-bold, 700);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.alert__btn:hover {\n  background: var(--Primary-Primary-500, #f49a3d);\n  color: var(--Neutral-White, #ffffff);\n}\n\n.alert__close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.15s;\n}\n\n.alert__close:hover {\n  opacity: 1;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type AlertState = 'success' | 'error' | 'warning' | 'info';\nexport type AlertType = 'default' | 'flag';\n\nconst STATE_ICONS: Record<AlertState, string> = {\n  success: 'Check-circle',\n  error: 'Cross-circle',\n  warning: 'Warning-circle',\n  info: 'Info',\n};\n\nconst STATE_COLORS: Record<AlertState, string> = {\n  success: 'Success-Success-500',\n  error: 'Error-Error-500',\n  warning: 'Warning-Warning-500',\n  info: 'Info-Info-500',\n};\n\n/**\n * @component dropi-alert\n * Alert banner with state variants (success/error/warning/info),\n * optional action button, anchor link, and dismissable close icon.\n */\n@Component({\n  tag: 'dropi-alert',\n  styleUrl: 'dropi-alert.css',\n  shadow: true,\n})\nexport class DropiAlert {\n  /** Alert message text (supports plain text) */\n  @Prop() message: string = '';\n  /** Layout type: default (inline) | flag (accented left border) */\n  @Prop() type: AlertType = 'default';\n  /** Semantic state */\n  @Prop() state: AlertState = 'success';\n  /** Show the × close button */\n  @Prop() dismissable: boolean = true;\n  /** Show action button */\n  @Prop() showButton: boolean = false;\n  /** Action button label */\n  @Prop() buttonText: string = 'Close';\n  /** Anchor/link label */\n  @Prop() anchorText: string = '';\n  /** Anchor href */\n  @Prop() anchorUrl: string = '';\n  /** Whether the alert is visible */\n  @Prop({ mutable: true }) showAlert: boolean = true;\n  /** Link text (alternative to anchorText) */\n  @Prop() textLink: string = '';\n  /** Link URL (alternative to anchorUrl) */\n  @Prop() linkUrl: string = '';\n  /** Clicked text tracking */\n  @Prop() clickedText: string = '';\n\n  /** Emitted when the alert is dismissed */\n  @Event() dropiClose: EventEmitter<void>;\n  /** Emitted when the action button is clicked */\n  @Event() dropiButtonClick: EventEmitter<void>;\n  /** Emitted when the anchor link is clicked */\n  @Event() dropiLinkClick: EventEmitter<void>;\n\n  render() {\n    if (!this.showAlert) return null;\n\n    return (\n      <div class={{ 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true }}>\n\n        {this.type !== 'flag' && (\n          <div class=\"alert__icon\">\n            <dropi-icon\n              name={STATE_ICONS[this.state]}\n              iconWidth=\"18px\"\n              iconHeight=\"18px\"\n              color={STATE_COLORS[this.state]}\n            />\n          </div>\n        )}\n\n        <div class=\"alert__body\">\n          <span class=\"alert__message\" innerHTML={this.message}></span>\n\n          {this.clickedText && (\n            <a\n              class=\"alert__link\"\n              href=\"#\"\n              onClick={(e) => { e.preventDefault(); this.dropiLinkClick.emit(); }}\n            >\n              {this.clickedText}\n            </a>\n          )}\n\n          {(this.anchorText || this.textLink) && (\n            <a\n              class=\"alert__link\"\n              href={this.anchorUrl || this.linkUrl || '#'}\n              onClick={(e) => { e.preventDefault(); this.dropiLinkClick.emit(); }}\n            >\n              {this.anchorText || this.textLink}\n            </a>\n          )}\n        </div>\n\n        <div class=\"alert__actions\">\n          {this.showButton && this.buttonText && this.type !== 'flag' && (\n            <button class=\"alert__btn\" onClick={() => this.dropiButtonClick.emit()}>\n              {this.buttonText}\n            </button>\n          )}\n\n          {this.dismissable && (\n            <button\n              class=\"alert__close\"\n              onClick={() => { this.showAlert = false; this.dropiClose.emit(); }}\n              aria-label=\"Cerrar\"\n            >\n              <dropi-icon name=\"Close-small\" iconWidth=\"18px\" iconHeight=\"18px\" color=\"Gray-Gray-500\" />\n            </button>\n          )}\n        </div>\n\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-alert.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-alert/dropi-alert.css?tag=dropi-alert&encapsulation=shadow","src/components/dropi-alert/dropi-alert.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n  display: block;\n  width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.alert {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: var(--Size-3, 12px);\n  border-radius: var(--Border-2, 8px);\n  border: 1px solid transparent;\n  width: 100%;\n}\n\n/* ── State colors ───────────────────────────────────────── */\n.alert--success {\n  background: var(--Success-Success-50, #e7f8f3);\n  border-color: var(--Success-Success-500, #0abb87);\n}\n\n.alert--error {\n  background: var(--Error-Error-50, #fef0f0);\n  border-color: var(--Error-Error-500, #f46a6b);\n}\n\n.alert--warning {\n  background: var(--Warning-Warning-50, #fef8ed);\n  border-color: var(--Warning-Warning-500, #f1b44c);\n}\n\n.alert--info {\n  background: var(--Info-Info-50, #eef6fe);\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n/* ── Flag type (left accent border) ────────────────────── */\n.alert--flag {\n  padding: var(--Size-1, 4px) var(--Size-2, 8px);\n  border-radius: var(--Border-1, 4px);\n  border: none !important;\n  justify-content: center;\n}\n.alert--flag .alert__body {\n  justify-content: center;\n  text-align: center;\n}\n.alert--flag .alert__message {\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-regular);\n}\n\n/* ── Icon ───────────────────────────────────────────────── */\n.alert__icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding-top: 1px;\n}\n\n/* ── Body ───────────────────────────────────────────────── */\n.alert__body {\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--Size-1, 4px);\n}\n\n.alert__message {\n  font-size: var(--font-size-s);\n  color: var(--Gray-600, #475066);\n  font-weight: var(--font-weight-medium);\n  line-height: 1.5;\n}\n\n.alert__link {\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Primary-Primary-500, #f49a3d);\n  text-decoration: underline;\n  cursor: pointer;\n}\n\n/* ── Actions ────────────────────────────────────────────── */\n.alert__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  flex-shrink: 0;\n}\n\n.alert__btn {\n  height: 28px;\n  padding: 0 var(--Size-3, 12px);\n  border-radius: var(--Border-2, 8px);\n  border: 1px solid var(--Primary-Primary-500, #f49a3d);\n  background: transparent;\n  color: var(--Primary-Primary-500, #f49a3d);\n  font-size: var(--font-size-xs, 10px);\n  font-family: var(--font-family-01, 'Inter', sans-serif);\n  font-weight: var(--font-weight-bold, 700);\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.alert__btn:hover {\n  background: var(--Primary-Primary-500, #f49a3d);\n  color: var(--Neutral-White, #ffffff);\n}\n\n.alert__close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.15s;\n}\n\n.alert__close:hover {\n  opacity: 1;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type AlertState = 'success' | 'error' | 'warning' | 'info';\nexport type AlertType = 'default' | 'flag';\n\nconst STATE_ICONS: Record<AlertState, string> = {\n  success: 'Check-circle',\n  error: 'Cross-circle',\n  warning: 'Warning-circle',\n  info: 'Info',\n};\n\nconst STATE_COLORS: Record<AlertState, string> = {\n  success: 'Success-Success-500',\n  error: 'Error-Error-500',\n  warning: 'Warning-Warning-500',\n  info: 'Info-Info-500',\n};\n\n/**\n * @component dropi-alert\n * Alert banner with state variants (success/error/warning/info),\n * optional action button, anchor link, and dismissable close icon.\n */\n@Component({\n  tag: 'dropi-alert',\n  styleUrl: 'dropi-alert.css',\n  shadow: true,\n})\nexport class DropiAlert {\n  /** Alert message text (supports plain text) */\n  @Prop() message: string = '';\n  /** Layout type: default (inline) | flag (accented left border) */\n  @Prop() type: AlertType = 'default';\n  /** Semantic state */\n  @Prop() state: AlertState = 'success';\n  /** Show the × close button */\n  @Prop() dismissable: boolean = true;\n  /** Show action button */\n  @Prop() showButton: boolean = false;\n  /** Action button label */\n  @Prop() buttonText: string = 'Close';\n  /** Anchor/link label */\n  @Prop() anchorText: string = '';\n  /** Anchor href */\n  @Prop() anchorUrl: string = '';\n  /** Whether the alert is visible */\n  @Prop({ mutable: true }) showAlert: boolean = true;\n  /** Link text (alternative to anchorText) */\n  @Prop() textLink: string = '';\n  /** Link URL (alternative to anchorUrl) */\n  @Prop() linkUrl: string = '';\n  /** Clicked text tracking */\n  @Prop() clickedText: string = '';\n\n  /** Emitted when the alert is dismissed */\n  @Event() dropiClose: EventEmitter<void>;\n  /** Emitted when the action button is clicked */\n  @Event() dropiButtonClick: EventEmitter<void>;\n  /** Emitted when the anchor link is clicked */\n  @Event() dropiLinkClick: EventEmitter<void>;\n\n  render() {\n    if (!this.showAlert) return null;\n\n    return (\n      <div class={{ 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true }}>\n\n        {this.type !== 'flag' && (\n          <div class=\"alert__icon\">\n            <dropi-icon\n              name={STATE_ICONS[this.state]}\n              iconWidth=\"18px\"\n              iconHeight=\"18px\"\n              color={STATE_COLORS[this.state]}\n            />\n          </div>\n        )}\n\n        <div class=\"alert__body\">\n          <span class=\"alert__message\" innerHTML={this.message}></span>\n\n          {this.clickedText && (\n            <a\n              class=\"alert__link\"\n              href=\"#\"\n              onClick={(e) => { e.preventDefault(); this.dropiLinkClick.emit(); }}\n            >\n              {this.clickedText}\n            </a>\n          )}\n\n          {(this.anchorText || this.textLink) && (\n            <a\n              class=\"alert__link\"\n              href={this.anchorUrl || this.linkUrl || '#'}\n              onClick={(e) => { e.preventDefault(); this.dropiLinkClick.emit(); }}\n            >\n              {this.anchorText || this.textLink}\n            </a>\n          )}\n        </div>\n\n        <div class=\"alert__actions\">\n          {this.showButton && this.buttonText && this.type !== 'flag' && (\n            <button class=\"alert__btn\" onClick={() => this.dropiButtonClick.emit()}>\n              {this.buttonText}\n            </button>\n          )}\n\n          {this.dismissable && (\n            <button\n              class=\"alert__close\"\n              onClick={() => { this.showAlert = false; this.dropiClose.emit(); }}\n              aria-label=\"Cerrar\"\n            >\n              <dropi-icon name=\"Close-small\" iconWidth=\"18px\" iconHeight=\"18px\" color=\"Gray-Gray-500\" />\n            </button>\n          )}\n        </div>\n\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-avatars.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
 
-const dropiAvatarsCss = () => `:host{display:inline-block}.avatar{margin:0;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.avatar--users,.avatar--transport,.avatar--payment{width:35px;height:35px}.avatar--supplier{width:70px;height:70px}.avatar--counter{width:33px;height:33px}.avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background-color:var(--Primary-Primary-100, #fde9d0);color:var(--Primary-Primary-600, #d4872e);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.5px}`;
+const dropiAvatarsCss = () => `:host{display:inline-block;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.avatar{margin:0;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.avatar--users,.avatar--transport,.avatar--payment{width:35px;height:35px}.avatar--supplier{width:70px;height:70px}.avatar--counter{width:33px;height:33px}.avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background-color:var(--Primary-Primary-100, #fde9d0);color:var(--Primary-Primary-600, #d4872e);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.5px}`;
 
 const FALLBACK = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IiNlNmVhZjIiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjE0IiByPSI2IiBmaWxsPSIjODU4ZWE2Ii8+PHBhdGggZD0iTTYgMzJjMC04IDI0LTggMjQgMCIgZmlsbD0iIzg1OGVhNiIvPjwvc3ZnPg==`;
 const DropiAvatars = class {
@@ -21,7 +21,7 @@ const DropiAvatars = class {
     render() {
         const displayInitials = this.initials?.slice(0, 2).toUpperCase();
         const showInitials = !this.image && displayInitials;
-        return (h("figure", { key: 'db9310b5c789b079fc0f9043a619bd22f9a60151', class: { 'avatar': true, [`avatar--${this.type}`]: true } }, showInitials ? (h("div", { class: "avatar__initials" }, displayInitials)) : (h("img", { src: this.image || FALLBACK, alt: this.alt, onError: (e) => this.handleError(e) }))));
+        return (h("figure", { key: 'b02b4521a3b0e1cf53b4b936434518a041c751ee', class: { 'avatar': true, [`avatar--${this.type}`]: true } }, showInitials ? (h("div", { class: "avatar__initials" }, displayInitials)) : (h("img", { src: this.image || FALLBACK, alt: this.alt, onError: (e) => this.handleError(e) }))));
     }
 };
 DropiAvatars.style = dropiAvatarsCss();

package/dist/dropi-ui/dropi-avatars.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-avatars.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,0sBAA0sB,CAAC;;ACI1uB,MAAM,QAAQ,GAAG,CAAA,8SAAA,CAAgT;MAWpT,YAAY,GAAA,MAAA;;;;;IAEf,KAAK,GAAW,EAAE;;IAElB,GAAG,GAAW,QAAQ;;IAEtB,IAAI,GAAe,OAAO;;IAE1B,QAAQ,GAAW,EAAE;AAErB,IAAA,WAAW,CAAC,CAAQ,EAAA;AACzB,QAAA,CAAC,CAAC,MAA2B,CAAC,GAAG,GAAG,QAAQ;;IAG/C,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE;QAChE,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe;AAEnD,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,WAAW,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EAC9D,YAAY,IACX,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAAE,eAAe,CAAO,KAErD,CAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,QAAQ,EAC3B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,CACnC,CACH,CACM;;;;;;;","names":[],"sources":["src/components/dropi-avatars/dropi-avatars.css?tag=dropi-avatars&encapsulation=shadow","src/components/dropi-avatars/dropi-avatars.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.avatar {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n/* ── Size variants ─────────────────────────────────────── */\n.avatar--users,\n.avatar--transport,\n.avatar--payment {\n  width: 35px;\n  height: 35px;\n}\n\n.avatar--supplier {\n  width: 70px;\n  height: 70px;\n}\n\n.avatar--counter {\n  width: 33px;\n  height: 33px;\n}\n\n/* ── Initials fallback ─────────────────────────────────── */\n.avatar__initials {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: var(--Primary-Primary-100, #fde9d0);\n  color: var(--Primary-Primary-600, #d4872e);\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-bold, 700);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type AvatarType = 'users' | 'transport' | 'supplier' | 'payment' | 'counter';\n\nconst FALLBACK = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IiNlNmVhZjIiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjE0IiByPSI2IiBmaWxsPSIjODU4ZWE2Ii8+PHBhdGggZD0iTTYgMzJjMC04IDI0LTggMjQgMCIgZmlsbD0iIzg1OGVhNiIvPjwvc3ZnPg==`;\n\n/**\n * @component dropi-avatars\n * Avatar component with image, initials fallback, and type-based size variants.\n */\n@Component({\n  tag: 'dropi-avatars',\n  styleUrl: 'dropi-avatars.css',\n  shadow: true,\n})\nexport class DropiAvatars {\n  /** Image URL */\n  @Prop() image: string = '';\n  /** Alt text for the image */\n  @Prop() alt: string = 'Avatar';\n  /** Size/context variant */\n  @Prop() type: AvatarType = 'users';\n  /** Initials to show when no image (max 2 chars) */\n  @Prop() initials: string = '';\n\n  private handleError(e: Event) {\n    (e.target as HTMLImageElement).src = FALLBACK;\n  }\n\n  render() {\n    const displayInitials = this.initials?.slice(0, 2).toUpperCase();\n    const showInitials = !this.image && displayInitials;\n\n    return (\n      <figure class={{ 'avatar': true, [`avatar--${this.type}`]: true }}>\n        {showInitials ? (\n          <div class=\"avatar__initials\">{displayInitials}</div>\n        ) : (\n          <img\n            src={this.image || FALLBACK}\n            alt={this.alt}\n            onError={(e) => this.handleError(e)}\n          />\n        )}\n      </figure>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-avatars.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,+xBAA+xB,CAAC;;ACI/zB,MAAM,QAAQ,GAAG,CAAA,8SAAA,CAAgT;MAWpT,YAAY,GAAA,MAAA;;;;;IAEf,KAAK,GAAW,EAAE;;IAElB,GAAG,GAAW,QAAQ;;IAEtB,IAAI,GAAe,OAAO;;IAE1B,QAAQ,GAAW,EAAE;AAErB,IAAA,WAAW,CAAC,CAAQ,EAAA;AACzB,QAAA,CAAC,CAAC,MAA2B,CAAC,GAAG,GAAG,QAAQ;;IAG/C,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE;QAChE,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe;AAEnD,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,WAAW,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EAC9D,YAAY,IACX,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAAE,eAAe,CAAO,KAErD,CAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,QAAQ,EAC3B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,CACnC,CACH,CACM;;;;;;;","names":[],"sources":["src/components/dropi-avatars/dropi-avatars.css?tag=dropi-avatars&encapsulation=shadow","src/components/dropi-avatars/dropi-avatars.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n  display: inline-block;\n}\n\n.avatar {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n/* ── Size variants ─────────────────────────────────────── */\n.avatar--users,\n.avatar--transport,\n.avatar--payment {\n  width: 35px;\n  height: 35px;\n}\n\n.avatar--supplier {\n  width: 70px;\n  height: 70px;\n}\n\n.avatar--counter {\n  width: 33px;\n  height: 33px;\n}\n\n/* ── Initials fallback ─────────────────────────────────── */\n.avatar__initials {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: var(--Primary-Primary-100, #fde9d0);\n  color: var(--Primary-Primary-600, #d4872e);\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-bold, 700);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type AvatarType = 'users' | 'transport' | 'supplier' | 'payment' | 'counter';\n\nconst FALLBACK = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzNiI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IiNlNmVhZjIiLz48Y2lyY2xlIGN4PSIxOCIgY3k9IjE0IiByPSI2IiBmaWxsPSIjODU4ZWE2Ii8+PHBhdGggZD0iTTYgMzJjMC04IDI0LTggMjQgMCIgZmlsbD0iIzg1OGVhNiIvPjwvc3ZnPg==`;\n\n/**\n * @component dropi-avatars\n * Avatar component with image, initials fallback, and type-based size variants.\n */\n@Component({\n  tag: 'dropi-avatars',\n  styleUrl: 'dropi-avatars.css',\n  shadow: true,\n})\nexport class DropiAvatars {\n  /** Image URL */\n  @Prop() image: string = '';\n  /** Alt text for the image */\n  @Prop() alt: string = 'Avatar';\n  /** Size/context variant */\n  @Prop() type: AvatarType = 'users';\n  /** Initials to show when no image (max 2 chars) */\n  @Prop() initials: string = '';\n\n  private handleError(e: Event) {\n    (e.target as HTMLImageElement).src = FALLBACK;\n  }\n\n  render() {\n    const displayInitials = this.initials?.slice(0, 2).toUpperCase();\n    const showInitials = !this.image && displayInitials;\n\n    return (\n      <figure class={{ 'avatar': true, [`avatar--${this.type}`]: true }}>\n        {showInitials ? (\n          <div class=\"avatar__initials\">{displayInitials}</div>\n        ) : (\n          <img\n            src={this.image || FALLBACK}\n            alt={this.alt}\n            onError={(e) => this.handleError(e)}\n          />\n        )}\n      </figure>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-badge-legacy.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
 
-const dropiBadgeLegacyCss = () => `:host{display:inline-block}.badge-legacy{display:flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:10px;font-size:11px;font-weight:600}.badge-legacy--primary{background:var(--Primary-Primary-50);color:var(--Primary-Primary-500)}.badge-legacy--secondary{background:var(--Gray-Gray-100);color:var(--Gray-Gray-600)}.badge-legacy--tertiary{background:var(--Success-Success-50);color:var(--Success-Success-500)}`;
+const dropiBadgeLegacyCss = () => `:host{display:inline-block;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.badge-legacy{display:flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:10px;font-size:11px;font-weight:600}.badge-legacy--primary{background:var(--Primary-Primary-50);color:var(--Primary-Primary-500)}.badge-legacy--secondary{background:var(--Gray-Gray-100);color:var(--Gray-Gray-600)}.badge-legacy--tertiary{background:var(--Success-Success-50);color:var(--Success-Success-500)}`;
 
 const DropiBadgeLegacy = class {
     constructor(hostRef) {
@@ -16,7 +16,7 @@ const DropiBadgeLegacy = class {
     count = 0;
     render() {
         const isCounter = this.type === 'counter';
-        return (h("div", { key: '58bb5c6625539109f010cccdcaafc37ab6da38ba', class: {
+        return (h("div", { key: '0385e946a75b70b5417c0d220c1fd8f4e1ee8d6f', class: {
                 'badge-legacy': true,
                 [`badge-legacy--${this.variant}`]: true,
                 [`badge-legacy--${this.type}`]: true

package/dist/dropi-ui/dropi-badge-legacy.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-badge-legacy.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,ibAAib,CAAC;;MCWxc,gBAAgB,GAAA,MAAA;;;;;IAEnB,IAAI,GAAwB,OAAO;;IAEnC,KAAK,GAAwB,OAAO;;IAEpC,OAAO,GAAyC,SAAS;;IAEzD,KAAK,GAAW,CAAC;IAEzB,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS;QACzC,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE;AACV,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,CAAC,iBAAiB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACvC,gBAAA,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG;AACjC,aAAA,EAAA,EACE,SAAS,IACR,YAAM,KAAK,EAAC,aAAa,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,KAE7C,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,CAAA,aAAA,EAAgB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EAC3E,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,GAAG,GAAG,KAAK,CACjC,CACR,CACG;;;;;;;","names":[],"sources":["src/components/dropi-badge-legacy/dropi-badge-legacy.css?tag=dropi-badge-legacy&encapsulation=shadow","src/components/dropi-badge-legacy/dropi-badge-legacy.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.badge-legacy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 6px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.badge-legacy--primary { background: var(--Primary-Primary-50); color: var(--Primary-Primary-500); }\n.badge-legacy--secondary { background: var(--Gray-Gray-100); color: var(--Gray-Gray-600); }\n.badge-legacy--tertiary { background: var(--Success-Success-50); color: var(--Success-Success-500); }\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-badge-legacy\n * Legacy badge component used in tabs and elsewhere.\n */\n@Component({\n  tag: 'dropi-badge-legacy',\n  styleUrl: 'dropi-badge-legacy.css',\n  shadow: true,\n})\nexport class DropiBadgeLegacy {\n  /** Type: state | counter */\n  @Prop() type: 'state' | 'counter' = 'state';\n  /** State: check | pending */\n  @Prop() state: 'check' | 'pending' = 'check';\n  /** Variant: primary | secondary | tertiary */\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  /** Count (for type counterpart) */\n  @Prop() count: number = 0;\n\n  render() {\n    const isCounter = this.type === 'counter';\n    return (\n      <div class={{\n        'badge-legacy': true,\n        [`badge-legacy--${this.variant}`]: true,\n        [`badge-legacy--${this.type}`]: true\n      }}>\n        {isCounter ? (\n          <span class=\"badge-count\">{this.count}</span>\n        ) : (\n          <span class={{ 'badge-state-icon': true, [`badge-state--${this.state}`]: true }}>\n             {this.state === 'check' ? '✓' : '...'}\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-badge-legacy.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,sgBAAsgB,CAAC;;MCW7hB,gBAAgB,GAAA,MAAA;;;;;IAEnB,IAAI,GAAwB,OAAO;;IAEnC,KAAK,GAAwB,OAAO;;IAEpC,OAAO,GAAyC,SAAS;;IAEzD,KAAK,GAAW,CAAC;IAEzB,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS;QACzC,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE;AACV,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,CAAC,iBAAiB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACvC,gBAAA,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG;AACjC,aAAA,EAAA,EACE,SAAS,IACR,YAAM,KAAK,EAAC,aAAa,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,KAE7C,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC,CAAA,aAAA,EAAgB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EAC3E,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,GAAG,GAAG,KAAK,CACjC,CACR,CACG;;;;;;;","names":[],"sources":["src/components/dropi-badge-legacy/dropi-badge-legacy.css?tag=dropi-badge-legacy&encapsulation=shadow","src/components/dropi-badge-legacy/dropi-badge-legacy.tsx"],"sourcesContent":[":host {\nbutton, input, select, textarea { font-family: var(--font-family-01, 'Inter', sans-serif); }\n  display: inline-block;\n}\n\n.badge-legacy {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 6px;\n  border-radius: 10px;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.badge-legacy--primary { background: var(--Primary-Primary-50); color: var(--Primary-Primary-500); }\n.badge-legacy--secondary { background: var(--Gray-Gray-100); color: var(--Gray-Gray-600); }\n.badge-legacy--tertiary { background: var(--Success-Success-50); color: var(--Success-Success-500); }\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-badge-legacy\n * Legacy badge component used in tabs and elsewhere.\n */\n@Component({\n  tag: 'dropi-badge-legacy',\n  styleUrl: 'dropi-badge-legacy.css',\n  shadow: true,\n})\nexport class DropiBadgeLegacy {\n  /** Type: state | counter */\n  @Prop() type: 'state' | 'counter' = 'state';\n  /** State: check | pending */\n  @Prop() state: 'check' | 'pending' = 'check';\n  /** Variant: primary | secondary | tertiary */\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  /** Count (for type counterpart) */\n  @Prop() count: number = 0;\n\n  render() {\n    const isCounter = this.type === 'counter';\n    return (\n      <div class={{\n        'badge-legacy': true,\n        [`badge-legacy--${this.variant}`]: true,\n        [`badge-legacy--${this.type}`]: true\n      }}>\n        {isCounter ? (\n          <span class=\"badge-count\">{this.count}</span>\n        ) : (\n          <span class={{ 'badge-state-icon': true, [`badge-state--${this.state}`]: true }}>\n             {this.state === 'check' ? '✓' : '...'}\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-badge.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-BKkSRXlb.js';
 
-const dropiBadgeCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.tag-state{border-radius:12px;padding:2px 10px;display:flex;align-items:center;gap:4px}.tag-state svg{width:13px}.tag-state p{font-size:13px;font-weight:var(--font-weight-medium);line-height:20px;margin:0;padding:0}.tag-state.active{background:var(--Success-Success-50, #e7f8f3);color:var(--Success-Success-500, #0abb87)}.tag-state.pending{color:var(--Orange-orange-500, #f49a3d);background:var(--Orange-orange-50, #fef5ec)}.tag-state.canceled,.tag-state.frozen{color:var(--Gray-Gray-500, #69738c);background:var(--Gray-Gray-50, #f7f8fa)}`;
+const dropiBadgeCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.tag-state{border-radius:12px;padding:2px 10px;display:flex;align-items:center;gap:4px}.tag-state svg{width:13px}.tag-state p{font-size:13px;font-weight:var(--font-weight-medium);line-height:20px;margin:0;padding:0}.tag-state.active{background:var(--Success-Success-50, #e7f8f3);color:var(--Success-Success-500, #0abb87)}.tag-state.pending{color:var(--Orange-orange-500, #f49a3d);background:var(--Orange-orange-50, #fef5ec)}.tag-state.canceled,.tag-state.frozen{color:var(--Gray-Gray-500, #69738c);background:var(--Gray-Gray-50, #f7f8fa)}`;
 
 const DropiBadge = class {
     constructor(hostRef) {
@@ -27,7 +27,7 @@ const DropiBadge = class {
         return null;
     }
     render() {
-        return (h("div", { key: 'b4cae2eac2f963a641ca23e27b33899469b2b370', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: '64a2504a1844f2cb9397878ca305aa183b0609a5' }, this.stateText[this.state])));
+        return (h("div", { key: '1997371df473a02014e7d3f2989dc14dcd1d6b62', class: `tag-state ${this.state}` }, this.renderIcon(), h("p", { key: 'ecdf5584218b05f4b9b2ec3cfc5a846b3d587e36' }, this.stateText[this.state])));
     }
 };
 DropiBadge.style = dropiBadgeCss();