@dropi/ui 0.1.41 → 0.1.43

package/dist/components/p-kC6NU5nP.js

@@ -0,0 +1 @@
+import{t,p as e,H as i,h as r}from"./index.js";import{d as s}from"./p-BtkDdEAq.js";const a=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}variant="tag";type="primary";state="default";showIcon=!1;icon="";text="";colorMap={default:"Primary-Primary",success:"Success-Success",info:"Info-Info",warning:"Warning-Warning",error:"Error-Error",legacy:"Gray-Gray"};propsChanged(){}get bgColor(){const t=this.colorMap[this.state];return"primary"===this.type?`var(--${t}-500)`:`var(--${t}${"default"===this.state||"legacy"===this.state?"-100":"-50"})`}get textColor(){return"dot"===this.variant?this.dotColor:"primary"===this.type&&"tag"===this.variant?"var(--Neutral-White)":`var(--${this.colorMap[this.state]}${"default"===this.state?"-500":"-700"})`}get dotColor(){return`var(--${this.colorMap[this.state]}-500)`}get fontWeight(){return"secondary"!==this.type||this.showIcon?"500":"300"}get iconColor(){return"primary"===this.type?"Neutral-White":`${this.colorMap[this.state]}${"default"===this.state?"-500":"-700"}`}get hasContent(){return"string"==typeof this.text&&this.text.trim().length>0}render(){return r("div",{key:"40c7e54e8f7b23c5916f38b5c814de0f9619948d",class:"container-chips"},r("div",{key:"e34fd0c43c27084f2855dbd4c92d8eb6e9d651f5",class:{tags:!0,"icon-only":this.showIcon&&!this.hasContent,"dot-variant":"dot"===this.variant,"text-variant":"text"===this.variant},style:{backgroundColor:"dot"===this.variant||"text"===this.variant?"transparent":this.bgColor,color:this.textColor,fontWeight:this.fontWeight}},"dot"===this.variant&&r("div",{key:"770ae84b31ea0e3a85df3ee63377532c5dd8a90d",class:"dot-indicator",style:{backgroundColor:this.dotColor}}),"tag"===this.variant&&this.showIcon&&this.icon&&r("dropi-icon",{key:"b99311d5f4749e429f1fff42ea354aa243241628",class:"file-icon",name:this.icon,iconWidth:"16px",iconHeight:"16px",color:this.iconColor}),this.hasContent&&r("span",{key:"88107eab19f9cec961d4b8e6bede6ee9b5206c0a"},this.text)))}static get watchers(){return{type:[{propsChanged:0}],state:[{propsChanged:0}],variant:[{propsChanged:0}]}}static get style(){return":host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.container-chips{display:inline-block}.tags{display:inline-flex;padding:4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:var(--Border-5, 9999px);overflow:hidden;text-align:center;text-overflow:ellipsis;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);line-height:var(--Size-5, 24px);animation:fade-in 200ms ease-out}.tags.dot-variant,.tags.text-variant{padding:0;gap:8px;background-color:transparent !important;line-height:normal}.dot-indicator{width:10px;height:10px;border-radius:50%;flex-shrink:0}@keyframes fade-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}"}},[513,"dropi-tag",{variant:[513],type:[513],state:[513],showIcon:[4,"show-icon"],icon:[513],text:[513]},void 0,{type:[{propsChanged:0}],state:[{propsChanged:0}],variant:[{propsChanged:0}]}]);function o(){"undefined"!=typeof customElements&&["dropi-tag","dropi-icon"].forEach((e=>{switch(e){case"dropi-tag":customElements.get(t(e))||customElements.define(t(e),a);break;case"dropi-icon":customElements.get(t(e))||s()}}))}o();export{a as D,o as d}

package/dist/components/p-lX2uCKEi.js

@@ -0,0 +1 @@
+import{t,p as e,H as i,c as o,h as r}from"./index.js";import{d as s}from"./p-BDYn1JDe.js";const a=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.dropiInput=o(this,"dropiInput",7),this.dropiChange=o(this,"dropiChange",7),this.dropiFocus=o(this,"dropiFocus",7),this.dropiBlur=o(this,"dropiBlur",7),this.internals=this.attachInternals()}internals;inputId="";name="";label="";placeholder=" ";value="";maxLength;disabled=!1;required=!1;showObligatoryAsterisk=!0;fixedLabel=!1;inputMode="text";passwordInput=!1;isMoneyInput=!1;isThousandSeparator=!1;isNumericInput=!1;allowDecimals=!1;isLettersOnly=!1;icon="";iconColor="Gray-Gray-400";hasError=!1;textHelper="";showHelperOnlyOnError=!1;inputProperties=null;showPassword=!1;touched=!1;dropiInput;dropiChange;dropiFocus;dropiBlur;inputPropertiesChanged(t){t&&(void 0!==t.id&&(this.inputId=t.id),void 0!==t.inputId&&(this.inputId=t.inputId),void 0!==t.label&&(this.label=t.label),void 0!==t.placeholder&&(this.placeholder=t.placeholder),void 0!==t.maxLength&&(this.maxLength=t.maxLength),void 0!==t.textHelper&&(this.textHelper=t.textHelper),void 0!==t.passwordInput&&(this.passwordInput=t.passwordInput),void 0!==t.isPasswordInput&&(this.passwordInput=t.isPasswordInput),void 0!==t.icon&&(this.icon=t.icon),void 0!==t.iconColor&&(this.iconColor=t.iconColor),void 0!==t.isMoneyInput&&(this.isMoneyInput=t.isMoneyInput),void 0!==t.showObligatoryAsterisk&&(this.showObligatoryAsterisk=t.showObligatoryAsterisk),void 0!==t.isNumericInput&&(this.isNumericInput=t.isNumericInput),void 0!==t.allowDecimals&&(this.allowDecimals=t.allowDecimals),void 0!==t.isThousandSeparator&&(this.isThousandSeparator=t.isThousandSeparator),void 0!==t.showHelperOnlyOnError&&(this.showHelperOnlyOnError=t.showHelperOnlyOnError),void 0!==t.isLettersOnly&&(this.isLettersOnly=t.isLettersOnly),void 0!==t.inputMode&&(this.inputMode=t.inputMode))}valueChanged(t){this.internals.setFormValue(t)}disabledChanged(t){this.internals.setValidity(t?{customError:!0}:{},t?"Field is disabled":"")}componentWillLoad(){this.internals.setFormValue(this.value??""),this.inputProperties&&this.inputPropertiesChanged(this.inputProperties)}handleInput(t){let e=t.target.value;this.isNumericInput&&(e=this.filterNumbers(e)),this.isLettersOnly&&(e=this.filterLetters(e)),(this.isMoneyInput||this.isThousandSeparator)&&(e=this.formatThousands(e,this.isMoneyInput)),this.value=e,this.internals.setFormValue(e),this.dropiInput.emit(e)}handleKeyDown(t){(this.isNumericInput||this.isMoneyInput||this.isThousandSeparator)&&!this.isAllowedNumberKey(t)&&t.preventDefault(),this.isLettersOnly&&!this.isAllowedLetterKey(t)&&t.preventDefault()}handleFocus(){this.dropiFocus.emit()}handleBlur(){this.touched=!0,this.dropiChange.emit(this.value),this.dropiBlur.emit()}togglePassword(){this.disabled||(this.showPassword=!this.showPassword)}filterNumbers(t){return t.replace(this.allowDecimals?/[^0-9.]/g:/[^0-9]/g,"")}filterLetters(t){return t.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s]/g,"")}isAllowedNumberKey(t){return!!(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(t.key)||t.ctrlKey||t.metaKey||/^[0-9]$/.test(t.key)||this.allowDecimals&&"."===t.key)}isAllowedLetterKey(t){return!!["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"," "].includes(t.key)||!(!t.ctrlKey&&!t.metaKey)||/^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(t.key)}formatThousands(t,e){const i=t.replace(/[^0-9.]/g,""),[o,r]=i.split("."),s=o.replace(/\B(?=(\d{3})+(?!\d))/g,","),a=void 0!==r?`${s}.${r}`:s;return e?`$${a}`:a}get resolvedId(){return this.inputId||this.label}get inputType(){return this.passwordInput?this.showPassword?"text":"password":"text"}get showHelper(){return!!this.textHelper&&(!this.showHelperOnlyOnError||this.hasError&&this.touched)}get isInvalid(){return this.hasError&&this.touched}render(){const t=this.required&&this.showObligatoryAsterisk&&!this.disabled,e=!!this.icon;return r("div",{key:"36a33fdb7048e3ba43dae3c2d3d71c9f69643cac",class:{"fixed-label-container":this.fixedLabel}},this.fixedLabel&&r("div",{key:"699adfe37d662ed328cd13fdad428e857b70f01d",class:"input-label Body-S-Regular"},this.label,t&&r("span",{key:"b2d6f4757cdb50eacfb7879e4a878e30adf5235d",class:"asterisk"}," *")),r("div",{key:"dc080fc5d0ab12f0eadf7e1bb30cae5539f76640",class:"form-group"},r("div",{key:"cf228d5e4c7e0a04735d38ba239a2b989f5247ca",class:{"input-container":!0,"input-container--has-icon":e}},e&&r("dropi-icon",{key:"049e396ea1f2f11625de73bc074c0e0aecea96ab",class:"icon-input",name:this.icon,color:this.iconColor,iconWidth:"20px",iconHeight:"20px",style:{width:"20px",height:"20px"}}),this.passwordInput&&r("dropi-icon",{key:"544316f6e7a284acf65d3a2b7fb3a2654c80d95b",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()}),r("input",{key:"6d23ac748d0768d6eea0eb347bde7b13d8f20321",id:this.resolvedId,class:{"form-control":!0,"form-control-valid":!this.isInvalid&&this.touched&&!!this.value,"form-control-invalid":this.isInvalid,"padding-icon":e,"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":void 0,onInput:t=>this.handleInput(t),onKeyDown:t=>this.handleKeyDown(t),onFocus:()=>this.handleFocus(),onBlur:()=>this.handleBlur()}),!this.fixedLabel&&r("label",{key:"8f26c9430cbc1c6b55286d62c2a350724dd0101f",class:"Body-S-Regular label-bottom",htmlFor:this.resolvedId},this.label,t&&r("span",{key:"95d953c160cf22457b0e1d6265b8137a24d4092b",class:"asterisk"}," *")),this.showHelper&&r("div",{key:"ad3d4b5230fd32e97c661c64deadf97830caa550",class:"form-control-helper"},this.isInvalid&&r("dropi-icon",{key:"7c28120d1cc46ccd288948b1d2d9e5cc24521af7",name:"Warning-circle",iconWidth:"12px",iconHeight:"12px",color:"Error-Error-500"}),r("span",{key:"40eb1eedd2a204975aed61fcd24ccadd26d8aaef",class:{"disabled-helper":this.disabled,"invalid-color":this.isInvalid}},this.textHelper)))))}static get formAssociated(){return!0}static get watchers(){return{inputProperties:[{inputPropertiesChanged:0}],value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}}static get style(){return":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}"}},[577,"dropi-input",{inputId:[1025,"input-id"],name:[1],label:[1025],placeholder:[1025],value:[1025],maxLength:[1026,"max-length"],disabled:[516],required:[516],showObligatoryAsterisk:[1028,"show-obligatory-asterisk"],fixedLabel:[4,"fixed-label"],inputMode:[1025,"input-mode"],passwordInput:[1028,"password-input"],isMoneyInput:[1028,"is-money-input"],isThousandSeparator:[1028,"is-thousand-separator"],isNumericInput:[1028,"is-numeric-input"],allowDecimals:[1028,"allow-decimals"],isLettersOnly:[1028,"is-letters-only"],icon:[1025],iconColor:[1025,"icon-color"],hasError:[1028,"has-error"],textHelper:[1025,"text-helper"],showHelperOnlyOnError:[1028,"show-helper-only-on-error"],inputProperties:[8,"input-properties"],showPassword:[32],touched:[32]},void 0,{inputProperties:[{inputPropertiesChanged:0}],value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}]);function n(){"undefined"!=typeof customElements&&["dropi-input","dropi-icon"].forEach((e=>{switch(e){case"dropi-input":customElements.get(t(e))||customElements.define(t(e),a);break;case"dropi-icon":customElements.get(t(e))||s()}}))}n();export{a as D,n as d}

package/dist/components/p-ndQSfLKF.js

@@ -0,0 +1 @@
+import{t as a,p as i,H as t,c as e,h as r}from"./index.js";import{d as o}from"./p-BDYn1JDe.js";const n=i(class extends t{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.dropiPageChange=e(this,"dropiPageChange")}totalPages=1;currentPage=1;disabled=!1;maxVisiblePages=8;isNotTotalPages=!1;noLabels=!1;dropiPageChange;get pageNumbers(){const a=this.totalPages,i=this.currentPage,t=this.maxVisiblePages;if(a<=t)return Array.from({length:a},((a,i)=>i+1));const e=Math.floor(t/2);let r=Math.max(1,i-e),o=Math.min(a,r+t-1);o-r<t-1&&(r=Math.max(1,o-t+1));const n=[];r>1&&(n.push(1),r>2&&n.push("..."));for(let a=r;a<=o;a++)n.push(a);return o<a&&(o<a-1&&n.push("..."),n.push(a)),n}goTo(a){this.disabled||a<1||a>this.totalPages||a===this.currentPage||(this.currentPage=a,this.dropiPageChange.emit(this.currentPage))}render(){const a=this.pageNumbers,i=this.currentPage<=1,t=this.currentPage>=this.totalPages;return r("div",{key:"06f0a165970fb8363749aa978577521f2237e713",class:"paginator"},r("div",{key:"9f744b37617b0ff4e5d1326209b24785c343ba10",class:"paginator-pages"},!i&&!this.noLabels&&r("button",{key:"3b4f5dcd460ed0e71f2b8b87a297728b4c83e6ee",class:{"paginator-btn":!0,"paginator-btn--arrow":!0},onClick:()=>this.goTo(1),"aria-label":"Primera página",disabled:this.disabled},r("dropi-icon",{key:"865bd24c29b97b40c1cbf611c4fcda367339c31b",name:"Arrow-double-small-left",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-600"})),!i&&r("button",{key:"2c070961591debd134c8fa13fe6b50d2e2af0a09",class:{"paginator-btn":!0,"paginator-btn--arrow":!0},onClick:()=>this.goTo(this.currentPage-1),"aria-label":"Anterior",disabled:this.disabled},r("dropi-icon",{key:"54ec35494ccec213c8ca64c0a982c2e6d4055d8d",name:"Dropdown-left",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-600"}),!this.noLabels&&r("span",{key:"f92b4cbaad6cf75c1555950245f5c106e0889086",class:"paginator-label"},"Anterior")),a.map(((a,i)=>"..."===a?r("span",{class:"paginator-ellipsis",key:`e${i}`},"…"):r("button",{key:a,class:{"paginator-btn":!0,"paginator-btn--active":a===this.currentPage},onClick:()=>this.goTo(a),"aria-current":a===this.currentPage?"page":void 0,disabled:this.disabled},a))),!t&&r("button",{key:"209f05b7cc2be185f0b3ec892aeae5afd77b9cb3",class:{"paginator-btn":!0,"paginator-btn--arrow":!0},onClick:()=>this.goTo(this.currentPage+1),"aria-label":"Siguiente",disabled:this.disabled},!this.noLabels&&r("span",{key:"75dfabe785c251ef60b90bed7b58dd599fa2d7c9",class:"paginator-label"},"Siguiente"),r("dropi-icon",{key:"83391dd2055e0a1e9b295f8c832eba838a356c27",name:"Dropdown-Right",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-600"})),!t&&!this.noLabels&&r("button",{key:"108ed2f0dac244660d9518383dad5cff7cddd3d4",class:{"paginator-btn":!0,"paginator-btn--arrow":!0},onClick:()=>this.goTo(this.totalPages),"aria-label":"Última página",disabled:this.disabled},r("dropi-icon",{key:"757935a9202b99091f44287270f26106e975e6a1",name:"Arrow-double-small-right",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-600"}))))}static get style(){return":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}"}},[513,"dropi-paginator",{totalPages:[2,"total-pages"],currentPage:[1538,"current-page"],disabled:[4],maxVisiblePages:[2,"max-visible-pages"],isNotTotalPages:[4,"is-not-total-pages"],noLabels:[4,"no-labels"]}]);function s(){"undefined"!=typeof customElements&&["dropi-paginator","dropi-icon"].forEach((i=>{switch(i){case"dropi-paginator":customElements.get(a(i))||customElements.define(a(i),n);break;case"dropi-icon":customElements.get(a(i))||o()}}))}s();export{n as D,s as d}

package/dist/components/p-plWZwD4h.js

