@dropi/ui 0.1.42 → 0.1.44

package/dist/components/p-Dnx3uXgo.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-B9rJd-Rf.js";const i=a(class extends o{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.dropiClick=e(this,"dropiClick"),this.internals=this.attachInternals()}internals;type="default";severity="primary";size="normal";state="default";fullWidth=!1;preIcon="";postIcon="";customIconColor="";text="";nativeType="button";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),"submit"===this.nativeType?this.internals.form?.requestSubmit():"reset"===this.nativeType&&this.internals.form?.reset())}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:"21d2654de08dff8db6c2b1ba87594e1184a7aa35",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},type:this.nativeType,disabled:r,onClick:r=>this.handleClick(r)},this.preIcon&&n("dropi-icon",{key:"6c6c01c923a37df20b614602b18cd2da949bcb91",name:this.preIcon,iconWidth:this.iconSize,iconHeight:this.iconSize,color:this.fontColor}),a&&n("span",{key:"82447aab8b87bc4a89105cd0209e6c5681222f28",class:"text"},this.text),o&&n("dropi-icon",{key:"6bdefe7c1c819b213d24e0100c2303fb7840ea00",name:e,iconWidth:this.iconSize,iconHeight:this.iconSize,color:this.fontColor}),"loading"===this.state&&this.renderLoadingSpinner(),n("slot",{key:"44483caf52d2ca617ad86c1574a54709f8e77ab5"}))}static get formAssociated(){return!0}static get style(){return":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)}}"}},[833,"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],nativeType:[1,"native-type"]}]);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-HCtk4_Dq.js

@@ -1 +1 @@
-import{t as o,p as e,H as t,c as a,B as i,h as s}from"./index.js";const l=e(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dropiShow=a(this,"dropiShow",5),this.dropiHide=a(this,"dropiHide",5),this.dropiVisibleChange=a(this,"dropiVisibleChange",5)}visible=!1;header=null;showCloseIcon=!0;dismissable=!0;dismissableMask=!0;dismissible=!0;closeOnEscape=!0;modal=!0;closable=!0;blockScroll=!0;showHeader=!0;showFooter=!0;position="center";size="m";styleClass=null;maxWidth=null;autoZIndex=!0;baseZIndex=1100;transitionOptions="0.15s";enableBeforeClose=!1;isDraggable=!1;resizable=!1;dropiShow;dropiHide;dropiVisibleChange;isOpen=!1;isClosing=!1;mounted=!1;closeTimer=null;keyHandler=null;canDismiss=!1;visibleChanged(o){o?this.openModal():this.startClose()}componentDidLoad(){this.visible&&this.openModal()}disconnectedCallback(){this.removeKeyHandler(),this.closeTimer&&clearTimeout(this.closeTimer),"undefined"!=typeof document&&document.body.classList.remove("dropi-modal-open")}async dismiss(){this.visible?(this.visible=!1,this.dropiVisibleChange.emit(!1)):this.startClose()}async openModalExternally(){this.visible=!0,this.dropiVisibleChange.emit(!0)}openModal(){console.log("[DropiModal] Opening Modal..."),this.closeTimer&&(clearTimeout(this.closeTimer),this.closeTimer=null),this.isClosing=!1,this.mounted=!0,requestAnimationFrame((()=>requestAnimationFrame((()=>{this.isOpen=!0,this.dropiShow.emit()})))),this.addKeyHandler(),this.canDismiss=!1,setTimeout((()=>{this.canDismiss=!0}),300),(this.modal??1)&&i.isBrowser&&document.body&&document.body.classList.add("dropi-modal-open")}startClose(){console.log("[DropiModal] Starting close sequence..."),!this.isClosing&&this.mounted&&(this.isClosing=!0,this.isOpen=!1,this.removeKeyHandler(),this.closeTimer&&clearTimeout(this.closeTimer),this.closeTimer=setTimeout((()=>{this.mounted=!1,this.isClosing=!1,this.closeTimer=null,(this.modal??1)&&i.isBrowser&&document.body&&document.body.classList.remove("dropi-modal-open"),console.log("[DropiModal] Emitting dropiHide"),this.dropiHide.emit()}),200))}addKeyHandler(){this.closeOnEscape&&(this.keyHandler=o=>{"Escape"===o.key&&this.visible&&this.dismissable&&this.canDismiss&&this.dismiss()},document.addEventListener("keydown",this.keyHandler))}removeKeyHandler(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}render(){return s("div",{key:"90ac42909eda5123a00d0eb706798f7258ecd570",class:`modal-root modal-root--${this.position}${this.isOpen?" modal-root--open":""}${this.isClosing?" modal-root--closing":""}`},(this.modal??!0)&&s("div",{key:"ff63d1d6ab3b0231b64e8d4eb70b572558b28944",class:"modal-mask",onClick:()=>this.canDismiss&&this.dismissable&&this.dismiss()}),s("div",{key:"a292cf62ce57be1168fc7cd92b35bf37d24b94c5",class:`modal-panel size-${this.size||"m"}`,role:"dialog","aria-modal":"true"},this.showHeader&&s("div",{key:"7052d9fac22e3a7369fcf75e5ca9236dfd8de4b6",class:"modal-header"},this.header&&s("span",{key:"948e56b9727d586118d867cdb3fc1bb4a6835d6f",class:"modal-title"},this.header),s("slot",{key:"9e7707b63447e3560bc040d690aea98908723608",name:"header"}),this.showCloseIcon&&s("button",{key:"f6e893af0948e73d6f02284c6d457166d7c48f1a",class:"modal-close",onClick:()=>this.dismiss(),"aria-label":"Cerrar"},"×")),s("div",{key:"d670416586eb284830f9e0f31e162dc9d36b2ca4",class:"modal-content"},s("slot",{key:"ed5d74c6cf62fc22fd0512a91a4dba6484946d91"})),this.showFooter&&s("div",{key:"d1ff19f383b591535dfcd4ca35ab49d897e872c6",class:"modal-footer"},s("slot",{key:"4b6aa3bbdb8b80227757c1ec51daad608c333f3c",name:"footer"}))))}static get watchers(){return{visible:[{visibleChanged:0}]}}static get style(){return":host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:9999;visibility:hidden}.modal-root--open{opacity:1;pointer-events:auto;visibility:visible}.modal-root--closing{opacity:1;pointer-events:none;visibility:visible}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:var(--font-weight-bold);flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%;margin-top:auto;flex-shrink:0}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}::slotted(.button-container)>*{width:100%}::slotted(.button-container) dropi-button{width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer{justify-content:center}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-xxl{width:1214px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}"}},[769,"dropi-modal",{visible:[1540],header:[1],showCloseIcon:[4,"show-close-icon"],dismissable:[4],dismissableMask:[4,"dismissable-mask"],dismissible:[4],closeOnEscape:[4,"close-on-escape"],modal:[4],closable:[4],blockScroll:[4,"block-scroll"],showHeader:[4,"show-header"],showFooter:[4,"show-footer"],position:[1],size:[1],styleClass:[1,"style-class"],maxWidth:[1,"max-width"],autoZIndex:[4,"auto-z-index"],baseZIndex:[2,"base-z-index"],transitionOptions:[1,"transition-options"],enableBeforeClose:[4,"enable-before-close"],isDraggable:[4,"is-draggable"],resizable:[4],isOpen:[32],isClosing:[32],mounted:[32],dismiss:[64],openModalExternally:[64]},void 0,{visible:[{visibleChanged:0}]}]);function d(){"undefined"!=typeof customElements&&["dropi-modal"].forEach((e=>{"dropi-modal"===e&&(customElements.get(o(e))||customElements.define(o(e),l))}))}d();export{l as D,d}
+import{t as o,p as e,H as t,c as a,B as i,h as s}from"./index.js";const l=e(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dropiShow=a(this,"dropiShow",5),this.dropiHide=a(this,"dropiHide",5),this.dropiVisibleChange=a(this,"dropiVisibleChange",5)}visible=!1;header=null;showCloseIcon=!0;dismissable=!0;dismissableMask=!0;dismissible=!0;closeOnEscape=!0;modal=!0;closable=!0;blockScroll=!0;showHeader=!0;showFooter=!0;position="center";size="m";styleClass=null;maxWidth=null;autoZIndex=!0;baseZIndex=1100;transitionOptions="0.15s";enableBeforeClose=!1;isDraggable=!1;resizable=!1;dropiShow;dropiHide;dropiVisibleChange;isOpen=!1;isClosing=!1;mounted=!1;closeTimer=null;keyHandler=null;canDismiss=!1;visibleChanged(o){o?this.openModal():this.startClose()}componentDidLoad(){this.visible&&this.openModal()}disconnectedCallback(){this.removeKeyHandler(),this.closeTimer&&clearTimeout(this.closeTimer),"undefined"!=typeof document&&document.body.classList.remove("dropi-modal-open")}async dismiss(){this.visible?(this.visible=!1,this.dropiVisibleChange.emit(!1)):this.startClose()}async openModalExternally(){this.visible=!0,this.dropiVisibleChange.emit(!0)}openModal(){console.log("[DropiModal] Opening Modal..."),this.closeTimer&&(clearTimeout(this.closeTimer),this.closeTimer=null),this.isClosing=!1,this.mounted=!0,requestAnimationFrame((()=>requestAnimationFrame((()=>{this.isOpen=!0,this.dropiShow.emit()})))),this.addKeyHandler(),this.canDismiss=!1,setTimeout((()=>{this.canDismiss=!0}),300),(this.modal??1)&&i.isBrowser&&document.body&&document.body.classList.add("dropi-modal-open")}startClose(){console.log("[DropiModal] Starting close sequence..."),!this.isClosing&&this.mounted&&(this.isClosing=!0,this.isOpen=!1,this.removeKeyHandler(),this.closeTimer&&clearTimeout(this.closeTimer),this.closeTimer=setTimeout((()=>{this.mounted=!1,this.isClosing=!1,this.closeTimer=null,(this.modal??1)&&i.isBrowser&&document.body&&document.body.classList.remove("dropi-modal-open"),console.log("[DropiModal] Emitting dropiHide"),this.dropiHide.emit()}),200))}addKeyHandler(){this.closeOnEscape&&(this.keyHandler=o=>{"Escape"===o.key&&this.visible&&this.dismissable&&this.canDismiss&&this.dismiss()},document.addEventListener("keydown",this.keyHandler))}removeKeyHandler(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}render(){return s("div",{key:"90ac42909eda5123a00d0eb706798f7258ecd570",class:`modal-root modal-root--${this.position}${this.isOpen?" modal-root--open":""}${this.isClosing?" modal-root--closing":""}`},(this.modal??!0)&&s("div",{key:"ff63d1d6ab3b0231b64e8d4eb70b572558b28944",class:"modal-mask",onClick:()=>this.canDismiss&&this.dismissable&&this.dismiss()}),s("div",{key:"a292cf62ce57be1168fc7cd92b35bf37d24b94c5",class:`modal-panel size-${this.size||"m"}`,role:"dialog","aria-modal":"true"},this.showHeader&&s("div",{key:"7052d9fac22e3a7369fcf75e5ca9236dfd8de4b6",class:"modal-header"},this.header&&s("span",{key:"948e56b9727d586118d867cdb3fc1bb4a6835d6f",class:"modal-title"},this.header),s("slot",{key:"9e7707b63447e3560bc040d690aea98908723608",name:"header"}),this.showCloseIcon&&s("button",{key:"f6e893af0948e73d6f02284c6d457166d7c48f1a",class:"modal-close",onClick:()=>this.dismiss(),"aria-label":"Cerrar"},"×")),s("div",{key:"d670416586eb284830f9e0f31e162dc9d36b2ca4",class:"modal-content"},s("slot",{key:"ed5d74c6cf62fc22fd0512a91a4dba6484946d91"})),this.showFooter&&s("div",{key:"d1ff19f383b591535dfcd4ca35ab49d897e872c6",class:"modal-footer"},s("slot",{key:"4b6aa3bbdb8b80227757c1ec51daad608c333f3c",name:"footer"}))))}static get watchers(){return{visible:[{visibleChanged:0}]}}static get style(){return":host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:11000;visibility:hidden}.modal-root--open{opacity:1;pointer-events:auto;visibility:visible}.modal-root--closing{opacity:1;pointer-events:none;visibility:visible}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:var(--font-weight-bold);flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%;margin-top:auto;flex-shrink:0}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}::slotted(.button-container)>*{width:100%}::slotted(.button-container) dropi-button{width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer{justify-content:center}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-xxl{width:1214px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}"}},[769,"dropi-modal",{visible:[1540],header:[1],showCloseIcon:[4,"show-close-icon"],dismissable:[4],dismissableMask:[4,"dismissable-mask"],dismissible:[4],closeOnEscape:[4,"close-on-escape"],modal:[4],closable:[4],blockScroll:[4,"block-scroll"],showHeader:[4,"show-header"],showFooter:[4,"show-footer"],position:[1],size:[1],styleClass:[1,"style-class"],maxWidth:[1,"max-width"],autoZIndex:[4,"auto-z-index"],baseZIndex:[2,"base-z-index"],transitionOptions:[1,"transition-options"],enableBeforeClose:[4,"enable-before-close"],isDraggable:[4,"is-draggable"],resizable:[4],isOpen:[32],isClosing:[32],mounted:[32],dismiss:[64],openModalExternally:[64]},void 0,{visible:[{visibleChanged:0}]}]);function d(){"undefined"!=typeof customElements&&["dropi-modal"].forEach((e=>{"dropi-modal"===e&&(customElements.get(o(e))||customElements.define(o(e),l))}))}d();export{l as D,d}

