@dropi/ui 0.1.45 → 0.1.48

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, a as getElement, h } from './index-CZu1AKUh.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-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-CZu1AKUh.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-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-CZu1AKUh.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-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.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-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.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-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-CZu1AKUh.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-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-CZu1AKUh.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-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-CZu1AKUh.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-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-CZu1AKUh.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-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.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-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.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)}}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.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-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.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-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.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-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-CZu1AKUh.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-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.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-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.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}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.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,4 +1,4 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-CZu1AKUh.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: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)}`;
 

package/dist/dropi-ui/dropi-color-picker.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-CZu1AKUh.js';
 
 const dropiColorPickerCss = () => `:host{display:block}.general-container{position:relative;width:fit-content}.main-input-container{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:var(--Size-3);position:relative;width:fit-content}.main-input-container .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;cursor:pointer}.line-color-preview{width:40px;height:40px;border-radius:50%;border:1px solid var(--Gray-Gray-200);display:flex;justify-content:center;align-items:center;padding:5px}.line-color-preview .color-preview{width:100%;height:100%;border-radius:50%;border:1px solid var(--Gray-Gray-200)}.position-right{top:0;left:250px}.position-left{top:0;right:200px}.position-top{bottom:55px}.position-bottom{top:55px}.position-bottom::before{transform:rotate(90deg);left:50%;top:-15px}.position-right::before{left:-6px;top:10px}.position-top::before{transform:rotate(270deg);left:50%;bottom:-15px}.position-left::before{transform:rotate(180deg);right:-9px}.color-picker-container::before{content:'';position:absolute;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid var(--Neutral-White);z-index:1}.color-picker-container{width:280px;padding:var(--Size-4);background:var(--Neutral-White);border-radius:var(--Size-2);box-shadow:var(--Shadow-large);position:absolute;z-index:100;transform-origin:top left;opacity:0;transition:transform 0.2s ease-out,     opacity 0.2s ease-out;pointer-events:none}.color-picker-container .main-color-canvas-container{position:relative;margin-bottom:var(--Size-4);border:1px solid var(--Gray-Gray-200);border-radius:var(--Size-1);display:flex;justify-self:center;align-items:center}.color-picker-container .main-color-canvas-container canvas{display:block;border-radius:var(--Size-1)}.color-picker-container .main-color-canvas-container .color-selector-pointer{position:absolute;width:var(--Size-3);height:var(--Size-3);border:2px solid var(--Neutral-White);border-radius:50%;transform:translate(-6px, -6px);pointer-events:none}.color-picker-container .slider-container{display:flex;flex-direction:column;gap:var(--Size-3)}.color-picker-container .slider-container .slider-group{display:flex;flex-direction:column;gap:var(--Size-1)}.color-picker-container .slider-container .slider-group label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold)}.color-picker-container .slider-container .slider-group .hue-slider-container,.color-picker-container .slider-container .slider-group .opacity-slider-container{position:relative;height:var(--Size-3);border-radius:var(--Size-4);overflow:hidden}.color-picker-container .slider-container .slider-group .hue-slider-container canvas,.color-picker-container .slider-container .slider-group .opacity-slider-container canvas{display:block;width:100%;height:100%}.color-picker-container .slider-container .slider-group .hue-slider-container .slider-pointer,.color-picker-container .slider-container .slider-group .opacity-slider-container .slider-pointer{position:absolute;top:0;height:var(--Size-3);width:var(--Size-3);background:transparent;border:2px solid var(--Neutral-White);border-radius:50%;pointer-events:none}.color-picker-container.show{transform:scale(1);opacity:1;pointer-events:auto}.color-info .color-label{font-size:var(--font-size-xs);color:var(--Gray-Gray-500);font-weight:var(--font-weight-bold);text-transform:uppercase;margin-bottom:var(--Size-2)}.color-info .color-input{border:1px solid var(--Gray-Gray-200, #ddd);border-radius:var(--Size-1);padding:6px 8px;font-size:var(--font-size-s);width:100%;font-family:monospace;text-transform:uppercase;background-color:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-800, #1f2433);outline:none}`;
 

package/dist/dropi-ui/dropi-country-flags.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-CZu1AKUh.js';
 
 const dropiCountryFlagsCss = () => `:host{display:inline-flex}.flag{max-width:40px;max-height:40px;margin:0;display:flex;align-items:center;justify-content:center}.flag img{width:100%;height:100%;object-fit:cover}.circle{border-radius:50%;overflow:hidden}.rectangle{border-radius:4px;overflow:hidden;max-width:32px !important;max-height:24px !important}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-CZu1AKUh.js';
 
 const dropiCountrySelectorCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}label{display:block;font-size:var(--font-size-xs, 11px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066);margin-bottom:6px}.required{color:var(--Error-Error-500, #ef4444);margin-left:2px}.select-button{width:100%;height:44px;padding:0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 14px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.15s ease}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #3b82f6)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-button.select-completed{color:var(--Gray-Gray-700, #32394d)}.select-button.select-invalid{border-color:var(--Error-Error-500, #ef4444)}.selected-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1}.selected-option{display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 14px)}.placeholder-text{color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}.flag-img{border-radius:var(--Border-1, 4px);width:24px;height:24px;object-fit:cover;flex-shrink:0}.select-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);z-index:var(--dropi-z-index-overlay, 11000);list-style:none;padding:0;margin:0;box-shadow:0 8px 24px rgba(0, 0, 0, 0.10);overflow:hidden;transition:max-height 0.2s ease, opacity 0.2s ease}.select-dropdown.expanded{max-height:300px;opacity:1;overflow-y:auto}.select-dropdown.collapsed{max-height:0;opacity:0;pointer-events:none;border-color:transparent;box-shadow:none}.select-dropdown::-webkit-scrollbar{width:6px}.select-dropdown::-webkit-scrollbar-track{background:transparent}.select-dropdown::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:4px}.select-dropdown::-webkit-scrollbar-thumb:hover{background:var(--Gray-Gray-300, #a3abbf)}.search-li{padding:10px 12px;position:sticky;top:0;background:var(--Neutral-White, #ffffff);z-index:1;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.search-field{position:relative;display:flex;align-items:center}.country-search{width:100%;height:36px;padding:0 36px 0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);outline:none;font-size:var(--font-size-s, 14px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Gray-Gray-50, #f7f8fa);transition:border-color 0.15s, background 0.15s}.country-search:focus{border-color:var(--Info-Info-500, #50a5f1);background:var(--Neutral-White, #ffffff)}.country-search::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-icon{position:absolute;right:10px;display:flex;align-items:center;pointer-events:none}.option{width:100%;min-height:44px;padding:10px 16px;border:none;background:transparent;text-align:left;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 14px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background 0.1s ease;white-space:nowrap}.option:hover{background:var(--Gray-Gray-50, #f7f8fa)}`;
 