@@ -0,0 +1 @@
+import{t as r,p as e,H as t,c as i,h as a}from"./index.js";import{d as o}from"./p-ETg0qC-7.js";const n={success:"Check-circle",error:"Warning-circle",warning:"Warning-triangle",info:"Info"},s={success:"Success-Success-500",error:"Error-Error-500",warning:"Warning-Warning-500",info:"Info-Info-500"},l=e(class extends t{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.dropiClose=i(this,"dropiClose"),this.dropiButtonClick=i(this,"dropiButtonClick"),this.dropiLinkClick=i(this,"dropiLinkClick")}message="";type="default";state="success";dismissable=!0;showButton=!1;buttonText="Close";anchorText="none";anchorUrl="none";showAlert=!0;textLink="";linkUrl="";clickedText="";dropiClose;dropiButtonClick;dropiLinkClick;render(){return this.showAlert?a("div",{class:{alert:!0,[`alert--${this.type}`]:!0,[`alert--${this.state}`]:!0}},"flag"!==this.type&&a("div",{class:"alert__icon"},a("dropi-icon",{name:n[this.state],iconWidth:"18px",iconHeight:"18px",color:s[this.state]})),a("div",{class:"alert__body"},a("span",{class:"alert__message"},this.message),this.anchorText&&a("a",{class:"alert__link",href:this.anchorUrl||this.linkUrl||"#",onClick:r=>{r.preventDefault(),this.dropiLinkClick.emit()}},this.anchorText)),a("div",{class:"alert__actions"},this.showButton&&this.buttonText&&"flag"!==this.type&&a("button",{class:"alert__btn",onClick:()=>this.dropiButtonClick.emit()},this.buttonText),this.dismissable&&a("button",{class:"alert__close",onClick:()=>{this.showAlert=!1,this.dropiClose.emit()},"aria-label":"Cerrar"},a("dropi-icon",{name:"Close-small",iconWidth:"18px",iconHeight:"18px",color:"Gray-Gray-500"})))):null}static get style(){return":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.alert{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid transparent;width:100%}.alert--success{background:var(--Success-Success-50, #e7f8f3);border-color:var(--Success-Success-500, #0abb87)}.alert--error{background:var(--Error-Error-50, #fef0f0);border-color:var(--Error-Error-500, #f46a6b)}.alert--warning{background:var(--Warning-Warning-50, #fef8ed);border-color:var(--Warning-Warning-500, #f1b44c)}.alert--info{background:var(--Info-Info-50, #eef6fe);border-color:var(--Info-Info-500, #50a5f1)}.alert--flag{padding:var(--Size-1, 4px) var(--Size-2, 8px);border-radius:var(--Border-1, 4px);border:none !important;justify-content:center}.alert--flag .alert__body{justify-content:center;text-align:center}.alert--flag .alert__message{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular)}.alert__icon{display:flex;align-items:center;flex-shrink:0;padding-top:1px}.alert__body{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--Size-1, 4px)}.alert__message{font-size:var(--font-size-s);color:var(--Gray-600, #475066);font-weight:var(--font-weight-medium);line-height:1.5}.alert__link{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);text-decoration:underline;cursor:pointer}.alert__actions{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.alert__btn{height:28px;padding:0 var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid var(--Primary-Primary-500, #f49a3d);background:transparent;color:var(--Primary-Primary-500, #f49a3d);font-size:var(--font-size-xs, 10px);font-family:inherit;font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:background 0.15s, color 0.15s}.alert__btn:hover{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.alert__close{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;opacity:0.6;transition:opacity 0.15s}.alert__close:hover{opacity:1}"}},[513,"dropi-alert",{message:[1],type:[1],state:[1],dismissable:[4],showButton:[4,"show-button"],buttonText:[1,"button-text"],anchorText:[1,"anchor-text"],anchorUrl:[1,"anchor-url"],showAlert:[1028,"show-alert"],textLink:[1,"text-link"],linkUrl:[1,"link-url"],clickedText:[1,"clicked-text"]}]);function c(){"undefined"!=typeof customElements&&["dropi-alert","dropi-icon"].forEach((e=>{switch(e){case"dropi-alert":customElements.get(r(e))||customElements.define(r(e),l);break;case"dropi-icon":customElements.get(r(e))||o()}}))}c();export{l as D,c as d}

package/dist/components/p-t0lkpFmw.js

@@ -0,0 +1 @@
+import{t as r,p as a,H as o,c as e,h as n}from"./index.js";import{d as t}from"./p-ETg0qC-7.js";const i=a(class extends o{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.dropiClick=e(this,"dropiClick")}type="default";severity="primary";size="normal";state="default";fullWidth=!1;preIcon="";postIcon="";customIconColor="";text="";dropiClick;colorMap={default:"Primary-Primary-",success:"Success-Success-",error:"Error-Error-",info:"Info-Info-",legacy:"Secondary-Secondary-",warning:"Warning-Warning-",dropdown:"Gray-Gray-","default-light":"Gray-Gray-"};get iconSize(){return"large"===this.size?"24px":"small"===this.size?"16px":"18px"}get color(){return(this.colorMap[this.type]??"Primary-Primary-")+("disabled"===this.state?"300":"500")}get fontColor(){return"tertiary"===this.severity?"default"===this.type||"legacy"===this.type?"Gray-Gray-500":this.color:"secondary"===this.severity?this.color:"Neutral-White"}handleClick(r){"disabled"!==this.state&&"loading"!==this.state&&this.dropiClick.emit(r)}renderLoadingSpinner(){return n("svg",{class:"spin",width:this.iconSize,height:this.iconSize,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},n("path",{d:"M22.8 12C23.4627 12 24.0062 11.4614 23.9401 10.802C23.8232 9.6371 23.5362 8.49339 23.0866 7.4078C22.4835 5.95189 21.5996 4.62902 20.4853 3.51472C19.371 2.40042 18.0481 1.5165 16.5922 0.913445C15.5066 0.463778 14.3629 0.17683 13.198 0.0599502C12.5386 -0.00621439 12 0.537258 12 1.2C12 1.86274 12.5393 2.39227 13.1969 2.4749C14.0463 2.58164 14.8795 2.80176 15.6738 3.13076C16.8385 3.6132 17.8968 4.32033 18.7882 5.21177C19.6797 6.10322 20.3868 7.16151 20.8692 8.32624C21.1982 9.12051 21.4184 9.95367 21.5251 10.8031C21.6077 11.4607 22.1373 12 22.8 12Z",fill:`var(--${this.fontColor})`}))}render(){const r="disabled"===this.state||"loading"===this.state,a=""!==(this.text??""),o=""!==(this.postIcon??"")||"dropdown"===(this.type??"default"),e="dropdown"===(this.type??"default")?"Dropdown-down":this.postIcon??"";return n("button",{key:"eefda6c7ac5090173a545d67e72073dc410ff05c",class:{btn:!0,"without-text":!a,[this.severity??"primary"]:!0,[this.type??"default"]:!0,[this.size??"normal"]:!0,[this.state??"default"]:!0,"full-width":this.fullWidth},disabled:r,onClick:r=>this.handleClick(r)},this.preIcon&&n("dropi-icon",{key:"869ee8fc34dee93de0381a86db643c0fa9dc6918",name:this.preIcon,iconWidth:this.iconSize,iconHeight:this.iconSize,color:this.fontColor}),a&&n("span",{key:"927ef142b4c549d01b087722e9f6759cff44e6b2",class:"text"},this.text),o&&n("dropi-icon",{key:"cda1f5d0fa59a87abc1d3d73a87d4390f05f79eb",name:e,iconWidth:this.iconSize,iconHeight:this.iconSize,color:this.fontColor}),"loading"===this.state&&this.renderLoadingSpinner(),n("slot",{key:"c83dd79efe5d858361815878192c0c554a9234ca"}))}static get style(){return":host{display:inline-block}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:var(--font-weight-bold);min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease,     color 0.25s ease,     border-color 0.25s ease,     transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--font-size-s, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #ffffff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #ffffff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #ffffff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #ffffff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #ffffff)}.btn.secondary{background:var(--Neutral-White, #ffffff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}"}},[769,"dropi-button",{type:[1],severity:[1],size:[1],state:[1],fullWidth:[516,"full-width"],preIcon:[1,"pre-icon"],postIcon:[1,"post-icon"],customIconColor:[1,"custom-icon-color"],text:[1]}]);function c(){"undefined"!=typeof customElements&&["dropi-button","dropi-icon"].forEach((a=>{switch(a){case"dropi-button":customElements.get(r(a))||customElements.define(r(a),i);break;case"dropi-icon":customElements.get(r(a))||t()}}))}c();export{i as D,c as d}

package/dist/components/p-ujToMKti.js