package/dist/components/p-Qrac2GRu.js

@@ -0,0 +1 @@
+import{t as e,p as c,H as t,c as i,h as r}from"./index.js";const s=c(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiChange=i(this,"dropiChange"),this.internals=this.attachInternals()}internals;name="";checked=!1;disabled=!1;dropiChange;checkedChanged(e){this.internals.setFormValue(e?"on":null)}componentWillLoad(){this.internals.setFormValue(this.checked?"on":null)}changeState(){this.disabled||(this.checked=!this.checked,this.dropiChange.emit(this.checked))}render(){return r("div",{key:"27fec5f03a48c19652c8ae01173dcbb6e3514693",class:"container-dropi-checkbox",onClick:()=>this.changeState()},r("div",{key:"243d07e4444c0dc149ff137258f9ddd58428c438",class:{check:!0,isCheck:this.checked,noCheck:!this.checked,disabled:this.disabled}},r("svg",{key:"7a1fd9c7b3fa575ec263fe5ad48fbc0294a79980",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 24 24",fill:"none"},r("path",{key:"e77e5cd40c71e542a045934641509e41a7cd4899",d:"M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z",fill:"#FFFFFF"}))))}static get formAssociated(){return!0}static get watchers(){return{checked:[{checkedChanged:0}]}}static get style(){return":host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.container-dropi-checkbox{display:inline-block}.check{width:20px;height:20px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background-color 0.3s ease-in-out,     border-style 0.3s ease-in-out}.noCheck{border-style:solid;border-width:2px;border-color:var(--Gray-Gray-200, #c3c9d9);display:flex;justify-content:center;align-items:center}.noCheck svg{visibility:hidden}.isCheck{display:flex;background-color:var(--Primary-Primary-500, #f49a3d);justify-content:center;align-items:center}.disabled{background-color:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed}"}},[577,"dropi-checkbox",{name:[513],checked:[1540],disabled:[516]},void 0,{checked:[{checkedChanged:0}]}]);function o(){"undefined"!=typeof customElements&&["dropi-checkbox"].forEach((c=>{"dropi-checkbox"===c&&(customElements.get(e(c))||customElements.define(e(c),s))}))}o();export{s as D,o as d}

package/dist/components/p-emzVHCws.js

@@ -1 +1 @@
-import{t as e,p as o,H as t,c as a,B as i,h as s}from"./index.js";const l=o(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiShow=a(this,"dropiShow"),this.dropiHide=a(this,"dropiHide"),this.dropiVisibleChange=a(this,"dropiVisibleChange")}visible=!1;header=null;showCloseIcon=!0;dismissable=!0;dismissableMask=!0;dismissible=!0;closeOnEscape=!0;modal=!0;closable=!0;blockScroll=!0;showHeader=!0;showFooter=!0;position="center";size="m";styleClass=null;maxWidth=null;autoZIndex=!0;baseZIndex=1100;transitionOptions="0.15s";enableBeforeClose=!1;isDraggable=!1;resizable=!1;dropiShow;dropiHide;dropiVisibleChange;isOpen=!1;isClosing=!1;mounted=!1;closeTimer=null;keyHandler=null;canDismiss=!1;visibleChanged(e){e?this.openModal():this.startClose()}componentDidLoad(){this.visible&&this.openModal()}disconnectedCallback(){this.removeKeyHandler(),this.closeTimer&&clearTimeout(this.closeTimer),"undefined"!=typeof document&&document.body.classList.remove("dropi-modal-open")}async dismiss(){this.visible?(this.visible=!1,this.dropiVisibleChange.emit(!1)):this.startClose()}async openModalExternally(){this.visible=!0,this.dropiVisibleChange.emit(!0)}openModal(){this.closeTimer&&(clearTimeout(this.closeTimer),this.closeTimer=null),this.isClosing=!1,this.mounted=!0,requestAnimationFrame((()=>requestAnimationFrame((()=>{this.isOpen=!0,this.dropiShow.emit()})))),this.addKeyHandler(),this.canDismiss=!1,setTimeout((()=>{this.canDismiss=!0}),300),(this.modal??1)&&i.isBrowser&&document.body&&document.body.classList.add("dropi-modal-open")}startClose(){!this.isClosing&&this.mounted&&(this.isClosing=!0,this.isOpen=!1,this.removeKeyHandler(),this.closeTimer&&clearTimeout(this.closeTimer),this.closeTimer=setTimeout((()=>{this.mounted=!1,this.isClosing=!1,this.closeTimer=null,(this.modal??1)&&i.isBrowser&&document.body&&document.body.classList.remove("dropi-modal-open"),this.dropiHide.emit()}),200))}addKeyHandler(){this.closeOnEscape&&(this.keyHandler=e=>{"Escape"===e.key&&this.visible&&this.dismissable&&this.canDismiss&&this.dismiss()},document.addEventListener("keydown",this.keyHandler))}removeKeyHandler(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}render(){return s("div",{key:"afa5e48e56be5263ee7730fe532c1cf25d178b73",class:`modal-root modal-root--${this.position}${this.isOpen?" modal-root--open":""}${this.isClosing?" modal-root--closing":""}`},(this.modal??!0)&&s("div",{key:"2f469b86ec4294e0e73aa6a853eb2186e8f8d142",class:"modal-mask",onClick:()=>this.canDismiss&&this.dismissable&&this.dismiss()}),s("div",{key:"019271295ea8bd221dd33f3c643ba5ba290a2b6d",class:`modal-panel size-${this.size||"m"}`,role:"dialog","aria-modal":"true"},this.showHeader&&s("div",{key:"52d22a6d389a874c52de0640c2102356ec01f00e",class:"modal-header"},this.header&&s("span",{key:"8bc171fc24b191535b49f21c235ac78b9e0da828",class:"modal-title"},this.header),s("slot",{key:"bad3234aed329d12882148f1493152cf361cb2e6",name:"header"}),this.showCloseIcon&&s("button",{key:"ca2e6373a96e02363228139138304bafb6abd5c9",class:"modal-close",onClick:()=>this.dismiss(),"aria-label":"Cerrar"},"×")),s("div",{key:"d725c7ea9fbf08b442be136c917e7a5d29a19697",class:"modal-content"},s("slot",{key:"5a80fa52be41009b519ee826f32d4fa22ab9e56d"})),this.showFooter&&s("div",{key:"b5eea1fa4e0de034ea511616b918f85575e69b54",class:"modal-footer"},s("slot",{key:"29aff99f75c5a32d02ab941f27d4c9f2ada614a8",name:"footer"}))))}static get watchers(){return{visible:[{visibleChanged:0}]}}static get style(){return":host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:9999;visibility:hidden}.modal-root--open{opacity:1;pointer-events:auto;visibility:visible}.modal-root--closing{opacity:1;pointer-events:none;visibility:visible}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:var(--font-weight-bold);flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%;margin-top:auto;flex-shrink:0}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}::slotted(.button-container)>*{width:100%}::slotted(.button-container) dropi-button{width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer{justify-content:flex-end}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-xxl{width:1214px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}"}},[769,"dropi-modal",{visible:[1540],header:[1],showCloseIcon:[4,"show-close-icon"],dismissable:[4],dismissableMask:[4,"dismissable-mask"],dismissible:[4],closeOnEscape:[4,"close-on-escape"],modal:[4],closable:[4],blockScroll:[4,"block-scroll"],showHeader:[4,"show-header"],showFooter:[4,"show-footer"],position:[1],size:[1],styleClass:[1,"style-class"],maxWidth:[1,"max-width"],autoZIndex:[4,"auto-z-index"],baseZIndex:[2,"base-z-index"],transitionOptions:[1,"transition-options"],enableBeforeClose:[4,"enable-before-close"],isDraggable:[4,"is-draggable"],resizable:[4],isOpen:[32],isClosing:[32],mounted:[32],dismiss:[64],openModalExternally:[64]},void 0,{visible:[{visibleChanged:0}]}]);function r(){"undefined"!=typeof customElements&&["dropi-modal"].forEach((o=>{"dropi-modal"===o&&(customElements.get(e(o))||customElements.define(e(o),l))}))}r();export{l as D,r as d}
+import{t as e,p as o,H as t,c as a,B as i,h as s}from"./index.js";const l=o(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiShow=a(this,"dropiShow"),this.dropiHide=a(this,"dropiHide"),this.dropiVisibleChange=a(this,"dropiVisibleChange")}visible=!1;header=null;showCloseIcon=!0;dismissable=!0;dismissableMask=!0;dismissible=!0;closeOnEscape=!0;modal=!0;closable=!0;blockScroll=!0;showHeader=!0;showFooter=!0;position="center";size="m";styleClass=null;maxWidth=null;autoZIndex=!0;baseZIndex=1100;transitionOptions="0.15s";enableBeforeClose=!1;isDraggable=!1;resizable=!1;dropiShow;dropiHide;dropiVisibleChange;isOpen=!1;isClosing=!1;mounted=!1;closeTimer=null;keyHandler=null;canDismiss=!1;visibleChanged(e){e?this.openModal():this.startClose()}componentDidLoad(){this.visible&&this.openModal()}disconnectedCallback(){this.removeKeyHandler(),this.closeTimer&&clearTimeout(this.closeTimer),"undefined"!=typeof document&&document.body.classList.remove("dropi-modal-open")}async dismiss(){this.visible?(this.visible=!1,this.dropiVisibleChange.emit(!1)):this.startClose()}async openModalExternally(){this.visible=!0,this.dropiVisibleChange.emit(!0)}openModal(){this.closeTimer&&(clearTimeout(this.closeTimer),this.closeTimer=null),this.isClosing=!1,this.mounted=!0,requestAnimationFrame((()=>requestAnimationFrame((()=>{this.isOpen=!0,this.dropiShow.emit()})))),this.addKeyHandler(),this.canDismiss=!1,setTimeout((()=>{this.canDismiss=!0}),300),(this.modal??1)&&i.isBrowser&&document.body&&document.body.classList.add("dropi-modal-open")}startClose(){!this.isClosing&&this.mounted&&(this.isClosing=!0,this.isOpen=!1,this.removeKeyHandler(),this.closeTimer&&clearTimeout(this.closeTimer),this.closeTimer=setTimeout((()=>{this.mounted=!1,this.isClosing=!1,this.closeTimer=null,(this.modal??1)&&i.isBrowser&&document.body&&document.body.classList.remove("dropi-modal-open"),this.dropiHide.emit()}),200))}addKeyHandler(){this.closeOnEscape&&(this.keyHandler=e=>{"Escape"===e.key&&this.visible&&this.dismissable&&this.canDismiss&&this.dismiss()},document.addEventListener("keydown",this.keyHandler))}removeKeyHandler(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null)}render(){return s("div",{key:"afa5e48e56be5263ee7730fe532c1cf25d178b73",class:`modal-root modal-root--${this.position}${this.isOpen?" modal-root--open":""}${this.isClosing?" modal-root--closing":""}`},(this.modal??!0)&&s("div",{key:"2f469b86ec4294e0e73aa6a853eb2186e8f8d142",class:"modal-mask",onClick:()=>this.canDismiss&&this.dismissable&&this.dismiss()}),s("div",{key:"019271295ea8bd221dd33f3c643ba5ba290a2b6d",class:`modal-panel size-${this.size||"m"}`,role:"dialog","aria-modal":"true"},this.showHeader&&s("div",{key:"52d22a6d389a874c52de0640c2102356ec01f00e",class:"modal-header"},this.header&&s("span",{key:"8bc171fc24b191535b49f21c235ac78b9e0da828",class:"modal-title"},this.header),s("slot",{key:"bad3234aed329d12882148f1493152cf361cb2e6",name:"header"}),this.showCloseIcon&&s("button",{key:"ca2e6373a96e02363228139138304bafb6abd5c9",class:"modal-close",onClick:()=>this.dismiss(),"aria-label":"Cerrar"},"×")),s("div",{key:"d725c7ea9fbf08b442be136c917e7a5d29a19697",class:"modal-content"},s("slot",{key:"5a80fa52be41009b519ee826f32d4fa22ab9e56d"})),this.showFooter&&s("div",{key:"b5eea1fa4e0de034ea511616b918f85575e69b54",class:"modal-footer"},s("slot",{key:"29aff99f75c5a32d02ab941f27d4c9f2ada614a8",name:"footer"}))))}static get watchers(){return{visible:[{visibleChanged:0}]}}static get style(){return":host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:11000;visibility:hidden}.modal-root--open{opacity:1;pointer-events:auto;visibility:visible}.modal-root--closing{opacity:1;pointer-events:none;visibility:visible}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:var(--font-weight-bold);flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%;margin-top:auto;flex-shrink:0}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}::slotted(.button-container)>*{width:100%}::slotted(.button-container) dropi-button{width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer{justify-content:flex-end}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-xxl{width:1214px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}"}},[769,"dropi-modal",{visible:[1540],header:[1],showCloseIcon:[4,"show-close-icon"],dismissable:[4],dismissableMask:[4,"dismissable-mask"],dismissible:[4],closeOnEscape:[4,"close-on-escape"],modal:[4],closable:[4],blockScroll:[4,"block-scroll"],showHeader:[4,"show-header"],showFooter:[4,"show-footer"],position:[1],size:[1],styleClass:[1,"style-class"],maxWidth:[1,"max-width"],autoZIndex:[4,"auto-z-index"],baseZIndex:[2,"base-z-index"],transitionOptions:[1,"transition-options"],enableBeforeClose:[4,"enable-before-close"],isDraggable:[4,"is-draggable"],resizable:[4],isOpen:[32],isClosing:[32],mounted:[32],dismiss:[64],openModalExternally:[64]},void 0,{visible:[{visibleChanged:0}]}]);function r(){"undefined"!=typeof customElements&&["dropi-modal"].forEach((o=>{"dropi-modal"===o&&(customElements.get(e(o))||customElements.define(e(o),l))}))}r();export{l as D,r 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}`;
 

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}`;
 

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,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 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%}}`;
 

package/dist/dropi-ui/dropi-alert.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 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}`;
 

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)}`;
 

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,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 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)}}`;
 
@@ -6,7 +6,15 @@ const DropiButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dropiClick = createEvent(this, "dropiClick", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    internals;
     /** Visual color palette */
     type = 'default';
     /** Primary (filled) | Secondary (outlined) | Tertiary (ghost) */
@@ -25,6 +33,8 @@ const DropiButton = class {
     customIconColor = '';
     /** Button label */
     text = '';
+    /** Native HTML button type (submit, reset, button) */
+    nativeType = 'button';
     /** Emitted on click (not emitted when disabled or loading) */
     dropiClick;
     colorMap = {
@@ -59,6 +69,12 @@ const DropiButton = class {
     handleClick(e) {
         if (this.state !== 'disabled' && this.state !== 'loading') {
             this.dropiClick.emit(e);
+            if (this.nativeType === 'submit') {
+                this.internals.form?.requestSubmit();
+            }
+            else if (this.nativeType === 'reset') {
+                this.internals.form?.reset();
+            }
         }
     }
     renderLoadingSpinner() {
@@ -69,7 +85,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: 'eefda6c7ac5090173a545d67e72073dc410ff05c', class: {
+        return (h("button", { key: '21d2654de08dff8db6c2b1ba87594e1184a7aa35', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity ?? 'primary']: true,
@@ -77,8 +93,9 @@ 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: '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' })));
+            }, type: this.nativeType, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '6c6c01c923a37df20b614602b18cd2da949bcb91', name: this.preIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), hasText && h("span", { key: '82447aab8b87bc4a89105cd0209e6c5681222f28', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '6bdefe7c1c819b213d24e0100c2303fb7840ea00', name: dropdownIcon, iconWidth: this.iconSize, iconHeight: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: '44483caf52d2ca617ad86c1574a54709f8e77ab5' })));
     }
