vviinn-widgets 2.220.0 → 2.222.0

package/dist/esm/vviinn-camera_12.entry.js

@@ -1,12 +1,12 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-RkvPN2Rk.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-B89nCb_F.js';
 import { _ as _functionExports, E as EitherExports, f as fold, b as fromImage, a as divideOnSized, e as isLeft, m as match, O as OptionExports } from './Rectangle-dmgo4KMB.js';
-import { t as toFile, c as makeUploadFileRequest, w as getImageSizes, v as version, f as campaignTypeNames, h as addIfNotEmpty, m as makeVisualSearchRequest, u as useSearchStore, x as checkImageType, g as getAcceptableFileFormats, d as setTextSearchQuery, y as resetStore, j as makeTextSearchRequest, z as makeProductListingPageRequest, A as checkDeviceType, p as parseStringToExcluded } from './search.store-BVRhMpHA.js';
-import { s as slotChangeListener, a as addEventListenersWithSignal, p as productCardSlotNames, v as vprIconSlotName, f as findSlotElements, g as getSlotNames, b as setElementInteractivity, S as SlotSkeleton } from './index-OsoUj2Au.js';
-import { g as getRemoveFilterAriaLabel, F as FilterIconClose, P as PlusIcon, R as RESULTS_CALCULATED_COLUMNS_CSS_VAR, c as createWidgetEvent, a as createFilterEvent, v as v4, b as createAddToBasketEvent, d as createAddToWishlistEvent, e as createResultEventByType, f as createProductEventByType, h as getCustomLabels, t as triggerFilter, i as triggerRemoveIntervalFilter, j as announceToScreenReader, s as syncRequestFilters, k as isSubFilterActive, l as RenderFilterButton, m as getIntervalLabel, n as createImageSearchEvent } from './index-ChtanA0O.js';
+import { t as toFile, c as makeUploadFileRequest, w as getImageSizes, v as version, f as campaignTypeNames, h as addIfNotEmpty, m as makeVisualSearchRequest, u as useSearchStore, x as checkImageType, g as getAcceptableFileFormats, d as setTextSearchQuery, y as resetStore, j as makeTextSearchRequest, z as makeProductListingPageRequest, A as checkDeviceType, p as parseStringToExcluded } from './search.store-Cgs5icgA.js';
+import { s as slotChangeListener, a as addEventListenersWithSignal, p as productCardSlotNames, v as vprIconSlotName, f as findSlotElements, g as getSlotNames, b as setElementInteractivity, S as SlotSkeleton } from './index-C1-PYhS4.js';
+import { g as getRemoveFilterAriaLabel, F as FilterIconClose, P as PlusIcon, R as RESULTS_CALCULATED_COLUMNS_CSS_VAR, c as createWidgetEvent, a as createFilterEvent, v as v4, b as createAddToBasketEvent, d as createAddToWishlistEvent, e as createResultEventByType, f as createProductEventByType, h as getCustomLabels, t as triggerFilter, i as triggerRemoveIntervalFilter, j as announceToScreenReader, s as syncRequestFilters, k as isSubFilterActive, l as RenderFilterButton, m as getIntervalLabel, n as createImageSearchEvent } from './index-CEzGPs5u.js';
 import { i as instance, t as trackEvent, a as isTrackingEnabled, d as defaultConfig } from './store-BJxQCbNV.js';
 import { M as MIN_SEARCH_AREA_SIZE, S as SUPPORTED_ASPECT_RATIO, a as MIN_IMAGE_SIDE_FOR_CROPPER, C as Cropper, c as cropperOptions, g as getCropBoxData, i as isCropBoxChangeMinimal, D as DEFAULT_IMAGE_SIZE } from './cropperUtils-CkB6bG3L.js';
-import { r as renderExternalCSS } from './cssUrlHelper-DsQD_dY6.js';
-import { i as initializeLocale, d as productCardsGridPart, p as productCardParts, l as listCardParts, e as contentCardParts, f as selectedFiltersParts, g as suggestionsParts, h as filtersParts, j as extendedFiltersParts, m as modalParts, b as searchBarParts, k as searchWidgetFilterParts, n as searchWidgetButtonParts } from './index-BtnjaTty.js';
+import { r as renderExternalCSS } from './cssUrlHelper-Byz4s-MD.js';
+import { i as initializeLocale, d as productCardsGridPart, p as productCardParts, l as listCardParts, e as contentCardParts, f as selectedFiltersParts, g as suggestionsParts, h as filtersParts, j as extendedFiltersParts, m as modalParts, b as searchBarParts, k as searchWidgetFilterParts, n as searchWidgetButtonParts } from './index-BCrstDkj.js';
 import { i as isOnResultsPage, a as parseResultsPageParams, p as parseResultsPageParamNames, c as buildImageSearchRedirectUrl } from './resultsPageUrl-DbOxfJSz.js';
 import { R as RESULTS_WIDGET_IMAGE_RESOLUTION_WIDTH, b as SCROLL_TO_DISCOVERY_DELAY, S as SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH } from './constants-rqiiCPBX.js';
 import { o as openProductLink } from './openProductLink-C7_qzUNW.js';
@@ -29,6 +29,9 @@ const UploadActionIcon = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg",
 const PhotoFrameCorner = ({ className }) => (h("svg", { width: "34", height: "34", viewBox: "0 0 34 34", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: className },
     h("path", { d: "M31 3H15C8.37258 3 3 8.37258 3 15V31", stroke: "white", "stroke-width": "6", "stroke-linecap": "square" })));
 