package/dist/dropi-ui/dropi-date-picker-range.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.js';
 
 const dropiDatePickerRangeCss = () => `:host{display:block;width:100%;max-width:380px}*,*::before,*::after{box-sizing:border-box}.date-picker-range{width:100%;font-family:inherit}.label{font-size:11px;font-weight:var(--font-weight-medium);color:#7b8190;margin-bottom:8px}.inputs-row{display:flex;align-items:flex-end;gap:8px}.input-group{flex:1;display:flex;flex-direction:column;gap:4px}.input-label{font-size:var(--font-size-xs, 11px);color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-medium, 500)}.date-input{width:100%;height:40px;padding:0 10px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-600, #475066);font-size:13px;font-family:inherit;outline:none;cursor:pointer;transition:border-color 0.15s ease}.date-input:focus{border-color:var(--Primary-Primary-500, #f49a3d)}.separator{padding-bottom:8px;color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-m)}.shortcuts{display:flex;flex-direction:column;gap:2px;margin-top:10px;border-left:1px solid var(--Gray-Gray-100, #e6eaf2);padding-left:10px}.shortcut-btn{background:transparent;border:none;padding:4px 6px;font-size:13px;font-family:inherit;color:var(--Gray-Gray-700, #32394d);cursor:pointer;text-align:left;border-radius:5px;transition:background 0.1s ease;font-weight:var(--font-weight-regular)}.shortcut-btn:hover{background:var(--Gray-Gray-50, #f5f6f8)}.shortcut-btn.active{background:var(--Gray-Gray-50, #f5f6f8);font-weight:var(--font-weight-semibold)}.warning-box{margin-top:8px;padding:4px 8px;border:1px solid var(--Warning-Warning-400);border-radius:4px;background:var(--Warning-Warning-50)}.warning-message{color:#495057;font-size:var(--font-size-xxs);line-height:16px}@keyframes shimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}.skeleton{height:40px;width:100%;min-width:180px;border-radius:6px;animation:shimmer 1s linear infinite;background:linear-gradient(to right, #f5f6f8 8%, #e3e7ef 28%, #f5f6f8 77%);background-size:800px 104px}@media screen and (max-width: 480px){.inputs-row{flex-direction:column}.separator{display:none}.shortcuts{flex-direction:row;flex-wrap:wrap;border-left:none;padding-left:0;border-top:1px solid var(--Gray-Gray-100, #e6eaf2);padding-top:8px}}`;
 

package/dist/dropi-ui/dropi-date-picker.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-CZu1AKUh.js';
 
 const dropiDatePickerCss = () => `:host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.dp-label{display:block;font-size:var(--font-size-xxs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.dp-trigger{width:100%;height:44px;display:flex;align-items:center;gap:var(--Size-2, 8px);padding:0 var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);cursor:pointer;font-family:inherit;transition:border-color 0.2s}.dp-trigger:hover:not(:disabled){border-color:var(--Info-Info-500, #50a5f1)}.dp-trigger--disabled{background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed;opacity:0.6}.dp-trigger__value{flex:1;text-align:left;font-size:var(--font-size-xs, 12px);color:var(--Gray-Gray-700, #32394d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dp-trigger__placeholder{color:var(--Gray-Gray-400, #858ea6)}.dp-popup{position:absolute;top:calc(100% + 8px);left:0;width:320px;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-3, 12px);box-shadow:0 4px 16px rgba(0,0,0,0.08);z-index:300;padding:var(--Size-4, 16px)}.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--Size-4, 16px)}.dp-nav__btn{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;width:32px;height:32px;transition:background 0.15s}.dp-nav__btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-nav__title{font-size:var(--font-size-s, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);display:flex;gap:8px}.dp-grid{display:grid;grid-template-columns:repeat(7, 1fr);row-gap:8px;column-gap:4px}.dp-day-header{font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);text-align:center;padding:8px 0;font-weight:var(--font-weight-bold, 700)}.dp-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 12px);font-family:inherit;border:none;cursor:pointer;background:transparent;color:var(--Gray-Gray-600, #475066);width:100%;position:relative;z-index:1;padding:0}.dp-cell::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;transition:all 0.2s;z-index:-1;background:transparent}.dp-cell::before{content:"";position:absolute;top:0;bottom:0;z-index:-2;border-radius:0;background:transparent}.dp-cell:hover:not(:disabled)::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--other-month{color:var(--Gray-Gray-300, #a0a9c0)}.dp-cell--today{font-weight:var(--font-weight-bold, 700)}.dp-cell--today::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--selected{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--selected::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--range-start,.dp-cell--range-end{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--range-start::after,.dp-cell--range-end::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--in-range{color:var(--Orange-orange-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-cell--in-range::before{left:-2px;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start::before{left:50%;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-end::before{left:-2px;right:50%;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start.dp-cell--range-end::before{background:transparent}.dp-cell--disabled{opacity:0.35;cursor:not-allowed}.dp-footer{display:flex;justify-content:space-between;margin-top:var(--Size-3, 12px);border-top:1px solid var(--Gray-Gray-100, #e6eaf2);padding-top:var(--Size-2, 8px)}.dp-footer__clear,.dp-footer__today{background:none;border:none;padding:4px 8px;font-size:var(--font-size-xxs, 10px);font-family:inherit;cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.dp-footer__clear{color:var(--Gray-Gray-500, #69738c)}.dp-footer__today{color:var(--Orange-orange-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-footer__clear:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-footer__today:hover{background:var(--Orange-orange-50, #fef5ec)}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.js';
 
 const dropiDrawerCss = () => `:host{display:contents;font-family:'Inter', sans-serif}*,*::before,*::after{box-sizing:border-box}.drawer-host{position:fixed;inset:0;z-index:var(--dropi-z-index-drawer, 9999);pointer-events:none;visibility:hidden}.drawer-host--open{pointer-events:all;visibility:visible}.drawer-backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.5);opacity:0;transition:opacity 0.25s}.drawer-host--open .drawer-backdrop{opacity:1}.drawer-panel{position:absolute;background:var(--Neutral-White, #ffffff);display:flex;flex-direction:column;transition:transform 0.25s ease;overflow:hidden;max-width:100%;min-width:auto}.drawer-panel--right{top:0;right:0;bottom:0;transform:translateX(100%);box-shadow:-4px 0 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--right{transform:translateX(0)}.drawer-panel--left{top:0;left:0;bottom:0;transform:translateX(-100%);box-shadow:4px 0 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--left{transform:translateX(0)}.drawer-panel--bottom{bottom:0;left:0;right:0;transform:translateY(100%);border-radius:var(--Border-2, 8px) var(--Border-2, 8px) 0 0;box-shadow:0 -4px 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--bottom{transform:translateY(0)}.drawer-panel--top{top:0;left:0;right:0;transform:translateY(-100%);border-radius:0 0 var(--Border-2, 8px) var(--Border-2, 8px);box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--top{transform:translateY(0)}.drawer-panel--size-m{width:550px}.drawer-panel--size-l{width:1137px}.drawer-panel--size-xl{width:1280px}.drawer-panel--size-xxl{width:1330px}.drawer-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);flex-shrink:0}.drawer-header--headless{display:none}.drawer-header__title{color:var(--Gray-700, #32394d);font-family:Inter, sans-serif;font-size:24px;font-style:normal;font-weight:700;line-height:110%;margin:0}.drawer-header__close{width:var(--Size-6, 32px);height:var(--Size-6, 32px);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--Gray-400, #858ea6);border-radius:var(--Border-1, 4px);transition:background 0.15s;flex-shrink:0}.drawer-header__close:hover{background:var(--Gray-Gray-50, #f7f8fa)}.drawer-body{flex:1;overflow-y:auto;padding:var(--Size-4, 16px);display:flex;flex-direction:column}.drawer-footer{display:none}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.js';
 
 const dropiDropdownCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropdown{display:flex;flex-direction:column;overflow-y:auto;max-height:var(--dropdown-height, 300px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff)}.dropdown__item{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);cursor:pointer;transition:background 0.15s;user-select:none}.dropdown__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dropdown__item--active{background:var(--Primary-Primary-50, #fff5eb)}.dropdown__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}.dropdown__label{flex:1;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
 

package/dist/dropi-ui/dropi-empty-state.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.js';
 
 const dropiEmptyStateCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--Size-3, 12px);padding:var(--Size-6, 32px) var(--Size-5, 20px);text-align:center}.empty-state-img{max-width:200px;width:100%;height:auto;object-fit:contain;filter:brightness(0) saturate(100%) invert(73%) sepia(9%) saturate(503%) hue-rotate(187deg) brightness(91%) contrast(88%)}.empty-state-svg{width:80px;height:80px}.empty-state-placeholder{display:flex;align-items:center;justify-content:center}.empty-state-title{margin:0;font-size:var(--font-size-l, 18px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);line-height:1.3}.empty-state-description{margin:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);line-height:1.6;max-width:400px}.empty-state-actions{display:flex;align-items:center;gap:var(--Size-3, 12px);flex-wrap:wrap;justify-content:center;margin-top:var(--Size-2, 8px)}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.js';
 
 const dropiFavoriteButtonCss = () => `:host{display:inline-flex}.fav-btn{display:flex;align-items:center;justify-content:center;width:37px;height:37px;border-radius:8px;border:1px solid var(--Gray-Gray-200);background:var(--Neutral-White);cursor:pointer;transition:all 0.2s ease-in-out}.fav-btn:hover,.fav-btn--active{background:var(--Gray-Gray-50)}.fav-btn:active{transform:scale(0.95)}`;
 

package/dist/dropi-ui/dropi-file-upload-progress-bar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.js';
 
 const dropiFileUploadProgressBarCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.container-progress-bar{width:100%;height:100%;display:flex;padding:var(--Size-4);gap:var(--Size-3);border-radius:var(--Size-2);border:1px solid var(--Gray-Gray-100);background-color:var(--Neutral-White);min-width:0;overflow:hidden;align-items:center}.container-icon-info{background:var(--Info-Info-50);width:32px;height:32px;border-radius:var(--Size-2);display:flex;justify-content:center;align-items:center;flex-shrink:0}.icon-pdf{background:var(--Error-Error-50);border-radius:var(--Border-2);width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.image-to-view{width:34px;height:34px;border-radius:var(--Border-2);object-fit:cover;flex-shrink:0}.container-bar-title{display:flex;gap:8px;flex:1;flex-direction:column;justify-content:center;min-width:0;p{margin:0;font-size:var(--font-size-s);color:var(--Gray-Gray-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}}progress{width:100%;height:4px;-webkit-appearance:none;appearance:none;border-radius:4.5px;max-width:100%;display:block}progress::-webkit-progress-bar{background-color:var(--Gray-Gray-100);border-radius:4.5px}progress::-webkit-progress-value{background-color:var(--Primary-Primary-500);border-radius:4.5px;transition:width 0.3s ease}progress::-moz-progress-bar{background-color:var(--Primary-Primary-500);border-radius:4.5px}.view-icon,.container-icon-trash{cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:4px;border-radius:var(--Border-1);transition:background 0.2s}.view-icon:hover,.container-icon-trash:hover{background-color:var(--Gray-Gray-50)}`;
 

package/dist/dropi-ui/dropi-file-upload.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.js';
 
 const dropiFileUploadCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.upload-container{display:flex;flex-direction:column;gap:var(--Size-3, 12px);width:100%}.upload-header{display:flex;flex-direction:column;gap:var(--Size-1, 4px);align-items:flex-start;align-self:stretch}.upload-header .text{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 12px);font-style:normal;line-height:150%}.upload-header .title{font-weight:var(--font-weight-medium, 500)}.upload-header .label{font-weight:var(--font-weight-regular, 400)}.file-upload{display:flex;width:100%;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-3, 12px);background:var(--Neutral-White, #ffffff)}.file-upload__zone{display:flex;padding:var(--Size-5, 24px);flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-6, 32px);align-self:stretch;border-radius:var(--Border-2, 8px);border:1px dashed var(--Gray-Gray-200, #c3c9d9);background:var(--Neutral-White, #ffffff);text-align:center;transition:border-color 0.3s ease}.file-upload__zone.drag-over{border:1px dashed var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fef8f1)}.info{display:flex;flex-direction:column;align-items:center;gap:var(--Size-2, 8px);align-self:stretch}.info .title{color:var(--Gray-Gray-700, #32394d);text-align:center;font-size:var(--font-size-m, 16px);font-weight:var(--font-weight-medium, 500);line-height:150%}.info.size-small-upload{flex-direction:row;gap:var(--Size-3, 12px)}.info-desc{display:flex;flex-direction:column;align-items:center;gap:var(--Size-1, 4px)}.description{color:var(--Gray-Gray-600, #475066);text-align:center;font-size:var(--font-size-s, 14px);font-style:normal;font-weight:var(--font-weight-regular, 400);line-height:150%}.upload-hidden{display:none}.files-container{display:flex;flex-direction:column;gap:var(--Size-3, 12px)}.grid-list{display:flex;align-items:flex-start;gap:var(--Size-5, 24px);align-self:stretch;flex-wrap:wrap}.add-img{display:flex;height:88px;width:88px;flex-direction:column;justify-content:center;align-items:center;gap:var(--Size-1, 4px);align-self:stretch;border-radius:var(--Border-2, 8px);background:var(--Gray-Gray-50, #f7f8fa);cursor:pointer}.add-img:hover{transform:scale(1.1)}.add-img .icon{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Gray-Gray-100, #e6eaf2)}.add-img .text{color:var(--Gray-Gray-600, #475066);text-align:center;font-size:var(--font-size-xs, 12px);font-style:normal;font-weight:var(--font-weight-regular, 400);line-height:150%}.card-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Size-3, 12px);align-self:stretch;width:100%}.file-card{display:flex;padding:var(--Size-4, 16px);align-items:center;gap:var(--Size-3, 12px);align-self:stretch;border-radius:var(--Border-2, 8px);border:1px solid var(--Gray-Gray-100, #e6eaf2);background:var(--Neutral-White, #ffffff);width:100%}.file-card.error{border-color:var(--Error-Error-300, #f89b9c);background:var(--Error-Error-50, #fef0f0)}.file-card .preview-wrapper{width:34px;height:34px;position:relative;display:inline-block;border-radius:var(--Border-2, 8px);overflow:hidden;flex-shrink:0}.file-card .preview{width:100%;height:100%;object-fit:cover;flex-shrink:0}.file-card .preview.uploading{filter:blur(2px)}.file-card .overlay-icon{width:16px;height:16px;padding:4px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Neutral-White, #ffffff)}.file-card .file-icon{flex-shrink:0}.file-card .info-container{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--Size-2, 8px);flex:1 0 0;min-width:0}.file-card .file-name{overflow:hidden;color:var(--Gray-Gray-600, #475066);text-overflow:ellipsis;font-size:var(--font-size-xs, 12px);font-style:normal;font-weight:var(--font-weight-regular, 400);line-height:150%;white-space:nowrap;max-width:300px}.file-card .file-name.error-text{color:var(--Error-Error-500, #f46a6b)}.file-card .progress-bar-container{width:100%;height:4px;background-color:#f0f0f0;border-radius:4px;overflow:hidden}.file-card .progress-bar{height:100%;border-radius:4.5px;background:var(--Primary-Primary-500, #f49a3d);transition:width 0.3s ease}.file-card .error-label{color:var(--Error-Error-500, #f46a6b);font-size:11px;font-weight:var(--font-weight-regular, 400);line-height:150%}.file-card .deleting-container{display:flex;align-items:center;flex:1 0 0}.file-card .deleting-label{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-xs, 12px);font-style:italic;font-weight:var(--font-weight-regular, 400);line-height:150%}.file-card .delete,.file-card .preview-image{display:inline-flex;align-items:center;justify-content:center;transition:transform 0.3s ease;border-radius:var(--Border-2, 8px);flex-shrink:0;cursor:pointer}.file-card .delete:hover,.file-card .preview-image:hover{transform:scale(1.1)}.file-card .delete-confirm{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 12px);font-style:normal;font-weight:var(--font-weight-medium, 500);line-height:150%;display:flex;justify-content:space-between;align-items:center;align-self:stretch;flex:1 0 0}.file-card .delete-confirm .message{flex:1}.file-card .delete-confirm .actions{display:flex;align-items:flex-start;gap:var(--Size-2, 8px)}.img-view{display:flex;width:88px;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--Size-2, 8px)}.img-view .preview-wrapper{position:relative;display:inline-block;width:88px;height:88px}.img-view .preview-container{border-radius:var(--Border-2, 8px);overflow:hidden;width:100%;height:100%}.img-view .preview{width:100%;height:100%;object-fit:cover;flex-shrink:0}.img-view .preview.uploading{filter:blur(2px)}.img-view .overlay-icon{width:24px;height:24px;padding:6px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Neutral-White, #ffffff)}.img-view .delete{position:absolute;top:-12px;right:-9px;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:var(--Border-3, 12px);background:var(--Neutral-White, #ffffff);cursor:pointer}.img-view .delete:hover{transform:scale(1.1)}.img-view.error .preview-wrapper{border:2px solid var(--Error-Error-500, #f46a6b);border-radius:var(--Border-2, 8px)}.img-view.deleting .preview-wrapper{opacity:0.4}.img-view .progress-bar-container{width:100%;height:4px;background-color:#f0f0f0;border-radius:4px;overflow:hidden}.img-view .progress-bar{height:100%;border-radius:4.5px;background:var(--Primary-Primary-500, #f49a3d);transition:width 0.3s ease}.img-view .deleting-info{width:100%;text-align:center}.img-view .deleting-info-label{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-xxs, 10px);font-style:italic;font-weight:var(--font-weight-regular, 400);line-height:150%}@media screen and (max-width: 599px){.info.size-small-upload{flex-wrap:wrap;justify-content:center}.file-card .file-name{max-width:100px}}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, a as getElement, h } from './index-CZu1AKUh.js';
 
 const dropiIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;fill:var(--icon-fill, currentColor);overflow:hidden}svg{fill:inherit;stroke:var(--icon-fill, currentColor);stroke-width:var(--icon-stroke-width, 0);display:block;width:100%;height:100%;vertical-align:middle}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
 
@@ -15,6 +15,8 @@ const DropiIcon = class {
     color = 'currentColor';
     /** Stroke width for icons that use strokes */
     strokeWidth = '';
+    /** URL to the SVG sprite file. Defaults to dropi-lib-icons path in node_modules. */
+    spritePath = '/node_modules/dropi-lib-icons/dist/icons/symbol/svg/sprite.css.svg';
     widthChanged() {
         this.updateHostStyles();
     }
@@ -55,7 +57,7 @@ const DropiIcon = class {
         this.el.style.setProperty('--icon-fill', fill);
     }
     render() {
-        return (h("svg", { key: '99f511720c6654b3f97490c966061520ee17d27f', width: this.iconWidth, height: this.iconHeight, class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: '04792170d8c23b3606249d051f8cc903bd5d1211', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}` })));
+        return (h("svg", { key: '670a5fe129c97a75ad11e4f03b69c821735f4698', width: this.iconWidth, height: this.iconHeight, class: { spin: (this.name ?? '') === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: '82d7a87575f9087a57f3a7012bda6621b77736b7', href: `${this.spritePath}#${this.name ?? ''}` })));
     }
     static get watchers() { return {
         "iconWidth": [{

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

@@ -1 +1 @@
-{"file":"dropi-icon.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,oYAAoY,CAAC;;MCYpZ,SAAS,GAAA,MAAA;;;;;;IAIZ,IAAI,GAAW,EAAE;;IAEjB,SAAS,GAAW,MAAM;IAC1B,UAAU,GAAW,MAAM;IAC3B,KAAK,GAAW,cAAc;;IAE9B,WAAW,GAAW,EAAE;IAGhC,YAAY,GAAA;QACV,IAAI,CAAC,gBAAgB,EAAE;;IAIzB,aAAa,GAAA;QACX,IAAI,CAAC,gBAAgB,EAAE;;IAIzB,YAAY,GAAA;QACV,IAAI,CAAC,UAAU,EAAE;;IAInB,kBAAkB,GAAA;QAChB,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,iBAAiB,GAAA;QACf,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,kBAAkB,GAAA;QAChB,IAAI,CAAC,gBAAgB,EAAE;;IAGjB,gBAAgB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,IAAI,CAAC,WAAW,CAAC;;;IAI9D,gBAAgB,GAAA;QACtB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS;QACpC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU;;IAGhC,UAAU,GAAA;QAChB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE;QACjB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG;cAClC,IAAI,CAAC;AACP,cAAE,IAAI,CAAC,KAAK,KAAK;AACjB,kBAAE;AACF,kBAAE,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,GAAG;QAC1B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,IAAI,CAAC;;IAGhD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,MAAM,SAAS,EAAE,iBACpC,MAAM,EAAA,EAElB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAE,CAAA,wCAAA,EAA2C,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA,CAAE,EAAA,CAAI,CACvE;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-icon/dropi-icon.css?tag=dropi-icon&encapsulation=shadow","src/components/dropi-icon/dropi-icon.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  fill: var(--icon-fill, currentColor);\n  overflow: hidden;\n}\n\nsvg {\n  fill: inherit;\n  stroke: var(--icon-fill, currentColor);\n  stroke-width: var(--icon-stroke-width, 0);\n  display: block;\n  width: 100%;\n  height: 100%;\n  vertical-align: middle;\n}\n\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, h, Watch, Element } from '@stencil/core';\n\n/**\n * @component dropi-icon\n * Renders an SVG icon from the Dropi sprite sheet.\n * The sprite must be available at `assets/icons/sprite.svg`.\n */\n@Component({\n  tag: 'dropi-icon',\n  styleUrl: 'dropi-icon.css',\n  shadow: true,\n})\nexport class DropiIcon {\n  @Element() el: HTMLElement;\n\n  /** Icon name matching the id in the SVG sprite */\n  @Prop() name: string = '';\n  /** Width of the icon (CSS value) */\n  @Prop() iconWidth: string = '20px';\n  @Prop() iconHeight: string = '20px';\n  @Prop() color: string = 'currentColor';\n  /** Stroke width for icons that use strokes */\n  @Prop() strokeWidth: string = '';\n\n  @Watch('iconWidth')\n  widthChanged() {\n    this.updateHostStyles();\n  }\n\n  @Watch('iconHeight')\n  heightChanged() {\n    this.updateHostStyles();\n  }\n\n  @Watch('color')\n  colorChanged() {\n    this.applyColor();\n  }\n\n  @Watch('strokeWidth')\n  strokeWidthChanged() {\n    this.applyStrokeWidth();\n  }\n\n  componentWillLoad() {\n    this.applyColor();\n    this.applyStrokeWidth();\n    this.updateHostStyles();\n  }\n\n  componentDidUpdate() {\n    this.updateHostStyles();\n  }\n\n  private applyStrokeWidth() {\n    if (this.strokeWidth) {\n      this.el.style.setProperty('--icon-stroke-width', this.strokeWidth);\n    }\n  }\n\n  private updateHostStyles() {\n    this.el.style.width = this.iconWidth;\n    this.el.style.height = this.iconHeight;\n  }\n\n  private applyColor() {\n    if (!this.color) return;\n    const fill = this.color.startsWith('#')\n      ? this.color\n      : this.color === 'currentColor'\n      ? 'currentColor'\n      : `var(--${this.color})`;\n    this.el.style.setProperty('--icon-fill', fill);\n  }\n\n  render() {\n    return (\n      <svg\n        width={this.iconWidth}\n        height={this.iconHeight}\n        class={{ spin: (this.name ?? '') === 'Spinner' }}\n        aria-hidden=\"true\"\n      >\n        <use href={`/assets/icons/symbol/svg/sprite.css.svg#${this.name ?? ''}`} />\n      </svg>\n    );\n  }\n}\n"],"version":3}
+{"file":"dropi-icon.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,oYAAoY,CAAC;;MCYpZ,SAAS,GAAA,MAAA;;;;;;IAIZ,IAAI,GAAW,EAAE;;IAEjB,SAAS,GAAW,MAAM;IAC1B,UAAU,GAAW,MAAM;IAC3B,KAAK,GAAW,cAAc;;IAE9B,WAAW,GAAW,EAAE;;IAExB,UAAU,GAAW,oEAAoE;IAGjG,YAAY,GAAA;QACV,IAAI,CAAC,gBAAgB,EAAE;;IAIzB,aAAa,GAAA;QACX,IAAI,CAAC,gBAAgB,EAAE;;IAIzB,YAAY,GAAA;QACV,IAAI,CAAC,UAAU,EAAE;;IAInB,kBAAkB,GAAA;QAChB,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,iBAAiB,GAAA;QACf,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,kBAAkB,GAAA;QAChB,IAAI,CAAC,gBAAgB,EAAE;;IAGjB,gBAAgB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,qBAAqB,EAAE,IAAI,CAAC,WAAW,CAAC;;;IAI9D,gBAAgB,GAAA;QACtB,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS;QACpC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU;;IAGhC,UAAU,GAAA;QAChB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE;QACjB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG;cAClC,IAAI,CAAC;AACP,cAAE,IAAI,CAAC,KAAK,KAAK;AACjB,kBAAE;AACF,kBAAE,CAAA,MAAA,EAAS,IAAI,CAAC,KAAK,GAAG;QAC1B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,IAAI,CAAC;;IAGhD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,MAAM,SAAS,EAAE,iBACpC,MAAM,EAAA,EAElB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAE,CAAA,EAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA,CAAE,EAAA,CAAI,CAClD;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-icon/dropi-icon.css?tag=dropi-icon&encapsulation=shadow","src/components/dropi-icon/dropi-icon.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  fill: var(--icon-fill, currentColor);\n  overflow: hidden;\n}\n\nsvg {\n  fill: inherit;\n  stroke: var(--icon-fill, currentColor);\n  stroke-width: var(--icon-stroke-width, 0);\n  display: block;\n  width: 100%;\n  height: 100%;\n  vertical-align: middle;\n}\n\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, h, Watch, Element } from '@stencil/core';\n\n/**\n * @component dropi-icon\n * Renders an SVG icon from the Dropi sprite sheet.\n * The sprite must be available at `assets/icons/sprite.svg`.\n */\n@Component({\n  tag: 'dropi-icon',\n  styleUrl: 'dropi-icon.css',\n  shadow: true,\n})\nexport class DropiIcon {\n  @Element() el: HTMLElement;\n\n  /** Icon name matching the id in the SVG sprite */\n  @Prop() name: string = '';\n  /** Width of the icon (CSS value) */\n  @Prop() iconWidth: string = '20px';\n  @Prop() iconHeight: string = '20px';\n  @Prop() color: string = 'currentColor';\n  /** Stroke width for icons that use strokes */\n  @Prop() strokeWidth: string = '';\n  /** URL to the SVG sprite file. Defaults to dropi-lib-icons path in node_modules. */\n  @Prop() spritePath: string = '/node_modules/dropi-lib-icons/dist/icons/symbol/svg/sprite.css.svg';\n\n  @Watch('iconWidth')\n  widthChanged() {\n    this.updateHostStyles();\n  }\n\n  @Watch('iconHeight')\n  heightChanged() {\n    this.updateHostStyles();\n  }\n\n  @Watch('color')\n  colorChanged() {\n    this.applyColor();\n  }\n\n  @Watch('strokeWidth')\n  strokeWidthChanged() {\n    this.applyStrokeWidth();\n  }\n\n  componentWillLoad() {\n    this.applyColor();\n    this.applyStrokeWidth();\n    this.updateHostStyles();\n  }\n\n  componentDidUpdate() {\n    this.updateHostStyles();\n  }\n\n  private applyStrokeWidth() {\n    if (this.strokeWidth) {\n      this.el.style.setProperty('--icon-stroke-width', this.strokeWidth);\n    }\n  }\n\n  private updateHostStyles() {\n    this.el.style.width = this.iconWidth;\n    this.el.style.height = this.iconHeight;\n  }\n\n  private applyColor() {\n    if (!this.color) return;\n    const fill = this.color.startsWith('#')\n      ? this.color\n      : this.color === 'currentColor'\n      ? 'currentColor'\n      : `var(--${this.color})`;\n    this.el.style.setProperty('--icon-fill', fill);\n  }\n\n  render() {\n    return (\n      <svg\n        width={this.iconWidth}\n        height={this.iconHeight}\n        class={{ spin: (this.name ?? '') === 'Spinner' }}\n        aria-hidden=\"true\"\n      >\n        <use href={`${this.spritePath}#${this.name ?? ''}`} />\n      </svg>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, h } from './index-CZu1AKUh.js';
 
 const dropiIlustrationIconCss = () => `:host{display:inline-flex}.dropi-ilustration{display:inline-flex;align-items:center;justify-content:center}.dropi-ilustration__image,.dropi-ilustration-insignia{margin:0;display:flex;align-items:center;justify-content:center}.dropi-ilustration__image img{max-width:100%;height:auto}.dropi-ilustration__image-mb{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin:0}.dropi-ilustration__image-mb.success{background:var(--Success-Success-500, #22c55e)}.dropi-ilustration__image-mb.error{background:var(--Error-Error-500, #ef4444)}.dropi-ilustration__image-mb.info{background:var(--Info-Info-500, #3b82f6)}.dropi-ilustration__image-mb.warning{background:url('assets/icons/ilustration/bg-warning.svg') no-repeat center;background-size:contain;border-radius:0}.dropi-ilustration-insignia-tag{display:flex;align-items:center;margin:0}.dropi-ilustration-insignia-tag img{position:relative;z-index:2;height:32px;width:auto}.tag{border-radius:32px;color:var(--Neutral-White, #ffffff);text-transform:capitalize;margin:0 0 0 -20px;display:flex;align-items:center;justify-content:flex-start}.tag span{color:var(--Neutral-White, #ffffff);padding:4px 8px 4px 18px;font-size:var(--font-size-xxs)}.tag--verified{background:linear-gradient(90deg, #ffc10d 41.3%, #ff6102 112.32%)}.tag--premium{background:linear-gradient(90deg, #ff6102 56.52%, #ffc10d 107.25%)}.tag--exclusive{background:linear-gradient(90deg, var(--Gray-900, #0e111a) 26.09%, #ff6102 116.67%)}`;
 
@@ -14,11 +14,15 @@ const DropiIlustrationIcon = class {
     stateInsignia = 'verified';
     /** Show insignia as tag with label (for product cards) */
     tagProduct = false;
-    insigniaIcons = {
-        verified: 'assets/icons/ilustration/verified-new.svg',
-        premium: 'assets/icons/ilustration/premium-new.svg',
-        exclusive: 'assets/icons/ilustration/exclusive.svg',
-    };
+    /** Base path for illustration assets. Override if assets are served from a different location. */
+    basePath = '/node_modules/@dropi/ui/assets/icons/ilustration';
+    get insigniaIcons() {
+        return {
+            verified: `${this.basePath}/verified-new.svg`,
+            premium: `${this.basePath}/premium-new.svg`,
+            exclusive: `${this.basePath}/exclusive.svg`,
+        };
+    }
     getIconName(state) {
         const map = {
             success: 'Check-circle',
@@ -29,7 +33,7 @@ const DropiIlustrationIcon = class {
         return map[state] || 'Comment-round_info';
     }
     render() {
-        return (h("div", { key: 'd7fa7fce7346d3496ae99c580dee9de5fea934b8', class: "dropi-ilustration" }, this.type === 'dropi' && (h("figure", { key: 'faa5686e775ac3a373037b6e1f9bf32076cfb495', class: "dropi-ilustration__image" }, h("img", { key: '209017a72b774b3e14c8e34f7e3bface75ba592b', src: `assets/icons/ilustration/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = 'assets/icons/ilustration/default.svg'; } }))), this.type === 'mb' && (h("figure", { key: '75c82f5356c427d4ed35db3e9697d232e7f1b132', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (h("dropi-icon", { key: '86a371bef276d6c945959405d39cea3a8dcecde3', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: 'c1bef5162ba49d8493a1c8d6b16d886543215046', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: '8d1313457cda0f356f278f095b42d75d960a1c27', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (h("p", { key: '303cce4a3a632e9e36f8c7e6d186b56cec9c5ed6', class: `tag tag--${this.stateInsignia}` }, h("span", { key: '3c2b051198e41dcfc2944aa7b1f869ba30e56c2a', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
+        return (h("div", { key: '452266c0500ed2426ae0b0d7552a735c0022500b', class: "dropi-ilustration" }, this.type === 'dropi' && (h("figure", { key: '4ac1e8e482b5b80df9dceaa93630308b52d5db0d', class: "dropi-ilustration__image" }, h("img", { key: '019a5c80798fc898a08ce851ab69b381d784e3f9', src: `${this.basePath}/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = `${this.basePath}/default.svg`; } }))), this.type === 'mb' && (h("figure", { key: 'e7416f766fe3c0d633379bd9172ecfbb4b7f2a43', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (h("dropi-icon", { key: 'c0fdd2564c0c0f821987cb13a519837a71afddbc', name: this.getIconName(this.state), iconWidth: "24px", iconHeight: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: '8f1f4ace45532d06dbc38d34b3e1e32317d542b7', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: '0d114a0b12bb3d31c222a34b09a47bd6a42e1dba', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia, onError: (e) => { e.target.src = `${this.basePath}/default.svg`; } }), this.tagProduct && (h("p", { key: 'd1ef34a4fd92ee7b97a5a224d9a21b9e54976989', class: `tag tag--${this.stateInsignia}` }, h("span", { key: '72ea7cef3bbc86f6330abb9c4f34c89e62ac3417', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
     }
 };
 DropiIlustrationIcon.style = dropiIlustrationIconCss();

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

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

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.js';
 
 const dropiImageMiniatureCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.miniature__label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:var(--Size-2, 8px)}.miniature__grid{display:flex;flex-wrap:wrap;gap:var(--Size-2, 8px)}.miniature__item{position:relative;border-radius:var(--Border-2, 8px);overflow:hidden;cursor:pointer;flex-shrink:0}.miniature__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.2s}.miniature__zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);opacity:0;transition:opacity 0.2s}.miniature__item:hover img{transform:scale(1.05)}.miniature__item:hover .miniature__zoom{opacity:1}`;
 

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

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

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, d as createEvent, h } from './index-D0Z06C2b.js';
+import { r as registerInstance, d as createEvent, h } from './index-CZu1AKUh.js';
 
-const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:50%;left:12px;transform:translateY(-50%);z-index:1;display:flex;align-items:center;justify-content:center}.icon-input-password{position:absolute;top:50%;right:13px;transform:translateY(-50%);cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:40px}.input-container--has-icon label.label-bottom{left:40px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
+const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:50%;left:12px;transform:translateY(-50%);z-index:1;display:flex;align-items:center;justify-content:center}.icon-input-password{position:absolute;top:50%;right:13px;transform:translateY(-50%);cursor:pointer;z-index:1;display:flex;align-items:center;justify-content:center}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);font-family:inherit;color:red;transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:40px}.input-container--has-icon label.label-bottom{left:40px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
 
 const DropiInput = class {
     constructor(hostRef) {
@@ -233,14 +233,14 @@ const DropiInput = class {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (h("div", { key: '6af757e1d86bfe96d471e9cbed258a50727ae190', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: 'e88bf81fd2b79933e386c2e5fa38f57d85cfe836', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: 'be8ec1b0d3ef624ca22e58ae072917ad2ecc79fb', class: "asterisk" }, " *"))), h("div", { key: '4806c0d250f00bb08788d9d6aa935ca15f2aa826', class: "form-group" }, h("div", { key: 'b9fa243d299bcd165458947d6695fcc845764276', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '92b3cf11803745784f13e908ea88992f76c74473', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: 'c7dc725d577a6d4afb7f87c8b53b16c621de9e86', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '8146ae1794cbe1f200bb681358c7319f10faab3c', id: this.resolvedId, class: {
+        return (h("div", { key: 'e4c796c7993efaff51795c1bd98e5ebdd8d290b9', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '4beb27652c590c5eeda86ca86bd91695eebc9a28', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: '907fb3444cdd81b2573c120cf11d03d9eb43abf5', class: "asterisk" }, " *"))), h("div", { key: '57f9b151ed4588f8907b5d7eb167c7a6db6d1d20', class: "form-group" }, h("div", { key: '5d9f1e8d9f02af3b44285c8af32cce234678a16c', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '7ed928ebce2196a0b31a7b1b620670b6c7b1047c', class: "icon-input", name: this.icon, color: this.iconColor, iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' } })), this.passwordInput && (h("dropi-icon", { key: '9c69320fd760eb8a41f375d902e5fb371cf024f3', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', iconWidth: "20px", iconHeight: "20px", style: { width: '20px', height: '20px' }, color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'c3e958c4e7293b1c96425fb2f23b9150d8e22b1b', id: this.resolvedId, class: {
                 'form-control': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
                 'padding-icon': showIconInline,
                 'text-password': this.passwordInput && !this.showPassword,
                 'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '005d15af6b50b2cb2d47ac8381a722794eb273e5', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: 'ad56df877cff3df8a801cdfcb607d9af02f7465a', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '76e858c13a798f69b2d20ee9908f17531568dad1', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: '3e42ffb4db7444ebfb49cc9c6720d5a9d02b2860', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '5e970903eb51ca6b72a43bef0edf6ef149443247', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '6c04977ffa24ee362830bb5dc8c3b2600e19c3c0', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '98361181d292d929c438c3dd70c920db510499ef', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '21a2e9229eb21a8c0b48ec51a609a143ee8ba2c4', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: '18d18c43c8ea7c35ac5d4a294cbb36a8e05930fc', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '1c684fa4c25ef0afb852592ca1e2fb059e0db491', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));