@dropi/ui 0.1.50 → 0.1.52

package/dist/dropi-ui/dropi-ilustration-icon.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-ilustration-icon.entry.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,MAAM,CAAC,q9CAAq9C,CAAC;;MCmBh/C,oBAAoB,GAAA,MAAA;;;;;IAEvB,IAAI,GAAoB,OAAO;;IAE/B,KAAK,GAAqB,SAAS;;IAEnC,aAAa,GAAkB,UAAU;;IAEzC,UAAU,GAAY,KAAK;AAElB,IAAA,aAAa,GAAkC;AAC9D,QAAA,QAAQ,EAAE,2CAA2C;AACrD,QAAA,OAAO,EAAG,0CAA0C;AACpD,QAAA,SAAS,EAAC,wCAAwC;KACnD;AAEO,IAAA,WAAW,CAAC,KAAa,EAAA;AAC/B,QAAA,MAAM,GAAG,GAA2B;AAClC,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAI,cAAc;AACvB,YAAA,IAAI,EAAK,oBAAoB;AAC7B,YAAA,OAAO,EAAE,oBAAoB;SAC9B;AACD,QAAA,OAAO,GAAG,CAAC,KAAK,CAAC,IAAI,oBAAoB;;IAG3C,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC3B,IAAI,CAAC,IAAI,KAAK,OAAO,KACpB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,0BAA0B,EAAA,EACtC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAA,yBAAA,EAA4B,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,MAAM,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAA,IAAA,CAAM,EACpJ,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,EAC5B,OAAO,EAAE,CAAC,CAAC,KAAI,EAAI,CAAC,CAAC,MAA2B,CAAC,GAAG,GAAG,sCAAsC,CAAC,EAAE,EAAA,CAChG,CACK,CACV,EAEA,IAAI,CAAC,IAAI,KAAK,IAAI,KACjB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,CAAA,4BAAA,EAA+B,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EACvD,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAC3D,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAClC,SAAS,EAAC,MAAM,EAChB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAC,eAAe,EAAA,CACrB,CACH,CACM,CACV,EAEA,IAAI,CAAC,IAAI,KAAK,UAAU,KACvB,+DAAQ,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,gCAAgC,GAAG,4BAA4B,EAAA,EAC9F,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,aAAa,EAAA,CAAI,EAC5E,IAAI,CAAC,UAAU,KACd,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,CAAA,SAAA,EAAY,IAAI,CAAC,aAAa,CAAA,CAAE,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAA,EACpB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CACpE,CACL,CACL,CACM,CACV,CACG;;;;;;;","names":[],"sources":["src/components/dropi-ilustration-icon/dropi-ilustration-icon.css?tag=dropi-ilustration-icon&encapsulation=shadow","src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n.dropi-ilustration {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropi-ilustration__image,\n.dropi-ilustration-insignia {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropi-ilustration__image img {\n  max-width: 100%;\n  height: auto;\n}\n\n.dropi-ilustration__image-mb {\n  width: 60px;\n  height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  margin: 0;\n}\n\n.dropi-ilustration__image-mb.success {\n  background: var(--Success-Success-500, #22c55e);\n}\n\n.dropi-ilustration__image-mb.error {\n  background: var(--Error-Error-500, #ef4444);\n}\n\n.dropi-ilustration__image-mb.info {\n  background: var(--Info-Info-500, #3b82f6);\n}\n\n.dropi-ilustration__image-mb.warning {\n  background: url('assets/icons/ilustration/bg-warning.svg') no-repeat center;\n  background-size: contain;\n  border-radius: 0;\n}\n\n.dropi-ilustration-insignia-tag {\n  display: flex;\n  align-items: center;\n  margin: 0;\n}\n\n.dropi-ilustration-insignia-tag img {\n  position: relative;\n  z-index: 2;\n  height: 32px;\n  width: auto;\n}\n\n.tag {\n  border-radius: 32px;\n  color: var(--Neutral-White, #ffffff);\n  text-transform: capitalize;\n  margin: 0 0 0 -20px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n.tag span {\n  color: var(--Neutral-White, #ffffff);\n  padding: 4px 8px 4px 18px;\n  font-size: var(--font-size-xxs);\n}\n\n.tag--verified {\n  background: linear-gradient(90deg, #ffc10d 41.3%, #ff6102 112.32%);\n}\n\n.tag--premium {\n  background: linear-gradient(90deg, #ff6102 56.52%, #ffc10d 107.25%);\n}\n\n.tag--exclusive {\n  background: linear-gradient(90deg, var(--Gray-900, #0e111a) 26.09%, #ff6102 116.67%);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type IlustrationType = 'dropi' | 'mb' | 'insignia';\nexport type IlustrationState = 'success' | 'error' | 'warning' | 'info' | 'default' | 'loading' | 'sorry' | 'love';\nexport type InsigniaState = 'verified' | 'premium' | 'exclusive';\n\n/**\n * @component dropi-ilustration-icon\n * Illustration icon with three modes: dropi (SVG asset), mb (colored circle), insignia (badge).\n *\n * @example\n * <dropi-ilustration-icon type=\"dropi\" state=\"success\"></dropi-ilustration-icon>\n * <dropi-ilustration-icon type=\"insignia\" state-insignia=\"premium\" tag-product></dropi-ilustration-icon>\n */\n@Component({\n  tag: 'dropi-ilustration-icon',\n  styleUrl: 'dropi-ilustration-icon.css',\n  shadow: true,\n})\nexport class DropiIlustrationIcon {\n  /** Display mode */\n  @Prop() type: IlustrationType = 'dropi';\n  /** State for dropi/mb types */\n  @Prop() state: IlustrationState = 'default';\n  /** Insignia variant */\n  @Prop() stateInsignia: InsigniaState = 'verified';\n  /** Show insignia as tag with label (for product cards) */\n  @Prop() tagProduct: boolean = false;\n\n  private readonly insigniaIcons: Record<InsigniaState, string> = {\n    verified: 'assets/icons/ilustration/verified-new.svg',\n    premium:  'assets/icons/ilustration/premium-new.svg',\n    exclusive:'assets/icons/ilustration/exclusive.svg',\n  };\n\n  private getIconName(state: string): string {\n    const map: Record<string, string> = {\n      success: 'Check-circle',\n      error:   'Cross-circle',\n      info:    'Comment-round_info',\n      warning: 'Comment-round_info',\n    };\n    return map[state] || 'Comment-round_info';\n  }\n\n  render() {\n    return (\n      <div class=\"dropi-ilustration\">\n        {this.type === 'dropi' && (\n          <figure class=\"dropi-ilustration__image\">\n            <img\n              src={`assets/icons/ilustration/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`}\n              alt={this.state ?? 'default'}\n              onError={(e) => { (e.target as HTMLImageElement).src = 'assets/icons/ilustration/default.svg'; }}\n            />\n          </figure>\n        )}\n\n        {this.type === 'mb' && (\n          <figure class={`dropi-ilustration__image-mb ${this.state}`}>\n            {['success', 'error', 'info', 'warning'].includes(this.state) && (\n              <dropi-icon\n                name={this.getIconName(this.state)}\n                iconWidth=\"24px\"\n                iconHeight=\"24px\"\n                color=\"Neutral-White\"\n              />\n            )}\n          </figure>\n        )}\n\n        {this.type === 'insignia' && (\n          <figure class={this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia'}>\n            <img src={this.insigniaIcons[this.stateInsignia]} alt={this.stateInsignia} />\n            {this.tagProduct && (\n              <p class={`tag tag--${this.stateInsignia}`}>\n                <span class=\"Caption-S\">\n                  {this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1)}\n                </span>\n              </p>\n            )}\n          </figure>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-ilustration-icon.entry.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,MAAM,CAAC,q9CAAq9C,CAAC;;MCmBh/C,oBAAoB,GAAA,MAAA;;;;;IAEvB,IAAI,GAAoB,OAAO;;IAE/B,KAAK,GAAqB,SAAS;;IAEnC,aAAa,GAAkB,UAAU;;IAEzC,UAAU,GAAY,KAAK;;IAE3B,QAAQ,GAAW,kDAAkD;AAE7E,IAAA,IAAY,aAAa,GAAA;QACvB,OAAO;AACL,YAAA,QAAQ,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAA,iBAAA,CAAmB;AAC7C,YAAA,OAAO,EAAG,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAA,gBAAA,CAAkB;AAC5C,YAAA,SAAS,EAAC,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAA,cAAA,CAAgB;SAC3C;;AAGK,IAAA,WAAW,CAAC,KAAa,EAAA;AAC/B,QAAA,MAAM,GAAG,GAA2B;AAClC,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAI,cAAc;AACvB,YAAA,IAAI,EAAK,oBAAoB;AAC7B,YAAA,OAAO,EAAE,oBAAoB;SAC9B;AACD,QAAA,OAAO,GAAG,CAAC,KAAK,CAAC,IAAI,oBAAoB;;IAG3C,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC3B,IAAI,CAAC,IAAI,KAAK,OAAO,KACpB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,0BAA0B,EAAA,EACtC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAA,CAAA,EAAI,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,MAAM,IAAI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAA,IAAA,CAAM,EAC5I,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,EAC5B,OAAO,EAAE,CAAC,CAAC,KAAI,EAAI,CAAC,CAAC,MAA2B,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAA,YAAA,CAAc,CAAC,EAAE,EAAA,CACxF,CACK,CACV,EAEA,IAAI,CAAC,IAAI,KAAK,IAAI,KACjB,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,CAAA,4BAAA,EAA+B,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EACvD,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAC3D,CAAA,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EAClC,SAAS,EAAC,MAAM,EAChB,UAAU,EAAC,MAAM,EACjB,KAAK,EAAC,eAAe,EAAA,CACrB,CACH,CACM,CACV,EAEA,IAAI,CAAC,IAAI,KAAK,UAAU,KACvB,+DAAQ,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,gCAAgC,GAAG,4BAA4B,EAAA,EAC9F,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,CAAC,CAAC,KAAI,EAAI,CAAC,CAAC,MAA2B,CAAC,GAAG,GAAG,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAA,YAAA,CAAc,CAAC,EAAE,EAAA,CAAI,EACtK,IAAI,CAAC,UAAU,KACd,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAE,YAAY,IAAI,CAAC,aAAa,CAAA,CAAE,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAA,EACpB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CACpE,CACL,CACL,CACM,CACV,CACG;;;;;;;","names":[],"sources":["src/components/dropi-ilustration-icon/dropi-ilustration-icon.css?tag=dropi-ilustration-icon&encapsulation=shadow","src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n.dropi-ilustration {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropi-ilustration__image,\n.dropi-ilustration-insignia {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropi-ilustration__image img {\n  max-width: 100%;\n  height: auto;\n}\n\n.dropi-ilustration__image-mb {\n  width: 60px;\n  height: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  margin: 0;\n}\n\n.dropi-ilustration__image-mb.success {\n  background: var(--Success-Success-500, #22c55e);\n}\n\n.dropi-ilustration__image-mb.error {\n  background: var(--Error-Error-500, #ef4444);\n}\n\n.dropi-ilustration__image-mb.info {\n  background: var(--Info-Info-500, #3b82f6);\n}\n\n.dropi-ilustration__image-mb.warning {\n  background: url('assets/icons/ilustration/bg-warning.svg') no-repeat center;\n  background-size: contain;\n  border-radius: 0;\n}\n\n.dropi-ilustration-insignia-tag {\n  display: flex;\n  align-items: center;\n  margin: 0;\n}\n\n.dropi-ilustration-insignia-tag img {\n  position: relative;\n  z-index: 2;\n  height: 32px;\n  width: auto;\n}\n\n.tag {\n  border-radius: 32px;\n  color: var(--Neutral-White, #ffffff);\n  text-transform: capitalize;\n  margin: 0 0 0 -20px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n.tag span {\n  color: var(--Neutral-White, #ffffff);\n  padding: 4px 8px 4px 18px;\n  font-size: var(--font-size-xxs);\n}\n\n.tag--verified {\n  background: linear-gradient(90deg, #ffc10d 41.3%, #ff6102 112.32%);\n}\n\n.tag--premium {\n  background: linear-gradient(90deg, #ff6102 56.52%, #ffc10d 107.25%);\n}\n\n.tag--exclusive {\n  background: linear-gradient(90deg, var(--Gray-900, #0e111a) 26.09%, #ff6102 116.67%);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\nexport type IlustrationType = 'dropi' | 'mb' | 'insignia';\nexport type IlustrationState = 'success' | 'error' | 'warning' | 'info' | 'default' | 'loading' | 'sorry' | 'love';\nexport type InsigniaState = 'verified' | 'premium' | 'exclusive';\n\n/**\n * @component dropi-ilustration-icon\n * Illustration icon with three modes: dropi (SVG asset), mb (colored circle), insignia (badge).\n *\n * @example\n * <dropi-ilustration-icon type=\"dropi\" state=\"success\"></dropi-ilustration-icon>\n * <dropi-ilustration-icon type=\"insignia\" state-insignia=\"premium\" tag-product></dropi-ilustration-icon>\n */\n@Component({\n  tag: 'dropi-ilustration-icon',\n  styleUrl: 'dropi-ilustration-icon.css',\n  shadow: true,\n})\nexport class DropiIlustrationIcon {\n  /** Display mode */\n  @Prop() type: IlustrationType = 'dropi';\n  /** State for dropi/mb types */\n  @Prop() state: IlustrationState = 'default';\n  /** Insignia variant */\n  @Prop() stateInsignia: InsigniaState = 'verified';\n  /** Show insignia as tag with label (for product cards) */\n  @Prop() tagProduct: boolean = false;\n  /** Base path for illustration assets. Override if assets are served from a different location. */\n  @Prop() basePath: string = '/node_modules/@dropi/ui/assets/icons/ilustration';\n\n  private get insigniaIcons(): Record<InsigniaState, string> {\n    return {\n      verified: `${this.basePath}/verified-new.svg`,\n      premium:  `${this.basePath}/premium-new.svg`,\n      exclusive:`${this.basePath}/exclusive.svg`,\n    };\n  }\n\n  private getIconName(state: string): string {\n    const map: Record<string, string> = {\n      success: 'Check-circle',\n      error:   'Cross-circle',\n      info:    'Comment-round_info',\n      warning: 'Comment-round_info',\n    };\n    return map[state] || 'Comment-round_info';\n  }\n\n  render() {\n    return (\n      <div class=\"dropi-ilustration\">\n        {this.type === 'dropi' && (\n          <figure class=\"dropi-ilustration__image\">\n            <img\n              src={`${this.basePath}/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`}\n              alt={this.state ?? 'default'}\n              onError={(e) => { (e.target as HTMLImageElement).src = `${this.basePath}/default.svg`; }}\n            />\n          </figure>\n        )}\n\n        {this.type === 'mb' && (\n          <figure class={`dropi-ilustration__image-mb ${this.state}`}>\n            {['success', 'error', 'info', 'warning'].includes(this.state) && (\n              <dropi-icon\n                name={this.getIconName(this.state)}\n                iconWidth=\"24px\"\n                iconHeight=\"24px\"\n                color=\"Neutral-White\"\n              />\n            )}\n          </figure>\n        )}\n\n        {this.type === 'insignia' && (\n          <figure class={this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia'}>\n            <img src={this.insigniaIcons[this.stateInsignia]} alt={this.stateInsignia} onError={(e) => { (e.target as HTMLImageElement).src = `${this.basePath}/default.svg`; }} />\n            {this.tagProduct && (\n              <p class={`tag tag--${this.stateInsignia}`}>\n                <span class=\"Caption-S\">\n                  {this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1)}\n                </span>\n              </p>\n            )}\n          </figure>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
 
 const dropiImageMiniatureCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.miniature__label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:var(--Size-2, 8px)}.miniature__grid{display:flex;flex-wrap:wrap;gap:var(--Size-2, 8px)}.miniature__item{position:relative;border-radius:var(--Border-2, 8px);overflow:hidden;cursor:pointer;flex-shrink:0}.miniature__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.2s}.miniature__zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);opacity:0;transition:opacity 0.2s}.miniature__item:hover img{transform:scale(1.05)}.miniature__item:hover .miniature__zoom{opacity:1}`;
 
@@ -34,7 +34,7 @@ const DropiImageMiniature = class {
     }
     render() {
         const imgs = this.parsedImages;
-        return (h("div", { key: 'aefd44eab41f586a8a5bf4bbc1675b6c9cc67124', class: "miniature" }, this.label && h("span", { key: 'f61ea53ad1dfa354a93781877e0f02c120e0f445', class: "miniature__label" }, this.label), h("div", { key: 'fbde49689bed4e93c63cab97e787e6d877a7fcb2', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Neutral-White" }))))))));
+        return (h("div", { key: 'ffb7d494f423b04f5fe0a579489d9efb2226316a', class: "miniature" }, this.label && h("span", { key: 'fcc751f9aa7e9c7ae661da0edd88416a6664a327', class: "miniature__label" }, this.label), h("div", { key: '3b55211d9ea59589841fc91138cb73737aa04287', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Neutral-White" }))))))));
     }
 };
 DropiImageMiniature.style = dropiImageMiniatureCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
 
 const dropiImageOverlayCss = () => `:host{display:block}.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);display:flex;justify-content:center;align-items:center;z-index:9999;animation:fade-in 0.3s ease-out}.overlay__close{position:absolute;top:24px;right:24px;background:rgba(255, 255, 255, 0.1);border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10010;transition:background 0.15s}.overlay__close:hover{background:rgba(255, 255, 255, 0.2)}.overlay__body{display:flex;width:90%;height:80%;max-width:1200px;gap:32px;align-items:center}.overlay__body--single{justify-content:center}.overlay__thumbs{display:flex;flex-direction:column;gap:12px;height:100%;overflow-y:auto;padding-right:8px;width:100px;flex-shrink:0}.overlay__thumbs::-webkit-scrollbar{width:4px}.overlay__thumbs::-webkit-scrollbar-thumb{background:var(--Gray-Gray-600);border-radius:4px}.overlay__thumb-box{width:80px;height:80px;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;flex-shrink:0;transition:border-color 0.2s}.overlay__thumb-box--active{border-color:var(--Primary-Primary-500, #f49a3d)}.overlay__thumb-img{width:100%;height:100%;object-fit:cover}.overlay__content{flex:1;height:100%;position:relative;display:flex;justify-content:center;align-items:center}.overlay__main-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.5);animation:scale-up 0.3s ease-out}.overlay__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255, 255, 255, 0.1);border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s;z-index:5}.overlay__nav:hover{background:rgba(255, 255, 255, 0.2)}.overlay__nav--prev{left:-24px}.overlay__nav--next{right:-24px;background:var(--Neutral-White)}.overlay__nav--next:hover{background:var(--Neutral-White)}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes scale-up{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
 
 const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:50%;left:12px;transform:translateY(-50%);z-index:1;display:flex;align-items:center;justify-content:center}.icon-input-password{position:absolute;top:50%;right:13px;transform:translateY(-50%);cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:40px}.input-container--has-icon label.label-bottom{left:40px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
 
@@ -20,9 +20,9 @@ const DropiInput = class {
     internals;
     // ── Identification ──────────────────────────────────────────
     /** Input id. Defaults to label label. */
-    inputId = '';
+    inputId;
     /** Name attribute for native form submission */
-    name = '';
+    name;
     // ── Content ─────────────────────────────────────────────────
     /** Floating or fixed label text */
     label = '';
@@ -56,6 +56,8 @@ const DropiInput = class {
     allowDecimals = false;
     /** Only allow letter characters */
     isLettersOnly = false;
+    /** HTML autocomplete attribute value */
+    autocomplete = 'on';
     // ── Icon ────────────────────────────────────────────────────
     /** Icon name shown inside the input (only visible when value is not empty) */
     icon = '';
@@ -212,7 +214,7 @@ const DropiInput = class {
     }
     // ── Computed ─────────────────────────────────────────────────
     get resolvedId() {
-        return this.inputId || this.label;
+        return this.inputId || this.name;
     }
     get inputType() {
         if (this.passwordInput)
@@ -233,14 +235,14 @@ const DropiInput = class {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (h("div", { key: '6af757e1d86bfe96d471e9cbed258a50727ae190', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: 'e88bf81fd2b79933e386c2e5fa38f57d85cfe836', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: 'be8ec1b0d3ef624ca22e58ae072917ad2ecc79fb', class: "asterisk" }, " *"))), h("div", { key: '4806c0d250f00bb08788d9d6aa935ca15f2aa826', class: "form-group" }, h("div", { key: 'b9fa243d299bcd165458947d6695fcc845764276', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '92b3cf11803745784f13e908ea88992f76c74473', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: 'c7dc725d577a6d4afb7f87c8b53b16c621de9e86', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '8146ae1794cbe1f200bb681358c7319f10faab3c', id: this.resolvedId, class: {
+        return (h("div", { key: 'a16b56b6be24372be1fc0a16e65d13bfea3dcf0f', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("label", { key: '0030ccbc829d16aa17a954624933106752f972bc', class: "input-label Body-S-Regular", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: 'f1476695b9778aa767e121f5d5ace0e36b4fb9a0', class: "asterisk" }, " *"))), h("div", { key: '1e3dee560139338f206dd4c94fa52e1c248e6da6', class: "form-group" }, h("div", { key: '7c1a2754de046eac9c39a005495fa391a7b7b02e', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: 'e2ba6416f090d563206e3d98e9f3ab76f197df20', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: 'bf2b58fa9cf0d3dbb470fb3bb4466545d4bc6a75', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '51a1de81d4200c79f46b61afef165fdad0ebb061', id: this.resolvedId, class: {
                 'form-control': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
                 'padding-icon': showIconInline,
                 'text-password': this.passwordInput && !this.showPassword,
                 'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '005d15af6b50b2cb2d47ac8381a722794eb273e5', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: 'ad56df877cff3df8a801cdfcb607d9af02f7465a', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '76e858c13a798f69b2d20ee9908f17531568dad1', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: '3e42ffb4db7444ebfb49cc9c6720d5a9d02b2860', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '5e970903eb51ca6b72a43bef0edf6ef149443247', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, autoComplete: this.autocomplete, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '38b78f85551b8c9f6dee1c85e48fa67149f58e29', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: 'd23e87d325e6c051c04a0eb0671a53d8cec05b41', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '84e228278687d583ffa056c4540da63356aeaa1f', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: 'f26a6e681a262c2f348412e4bf9055e417e76261', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '9e0376883c4727d84aec3f4c7da7d76196639740', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));

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

@@ -1 +1 @@
-{"file":"dropi-input.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-input/dropi-input.css?tag=dropi-input&encapsulation=shadow","src/components/dropi-input/dropi-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/* ── Fixed label layout ────────────────────────────────────── */\n.fixed-label-container {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n}\n\n.input-label {\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-regular, 400);\n  text-align: left;\n}\n\n.asterisk {\n  color: var(--Error-Error-500, #f46a6b);\n}\n\n/* ── Form group / container ────────────────────────────────── */\n.form-group {\n  position: relative;\n  width: 100%;\n}\n\n.input-container {\n  position: relative;\n}\n\n/* ── Icons ─────────────────────────────────────────────────── */\n.icon-input {\n  position: absolute;\n  top: 50%;\n  left: 12px;\n  transform: translateY(-50%);\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.icon-input-password {\n  position: absolute;\n  top: 50%;\n  right: 13px;\n  transform: translateY(-50%);\n  cursor: pointer;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* ── Base input ─────────────────────────────────────────────── */\n.form-control {\n  box-sizing: border-box;\n  width: 100%;\n  padding: var(--Size-2, 8px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d);\n  transition: border-color 0.3s ease-in-out;\n  height: 40px;\n  outline: none;\n  appearance: none;\n  text-align: left;\n}\n\n.form-control::placeholder {\n  color: transparent;\n  transition: color 0.2s ease-in-out;\n}\n\n/* Show placeholder only on focus or in fixedLabel mode */\n.form-control:focus::placeholder,\n.fixed-label-input::placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.form-control:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n.form-control-valid {\n  border-color: var(--Gray-Gray-400, #858ea6) !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control-invalid {\n  border-color: var(--Error-Error-500, #f46a6b) !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control:disabled {\n  border-color: var(--Gray-Gray-200, #c3c9d9) !important;\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: not-allowed;\n}\n\n.padding-icon {\n  padding-left: 40px;\n}\n\n/* When icon is always visible, shift the floating label right to avoid overlap */\n.input-container--has-icon label.label-bottom {\n  left: 40px;\n}\n\n/* When focused or has value, float up to left: 0 regardless */\n.input-container--has-icon .form-control:focus + label.label-bottom,\n.input-container--has-icon .form-control:not(:placeholder-shown) + label.label-bottom {\n  left: 0;\n}\n\n/* Password: hide characters via CSS (no type=password needed for font trick) */\n.text-password {\n  -webkit-text-security: disc;\n  text-security: disc;\n}\n\n/* ── Floating label ─────────────────────────────────────────── */\nlabel.label-bottom {\n  position: absolute;\n  font-weight: var(--font-weight-regular, 400);\n  top: 10px;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-500, #69738c);\n  left: 10px;\n  transition: all 0.2s ease-in-out;\n  pointer-events: none;\n  overflow: hidden;\n  width: 90%;\n  white-space: nowrap;\n}\n\n/* Float up when focused or has value */\n.form-control:focus+label.label-bottom,\n.form-control:not(:placeholder-shown)+label.label-bottom {\n  top: -22px;\n  left: 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  width: unset;\n}\n\n.form-control:disabled+label.label-bottom {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n/* ── Helper text ────────────────────────────────────────────── */\n.form-control-helper {\n  display: flex;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  gap: 4px;\n  align-items: center;\n  margin-top: 4px;\n}\n\n.form-control-helper span {\n  display: block;\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-xs, 10px);\n}\n\n.invalid-color {\n  color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.disabled-helper {\n  color: var(--Gray-Gray-400, #858ea6) !important;\n}\n\n.disabled-helper {\n  color: var(--Gray-Gray-400, #858ea6) !important;\n}","import { Component, Prop, State, Event, EventEmitter, AttachInternals, Watch, h } from '@stencil/core';\n\nexport type InputMode = 'text' | 'numeric' | 'decimal' | 'tel' | 'email' | 'url' | 'search';\n\n/**\n * @component dropi-input\n * Text input with floating label, validation states, password toggle,\n * number/letter restrictions, thousand separator, and native form association.\n *\n * ## Form usage (native HTML form)\n * ```html\n * <form>\n *   <dropi-input name=\"email\" label=\"Email\" required></dropi-input>\n * </form>\n * ```\n *\n * ## Controlled usage (React / Vue / Angular)\n * Pass `value` and listen to `dropiInput` to update.\n */\n@Component({\n  tag: 'dropi-input',\n  styleUrl: 'dropi-input.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiInput {\n  @AttachInternals() internals: ElementInternals;\n\n  // ── Identification ──────────────────────────────────────────\n  /** Input id. Defaults to label label. */\n  @Prop({ mutable: true }) inputId: string = '';\n  /** Name attribute for native form submission */\n  @Prop({ reflect: true }) name: string = '';\n\n  // ── Content ─────────────────────────────────────────────────\n  /** Floating or fixed label text */\n  @Prop({ mutable: true }) label: string = '';\n  /** Placeholder text (visible in fixedLabel mode or on focus) */\n  @Prop({ mutable: true }) placeholder: string = ' ';\n  /** Current value (controlled) */\n  @Prop({ mutable: true }) value: string = '';\n  /** Max character length */\n  @Prop({ mutable: true }) maxLength: number;\n\n  // ── Behavior ────────────────────────────────────────────────\n  /** Disable the input */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Mark as required (shows asterisk when showObligatoryAsterisk is true) */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Show the required asterisk on the label */\n  @Prop({ mutable: true }) showObligatoryAsterisk: boolean = true;\n  /** Show label above the input (fixed), instead of floating inside */\n  @Prop() fixedLabel: boolean = false;\n  /** Keyboard input mode hint */\n  @Prop({ mutable: true }) inputMode: InputMode = 'text';\n\n  // ── Input type modifiers ────────────────────────────────────\n  /** Show password visibility toggle (renders as password field) */\n  @Prop({ mutable: true }) passwordInput: boolean = false;\n  /** Apply thousand separator formatting (e.g. 1,000,000) */\n  @Prop({ mutable: true }) isMoneyInput: boolean = false;\n  /** Apply thousand separator without currency symbol */\n  @Prop({ mutable: true }) isThousandSeparator: boolean = false;\n  /** Only allow numeric characters */\n  @Prop({ mutable: true }) isNumericInput: boolean = false;\n  /** Allow decimal point when isNumericInput is true */\n  @Prop({ mutable: true }) allowDecimals: boolean = false;\n  /** Only allow letter characters */\n  @Prop({ mutable: true }) isLettersOnly: boolean = false;\n\n  // ── Icon ────────────────────────────────────────────────────\n  /** Icon name shown inside the input (only visible when value is not empty) */\n  @Prop({ mutable: true }) icon: string = '';\n  /** Color token for the icon */\n  @Prop({ mutable: true }) iconColor: string = 'Gray-Gray-400';\n\n  // ── Validation ──────────────────────────────────────────────\n  /** Mark the field as invalid (consumer-controlled) */\n  @Prop({ mutable: true }) hasError: boolean = false;\n  /** Helper / error text shown below the field */\n  @Prop({ mutable: true }) textHelper: string = '';\n  /** Only show textHelper when the field is invalid */\n  @Prop({ mutable: true }) showHelperOnlyOnError: boolean = false;\n\n  // ── Angular-parity ──────────────────────────────────────────\n  /**\n   * Convenience object prop — matches Angular `inputProperties: InputProperties`.\n   * Fields: id, label, placeholder, maxLength, textHelper, passwordInput,\n   * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,\n   * allowDecimals, isThousandSeparator, showHelperOnlyOnError,\n   * isLettersOnly, inputMode.\n   * Note: `formControl` is not supported; use `value` + onInput event instead.\n   */\n  @Prop() inputProperties: any = null;\n\n  // ── Internal state ──────────────────────────────────────────\n  @State() private showPassword: boolean = false;\n  @State() private touched: boolean = false;\n\n  // ── Events ──────────────────────────────────────────────────\n  /** Emitted on every keystroke with the current value */\n  @Event() dropiInput: EventEmitter<string>;\n  /** Emitted on blur with the final value */\n  @Event() dropiChange: EventEmitter<string>;\n  /** Emitted on focus */\n  @Event() dropiFocus: EventEmitter<void>;\n  /** Emitted on blur */\n  @Event() dropiBlur: EventEmitter<void>;\n\n  @Watch('inputProperties')\n  inputPropertiesChanged(val: any) {\n    if (!val) return;\n    if (val.id !== undefined) this.inputId = val.id;\n    if (val.inputId !== undefined) this.inputId = val.inputId;\n    if (val.label !== undefined) this.label = val.label;\n    if (val.placeholder !== undefined) this.placeholder = val.placeholder;\n    if (val.maxLength !== undefined) this.maxLength = val.maxLength;\n    if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n    if (val.passwordInput !== undefined) this.passwordInput = val.passwordInput;\n    if (val.isPasswordInput !== undefined) this.passwordInput = val.isPasswordInput; // Fallback\n    if (val.icon !== undefined) this.icon = val.icon;\n    if (val.iconColor !== undefined) this.iconColor = val.iconColor;\n    if (val.isMoneyInput !== undefined) this.isMoneyInput = val.isMoneyInput;\n    if (val.showObligatoryAsterisk !== undefined) this.showObligatoryAsterisk = val.showObligatoryAsterisk;\n    if (val.isNumericInput !== undefined) this.isNumericInput = val.isNumericInput;\n    if (val.allowDecimals !== undefined) this.allowDecimals = val.allowDecimals;\n    if (val.isThousandSeparator !== undefined) this.isThousandSeparator = val.isThousandSeparator;\n    if (val.showHelperOnlyOnError !== undefined) this.showHelperOnlyOnError = val.showHelperOnlyOnError;\n    if (val.isLettersOnly !== undefined) this.isLettersOnly = val.isLettersOnly;\n    if (val.inputMode !== undefined) this.inputMode = val.inputMode;\n  }\n\n  @Watch('value')\n  valueChanged(val: string) {\n    this.internals.setFormValue(val);\n  }\n\n  @Watch('disabled')\n  disabledChanged(val: boolean) {\n    this.internals.setValidity(val ? { customError: true } : {}, val ? 'Field is disabled' : '');\n  }\n\n  componentWillLoad() {\n    this.internals.setFormValue(this.value ?? '');\n    if (this.inputProperties) this.inputPropertiesChanged(this.inputProperties);\n  }\n\n  // ── Handlers ────────────────────────────────────────────────\n\n  private handleInput(e: InputEvent) {\n    let val = (e.target as HTMLInputElement).value;\n\n    if (this.isNumericInput) val = this.filterNumbers(val);\n    if (this.isLettersOnly) val = this.filterLetters(val);\n    if (this.isMoneyInput || this.isThousandSeparator) val = this.formatThousands(val, this.isMoneyInput);\n\n    this.value = val;\n    this.internals.setFormValue(val);\n    this.dropiInput.emit(val);\n    this.dropiChange.emit(val);\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {\n      e.preventDefault();\n    }\n    if (this.isLettersOnly && !this.isAllowedLetterKey(e)) {\n      e.preventDefault();\n    }\n  }\n\n  private handleFocus() {\n    this.dropiFocus.emit();\n  }\n\n  private handleBlur() {\n    this.touched = true;\n    this.dropiBlur.emit();\n  }\n\n  private togglePassword() {\n    if (this.disabled) return;\n    this.showPassword = !this.showPassword;\n  }\n\n  // ── Helpers ─────────────────────────────────────────────────\n\n  private filterNumbers(val: string): string {\n    const pattern = this.allowDecimals ? /[^0-9.]/g : /[^0-9]/g;\n    return val.replace(pattern, '');\n  }\n\n  private filterLetters(val: string): string {\n    return val.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\\s]/g, '');\n  }\n\n  private isAllowedNumberKey(e: KeyboardEvent): boolean {\n    const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'];\n    if (allowed.includes(e.key)) return true;\n    if (e.ctrlKey || e.metaKey) return true; // copy/paste/select-all\n    if (/^[0-9]$/.test(e.key)) return true;\n    if (this.allowDecimals && e.key === '.') return true;\n    return false;\n  }\n\n  private isAllowedLetterKey(e: KeyboardEvent): boolean {\n    const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End', ' '];\n    if (allowed.includes(e.key)) return true;\n    if (e.ctrlKey || e.metaKey) return true;\n    return /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key);\n  }\n\n  private formatThousands(val: string, withCurrency: boolean): string {\n    const raw = val.replace(/[^0-9.]/g, '');\n    const [integer, decimal] = raw.split('.');\n    const formatted = integer.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n    const result = decimal !== undefined ? `${formatted}.${decimal}` : formatted;\n    return withCurrency ? `$${result}` : result;\n  }\n\n  // ── Computed ─────────────────────────────────────────────────\n\n  private get resolvedId(): string {\n    return this.inputId || this.label;\n  }\n\n  private get inputType(): string {\n    if (this.passwordInput) return this.showPassword ? 'text' : 'password';\n    return 'text';\n  }\n\n  private get showHelper(): boolean {\n    if (!this.textHelper) return false;\n    if (this.showHelperOnlyOnError) return this.hasError && this.touched;\n    return true;\n  }\n\n  private get isInvalid(): boolean {\n    return this.hasError && this.touched;\n  }\n\n  // ── Render ───────────────────────────────────────────────────\n\n  render() {\n    const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;\n    const showIconInline = !!this.icon;\n\n    return (\n      <div class={{ 'fixed-label-container': this.fixedLabel }}>\n        {/* Fixed label above input */}\n        {this.fixedLabel && (\n          <div class=\"input-label Body-S-Regular\">\n            {this.label}\n            {showObligatoryAsterisk && <span class=\"asterisk\"> *</span>}\n          </div>\n        )}\n\n        <div class=\"form-group\">\n          <div class={{ 'input-container': true, 'input-container--has-icon': showIconInline }}>\n            {/* Inline icon (left) */}\n            {showIconInline && (\n              <dropi-icon\n                class=\"icon-input\"\n                name={this.icon}\n                color={this.iconColor}\n                iconWidth=\"20px\"\n                iconHeight=\"20px\"\n                style={{ width: '20px', height: '20px' }}\n              />\n            )}\n\n            {/* Password toggle (right) */}\n            {this.passwordInput && (\n              <dropi-icon\n                class=\"icon-input-password\"\n                name={this.showPassword ? 'Eye' : 'Eye-crossed'}\n                iconWidth=\"20px\"\n                iconHeight=\"20px\"\n                style={{ width: '20px', height: '20px' }}\n                color=\"Gray-Gray-500\"\n                onClick={() => this.togglePassword()}\n              />\n            )}\n\n            {/* Native input */}\n            <input\n              id={this.resolvedId}\n              class={{\n                'form-control': true,\n                'form-control-valid': !this.isInvalid && this.touched && !!this.value,\n                'form-control-invalid': this.isInvalid,\n                'padding-icon': showIconInline,\n                'text-password': this.passwordInput && !this.showPassword,\n                'fixed-label-input': this.fixedLabel,\n              }}\n              type={this.inputType}\n              value={this.value}\n              placeholder={this.fixedLabel ? this.placeholder : ' '}\n              disabled={this.disabled}\n              required={this.required}\n              maxLength={this.maxLength}\n              inputMode={this.inputMode}\n              data-cy={undefined}\n              onInput={e => this.handleInput(e as InputEvent)}\n              onKeyDown={e => this.handleKeyDown(e as KeyboardEvent)}\n              onFocus={() => this.handleFocus()}\n              onBlur={() => this.handleBlur()}\n            />\n\n            {/* Floating label (only when not fixedLabel) */}\n            {!this.fixedLabel && (\n              <label class=\"Body-S-Regular label-bottom\" htmlFor={this.resolvedId}>\n                {this.label}\n                {showObligatoryAsterisk && <span class=\"asterisk\"> *</span>}\n              </label>\n            )}\n\n            {/* Helper / error text */}\n            {this.showHelper && (\n              <div class=\"form-control-helper\">\n                {this.isInvalid && <dropi-icon name=\"Warning-circle\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Error-Error-500\" />}\n                <span\n                  class={{\n                    'disabled-helper': this.disabled,\n                    'invalid-color': this.isInvalid,\n                  }}\n                >\n                  {this.textHelper}\n                </span>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-input.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-input/dropi-input.css?tag=dropi-input&encapsulation=shadow","src/components/dropi-input/dropi-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/* ── Fixed label layout ────────────────────────────────────── */\n.fixed-label-container {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 8px;\n}\n\n.input-label {\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-xs, 10px);\n  font-weight: var(--font-weight-regular, 400);\n  text-align: left;\n}\n\n.asterisk {\n  color: var(--Error-Error-500, #f46a6b);\n}\n\n/* ── Form group / container ────────────────────────────────── */\n.form-group {\n  position: relative;\n  width: 100%;\n}\n\n.input-container {\n  position: relative;\n}\n\n/* ── Icons ─────────────────────────────────────────────────── */\n.icon-input {\n  position: absolute;\n  top: 50%;\n  left: 12px;\n  transform: translateY(-50%);\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.icon-input-password {\n  position: absolute;\n  top: 50%;\n  right: 13px;\n  transform: translateY(-50%);\n  cursor: pointer;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* ── Base input ─────────────────────────────────────────────── */\n.form-control {\n  box-sizing: border-box;\n  width: 100%;\n  padding: var(--Size-2, 8px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d);\n  transition: border-color 0.3s ease-in-out;\n  height: 40px;\n  outline: none;\n  appearance: none;\n  text-align: left;\n}\n\n.form-control::placeholder {\n  color: transparent;\n  transition: color 0.2s ease-in-out;\n}\n\n/* Show placeholder only on focus or in fixedLabel mode */\n.form-control:focus::placeholder,\n.fixed-label-input::placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.form-control:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n}\n\n.form-control-valid {\n  border-color: var(--Gray-Gray-400, #858ea6) !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control-invalid {\n  border-color: var(--Error-Error-500, #f46a6b) !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control:disabled {\n  border-color: var(--Gray-Gray-200, #c3c9d9) !important;\n  color: var(--Gray-Gray-400, #858ea6);\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  cursor: not-allowed;\n}\n\n.padding-icon {\n  padding-left: 40px;\n}\n\n/* When icon is always visible, shift the floating label right to avoid overlap */\n.input-container--has-icon label.label-bottom {\n  left: 40px;\n}\n\n/* When focused or has value, float up to left: 0 regardless */\n.input-container--has-icon .form-control:focus + label.label-bottom,\n.input-container--has-icon .form-control:not(:placeholder-shown) + label.label-bottom {\n  left: 0;\n}\n\n/* Password: hide characters via CSS (no type=password needed for font trick) */\n.text-password {\n  -webkit-text-security: disc;\n  text-security: disc;\n}\n\n/* ── Floating label ─────────────────────────────────────────── */\nlabel.label-bottom {\n  position: absolute;\n  font-weight: var(--font-weight-regular, 400);\n  top: 10px;\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-500, #69738c);\n  left: 10px;\n  transition: all 0.2s ease-in-out;\n  pointer-events: none;\n  overflow: hidden;\n  width: 90%;\n  white-space: nowrap;\n}\n\n/* Float up when focused or has value */\n.form-control:focus+label.label-bottom,\n.form-control:not(:placeholder-shown)+label.label-bottom {\n  top: -22px;\n  left: 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-600, #475066);\n  width: unset;\n}\n\n.form-control:disabled+label.label-bottom {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n/* ── Helper text ────────────────────────────────────────────── */\n.form-control-helper {\n  display: flex;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  gap: 4px;\n  align-items: center;\n  margin-top: 4px;\n}\n\n.form-control-helper span {\n  display: block;\n  color: var(--Gray-Gray-600, #475066);\n  font-size: var(--font-size-xs, 10px);\n}\n\n.invalid-color {\n  color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.disabled-helper {\n  color: var(--Gray-Gray-400, #858ea6) !important;\n}\n\n.disabled-helper {\n  color: var(--Gray-Gray-400, #858ea6) !important;\n}","import { Component, Prop, State, Event, EventEmitter, AttachInternals, Watch, h } from '@stencil/core';\n\nexport type InputMode = 'text' | 'numeric' | 'decimal' | 'tel' | 'email' | 'url' | 'search';\n\n/**\n * @component dropi-input\n * Text input with floating label, validation states, password toggle,\n * number/letter restrictions, thousand separator, and native form association.\n *\n * ## Form usage (native HTML form)\n * ```html\n * <form>\n *   <dropi-input name=\"email\" label=\"Email\" required></dropi-input>\n * </form>\n * ```\n *\n * ## Controlled usage (React / Vue / Angular)\n * Pass `value` and listen to `dropiInput` to update.\n */\n@Component({\n  tag: 'dropi-input',\n  styleUrl: 'dropi-input.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiInput {\n  @AttachInternals() internals: ElementInternals;\n\n  // ── Identification ──────────────────────────────────────────\n  /** Input id. Defaults to label label. */\n  @Prop({ mutable: true }) inputId!: string;\n  /** Name attribute for native form submission */\n  @Prop({ reflect: true }) name!: string;\n\n  // ── Content ─────────────────────────────────────────────────\n  /** Floating or fixed label text */\n  @Prop({ mutable: true }) label: string = '';\n  /** Placeholder text (visible in fixedLabel mode or on focus) */\n  @Prop({ mutable: true }) placeholder: string = ' ';\n  /** Current value (controlled) */\n  @Prop({ mutable: true }) value: string = '';\n  /** Max character length */\n  @Prop({ mutable: true }) maxLength: number;\n\n  // ── Behavior ────────────────────────────────────────────────\n  /** Disable the input */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Mark as required (shows asterisk when showObligatoryAsterisk is true) */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Show the required asterisk on the label */\n  @Prop({ mutable: true }) showObligatoryAsterisk: boolean = true;\n  /** Show label above the input (fixed), instead of floating inside */\n  @Prop() fixedLabel: boolean = false;\n  /** Keyboard input mode hint */\n  @Prop({ mutable: true }) inputMode: InputMode = 'text';\n\n  // ── Input type modifiers ────────────────────────────────────\n  /** Show password visibility toggle (renders as password field) */\n  @Prop({ mutable: true }) passwordInput: boolean = false;\n  /** Apply thousand separator formatting (e.g. 1,000,000) */\n  @Prop({ mutable: true }) isMoneyInput: boolean = false;\n  /** Apply thousand separator without currency symbol */\n  @Prop({ mutable: true }) isThousandSeparator: boolean = false;\n  /** Only allow numeric characters */\n  @Prop({ mutable: true }) isNumericInput: boolean = false;\n  /** Allow decimal point when isNumericInput is true */\n  @Prop({ mutable: true }) allowDecimals: boolean = false;\n  /** Only allow letter characters */\n  @Prop({ mutable: true }) isLettersOnly: boolean = false;\n  /** HTML autocomplete attribute value */\n  @Prop() autocomplete: string = 'on';\n\n  // ── Icon ────────────────────────────────────────────────────\n  /** Icon name shown inside the input (only visible when value is not empty) */\n  @Prop({ mutable: true }) icon: string = '';\n  /** Color token for the icon */\n  @Prop({ mutable: true }) iconColor: string = 'Gray-Gray-400';\n\n  // ── Validation ──────────────────────────────────────────────\n  /** Mark the field as invalid (consumer-controlled) */\n  @Prop({ mutable: true }) hasError: boolean = false;\n  /** Helper / error text shown below the field */\n  @Prop({ mutable: true }) textHelper: string = '';\n  /** Only show textHelper when the field is invalid */\n  @Prop({ mutable: true }) showHelperOnlyOnError: boolean = false;\n\n  // ── Angular-parity ──────────────────────────────────────────\n  /**\n   * Convenience object prop — matches Angular `inputProperties: InputProperties`.\n   * Fields: id, label, placeholder, maxLength, textHelper, passwordInput,\n   * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,\n   * allowDecimals, isThousandSeparator, showHelperOnlyOnError,\n   * isLettersOnly, inputMode.\n   * Note: `formControl` is not supported; use `value` + onInput event instead.\n   */\n  @Prop() inputProperties: any = null;\n\n  // ── Internal state ──────────────────────────────────────────\n  @State() private showPassword: boolean = false;\n  @State() private touched: boolean = false;\n\n  // ── Events ──────────────────────────────────────────────────\n  /** Emitted on every keystroke with the current value */\n  @Event() dropiInput: EventEmitter<string>;\n  /** Emitted on blur with the final value */\n  @Event() dropiChange: EventEmitter<string>;\n  /** Emitted on focus */\n  @Event() dropiFocus: EventEmitter<void>;\n  /** Emitted on blur */\n  @Event() dropiBlur: EventEmitter<void>;\n\n  @Watch('inputProperties')\n  inputPropertiesChanged(val: any) {\n    if (!val) return;\n    if (val.id !== undefined) this.inputId = val.id;\n    if (val.inputId !== undefined) this.inputId = val.inputId;\n    if (val.label !== undefined) this.label = val.label;\n    if (val.placeholder !== undefined) this.placeholder = val.placeholder;\n    if (val.maxLength !== undefined) this.maxLength = val.maxLength;\n    if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n    if (val.passwordInput !== undefined) this.passwordInput = val.passwordInput;\n    if (val.isPasswordInput !== undefined) this.passwordInput = val.isPasswordInput; // Fallback\n    if (val.icon !== undefined) this.icon = val.icon;\n    if (val.iconColor !== undefined) this.iconColor = val.iconColor;\n    if (val.isMoneyInput !== undefined) this.isMoneyInput = val.isMoneyInput;\n    if (val.showObligatoryAsterisk !== undefined) this.showObligatoryAsterisk = val.showObligatoryAsterisk;\n    if (val.isNumericInput !== undefined) this.isNumericInput = val.isNumericInput;\n    if (val.allowDecimals !== undefined) this.allowDecimals = val.allowDecimals;\n    if (val.isThousandSeparator !== undefined) this.isThousandSeparator = val.isThousandSeparator;\n    if (val.showHelperOnlyOnError !== undefined) this.showHelperOnlyOnError = val.showHelperOnlyOnError;\n    if (val.isLettersOnly !== undefined) this.isLettersOnly = val.isLettersOnly;\n    if (val.inputMode !== undefined) this.inputMode = val.inputMode;\n  }\n\n  @Watch('value')\n  valueChanged(val: string) {\n    this.internals.setFormValue(val);\n  }\n\n  @Watch('disabled')\n  disabledChanged(val: boolean) {\n    this.internals.setValidity(val ? { customError: true } : {}, val ? 'Field is disabled' : '');\n  }\n\n  componentWillLoad() {\n    this.internals.setFormValue(this.value ?? '');\n    if (this.inputProperties) this.inputPropertiesChanged(this.inputProperties);\n  }\n\n  // ── Handlers ────────────────────────────────────────────────\n\n  private handleInput(e: InputEvent) {\n    let val = (e.target as HTMLInputElement).value;\n\n    if (this.isNumericInput) val = this.filterNumbers(val);\n    if (this.isLettersOnly) val = this.filterLetters(val);\n    if (this.isMoneyInput || this.isThousandSeparator) val = this.formatThousands(val, this.isMoneyInput);\n\n    this.value = val;\n    this.internals.setFormValue(val);\n    this.dropiInput.emit(val);\n    this.dropiChange.emit(val);\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {\n      e.preventDefault();\n    }\n    if (this.isLettersOnly && !this.isAllowedLetterKey(e)) {\n      e.preventDefault();\n    }\n  }\n\n  private handleFocus() {\n    this.dropiFocus.emit();\n  }\n\n  private handleBlur() {\n    this.touched = true;\n    this.dropiBlur.emit();\n  }\n\n  private togglePassword() {\n    if (this.disabled) return;\n    this.showPassword = !this.showPassword;\n  }\n\n  // ── Helpers ─────────────────────────────────────────────────\n\n  private filterNumbers(val: string): string {\n    const pattern = this.allowDecimals ? /[^0-9.]/g : /[^0-9]/g;\n    return val.replace(pattern, '');\n  }\n\n  private filterLetters(val: string): string {\n    return val.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\\s]/g, '');\n  }\n\n  private isAllowedNumberKey(e: KeyboardEvent): boolean {\n    const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'];\n    if (allowed.includes(e.key)) return true;\n    if (e.ctrlKey || e.metaKey) return true; // copy/paste/select-all\n    if (/^[0-9]$/.test(e.key)) return true;\n    if (this.allowDecimals && e.key === '.') return true;\n    return false;\n  }\n\n  private isAllowedLetterKey(e: KeyboardEvent): boolean {\n    const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End', ' '];\n    if (allowed.includes(e.key)) return true;\n    if (e.ctrlKey || e.metaKey) return true;\n    return /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key);\n  }\n\n  private formatThousands(val: string, withCurrency: boolean): string {\n    const raw = val.replace(/[^0-9.]/g, '');\n    const [integer, decimal] = raw.split('.');\n    const formatted = integer.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n    const result = decimal !== undefined ? `${formatted}.${decimal}` : formatted;\n    return withCurrency ? `$${result}` : result;\n  }\n\n  // ── Computed ─────────────────────────────────────────────────\n\n  private get resolvedId(): string {\n    return this.inputId || this.name;\n  }\n\n  private get inputType(): string {\n    if (this.passwordInput) return this.showPassword ? 'text' : 'password';\n    return 'text';\n  }\n\n  private get showHelper(): boolean {\n    if (!this.textHelper) return false;\n    if (this.showHelperOnlyOnError) return this.hasError && this.touched;\n    return true;\n  }\n\n  private get isInvalid(): boolean {\n    return this.hasError && this.touched;\n  }\n\n  // ── Render ───────────────────────────────────────────────────\n\n  render() {\n    const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;\n    const showIconInline = !!this.icon;\n\n    return (\n      <div class={{ 'fixed-label-container': this.fixedLabel }}>\n        {/* Fixed label above input */}\n        {this.fixedLabel && (\n          <label class=\"input-label Body-S-Regular\" htmlFor={this.resolvedId}>\n            {this.label}\n            {showObligatoryAsterisk && <span class=\"asterisk\"> *</span>}\n          </label>\n        )}\n\n        <div class=\"form-group\">\n          <div class={{ 'input-container': true, 'input-container--has-icon': showIconInline }}>\n            {/* Inline icon (left) */}\n            {showIconInline && (\n              <dropi-icon class=\"icon-input\" name={this.icon} color={this.iconColor} iconWidth=\"20px\" iconHeight=\"20px\" style={{ width: '20px', height: '20px' }} />\n            )}\n\n            {/* Password toggle (right) */}\n            {this.passwordInput && (\n              <dropi-icon\n                class=\"icon-input-password\"\n                name={this.showPassword ? 'Eye' : 'Eye-crossed'}\n                iconWidth=\"20px\"\n                iconHeight=\"20px\"\n                style={{ width: '20px', height: '20px' }}\n                color=\"Gray-Gray-500\"\n                onClick={() => this.togglePassword()}\n              />\n            )}\n\n            {/* Native input */}\n            <input\n              id={this.resolvedId}\n              class={{\n                'form-control': true,\n                'form-control-valid': !this.isInvalid && this.touched && !!this.value,\n                'form-control-invalid': this.isInvalid,\n                'padding-icon': showIconInline,\n                'text-password': this.passwordInput && !this.showPassword,\n                'fixed-label-input': this.fixedLabel,\n              }}\n              type={this.inputType}\n              value={this.value}\n              placeholder={this.fixedLabel ? this.placeholder : ' '}\n              disabled={this.disabled}\n              required={this.required}\n              maxLength={this.maxLength}\n              inputMode={this.inputMode}\n              autoComplete={this.autocomplete}\n              data-cy={undefined}\n              onInput={e => this.handleInput(e as InputEvent)}\n              onKeyDown={e => this.handleKeyDown(e as KeyboardEvent)}\n              onFocus={() => this.handleFocus()}\n              onBlur={() => this.handleBlur()}\n            />\n\n            {/* Floating label (only when not fixedLabel) */}\n            {!this.fixedLabel && (\n              <label class=\"Body-S-Regular label-bottom\" htmlFor={this.resolvedId}>\n                {this.label}\n                {showObligatoryAsterisk && <span class=\"asterisk\"> *</span>}\n              </label>\n            )}\n\n            {/* Helper / error text */}\n            {this.showHelper && (\n              <div class=\"form-control-helper\">\n                {this.isInvalid && <dropi-icon name=\"Warning-circle\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Error-Error-500\" />}\n                <span\n                  class={{\n                    'disabled-helper': this.disabled,\n                    'invalid-color': this.isInvalid,\n                  }}\n                >\n                  {this.textHelper}\n                </span>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
 
 const dropiLanguagesSelectorCss = () => `:host{display:inline-block;position:relative}*,*::before,*::after{box-sizing:border-box}.custom-dropdown{position:relative;cursor:pointer;user-select:none}.custom-dropdown.open dropi-icon{transform:rotate(180deg)}.selected-option{display:flex;height:38px;padding:var(--Size-2, 8px) var(--Size-3, 12px);align-items:center;gap:var(--Size-2, 8px);border-radius:4px;border:1px solid var(--Gray-Gray-200, #c3c9d9);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options{position:absolute;top:100%;left:0;right:0;background:white;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:6px;margin-top:4px;z-index:1000;overflow-y:auto;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);padding:0;list-style:none;height:0;opacity:0;visibility:hidden;transition:height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;max-height:0}.dropdown-options.dropdown-open{max-height:300px;height:auto;opacity:1;visibility:visible}.dropdown-options li{padding:8px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options li:hover,.dropdown-options li.active{background:var(--Gray-Gray-50, #f7f8fa)}@media screen and (max-width: 720px){.selected-option span,.dropdown-options li span{display:none}}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, a as getElement, h } from './index-CPacpXAJ.js';
 
 const dropiLogoCss = () => `:host{display:inline-block}.dropi-logo{margin:0;padding:0;display:flex;align-items:center;justify-content:center}.dropi-logo img{display:block;object-fit:contain}.dropi-logo--large img{width:256px;height:84px}.dropi-logo--small img{width:86px;height:81px}`;
 
@@ -27,7 +27,7 @@ const DropiLogo = class {
         e.target.src = FALLBACK_SVG;
     }
     render() {
-        return (h("figure", { key: '2a5ed49bd2ac8592db5b06256ff4e911e26ee6fd', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: 'f0f63e2e5ceb30c24eac3f7f5a3446858b632f90', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
+        return (h("figure", { key: 'ffc84dfe1d9c05aae33977c3f5595da0aa9f464d', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: '629a57526d4e99e5325ab8b684234616ce27f199', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
     }
 };
 DropiLogo.style = dropiLogoCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-CPacpXAJ.js';
 
 const dropiLottieLoaderCss = () => `:host{display:block}.loader-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255, 255, 255, 0.85);z-index:9999}.loader-container{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.lottie-animation{display:flex;align-items:center;justify-content:center;width:300px;height:300px}.lottie-animation lottie-player{display:block;width:300px !important;height:300px !important}.loader-text{display:flex;flex-direction:column;align-items:center;gap:var(--Size-2, 8px);text-align:center}.loader-title{margin:0;font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.loader-message{margin:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-500, #69738c)}`;
 
@@ -9,7 +9,7 @@ const DropiLottieLoader = class {
     /** Show or hide the loader */
     visible = true;
     /** Path to the Lottie JSON animation file */
-    loadingAnimation = '/assets/lottie-files/loading.json';
+    loadingAnimation = '/node_modules/@dropi/ui/assets/lottie-files/loading.json';
     /** Title shown below the animation */
     title = 'Cargando...';
     /** Descriptive message below the title */

package/dist/dropi-ui/dropi-lottie-loader.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-lottie-loader.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,k0BAAk0B,CAAC;;MCW11B,iBAAiB,GAAA,MAAA;;;;;IAEpB,OAAO,GAAY,IAAI;;IAEvB,gBAAgB,GAAW,mCAAmC;;IAE9D,KAAK,GAAW,aAAa;;IAE7B,OAAO,GAAW,8BAA8B;IAExD,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,IAAI;AAE9B,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,eAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAC1B,UAAU,EAAC,aAAa,EACxB,KAAK,EAAC,GAAG,EACT,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,EAC1C,IAAI,EAAA,IAAA,EACJ,QAAQ,SACR,CACE,EACL,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,MAC1B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACrB,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,KAAK,CAAM,EACxD,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,OAAO,CAAK,CACzD,CACP,CACG,CACF;;;;;;;","names":[],"sources":["src/components/dropi-lottie-loader/dropi-lottie-loader.css?tag=dropi-lottie-loader&encapsulation=shadow","src/components/dropi-lottie-loader/dropi-lottie-loader.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.loader-overlay {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.85);\n  z-index: 9999;\n}\n\n.loader-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--Size-4, 16px);\n}\n\n.lottie-animation {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 300px;\n  height: 300px;\n}\n\n.lottie-animation lottie-player {\n  display: block;\n  width: 300px !important;\n  height: 300px !important;\n}\n\n.loader-text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  text-align: center;\n}\n\n.loader-title {\n  margin: 0;\n  font-size: var(--font-size-m, 14px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-700, #32394d);\n}\n\n.loader-message {\n  margin: 0;\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-regular, 400);\n  color: var(--Gray-Gray-500, #69738c);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-lottie-loader\n * Full-screen or inline loading overlay with a Lottie animation.\n */\n@Component({\n  tag: 'dropi-lottie-loader',\n  styleUrl: 'dropi-lottie-loader.css',\n  shadow: true,\n})\nexport class DropiLottieLoader {\n  /** Show or hide the loader */\n  @Prop() visible: boolean = true;\n  /** Path to the Lottie JSON animation file */\n  @Prop() loadingAnimation: string = '/assets/lottie-files/loading.json';\n  /** Title shown below the animation */\n  @Prop() title: string = 'Cargando...';\n  /** Descriptive message below the title */\n  @Prop() message: string = 'Por favor, espere un momento';\n\n  render() {\n    if (!this.visible) return null;\n\n    return (\n      <div class=\"loader-overlay\">\n        <div class=\"loader-container\">\n          <div class=\"lottie-animation\">\n            <lottie-player\n              src={this.loadingAnimation}\n              background=\"transparent\"\n              speed=\"1\"\n              style={{ width: '300px', height: '300px' }}\n              loop\n              autoplay\n            />\n          </div>\n          {(this.title || this.message) && (\n            <div class=\"loader-text\">\n              {this.title && <h3 class=\"loader-title\">{this.title}</h3>}\n              {this.message && <p class=\"loader-message\">{this.message}</p>}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-lottie-loader.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,k0BAAk0B,CAAC;;MCW11B,iBAAiB,GAAA,MAAA;;;;;IAEpB,OAAO,GAAY,IAAI;;IAEvB,gBAAgB,GAAW,0DAA0D;;IAErF,KAAK,GAAW,aAAa;;IAE7B,OAAO,GAAW,8BAA8B;IAExD,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,IAAI;AAE9B,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,eAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAC1B,UAAU,EAAC,aAAa,EACxB,KAAK,EAAC,GAAG,EACT,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,EAC1C,IAAI,EAAA,IAAA,EACJ,QAAQ,SACR,CACE,EACL,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,MAC1B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACrB,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,KAAK,CAAM,EACxD,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,OAAO,CAAK,CACzD,CACP,CACG,CACF;;;;;;;","names":[],"sources":["src/components/dropi-lottie-loader/dropi-lottie-loader.css?tag=dropi-lottie-loader&encapsulation=shadow","src/components/dropi-lottie-loader/dropi-lottie-loader.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.loader-overlay {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.85);\n  z-index: 9999;\n}\n\n.loader-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--Size-4, 16px);\n}\n\n.lottie-animation {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 300px;\n  height: 300px;\n}\n\n.lottie-animation lottie-player {\n  display: block;\n  width: 300px !important;\n  height: 300px !important;\n}\n\n.loader-text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  text-align: center;\n}\n\n.loader-title {\n  margin: 0;\n  font-size: var(--font-size-m, 14px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-700, #32394d);\n}\n\n.loader-message {\n  margin: 0;\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-regular, 400);\n  color: var(--Gray-Gray-500, #69738c);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-lottie-loader\n * Full-screen or inline loading overlay with a Lottie animation.\n */\n@Component({\n  tag: 'dropi-lottie-loader',\n  styleUrl: 'dropi-lottie-loader.css',\n  shadow: true,\n})\nexport class DropiLottieLoader {\n  /** Show or hide the loader */\n  @Prop() visible: boolean = true;\n  /** Path to the Lottie JSON animation file */\n  @Prop() loadingAnimation: string = '/node_modules/@dropi/ui/assets/lottie-files/loading.json';\n  /** Title shown below the animation */\n  @Prop() title: string = 'Cargando...';\n  /** Descriptive message below the title */\n  @Prop() message: string = 'Por favor, espere un momento';\n\n  render() {\n    if (!this.visible) return null;\n\n    return (\n      <div class=\"loader-overlay\">\n        <div class=\"loader-container\">\n          <div class=\"lottie-animation\">\n            <lottie-player\n              src={this.loadingAnimation}\n              background=\"transparent\"\n              speed=\"1\"\n              style={{ width: '300px', height: '300px' }}\n              loop\n              autoplay\n            />\n          </div>\n          {(this.title || this.message) && (\n            <div class=\"loader-text\">\n              {this.title && <h3 class=\"loader-title\">{this.title}</h3>}\n              {this.message && <p class=\"loader-message\">{this.message}</p>}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-CPacpXAJ.js';
 
 const dropiMediaPlayerCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropi-media-player{position:relative;width:100%;max-width:335px;height:auto;aspect-ratio:335 / 567;background-color:var(--Neutral-Black);border-radius:var(--Border-2, 8px);overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}.dropi-media-player--mobile-vertical{max-width:335px;aspect-ratio:335 / 567}.dropi-media-player--mobile-compact{max-width:335px;aspect-ratio:335 / 337}.dropi-media-player--desktop{max-width:587px;aspect-ratio:587 / 567}.dropi-media-player__video{width:100%;height:100%;object-fit:cover}.dropi-media-player__center-play{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:400px;background-color:rgba(14, 17, 26, 0.6);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;transition:opacity 0.3s ease;pointer-events:auto}.dropi-media-player__center-play--hidden{opacity:0;pointer-events:none}.dropi-media-player__controls-bar{position:absolute;bottom:0;left:0;width:100%;height:72px;padding:24px;display:flex;flex-direction:row;align-items:center;gap:10px;background:linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);transition:opacity 0.3s ease;box-sizing:border-box}.dropi-media-player__controls-bar--hidden{opacity:0;pointer-events:none}.dropi-media-player__timestamp{font-family:'Inter', sans-serif;font-size:var(--font-size-xs, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Neutral-White);white-space:nowrap;flex-shrink:0}.dropi-media-player__progress{flex:1;padding:6px 0;cursor:pointer;position:relative}.dropi-media-player__progress-track{position:relative;width:100%;height:5px;border-radius:var(--Border-2, 8px);background-color:var(--Gray-Gray-700, #32394d)}.dropi-media-player__progress-fill{height:100%;background-color:var(--Neutral-White);border-radius:var(--Border-2, 8px);will-change:width}.dropi-media-player__progress-thumb{position:absolute;top:50%;transform:translate(-50%, -50%);width:12px;height:12px;border-radius:50%;background-color:var(--Neutral-White);pointer-events:none;will-change:left}.dropi-media-player__actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.dropi-media-player__btn{-webkit-appearance:none;appearance:none;background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--Neutral-White);transition:opacity 0.15s ease}.dropi-media-player__btn:hover{opacity:0.8}.dropi-media-player__btn--speed{font-family:'Inter', sans-serif;font-size:var(--font-size-sm, 14px);font-weight:var(--font-weight-medium, 500);color:var(--Neutral-White);min-width:20px}.dropi-media-player__speed-control{position:relative;display:flex;align-items:center}.dropi-media-player__speed-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--Gray-Gray-800, #1f2433);border-radius:var(--Border-2, 8px);padding:6px 0;min-width:44px;display:flex;flex-direction:column;z-index:20}.dropi-media-player__speed-option{-webkit-appearance:none;appearance:none;background:transparent;border:none;padding:6px 10px;font-family:'Inter', sans-serif;font-size:var(--font-size-s);font-weight:var(--font-weight-medium);color:var(--Neutral-White);cursor:pointer;text-align:center;white-space:nowrap;transition:opacity 0.15s ease}.dropi-media-player__speed-option--active{color:var(--Primary-Primary-500, #f49a3d)}.dropi-media-player__speed-option:hover{opacity:0.8}.dropi-media-player__volume-control{position:relative;display:flex;align-items:center}.dropi-media-player__volume-popup{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:32px;height:108px;display:flex;align-items:center;justify-content:center;background:var(--Gray-Gray-800, #1f2433);border-radius:var(--Border-2, 8px);overflow:visible;z-index:20}.dropi-media-player__volume-slider{-webkit-appearance:none;appearance:none;width:97px;height:8px;transform:rotate(-90deg);border-radius:4px;cursor:pointer;outline:none;flex-shrink:0}.dropi-media-player__volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--Neutral-White);cursor:pointer}.dropi-media-player__volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--Neutral-White);border:none;cursor:pointer}.dropi-media-player__volume-slider::-webkit-slider-runnable-track{border-radius:4px}.dropi-media-player__volume-slider::-moz-range-track{height:8px;background:var(--Gray-Gray-700, #32394d);border-radius:4px}.dropi-media-player__blur-bg{display:none;position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(21px);transform:scale(1.15);z-index:0}.dropi-media-player__blur-overlay{display:none;position:absolute;inset:0;background-color:rgba(0, 0, 0, 0.7);z-index:0}.dropi-media-player.is-fullscreen,.dropi-media-player:fullscreen{max-width:none;aspect-ratio:auto;width:100vw;height:100vh;border-radius:0}.dropi-media-player.is-fullscreen .dropi-media-player__blur-bg,.dropi-media-player:fullscreen .dropi-media-player__blur-bg,.dropi-media-player.is-fullscreen .dropi-media-player__blur-overlay,.dropi-media-player:fullscreen .dropi-media-player__blur-overlay{display:block}.dropi-media-player.is-fullscreen .dropi-media-player__video,.dropi-media-player:fullscreen .dropi-media-player__video{object-fit:contain;position:relative;z-index:1}.dropi-media-player.is-fullscreen .dropi-media-player__center-play,.dropi-media-player:fullscreen .dropi-media-player__center-play,.dropi-media-player.is-fullscreen .dropi-media-player__controls-bar,.dropi-media-player:fullscreen .dropi-media-player__controls-bar{z-index:2}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, e as Build, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, e as Build, h } from './index-CPacpXAJ.js';
 
 const dropiModalCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:var(--dropi-z-index-modal, 9999);visibility:hidden}.modal-root--open{opacity:1;pointer-events:auto;visibility:visible}.modal-root--closing{opacity:1;pointer-events:none;visibility:visible}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:var(--font-weight-bold);flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%;margin-top:auto;flex-shrink:0}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}::slotted(.button-container)>*{width:100%}::slotted(.button-container) dropi-button{width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer,.modal-panel.size-xs .modal-footer{justify-content:flex-end}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container),.modal-panel.size-xs .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-panel.size-xs{width:320px;padding:24px;gap:16px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-xxl{width:1214px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
 
 const dropiNavbarCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.navbar{display:flex;align-items:center;height:56px;padding:0 var(--Size-4, 16px);background:var(--Neutral-White, #ffffff);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);gap:var(--Size-4, 16px);position:relative}.navbar__left{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.navbar__menu-btn{background:none;border:none;padding:6px;cursor:pointer;border-radius:var(--Border-1, 4px);display:flex;align-items:center;transition:background 0.15s}.navbar__menu-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__logo{height:28px;object-fit:contain}.navbar__items{flex:1;list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--Size-1, 4px)}.navbar__item{display:flex;align-items:center;gap:var(--Size-1, 4px);padding:6px var(--Size-3, 12px);background:none;border:none;border-radius:var(--Border-1, 4px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-600, #475066);cursor:pointer;transition:background 0.15s, color 0.15s;white-space:nowrap}.navbar__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__item--active{background:var(--Primary-Primary-50, #fff5eb);color:var(--Primary-Primary-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.navbar__badge{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff);font-size:var(--font-size-xxs);font-weight:var(--font-weight-bold);min-width:16px;height:16px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 4px}.navbar__right{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.navbar__icon-btn{position:relative;background:none;border:none;padding:6px;cursor:pointer;border-radius:var(--Border-1, 4px);display:flex;align-items:center;transition:background 0.15s}.navbar__icon-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__notif-badge{position:absolute;top:2px;right:2px;background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff);font-size:9px;font-weight:var(--font-weight-bold);min-width:14px;height:14px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 3px}.navbar__user-btn{display:flex;align-items:center;gap:var(--Size-1, 4px);background:none;border:none;padding:4px 8px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background 0.15s;font-family:inherit}.navbar__user-btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.navbar__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}.navbar__avatar-placeholder{width:28px;height:28px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700)}.navbar__user-name{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
 
@@ -42,9 +42,9 @@ const DropiNavbar = class {
     }
     render() {
         const items = this.parsedData;
-        return (h("nav", { key: '83ec218a7545739c65d8f1f61197b429b0e7d407', class: "navbar" }, h("div", { key: 'e40038630c33a280f3c231b3dd26643f1c853ea3', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: '0ecbae684b9324c48cd01a6081fd1951b3ba7cf8', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: '9edea72a4508a984be2e6785f3f0fa6abe0625c4', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: 'b8cd9896736d505dad05b8df5f10928d40f250dd', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '4e5dae851fe28f1bc913d7a5d4d42a2413342635', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: 'b951cc880b8aaf718b85403e3420d73ac976aa60', class: "navbar__items" }, items.map(item => (h("li", null, h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && h("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), h("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (h("span", { class: "navbar__badge" }, item.badge)))))))), h("div", { key: '8fe68f93af722982bac11890b106a35a292b3d98', class: "navbar__right" }, h("button", { key: 'a4d0ff928dca2502384cd21e0bc852cacc895a30', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: '41007746a151c27059d41db7c4672a2b551882d1', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: 'a0e5c6c9f8e2aaf3e67cc22bdff2ae65472b7cb5', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: 'e1996f9e1fa922cd03a4e9c5721f5be838a941d3', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+        return (h("nav", { key: '515d407d6f02969d8b4329fe0698ed4f5750e0b2', class: "navbar" }, h("div", { key: '5c8c5af9902aaf9036e5a8198243ce2f076f95d3', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: '8bb4eec5a244cad4daa83235824cc5775c9f97cc', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: 'a028169564888f173cffcaaab453ecb65dcfdbfb', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: 'ace8b77b5b35c97abdaca138200a6c22bf9073ef', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '59504d8491cda4bd84c8006ab703d3551afdac4c', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: '058243de4bd806e77d62805ebad229f570e456d2', class: "navbar__items" }, items.map(item => (h("li", null, h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && h("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), h("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (h("span", { class: "navbar__badge" }, item.badge)))))))), h("div", { key: 'f0e13a3af41a71694d32e2668f454ff39d875c5d', class: "navbar__right" }, h("button", { key: '3e869c6337a2cf2595fa71f3b0d39b16ecd2e045', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: 'fe4c70eb9b18896c1608f8fbb12eef95a488631b', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: '5e72bf4db6d7f732713392f5c4858a2acc567937', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: '5884c72e3710fc05577a521b274b77cad288d97a', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
             ? h("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
-            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: 'd539c8f456564aa8d3a29e9d2e2ed6250241f411', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: 'd32cba548201f28a051142e889f6de207a4e67d2', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
+            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: 'fe412936f5e4342005d3e2080ed97699b24a399b', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: 'd873b18797745639d4c47079e2c82472869fc41d', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
     }
 };
 DropiNavbar.style = dropiNavbarCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
 
 const dropiOtpSendCodeCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.otp{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.otp__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066);text-align:center;margin:0}.otp__inputs{display:flex;gap:var(--Size-4, 16px)}.otp__digit{width:56px;height:56px;border:1.5px solid var(--Gray-Gray-200, #d3d7de);border-radius:var(--Border-2, 8px);text-align:center;font-size:22px;font-weight:var(--font-weight-bold, 700);font-family:inherit;color:var(--Gray-Gray-800, #1f2433);outline:none;transition:border-color 0.15s ease;background:var(--Neutral-White, #ffffff)}.otp__digit:focus{border:2px solid var(--Primary-Primary-500, #f49a3d)}.otp__digit--filled{border:1px solid var(--Success-Success-500, #0abb87);color:var(--Neutral-Neutral-900, #0e111a)}.otp__digit--error{border:1px solid var(--Error-Error-500, #f46a6b)}.otp__error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b);text-align:center}.otp__resend{text-align:center}.otp__countdown{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.otp__resend-btn{background:none;border:none;padding:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);cursor:pointer;text-decoration:underline}`;
 
@@ -19,7 +19,7 @@ const DropiOtpSendCode = class {
     }
     internals;
     /** Name for native form submission */
-    name = '';
+    name;
     /** Delivery method label */
     engine = 'email';
     /** Contact info (email/phone to show in label) */
@@ -112,14 +112,14 @@ const DropiOtpSendCode = class {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (h("div", { key: 'ee2e6766c4b220a1a12b8734747138cf2351a0d8', class: "otp" }, this.showLabelContact && (h("p", { key: '87f34e3b13c0e16e584cc03ea8c5a35e462784b1', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '6c9d0c73340ff8dab1730b5d6c9cc0431f3ff21c' }, " ", this.labelContact))), h("div", { key: 'd82904db02da1da5f863bb86cef65b0da166ff0c', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (h("input", { key: i, ref: (el) => {
+        return (h("div", { key: 'a22ccea1873ed50f27fb43deba9e141ac3a08db9', class: "otp" }, this.showLabelContact && (h("p", { key: '45a52de065a15e2ccb0b8a899824e2ab29898f0a', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '53f3482c38df0d17709a7dc6e0097a0771d45901' }, " ", this.labelContact))), h("div", { key: '39f8e115aed6974da2e0713dec2abdb0632e7813', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (h("input", { key: i, ref: (el) => {
                 if (el)
                     this.inputs[i] = el;
             }, class: {
                 'otp__digit': true,
                 'otp__digit--filled': this.digitStates[i] === 'filled',
                 'otp__digit--error': this.error,
-            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: '7629619d5b2c4e8f38e2c2bc93ab134242b8e079', class: "otp__error" }, this.errorMessage)), h("div", { key: 'ea5472d4c55f1cdc30304e9e9bcaacf303ba4501', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: '4e04644edc2eae0b7568c27b6424fa9acea0241f', class: "otp__error" }, this.errorMessage)), h("div", { key: 'a118270f2db31557a9514dac38e823eebe21bb9b', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/dropi-ui/dropi-otp-send-code.entry.js.map

@@ -1 +1 @@
-{"file":"dropi-otp-send-code.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-otp-send-code/dropi-otp-send-code.css?tag=dropi-otp-send-code&encapsulation=shadow","src/components/dropi-otp-send-code/dropi-otp-send-code.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.otp { display: flex; flex-direction: column; align-items: center; gap: var(--Size-4, 16px); }\n\n.otp__label {\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-600, #475066);\n  text-align: center;\n  margin: 0;\n}\n\n.otp__inputs {\n  display: flex;\n  gap: var(--Size-4, 16px);\n}\n\n.otp__digit {\n  width: 56px;\n  height: 56px;\n  border: 1.5px solid var(--Gray-Gray-200, #d3d7de);\n  border-radius: var(--Border-2, 8px);\n  text-align: center;\n  font-size: 22px;\n  font-weight: var(--font-weight-bold, 700);\n  font-family: inherit;\n  color: var(--Gray-Gray-800, #1f2433);\n  outline: none;\n  transition: border-color 0.15s ease;\n  background: var(--Neutral-White, #ffffff);\n}\n\n.otp__digit:focus { \n  border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n.otp__digit--filled { \n  border: 1px solid var(--Success-Success-500, #0abb87); \n  color: var(--Neutral-Neutral-900, #0e111a); \n}\n.otp__digit--error { \n  border: 1px solid var(--Error-Error-500, #f46a6b);\n}\n\n.otp__error {\n  margin: 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Error-Error-500, #f46a6b);\n  text-align: center;\n}\n\n.otp__resend { text-align: center; }\n\n.otp__countdown {\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.otp__resend-btn {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Primary-Primary-500, #f49a3d);\n  cursor: pointer;\n  text-decoration: underline;\n}\n","import { Component, Prop, State, Event, EventEmitter, AttachInternals, h, Watch } from '@stencil/core';\n\nconst RESEND_SECONDS = 30;\n\n/**\n * @component dropi-otp-send-code\n * OTP input with configurable length, countdown timer and resend capability.\n */\n@Component({\n  tag: 'dropi-otp-send-code',\n  styleUrl: 'dropi-otp-send-code.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiOtpSendCode {\n  @AttachInternals() internals: ElementInternals;\n\n  /** Name for native form submission */\n  @Prop({ reflect: true }) name: string = '';\n\n  /** Delivery method label */\n  @Prop() engine: 'email' | 'sms' | '2fa' = 'email';\n  /** Contact info (email/phone to show in label) */\n  @Prop() labelContact: string = '';\n  /** Show contact label */\n  @Prop() showLabelContact: boolean = false;\n  /** Error message to display */\n  @Prop() errorMessage: string = '';\n  /** Number of digits for the OTP */\n  @Prop() digitsCount: number = 6;\n\n  @State() private digits: string[] = [];\n  @State() private digitStates: ('idle' | 'filled' | 'error')[] = [];\n  @State() private countdown: number = RESEND_SECONDS;\n  @State() private canResend: boolean = false;\n  @State() private error: boolean = false;\n\n  private inputs: HTMLInputElement[] = [];\n  private timer: any;\n\n  @Watch('digitsCount')\n  handleDigitsCountChange(newValue: number) {\n    this.digits = Array(newValue).fill('');\n    this.digitStates = Array(newValue).fill('idle');\n    this.inputs = [];\n  }\n\n  /** Emitted when all digits are entered. */\n  @Event() codeCompleted: EventEmitter<string>;\n  /** Emitted when all digits are entered (alternative event). */\n  @Event() codeAccepted: EventEmitter<string>;\n  /** Emitted when resend is requested */\n  @Event() dropiResend: EventEmitter<void>;\n\n  componentWillLoad() {\n    this.digits = Array(this.digitsCount).fill('');\n    this.digitStates = Array(this.digitsCount).fill('idle');\n    this.internals.setFormValue('');\n  }\n\n\n  componentDidLoad() { this.startCountdown(); }\n  disconnectedCallback() { clearInterval(this.timer); }\n\n  private startCountdown() {\n    this.countdown = RESEND_SECONDS;\n    this.canResend = false;\n    clearInterval(this.timer);\n    this.timer = setInterval(() => {\n      this.countdown--;\n      if (this.countdown <= 0) { clearInterval(this.timer); this.canResend = true; }\n    }, 1000);\n  }\n\n  private handleInput(e: InputEvent, index: number) {\n    const val = (e.target as HTMLInputElement).value.replace(/\\D/g, '').slice(-1);\n    const newDigits = [...this.digits];\n    newDigits[index] = val;\n    this.digits = newDigits;\n\n    const newStates = [...this.digitStates];\n    newStates[index] = val ? 'filled' : 'idle';\n    this.digitStates = newStates;\n\n    if (val && index < this.digitsCount - 1) this.inputs[index + 1]?.focus();\n\n    if (newDigits.every(d => d !== '')) {\n      const finalCode = newDigits.join('');\n      this.internals.setFormValue(finalCode);\n      this.codeCompleted.emit(finalCode);\n      this.codeAccepted.emit(finalCode);\n    } else {\n      this.internals.setFormValue(newDigits.join(''));\n    }\n\n  }\n\n  private handleKeyDown(e: KeyboardEvent, index: number) {\n    if (e.key === 'Backspace' && !this.digits[index] && index > 0) {\n      this.inputs[index - 1]?.focus();\n    }\n  }\n\n  private handlePaste(e: ClipboardEvent) {\n    e.preventDefault();\n    const text = e.clipboardData?.getData('text')?.replace(/\\D/g, '').slice(0, this.digitsCount) || '';\n    const newDigits = Array(this.digitsCount).fill('');\n    text.split('').forEach((c, i) => { newDigits[i] = c; });\n    this.digits = newDigits;\n    this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');\n    this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();\n    \n    if (newDigits.every(d => d !== '')) {\n      const finalCode = newDigits.join('');\n      this.internals.setFormValue(finalCode);\n      this.codeCompleted.emit(finalCode);\n      this.codeAccepted.emit(finalCode);\n    } else {\n      this.internals.setFormValue(newDigits.join(''));\n    }\n\n  }\n\n  render() {\n    const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';\n\n    return (\n      <div class=\"otp\">\n        {this.showLabelContact && (\n          <p class=\"otp__label\">\n            Ingresa el código enviado a tu {engineLabel}\n            {this.labelContact && <strong> {this.labelContact}</strong>}\n          </p>\n        )}\n\n        <div class=\"otp__inputs\" onPaste={(e) => this.handlePaste(e)}>\n          {this.digits.map((_, i) => (\n            <input\n              key={i}\n              ref={(el) => { if (el) this.inputs[i] = el as HTMLInputElement; }}\n              class={{\n                'otp__digit': true,\n                'otp__digit--filled': this.digitStates[i] === 'filled',\n                'otp__digit--error': this.error,\n              }}\n              type=\"text\"\n              inputMode=\"numeric\"\n              maxLength={1}\n              value={this.digits[i] ?? ''}\n              onInput={(e) => this.handleInput(e as InputEvent, i)}\n              onKeyDown={(e) => this.handleKeyDown(e as KeyboardEvent, i)}\n            />\n          ))}\n        </div>\n\n        {this.error && this.errorMessage && (\n          <p class=\"otp__error\">{this.errorMessage}</p>\n        )}\n\n        <div class=\"otp__resend\">\n          {this.canResend ? (\n            <button class=\"otp__resend-btn\" onClick={() => { this.startCountdown(); this.dropiResend.emit(); }}>\n              Reenviar código\n            </button>\n          ) : (\n            <span class=\"otp__countdown\">Reenviar en {this.countdown}s</span>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-otp-send-code.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-otp-send-code/dropi-otp-send-code.css?tag=dropi-otp-send-code&encapsulation=shadow","src/components/dropi-otp-send-code/dropi-otp-send-code.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.otp { display: flex; flex-direction: column; align-items: center; gap: var(--Size-4, 16px); }\n\n.otp__label {\n  font-size: var(--font-size-s, 12px);\n  color: var(--Gray-Gray-600, #475066);\n  text-align: center;\n  margin: 0;\n}\n\n.otp__inputs {\n  display: flex;\n  gap: var(--Size-4, 16px);\n}\n\n.otp__digit {\n  width: 56px;\n  height: 56px;\n  border: 1.5px solid var(--Gray-Gray-200, #d3d7de);\n  border-radius: var(--Border-2, 8px);\n  text-align: center;\n  font-size: 22px;\n  font-weight: var(--font-weight-bold, 700);\n  font-family: inherit;\n  color: var(--Gray-Gray-800, #1f2433);\n  outline: none;\n  transition: border-color 0.15s ease;\n  background: var(--Neutral-White, #ffffff);\n}\n\n.otp__digit:focus { \n  border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n.otp__digit--filled { \n  border: 1px solid var(--Success-Success-500, #0abb87); \n  color: var(--Neutral-Neutral-900, #0e111a); \n}\n.otp__digit--error { \n  border: 1px solid var(--Error-Error-500, #f46a6b);\n}\n\n.otp__error {\n  margin: 0;\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Error-Error-500, #f46a6b);\n  text-align: center;\n}\n\n.otp__resend { text-align: center; }\n\n.otp__countdown {\n  font-size: var(--font-size-xs, 10px);\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.otp__resend-btn {\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Primary-Primary-500, #f49a3d);\n  cursor: pointer;\n  text-decoration: underline;\n}\n","import { Component, Prop, State, Event, EventEmitter, AttachInternals, h, Watch } from '@stencil/core';\n\nconst RESEND_SECONDS = 30;\n\n/**\n * @component dropi-otp-send-code\n * OTP input with configurable length, countdown timer and resend capability.\n */\n@Component({\n  tag: 'dropi-otp-send-code',\n  styleUrl: 'dropi-otp-send-code.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiOtpSendCode {\n  @AttachInternals() internals: ElementInternals;\n\n  /** Name for native form submission */\n  @Prop({ reflect: true }) name!: string;\n\n  /** Delivery method label */\n  @Prop() engine: 'email' | 'sms' | '2fa' = 'email';\n  /** Contact info (email/phone to show in label) */\n  @Prop() labelContact: string = '';\n  /** Show contact label */\n  @Prop() showLabelContact: boolean = false;\n  /** Error message to display */\n  @Prop() errorMessage: string = '';\n  /** Number of digits for the OTP */\n  @Prop() digitsCount: number = 6;\n\n  @State() private digits: string[] = [];\n  @State() private digitStates: ('idle' | 'filled' | 'error')[] = [];\n  @State() private countdown: number = RESEND_SECONDS;\n  @State() private canResend: boolean = false;\n  @State() private error: boolean = false;\n\n  private inputs: HTMLInputElement[] = [];\n  private timer: any;\n\n  @Watch('digitsCount')\n  handleDigitsCountChange(newValue: number) {\n    this.digits = Array(newValue).fill('');\n    this.digitStates = Array(newValue).fill('idle');\n    this.inputs = [];\n  }\n\n  /** Emitted when all digits are entered. */\n  @Event() codeCompleted: EventEmitter<string>;\n  /** Emitted when all digits are entered (alternative event). */\n  @Event() codeAccepted: EventEmitter<string>;\n  /** Emitted when resend is requested */\n  @Event() dropiResend: EventEmitter<void>;\n\n  componentWillLoad() {\n    this.digits = Array(this.digitsCount).fill('');\n    this.digitStates = Array(this.digitsCount).fill('idle');\n    this.internals.setFormValue('');\n  }\n\n\n  componentDidLoad() { this.startCountdown(); }\n  disconnectedCallback() { clearInterval(this.timer); }\n\n  private startCountdown() {\n    this.countdown = RESEND_SECONDS;\n    this.canResend = false;\n    clearInterval(this.timer);\n    this.timer = setInterval(() => {\n      this.countdown--;\n      if (this.countdown <= 0) { clearInterval(this.timer); this.canResend = true; }\n    }, 1000);\n  }\n\n  private handleInput(e: InputEvent, index: number) {\n    const val = (e.target as HTMLInputElement).value.replace(/\\D/g, '').slice(-1);\n    const newDigits = [...this.digits];\n    newDigits[index] = val;\n    this.digits = newDigits;\n\n    const newStates = [...this.digitStates];\n    newStates[index] = val ? 'filled' : 'idle';\n    this.digitStates = newStates;\n\n    if (val && index < this.digitsCount - 1) this.inputs[index + 1]?.focus();\n\n    if (newDigits.every(d => d !== '')) {\n      const finalCode = newDigits.join('');\n      this.internals.setFormValue(finalCode);\n      this.codeCompleted.emit(finalCode);\n      this.codeAccepted.emit(finalCode);\n    } else {\n      this.internals.setFormValue(newDigits.join(''));\n    }\n\n  }\n\n  private handleKeyDown(e: KeyboardEvent, index: number) {\n    if (e.key === 'Backspace' && !this.digits[index] && index > 0) {\n      this.inputs[index - 1]?.focus();\n    }\n  }\n\n  private handlePaste(e: ClipboardEvent) {\n    e.preventDefault();\n    const text = e.clipboardData?.getData('text')?.replace(/\\D/g, '').slice(0, this.digitsCount) || '';\n    const newDigits = Array(this.digitsCount).fill('');\n    text.split('').forEach((c, i) => { newDigits[i] = c; });\n    this.digits = newDigits;\n    this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');\n    this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();\n    \n    if (newDigits.every(d => d !== '')) {\n      const finalCode = newDigits.join('');\n      this.internals.setFormValue(finalCode);\n      this.codeCompleted.emit(finalCode);\n      this.codeAccepted.emit(finalCode);\n    } else {\n      this.internals.setFormValue(newDigits.join(''));\n    }\n\n  }\n\n  render() {\n    const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';\n\n    return (\n      <div class=\"otp\">\n        {this.showLabelContact && (\n          <p class=\"otp__label\">\n            Ingresa el código enviado a tu {engineLabel}\n            {this.labelContact && <strong> {this.labelContact}</strong>}\n          </p>\n        )}\n\n        <div class=\"otp__inputs\" onPaste={(e) => this.handlePaste(e)}>\n          {this.digits.map((_, i) => (\n            <input\n              key={i}\n              ref={(el) => { if (el) this.inputs[i] = el as HTMLInputElement; }}\n              class={{\n                'otp__digit': true,\n                'otp__digit--filled': this.digitStates[i] === 'filled',\n                'otp__digit--error': this.error,\n              }}\n              type=\"text\"\n              inputMode=\"numeric\"\n              maxLength={1}\n              value={this.digits[i] ?? ''}\n              onInput={(e) => this.handleInput(e as InputEvent, i)}\n              onKeyDown={(e) => this.handleKeyDown(e as KeyboardEvent, i)}\n            />\n          ))}\n        </div>\n\n        {this.error && this.errorMessage && (\n          <p class=\"otp__error\">{this.errorMessage}</p>\n        )}\n\n        <div class=\"otp__resend\">\n          {this.canResend ? (\n            <button class=\"otp__resend-btn\" onClick={() => { this.startCountdown(); this.dropiResend.emit(); }}>\n              Reenviar código\n            </button>\n          ) : (\n            <span class=\"otp__countdown\">Reenviar en {this.countdown}s</span>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CPacpXAJ.js';
 
 const dropiPaginatorCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.paginator{display:flex;align-items:center;justify-content:flex-end;gap:var(--Size-4, 16px);flex-wrap:wrap}.paginator-pages{display:flex;align-items:center;gap:var(--Size-1, 4px)}.paginator-btn{width:32px;height:32px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s ease}.paginator-btn:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.paginator-btn:disabled{opacity:0.4;cursor:not-allowed}.paginator-btn--active{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.paginator-btn--active:hover{background:var(--Primary-Primary-500, #f49a3d)}.paginator-btn--arrow{width:auto;padding:0 var(--Size-2, 8px);border-radius:var(--Border-1, 4px);gap:4px}.paginator-btn--arrow:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.paginator-label{font-size:var(--font-size-s, 12px);color:inherit}.paginator-ellipsis{color:var(--Gray-Gray-400, #858ea6);padding:0 4px;font-size:var(--font-size-s, 12px);display:flex;align-items:center}.paginator-size{display:flex;align-items:center;gap:var(--Size-2, 8px)}.paginator-size-label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c)}.paginator-size-select{height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;outline:none}`;
 
@@ -57,9 +57,9 @@ const DropiPaginator = class {
         const pages = this.pageNumbers;
         const isFirst = this.currentPage <= 1;
         const isLast = this.currentPage >= this.totalPages;
-        return (h("div", { key: 'af6614df5a241ef536b6723d30bde12c8a6f474f', class: "paginator" }, h("div", { key: '8b5405baa717a36042fc03ca2e68370799c01ff7', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: 'c340304b29d658ef9eaa8105a91540660c829048', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '3adfc1508cbcedbb91f99e467db2270c40a4ac83', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '5936642c4b9e5b72546229996fbc72fe973e6f5f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: 'c9f7eb1c0c27a738ee31e859617964fc75e514cc', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '5d448a9a6536c90c56fafd700e7c5998a85d6fdf', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+        return (h("div", { key: '50a68668b70849a4c08836bec85b43a703b2e424', class: "paginator" }, h("div", { key: '22d58d289589dc8c459d4608fe3d5760e80ca958', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '1e78854d883898ff551f88c9e709685ae7a5cfdd', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: 'ff6d58ed30cee1a52747032bca17c0cd813396eb', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: 'de32002d9f28217c57048b21f55d4e04f76c8930', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: '0edf0af97e22935e5f346168c810ef90a86d449a', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '3deca437baa679afb9fd27b7de13397dc6bd4124', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
             ? h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
-            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (h("button", { key: '1a43d8dde37cdbc40527eb1c66bc5001a64cf59f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && h("span", { key: 'f76ccd791d02b25d78c509341b73e1c1bca0b986', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '822a3a7e4ac651e00c469b565e300a7efcc5614b', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '2b4f7435f9083ab9c4d9ce81be5c259eda830e4a', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '63ab5568c44ed3cbda917842defe4dc4254bb3f1', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
+            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (h("button", { key: 'a5a58bde99571e0e39d84f0a019737690fa899e5', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && h("span", { key: 'afb750c3351df160d8f2c186e6f3bfec3fb193b7', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: 'ceafcfa5f2447b06fbd0e7e70b20c854f7576c8e', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: '1f60cd332a5e833c2d953668dd43425b14c53db6', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '7efd74aab20a0fa78808b33afe5ddba4d797998d', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
     }
 };
 DropiPaginator.style = dropiPaginatorCss();