@@ -0,0 +1 @@
+import{t as r,p as e,H as t,c as i,h as a}from"./index.js";import{d as o}from"./p-B9rJd-Rf.js";const n={success:"Check-circle",error:"Warning-circle",warning:"Warning-triangle",info:"Info"},s={success:"Success-Success-500",error:"Error-Error-500",warning:"Warning-Warning-500",info:"Info-Info-500"},l=e(class extends t{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.dropiClose=i(this,"dropiClose"),this.dropiButtonClick=i(this,"dropiButtonClick"),this.dropiLinkClick=i(this,"dropiLinkClick")}message="";type="default";state="success";dismissable=!0;showButton=!1;buttonText="Close";anchorText="none";anchorUrl="none";showAlert=!0;textLink="";linkUrl="";clickedText="";dropiClose;dropiButtonClick;dropiLinkClick;render(){return this.showAlert?a("div",{class:{alert:!0,[`alert--${this.type}`]:!0,[`alert--${this.state}`]:!0}},"flag"!==this.type&&a("div",{class:"alert__icon"},a("dropi-icon",{name:n[this.state],iconWidth:"18px",iconHeight:"18px",color:s[this.state]})),a("div",{class:"alert__body"},a("span",{class:"alert__message"},this.message),this.anchorText&&a("a",{class:"alert__link",href:this.anchorUrl||this.linkUrl||"#",onClick:r=>{r.preventDefault(),this.dropiLinkClick.emit()}},this.anchorText)),a("div",{class:"alert__actions"},this.showButton&&this.buttonText&&"flag"!==this.type&&a("button",{class:"alert__btn",onClick:()=>this.dropiButtonClick.emit()},this.buttonText),this.dismissable&&a("button",{class:"alert__close",onClick:()=>{this.showAlert=!1,this.dropiClose.emit()},"aria-label":"Cerrar"},a("dropi-icon",{name:"Close-small",iconWidth:"18px",iconHeight:"18px",color:"Gray-Gray-500"})))):null}static get style(){return":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.alert{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid transparent;width:100%}.alert--success{background:var(--Success-Success-50, #e7f8f3);border-color:var(--Success-Success-500, #0abb87)}.alert--error{background:var(--Error-Error-50, #fef0f0);border-color:var(--Error-Error-500, #f46a6b)}.alert--warning{background:var(--Warning-Warning-50, #fef8ed);border-color:var(--Warning-Warning-500, #f1b44c)}.alert--info{background:var(--Info-Info-50, #eef6fe);border-color:var(--Info-Info-500, #50a5f1)}.alert--flag{padding:var(--Size-1, 4px) var(--Size-2, 8px);border-radius:var(--Border-1, 4px);border:none !important;justify-content:center}.alert--flag .alert__body{justify-content:center;text-align:center}.alert--flag .alert__message{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular)}.alert__icon{display:flex;align-items:center;flex-shrink:0;padding-top:1px}.alert__body{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--Size-1, 4px)}.alert__message{font-size:var(--font-size-s);color:var(--Gray-600, #475066);font-weight:var(--font-weight-medium);line-height:1.5}.alert__link{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);text-decoration:underline;cursor:pointer}.alert__actions{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.alert__btn{height:28px;padding:0 var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid var(--Primary-Primary-500, #f49a3d);background:transparent;color:var(--Primary-Primary-500, #f49a3d);font-size:var(--font-size-xs, 10px);font-family:inherit;font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:background 0.15s, color 0.15s}.alert__btn:hover{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.alert__close{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;opacity:0.6;transition:opacity 0.15s}.alert__close:hover{opacity:1}"}},[513,"dropi-alert",{message:[1],type:[1],state:[1],dismissable:[4],showButton:[4,"show-button"],buttonText:[1,"button-text"],anchorText:[1,"anchor-text"],anchorUrl:[1,"anchor-url"],showAlert:[1028,"show-alert"],textLink:[1,"text-link"],linkUrl:[1,"link-url"],clickedText:[1,"clicked-text"]}]);function c(){"undefined"!=typeof customElements&&["dropi-alert","dropi-icon"].forEach((e=>{switch(e){case"dropi-alert":customElements.get(r(e))||customElements.define(r(e),l);break;case"dropi-icon":customElements.get(r(e))||o()}}))}c();export{l as D,c as d}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h } from './index-Cvp2LQOM.js';
+import { r as registerInstance, a as getElement, h } from './index-D0Z06C2b.js';
 
 const dropiAccordionItemCss = () => `:host{display:block;border-bottom:1px solid var(--Gray-Gray-100)}.accordion-header{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px;background:white;border:none;cursor:pointer;text-align:left}.accordion-header-left{display:flex;align-items:center;gap:8px}.accordion-title{font-size:var(--font-size-m);font-weight:var(--font-weight-semibold);color:var(--Gray-Gray-700)}.accordion-chevron{transition:transform 0.3s ease}.accordion-chevron--open{transform:rotate(180deg)}.accordion-body{overflow:hidden;transition:max-height 0.3s ease-out}.accordion-content{padding:0 16px 16px 16px}`;
 
@@ -42,7 +42,7 @@ const DropiAccordionItem = class {
         setTimeout(() => this.updateHeight(this.open), 0);
     }
     render() {
-        return (h("div", { key: '43f4ce6c38338a90a3b866a449f14e48b478e738', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, h("button", { key: 'b5150a903bf75b82ffea9707e5906dc17f0bcd1c', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: '53f5c6a4e5a9d02412145395112368ddea9af746', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: '28acd44875849665dfc58a5b3040a7ef78e92b6e', name: this.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), h("span", { key: 'c19a8f8b33ce36c1903fc428400b2e1bf9b20971', class: "accordion-title" }, this.sectionTitle)), h("span", { key: '7163175dca488646dd13de60978cd623cfc61d12', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: '10c1ea131aaaa8d0fe6542b9d8effe8b3319e3c8', name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))), h("div", { key: '2d514054e305d92ac97bf661f85d795ff4cc04a9', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: '3ff920a3cd55f22af681b90f220ce05d15db09e1', class: "accordion-content" }, h("slot", { key: 'f703b47dc51acb41b7d455c991a08c8286d53fc2' })))));
+        return (h("div", { key: '98de1df9b82f0e4e5e72702b7eaca12c0ed92586', class: { 'accordion-item': true, 'accordion-item--open': this.open, 'accordion-item--disabled': this.disabled } }, h("button", { key: 'bd5c3e6ea29feb33e5280908c98929369dc7377e', class: "accordion-header", onClick: () => this.handleToggle(), "aria-expanded": String(this.open), disabled: this.disabled }, h("span", { key: 'ced161eb1187d50b7eb2002081cd3fc008c9a16f', class: "accordion-header-left" }, this.preIcon && h("dropi-icon", { key: '09a157623f0978153b57e85a79d7beeca3faf9ab', name: this.preIcon, iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), h("span", { key: '649617f263370d1314e3145c07a3a29ce5c807b5', class: "accordion-title" }, this.sectionTitle)), h("span", { key: 'd99e3933a40ffa4b1da8091a8b6d767011f1bf6f', class: { 'accordion-chevron': true, 'accordion-chevron--open': this.open } }, h("dropi-icon", { key: '3d12ae988429fea2612c0c32c12cd81a486ad255', name: "Dropdown-down", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" }))), h("div", { key: 'cedff4803c6fa83ae9dc5cb3ce68f48150cdef67', class: "accordion-body", style: { maxHeight: this.contentHeight }, ref: (el) => this.contentRef = el }, h("div", { key: 'a37dd42bf39cf08479d847286860e78a1d80a233', class: "accordion-content" }, h("slot", { key: 'd797eac747716be1af2a6addbefe583be4a816b1' })))));
     }
     static get watchers() { return {
         "open": [{

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

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

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

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

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

@@ -1,14 +1,14 @@
-import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
 
 const dropiAlertModalCss = () => `:host{display:contents}.body-alert{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3);width:100%;flex:1;overflow:visible;padding-bottom:var(--Size-2)}.lottie-img{width:120px;height:120px;overflow:hidden;flex-shrink:0;align-self:center;margin-top:-8px;margin-bottom:var(--Size-2)}.lottie-img lottie-player{display:block;width:120px;height:120px}.lottie-img--loading{width:100%;height:120px;overflow:hidden;display:flex;align-items:center;justify-content:center}.lottie-img--loading lottie-player{width:300px;height:auto;flex-shrink:0}.content-alert{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center}.content-alert h2{color:var(--Gray-Gray-800);font-size:19px;font-weight:var(--font-weight-semibold);margin:0}.content-alert p{color:var(--Gray-Gray-500);font-size:var(--font-size-s);margin-bottom:var(--Size-2);overflow-wrap:anywhere;max-height:100px;overflow:auto}.custom-content{width:100%;text-align:left;margin-top:var(--Size-2);display:flex;flex-direction:column;gap:var(--Size-3)}.actions{display:flex;gap:var(--Size-3);width:100%}.actions dropi-button{flex:1;display:flex;justify-content:center}@media (max-width: 768px){.actions{flex-direction:column}.actions dropi-button{width:100%}}`;
 
 const DropiAlertModal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.primaryButtonEvent = createEvent(this, "primaryButtonEvent", 7);
-        this.secondaryButtonEvent = createEvent(this, "secondaryButtonEvent", 7);
-        this.modalOpenChange = createEvent(this, "modalOpenChange", 7);
-        this.onHide = createEvent(this, "onHide", 7);
+        this.dropiPrimaryClick = createEvent(this, "dropiPrimaryClick", 7);
+        this.dropiSecondaryClick = createEvent(this, "dropiSecondaryClick", 7);
+        this.dropiVisibleChange = createEvent(this, "dropiVisibleChange", 7);
+        this.dropiHide = createEvent(this, "dropiHide", 7);
     }
     /** Controls visibility */
     visible = false;
@@ -39,6 +39,10 @@ const DropiAlertModal = class {
     isStep = false;
     /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */
     baseZIndex = 0;
+    /**
+     * Use White Label (MB) illustration style instead of Lottie animation.
+     */
+    isWhiteLabel = false;
     /**
      * Convenience object prop — matches Angular `params: ModalParams`.
      * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,
@@ -69,13 +73,13 @@ const DropiAlertModal = class {
             this.displayButtons = val.displayButtons;
     }
     /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */
-    primaryButtonEvent;
+    dropiPrimaryClick;
     /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */
-    secondaryButtonEvent;
+    dropiSecondaryClick;
     /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */
-    modalOpenChange;
+    dropiVisibleChange;
     /** Emitted when modal is hidden — matches Angular 'onHide' */
-    onHide;
+    dropiHide;
     lottieMap = {
         question: '/assets/lottie-files/question.json',
         warning: '/assets/lottie-files/warning.json',
@@ -94,26 +98,26 @@ const DropiAlertModal = class {
         this.visible = false;
     }
     handlePrimary() {
-        this.primaryButtonEvent.emit(true);
+        this.dropiPrimaryClick.emit(true);
         if (!this.isStep) {
             this.visible = false;
-            this.modalOpenChange.emit(false);
+            this.dropiVisibleChange.emit(false);
         }
     }
     handleSecondary() {
-        this.secondaryButtonEvent.emit(true);
+        this.dropiSecondaryClick.emit(true);
         this.visible = false;
-        this.modalOpenChange.emit(false);
+        this.dropiVisibleChange.emit(false);
     }
     onModalHide() {
         this.visible = false;
-        this.modalOpenChange.emit(false);
-        this.onHide.emit();
+        this.dropiVisibleChange.emit(false);
+        this.dropiHide.emit();
     }
     render() {
         const lottieKey = this.loading ? 'loading' : this.type;
         const isLottieLoading = lottieKey === 'loading';
-        return (h("dropi-modal", { key: '8581cbc944d42889228cb21fa27bf4e8b3bf1e16', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onOnHide: () => this.onModalHide() }, h("div", { key: '7208cbe742dab77bcee14150998aff5647fd41af', class: "body-alert" }, this.lottieMap[lottieKey] && (h("div", { key: '3b4d36963f8d6547556eee704823c8e34805b8d8', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, h("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), h("div", { key: 'dc52f3daec2eaf7ff9f1d51c90c67bcfaafe370f', class: "content-alert" }, h("h2", { key: '685df4cb76145cf6e965dd94e5f3fe60f828100c' }, this.loading ? this.loadingTitle : this.tittle), h("p", { key: 'f9e5b699816236148bc00c5046c6cc67eb86ae01' }, this.loading ? this.loadingMessage : this.message)), h("div", { key: '2e9280865cad761bea5cdd88b972734c11ab7737', class: "custom-content" }, h("slot", { key: '4fd36baa1455e7793a1e5291b52448707e3aa448' })), !this.loading && this.displayButtons && (h("div", { key: '451bd3d90ec780499d9956a8a57a0d1461406fa9', class: "actions" }, this.secondaryButton && h("dropi-button", { key: 'b60c30cc92cc080c01e1bf337a5e4b78f561be81', text: this.secondaryButton, severity: "secondary", onClick: () => this.handleSecondary(), fullWidth: true }), h("dropi-button", { key: '2b8696a02b253d289a1baef2116cffe436346717', text: this.primaryButton, severity: "primary", onClick: () => this.handlePrimary(), fullWidth: true }))))));
+        return (h("dropi-modal", { key: '322c59ea0a067a4c0cb28a5ffbe9cbc0c642eee6', visible: this.visible, showHeader: this.closable, showCloseIcon: this.closable, dismissable: false, closeOnEscape: false, showFooter: false, size: "s", onDropiHide: () => this.onModalHide() }, h("div", { key: '06530f3da45738d1ed75a4e8b5b8b0b80dfd2647', class: "body-alert" }, this.lottieMap[lottieKey] && (h("div", { key: '7a4ab4fbbdf3cbbacfa22f918d212b788f4392a4', class: `lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}` }, h("lottie-player", { key: lottieKey, src: this.lottieMap[lottieKey], background: "transparent", speed: "1", loop: true, autoplay: true }))), h("div", { key: '0e72f42d10c59047e82df8b2842affd38ab60fc7', class: "content-alert" }, h("h2", { key: '8262de8fbcf5b87fbac34740d34d99d0b6ff921d' }, this.loading ? this.loadingTitle : this.tittle), h("p", { key: 'ca9c734e0b9686bff7e2616ae98224446ac0ca33' }, this.loading ? this.loadingMessage : this.message)), h("div", { key: '1b5edb3af1044cb0dd0b57a425517b1d824672be', class: "custom-content" }, h("slot", { key: '57f4a8acdbcf8a11445f7c8233355bb4ac46c9ab' })), !this.loading && this.displayButtons && (h("div", { key: '32580f42d98f628b4c1d1f300b5a3aaaa1be2486', class: "actions" }, this.secondaryButton && h("dropi-button", { key: 'dcf8707a7f4d8b80126a10022dd6de1c0ea44dc7', text: this.secondaryButton, severity: "secondary", onDropiClick: () => this.handleSecondary(), fullWidth: true }), h("dropi-button", { key: '3ed494fc7a83021174c4d006ae4327348d400e93', text: this.primaryButton, severity: "primary", onDropiClick: () => this.handlePrimary(), fullWidth: true }))))));
     }
     static get watchers() { return {
         "params": [{

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

@@ -1 +1 @@
-{"file":"dropi-alert-modal.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-alert-modal/dropi-alert-modal.css?tag=dropi-alert-modal","src/components/dropi-alert-modal/dropi-alert-modal.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.body-alert {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--Size-3);\n  width: 100%;\n  flex: 1;\n  overflow: visible;\n  padding-bottom: var(--Size-2);\n}\n\n/* ── Lottie regular ───────────────────────────────────────────────── */\n.lottie-img {\n  width: 120px;\n  height: 120px;\n  overflow: hidden;\n  flex-shrink: 0;\n  align-self: center;\n  margin-top: -8px;\n  margin-bottom: var(--Size-2);\n}\n\n.lottie-img lottie-player {\n  display: block;\n  width: 120px;\n  height: 120px;\n}\n\n/* ── Lottie loading ───────────────────────────────────────────────── */\n.lottie-img--loading {\n  width: 100%;\n  height: 120px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.lottie-img--loading lottie-player {\n  width: 300px;\n  height: auto;\n  flex-shrink: 0;\n}\n\n/* ── Content ──────────────────────────────────────────────────────── */\n.content-alert {\n  text-align: center;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.content-alert h2 {\n  color: var(--Gray-Gray-800);\n  font-size: 19px;\n  font-weight: var(--font-weight-semibold);\n  margin: 0;\n}\n\n.content-alert p {\n  color: var(--Gray-Gray-500);\n  font-size: var(--font-size-s);\n  margin-bottom: var(--Size-2);\n  overflow-wrap: anywhere;\n  max-height: 100px;\n  overflow: auto;\n}\n\n.custom-content {\n  width: 100%;\n  text-align: left;\n  margin-top: var(--Size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--Size-3);\n}\n\n/* ── Actions ──────────────────────────────────────────────────────── */\n.actions {\n  display: flex;\n  gap: var(--Size-3);\n  width: 100%;\n}\n\n.actions dropi-button {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n}\n\n@media (max-width: 768px) {\n  .actions {\n    flex-direction: column;\n  }\n\n  .actions dropi-button {\n    width: 100%;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Method, Watch, h } from '@stencil/core';\n\nexport type AlertModalType = 'question' | 'warning' | 'success' | 'error' | 'loading';\n\n/**\n * @component dropi-alert-modal\n * Confirmation/alert modal with Lottie animation, title, message and action buttons.\n * Uses dropi-modal internally.\n *\n * @example\n * const el = document.querySelector('dropi-alert-modal');\n * el.visible = true;\n */\n@Component({\n  tag: 'dropi-alert-modal',\n  styleUrl: 'dropi-alert-modal.css',\n  shadow: false,\n})\nexport class DropiAlertModal {\n  /** Controls visibility */\n  @Prop({ mutable: true, reflect: true }) visible: any = false;\n  /** Modal type — determines Lottie animation */\n  @Prop({ mutable: true }) type: AlertModalType = 'question';\n  /** Bold title */\n  @Prop({ mutable: true }) tittle: string = '';\n  /** Body message */\n  @Prop({ mutable: true }) message: string = '';\n  /** Primary button label */\n  @Prop({ mutable: true }) primaryButton: string = 'Accept';\n  /** Secondary button label (hidden if empty) */\n  @Prop({ mutable: true }) secondaryButton: string = '';\n  /** Show loading state with loading.json Lottie */\n  @Prop() loading: boolean = false;\n  /** Show close icon in header */\n  @Prop({ mutable: true }) closable: boolean = false;\n  /** Hide action buttons */\n  @Prop({ mutable: true }) displayButtons: boolean = true;\n  /** Loading title */\n  @Prop({ mutable: true }) loadingTitle: string = 'Loading';\n  /** Loading message */\n  @Prop({ mutable: true }) loadingMessage: string = 'Please wait a moment';\n  /**\n   * When true, primary button does NOT auto-close the modal (matches Angular `isStep`).\n   * Useful for step-by-step flows.\n   */\n  @Prop() isStep: boolean = false;\n  /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */\n  @Prop() baseZIndex: number = 0;\n  /**\n   * Convenience object prop — matches Angular `params: ModalParams`.\n   * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,\n   * loadingMessage, closable, displayButtons.\n   * When provided, its values override the corresponding individual props.\n   */\n  @Prop() params: any = null;\n\n  @Watch('params')\n  paramsChanged(val: any) {\n    if (!val) return;\n    if (val.tittle !== undefined) this.tittle = val.tittle;\n    if (val.type !== undefined) this.type = val.type;\n    if (val.message !== undefined) this.message = val.message;\n    if (val.primaryButton !== undefined) this.primaryButton = val.primaryButton;\n    if (val.secondaryButton !== undefined) this.secondaryButton = val.secondaryButton;\n    if (val.loadingTitle !== undefined) this.loadingTitle = val.loadingTitle;\n    if (val.loadingMessage !== undefined) this.loadingMessage = val.loadingMessage;\n    if (val.closable !== undefined) this.closable = val.closable;\n    if (val.displayButtons !== undefined) this.displayButtons = val.displayButtons;\n  }\n\n  /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */\n  @Event() primaryButtonEvent: EventEmitter<boolean>;\n  /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */\n  @Event() secondaryButtonEvent: EventEmitter<boolean>;\n  /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */\n  @Event() modalOpenChange: EventEmitter<boolean>;\n  /** Emitted when modal is hidden — matches Angular 'onHide' */\n  @Event() onHide: EventEmitter<void>;\n\n  private readonly lottieMap: Record<string, string> = {\n    question: '/assets/lottie-files/question.json',\n    warning: '/assets/lottie-files/warning.json',\n    success: '/assets/lottie-files/success.json',\n    error: '/assets/lottie-files/failure.json',\n    loading: '/assets/lottie-files/loading.json',\n  };\n\n  componentWillLoad() {\n    if (this.params) this.paramsChanged(this.params);\n  }\n\n  @Method() async show() {\n    this.visible = true;\n  }\n  @Method() async hide() {\n    this.visible = false;\n  }\n\n  private handlePrimary() {\n    this.primaryButtonEvent.emit(true);\n    if (!this.isStep) {\n      this.visible = false;\n      this.modalOpenChange.emit(false);\n    }\n  }\n\n  private handleSecondary() {\n    this.secondaryButtonEvent.emit(true);\n    this.visible = false;\n    this.modalOpenChange.emit(false);\n  }\n\n  private onModalHide() {\n    this.visible = false;\n    this.modalOpenChange.emit(false);\n    this.onHide.emit();\n  }\n\n  render() {\n    const lottieKey = this.loading ? 'loading' : this.type;\n    const isLottieLoading = lottieKey === 'loading';\n\n    return (\n      <dropi-modal\n        visible={this.visible}\n        showHeader={this.closable}\n        showCloseIcon={this.closable}\n        dismissable={false}\n        closeOnEscape={false}\n        showFooter={false}\n        size=\"s\"\n        onOnHide={() => this.onModalHide()}\n      >\n        <div class=\"body-alert\">\n          {this.lottieMap[lottieKey] && (\n            <div class={`lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}`}>\n              <lottie-player\n                key={lottieKey}\n                src={this.lottieMap[lottieKey]}\n                background=\"transparent\"\n                speed=\"1\"\n                loop\n                autoplay\n              />\n            </div>\n          )}\n\n          <div class=\"content-alert\">\n            <h2>{this.loading ? this.loadingTitle : this.tittle}</h2>\n            <p>{this.loading ? this.loadingMessage : this.message}</p>\n          </div>\n\n          <div class=\"custom-content\">\n            <slot />\n          </div>\n\n          {!this.loading && this.displayButtons && (\n            <div class=\"actions\">\n              {this.secondaryButton && <dropi-button text={this.secondaryButton} severity=\"secondary\" onClick={() => this.handleSecondary()} fullWidth />}\n              <dropi-button text={this.primaryButton} severity=\"primary\" onClick={() => this.handlePrimary()} fullWidth />\n            </div>\n          )}\n        </div>\n      </dropi-modal>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-alert-modal.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-alert-modal/dropi-alert-modal.css?tag=dropi-alert-modal","src/components/dropi-alert-modal/dropi-alert-modal.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.body-alert {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--Size-3);\n  width: 100%;\n  flex: 1;\n  overflow: visible;\n  padding-bottom: var(--Size-2);\n}\n\n/* ── Lottie regular ───────────────────────────────────────────────── */\n.lottie-img {\n  width: 120px;\n  height: 120px;\n  overflow: hidden;\n  flex-shrink: 0;\n  align-self: center;\n  margin-top: -8px;\n  margin-bottom: var(--Size-2);\n}\n\n.lottie-img lottie-player {\n  display: block;\n  width: 120px;\n  height: 120px;\n}\n\n/* ── Lottie loading ───────────────────────────────────────────────── */\n.lottie-img--loading {\n  width: 100%;\n  height: 120px;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.lottie-img--loading lottie-player {\n  width: 300px;\n  height: auto;\n  flex-shrink: 0;\n}\n\n/* ── Content ──────────────────────────────────────────────────────── */\n.content-alert {\n  text-align: center;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.content-alert h2 {\n  color: var(--Gray-Gray-800);\n  font-size: 19px;\n  font-weight: var(--font-weight-semibold);\n  margin: 0;\n}\n\n.content-alert p {\n  color: var(--Gray-Gray-500);\n  font-size: var(--font-size-s);\n  margin-bottom: var(--Size-2);\n  overflow-wrap: anywhere;\n  max-height: 100px;\n  overflow: auto;\n}\n\n.custom-content {\n  width: 100%;\n  text-align: left;\n  margin-top: var(--Size-2);\n  display: flex;\n  flex-direction: column;\n  gap: var(--Size-3);\n}\n\n/* ── Actions ──────────────────────────────────────────────────────── */\n.actions {\n  display: flex;\n  gap: var(--Size-3);\n  width: 100%;\n}\n\n.actions dropi-button {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n}\n\n@media (max-width: 768px) {\n  .actions {\n    flex-direction: column;\n  }\n\n  .actions dropi-button {\n    width: 100%;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, Method, Watch, h } from '@stencil/core';\n\nexport type AlertModalType = 'question' | 'warning' | 'success' | 'error' | 'loading';\n\n/**\n * @component dropi-alert-modal\n * Confirmation/alert modal with Lottie animation, title, message and action buttons.\n * Uses dropi-modal internally.\n *\n * @example\n * const el = document.querySelector('dropi-alert-modal');\n * el.visible = true;\n */\n@Component({\n  tag: 'dropi-alert-modal',\n  styleUrl: 'dropi-alert-modal.css',\n  shadow: false,\n})\nexport class DropiAlertModal {\n  /** Controls visibility */\n  @Prop({ mutable: true, reflect: true }) visible: any = false;\n  /** Modal type — determines Lottie animation */\n  @Prop({ mutable: true }) type: AlertModalType = 'question';\n  /** Bold title */\n  @Prop({ mutable: true }) tittle: string = '';\n  /** Body message */\n  @Prop({ mutable: true }) message: string = '';\n  /** Primary button label */\n  @Prop({ mutable: true }) primaryButton: string = 'Accept';\n  /** Secondary button label (hidden if empty) */\n  @Prop({ mutable: true }) secondaryButton: string = '';\n  /** Show loading state with loading.json Lottie */\n  @Prop() loading: boolean = false;\n  /** Show close icon in header */\n  @Prop({ mutable: true }) closable: boolean = false;\n  /** Hide action buttons */\n  @Prop({ mutable: true }) displayButtons: boolean = true;\n  /** Loading title */\n  @Prop({ mutable: true }) loadingTitle: string = 'Loading';\n  /** Loading message */\n  @Prop({ mutable: true }) loadingMessage: string = 'Please wait a moment';\n  /**\n   * When true, primary button does NOT auto-close the modal (matches Angular `isStep`).\n   * Useful for step-by-step flows.\n   */\n  @Prop() isStep: boolean = false;\n  /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */\n  @Prop() baseZIndex: number = 0;\n  /**\n   * Use White Label (MB) illustration style instead of Lottie animation.\n   */\n  @Prop() isWhiteLabel: boolean = false;\n  /**\n   * Convenience object prop — matches Angular `params: ModalParams`.\n   * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,\n   * loadingMessage, closable, displayButtons.\n   * When provided, its values override the corresponding individual props.\n   */\n  @Prop() params: any = null;\n\n  @Watch('params')\n  paramsChanged(val: any) {\n    if (!val) return;\n    if (val.tittle !== undefined) this.tittle = val.tittle;\n    if (val.type !== undefined) this.type = val.type;\n    if (val.message !== undefined) this.message = val.message;\n    if (val.primaryButton !== undefined) this.primaryButton = val.primaryButton;\n    if (val.secondaryButton !== undefined) this.secondaryButton = val.secondaryButton;\n    if (val.loadingTitle !== undefined) this.loadingTitle = val.loadingTitle;\n    if (val.loadingMessage !== undefined) this.loadingMessage = val.loadingMessage;\n    if (val.closable !== undefined) this.closable = val.closable;\n    if (val.displayButtons !== undefined) this.displayButtons = val.displayButtons;\n  }\n\n  /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */\n  @Event() dropiPrimaryClick: EventEmitter<boolean>;\n  /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */\n  @Event() dropiSecondaryClick: EventEmitter<boolean>;\n  /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */\n  @Event() dropiVisibleChange: EventEmitter<boolean>;\n  /** Emitted when modal is hidden — matches Angular 'onHide' */\n  @Event() dropiHide: EventEmitter<void>;\n\n  private readonly lottieMap: Record<string, string> = {\n    question: '/assets/lottie-files/question.json',\n    warning: '/assets/lottie-files/warning.json',\n    success: '/assets/lottie-files/success.json',\n    error: '/assets/lottie-files/failure.json',\n    loading: '/assets/lottie-files/loading.json',\n  };\n\n  componentWillLoad() {\n    if (this.params) this.paramsChanged(this.params);\n  }\n\n  @Method() async show() {\n    this.visible = true;\n  }\n  @Method() async hide() {\n    this.visible = false;\n  }\n\n  private handlePrimary() {\n    this.dropiPrimaryClick.emit(true);\n    if (!this.isStep) {\n      this.visible = false;\n      this.dropiVisibleChange.emit(false);\n    }\n  }\n\n  private handleSecondary() {\n    this.dropiSecondaryClick.emit(true);\n    this.visible = false;\n    this.dropiVisibleChange.emit(false);\n  }\n\n  private onModalHide() {\n    this.visible = false;\n    this.dropiVisibleChange.emit(false);\n    this.dropiHide.emit();\n  }\n\n  render() {\n    const lottieKey = this.loading ? 'loading' : this.type;\n    const isLottieLoading = lottieKey === 'loading';\n\n    return (\n      <dropi-modal\n        visible={this.visible}\n        showHeader={this.closable}\n        showCloseIcon={this.closable}\n        dismissable={false}\n        closeOnEscape={false}\n        showFooter={false}\n        size=\"s\"\n        onDropiHide={() => this.onModalHide()}\n      >\n        <div class=\"body-alert\">\n          {this.lottieMap[lottieKey] && (\n            <div class={`lottie-img${isLottieLoading ? ' lottie-img--loading' : ''}`}>\n              <lottie-player\n                key={lottieKey}\n                src={this.lottieMap[lottieKey]}\n                background=\"transparent\"\n                speed=\"1\"\n                loop\n                autoplay\n              />\n            </div>\n          )}\n\n          <div class=\"content-alert\">\n            <h2>{this.loading ? this.loadingTitle : this.tittle}</h2>\n            <p>{this.loading ? this.loadingMessage : this.message}</p>\n          </div>\n\n          <div class=\"custom-content\">\n            <slot />\n          </div>\n\n          {!this.loading && this.displayButtons && (\n            <div class=\"actions\">\n              {this.secondaryButton && <dropi-button text={this.secondaryButton} severity=\"secondary\" onDropiClick={() => this.handleSecondary()} fullWidth />}\n              <dropi-button text={this.primaryButton} severity=\"primary\" onDropiClick={() => this.handlePrimary()} fullWidth />\n            </div>\n          )}\n        </div>\n      </dropi-modal>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
 
 const dropiAlertCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.alert{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid transparent;width:100%}.alert--success{background:var(--Success-Success-50, #e7f8f3);border-color:var(--Success-Success-500, #0abb87)}.alert--error{background:var(--Error-Error-50, #fef0f0);border-color:var(--Error-Error-500, #f46a6b)}.alert--warning{background:var(--Warning-Warning-50, #fef8ed);border-color:var(--Warning-Warning-500, #f1b44c)}.alert--info{background:var(--Info-Info-50, #eef6fe);border-color:var(--Info-Info-500, #50a5f1)}.alert--flag{padding:var(--Size-1, 4px) var(--Size-2, 8px);border-radius:var(--Border-1, 4px);border:none !important;justify-content:center}.alert--flag .alert__body{justify-content:center;text-align:center}.alert--flag .alert__message{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular)}.alert__icon{display:flex;align-items:center;flex-shrink:0;padding-top:1px}.alert__body{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--Size-1, 4px)}.alert__message{font-size:var(--font-size-s);color:var(--Gray-600, #475066);font-weight:var(--font-weight-medium);line-height:1.5}.alert__link{font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);text-decoration:underline;cursor:pointer}.alert__actions{display:flex;align-items:center;gap:var(--Size-2, 8px);flex-shrink:0}.alert__btn{height:28px;padding:0 var(--Size-3, 12px);border-radius:var(--Border-2, 8px);border:1px solid var(--Primary-Primary-500, #f49a3d);background:transparent;color:var(--Primary-Primary-500, #f49a3d);font-size:var(--font-size-xs, 10px);font-family:inherit;font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:background 0.15s, color 0.15s}.alert__btn:hover{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.alert__close{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;opacity:0.6;transition:opacity 0.15s}.alert__close:hover{opacity:1}`;
 
 const STATE_ICONS = {
     success: 'Check-circle',
-    error: 'Warning-circle',
-    warning: 'Warning-triangle',
+    error: 'Cross-circle',
+    warning: 'Warning-circle',
     info: 'Info',
 };
 const STATE_COLORS = {
@@ -17,9 +17,9 @@ const STATE_COLORS = {
 const DropiAlert = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onClose = createEvent(this, "onClose", 7);
-        this.onButtonClick = createEvent(this, "onButtonClick", 7);
-        this.onClickLink = createEvent(this, "onClickLink", 7);
+        this.dropiClose = createEvent(this, "dropiClose", 7);
+        this.dropiButtonClick = createEvent(this, "dropiButtonClick", 7);
+        this.dropiLinkClick = createEvent(this, "dropiLinkClick", 7);
     }
     /** Alert message text (supports plain text) */
     message = '';
@@ -34,9 +34,9 @@ const DropiAlert = class {
     /** Action button label */
     buttonText = 'Close';
     /** Anchor/link label */
-    anchorText = 'none';
+    anchorText = '';
     /** Anchor href */
-    anchorUrl = 'none';
+    anchorUrl = '';
     /** Whether the alert is visible */
     showAlert = true;
     /** Link text (alternative to anchorText) */
@@ -46,15 +46,15 @@ const DropiAlert = class {
     /** Clicked text tracking */
     clickedText = '';
     /** Emitted when the alert is dismissed */
-    onClose;
+    dropiClose;
     /** Emitted when the action button is clicked */
-    onButtonClick;
+    dropiButtonClick;
     /** Emitted when the anchor link is clicked */
-    onClickLink;
+    dropiLinkClick;
     render() {
         if (!this.showAlert)
             return null;
-        return (h("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, this.type !== 'flag' && (h("div", { class: "alert__icon" }, h("dropi-icon", { name: STATE_ICONS[this.state], iconWidth: "18px", iconHeight: "18px", color: STATE_COLORS[this.state] }))), h("div", { class: "alert__body" }, h("span", { class: "alert__message" }, this.message), this.anchorText && (h("a", { class: "alert__link", href: this.anchorUrl || this.linkUrl || '#', onClick: (e) => { e.preventDefault(); this.onClickLink.emit(); } }, this.anchorText))), h("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (h("button", { class: "alert__btn", onClick: () => this.onButtonClick.emit() }, this.buttonText)), this.dismissable && (h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.onClose.emit(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" }))))));
+        return (h("div", { class: { 'alert': true, [`alert--${this.type}`]: true, [`alert--${this.state}`]: true } }, this.type !== 'flag' && (h("div", { class: "alert__icon" }, h("dropi-icon", { name: STATE_ICONS[this.state], iconWidth: "18px", iconHeight: "18px", color: STATE_COLORS[this.state] }))), h("div", { class: "alert__body" }, h("span", { class: "alert__message", innerHTML: this.message }), this.clickedText && (h("a", { class: "alert__link", href: "#", onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.clickedText)), (this.anchorText || this.textLink) && (h("a", { class: "alert__link", href: this.anchorUrl || this.linkUrl || '#', onClick: (e) => { e.preventDefault(); this.dropiLinkClick.emit(); } }, this.anchorText || this.textLink))), h("div", { class: "alert__actions" }, this.showButton && this.buttonText && this.type !== 'flag' && (h("button", { class: "alert__btn", onClick: () => this.dropiButtonClick.emit() }, this.buttonText)), this.dismissable && (h("button", { class: "alert__close", onClick: () => { this.showAlert = false; this.dropiClose.emit(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-small", iconWidth: "18px", iconHeight: "18px", color: "Gray-Gray-500" }))))));
     }
 };
 DropiAlert.style = dropiAlertCss();

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

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

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-Cvp2LQOM.js';
+import { r as registerInstance, h } from './index-D0Z06C2b.js';
 
 const dropiAvatarsCss = () => `:host{display:inline-block}.avatar{margin:0;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.avatar--users,.avatar--transport,.avatar--payment{width:35px;height:35px}.avatar--supplier{width:70px;height:70px}.avatar--counter{width:33px;height:33px}.avatar__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background-color:var(--Primary-Primary-100, #fde9d0);color:var(--Primary-Primary-600, #d4872e);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700);text-transform:uppercase;letter-spacing:0.5px}`;
 

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

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

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-Cvp2LQOM.js';
+import { r as registerInstance, h } from './index-D0Z06C2b.js';
 
 const dropiBadgeCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.tag-state{border-radius:12px;padding:2px 10px;display:flex;align-items:center;gap:4px}.tag-state svg{width:13px}.tag-state p{font-size:13px;font-weight:var(--font-weight-medium);line-height:20px;margin:0;padding:0}.tag-state.active{background:var(--Success-Success-50, #e7f8f3);color:var(--Success-Success-500, #0abb87)}.tag-state.pending{color:var(--Orange-orange-500, #f49a3d);background:var(--Orange-orange-50, #fef5ec)}.tag-state.canceled,.tag-state.frozen{color:var(--Gray-Gray-500, #69738c);background:var(--Gray-Gray-50, #f7f8fa)}`;
 

package/dist/dropi-ui/dropi-banner-external.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-D0Z06C2b.js';
 
 const dropiBannerExternalCss = () => `:host{display:block;width:100%}.dropi-banner-external{display:block;width:100%;position:relative;margin-bottom:16px;border-radius:var(--Border-2, 8px)}.dropi-banner-external a{display:block;text-decoration:none}.click-wrapper{cursor:pointer}.inner{position:relative;display:block}.inner img{display:block;width:100%;height:auto;border-radius:var(--Border-2, 8px);max-width:1220px;margin:auto}.close-btn{position:absolute;top:4px;right:4px;background:rgba(255, 255, 255, 0.8);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background 0.15s ease}.close-btn:hover{background:rgba(255, 255, 255, 1)}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
 
 const dropiBreadcrumbCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.breadcrumb{margin:0}.crumb-list{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.crumb-home{display:flex;padding-right:4px;align-items:center;gap:4px}.home-link{display:inline-flex;align-items:center;color:var(--Gray-Gray-500, #69738c);text-decoration:none;transition:color 0.2s ease}.home-link:hover{color:var(--Gray-Gray-700, #32394d)}.crumb{display:flex;padding:0 4px;align-items:center;gap:8px}.crumb-link{color:var(--Gray-Gray-500, #69738c);text-align:center;cursor:pointer;text-decoration:none;transition:color 0.2s ease;font-size:var(--font-size-s, 12px)}.crumb-link:hover{color:var(--Gray-Gray-700, #32394d);text-decoration:underline}.crumb-link.disabled{pointer-events:none;color:var(--Gray-Gray-300, #a1a8b8);cursor:not-allowed;text-decoration:none}.current{color:var(--Gray-Gray-700, #32394d);cursor:default;font-size:var(--font-size-s, 12px)}`;
 

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
 
-const dropiButtonCss = () => `:host{display:inline-block}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:var(--font-weight-bold);min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease,     color 0.25s ease,     border-color 0.25s ease,     transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--font-size-s, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #ffffff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #ffffff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #ffffff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #ffffff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #ffffff)}.btn.secondary{background:var(--Neutral-White, #ffffff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
+const dropiButtonCss = () => `:host{display:inline-block;border:0}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:var(--font-weight-bold);min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease,     color 0.25s ease,     border-color 0.25s ease,     transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--font-size-s, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #ffffff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #ffffff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #ffffff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #ffffff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #ffffff)}.btn.secondary{background:var(--Neutral-White, #ffffff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:none !important;box-shadow:none !important;color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{background:var(--Gray-Gray-50, #f5f6f8);box-shadow:none !important;color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:none !important;color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
 
 const DropiButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onClick = createEvent(this, "onClick", 7);
+        this.dropiClick = createEvent(this, "dropiClick", 7);
     }
     /** Visual color palette */
     type = 'default';
@@ -26,7 +26,7 @@ const DropiButton = class {
     /** Button label */
     text = '';
     /** Emitted on click (not emitted when disabled or loading) */
-    onClick;
+    dropiClick;
     colorMap = {
         default: 'Primary-Primary-',
         success: 'Success-Success-',
@@ -58,7 +58,7 @@ const DropiButton = class {
     }
     handleClick(e) {
         if (this.state !== 'disabled' && this.state !== 'loading') {
-            this.onClick.emit(e);
+            this.dropiClick.emit(e);
         }
     }
     renderLoadingSpinner() {
@@ -69,7 +69,7 @@ const DropiButton = class {
         const hasText = (this.text ?? '') !== '';
         const showPostIcon = (this.postIcon ?? '') !== '' || (this.type ?? 'default') === 'dropdown';
         const dropdownIcon = (this.type ?? 'default') === 'dropdown' ? 'Dropdown-down' : (this.postIcon ?? '');
-        return (h("button", { key: 'a8771ab61e78941d1bfd7b987a02dfe2e9d22a31', class: {
+        return (h("button", { key: 'eefda6c7ac5090173a545d67e72073dc410ff05c', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity ?? 'primary']: true,
@@ -77,7 +77,7 @@ const DropiButton = class {
                 [this.size ?? 'normal']: true,
                 [this.state ?? 'default']: true,
                 'full-width': this.fullWidth,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '374403bce1d33e39f3834d6e10dfec5ac7ca7e0c', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && h("span", { key: '65d5e45f4df8df2795be3b6bf09c9576f8497664', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: 'b3d1459260a3d7159ddf1193aa29672e8d8d3800', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'ae37b4195f35b02d70e166fcba27939f38d35326' })));
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '869ee8fc34dee93de0381a86db643c0fa9dc6918', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && h("span", { key: '927ef142b4c549d01b087722e9f6759cff44e6b2', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: 'cda1f5d0fa59a87abc1d3d73a87d4390f05f79eb', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'c83dd79efe5d858361815878192c0c554a9234ca' })));
     }
 };
 DropiButton.style = dropiButtonCss();