+    static get formAssociated() { return true; }
 };
 DropiButton.style = dropiButtonCss();
 

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

@@ -1 +1 @@
-{"file":"dropi-button.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-button/dropi-button.css?tag=dropi-button&encapsulation=shadow","src/components/dropi-button/dropi-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  border: 0;\n}\n\n:host([full-width]) {\n  display: flex;\n  width: 100%;\n}\n:host([full-width]) .btn {\n  width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.btn {\n  all: unset;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--Size-1, 4px);\n  border-radius: var(--Border-2, 8px);\n  font-weight: var(--font-weight-bold);\n  min-width: 33px;\n  line-height: 110%;\n  cursor: pointer;\n  white-space: nowrap;\n  transition:\n    background 0.25s ease,\n    color 0.25s ease,\n    border-color 0.25s ease,\n    transform 0.25s ease;\n}\n\n.btn:active {\n  transition: transform 0.01s ease-out;\n  transform: scale(0.98);\n}\n\n.btn:hover:not(:active) {\n  transform: scale(1.01);\n}\n\n.btn.without-text {\n  gap: 0;\n}\n\n/* ── Sizes ─────────────────────────────────────────────────── */\n.btn.large  { padding: var(--Size-4, 16px); font-size: var(--Size-4, 16px); height: 48px; }\n.btn.normal { padding: var(--Size-3, 12px); font-size: var(--font-size-s, 12px); height: 40px; }\n.btn.small  { padding: var(--Size-2, 8px);  font-size: var(--font-size-s, 12px); height: 29px; }\n\n/* ── Disabled / Loading ─────────────────────────────────────── */\n.btn.disabled,\n.btn.loading {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ══════════════════════════════════════════════════════════════\n   PRIMARY severity\n═══════════════════════════════════════════════════════════════ */\n.btn.primary.default  { background: var(--Primary-Primary-500, #f49a3d); color: var(--Neutral-White, #ffffff); }\n.btn.primary.default:hover { background: var(--Primary-Primary-600, #e58017); }\n\n.btn.primary.success  { background: var(--Success-Success-500, #0abb87); color: var(--Neutral-White, #ffffff); }\n.btn.primary.success:hover { background: var(--Success-Success-600, #09aa7b); }\n\n.btn.primary.info     { background: var(--Info-Info-500, #50a5f1); color: var(--Neutral-White, #ffffff); }\n.btn.primary.info:hover { background: var(--Info-Info-600, #4996db); }\n\n.btn.primary.error    { background: var(--Error-Error-500, #f46a6b); color: var(--Neutral-White, #ffffff); }\n.btn.primary.error:hover { background: var(--Error-Error-600, #de6061); }\n\n.btn.primary.warning  { background: var(--Warning-Warning-500, #f1b44c); color: var(--Neutral-White, #ffffff); }\n.btn.primary.warning:hover { background: var(--Warning-Warning-600, #dba445); }\n\n.btn.primary.legacy   { background: var(--Secondary-Secondary-500, #008dbf); color: var(--Neutral-White, #ffffff); }\n.btn.primary.legacy:hover { background: var(--Secondary-Secondary-600, #007199); }\n\n/* Disabled primary */\n.btn.primary.disabled.default  { background: var(--Primary-Primary-300, #f2bc85); color: var(--Neutral-White, #ffffff); }\n.btn.primary.disabled.success  { background: var(--Success-Success-300, #5bd1af); color: var(--Neutral-White, #ffffff); }\n.btn.primary.disabled.info     { background: var(--Info-Info-300, #8ac3f6); color: var(--Neutral-White, #ffffff); }\n.btn.primary.disabled.error    { background: var(--Error-Error-300, #f89b9c); color: var(--Neutral-White, #ffffff); }\n.btn.primary.disabled.warning  { background: var(--Warning-Warning-300, #f6cd87); color: var(--Neutral-White, #ffffff); }\n.btn.primary.disabled.legacy   { background: var(--Secondary-Secondary-300, #62bad9); color: var(--Neutral-White, #ffffff); }\n\n/* ══════════════════════════════════════════════════════════════\n   SECONDARY severity\n═══════════════════════════════════════════════════════════════ */\n.btn.secondary {\n  background: var(--Neutral-White, #ffffff);\n  border: 1px solid;\n}\n\n.btn.secondary.default  { border-color: var(--Primary-Primary-500, #f49a3d); color: var(--Primary-Primary-500, #f49a3d); }\n.btn.secondary.default:hover { color: var(--Primary-Primary-600, #e58017); border-color: var(--Primary-Primary-600, #e58017); }\n\n.btn.secondary.success  { border-color: var(--Success-Success-500, #0abb87); color: var(--Success-Success-500, #0abb87); }\n.btn.secondary.success:hover { color: var(--Success-Success-600, #09aa7b); border-color: var(--Success-Success-600, #09aa7b); }\n\n.btn.secondary.info     { border-color: var(--Info-Info-500, #50a5f1); color: var(--Info-Info-500, #50a5f1); }\n.btn.secondary.info:hover { color: var(--Info-Info-600, #4996db); border-color: var(--Info-Info-600, #4996db); }\n\n.btn.secondary.error    { border-color: var(--Error-Error-500, #f46a6b); color: var(--Error-Error-500, #f46a6b); }\n.btn.secondary.error:hover { color: var(--Error-Error-600, #de6061); border-color: var(--Error-Error-600, #de6061); }\n\n.btn.secondary.warning  { border-color: var(--Warning-Warning-500, #f1b44c); color: var(--Warning-Warning-500, #f1b44c); }\n.btn.secondary.warning:hover { color: var(--Warning-Warning-600, #dba445); border-color: var(--Warning-Warning-600, #dba445); }\n\n.btn.secondary.legacy   { border-color: var(--Secondary-Secondary-500, #008dbf); color: var(--Secondary-Secondary-500, #008dbf); }\n.btn.secondary.legacy:hover { color: var(--Secondary-Secondary-600, #007199); border-color: var(--Secondary-Secondary-600, #007199); }\n\n/* Disabled secondary */\n.btn.secondary.disabled.default  { border-color: var(--Primary-Primary-300, #f2bc85); color: var(--Primary-Primary-300, #f2bc85); }\n.btn.secondary.disabled.success  { border-color: var(--Success-Success-300, #5bd1af); color: var(--Success-Success-300, #5bd1af); }\n.btn.secondary.disabled.info     { border-color: var(--Info-Info-300, #8ac3f6); color: var(--Info-Info-300, #8ac3f6); }\n.btn.secondary.disabled.error    { border-color: var(--Error-Error-300, #f89b9c); color: var(--Error-Error-300, #f89b9c); }\n.btn.secondary.disabled.warning  { border-color: var(--Warning-Warning-300, #f6cd87); color: var(--Warning-Warning-300, #f6cd87); }\n.btn.secondary.disabled.legacy   { border-color: var(--Secondary-Secondary-300, #62bad9); color: var(--Secondary-Secondary-300, #62bad9); }\n\n/* ══════════════════════════════════════════════════════════════\n   TERTIARY severity\n═══════════════════════════════════════════════════════════════ */\n.btn.tertiary { background: none; border: none; }\n\n.btn.tertiary.default,\n.btn.tertiary.legacy {\n  border: none !important;\n  box-shadow: none !important;\n  color: var(--Gray-Gray-500, #69738c);\n}\n.btn.tertiary.default:hover,\n.btn.tertiary.legacy:hover {\n  background: var(--Gray-Gray-50, #f5f6f8);\n  box-shadow: none !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.btn.tertiary.success { color: var(--Success-Success-500, #0abb87); }\n.btn.tertiary.success:hover { background: var(--Success-Success-50, #e7f8f3); }\n\n.btn.tertiary.info { color: var(--Info-Info-500, #50a5f1); }\n.btn.tertiary.info:hover { background: var(--Info-Info-50, #eef6fe); }\n\n.btn.tertiary.error { color: var(--Error-Error-500, #f46a6b); }\n.btn.tertiary.error:hover { background: var(--Error-Error-50, #fef0f0); }\n\n.btn.tertiary.warning { color: var(--Warning-Warning-500, #f1b44c); }\n.btn.tertiary.warning:hover { background: var(--Warning-Warning-50, #fef8ed); }\n\n.btn.tertiary.dropdown {\n  color: var(--Gray-Gray-500, #69738c);\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-s);\n  background: transparent;\n}\n\n/* Disabled tertiary */\n.btn.tertiary.disabled.default,\n.btn.tertiary.disabled.legacy {\n  border: none !important;\n  color: var(--Gray-Gray-400, #858ea6);\n}\n.btn.tertiary.disabled.success { color: var(--Success-Success-300, #5bd1af); }\n.btn.tertiary.disabled.info    { color: var(--Info-Info-300, #8ac3f6); }\n.btn.tertiary.disabled.error   { color: var(--Error-Error-300, #f89b9c); }\n.btn.tertiary.disabled.warning { color: var(--Warning-Warning-300, #f6cd87); }\n\n/* ── Loading spinner ─────────────────────────────────────────── */\n.spin {\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type ButtonType = 'legacy' | 'default' | 'success' | 'info' | 'error' | 'warning' | 'dropdown' | 'default-light';\nexport type ButtonSeverity = 'primary' | 'secondary' | 'tertiary';\nexport type ButtonSize = 'large' | 'normal' | 'small';\nexport type ButtonState = 'default' | 'disabled' | 'loading';\n\n/**\n * @component dropi-button\n * Primary action button with multiple types, severities, sizes and states.\n * Supports pre/post icons and a loading spinner.\n */\n@Component({\n  tag: 'dropi-button',\n  styleUrl: 'dropi-button.css',\n  shadow: true,\n})\nexport class DropiButton {\n  /** Visual color palette */\n  @Prop() type: ButtonType = 'default';\n  /** Primary (filled) | Secondary (outlined) | Tertiary (ghost) */\n  @Prop() severity: ButtonSeverity = 'primary';\n  /** Button size */\n  @Prop() size: ButtonSize = 'normal';\n  /** Button state */\n  @Prop() state: ButtonState = 'default';\n  /** Full width button */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n  /** Icon name to show before the text */\n  @Prop() preIcon: string = '';\n  /** Icon name to show after the text */\n  @Prop() postIcon: string = '';\n  /** Custom icon color override */\n  @Prop() customIconColor: string = '';\n  /** Button label */\n  @Prop() text: string = '';\n\n  /** Emitted on click (not emitted when disabled or loading) */\n  @Event() dropiClick: EventEmitter<MouseEvent>;\n\n  private readonly colorMap: Record<string, string> = {\n    default: 'Primary-Primary-',\n    success: 'Success-Success-',\n    error: 'Error-Error-',\n    info: 'Info-Info-',\n    legacy: 'Secondary-Secondary-',\n    warning: 'Warning-Warning-',\n    dropdown: 'Gray-Gray-',\n    'default-light': 'Gray-Gray-',\n  };\n\n  private get iconSize(): string {\n    if (this.size === 'large') return '24px';\n    if (this.size === 'small') return '16px';\n    return '18px';\n  }\n\n  private get color(): string {\n    const intensity = this.state === 'disabled' ? '300' : '500';\n    return (this.colorMap[this.type] ?? 'Primary-Primary-') + intensity;\n  }\n\n  private get fontColor(): string {\n    if (this.severity === 'tertiary') {\n      return this.type === 'default' || this.type === 'legacy' ? 'Gray-Gray-500' : this.color;\n    }\n    if (this.severity === 'secondary') return this.color;\n    return 'Neutral-White';\n  }\n\n  private handleClick(e: MouseEvent) {\n    if (this.state !== 'disabled' && this.state !== 'loading') {\n      this.dropiClick.emit(e);\n    }\n  }\n\n  private renderLoadingSpinner() {\n    return (\n      <svg\n        class=\"spin\"\n        width={this.iconSize}\n        height={this.iconSize}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          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\"\n          fill={`var(--${this.fontColor})`}\n        />\n      </svg>\n    );\n  }\n\n  render() {\n    const isDisabled = this.state === 'disabled' || this.state === 'loading';\n    const hasText = (this.text ?? '') !== '';\n    const showPostIcon = (this.postIcon ?? '') !== '' || (this.type ?? 'default') === 'dropdown';\n    const dropdownIcon = (this.type ?? 'default') === 'dropdown' ? 'Dropdown-down' : (this.postIcon ?? '');\n\n    return (\n      <button\n        class={{\n          btn: true,\n          'without-text': !hasText,\n          [this.severity ?? 'primary']: true,\n          [this.type ?? 'default']: true,\n          [this.size ?? 'normal']: true,\n          [this.state ?? 'default']: true,\n          'full-width': this.fullWidth,\n        }}\n        disabled={isDisabled}\n        onClick={(e) => this.handleClick(e)}\n      >\n        {this.preIcon && (\n          <dropi-icon\n            name={this.preIcon}\n            iconWidth={this.iconSize}\n            iconHeight={this.iconSize}\n            color={this.fontColor}\n          />\n        )}\n        {hasText && <span class=\"text\">{this.text}</span>}\n        {showPostIcon && (\n          <dropi-icon\n            name={dropdownIcon}\n            iconWidth={this.iconSize}\n            iconHeight={this.iconSize}\n            color={this.fontColor}\n          />\n        )}\n        {this.state === 'loading' && this.renderLoadingSpinner()}\n        <slot />\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-button.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-button/dropi-button.css?tag=dropi-button&encapsulation=shadow","src/components/dropi-button/dropi-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  border: 0;\n}\n\n:host([full-width]) {\n  display: flex;\n  width: 100%;\n}\n:host([full-width]) .btn {\n  width: 100%;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.btn {\n  all: unset;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--Size-1, 4px);\n  border-radius: var(--Border-2, 8px);\n  font-weight: var(--font-weight-bold);\n  min-width: 33px;\n  line-height: 110%;\n  cursor: pointer;\n  white-space: nowrap;\n  transition:\n    background 0.25s ease,\n    color 0.25s ease,\n    border-color 0.25s ease,\n    transform 0.25s ease;\n}\n\n.btn:active {\n  transition: transform 0.01s ease-out;\n  transform: scale(0.98);\n}\n\n.btn:hover:not(:active) {\n  transform: scale(1.01);\n}\n\n.btn.without-text {\n  gap: 0;\n}\n\n/* ── Sizes ─────────────────────────────────────────────────── */\n.btn.large  { padding: var(--Size-4, 16px); font-size: var(--Size-4, 16px); height: 48px; }\n.btn.normal { padding: var(--Size-3, 12px); font-size: var(--font-size-s, 12px); height: 40px; }\n.btn.small  { padding: var(--Size-2, 8px);  font-size: var(--font-size-s, 12px); height: 29px; }\n\n/* ── Disabled / Loading ─────────────────────────────────────── */\n.btn.disabled,\n.btn.loading {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ══════════════════════════════════════════════════════════════\n   PRIMARY severity\n═══════════════════════════════════════════════════════════════ */\n.btn.primary.default  { background: var(--Primary-Primary-500, #f49a3d); color: var(--Neutral-White, #ffffff); }\n.btn.primary.default:hover { background: var(--Primary-Primary-600, #e58017); }\n\n.btn.primary.success  { background: var(--Success-Success-500, #0abb87); color: var(--Neutral-White, #ffffff); }\n.btn.primary.success:hover { background: var(--Success-Success-600, #09aa7b); }\n\n.btn.primary.info     { background: var(--Info-Info-500, #50a5f1); color: var(--Neutral-White, #ffffff); }\n.btn.primary.info:hover { background: var(--Info-Info-600, #4996db); }\n\n.btn.primary.error    { background: var(--Error-Error-500, #f46a6b); color: var(--Neutral-White, #ffffff); }\n.btn.primary.error:hover { background: var(--Error-Error-600, #de6061); }\n\n.btn.primary.warning  { background: var(--Warning-Warning-500, #f1b44c); color: var(--Neutral-White, #ffffff); }\n.btn.primary.warning:hover { background: var(--Warning-Warning-600, #dba445); }\n\n.btn.primary.legacy   { background: var(--Secondary-Secondary-500, #008dbf); color: var(--Neutral-White, #ffffff); }\n.btn.primary.legacy:hover { background: var(--Secondary-Secondary-600, #007199); }\n\n/* Disabled primary */\n.btn.primary.disabled.default  { background: var(--Primary-Primary-300, #f2bc85); color: var(--Neutral-White, #ffffff); }\n.btn.primary.disabled.success  { background: var(--Success-Success-300, #5bd1af); color: var(--Neutral-White, #ffffff); }\n.btn.primary.disabled.info     { background: var(--Info-Info-300, #8ac3f6); color: var(--Neutral-White, #ffffff); }\n.btn.primary.disabled.error    { background: var(--Error-Error-300, #f89b9c); color: var(--Neutral-White, #ffffff); }\n.btn.primary.disabled.warning  { background: var(--Warning-Warning-300, #f6cd87); color: var(--Neutral-White, #ffffff); }\n.btn.primary.disabled.legacy   { background: var(--Secondary-Secondary-300, #62bad9); color: var(--Neutral-White, #ffffff); }\n\n/* ══════════════════════════════════════════════════════════════\n   SECONDARY severity\n═══════════════════════════════════════════════════════════════ */\n.btn.secondary {\n  background: var(--Neutral-White, #ffffff);\n  border: 1px solid;\n}\n\n.btn.secondary.default  { border-color: var(--Primary-Primary-500, #f49a3d); color: var(--Primary-Primary-500, #f49a3d); }\n.btn.secondary.default:hover { color: var(--Primary-Primary-600, #e58017); border-color: var(--Primary-Primary-600, #e58017); }\n\n.btn.secondary.success  { border-color: var(--Success-Success-500, #0abb87); color: var(--Success-Success-500, #0abb87); }\n.btn.secondary.success:hover { color: var(--Success-Success-600, #09aa7b); border-color: var(--Success-Success-600, #09aa7b); }\n\n.btn.secondary.info     { border-color: var(--Info-Info-500, #50a5f1); color: var(--Info-Info-500, #50a5f1); }\n.btn.secondary.info:hover { color: var(--Info-Info-600, #4996db); border-color: var(--Info-Info-600, #4996db); }\n\n.btn.secondary.error    { border-color: var(--Error-Error-500, #f46a6b); color: var(--Error-Error-500, #f46a6b); }\n.btn.secondary.error:hover { color: var(--Error-Error-600, #de6061); border-color: var(--Error-Error-600, #de6061); }\n\n.btn.secondary.warning  { border-color: var(--Warning-Warning-500, #f1b44c); color: var(--Warning-Warning-500, #f1b44c); }\n.btn.secondary.warning:hover { color: var(--Warning-Warning-600, #dba445); border-color: var(--Warning-Warning-600, #dba445); }\n\n.btn.secondary.legacy   { border-color: var(--Secondary-Secondary-500, #008dbf); color: var(--Secondary-Secondary-500, #008dbf); }\n.btn.secondary.legacy:hover { color: var(--Secondary-Secondary-600, #007199); border-color: var(--Secondary-Secondary-600, #007199); }\n\n/* Disabled secondary */\n.btn.secondary.disabled.default  { border-color: var(--Primary-Primary-300, #f2bc85); color: var(--Primary-Primary-300, #f2bc85); }\n.btn.secondary.disabled.success  { border-color: var(--Success-Success-300, #5bd1af); color: var(--Success-Success-300, #5bd1af); }\n.btn.secondary.disabled.info     { border-color: var(--Info-Info-300, #8ac3f6); color: var(--Info-Info-300, #8ac3f6); }\n.btn.secondary.disabled.error    { border-color: var(--Error-Error-300, #f89b9c); color: var(--Error-Error-300, #f89b9c); }\n.btn.secondary.disabled.warning  { border-color: var(--Warning-Warning-300, #f6cd87); color: var(--Warning-Warning-300, #f6cd87); }\n.btn.secondary.disabled.legacy   { border-color: var(--Secondary-Secondary-300, #62bad9); color: var(--Secondary-Secondary-300, #62bad9); }\n\n/* ══════════════════════════════════════════════════════════════\n   TERTIARY severity\n═══════════════════════════════════════════════════════════════ */\n.btn.tertiary { background: none; border: none; }\n\n.btn.tertiary.default,\n.btn.tertiary.legacy {\n  border: none !important;\n  box-shadow: none !important;\n  color: var(--Gray-Gray-500, #69738c);\n}\n.btn.tertiary.default:hover,\n.btn.tertiary.legacy:hover {\n  background: var(--Gray-Gray-50, #f5f6f8);\n  box-shadow: none !important;\n  color: var(--Gray-Gray-600, #475066);\n}\n\n.btn.tertiary.success { color: var(--Success-Success-500, #0abb87); }\n.btn.tertiary.success:hover { background: var(--Success-Success-50, #e7f8f3); }\n\n.btn.tertiary.info { color: var(--Info-Info-500, #50a5f1); }\n.btn.tertiary.info:hover { background: var(--Info-Info-50, #eef6fe); }\n\n.btn.tertiary.error { color: var(--Error-Error-500, #f46a6b); }\n.btn.tertiary.error:hover { background: var(--Error-Error-50, #fef0f0); }\n\n.btn.tertiary.warning { color: var(--Warning-Warning-500, #f1b44c); }\n.btn.tertiary.warning:hover { background: var(--Warning-Warning-50, #fef8ed); }\n\n.btn.tertiary.dropdown {\n  color: var(--Gray-Gray-500, #69738c);\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-s);\n  background: transparent;\n}\n\n/* Disabled tertiary */\n.btn.tertiary.disabled.default,\n.btn.tertiary.disabled.legacy {\n  border: none !important;\n  color: var(--Gray-Gray-400, #858ea6);\n}\n.btn.tertiary.disabled.success { color: var(--Success-Success-300, #5bd1af); }\n.btn.tertiary.disabled.info    { color: var(--Info-Info-300, #8ac3f6); }\n.btn.tertiary.disabled.error   { color: var(--Error-Error-300, #f89b9c); }\n.btn.tertiary.disabled.warning { color: var(--Warning-Warning-300, #f6cd87); }\n\n/* ── Loading spinner ─────────────────────────────────────────── */\n.spin {\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n","import { Component, Prop, Event, EventEmitter, AttachInternals, h } from '@stencil/core';\n\nexport type ButtonType = 'legacy' | 'default' | 'success' | 'info' | 'error' | 'warning' | 'dropdown' | 'default-light';\nexport type ButtonSeverity = 'primary' | 'secondary' | 'tertiary';\nexport type ButtonSize = 'large' | 'normal' | 'small';\nexport type ButtonState = 'default' | 'disabled' | 'loading';\nexport type ButtonNativeType = 'button' | 'submit' | 'reset';\n\n\n/**\n * @component dropi-button\n * Primary action button with multiple types, severities, sizes and states.\n * Supports pre/post icons and a loading spinner.\n */\n@Component({\n  tag: 'dropi-button',\n  styleUrl: 'dropi-button.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiButton {\n  @AttachInternals() internals: ElementInternals;\n\n  /** Visual color palette */\n  @Prop() type: ButtonType = 'default';\n  /** Primary (filled) | Secondary (outlined) | Tertiary (ghost) */\n  @Prop() severity: ButtonSeverity = 'primary';\n  /** Button size */\n  @Prop() size: ButtonSize = 'normal';\n  /** Button state */\n  @Prop() state: ButtonState = 'default';\n  /** Full width button */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n  /** Icon name to show before the text */\n  @Prop() preIcon: string = '';\n  /** Icon name to show after the text */\n  @Prop() postIcon: string = '';\n  /** Custom icon color override */\n  @Prop() customIconColor: string = '';\n  /** Button label */\n  @Prop() text: string = '';\n  /** Native HTML button type (submit, reset, button) */\n  @Prop() nativeType: ButtonNativeType = 'button';\n\n\n  /** Emitted on click (not emitted when disabled or loading) */\n  @Event() dropiClick: EventEmitter<MouseEvent>;\n\n  private readonly colorMap: Record<string, string> = {\n    default: 'Primary-Primary-',\n    success: 'Success-Success-',\n    error: 'Error-Error-',\n    info: 'Info-Info-',\n    legacy: 'Secondary-Secondary-',\n    warning: 'Warning-Warning-',\n    dropdown: 'Gray-Gray-',\n    'default-light': 'Gray-Gray-',\n  };\n\n  private get iconSize(): string {\n    if (this.size === 'large') return '24px';\n    if (this.size === 'small') return '16px';\n    return '18px';\n  }\n\n  private get color(): string {\n    const intensity = this.state === 'disabled' ? '300' : '500';\n    return (this.colorMap[this.type] ?? 'Primary-Primary-') + intensity;\n  }\n\n  private get fontColor(): string {\n    if (this.severity === 'tertiary') {\n      return this.type === 'default' || this.type === 'legacy' ? 'Gray-Gray-500' : this.color;\n    }\n    if (this.severity === 'secondary') return this.color;\n    return 'Neutral-White';\n  }\n\n  private handleClick(e: MouseEvent) {\n    if (this.state !== 'disabled' && this.state !== 'loading') {\n      this.dropiClick.emit(e);\n      if (this.nativeType === 'submit') {\n        this.internals.form?.requestSubmit();\n      } else if (this.nativeType === 'reset') {\n        this.internals.form?.reset();\n      }\n    }\n  }\n\n\n  private renderLoadingSpinner() {\n    return (\n      <svg\n        class=\"spin\"\n        width={this.iconSize}\n        height={this.iconSize}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          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\"\n          fill={`var(--${this.fontColor})`}\n        />\n      </svg>\n    );\n  }\n\n  render() {\n    const isDisabled = this.state === 'disabled' || this.state === 'loading';\n    const hasText = (this.text ?? '') !== '';\n    const showPostIcon = (this.postIcon ?? '') !== '' || (this.type ?? 'default') === 'dropdown';\n    const dropdownIcon = (this.type ?? 'default') === 'dropdown' ? 'Dropdown-down' : (this.postIcon ?? '');\n\n    return (\n      <button\n        class={{\n          btn: true,\n          'without-text': !hasText,\n          [this.severity ?? 'primary']: true,\n          [this.type ?? 'default']: true,\n          [this.size ?? 'normal']: true,\n          [this.state ?? 'default']: true,\n          'full-width': this.fullWidth,\n        }}\n        type={this.nativeType}\n        disabled={isDisabled}\n        onClick={(e) => this.handleClick(e)}\n      >\n        {this.preIcon && (\n          <dropi-icon\n            name={this.preIcon}\n            iconWidth={this.iconSize}\n            iconHeight={this.iconSize}\n            color={this.fontColor}\n          />\n        )}\n        {hasText && <span class=\"text\">{this.text}</span>}\n        {showPostIcon && (\n          <dropi-icon\n            name={dropdownIcon}\n            iconWidth={this.iconSize}\n            iconHeight={this.iconSize}\n            color={this.fontColor}\n          />\n        )}\n        {this.state === 'loading' && this.renderLoadingSpinner()}\n        <slot />\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-card-checkbox.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 dropiCardCheckboxCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.container-card-check{padding:var(--Size-4, 16px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Size-2, 8px);width:100%;display:flex;align-items:center;gap:var(--Size-3, 12px);cursor:pointer;height:66px;overflow:hidden;transition:background 0.15s ease, border-color 0.15s ease}.container-card-check.disabled{border-radius:var(--Border-2, 8px);border:1px solid var(--Gray-Gray-100, #e6eaf2);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:default}.container-card-check.disabled .title-check,.container-card-check.disabled .description-text,.container-card-check.disabled .extra-info{color:var(--Gray-Gray-400, #858ea6)}.container-text{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:start;overflow:hidden}.title-check{color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-regular, 400);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.description-text{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);margin-top:var(--Size-1, 4px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.extra-info{display:flex;justify-content:space-between;align-items:center;flex-direction:column;gap:4px;flex-shrink:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.extra-info h4{margin:0;font-weight:var(--font-weight-semibold);color:inherit;line-height:inherit}.default-card{border:none}.is-checked{background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-500, #f49a3d)}`;
 

package/dist/dropi-ui/dropi-card-product.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 dropiCardProductCss = () => `:host{display:block;font-family:'Inter', sans-serif}*,*::before,*::after{box-sizing:border-box}.dropi-card-product{position:relative;background:#ffffff;border-radius:8px;overflow:hidden;transition:all 0.2s ease-in-out;cursor:pointer;display:flex;flex-direction:column;height:100%;box-sizing:border-box;width:100%;max-width:450px;box-shadow:none}.product-image-container{padding:4px;flex-shrink:0}.product-image{position:relative;width:100%;aspect-ratio:1;border-radius:8px;border:1px solid #c3c9d9;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:#f8f9fa}.product-image img{width:100%;height:100%;object-fit:cover;border-radius:8px}.product-image img.error-img{object-fit:contain}.favorite-button{position:absolute;bottom:5px;right:6px;border-radius:8px;padding:12px;cursor:pointer;transition:all 0.2s ease-in-out;z-index:2;display:flex;align-items:center;justify-content:center;width:42px;height:40px;background:#ffffff;border:1px solid #858ea6}.favorite-button.favorite-active{background:var(--Primary-Primary-500, #f49a3d);border:1px solid var(--Primary-Primary-500, #f49a3d)}.product-info{position:relative;padding:8px;display:flex;flex-direction:column;gap:4px;flex:1;justify-content:space-between}.supplier-insignia{position:absolute;top:-24px;left:0px}.product-header{display:flex;justify-content:space-between;align-items:center;width:100%;height:26px}.category{color:#69738c;font-family:'Inter', sans-serif;font-size:12px;font-weight:400;line-height:1.5;flex:1}.stock-info{display:flex;align-items:center;gap:2px;font-family:'Inter', sans-serif;font-size:12px;font-weight:400;line-height:1.5}.stock-label{color:#69738c}.stock-value{font-weight:500}.product-name{color:#32394d;font-family:'Inter', sans-serif;font-size:16px;font-weight:500;line-height:1.5;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.supplier-info{font-family:'Inter', sans-serif;font-size:12px;line-height:1.2}.supplier-label{color:#69738c;font-weight:400}.supplier-name{color:#50a5f1;font-weight:400;margin-left:4px;cursor:pointer}.price-container{display:flex;gap:8px;margin-top:4px}.price-item{flex:1;display:flex;flex-direction:column}.price-label{color:#69738c;font-family:'Inter', sans-serif;font-size:12px;font-weight:400;line-height:1.5;height:18px;min-width:max-content}.price-value{color:#32394d;font-family:'Inter', sans-serif;font-size:14px;font-weight:700;line-height:1.1;margin-top:2px}.separator{height:1px;background:#e6eaf2;margin:0;flex-shrink:0}.action-button{background:#ffffff;border:none;border-top:1px solid #e6eaf2;padding:12px;cursor:pointer;transition:all 0.2s ease-in-out;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;flex-shrink:0}.action-button--disabled{opacity:0.3;cursor:not-allowed}.button-text{font-family:'Inter', sans-serif;font-size:14px;font-weight:700;line-height:1.1;color:#f49a3d;text-align:center;white-space:nowrap}`;
 

package/dist/dropi-ui/dropi-card-section.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 dropiCardSectionCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.card-section{display:flex;align-items:center;justify-content:space-between;gap:var(--Size-4, 16px);padding:var(--Size-3, 12px) var(--Size-4, 16px);background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-100, #e6eaf2);border-radius:var(--Border-2, 8px)}.card-section__text{flex:1}.card-section__title{margin:0 0 4px;font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433)}h5.card-section__title{font-size:var(--font-size-m, 14px)}h6.card-section__title{font-size:var(--font-size-s, 12px)}.card-section__desc{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}.card-section__control{flex-shrink:0}.card-section__dropdown-btn{display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer}`;
 

package/dist/dropi-ui/dropi-carousel.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 dropiCarouselCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropi-carousel-container{display:flex;flex-direction:column;position:relative;width:100%;max-width:100%;overflow:hidden;padding:0 var(--Size-4)}.dropi-carousel-content{display:flex;align-items:center;position:relative;padding:1rem 0;width:100%}.dropi-carousel-items-content{overflow:hidden;flex:1;padding:0;width:100%;max-width:100%}.dropi-carousel-items-container{display:flex;padding-bottom:var(--Size-3);will-change:transform}.dropi-carousel-item{flex:0 0 auto;padding:0 0.5rem;box-sizing:border-box}.dropi-carousel-item>*{width:100%;box-sizing:border-box;display:block}.dropi-carousel-nav{display:flex;width:40px;height:40px;justify-content:center;align-items:center;cursor:pointer;transition:all 0.2s;flex-shrink:0;z-index:1;border-radius:var(--Border-5);background:var(--Neutral-White, #fff);box-shadow:var(--Shadow-medium);border:none;appearance:none;padding:0}.dropi-carousel-nav:hover{background:var(--Gray-Gray-50)}.dropi-carousel-nav:disabled{opacity:0.4;cursor:not-allowed;box-shadow:none}.dropi-carousel-prev{margin-right:1rem}.dropi-carousel-next{margin-left:1rem}.dropi-carousel-indicators{display:flex;justify-content:center;gap:0.5rem;list-style:none;padding:1rem 0 0 0;margin:0}.dropi-carousel-indicators li{cursor:pointer}.dropi-carousel-indicators li button{width:1rem;height:1rem;border-radius:50%;border:1px solid var(--Gray-Gray-100, #eceef4);background:var(--Neutral-White, #fff);cursor:pointer;transition:all 0.2s;padding:0}.dropi-carousel-indicators li.active button{background:var(--Primary-Primary-500);border-color:var(--Primary-Primary-500)}.dropi-carousel-indicators li:hover button{background:var(--Gray-Gray-200)}.vertical .dropi-carousel-content{flex-direction:column}.vertical .dropi-carousel-items-container{flex-direction:column}.vertical .dropi-carousel-prev{margin:0 0 1rem 0}.vertical .dropi-carousel-next{margin:1rem 0 0 0}@media (max-width: 768px){.dropi-carousel-container{padding:0}.dropi-carousel-item{padding:0 0.25rem}}`;
 

package/dist/dropi-ui/dropi-checkbox-selection-list.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 dropiCheckboxSelectionListCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.csl__search{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);margin-bottom:var(--Size-2, 8px)}.csl__search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.csl__clear{display:flex;background:none;border:none;padding:0;cursor:pointer}.csl__list{display:flex;flex-direction:column}.csl__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.csl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.csl__icon{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}.csl__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);flex:1}.csl__empty{padding:var(--Size-4, 16px);text-align:center;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-400, #858ea6)}`;
 

package/dist/dropi-ui/dropi-checkbox.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 dropiCheckboxCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.container-dropi-checkbox{display:inline-block}.check{width:20px;height:20px;border-radius:var(--Border-1, 4px);cursor:pointer;transition:background-color 0.3s ease-in-out,     border-style 0.3s ease-in-out}.noCheck{border-style:solid;border-width:2px;border-color:var(--Gray-Gray-200, #c3c9d9);display:flex;justify-content:center;align-items:center}.noCheck svg{visibility:hidden}.isCheck{display:flex;background-color:var(--Primary-Primary-500, #f49a3d);justify-content:center;align-items:center}.disabled{background-color:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed}`;
 
@@ -6,13 +6,29 @@ const DropiCheckbox = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dropiChange = createEvent(this, "dropiChange", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
     }
+    internals;
+    /** Name for native form submission */
+    name = '';
     /** Whether the checkbox is checked */
     checked = false;
     /** Whether the checkbox is disabled */
     disabled = false;
     /** Emitted when the checked state changes */
     dropiChange;
+    checkedChanged(val) {
+        this.internals.setFormValue(val ? 'on' : null);
+    }
+    componentWillLoad() {
+        this.internals.setFormValue(this.checked ? 'on' : null);
+    }
     changeState() {
         if (this.disabled)
             return;
@@ -20,14 +36,19 @@ const DropiCheckbox = class {
         this.dropiChange.emit(this.checked);
     }
     render() {
-        return (h("div", { key: '071505574decbf6b138256f73affe101c01080ef', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '03e7ec24a87e22c4a5fe1d94cc4ca1fe349d6e6f', class: {
+        return (h("div", { key: '27fec5f03a48c19652c8ae01173dcbb6e3514693', class: "container-dropi-checkbox", onClick: () => this.changeState() }, h("div", { key: '243d07e4444c0dc149ff137258f9ddd58428c438', class: {
                 check: true,
                 isCheck: this.checked,
                 noCheck: !this.checked,
                 disabled: this.disabled,
-            } }, h("svg", { key: 'c56f01268919995cc7aac0173edf44a01a62e13e', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '575f863c9e82e862ea7049bf633b0d86ba374bb2', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
+            } }, h("svg", { key: '7a1fd9c7b3fa575ec263fe5ad48fbc0294a79980', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'e77e5cd40c71e542a045934641509e41a7cd4899', d: "M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z", fill: "#FFFFFF" })))));
     }
     static get formAssociated() { return true; }
+    static get watchers() { return {
+        "checked": [{
+                "checkedChanged": 0
+            }]
+    }; }
 };
 DropiCheckbox.style = dropiCheckboxCss();
 

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

@@ -1 +1 @@
-{"file":"dropi-checkbox.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,8qBAA8qB,CAAC;;MCalsB,aAAa,GAAA,MAAA;;;;;;IAEgB,OAAO,GAAY,KAAK;;IAEvC,QAAQ,GAAY,KAAK;;AAGzC,IAAA,WAAW;IAEZ,WAAW,GAAA;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;QAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGrC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EACrE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;gBACX,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,gBAAA,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;gBACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,CAAC,EAAC,smCAAsmC,EACxmC,IAAI,EAAC,SAAS,EAAA,CACd,CACE,CACF,CACF;;;;;;;;","names":[],"sources":["src/components/dropi-checkbox/dropi-checkbox.css?tag=dropi-checkbox&encapsulation=shadow","src/components/dropi-checkbox/dropi-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.container-dropi-checkbox {\n  display: inline-block;\n}\n\n.check {\n  width: 20px;\n  height: 20px;\n  border-radius: var(--Border-1, 4px);\n  cursor: pointer;\n  transition:\n    background-color 0.3s ease-in-out,\n    border-style 0.3s ease-in-out;\n}\n\n.noCheck {\n  border-style: solid;\n  border-width: 2px;\n  border-color: var(--Gray-Gray-200, #c3c9d9);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.noCheck svg {\n  visibility: hidden;\n}\n\n.isCheck {\n  display: flex;\n  background-color: var(--Primary-Primary-500, #f49a3d);\n  justify-content: center;\n  align-items: center;\n}\n\n.disabled {\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  border-color: var(--Gray-Gray-100, #e6eaf2);\n  cursor: not-allowed;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * @component dropi-checkbox\n * A styled checkbox that emits change events.\n * Supports form association via native `<input type=\"checkbox\">` internals.\n */\n@Component({\n  tag: 'dropi-checkbox',\n  styleUrl: 'dropi-checkbox.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiCheckbox {\n  /** Whether the checkbox is checked */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Emitted when the checked state changes */\n  @Event() dropiChange: EventEmitter<boolean>;\n\n  private changeState() {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    this.dropiChange.emit(this.checked);\n  }\n\n  render() {\n    return (\n      <div class=\"container-dropi-checkbox\" onClick={() => this.changeState()}>\n        <div\n          class={{\n            check: true,\n            isCheck: this.checked,\n            noCheck: !this.checked,\n            disabled: this.disabled,\n          }}\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z\"\n              fill=\"#FFFFFF\"\n            />\n          </svg>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-checkbox.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,8qBAA8qB,CAAC;;MCalsB,aAAa,GAAA,MAAA;;;;;;;;;;;;AACL,IAAA,SAAS;;IAGH,IAAI,GAAW,EAAE;;IAGF,OAAO,GAAY,KAAK;;IAEvC,QAAQ,GAAY,KAAK;;AAGzC,IAAA,WAAW;AAGpB,IAAA,cAAc,CAAC,GAAY,EAAA;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;;IAGhD,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;;IAIjD,WAAW,GAAA;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;QAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGrC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EACrE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;gBACX,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,gBAAA,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;gBACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,CAAC,EAAC,smCAAsmC,EACxmC,IAAI,EAAC,SAAS,EAAA,CACd,CACE,CACF,CACF;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-checkbox/dropi-checkbox.css?tag=dropi-checkbox&encapsulation=shadow","src/components/dropi-checkbox/dropi-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n.container-dropi-checkbox {\n  display: inline-block;\n}\n\n.check {\n  width: 20px;\n  height: 20px;\n  border-radius: var(--Border-1, 4px);\n  cursor: pointer;\n  transition:\n    background-color 0.3s ease-in-out,\n    border-style 0.3s ease-in-out;\n}\n\n.noCheck {\n  border-style: solid;\n  border-width: 2px;\n  border-color: var(--Gray-Gray-200, #c3c9d9);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.noCheck svg {\n  visibility: hidden;\n}\n\n.isCheck {\n  display: flex;\n  background-color: var(--Primary-Primary-500, #f49a3d);\n  justify-content: center;\n  align-items: center;\n}\n\n.disabled {\n  background-color: var(--Gray-Gray-50, #f7f8fa);\n  border-color: var(--Gray-Gray-100, #e6eaf2);\n  cursor: not-allowed;\n}\n","import { Component, Prop, Event, EventEmitter, AttachInternals, Watch, h } from '@stencil/core';\n\n/**\n * @component dropi-checkbox\n * A styled checkbox that emits change events.\n * Supports form association via native `<input type=\"checkbox\">` internals.\n */\n@Component({\n  tag: 'dropi-checkbox',\n  styleUrl: 'dropi-checkbox.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiCheckbox {\n  @AttachInternals() internals: ElementInternals;\n\n  /** Name for native form submission */\n  @Prop({ reflect: true }) name: string = '';\n\n  /** Whether the checkbox is checked */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Emitted when the checked state changes */\n  @Event() dropiChange: EventEmitter<boolean>;\n\n  @Watch('checked')\n  checkedChanged(val: boolean) {\n    this.internals.setFormValue(val ? 'on' : null);\n  }\n\n  componentWillLoad() {\n    this.internals.setFormValue(this.checked ? 'on' : null);\n  }\n\n\n  private changeState() {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    this.dropiChange.emit(this.checked);\n  }\n\n  render() {\n    return (\n      <div class=\"container-dropi-checkbox\" onClick={() => this.changeState()}>\n        <div\n          class={{\n            check: true,\n            isCheck: this.checked,\n            noCheck: !this.checked,\n            disabled: this.disabled,\n          }}\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z\"\n              fill=\"#FFFFFF\"\n            />\n          </svg>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-chips.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 dropiChipsCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);height:24px;padding:0 var(--Size-2, 8px);border-radius:var(--Border-2, 8px);font-size:var(--font-size-xs, 10px);font-family:inherit;width:fit-content;max-width:200px}.chip--filters{background:var(--Primary-Primary-50, #fff5eb);border:1px solid var(--Primary-Primary-200, #fbd4a3);color:var(--Primary-Primary-600, #d4872e)}.chip--fill{background:var(--Gray-Gray-100, #e6eaf2);border:1px solid transparent;color:var(--Gray-Gray-700, #32394d)}.chip__avatar{width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0}.chip__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.chip__close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;padding:0;cursor:pointer;color:inherit;opacity:0.7;transition:opacity 0.15s}.chip__close:hover{opacity:1}`;
 

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

@@ -1,6 +1,6 @@
-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 dropiCitySelectorCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.city-selector{position:relative;width:100%}.selector-trigger{width:100%;min-height:44px;padding:6px 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;text-align:left;font-family:inherit;transition:border-color 0.15s}.selector-trigger:hover:not(:disabled){border-color:var(--Gray-Gray-300, #a3abbf)}.selector-trigger:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.city-selector--disabled .selector-trigger{background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed;opacity:0.6}.chips-area{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-height:26px;align-items:center}.placeholder{color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}.chip{display:inline-flex;align-items:center;gap:4px;background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-200, #fcd5a8);border-radius:var(--Border-1, 4px);padding:2px 6px;font-size:var(--font-size-xs, 12px);color:var(--Primary-Primary-700, #b85c00)}.chip-remove{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 8px 24px rgba(0, 0, 0, 0.10);z-index:200;overflow:hidden}.search-wrap{padding:10px 12px;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.search-field{position:relative;display:flex;align-items:center}.search-input{width:100%;height:36px;padding:0 36px 0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 14px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Gray-Gray-50, #f7f8fa);outline:none;transition:border-color 0.15s}.search-input:focus{border-color:var(--Info-Info-500, #50a5f1);background:var(--Neutral-White, #ffffff)}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-icon{position:absolute;right:10px;display:flex;align-items:center;pointer-events:none}.options-list{max-height:280px;overflow-y:auto;background:var(--Neutral-White, #ffffff)}.options-list::-webkit-scrollbar{width:6px}.options-list::-webkit-scrollbar-track{background:transparent}.options-list::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:4px}.group-label{padding:14px 16px 8px;font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433);background:var(--Neutral-White, #ffffff)}.city-option{padding:10px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #ffffff);transition:background 0.1s;user-select:none}.city-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.city-option--selected .city-label{color:var(--Gray-Gray-800, #1f2433);font-weight:var(--font-weight-medium, 500)}.checkbox{width:22px;height:22px;border:1.5px solid var(--Gray-Gray-300, #c3c9d9);border-radius:var(--Border-1, 6px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color 0.15s, background 0.15s}.checkbox--checked{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-500, #f49a3d)}.city-label{flex:1}.no-results{padding:20px 16px;text-align:center;color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}`;
+const dropiCitySelectorCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.city-selector{position:relative;width:100%}.selector-trigger{width:100%;min-height:44px;padding:6px 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;text-align:left;font-family:inherit;transition:border-color 0.15s}.selector-trigger:hover:not(:disabled){border-color:var(--Gray-Gray-300, #a3abbf)}.selector-trigger:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.city-selector--disabled .selector-trigger{background:var(--Gray-Gray-50, #f7f8fa);border-color:var(--Gray-Gray-100, #e6eaf2);cursor:not-allowed;opacity:0.6}.chips-area{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-height:26px;align-items:center}.placeholder{color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}.chip{display:inline-flex;align-items:center;gap:4px;background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-200, #fcd5a8);border-radius:var(--Border-1, 4px);padding:2px 6px;font-size:var(--font-size-xs, 12px);color:var(--Primary-Primary-700, #b85c00)}.chip-remove{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);box-shadow:0 8px 24px rgba(0, 0, 0, 0.10);z-index:var(--dropi-z-index-overlay, 11000);overflow:hidden}.search-wrap{padding:10px 12px;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.search-field{position:relative;display:flex;align-items:center}.search-input{width:100%;height:36px;padding:0 36px 0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 14px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Gray-Gray-50, #f7f8fa);outline:none;transition:border-color 0.15s}.search-input:focus{border-color:var(--Info-Info-500, #50a5f1);background:var(--Neutral-White, #ffffff)}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-icon{position:absolute;right:10px;display:flex;align-items:center;pointer-events:none}.options-list{max-height:280px;overflow-y:auto;background:var(--Neutral-White, #ffffff)}.options-list::-webkit-scrollbar{width:6px}.options-list::-webkit-scrollbar-track{background:transparent}.options-list::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:4px}.group-label{padding:14px 16px 8px;font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433);background:var(--Neutral-White, #ffffff)}.city-option{padding:10px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #ffffff);transition:background 0.1s;user-select:none}.city-option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.city-option--selected .city-label{color:var(--Gray-Gray-800, #1f2433);font-weight:var(--font-weight-medium, 500)}.checkbox{width:22px;height:22px;border:1.5px solid var(--Gray-Gray-300, #c3c9d9);border-radius:var(--Border-1, 6px);background:var(--Neutral-White, #ffffff);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color 0.15s, background 0.15s}.checkbox--checked{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-500, #f49a3d)}.city-label{flex:1}.no-results{padding:20px 16px;text-align:center;color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}`;
 
 const DropiCitySelector = class {
     constructor(hostRef) {