+const DragDropImageIcon = () => (h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { d: "M6.66667 28C5.93333 28 5.30556 27.7389 4.78333 27.2167C4.26111 26.6944 4 26.0667 4 25.3333V6.66667C4 5.93333 4.26111 5.30556 4.78333 4.78333C5.30556 4.26111 5.93333 4 6.66667 4H25.3333C26.0667 4 26.6944 4.26111 27.2167 4.78333C27.7389 5.30556 28 5.93333 28 6.66667V25.3333C28 26.0667 27.7389 26.6944 27.2167 27.2167C26.6944 27.7389 26.0667 28 25.3333 28H6.66667ZM6.66667 25.3333H25.3333V6.66667H6.66667V25.3333ZM9.33333 22.6667H22.6667C22.9333 22.6667 23.1333 22.5444 23.2667 22.3C23.4 22.0556 23.3778 21.8222 23.2 21.6L19.5333 16.7C19.4 16.5222 19.2222 16.4333 19 16.4333C18.7778 16.4333 18.6 16.5222 18.4667 16.7L15 21.3333L12.5333 18.0333C12.4 17.8556 12.2222 17.7667 12 17.7667C11.7778 17.7667 11.6 17.8556 11.4667 18.0333L8.8 21.6C8.62222 21.8222 8.6 22.0556 8.73333 22.3C8.86667 22.5444 9.06667 22.6667 9.33333 22.6667Z", fill: "currentColor" })));
+
 const TextIcon = () => (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
     h("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
         h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.5 3C4.39543 3 3.5 3.89543 3.5 5V19C3.5 20.1046 4.39543 21 5.5 21H19.5C20.6046 21 21.5 20.1046 21.5 19V5C21.5 3.89543 20.6046 3 19.5 3H5.5ZM8.5 9C8.5 8.44772 8.94772 8 9.5 8H15.5C16.0523 8 16.5 8.44772 16.5 9C16.5 9.55228 16.0523 10 15.5 10H13.5V15C13.5 15.5523 13.0523 16 12.5 16C11.9477 16 11.5 15.5523 11.5 15V10H9.5C8.94772 10 8.5 9.55228 8.5 9Z", fill: "white" }))));
@@ -444,7 +447,10 @@ const VviinnCropper = class {
 };
 VviinnCropper.style = vviinnCropperCss;
 
-const vviinnImageSelectorCss = ".visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}label{cursor:pointer;display:grid;width:100%;height:100%;transition:background 0.1s ease-in-out}";
+/** Returns the first file from a drop's DataTransfer (no type validation). */
+const parseDroppedFile = (dataTransfer) => { var _a, _b; return (_b = (_a = dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.files) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null; };
+
+const vviinnImageSelectorCss = ".visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}label{cursor:pointer;display:grid;place-items:center;width:100%;height:100%;transition:background 0.15s ease-in-out}label.loading{pointer-events:none;cursor:default}:host(.upload-drop-zone) label{height:48px;border-radius:var(--border-radius-100);background:var(--color-primary, var(--button-bg-color-primary));color:var(--color-text-on-color)}:host(.upload-drop-zone) label:hover{background:var(--color-primary-hover, var(--button-bg-color-primary-hover))}.drop-zone__hint{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-50);width:100%}.drop-zone__text{font-size:var(--font-size-body);line-height:var(--line-height-body);text-align:center;color:var(--color-text-secondary)}";
 
 const VviinnImageSelector = class {
     constructor(hostRef) {
@@ -453,34 +459,86 @@ const VviinnImageSelector = class {
         this.vviinnNoResult = createEvent(this, "vviinnNoResult");
         this.vviinnImageUploadFinished = createEvent(this, "vviinnImageUploadFinished");
         this.loading = false;
-    }
-    async handleInputChange(event) {
-        var _a;
-        const input = event.target;
-        const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (!file)
+        /** Accept image files dropped from the OS onto the selector */
+        this.useDragAndDrop = false;
+        this.isDragOver = false;
+        // Guards against a second drop / file-input change starting a concurrent
+        // upload while the first request is still in flight (racing two searches).
+        this.isProcessing = false;
+    }
+    async processFile(file) {
+        if (this.isProcessing)
             return;
         const validationResult = checkImageType(file);
         if (isLeft(validationResult)) {
             this.vviinnNoResult.emit(Object.assign(Object.assign({}, this.basicEventData), { reason: validationResult.left.kind, errorMessage: validationResult.left.inner, errorCode: validationResult.left.code }));
-            input.value = "";
             return;
         }
         this.vviinnImageUploadStarted.emit(Object.assign(Object.assign({}, this.basicEventData), { isTriggeredByVpsWidget: this.storeName === "widget" }));
-        const processingResult = await makeUploadFileRequest(this.storeName, this.token, this.apiPath)(file);
-        _functionExports.pipe(processingResult, match(({ kind, code }) => {
-            this.vviinnNoResult.emit(Object.assign(Object.assign({}, this.basicEventData), { reason: kind, errorCode: code }));
-        }, (response) => {
-            var _a;
-            if (!this.showInWidget)
-                setLocalStorageItems((_a = this.state.image) === null || _a === void 0 ? void 0 : _a.src, this.state.detectedObjects);
-            this.vviinnImageUploadFinished.emit({
-                searchId: response.requestId,
-                isTriggeredByVpsWidget: this.storeName === "widget",
-            });
-        }));
+        this.isProcessing = true;
+        try {
+            const processingResult = await makeUploadFileRequest(this.storeName, this.token, this.apiPath)(file);
+            _functionExports.pipe(processingResult, match(({ kind, code }) => {
+                this.vviinnNoResult.emit(Object.assign(Object.assign({}, this.basicEventData), { reason: kind, errorCode: code }));
+            }, (response) => {
+                var _a;
+                if (!this.showInWidget)
+                    setLocalStorageItems((_a = this.state.image) === null || _a === void 0 ? void 0 : _a.src, this.state.detectedObjects);
+                this.vviinnImageUploadFinished.emit({
+                    searchId: response.requestId,
+                    isTriggeredByVpsWidget: this.storeName === "widget",
+                });
+            }));
+        }
+        finally {
+            this.isProcessing = false;
+        }
+    }
+    async handleInputChange(event) {
+        var _a;
+        const input = event.target;
+        const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file)
+            return;
+        await this.processFile(file);
         input.value = "";
     }
+    onDragOver(event) {
+        if (!this.useDragAndDrop)
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = "copy";
+        clearTimeout(this.dragLeaveTimer);
+        this.isDragOver = true;
+    }
+    onDragLeave() {
+        if (!this.useDragAndDrop)
+            return;
+        clearTimeout(this.dragLeaveTimer);
+        this.dragLeaveTimer = setTimeout(() => (this.isDragOver = false), 50);
+    }
+    async onDrop(event) {
+        if (!this.useDragAndDrop)
+            return;
+        event.preventDefault();
+        clearTimeout(this.dragLeaveTimer);
+        this.isDragOver = false;
+        const file = parseDroppedFile(event.dataTransfer);
+        if (file)
+            await this.processFile(file);
+    }
+    // Safety net for a drag that ends without a dragleave reaching this host
+    // (dropped outside the element, or cancelled): clears a stuck highlight.
+    onGlobalDragEnd() {
+        if (!this.useDragAndDrop || !this.isDragOver)
+            return;
+        clearTimeout(this.dragLeaveTimer);
+        this.isDragOver = false;
+    }
+    disconnectedCallback() {
+        clearTimeout(this.dragLeaveTimer);
+    }
     startUploadWatcher(upload) {
         if (upload) {
             this.fileInput.click();
@@ -488,13 +546,13 @@ const VviinnImageSelector = class {
         }
     }
     render() {
-        return (h(Host, { key: '8b5391a9be30260571a08494f069bab7eeceb183', exportparts: "button" }, this.loading ? (h("vviinn-preloader", null)) : (h("label", { htmlFor: "fileInput", part: "button", tabindex: "0", onKeyDown: (e) => {
+        return (h(Host, { key: '616c751da82243f02d9d9cbc4f908702c49b3889', exportparts: this.useDragAndDrop ? "button:upload-photo_button" : "button", class: { "drag-over": this.isDragOver } }, this.useDragAndDrop && (h("div", { key: 'b02ad9a11981be6f13bd1347279fe4dad3046887', class: "drop-zone__hint", "aria-hidden": "true" }, h("span", { key: '9f5ed13a34f05cd9dd13aeddf3bfe166b84ee6f6', class: "drop-zone__icon" }, h("slot", { key: 'ccbadd5393155b7e2222d89afad490f43e93b0bc', name: "drop-zone-icon" })), h("span", { key: '0cd1cbaaadb326ef8d53bd8c895c9d72af8571a0', class: "drop-zone__text" }, h("slot", { key: '659b6e91869f7fbb1d73df37d6e25a54ebd200a1', name: "drop-zone-text" })))), h("label", { key: '3684c5e7afefa0403b8d760db89390530834d16d', htmlFor: "fileInput", part: "button", class: { loading: this.loading }, tabindex: this.loading ? -1 : 0, onKeyDown: (e) => {
                 var _a;
-                if (e.key === "Enter" || e.key === " ") {
+                if (!this.loading && (e.key === "Enter" || e.key === " ")) {
                     e.preventDefault();
                     (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
                 }
-            } }, h("slot", { name: "upload-button-text" }, "Upload image"))), h("input", { key: '7e21fce692bf7a41c274eec5a9cd198cbed023eb', id: "fileInput", class: "visually-hidden", type: "file", tabindex: "-1", accept: getAcceptableFileFormats(), onChange: (event) => this.handleInputChange(event), ref: (el) => (this.fileInput = el) })));
+            } }, this.loading ? (h("vviinn-preloader", null)) : (h("slot", { name: "upload-button-text" }, "Upload image"))), h("input", { key: '7d9cfd89c2d64cdf3c262e89f652da500dcc80ba', id: "fileInput", class: "visually-hidden", type: "file", tabindex: "-1", accept: getAcceptableFileFormats(), onChange: (event) => this.handleInputChange(event), ref: (el) => (this.fileInput = el) })));
     }
     static get watchers() { return {
         "startUpload": ["startUploadWatcher"]
@@ -513,7 +571,7 @@ const VviinnOverlayedModal = class {
         this.hideBackButton = false;
     }
     render() {
-        return (h(Host, { key: '7f7b0ee43cb77127b47a0ba3be067662aa6a9e9b' }, h("vviinn-overlay", { key: '3a0da726703e5930b97b111b4039492156db8aff', active: this.active }, h("vviinn-modal", { key: 'c88334ba9d6c975a3fb93a002878284a102f2fcf', resetState: this.resetState, active: this.active, buttonElementId: this.buttonElementId, hideBackButton: this.hideBackButton, widgetVersion: this.widgetVersion, isFirstScreen: this.isFirstScreen }, h("slot", { key: '76a94f8c3591bf1a3e9a5f537196657c1c00b8e7' }, "CONTENT")))));
+        return (h(Host, { key: '32e8d4e925e77941445edaf5b403e1ae020e33fb' }, h("vviinn-overlay", { key: '584afbe6de3cc7d6670e0242fe5bdc1853efa787', active: this.active }, h("vviinn-modal", { key: '03993aaa1c481819cf6909ea1c83dd501a34b164', resetState: this.resetState, active: this.active, buttonElementId: this.buttonElementId, hideBackButton: this.hideBackButton, widgetVersion: this.widgetVersion, isFirstScreen: this.isFirstScreen }, h("slot", { key: '59ff72bd0569dd3a0cb1ecefcd94f7f22ded92bb' }, "CONTENT")))));
     }
 };
 VviinnOverlayedModal.style = vviinnOverlayedModalCss;
@@ -541,7 +599,7 @@ const VviinnPrivacyBadge = class {
         }
     }
     render() {
-        return (h(Host, { key: '3be7fae8e35376e72e1e780b89cc6b63a19a403f' }, h("slot", { key: '00ad4c7ce9fe26d3b7eafcde87953e1add9dd4a6', name: "vviinn-privacy-badge-text" }, h("div", { key: 'cc4eab27483574b5922eea7a24336aeeba229cf5', innerHTML: this.privacyBadgeText }))));
+        return (h(Host, { key: 'c1bd1ffac9b817b4bb8ca9b0b9f66b406abf6b69' }, h("slot", { key: 'a55744d30b8957f7eb1f2114361ac26cd670974f', name: "vviinn-privacy-badge-text" }, h("div", { key: '66ed59809f59942c3bbf00b1a26dddf17cfb31ce', innerHTML: this.privacyBadgeText }))));
     }
     get el() { return getElement(this); }
 };
@@ -980,13 +1038,13 @@ const VviinnResults = class {
     render() {
         var _a;
         const resultsLength = this.getResults().length;
-        return (h(Host, { key: '2ba9c019be5e6d2a70f299ebd4827baefa671cad', id: "results-block", class: {
+        return (h(Host, { key: '0767d0c21dee72b9a0f09a80dfe2ca7c375e4d50', id: "results-block", class: {
                 "show-in-widget": this.showInWidget,
                 "matching-discovery": this.oneClickDiscoveryMode === "append-slider",
-            }, exportparts: `${productCardParts}, ${listCardParts}, ${contentCardParts}, ${productCardsGridPart}` }, renderExternalCSS(this.cssUrl), h("div", { key: '8521abb79a86723af8f18cd66558f8cd56d0d725', class: "nothing-found" }, this.getCurrentErrorType() && (h("vviinn-error", { key: '030f376feaa161d598dc60e2deae0bcde368759a', errorType: this.getCurrentErrorType(), handler: this.resetWidgetState, hasBackground: this.showInWidget, searchType: this.state.searchType }))), h("div", { key: '82a242f74f6a5481b40ec26a977d11465a5c58da', class: {
+            }, exportparts: `${productCardParts}, ${listCardParts}, ${contentCardParts}, ${productCardsGridPart}` }, renderExternalCSS(this.cssUrl), h("div", { key: 'bfd01f2bf39be84501ce0cf42f5672acda3e500b', class: "nothing-found" }, this.getCurrentErrorType() && (h("vviinn-error", { key: 'ce077ad92253c7727a509567571d821ebda6dbd4', errorType: this.getCurrentErrorType(), handler: this.resetWidgetState, hasBackground: this.showInWidget, searchType: this.state.searchType }))), h("div", { key: 'dc63984664328f04abe6011aa0db856cb862f37c', class: {
                 hidden: this.showAspectRatioError || resultsLength === 0,
                 products: true,
-            }, part: productCardsGridPart, id: "vviinn-results-products" }, resultsLength > 0 && this.renderResults(), h("div", { key: 'ed28c78ddfa0826f8ad8a70639e83386d9297c7c', id: "one-click-discovery-append", style: {
+            }, part: productCardsGridPart, id: "vviinn-results-products" }, resultsLength > 0 && this.renderResults(), h("div", { key: '2e39c5d65c5c7981c0b9a93dfe97ad62165a25b4', id: "one-click-discovery-append", style: {
                 order: ((_a = this.oneClickDiscoveryAppendIndex) !== null && _a !== void 0 ? _a : resultsLength).toString(),
             } }))));
     }
@@ -1250,7 +1308,7 @@ const VviinnSlide = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '133a498cc9bacc4be222f7bc10aab41581e81f1a' }, h("slot", { key: '4c6793ca181403a57e378b9212d341cdfe2c529c' })));
+        return (h(Host, { key: '8740746256bbf7c374da17ff2bca8730108586c8' }, h("slot", { key: '2de442bb958c11b063b2d9d3a416e5a8df33d3cb' })));
     }
 };
 VviinnSlide.style = vviinnSlideCss;
@@ -1295,7 +1353,7 @@ const VviinnSlider = class {
         return this.isRTL ? position * -1 : position;
     }
     render() {
-        return (h(Host, { key: 'cae995bbfc00ab993963b12e219ca9e7d1b88a10' }, h("div", { key: 'ef4812aaa71a522c8bd038596d5f3d4b8e068057', class: "items-wrapper" }, h("div", { key: '56796be36f776337632f02b6b0e3cf034e36c0a7', class: "items" }, h("slot", { key: '6f9d9f5a6d6a8abb27689e7d5c724bb0a696659d' })))));
+        return (h(Host, { key: '6ee307d2510c452af6a730498f67fa26324f2990' }, h("div", { key: '1e721a9e0da711a893d318a3536668362da3c2b7', class: "items-wrapper" }, h("div", { key: 'd48b29eb243c35ac655e0b784b7303e239b416b0', class: "items" }, h("slot", { key: 'dc63e964c8def5b7202377c0c9f75681e7220ad9' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1384,6 +1442,72 @@ ${e}</tr>
 `}strong({tokens:e}){return `<strong>${this.parser.parseInline(e)}</strong>`}em({tokens:e}){return `<em>${this.parser.parseInline(e)}</em>`}codespan({text:e}){return `<code>${O(e,true)}</code>`}br(e){return "<br>"}del({tokens:e}){return `<del>${this.parser.parseInline(e)}</del>`}link({href:e,title:t,tokens:n}){let r=this.parser.parseInline(n),i=J(e);if(i===null)return r;e=i;let s='<a href="'+e+'"';return t&&(s+=' title="'+O(t)+'"'),s+=">"+r+"</a>",s}image({href:e,title:t,text:n,tokens:r}){r&&(n=this.parser.parseInline(r,this.parser.textRenderer));let i=J(e);if(i===null)return O(n);e=i;let s=`<img src="${e}" alt="${O(n)}"`;return t&&(s+=` title="${O(t)}"`),s+=">",s}text(e){return "tokens"in e&&e.tokens?this.parser.parseInline(e.tokens):"escaped"in e&&e.escaped?e.text:O(e.text)}};var $=class{strong({text:e}){return e}em({text:e}){return e}codespan({text:e}){return e}del({text:e}){return e}html({text:e}){return e}text({text:e}){return e}link({text:e}){return ""+e}image({text:e}){return ""+e}br(){return ""}checkbox({raw:e}){return e}};var b=class u{options;renderer;textRenderer;constructor(e){this.options=e||T,this.options.renderer=this.options.renderer||new y,this.renderer=this.options.renderer,this.renderer.options=this.options,this.renderer.parser=this,this.textRenderer=new $;}static parse(e,t){return new u(t).parse(e)}static parseInline(e,t){return new u(t).parseInline(e)}parse(e){this.renderer.parser=this;let t="";for(let n=0;n<e.length;n++){let r=e[n];if(this.options.extensions?.renderers?.[r.type]){let s=r,a=this.options.extensions.renderers[s.type].call({parser:this},s);if(a!==false||!["space","hr","heading","code","table","blockquote","list","html","def","paragraph","text"].includes(s.type)){t+=a||"";continue}}let i=r;switch(i.type){case "space":{t+=this.renderer.space(i);break}case "hr":{t+=this.renderer.hr(i);break}case "heading":{t+=this.renderer.heading(i);break}case "code":{t+=this.renderer.code(i);break}case "table":{t+=this.renderer.table(i);break}case "blockquote":{t+=this.renderer.blockquote(i);break}case "list":{t+=this.renderer.list(i);break}case "checkbox":{t+=this.renderer.checkbox(i);break}case "html":{t+=this.renderer.html(i);break}case "def":{t+=this.renderer.def(i);break}case "paragraph":{t+=this.renderer.paragraph(i);break}case "text":{t+=this.renderer.text(i);break}default:{let s='Token with "'+i.type+'" type was not found.';if(this.options.silent)return console.error(s),"";throw new Error(s)}}}return t}parseInline(e,t=this.renderer){this.renderer.parser=this;let n="";for(let r=0;r<e.length;r++){let i=e[r];if(this.options.extensions?.renderers?.[i.type]){let a=this.options.extensions.renderers[i.type].call({parser:this},i);if(a!==false||!["escape","html","link","image","strong","em","codespan","br","del","text"].includes(i.type)){n+=a||"";continue}}let s=i;switch(s.type){case "escape":{n+=t.text(s);break}case "html":{n+=t.html(s);break}case "link":{n+=t.link(s);break}case "image":{n+=t.image(s);break}case "checkbox":{n+=t.checkbox(s);break}case "strong":{n+=t.strong(s);break}case "em":{n+=t.em(s);break}case "codespan":{n+=t.codespan(s);break}case "br":{n+=t.br(s);break}case "del":{n+=t.del(s);break}case "text":{n+=t.text(s);break}default:{let a='Token with "'+s.type+'" type was not found.';if(this.options.silent)return console.error(a),"";throw new Error(a)}}}return n}};var P=class{options;block;constructor(e){this.options=e||T;}static passThroughHooks=new Set(["preprocess","postprocess","processAllTokens","emStrongMask"]);static passThroughHooksRespectAsync=new Set(["preprocess","postprocess","processAllTokens"]);preprocess(e){return e}postprocess(e){return e}processAllTokens(e){return e}emStrongMask(e){return e}provideLexer(){return this.block?x.lex:x.lexInline}provideParser(){return this.block?b.parse:b.parseInline}};var D=class{defaults=M();options=this.setOptions;parse=this.parseMarkdown(true);parseInline=this.parseMarkdown(false);Parser=b;Renderer=y;TextRenderer=$;Lexer=x;Tokenizer=w;Hooks=P;constructor(...e){this.use(...e);}walkTokens(e,t){let n=[];for(let r of e)switch(n=n.concat(t.call(this,r)),r.type){case "table":{let i=r;for(let s of i.header)n=n.concat(this.walkTokens(s.tokens,t));for(let s of i.rows)for(let a of s)n=n.concat(this.walkTokens(a.tokens,t));break}case "list":{let i=r;n=n.concat(this.walkTokens(i.items,t));break}default:{let i=r;this.defaults.extensions?.childTokens?.[i.type]?this.defaults.extensions.childTokens[i.type].forEach(s=>{let a=i[s].flat(1/0);n=n.concat(this.walkTokens(a,t));}):i.tokens&&(n=n.concat(this.walkTokens(i.tokens,t)));}}return n}use(...e){let t=this.defaults.extensions||{renderers:{},childTokens:{}};return e.forEach(n=>{let r={...n};if(r.async=this.defaults.async||r.async||false,n.extensions&&(n.extensions.forEach(i=>{if(!i.name)throw new Error("extension name required");if("renderer"in i){let s=t.renderers[i.name];s?t.renderers[i.name]=function(...a){let o=i.renderer.apply(this,a);return o===false&&(o=s.apply(this,a)),o}:t.renderers[i.name]=i.renderer;}if("tokenizer"in i){if(!i.level||i.level!=="block"&&i.level!=="inline")throw new Error("extension level must be 'block' or 'inline'");let s=t[i.level];s?s.unshift(i.tokenizer):t[i.level]=[i.tokenizer],i.start&&(i.level==="block"?t.startBlock?t.startBlock.push(i.start):t.startBlock=[i.start]:i.level==="inline"&&(t.startInline?t.startInline.push(i.start):t.startInline=[i.start]));}"childTokens"in i&&i.childTokens&&(t.childTokens[i.name]=i.childTokens);}),r.extensions=t),n.renderer){let i=this.defaults.renderer||new y(this.defaults);for(let s in n.renderer){if(!(s in i))throw new Error(`renderer '${s}' does not exist`);if(["options","parser"].includes(s))continue;let a=s,o=n.renderer[a],l=i[a];i[a]=(...p)=>{let c=o.apply(i,p);return c===false&&(c=l.apply(i,p)),c||""};}r.renderer=i;}if(n.tokenizer){let i=this.defaults.tokenizer||new w(this.defaults);for(let s in n.tokenizer){if(!(s in i))throw new Error(`tokenizer '${s}' does not exist`);if(["options","rules","lexer"].includes(s))continue;let a=s,o=n.tokenizer[a],l=i[a];i[a]=(...p)=>{let c=o.apply(i,p);return c===false&&(c=l.apply(i,p)),c};}r.tokenizer=i;}if(n.hooks){let i=this.defaults.hooks||new P;for(let s in n.hooks){if(!(s in i))throw new Error(`hook '${s}' does not exist`);if(["options","block"].includes(s))continue;let a=s,o=n.hooks[a],l=i[a];P.passThroughHooks.has(s)?i[a]=p=>{if(this.defaults.async&&P.passThroughHooksRespectAsync.has(s))return (async()=>{let d=await o.call(i,p);return l.call(i,d)})();let c=o.call(i,p);return l.call(i,c)}:i[a]=(...p)=>{if(this.defaults.async)return (async()=>{let d=await o.apply(i,p);return d===false&&(d=await l.apply(i,p)),d})();let c=o.apply(i,p);return c===false&&(c=l.apply(i,p)),c};}r.hooks=i;}if(n.walkTokens){let i=this.defaults.walkTokens,s=n.walkTokens;r.walkTokens=function(a){let o=[];return o.push(s.call(this,a)),i&&(o=o.concat(i.call(this,a))),o};}this.defaults={...this.defaults,...r};}),this}setOptions(e){return this.defaults={...this.defaults,...e},this}lexer(e,t){return x.lex(e,t??this.defaults)}parser(e,t){return b.parse(e,t??this.defaults)}parseMarkdown(e){return (n,r)=>{let i={...r},s={...this.defaults,...i},a=this.onError(!!s.silent,!!s.async);if(this.defaults.async===true&&i.async===false)return a(new Error("marked(): The async option was set to true by an extension. Remove async: false from the parse options object to return a Promise."));if(typeof n>"u"||n===null)return a(new Error("marked(): input parameter is undefined or null"));if(typeof n!="string")return a(new Error("marked(): input parameter is of type "+Object.prototype.toString.call(n)+", string expected"));if(s.hooks&&(s.hooks.options=s,s.hooks.block=e),s.async)return (async()=>{let o=s.hooks?await s.hooks.preprocess(n):n,p=await(s.hooks?await s.hooks.provideLexer():e?x.lex:x.lexInline)(o,s),c=s.hooks?await s.hooks.processAllTokens(p):p;s.walkTokens&&await Promise.all(this.walkTokens(c,s.walkTokens));let h=await(s.hooks?await s.hooks.provideParser():e?b.parse:b.parseInline)(c,s);return s.hooks?await s.hooks.postprocess(h):h})().catch(a);try{s.hooks&&(n=s.hooks.preprocess(n));let l=(s.hooks?s.hooks.provideLexer():e?x.lex:x.lexInline)(n,s);s.hooks&&(l=s.hooks.processAllTokens(l)),s.walkTokens&&this.walkTokens(l,s.walkTokens);let c=(s.hooks?s.hooks.provideParser():e?b.parse:b.parseInline)(l,s);return s.hooks&&(c=s.hooks.postprocess(c)),c}catch(o){return a(o)}}}onError(e,t){return n=>{if(n.message+=`
 Please report this to https://github.com/markedjs/marked.`,e){let r="<p>An error occurred:</p><pre>"+O(n.message+"",true)+"</pre>";return t?Promise.resolve(r):r}if(t)return Promise.reject(n);throw n}}};var L=new D;function g(u,e){return L.parse(u,e)}g.options=g.setOptions=function(u){return L.setOptions(u),g.defaults=L.defaults,G(g.defaults),g};g.getDefaults=M;g.defaults=T;g.use=function(...u){return L.use(...u),g.defaults=L.defaults,G(g.defaults),g};g.walkTokens=function(u,e){return L.walkTokens(u,e)};g.parseInline=L.parseInline;g.Parser=b;g.parser=b.parse;g.Renderer=y;g.TextRenderer=$;g.Lexer=x;g.lexer=x.lex;g.Tokenizer=w;g.Hooks=P;g.parse=g;
 
+const toggleFilterInSet = (appliedFilters, suggestionText) => {
+    const newAppliedFilters = new Set(appliedFilters);
+    if (newAppliedFilters.has(suggestionText)) {
+        newAppliedFilters.delete(suggestionText);
+    }
+    else {
+        newAppliedFilters.add(suggestionText);
+    }
+    return newAppliedFilters;
+};
+const formatIntervalKey = (column, start, end) => `${column}:${start}-${end}`;
+const extractActiveFilterValues = (activeFilters) => {
+    const activeValues = new Set();
+    activeFilters.forEach((filter) => {
+        if (!Array.isArray(filter.values))
+            return;
+        filter.values.forEach((v) => {
+            // Interval values are `{start, end}` objects; categorical values are strings.
+            if (v !== null && typeof v === "object" && "start" in v) {
+                activeValues.add(formatIntervalKey(filter.column, v.start, v.end));
+            }
+            else {
+                activeValues.add(`${filter.column}:${String(v)}`);
+            }
+        });
+    });
+    return activeValues;
+};
+const syncSuggestionFilters = (activeFilters, stream) => {
+    var _a, _b, _c;
+    const activeValues = extractActiveFilterValues(activeFilters);
+    const updatedAppliedFilters = new Set();
+    if (!(stream === null || stream === void 0 ? void 0 : stream.items))
+        return updatedAppliedFilters;
+    for (const item of stream.items) {
+        if (item.role !== "assistant" || !item.parts)
+            continue;
+        for (const part of item.parts) {
+            if (!((_a = part.text) === null || _a === void 0 ? void 0 : _a.annotations))
+                continue;
+            for (const annotation of part.text.annotations) {
+                if (!((_c = (_b = annotation.interactions) === null || _b === void 0 ? void 0 : _b.dynamicFilters) === null || _c === void 0 ? void 0 : _c.length))
+                    continue;
+                for (const filter of annotation.interactions.dynamicFilters) {
+                    if (filter.type === "categorical" && "values" in filter) {
+                        filter.values.forEach((value) => {
+                            if (activeValues.has(`${filter.column}:${String(value.value)}`)) {
+                                updatedAppliedFilters.add(`${filter.column}:${value.value}`);
+                            }
+                        });
+                    }
+                    else if (filter.type === "interval" && "selectedValues" in filter) {
+                        filter.selectedValues.forEach((interval) => {
+                            const key = formatIntervalKey(filter.column, interval.start, interval.end);
+                            if (activeValues.has(key)) {
+                                updatedAppliedFilters.add(key);
+                            }
+                        });
+                    }
+                }
+            }
+        }
+    }
+    return updatedAppliedFilters;
+};
+
 const extractDataItems = (annotation) => annotation.data.items;
 const findMatchingFilterValue = (item, filter) => {
     if (filter.type !== "categorical" ||
@@ -1404,18 +1528,38 @@ const applyFiltersForItems = (dataItems, interactions, currentRequestFilters, ha
     let updatedFilters = currentRequestFilters;
     if (dataItems.length === 0) {
         for (const filter of filters) {
-            if (filter.type !== "categorical" || !("values" in filter))
-                continue;
-            for (const filterValue of filter.values) {
-                updatedFilters = triggerFilter({
-                    filterValue: filterValue,
-                    selectedFilter: filter,
-                    requestFilters: updatedFilters,
-                    vviinnFilterTriggered: handlers.vviinnFilterTriggered,
-                    vviinnFiltersChanged: handlers.vviinnFiltersChanged,
-                    el: handlers.el,
-                    isTriggeredByVpsWidget: handlers.isTriggeredByVpsWidget,
-                });
+            if (filter.type === "categorical" && "values" in filter) {
+                for (const filterValue of filter.values) {
+                    updatedFilters = triggerFilter({
+                        filterValue: filterValue,
+                        selectedFilter: filter,
+                        requestFilters: updatedFilters,
+                        vviinnFilterTriggered: handlers.vviinnFilterTriggered,
+                        vviinnFiltersChanged: handlers.vviinnFiltersChanged,
+                        el: handlers.el,
+                        isTriggeredByVpsWidget: handlers.isTriggeredByVpsWidget,
+                    });
+                }
+            }
+            else if (filter.type === "interval" && "selectedValues" in filter) {
+                // A suggestion chip represents one specific range to toggle, not a slider.
+                // The backend emits `full === selectedValues[0]`, which would make
+                // `isFullRangeInterval` read every click as "cleared to the full range"
+                // (deselect-only). Neutralize `full` so the shared toggle logic selects /
+                // deselects this exact interval by value match. Only the object passed to
+                // `triggerFilter` is affected; `value` still carries the real interval.
+                const chipFilter = Object.assign(Object.assign({}, filter), { full: { start: undefined, end: undefined } });
+                for (const interval of filter.selectedValues) {
+                    updatedFilters = triggerFilter({
+                        filterValue: { interval },
+                        selectedFilter: chipFilter,
+                        requestFilters: updatedFilters,
+                        vviinnFilterTriggered: handlers.vviinnFilterTriggered,
+                        vviinnFiltersChanged: handlers.vviinnFiltersChanged,
+                        el: handlers.el,
+                        isTriggeredByVpsWidget: handlers.isTriggeredByVpsWidget,
+                    });
+                }
             }
         }
         return updatedFilters;
@@ -1464,9 +1608,15 @@ const splitContentByLocators = (content, annotations) => {
 };
 const getAnnotationFilterKeys = (annotation) => {
     var _a, _b, _c;
-    return (_c = (_b = (_a = annotation.interactions) === null || _a === void 0 ? void 0 : _a.dynamicFilters) === null || _b === void 0 ? void 0 : _b.flatMap((filter) => "values" in filter
-        ? filter.values.map((v) => `${filter.column}:${v.value}`)
-        : [])) !== null && _c !== void 0 ? _c : [];
+    return (_c = (_b = (_a = annotation.interactions) === null || _a === void 0 ? void 0 : _a.dynamicFilters) === null || _b === void 0 ? void 0 : _b.flatMap((filter) => {
+        if (filter.type === "categorical" && "values" in filter) {
+            return filter.values.map((v) => `${filter.column}:${v.value}`);
+        }
+        if (filter.type === "interval" && "selectedValues" in filter) {
+            return filter.selectedValues.map((interval) => formatIntervalKey(filter.column, interval.start, interval.end));
+        }
+        return [];
+    })) !== null && _c !== void 0 ? _c : [];
 };
 const getAnnotationDeeplink = (annotation) => {
     for (const item of annotation.data.items) {
@@ -1493,55 +1643,6 @@ const renderAnnotatedContent = (content, annotations, onAnnotationClick, applied
 };
 const renderInfoText = (content, key) => (h("div", { class: "suggestion-info-text", part: "suggestion-info-text", key: key, innerHTML: g.parse(content) }));
 
-const toggleFilterInSet = (appliedFilters, suggestionText) => {
-    const newAppliedFilters = new Set(appliedFilters);
-    if (newAppliedFilters.has(suggestionText)) {
-        newAppliedFilters.delete(suggestionText);
-    }
-    else {
-        newAppliedFilters.add(suggestionText);
-    }
-    return newAppliedFilters;
-};
-const extractActiveFilterValues = (activeFilters) => {
-    const activeValues = new Set();
-    activeFilters.forEach((filter) => {
-        if (Array.isArray(filter.values)) {
-            filter.values.forEach((v) => activeValues.add(`${filter.column}:${String(v)}`));
-        }
-    });
-    return activeValues;
-};
-const syncSuggestionFilters = (activeFilters, stream) => {
-    var _a, _b, _c;
-    const activeValues = extractActiveFilterValues(activeFilters);
-    const updatedAppliedFilters = new Set();
-    if (!(stream === null || stream === void 0 ? void 0 : stream.items))
-        return updatedAppliedFilters;
-    for (const item of stream.items) {
-        if (item.role !== "assistant" || !item.parts)
-            continue;
-        for (const part of item.parts) {
-            if (!((_a = part.text) === null || _a === void 0 ? void 0 : _a.annotations))
-                continue;
-            for (const annotation of part.text.annotations) {
-                if (!((_c = (_b = annotation.interactions) === null || _b === void 0 ? void 0 : _b.dynamicFilters) === null || _c === void 0 ? void 0 : _c.length))
-                    continue;
-                for (const filter of annotation.interactions.dynamicFilters) {
-                    if (filter.type !== "categorical" || !("values" in filter))
-                        continue;
-                    filter.values.forEach((value) => {
-                        if (activeValues.has(`${filter.column}:${String(value.value)}`)) {
-                            updatedAppliedFilters.add(`${filter.column}:${value.value}`);
-                        }
-                    });
-                }
-            }
-        }
-    }
-    return updatedAppliedFilters;
-};
-
 const vviinnSuggestionsCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-display:32px;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-display:40px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-width:155px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#707070;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}:host{display:contents}.container{display:flex;flex-direction:column;gap:var(--spacing-150);font-family:var(--font-family, var(--font-family-base));padding-right:var(--spacing-100);line-height:normal}.header{display:flex;align-items:center;gap:var(--spacing-100)}.icon{font-size:20px}.title{margin:0;font-size:var(--font-size-headline);line-height:var(--line-height-headline);font-weight:600;color:var(--color-text-primary)}.suggestions-wrapper{display:flex;flex-direction:column;gap:var(--spacing-100);width:100%}.suggestions-list{list-style:none;margin:0;padding:0;padding-right:var(--spacing-100);display:flex;align-items:center;gap:var(--spacing-100);flex-wrap:wrap;font-size:var(--font-size-label)}.suggestion-item{display:contents}.suggestion-link{background:none;border:none;color:var(--color-primary-500);text-decoration:underline;cursor:pointer;font-size:inherit;line-height:inherit;padding:0;margin:0}.suggestion-link:hover{color:var(--color-primary-600)}.suggestion-link:focus{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:2px}.suggestion-filter-button{background:none;border:none;cursor:pointer;display:flex;align-items:center;height:36px;padding:var(--spacing-75);gap:var(--spacing-50);white-space:nowrap;border-radius:var(--border-radius-100);background-color:var(--surface-bg-color-01);transition:background-color 0.1s;font-family:var(--font-family, var(--font-family-base));font-size:var(--font-size-label);color:var(--color-text-primary)}.suggestion-filter-button:hover{background-color:var(--surface-bg-color-01-hover)}.suggestion-filter-button.active{background:var(--surface-bg-color-inverse);color:var(--color-text-inverse)}.suggestion-info-text{font-size:var(--font-size-label);color:var(--color-text-primary)}.suggestion-info-text *{font-size:var(--font-size-label);margin:0}";
 
 const VviinnSuggestions = class {
@@ -1692,7 +1793,7 @@ const VviinnTeaser = class {
         slotChangeListener(this, this.el);
     }
     render() {
-        return (h(Host, { key: '8a000f0c33266514f8665f595f5de4e3be66a92a' }, h("slot", { key: '5d6f646a3efc56a7a8f69b299e550685763f3d58' }, h("span", { key: 'b044024aab57627bd5a7236c6cb8f170b6a18d9c', class: "vviinn-teaser-text" }, h("slot", { key: '41dbdef5be7ce19a88c34521b94332de7a2c0b21', name: "vviinn-teaser-text" }, instance.t("teaserText"))))));
+        return (h(Host, { key: 'fe777d0460b338bc11c372b2ae6d1c75120484cd' }, h("slot", { key: '85b8c8777d91d0fe48e955a601bf5742e50a3f12' }, h("span", { key: '2f4033a65dac4820a1236e52a470cc0523a31745', class: "vviinn-teaser-text" }, h("slot", { key: '75f5fbc11611d5b12d996dbf9267cc47c59f0269', name: "vviinn-teaser-text" }, instance.t("teaserText"))))));
     }
     get el() { return getElement(this); }
 };
@@ -1705,7 +1806,7 @@ const videoStreamSettings = {
     frameRate: { ideal: 30 },
 };
 
-const vviinnVpsWidgetCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-display:32px;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-display:40px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-width:155px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#707070;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.hidden{visibility:hidden;height:1px}vviinn-overlayed-modal.first-screen::part(results-title),vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:hidden}.start-page{display:grid;grid-template-columns:repeat(2, 1fr);height:640px}#start-page_block{width:100%;padding:40px 62px;box-sizing:border-box;display:flex;overflow-y:auto;flex-direction:column;justify-content:center}#start-page_block.error{align-content:center}#start-page_block vviinn-text-search{margin-top:var(--spacing-150)}.start-page_main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.start-page_errors-block{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-150)}.buttons-group{display:flex;flex-direction:column;gap:var(--spacing-150);margin-top:var(--spacing-300)}.action-button{display:grid;border:none;cursor:pointer;align-items:center;border-radius:var(--border-radius-100);font-weight:var(--font-weight-500);font-size:16px;height:48px;justify-items:center;font-family:var(--font-family, var(--font-family-base));transition:background 0.1s ease-in-out;color:var(--color-text-primary);background-color:#f4f4f4}.action-button:hover{background-color:#eaeaea}.action-button:first-child{background:var(--color-primary, var(--button-bg-color-primary));border-color:var(--color-primary, var(--button-bg-color-primary));color:white}.action-button:first-child:hover{background:var(--color-primary-hover, var(--button-bg-color-primary-hover));border-color:var(\n    --color-primary-hover,\n    var(--button-bg-color-primary-hover)\n  )}.action-button:active{border-color:black}.action-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;font-family:var(--font-family, var(--font-family-base));grid-template-columns:max-content auto;grid-gap:8px}.action-button .hidden{display:none}.results-page{padding-top:64px;display:grid;grid-template-columns:336px auto;height:640px;box-sizing:border-box}.results-page>*{box-sizing:border-box}.source-wrapper{display:grid;position:relative;grid-auto-rows:min-content;padding:0 12px 12px 24px;width:100%;max-width:100%;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;gap:var(--spacing-300);padding:0 16px 12px 24px;scrollbar-width:thin}.filters-wrapper{transform:translateX(-24px);min-width:calc(100% + 24px)}@supports (scrollbar-color: unset){.source-wrapper{scrollbar-color:transparent transparent}.source-wrapper:hover{scrollbar-color:initial}}vviinn-filters,vviinn-extended-filters[mode=\"modal\"]{display:none}vviinn-extended-filters[mode=\"preview\"]{display:block;width:100%}vviinn-extended-filters[mode=\"preview\"]::part(extended-filters-row){padding-right:0}.extended-filters-button{display:none}search-filters span{display:none}.results-page:not(.active){display:none}vviinn-preloader{--preloader-size:24px;display:flex}@media (max-width: 1080px){#start-page_block{padding:24px 36px}}@media (max-width: 768px){.start-page{display:flex;flex-direction:column;height:100%}vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:visible}.source-wrapper vviinn-text-search{width:calc(100% - 48px);transform:translateX(24px)}.start-page.active{height:calc(100vh - 64px);height:calc(100svh - 64px)}.start-page:not(.active){overflow:hidden;height:0}.results-page{height:auto;padding-top:0}.results-page>*{box-sizing:border-box;padding:var(--spacing-150) var(--spacing-300) var(--spacing-300)}.source-wrapper{scrollbar-gutter:initial;grid-template-rows:min-content auto;width:100%;padding:0}.filters-wrapper{min-width:100%;min-height:40px;padding-left:var(--spacing-300)}vviinn-filters{padding:0 var(--spacing-300)}vviinn-filters,vviinn-extended-filters[mode=\"modal\"]{display:block;overflow:hidden}vviinn-extended-filters[mode=\"preview\"]{display:none}vviinn-suggestions::part(suggestions-container){padding:0 var(--spacing-300)}vviinn-suggestions::part(suggestions-wrapper){width:calc(100% + 48px);transform:translateX(-24px)}vviinn-filters::part(filters-footer){min-width:calc(100% + 48px);transform:translateX(-24px)}vviinn-filters::part(filters-footer-list){padding:0 var(--spacing-300)}vviinn-suggestions::part(suggestion-info-text){padding:0 var(--spacing-300)}vviinn-suggestions::part(suggestions-list){padding:0 var(--spacing-300)}.extended-filters-button{display:block;position:absolute;left:48px;top:0}.extended-filters-button.has-primary-filters{left:unset;right:var(--spacing-300)}.results-page{grid-template-rows:min-content;grid-template-columns:unset}#start-page_block{overflow-y:unset;min-height:-moz-fit-content;min-height:fit-content;padding:24px 20px 20px}vviinn-text-search::part(suggestions-container){top:auto;bottom:100%;margin:0 0 var(--spacing-50)}}@media (max-width: 480px){.start-page{padding-top:0}.action-button-content{grid-gap:10px}}";
+const vviinnVpsWidgetCss = ":host{--font-family-base:Inter, system-ui, sans-serif;--font-family-mono:monospace;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-size-display:32px;--font-size-title:24px;--font-size-headline:18px;--font-size-label-large:16px;--font-size-label:14px;--font-size-body-large:16px;--font-size-body:14px;--font-size-caption:12px;--line-height-display:40px;--line-height-title:32px;--line-height-headline:24px;--line-height-label-large:24px;--line-height-label:20px;--line-height-body-large:24px;--line-height-body:20px;--line-height-caption:16px;--letter-spacing-title:0px;--letter-spacing-headline:0px;--letter-spacing-label-large:0px;--letter-spacing-label:0px;--letter-spacing-body-large:0px;--letter-spacing-body:0px;--letter-spacing-caption:0px;--font-weight-400:400;--font-weight-500:500;--font-weight-600:600;--font-weight-700:700;--spacing-none:0px;--spacing-25:2px;--spacing-50:4px;--spacing-75:6px;--spacing-100:8px;--spacing-125:10px;--spacing-150:12px;--spacing-200:16px;--spacing-250:20px;--spacing-300:24px;--spacing-400:32px;--spacing-500:40px;--spacing-600:48px;--border-radius-none:0px;--border-radius-25:2px;--border-radius-50:4px;--border-radius-100:8px;--border-radius-150:12px;--border-radius-200:16px;--border-radius-300:24px;--border-radius-400:32px;--border-radius-full:9999px;--stroke-width-none:0px;--stroke-width-25:1px;--stroke-width-50:2px;--stroke-width-75:3px;--stroke-width-100:4px;--stroke-width-150:6px;--stroke-width-200:8px;--stroke-width-300:12px;--product-card-widget-min-width:135px;--product-card-results-min-width:250px;--image-set-mode-min-width:155px;--source-card-set-mode-max-width:500px;--filter-blur-none:0px;--filter-blur-100:8px;--filter-blur-150:12px;--filter-blur-200:16px;--color-bg-base:#ffffff;--color-bg-inverse:#161616;--color-border-00:#ffffff;--color-border-01:#f4f4f4;--color-border-02:#e0e0e0;--color-border-03:#c6c6c6;--color-border-inverse-00:#161616;--color-border-inverse-01:#393939;--color-field-01:#ffffff;--color-field-02:#f4f4f4;--color-icon-primary:#161616;--color-icon-secondary:#525252;--color-icon-helper:#8d8d8d;--color-icon-on-color:#ffffff;--color-icon-inverse:#ffffff;--color-icon-disabled:#16161640;--color-text-primary:#161616;--color-text-secondary:#707070;--color-text-helper:#8d8d8d;--color-text-placeholder:#a8a8a8;--color-text-on-color:#ffffff;--color-text-inverse:#ffffff;--color-text-disabled:#16161640;--button-bg-color-primary:#000000;--button-bg-color-primary-hover:#161616;--button-bg-color-primary-active:#1e1e1e;--button-bg-color-secondary:#f4f4f4;--button-bg-color-secondary-hover:#e0e0e0;--button-bg-color-secondary-active:#c6c6c6;--button-bg-color-ghost-hover:#f4f4f4;--button-bg-color-ghost-active:#eaeaea;--button-bg-color-frosted:#6f6f6f66;--button-bg-color-frosted-hover:#6f6f6f80;--button-bg-color-frosted-active:#6f6f6f99;--button-bg-color-disabled:#e0e0e0;--button-bg-color-positive:#dcfce7;--surface-bg-color-01:#f4f4f4;--surface-bg-color-01-hover:#eaeaea;--surface-bg-color-01-active:#e0e0e0;--surface-bg-color-02:#ffffff;--surface-bg-color-inverse:#262626;--surface-bg-color-inverse-hover:#303030;--surface-bg-color-inverse-active:#393939;--surface-bg-color-disabled:#e0e0e0;--surface-bg-color-shadow-01:#dddddd;--surface-bg-color-shadow-02:#c6c6c6;--chip-bg-color-primary:#161616;--chip-bg-color-primary-hover:#1e1e1e;--chip-bg-color-primary-active:#262626;--chip-bg-color-subtle:#f4f4f4;--chip-bg-color-subtle-hover:#eaeaea;--chip-bg-color-subtle-active:#e0e0e0;--chip-bg-color-outline-hover:#f4f4f4;--chip-bg-color-outline-active:#eaeaea;--label-bg-color-accent:#ff3944;--sidebar-animation-duration-default:0.5s;--search-modal-animation-duration-default:0.25s;--search-modal-animation-duration-mobile-default:0.35s;}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block}.hidden{visibility:hidden;height:1px}vviinn-overlayed-modal.first-screen::part(results-title),vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:hidden}.start-page{display:grid;grid-template-columns:repeat(2, 1fr);height:640px}#start-page_block{width:100%;padding:40px 62px;box-sizing:border-box;display:flex;overflow-y:auto;flex-direction:column;justify-content:center}#start-page_block.error{align-content:center}#start-page_block vviinn-text-search{margin-top:var(--spacing-150)}.start-page_main-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.start-page_errors-block{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-150)}.buttons-group{display:flex;flex-direction:column;gap:var(--spacing-150);margin-top:var(--spacing-300)}.action-button{display:grid;border:none;cursor:pointer;align-items:center;border-radius:var(--border-radius-100);font-weight:var(--font-weight-500);font-size:16px;height:48px;justify-items:center;font-family:var(--font-family, var(--font-family-base));transition:background 0.15s ease-in-out;color:var(--color-text-primary);background-color:#f4f4f4}.action-button:hover{background-color:#eaeaea}.action-button:first-child{background:var(--color-primary, var(--button-bg-color-primary));border-color:var(--color-primary, var(--button-bg-color-primary));color:white}.action-button:first-child:hover{background:var(--color-primary-hover, var(--button-bg-color-primary-hover));border-color:var(\n    --color-primary-hover,\n    var(--button-bg-color-primary-hover)\n  )}.action-button:active{border-color:black}.action-button-content{display:grid;align-items:center;justify-items:start;justify-content:center;font-family:var(--font-family, var(--font-family-base));grid-template-columns:max-content auto;grid-gap:8px}.action-button .hidden{display:none}.upload-drop-zone{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-150);padding:var(--spacing-200);box-sizing:border-box;cursor:pointer;background:var(--button-bg-color-secondary);border:1px dashed var(--color-border-02);border-radius:var(--border-radius-50);font-family:var(--font-family, var(--font-family-base));transition:border-color 0.1s ease-in-out,\n    background 0.1s ease-in-out}.upload-drop-zone.drag-over{border-color:var(--color-primary, var(--button-bg-color-primary));background:color-mix(\n    in srgb,\n    var(--color-primary, var(--button-bg-color-primary)) 8%,\n    transparent\n  )}.upload-drop-zone [slot=\"drop-zone-icon\"] svg{display:block;width:32px;height:32px;color:var(--color-text-secondary)}.results-page{padding-top:64px;display:grid;grid-template-columns:336px auto;height:640px;box-sizing:border-box}.results-page>*{box-sizing:border-box}.source-wrapper{display:grid;position:relative;grid-auto-rows:min-content;padding:0 12px 12px 24px;width:100%;max-width:100%;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;gap:var(--spacing-300);padding:0 16px 12px 24px;scrollbar-width:thin}.filters-wrapper{transform:translateX(-24px);min-width:calc(100% + 24px)}@supports (scrollbar-color: unset){.source-wrapper{scrollbar-color:transparent transparent}.source-wrapper:hover{scrollbar-color:initial}}vviinn-filters,vviinn-extended-filters[mode=\"modal\"]{display:none}vviinn-extended-filters[mode=\"preview\"]{display:block;width:100%}vviinn-extended-filters[mode=\"preview\"]::part(extended-filters-row){padding-right:0}.extended-filters-button{display:none}search-filters span{display:none}.results-page:not(.active){display:none}vviinn-preloader{--preloader-size:24px;display:flex}@media (max-width: 1080px){#start-page_block{padding:24px 36px}}@media (max-width: 768px){.start-page{display:flex;flex-direction:column;height:100%}vviinn-overlayed-modal.first-screen::part(secondary-action){visibility:visible}.source-wrapper vviinn-text-search{width:calc(100% - 48px);transform:translateX(24px)}.start-page.active{height:calc(100vh - 64px);height:calc(100svh - 64px)}.start-page:not(.active){overflow:hidden;height:0}.results-page{height:auto;padding-top:0}.results-page>*{box-sizing:border-box;padding:var(--spacing-150) var(--spacing-300) var(--spacing-300)}.source-wrapper{scrollbar-gutter:initial;grid-template-rows:min-content auto;width:100%;padding:0}.filters-wrapper{min-width:100%;min-height:40px;padding-left:var(--spacing-300)}vviinn-filters{padding:0 var(--spacing-300)}vviinn-filters,vviinn-extended-filters[mode=\"modal\"]{display:block;overflow:hidden}vviinn-extended-filters[mode=\"preview\"]{display:none}vviinn-suggestions::part(suggestions-container){padding:0 var(--spacing-300)}vviinn-suggestions::part(suggestions-wrapper){width:calc(100% + 48px);transform:translateX(-24px)}vviinn-filters::part(filters-footer){min-width:calc(100% + 48px);transform:translateX(-24px)}vviinn-filters::part(filters-footer-list){padding:0 var(--spacing-300)}vviinn-suggestions::part(suggestion-info-text){padding:0 var(--spacing-300)}vviinn-suggestions::part(suggestions-list){padding:0 var(--spacing-300)}.extended-filters-button{display:block;position:absolute;left:48px;top:0}.extended-filters-button.has-primary-filters{left:unset;right:var(--spacing-300)}.results-page{grid-template-rows:min-content;grid-template-columns:unset}#start-page_block{overflow-y:unset;min-height:-moz-fit-content;min-height:fit-content;padding:24px 20px 20px}vviinn-text-search::part(suggestions-container){top:auto;bottom:100%;margin:0 0 var(--spacing-50)}}@media (max-width: 480px){.start-page{padding-top:0}.action-button-content{grid-gap:10px}}";
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -1751,6 +1852,8 @@ const VviinnVpsWidget = class {
         this.imageResolutionWidth = SEARCH_WIDGET_IMAGE_RESOLUTION_WIDTH;
         /** Show multiple images: swiper on mobile, hover on desktop in product cards */
         this.showMultipleImages = false;
+        /** Accept image files dropped from the OS onto the upload button (desktop only) */
+        this.useDragAndDrop = false;
         /** Example image source */
         this.exampleImageSource = DEFAULT_EXAMPLE_IMAGE;
         /** Show the text search */
@@ -2105,9 +2208,10 @@ const VviinnVpsWidget = class {
             this.state.searchType === "image" &&
             this.uploadSource === "startCamera") ||
             this.isCameraInitializing;
+        const isDropZone = this.useDragAndDrop && this.isDesktop;
         const buttons = [
             this.cameraAvailable && (h("button", { class: "action-button", part: "start-camera_button", onClick: this.handleStartCameraClick, onKeyDown: (e) => this.handleButtonKeyDown(e, this.handleStartCameraClick) }, isLoading && h("vviinn-preloader", null), h("span", { class: { "action-button-content": true, hidden: isLoading } }, h("slot", { name: "vviinn-camera-icon" }, h(CameraActionIcon, null)), h("span", { class: { hidden: !this.isCameraEnabled } }, h("slot", { name: "vviinn-camera-button-text-stop" }, instance.t("cameraButtonTextStop"))), h("span", { class: { hidden: this.isCameraEnabled } }, h("slot", { name: "vviinn-camera-button-text-start" }, instance.t("cameraButtonTextStart")))))),
-            h("vviinn-image-selector", { class: "action-button", onClick: () => {
+            h("vviinn-image-selector", { class: isDropZone ? "upload-drop-zone" : "action-button", onClick: () => {
                     if (this.mode !== "upload")
                         this.uploadSource = "uploadPhoto";
                 }, onKeyDown: (e) => this.handleButtonKeyDown(e, () => {
@@ -2116,11 +2220,11 @@ const VviinnVpsWidget = class {
                 }), onVviinnImageUploadFinished: ({ detail }) => this.handleVviinnImageUploadFinished(detail), onVviinnImageUploadStarted: () => {
                     this.uploadDialogOpened = true;
                     this.handleVviinnImageUpload("uploadPhoto");
-                }, token: this.token, apiPath: this.apiPath, storeName: this.storeName, state: this.state, onVviinnNoResult: ({ detail }) => this.handleVviinnNoResult(detail), resetVpsButton: this.resetVpsButton, basicEventData: this.getBasicEventData(), part: "upload-photo_button", startUpload: this.buttonPressed &&
+                }, token: this.token, apiPath: this.apiPath, useDragAndDrop: isDropZone, storeName: this.storeName, state: this.state, onVviinnNoResult: ({ detail }) => this.handleVviinnNoResult(detail), resetVpsButton: this.resetVpsButton, basicEventData: this.getBasicEventData(), part: isDropZone ? "drop-zone" : "upload-photo_button", startUpload: this.buttonPressed &&
                     this.mode === "upload" &&
                     !this.uploadDialogOpened, showInWidget: this.showInWidget, loading: this.state.searchStatus === "loading" &&
                     this.state.searchType === "image" &&
-                    this.uploadSource === "uploadPhoto" }, h("span", { slot: "upload-button-text", class: "action-button-content" }, h("slot", { name: "vviinn-image-upload-icon" }, h(UploadActionIcon, null)), h("slot", { name: "vviinn-image-upload-button-text" }, h("span", null, instance.t("imageUploadButtonText"))))),
+                    this.uploadSource === "uploadPhoto" }, h("span", { slot: "drop-zone-icon" }, h("slot", { name: "vviinn-drag-drop-icon" }, h(DragDropImageIcon, null))), h("span", { slot: "drop-zone-text" }, h("slot", { name: "vviinn-drag-drop-text" }, instance.t("dragDropHintText"))), h("span", { slot: "upload-button-text", class: "action-button-content" }, !isDropZone && (h("slot", { name: "vviinn-image-upload-icon" }, h(UploadActionIcon, null))), h("slot", { name: "vviinn-image-upload-button-text" }, h("span", null, instance.t("imageUploadButtonText"))))),
         ];
         return this.isDesktop ? buttons.reverse() : buttons;
     }
@@ -2146,31 +2250,31 @@ const VviinnVpsWidget = class {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '0ffc3a002f79fd6481c59a582561d00f5643c33a', exportparts: `${modalParts}, ${productCardParts}, ${searchBarParts}, ${searchWidgetFilterParts}, ${searchWidgetButtonParts}, ${productCardsGridPart}, ${suggestionsParts}` }, renderExternalCSS(this.cssUrl), !this.showingInButton && SlotSkeleton("search"), h("vviinn-overlayed-modal", { key: 'af3589b5adc791a3d04c7fce56e6b9177af508da', class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState, onVviinnWidgetClose: ({ detail }) => {
+        return (h(Host, { key: '3d819edc5b1a3ce7fc05d343f80775a425077d26', exportparts: `${modalParts}, ${productCardParts}, ${searchBarParts}, ${searchWidgetFilterParts}, ${searchWidgetButtonParts}, ${productCardsGridPart}, ${suggestionsParts}` }, renderExternalCSS(this.cssUrl), !this.showingInButton && SlotSkeleton("search"), h("vviinn-overlayed-modal", { key: '48a8934f201007aacb83a1436ceee773bc4e64c1', class: { "first-screen": this.isOnboardingSlide() }, isFirstScreen: this.isOnboardingSlide(), active: this.active, resetState: this.resetState, onVviinnWidgetClose: ({ detail }) => {
                 if (detail.campaignTypeId !== "VPR")
                     this.handleModalClose();
             }, buttonElementId: (_a = this.buttonElementId) !== null && _a !== void 0 ? _a : this.widgetElementId, widgetVersion: version, hideBackButton: this.mode === "upload" ||
-                (!this.isCameraEnabled && this.isOnboardingSlide()) }, h("vviinn-slider", { key: '1b98b36bde65dedc539bd49468db86a7317a74d4', position: this.slidePosition }, h("vviinn-slide", { key: 'd1b48094f57f9f34a808ee79f78875793cbde05f', class: {
+                (!this.isCameraEnabled && this.isOnboardingSlide()) }, h("vviinn-slider", { key: '2e010cd695fe00d065766973467d1eb59771a803', position: this.slidePosition }, h("vviinn-slide", { key: '71b5c21bbc37d62500ae28f5070d4ab98ab08663', class: {
                 "start-page": true,
                 "camera-enabled": this.isCameraEnabled,
-            } }, h("vviinn-camera", { key: 'a8b4695f255d22f80a0980fa6f7e6ef62b9f6e33', token: this.token, onVviinnImageUploadFinished: ({ detail }) => this.handleVviinnImageUploadFinished(detail), onVviinnImageUploadStarted: () => {
+            } }, h("vviinn-camera", { key: 'f26d9576c072b36cfbe7594deae56388dec592bb', token: this.token, onVviinnImageUploadFinished: ({ detail }) => this.handleVviinnImageUploadFinished(detail), onVviinnImageUploadStarted: () => {
                 this.handleVviinnImageUpload("startCamera");
-            }, apiPath: this.apiPath, basicEventData: this.getBasicEventData(), srcObject: this.stream, cameraButtonClicked: this.isCameraButtonClicked, exampleImageSource: this.exampleImageSource, showInWidget: this.showInWidget, storeName: this.storeName, state: this.state }), h("div", { key: 'b38d1c05099d04c7a8c22587e7c02bd93fce532d', class: {
+            }, apiPath: this.apiPath, basicEventData: this.getBasicEventData(), srcObject: this.stream, cameraButtonClicked: this.isCameraButtonClicked, exampleImageSource: this.exampleImageSource, showInWidget: this.showInWidget, storeName: this.storeName, state: this.state }), h("div", { key: '475765308993fd599a6064fde186793059eb9069', class: {
                 error: this.haveErrors(),
-            }, id: "start-page_block" }, h("div", { key: 'c989f1cb41cced69828e4f24ea925922b92218ec', class: "start-page_main-content" }, (this.wrongImageFormat ||
-            this.state.searchStatus === "error") && (h("div", { key: 'ed3feb471a4bbd2989800c9ab698ee8c9c3f8845', class: "start-page_errors-block" }, this.getCurrentErrorType() && (h("vviinn-error", { key: 'f859d178f1804136273faef22e5188fd51d07d4c', errorType: this.getCurrentErrorType(), handler: this.resetState, hasBackground: true, searchType: this.state.searchType })))), !this.haveErrors() && (h(Fragment, { key: 'b137960307e69c1884da1258a4ccb7456da4be43' }, h("vviinn-teaser", { key: '9f13392722c88be790b4a2ceed67197a25c7ccdc' }), h("div", { key: '94640ebeec975c56bac6bf90197cd95f1cb99f95', class: "buttons-group" }, this.renderButtons()), this.textSearchShow && !this.isResultSlide() && (h("vviinn-text-search", { key: '3c556fa2769f9ae91d7647e834aae3033c1131e9', token: this.token, apiPath: this.apiPath, locale: this.locale, showInWidget: this.showInWidget, showOnFirstScreen: true, uiSessionId: this.uiSessionId, basicEventData: this.getBasicEventData(true), resultsPageUrl: this.resultsPageUrl, autoSuggestShow: this.autoSuggestShow, "save-image-mode": "never" }))))), h("vviinn-privacy-badge", { key: 'a4021fb73a348f19e2401852d36e16b50f93506a', privacyBadgeText: instance.t("privacyBadgeText", {
+            }, id: "start-page_block" }, h("div", { key: '1c3e3a20caa40a360e7133a300f36a138e09cb4e', class: "start-page_main-content" }, (this.wrongImageFormat ||
+            this.state.searchStatus === "error") && (h("div", { key: 'aed26307e98322b8355dc58f19f51079eb8f5939', class: "start-page_errors-block" }, this.getCurrentErrorType() && (h("vviinn-error", { key: 'af8b068c7ab554f66565e445a2562e5de1b1e70b', errorType: this.getCurrentErrorType(), handler: this.resetState, hasBackground: true, searchType: this.state.searchType })))), !this.haveErrors() && (h(Fragment, { key: 'ff464606d3447e0feab7690c4aaffa1389adea38' }, h("vviinn-teaser", { key: '91043f95623cae0f7f39902612ea8e4056361c44' }), h("div", { key: '83bf07377aabb98372a5688b51b8fd92328c9ba2', class: "buttons-group" }, this.renderButtons()), this.textSearchShow && !this.isResultSlide() && (h("vviinn-text-search", { key: 'e0a766d21276ecca7d075ff9fef2aa7ba0ebfc93', token: this.token, apiPath: this.apiPath, locale: this.locale, showInWidget: this.showInWidget, showOnFirstScreen: true, uiSessionId: this.uiSessionId, basicEventData: this.getBasicEventData(true), resultsPageUrl: this.resultsPageUrl, autoSuggestShow: this.autoSuggestShow, "save-image-mode": "never" }))))), h("vviinn-privacy-badge", { key: 'be525a2dc35924de5c73275939b61fc474fe0ce0', privacyBadgeText: instance.t("privacyBadgeText", {
                 interpolation: { escapeValue: false },
-            }), class: { invisible: this.haveErrors() } }))), h("vviinn-slide", { key: 'e9fabc9d45efd4f621454b076f9508c3b79ce690', class: {
+            }), class: { invisible: this.haveErrors() } }))), h("vviinn-slide", { key: '73565ad9d70d0fa39bc7031a3cc0af988e70eb64', class: {
                 "results-page": true,
                 active: this.isResultSlide(),
-            } }, this.isResultSlide() && (h("div", { key: '5240101a650b79c94b9c1e7a835f7061a328b41c', class: "source-wrapper" }, this.isTextSearch() && (h("vviinn-text-search", { key: '91c201e63dc2f01a4d00fe6f5a08e6627cfb7873', token: this.token, showInWidget: this.showInWidget, apiPath: this.apiPath, locale: this.locale, uiSessionId: this.uiSessionId, basicEventData: this.getBasicEventData(true), resultsPageUrl: this.resultsPageUrl, autoSuggestShow: this.autoSuggestShow, "save-image-mode": "never" })), !this.isTextSearch() && (h("vviinn-cropper", { key: 'ba7917b428a626458ab0956c028ac6d7fc3310f0', token: this.token, basicEventData: this.getBasicEventData(), showAspectRatioError: this.showAspectRatioError, apiPath: this.apiPath, showInWidget: this.showInWidget, "save-image-mode": "never" })), h("vviinn-suggestions", { key: '7954cbf976caf22a47d1b59cd242aad2546e4da5', showInWidget: this.showInWidget, token: this.token, apiPath: this.apiPath, locale: this.locale }), h("vviinn-selected-filters", { key: 'ac42d53feaeb3af7bc3e916e5a4cee9a9ba4b395', locale: this.locale, currencySign: this.currencySign, showInWidget: this.showInWidget, exportparts: filtersParts }), ((_b = this.state.dynamicFilters) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("div", { key: 'f8869d18215c0d35196217efdad6501234cbbf97', class: {
+            } }, this.isResultSlide() && (h("div", { key: '439495970eb510e757737be0b95b8e6431ec705a', class: "source-wrapper" }, this.isTextSearch() && (h("vviinn-text-search", { key: '8bc91e68349913cb9eda6e6166825f32d7afeb5f', token: this.token, showInWidget: this.showInWidget, apiPath: this.apiPath, locale: this.locale, uiSessionId: this.uiSessionId, basicEventData: this.getBasicEventData(true), resultsPageUrl: this.resultsPageUrl, autoSuggestShow: this.autoSuggestShow, "save-image-mode": "never" })), !this.isTextSearch() && (h("vviinn-cropper", { key: 'bdf8e645e389c39947ece8c0576adea23e40d80d', token: this.token, basicEventData: this.getBasicEventData(), showAspectRatioError: this.showAspectRatioError, apiPath: this.apiPath, showInWidget: this.showInWidget, "save-image-mode": "never" })), h("vviinn-suggestions", { key: '5088ac4c87e0351f39743484b717b2233d1cd6cc', showInWidget: this.showInWidget, token: this.token, apiPath: this.apiPath, locale: this.locale }), h("vviinn-selected-filters", { key: '64b97e027404482d52003d6fff076779d585f90e', locale: this.locale, currencySign: this.currencySign, showInWidget: this.showInWidget, exportparts: filtersParts }), ((_b = this.state.dynamicFilters) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h("div", { key: '08dc0f036a9e27a62e688389118664ec6d38f5fe', class: {
                 "filters-wrapper": true,
                 hidden: this.showAspectRatioError,
-            } }, h("vviinn-filters", { key: '87c6a34f3600b5c27bc0a9dc4e68239a5179593d', showInWidget: this.showInWidget, showIntervalInputs: this.showIntervalInputs }), h("vviinn-extended-filters", { key: '2185ccdc5005da02c03562b290693390a6ecf2ff', mode: "preview", showHeader: false, showInWidget: this.showInWidget, locale: this.locale, currencySign: this.currencySign, showIntervalInputs: this.showIntervalInputs }), h("vviinn-extended-filters-button", { key: '3b65d1435f512939444dcef95a4902c0f70a25f1', class: {
+            } }, h("vviinn-filters", { key: '0e0634bc3963b7f87e19fa5ef9814d1206368e5f', showInWidget: this.showInWidget, showIntervalInputs: this.showIntervalInputs }), h("vviinn-extended-filters", { key: 'a12da4af4e2922904bc3acbaae517c5268385b61', mode: "preview", showHeader: false, showInWidget: this.showInWidget, locale: this.locale, currencySign: this.currencySign, showIntervalInputs: this.showIntervalInputs }), h("vviinn-extended-filters-button", { key: '63ed9c068918f1915a84ab90af1a0d2e6eccd596', class: {
                 "extended-filters-button": true,
                 "has-primary-filters": this.state.dynamicFilters.filter((f) => f.isPrimary)
                     .length > 0,
-            }, showInWidget: this.showInWidget }))))), this.isResultSlide() && (h(Fragment, { key: '20234d1d8db73b4a0e7e3160ece10ec961623970' }, h("vviinn-results", { key: 'b66732f0a86a9e296e4fd6dbb1c75e4e4debe657', token: this.token, locale: this.locale, numberLocale: this.numberLocale, pricePrefix: this.pricePrefix, "currency-sign": this.currencySign, apiPath: this.apiPath, campaignIdTextSearch: this.campaignIdTextSearch, campaignIdVisualSearch: this.campaignIdVisualSearch, uiSessionId: this.uiSessionId, widgetElementId: (_c = this.buttonElementId) !== null && _c !== void 0 ? _c : this.widgetElementId, showInWidget: this.showInWidget, buttonElementId: this.buttonElementId, imageResolutionWidth: this.imageResolutionWidth, showMultipleImages: this.showMultipleImages, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, addToBasketShow: this.addToBasketShow, favoriteShow: this.favoriteShow, showAspectRatioError: this.showAspectRatioError, resetWidgetState: this.resetState, replaceSlotsContentInWidget: this.replaceSlotsContent.bind(this), replaceSlotsContentInButton: this.replaceSlotsContentInButton, addPriceContainer: this.addPriceContainer, oneClickDiscoveryMode: this.oneClickDiscoveryMode, oneClickDiscoveryCampaigns: this.oneClickDiscoveryCampaigns, parentSlots: [...this.parentSlots, ...this.slots], scrollableModalBody: this.modalBody }))))), h("vviinn-extended-filters", { key: 'b08b5f73b3462169236f63aa2499940aa0898115', class: "modal-extended-filters", mode: "modal", exportparts: extendedFiltersParts, showInWidget: this.showInWidget, locale: this.locale, currencySign: this.currencySign, showIntervalInputs: this.showIntervalInputs }))));
+            }, showInWidget: this.showInWidget }))))), this.isResultSlide() && (h(Fragment, { key: 'f82ea6c8e9009241f94f70ec9512ede273db9052' }, h("vviinn-results", { key: '422e0d0c3b7f93bab6f6581a7c352107774f6c87', token: this.token, locale: this.locale, numberLocale: this.numberLocale, pricePrefix: this.pricePrefix, "currency-sign": this.currencySign, apiPath: this.apiPath, campaignIdTextSearch: this.campaignIdTextSearch, campaignIdVisualSearch: this.campaignIdVisualSearch, uiSessionId: this.uiSessionId, widgetElementId: (_c = this.buttonElementId) !== null && _c !== void 0 ? _c : this.widgetElementId, showInWidget: this.showInWidget, buttonElementId: this.buttonElementId, imageResolutionWidth: this.imageResolutionWidth, showMultipleImages: this.showMultipleImages, productDetailsNewTab: this.productDetailsNewTab, productDetailsRedirect: this.productDetailsRedirect, addToBasketShow: this.addToBasketShow, favoriteShow: this.favoriteShow, showAspectRatioError: this.showAspectRatioError, resetWidgetState: this.resetState, replaceSlotsContentInWidget: this.replaceSlotsContent.bind(this), replaceSlotsContentInButton: this.replaceSlotsContentInButton, addPriceContainer: this.addPriceContainer, oneClickDiscoveryMode: this.oneClickDiscoveryMode, oneClickDiscoveryCampaigns: this.oneClickDiscoveryCampaigns, parentSlots: [...this.parentSlots, ...this.slots], scrollableModalBody: this.modalBody }))))), h("vviinn-extended-filters", { key: '203270237562c97f144ccce3ba364893a1ecafd5', class: "modal-extended-filters", mode: "modal", exportparts: extendedFiltersParts, showInWidget: this.showInWidget, locale: this.locale, currencySign: this.currencySign, showIntervalInputs: this.showIntervalInputs }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {