vviinn-widgets 2.215.3 → 2.216.1

package/dist/cjs/{index-D9aqF1Pk.js → index-DvleNAFh.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-D38ORu31.js');
-var search_store = require('./search.store-B_zxc87K.js');
+var search_store = require('./search.store-DlrP4N8h.js');
 var store = require('./store-jPZ4ROqV.js');
 
 const PlusIcon = () => (index.h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "plus-icon", "aria-hidden": "true" },
@@ -17,6 +17,7 @@ const CAROUSEL_CONTENT_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
 const CAROUSEL_IMAGE_WIDTH_CSS_VAR = "--vviinn-carousel-image-width";
 const SET_MODE_IMAGE_WIDTH_CSS_VAR = "--vviinn-set-mode-image-width";
 const RESULTS_CALCULATED_COLUMNS_CSS_VAR = "--vviinn-results-calculated-columns";
+const CAROUSEL_COLUMNS_CSS_VAR = "--vviinn-carousel-columns";
 const CONTENT_GROUP_CSS_CLASS = "items-group";
 const DEFAULT_COLUMNS_NUMBER = 4;
 const SCROLL_POSITION_TOLERANCE = 2;
@@ -369,6 +370,7 @@ const createImageSearchEvent = createTrackingEvent({
     typ: SEARCH_EVENT_TYPE,
 });
 
+exports.CAROUSEL_COLUMNS_CSS_VAR = CAROUSEL_COLUMNS_CSS_VAR;
 exports.CAROUSEL_CONTENT_WIDTH_CSS_VAR = CAROUSEL_CONTENT_WIDTH_CSS_VAR;
 exports.CAROUSEL_IMAGE_WIDTH_CSS_VAR = CAROUSEL_IMAGE_WIDTH_CSS_VAR;
 exports.CONTENT_GROUP_CSS_CLASS = CONTENT_GROUP_CSS_CLASS;

package/dist/cjs/{search.store-B_zxc87K.js → search.store-DlrP4N8h.js}

@@ -8593,7 +8593,7 @@ const encodeToBase64UTF8 = (str) => {
     return btoa(String.fromCharCode.apply(null, utf8Array));
 };
 
-const version = "2.215.3";
+const version = "2.216.1";
 
 const appStateGlobalDefaults = {
     excluded: null,
@@ -8727,6 +8727,15 @@ const uploadImageFile = (store, token, imageType = "image", searchId, apiPath, c
         inner: error,
     })), Rectangle.chain$1((body) => processVisualSearch(store, body, token, apiPath, isHiResUpdate)))));
 };
+const makeVisualSearchByUrlRequest = async (store, imageUrl, token, apiPath, campaignId) => {
+    const state = useStore(store);
+    const body = Object.assign(Object.assign({ query: {
+            url: imageUrl,
+        }, objectDetection: {
+            include: true,
+        } }, addNestedIfNotEmpty("staticFilters", Object.assign({}, addIfNotEmpty("excluded", state.excluded)))), addIfNotEmpty("campaign", campaignId || state.campaignIdVisualSearch || state.campaignId));
+    return processVisualSearch(store, body, token, apiPath)();
+};
 const makeUploadFileRequest = (store, token, apiPath, campaignId) => async (file) => {
     var _a;
     const state = useStore(store);
@@ -8894,6 +8903,7 @@ exports.makeAutoSuggestRequest = makeAutoSuggestRequest;
 exports.makeProductListingPageRequest = makeProductListingPageRequest;
 exports.makeTextSearchRequest = makeTextSearchRequest;
 exports.makeUploadFileRequest = makeUploadFileRequest;
+exports.makeVisualSearchByUrlRequest = makeVisualSearchByUrlRequest;
 exports.makeVisualSearchRequest = makeVisualSearchRequest;
 exports.parseStringToExcluded = parseStringToExcluded;
 exports.resetStore = resetStore;

package/dist/cjs/vviinn-button_6.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-D38ORu31.js');
 var store = require('./store-jPZ4ROqV.js');
-var search_store = require('./search.store-B_zxc87K.js');
+var search_store = require('./search.store-DlrP4N8h.js');
 var index$1 = require('./index-CBteD3gC.js');
 var SecondaryActionIcon = require('./SecondaryActionIcon-Ng84u7-b.js');
 var index$2 = require('./index-CvMi8_tX.js');
@@ -223,7 +223,7 @@ const VviinnOverlay = class {
 };
 VviinnOverlay.style = vviinnOverlayCss;
 
-const recommendationsSidebarCss = ":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{--vviinn-carousel-columns:4;display:flex;box-sizing:border-box;position:fixed;z-index:9999;height:100vh;left:0;top:0;transition:background 0.1s ease-in-out;width:100vw}:host(.bottom){flex-direction:column;justify-content:flex-end}:host(.no-fixed){position:unset;display:block;width:100%;height:auto}:host(.no-fixed.no-carousel.appended.loading){min-height:calc((var(--product-card-calculated-height) * 3) + 48px)}:host(.right){flex-direction:row;justify-content:flex-end}:host [slot]{visibility:hidden;position:absolute}.sidebar-header{position:relative;text-align:center;padding:var(--spacing-300);padding-top:0px}.sidebar-header.contains-source-img{display:grid;justify-items:center;grid-gap:12px}img.source-image{width:64px;height:64px;border-radius:50%;padding:6px;border:1px solid var(--color-border-02);-o-object-fit:contain;object-fit:contain}:host(.right) .sidebar-header{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.1)}.sidebar-content{padding:0 var(--spacing-300)}:host(.right) .sidebar-content{overflow:auto}.sidebar{background:white;box-sizing:border-box;padding-top:var(--spacing-300);display:flex;flex-direction:column;max-height:100vh;overflow-y:auto}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.no-fixed) .sidebar{transform:unset !important}:host(.bottom.closed) .sidebar{animation-name:slideOutFromBottom;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.open){transition:background 0.3s ease-in-out;background:rgba(0, 0, 0, 0.2)}:host(.bottom.open) .sidebar{animation-name:slideInFromBottom;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{animation-name:slideOutFromRight;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.right.open) .sidebar{animation-name:slideInFromRight;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.right) .sidebar{max-width:480px}:host(.right) vviinn-vpr-widget::part(recommendations-results){display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:var(--spacing-300)}:host(.right) vviinn-vpr-widget{overflow:auto}.title{font-style:normal;font-weight:var(--font-weight-600);font-size:var(--font-size-title);font-family:var(--font-family, var(--font-family-base));line-height:40px;text-align:center;color:#000000}.subtitle{font-size:var(--font-size-body);font-family:var(--font-family, var(--font-family-base));text-align:center}.close-sidebar{position:absolute;background:transparent;border:none;cursor:pointer;margin:0;top:0;color:var(--color-icon-secondary);transition:color 0.1s ease-in-out;padding:var(--spacing-100);right:var(--spacing-200)}.close-sidebar:hover{color:var(--color-icon-primary)}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@media (max-width: 768px){:host{--vviinn-carousel-columns:2}}";
+const recommendationsSidebarCss = ":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:flex;box-sizing:border-box;position:fixed;z-index:9999;height:100vh;left:0;top:0;transition:background 0.1s ease-in-out;width:100vw}:host(.bottom){flex-direction:column;justify-content:flex-end}:host(.no-fixed){position:unset;display:block;width:100%;height:auto}:host(.no-fixed.no-carousel.appended.loading){min-height:calc((var(--product-card-calculated-height) * 3) + 48px)}:host(.right){flex-direction:row;justify-content:flex-end}:host [slot]{visibility:hidden;position:absolute}.sidebar-header{position:relative;text-align:center;padding:var(--spacing-300);padding-top:0px}.sidebar-header.contains-source-img{display:grid;justify-items:center;grid-gap:12px}img.source-image{width:64px;height:64px;border-radius:50%;padding:6px;border:1px solid var(--color-border-02);-o-object-fit:contain;object-fit:contain}:host(.right) .sidebar-header{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.1)}.sidebar-content{padding:0 var(--spacing-300)}:host(.right) .sidebar-content{overflow:auto}.sidebar{background:white;box-sizing:border-box;padding-top:var(--spacing-300);display:flex;flex-direction:column;max-height:100vh;overflow-y:auto}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.no-fixed) .sidebar{transform:unset !important}:host(.bottom.closed) .sidebar{animation-name:slideOutFromBottom;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.open){transition:background 0.3s ease-in-out;background:rgba(0, 0, 0, 0.2)}:host(.bottom.open) .sidebar{animation-name:slideInFromBottom;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{animation-name:slideOutFromRight;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.right.open) .sidebar{animation-name:slideInFromRight;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.right) .sidebar{max-width:480px}:host(.right) vviinn-vpr-widget::part(recommendations-results){display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:var(--spacing-300)}:host(.right) vviinn-vpr-widget{overflow:auto}.title{font-style:normal;font-weight:var(--font-weight-600);font-size:var(--font-size-title);font-family:var(--font-family, var(--font-family-base));line-height:40px;text-align:center;color:#000000}.subtitle{font-size:var(--font-size-body);font-family:var(--font-family, var(--font-family-base));text-align:center}.close-sidebar{position:absolute;background:transparent;border:none;cursor:pointer;margin:0;top:0;color:var(--color-icon-secondary);transition:color 0.1s ease-in-out;padding:var(--spacing-100);right:var(--spacing-200)}.close-sidebar:hover{color:var(--color-icon-primary)}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@media (max-width: 768px){:host{--vviinn-carousel-columns:2}}";
 
 const RecommendationsSidebar = class {
     constructor(hostRef) {

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

@@ -2,9 +2,9 @@
 
 var index = require('./index-D38ORu31.js');
 var Rectangle = require('./Rectangle-7dF6_xf3.js');
-var search_store = require('./search.store-B_zxc87K.js');
+var search_store = require('./search.store-DlrP4N8h.js');
 var index$2 = require('./index-CBteD3gC.js');
-var index$1 = require('./index-D9aqF1Pk.js');
+var index$1 = require('./index-DvleNAFh.js');
 var store = require('./store-jPZ4ROqV.js');
 var cropperUtils = require('./cropperUtils-DCDOLeBS.js');
 var openProductLink = require('./openProductLink-BwHUGXtr.js');

package/dist/cjs/vviinn-carousel_10.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
 var index = require('./index-D38ORu31.js');
-var search_store = require('./search.store-B_zxc87K.js');
+var search_store = require('./search.store-DlrP4N8h.js');
 var Rectangle = require('./Rectangle-7dF6_xf3.js');
 var store = require('./store-jPZ4ROqV.js');
-var index$1 = require('./index-D9aqF1Pk.js');
+var index$1 = require('./index-DvleNAFh.js');
 var constants = require('./constants-BlwqMvns.js');
 var index$2 = require('./index-CBteD3gC.js');
 var index$3 = require('./index-CvMi8_tX.js');
@@ -131,7 +131,7 @@ function sequenceT(F) {
     };
 }
 
-const vviinnCarouselCss = ":host{--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4)}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.body.append-slider{min-height:calc(var(--product-card-calculated-height) + 24px)}.body.append-slider.empty-results{min-height:unset}.bullets{display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#e0e0e0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content{display:flex;flex-direction:row;gap:8px;overflow-y:hidden;overflow-x:auto;flex-grow:1;scrollbar-width:thin}:host(.continuity) .content,:host(.grid) .content{padding-bottom:16px}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}content. .content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}@supports (scrollbar-color: unset){.content.continuity,:host(.set){scrollbar-color:transparent transparent}.content.continuity:hover,:host(.set:hover){scrollbar-color:initial}}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) .prev,:host(.continuity) .next{border-radius:2px}:host(.grid) .prev,:host(.grid) .next{border-radius:50%}.prev,.next{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);fill:#525252;cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0;transition:opacity 0.2s ease-in-out}.next:disabled,.prev:disabled{opacity:0.5;cursor:not-allowed}.next.grid-arrows-dynamic:disabled,.prev.grid-arrows-dynamic:disabled{display:none}.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}.body.set{max-width:100%;justify-content:space-between;margin-left:auto;display:flex;flex-direction:row;gap:112px}.body.set::-webkit-scrollbar{display:none}@media (max-width: 768px){.body.set{gap:40px}}@media (max-width: 480px){.items-group{grid-template-columns:repeat(2, 1fr)}}.content.set{grid-gap:20px;height:-moz-fit-content;height:fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow:unset}";
+const vviinnCarouselCss = ":host{}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.body.append-slider{min-height:calc(var(--product-card-calculated-height) + 24px)}.body.append-slider.empty-results{min-height:unset}.bullets{display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#e0e0e0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content{display:flex;flex-direction:row;gap:8px;overflow-y:hidden;overflow-x:auto;flex-grow:1;scrollbar-width:thin}:host(.continuity) .content,:host(.grid) .content{padding-bottom:16px}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}content. .content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}@supports (scrollbar-color: unset){.content.continuity,:host(.set){scrollbar-color:transparent transparent}.content.continuity:hover,:host(.set:hover){scrollbar-color:initial}}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) .prev,:host(.continuity) .next{border-radius:2px}:host(.grid) .prev,:host(.grid) .next{border-radius:50%}.prev,.next{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);fill:#525252;cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0;transition:opacity 0.2s ease-in-out}.next:disabled,.prev:disabled{opacity:0.5;cursor:not-allowed}.next.grid-arrows-dynamic:disabled,.prev.grid-arrows-dynamic:disabled{display:none}.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns, 4), 1fr);min-width:100%}.body.set{max-width:100%;justify-content:space-between;margin-left:auto;display:flex;flex-direction:row;gap:112px}.body.set::-webkit-scrollbar{display:none}@media (max-width: 768px){.body.set{gap:40px}}@media (max-width: 480px){.items-group{grid-template-columns:repeat(2, 1fr)}}.content.set{grid-gap:20px;height:-moz-fit-content;height:fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow:unset}";
 
 const VviinnCarousel = class {
     constructor(hostRef) {
@@ -425,7 +425,11 @@ const VviinnCarousel = class {
         const styleSheet = getComputedStyle(this.el);
         const calculatedColumnsAmount = parseInt(styleSheet.getPropertyValue(index$1.RESULTS_CALCULATED_COLUMNS_CSS_VAR));
         if (!calculatedColumnsAmount || isNaN(calculatedColumnsAmount)) {
-            this.columns = index$1.DEFAULT_COLUMNS_NUMBER;
+            const cssColumnsAmount = parseInt(styleSheet.getPropertyValue(index$1.CAROUSEL_COLUMNS_CSS_VAR));
+            this.columns =
+                cssColumnsAmount >= 1
+                    ? cssColumnsAmount
+                    : index$1.DEFAULT_COLUMNS_NUMBER;
         }
         else {
             this.columns = calculatedColumnsAmount;
@@ -558,10 +562,10 @@ const VviinnCarousel = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (index.h(index.Host, { key: 'e11e8cfb234d70f22b8ea47021726140d5247253', class: this.getClassMap() }, index.h("div", { key: '5bc27834ea27a3612f35aa5b715d24c38900c654', class: Object.assign(Object.assign({}, this.getClassMap()), this.getBodyClassMap()) }, this.isSetMode && this.crossSellingRecommendations.length > 0 && (index.h("vviinn-product-card", { key: '3d21ba5ad6d7a953b6b17452235c09f155b0b425', class: "set-mode product-card--source", productTitle: this.sourceProduct.title, image: (_b = (_a = this.sourceProduct.image) === null || _a === void 0 ? void 0 : _a.thumbnail) !== null && _b !== void 0 ? _b : (_c = this.sourceProduct.image) === null || _c === void 0 ? void 0 : _c.original, images: this.sourceProduct.images, showMultipleImages: this.showMultipleImages, disableMobileSwiper: true, entityType: this.sourceProduct.entityType, price: this.sourceProduct.price.actual, salePrice: this.sourceProduct.price.sale, basePrice: (_d = this.sourceProduct.basePrice) === null || _d === void 0 ? void 0 : _d.actual, baseSalePrice: (_e = this.sourceProduct.basePrice) === null || _e === void 0 ? void 0 : _e.sale, addPriceContainer: this.addPriceContainer, imageWidth: 300, imageResolutionWidth: this.imageResolutionWidth, isSourceProduct: true, currencySign: this.currencySign, pricePrefix: this.pricePrefix, isSetMode: this.isSetMode, locale: this.locale, numberLocale: this.numberLocale, favoriteShow: this.favoriteShow, customLabels: index$1.getCustomLabels(this.sourceProduct), responsive: true })), index.h("div", { key: 'e36046bb907dd55167ce8decd2a3d2d687158a6a', class: this.getContentClassMap() }, this.renderRecommendations(), this.showArrowButtons() && (index.h(index.Fragment, { key: '15e0e414cc95a022db4c6a65b652012b0a9a52f2' }, index.h("button", { key: 'dcd7427334ffbd97857866ec3b07b8d845eb9361', class: {
+        return (index.h(index.Host, { key: 'c5f34b585ae2cf1307d3011db185fcb038a807b6', class: this.getClassMap() }, index.h("div", { key: '098746eefad49ac0cf2bdac38e74fdc53d3b2313', class: Object.assign(Object.assign({}, this.getClassMap()), this.getBodyClassMap()) }, this.isSetMode && this.crossSellingRecommendations.length > 0 && (index.h("vviinn-product-card", { key: '3fe540bbe42a9fd21c5fb1a79d8f8949c9ef08a7', class: "set-mode product-card--source", productTitle: this.sourceProduct.title, image: (_b = (_a = this.sourceProduct.image) === null || _a === void 0 ? void 0 : _a.thumbnail) !== null && _b !== void 0 ? _b : (_c = this.sourceProduct.image) === null || _c === void 0 ? void 0 : _c.original, images: this.sourceProduct.images, showMultipleImages: this.showMultipleImages, disableMobileSwiper: true, entityType: this.sourceProduct.entityType, price: this.sourceProduct.price.actual, salePrice: this.sourceProduct.price.sale, basePrice: (_d = this.sourceProduct.basePrice) === null || _d === void 0 ? void 0 : _d.actual, baseSalePrice: (_e = this.sourceProduct.basePrice) === null || _e === void 0 ? void 0 : _e.sale, addPriceContainer: this.addPriceContainer, imageWidth: 300, imageResolutionWidth: this.imageResolutionWidth, isSourceProduct: true, currencySign: this.currencySign, pricePrefix: this.pricePrefix, isSetMode: this.isSetMode, locale: this.locale, numberLocale: this.numberLocale, favoriteShow: this.favoriteShow, customLabels: index$1.getCustomLabels(this.sourceProduct), responsive: true })), index.h("div", { key: 'f22aa5a751ee14cdd305193280ec61bbb8fffc8b', class: this.getContentClassMap() }, this.renderRecommendations(), this.showArrowButtons() && (index.h(index.Fragment, { key: 'e6a14ce9e7c409cac09d16a0d35b65e70cfff007' }, index.h("button", { key: '8fb9606e5ba9aecf18252422243f9c4072397a9f', class: {
                 prev: true,
                 "grid-arrows-dynamic": this.gridArrowsDynamic && this.isGridMode,
-            }, onClick: () => this.handleCarouselButtonClick("left"), part: "carousel-button carousel-button-prev", disabled: this.isFirst(), "aria-label": store.instance.t("buttons.previous") }, index.h(ChevronIcon, { key: '26ae32a753c9d932cf9c2123ea10584f24c8e953' })), index.h("button", { key: 'e63bcc69a7302ee13da94f9b17f5f7c7c76d3615', class: "next", onClick: () => this.handleCarouselButtonClick("right"), part: "carousel-button carousel-button-next", disabled: this.isLast(), "aria-label": store.instance.t("buttons.next") }, index.h(ChevronIcon, { key: 'dde6c8dec93b6fac3938d11f3542659eec1232b9' })))))), this.showBullets() && (index.h("div", { key: '1fe11a8336061aff451962e99adb59654de0e6e2', class: "bullets" }, this.renderBullets()))));
+            }, onClick: () => this.handleCarouselButtonClick("left"), part: "carousel-button carousel-button-prev", disabled: this.isFirst(), "aria-label": store.instance.t("buttons.previous") }, index.h(ChevronIcon, { key: '70aeaed3d65ebb2344f964f8bfba34f67de1c97a' })), index.h("button", { key: 'edd35c95f6404725cdfe9548f24fc555efe5b21d', class: "next", onClick: () => this.handleCarouselButtonClick("right"), part: "carousel-button carousel-button-next", disabled: this.isLast(), "aria-label": store.instance.t("buttons.next") }, index.h(ChevronIcon, { key: 'e5af48de0f6c1f95dfaaf577ca930a233f8eb488' })))))), this.showBullets() && (index.h("div", { key: 'b0957a0f30c6a43c71198780d650413c4c28c1d3', class: "bullets" }, this.renderBullets()))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/vviinn-shop-the-look.cjs.entry.js

@@ -4,7 +4,7 @@ var index = require('./index-D38ORu31.js');
 var Rectangle = require('./Rectangle-7dF6_xf3.js');
 var cropperUtils = require('./cropperUtils-DCDOLeBS.js');
 var swiperElement = require('./swiper-element-DjtzojCR.js');
-var search_store = require('./search.store-B_zxc87K.js');
+var search_store = require('./search.store-DlrP4N8h.js');
 var SecondaryActionIcon = require('./SecondaryActionIcon-Ng84u7-b.js');
 var index$1 = require('./index-CvMi8_tX.js');
 var store = require('./store-jPZ4ROqV.js');
@@ -148,17 +148,6 @@ const calculateImageBounds = (imageElement) => {
     };
 };
 
-/**
- * Create a File object from an image URL for upload
- */
-const createImageFile = async (imageUrl) => {
-    const imageResponse = await fetch(imageUrl);
-    const imageBlob = await imageResponse.blob();
-    return new File([imageBlob], "image.jpg", {
-        type: "image/jpeg",
-    });
-};
-
 const isDesktop = search_store.isDesktop;
 const getVisibilityThreshold = (isDesktop) => {
     return isDesktop
@@ -230,15 +219,14 @@ const calculateModalPosition = (imageElement, detectedObject, containerElement,
 };
 const performVisualSearch = async (params) => {
     try {
-        const imageFile = await createImageFile(params.imageUrl);
-        const result = await search_store.makeUploadFileRequest("shopTheLook", params.token, params.apiPath, params.campaignId)(imageFile);
-        return Rectangle.EitherExports.fold((error) => Rectangle.EitherExports.left(`Upload failed: ${error.inner}`), (uploadResponse) => {
+        const result = await search_store.makeVisualSearchByUrlRequest("shopTheLook", params.imageUrl, params.token, params.apiPath, params.campaignId);
+        return Rectangle.EitherExports.fold((error) => Rectangle.EitherExports.left(`Visual search failed: ${error.inner}`), (response) => {
             var _a, _b;
-            const detectedObjects = ((_b = (_a = uploadResponse.interactions) === null || _a === void 0 ? void 0 : _a.suggestedSearchAreas) === null || _b === void 0 ? void 0 : _b.map((area) => area.rectangle)) || [];
+            const detectedObjects = ((_b = (_a = response.interactions) === null || _a === void 0 ? void 0 : _a.suggestedSearchAreas) === null || _b === void 0 ? void 0 : _b.map((area) => area.rectangle)) || [];
             return Rectangle.EitherExports.right({
                 detectedObjects,
                 searchResults: [],
-                visualSearchId: uploadResponse.requestId || null,
+                visualSearchId: response.requestId || null,
             });
         })(result);
     }

package/dist/cjs/vviinn-text-search.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-D38ORu31.js');
 var Rectangle = require('./Rectangle-7dF6_xf3.js');
-var search_store = require('./search.store-B_zxc87K.js');
+var search_store = require('./search.store-DlrP4N8h.js');
 var index$2 = require('./index-CBteD3gC.js');
 var store = require('./store-jPZ4ROqV.js');
 var index$1 = require('./index-CvMi8_tX.js');

package/dist/collection/components/vviinn-carousel/constants.js

@@ -2,6 +2,7 @@ export const CAROUSEL_CONTENT_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
 export const CAROUSEL_IMAGE_WIDTH_CSS_VAR = "--vviinn-carousel-image-width";
 export const SET_MODE_IMAGE_WIDTH_CSS_VAR = "--vviinn-set-mode-image-width";
 export const RESULTS_CALCULATED_COLUMNS_CSS_VAR = "--vviinn-results-calculated-columns";
+export const CAROUSEL_COLUMNS_CSS_VAR = "--vviinn-carousel-columns";
 export const CONTENT_GROUP_CSS_CLASS = "items-group";
 export const DEFAULT_COLUMNS_NUMBER = 4;
 export const SCROLL_POSITION_TOLERANCE = 2;

package/dist/collection/components/vviinn-carousel/vviinn-carousel.css

@@ -1,8 +1,8 @@
 :host {
   /**
-      * @prop --product-card-calculated-height: Calculated height of Product Card.
+   * @prop --vviinn-carousel-columns: A number of items in grid mode.
+   * @prop --product-card-calculated-height: Calculated height of Product Card.
    */
-  --vviinn-carousel-columns-internal: var(--vviinn-carousel-columns, 4);
 }
 
 .body {
@@ -140,7 +140,7 @@ content. .content:not(.show-scrollbar)::-webkit-scrollbar,
 .items-group {
   display: grid;
   grid-gap: 16px;
-  grid-template-columns: repeat(var(--vviinn-carousel-columns-internal), 1fr);
+  grid-template-columns: repeat(var(--vviinn-carousel-columns, 4), 1fr);
   min-width: 100%;
 }
 

package/dist/collection/components/vviinn-carousel/vviinn-carousel.js

@@ -4,7 +4,7 @@ import { pipe } from "fp-ts/lib/function";
 import i18next from "i18next";
 import { ChevronIcon } from "../vviinn-icons";
 import { campaignTypeNames } from "../../campaign/Campaign";
-import { CAROUSEL_IMAGE_WIDTH_CSS_VAR, CAROUSEL_CONTENT_WIDTH_CSS_VAR, CONTENT_GROUP_CSS_CLASS, DEFAULT_COLUMNS_NUMBER, RESULTS_CALCULATED_COLUMNS_CSS_VAR, SET_MODE_IMAGE_WIDTH_CSS_VAR, SCROLL_POSITION_TOLERANCE, } from "./constants";
+import { CAROUSEL_COLUMNS_CSS_VAR, CAROUSEL_IMAGE_WIDTH_CSS_VAR, CAROUSEL_CONTENT_WIDTH_CSS_VAR, CONTENT_GROUP_CSS_CLASS, DEFAULT_COLUMNS_NUMBER, RESULTS_CALCULATED_COLUMNS_CSS_VAR, SET_MODE_IMAGE_WIDTH_CSS_VAR, SCROLL_POSITION_TOLERANCE, } from "./constants";
 import { calculateDiscount } from "../../utils/number";
 import { getCustomLabels } from "../../recommendation";
 import { addIfNotEmpty } from "../../utils/collections/collectionsUtils";
@@ -303,7 +303,11 @@ export class VviinnCarousel {
         const styleSheet = getComputedStyle(this.el);
         const calculatedColumnsAmount = parseInt(styleSheet.getPropertyValue(RESULTS_CALCULATED_COLUMNS_CSS_VAR));
         if (!calculatedColumnsAmount || isNaN(calculatedColumnsAmount)) {
-            this.columns = DEFAULT_COLUMNS_NUMBER;
+            const cssColumnsAmount = parseInt(styleSheet.getPropertyValue(CAROUSEL_COLUMNS_CSS_VAR));
+            this.columns =
+                cssColumnsAmount >= 1
+                    ? cssColumnsAmount
+                    : DEFAULT_COLUMNS_NUMBER;
         }
         else {
             this.columns = calculatedColumnsAmount;
@@ -436,10 +440,10 @@ export class VviinnCarousel {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Host, { key: 'e11e8cfb234d70f22b8ea47021726140d5247253', class: this.getClassMap() }, h("div", { key: '5bc27834ea27a3612f35aa5b715d24c38900c654', class: Object.assign(Object.assign({}, this.getClassMap()), this.getBodyClassMap()) }, this.isSetMode && this.crossSellingRecommendations.length > 0 && (h("vviinn-product-card", { key: '3d21ba5ad6d7a953b6b17452235c09f155b0b425', class: "set-mode product-card--source", productTitle: this.sourceProduct.title, image: (_b = (_a = this.sourceProduct.image) === null || _a === void 0 ? void 0 : _a.thumbnail) !== null && _b !== void 0 ? _b : (_c = this.sourceProduct.image) === null || _c === void 0 ? void 0 : _c.original, images: this.sourceProduct.images, showMultipleImages: this.showMultipleImages, disableMobileSwiper: true, entityType: this.sourceProduct.entityType, price: this.sourceProduct.price.actual, salePrice: this.sourceProduct.price.sale, basePrice: (_d = this.sourceProduct.basePrice) === null || _d === void 0 ? void 0 : _d.actual, baseSalePrice: (_e = this.sourceProduct.basePrice) === null || _e === void 0 ? void 0 : _e.sale, addPriceContainer: this.addPriceContainer, imageWidth: 300, imageResolutionWidth: this.imageResolutionWidth, isSourceProduct: true, currencySign: this.currencySign, pricePrefix: this.pricePrefix, isSetMode: this.isSetMode, locale: this.locale, numberLocale: this.numberLocale, favoriteShow: this.favoriteShow, customLabels: getCustomLabels(this.sourceProduct), responsive: true })), h("div", { key: 'e36046bb907dd55167ce8decd2a3d2d687158a6a', class: this.getContentClassMap() }, this.renderRecommendations(), this.showArrowButtons() && (h(Fragment, { key: '15e0e414cc95a022db4c6a65b652012b0a9a52f2' }, h("button", { key: 'dcd7427334ffbd97857866ec3b07b8d845eb9361', class: {
+        return (h(Host, { key: 'c5f34b585ae2cf1307d3011db185fcb038a807b6', class: this.getClassMap() }, h("div", { key: '098746eefad49ac0cf2bdac38e74fdc53d3b2313', class: Object.assign(Object.assign({}, this.getClassMap()), this.getBodyClassMap()) }, this.isSetMode && this.crossSellingRecommendations.length > 0 && (h("vviinn-product-card", { key: '3fe540bbe42a9fd21c5fb1a79d8f8949c9ef08a7', class: "set-mode product-card--source", productTitle: this.sourceProduct.title, image: (_b = (_a = this.sourceProduct.image) === null || _a === void 0 ? void 0 : _a.thumbnail) !== null && _b !== void 0 ? _b : (_c = this.sourceProduct.image) === null || _c === void 0 ? void 0 : _c.original, images: this.sourceProduct.images, showMultipleImages: this.showMultipleImages, disableMobileSwiper: true, entityType: this.sourceProduct.entityType, price: this.sourceProduct.price.actual, salePrice: this.sourceProduct.price.sale, basePrice: (_d = this.sourceProduct.basePrice) === null || _d === void 0 ? void 0 : _d.actual, baseSalePrice: (_e = this.sourceProduct.basePrice) === null || _e === void 0 ? void 0 : _e.sale, addPriceContainer: this.addPriceContainer, imageWidth: 300, imageResolutionWidth: this.imageResolutionWidth, isSourceProduct: true, currencySign: this.currencySign, pricePrefix: this.pricePrefix, isSetMode: this.isSetMode, locale: this.locale, numberLocale: this.numberLocale, favoriteShow: this.favoriteShow, customLabels: getCustomLabels(this.sourceProduct), responsive: true })), h("div", { key: 'f22aa5a751ee14cdd305193280ec61bbb8fffc8b', class: this.getContentClassMap() }, this.renderRecommendations(), this.showArrowButtons() && (h(Fragment, { key: 'e6a14ce9e7c409cac09d16a0d35b65e70cfff007' }, h("button", { key: '8fb9606e5ba9aecf18252422243f9c4072397a9f', class: {
                 prev: true,
                 "grid-arrows-dynamic": this.gridArrowsDynamic && this.isGridMode,
-            }, onClick: () => this.handleCarouselButtonClick("left"), part: "carousel-button carousel-button-prev", disabled: this.isFirst(), "aria-label": i18next.t("buttons.previous") }, h(ChevronIcon, { key: '26ae32a753c9d932cf9c2123ea10584f24c8e953' })), h("button", { key: 'e63bcc69a7302ee13da94f9b17f5f7c7c76d3615', class: "next", onClick: () => this.handleCarouselButtonClick("right"), part: "carousel-button carousel-button-next", disabled: this.isLast(), "aria-label": i18next.t("buttons.next") }, h(ChevronIcon, { key: 'dde6c8dec93b6fac3938d11f3542659eec1232b9' })))))), this.showBullets() && (h("div", { key: '1fe11a8336061aff451962e99adb59654de0e6e2', class: "bullets" }, this.renderBullets()))));
+            }, onClick: () => this.handleCarouselButtonClick("left"), part: "carousel-button carousel-button-prev", disabled: this.isFirst(), "aria-label": i18next.t("buttons.previous") }, h(ChevronIcon, { key: '70aeaed3d65ebb2344f964f8bfba34f67de1c97a' })), h("button", { key: 'edd35c95f6404725cdfe9548f24fc555efe5b21d', class: "next", onClick: () => this.handleCarouselButtonClick("right"), part: "carousel-button carousel-button-next", disabled: this.isLast(), "aria-label": i18next.t("buttons.next") }, h(ChevronIcon, { key: 'e5af48de0f6c1f95dfaaf577ca930a233f8eb488' })))))), this.showBullets() && (h("div", { key: 'b0957a0f30c6a43c71198780d650413c4c28c1d3', class: "bullets" }, this.renderBullets()))));
     }
     static get is() { return "vviinn-carousel"; }
     static get originalStyleUrls() {

package/dist/collection/components/vviinn-shop-the-look/helpers.js

@@ -2,8 +2,7 @@ import * as E from "fp-ts/lib/Either";
 import { INTERSECTION_THRESHOLDS } from "./constants";
 import { isDesktop as sharedIsDesktop, isSmallMobile as sharedIsSmallMobile, } from "../../helpers/device/checkDeviceType";
 import { calculateImageBounds } from "../../Image/bounds";
-import { createImageFile } from "../../Image/upload";
-import { makeUploadFileRequest, makeVisualSearchRequest, shopTheLookState, } from "../../store/search.store";
+import { makeUploadFileRequest, makeVisualSearchByUrlRequest, makeVisualSearchRequest, shopTheLookState, } from "../../store/search.store";
 import { imageFromFileTask } from "../../Image/fromFile";
 export const isDesktop = sharedIsDesktop;
 export const isSmallMobile = sharedIsSmallMobile;
@@ -83,7 +82,6 @@ export const calculateModalPosition = (imageElement, detectedObject, containerEl
     return { x: screenX, y: screenY, anchor };
 };
 export { calculateImageBounds } from "../../Image/bounds";
-export { createImageFile } from "../../Image/upload";
 export { setupIntersectionObserver, } from "../../dom";
 export const resetSearchState = () => ({
     detectedObjects: [],
@@ -95,15 +93,14 @@ export const resetSearchState = () => ({
 });
 export const performVisualSearch = async (params) => {
     try {
-        const imageFile = await createImageFile(params.imageUrl);
-        const result = await makeUploadFileRequest("shopTheLook", params.token, params.apiPath, params.campaignId)(imageFile);
-        return E.fold((error) => E.left(`Upload failed: ${error.inner}`), (uploadResponse) => {
+        const result = await makeVisualSearchByUrlRequest("shopTheLook", params.imageUrl, params.token, params.apiPath, params.campaignId);
+        return E.fold((error) => E.left(`Visual search failed: ${error.inner}`), (response) => {
             var _a, _b;
-            const detectedObjects = ((_b = (_a = uploadResponse.interactions) === null || _a === void 0 ? void 0 : _a.suggestedSearchAreas) === null || _b === void 0 ? void 0 : _b.map((area) => area.rectangle)) || [];
+            const detectedObjects = ((_b = (_a = response.interactions) === null || _a === void 0 ? void 0 : _a.suggestedSearchAreas) === null || _b === void 0 ? void 0 : _b.map((area) => area.rectangle)) || [];
             return E.right({
                 detectedObjects,
                 searchResults: [],
-                visualSearchId: uploadResponse.requestId || null,
+                visualSearchId: response.requestId || null,
             });
         })(result);
     }

package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.css

@@ -222,7 +222,6 @@
 
 
 :host {
-  --vviinn-carousel-columns: 4;
   display: flex;
   box-sizing: border-box;
   position: fixed;

package/dist/collection/store/search.store.js

@@ -147,6 +147,15 @@ const uploadImageFile = (store, token, imageType = "image", searchId, apiPath, c
         inner: error,
     })), TE.chain((body) => processVisualSearch(store, body, token, apiPath, isHiResUpdate)))));
 };
+export const makeVisualSearchByUrlRequest = async (store, imageUrl, token, apiPath, campaignId) => {
+    const state = useStore(store);
+    const body = Object.assign(Object.assign({ query: {
+            url: imageUrl,
+        }, objectDetection: {
+            include: true,
+        } }, addNestedIfNotEmpty("staticFilters", Object.assign({}, addIfNotEmpty("excluded", state.excluded)))), addIfNotEmpty("campaign", campaignId || state.campaignIdVisualSearch || state.campaignId));
+    return processVisualSearch(store, body, token, apiPath)();
+};
 export const makeUploadFileRequest = (store, token, apiPath, campaignId) => async (file) => {
     var _a;
     const state = useStore(store);

package/dist/esm/{index-D8FY9QQF.js → index-BsmArtOR.js}

@@ -1,5 +1,5 @@
 import { h } from './index-RkvPN2Rk.js';
-import { h as addIfNotEmpty, p as parseStringToExcluded, n as isValueMatch, o as isIntervalMatch, q as valueToString, r as extractFilterValue } from './search.store-D4TKj1zR.js';
+import { j as addIfNotEmpty, p as parseStringToExcluded, o as isValueMatch, q as isIntervalMatch, r as valueToString, t as extractFilterValue } from './search.store-Crmiihat.js';
 import { i as instance } from './store-BJxQCbNV.js';
 
 const PlusIcon = () => (h("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "plus-icon", "aria-hidden": "true" },
@@ -15,6 +15,7 @@ const CAROUSEL_CONTENT_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
 const CAROUSEL_IMAGE_WIDTH_CSS_VAR = "--vviinn-carousel-image-width";
 const SET_MODE_IMAGE_WIDTH_CSS_VAR = "--vviinn-set-mode-image-width";
 const RESULTS_CALCULATED_COLUMNS_CSS_VAR = "--vviinn-results-calculated-columns";
+const CAROUSEL_COLUMNS_CSS_VAR = "--vviinn-carousel-columns";
 const CONTENT_GROUP_CSS_CLASS = "items-group";
 const DEFAULT_COLUMNS_NUMBER = 4;
 const SCROLL_POSITION_TOLERANCE = 2;
@@ -367,4 +368,4 @@ const createImageSearchEvent = createTrackingEvent({
     typ: SEARCH_EVENT_TYPE,
 });
 
-export { CONTENT_GROUP_CSS_CLASS as C, DEFAULT_COLUMNS_NUMBER as D, FilterIconClose as F, PlusIcon as P, RESULTS_CALCULATED_COLUMNS_CSS_VAR as R, SET_MODE_IMAGE_WIDTH_CSS_VAR as S, createFilterEvent as a, createAddToBasketEvent as b, createWidgetEvent as c, createAddToWishlistEvent as d, createResultEventByType as e, createProductEventByType as f, getRemoveFilterAriaLabel as g, getCustomLabels as h, getIntervalLabel as i, triggerRemoveIntervalFilter as j, announceToScreenReader as k, isSubFilterActive as l, RenderFilterButton as m, createImageSearchEvent as n, CAROUSEL_IMAGE_WIDTH_CSS_VAR as o, CAROUSEL_CONTENT_WIDTH_CSS_VAR as p, SCROLL_POSITION_TOLERANCE as q, triggerResetFilters as r, syncRequestFilters as s, triggerFilter as t, isPriceFilter as u, v4 as v, CUSTOM_LABELS_DELIMITER as w, getRecommendationsBody as x };
+export { CONTENT_GROUP_CSS_CLASS as C, DEFAULT_COLUMNS_NUMBER as D, FilterIconClose as F, PlusIcon as P, RESULTS_CALCULATED_COLUMNS_CSS_VAR as R, SET_MODE_IMAGE_WIDTH_CSS_VAR as S, createFilterEvent as a, createAddToBasketEvent as b, createWidgetEvent as c, createAddToWishlistEvent as d, createResultEventByType as e, createProductEventByType as f, getRemoveFilterAriaLabel as g, getCustomLabels as h, getIntervalLabel as i, triggerRemoveIntervalFilter as j, announceToScreenReader as k, isSubFilterActive as l, RenderFilterButton as m, createImageSearchEvent as n, CAROUSEL_IMAGE_WIDTH_CSS_VAR as o, CAROUSEL_CONTENT_WIDTH_CSS_VAR as p, CAROUSEL_COLUMNS_CSS_VAR as q, SCROLL_POSITION_TOLERANCE as r, syncRequestFilters as s, triggerFilter as t, triggerResetFilters as u, v4 as v, isPriceFilter as w, CUSTOM_LABELS_DELIMITER as x, getRecommendationsBody as y };

package/dist/esm/{search.store-D4TKj1zR.js → search.store-Crmiihat.js}

@@ -8591,7 +8591,7 @@ const encodeToBase64UTF8 = (str) => {
     return btoa(String.fromCharCode.apply(null, utf8Array));
 };
 
-const version = "2.215.3";
+const version = "2.216.1";
 
 const appStateGlobalDefaults = {
     excluded: null,
@@ -8725,6 +8725,15 @@ const uploadImageFile = (store, token, imageType = "image", searchId, apiPath, c
         inner: error,
     })), chain$1((body) => processVisualSearch(store, body, token, apiPath, isHiResUpdate)))));
 };
+const makeVisualSearchByUrlRequest = async (store, imageUrl, token, apiPath, campaignId) => {
+    const state = useStore(store);
+    const body = Object.assign(Object.assign({ query: {
+            url: imageUrl,
+        }, objectDetection: {
+            include: true,
+        } }, addNestedIfNotEmpty("staticFilters", Object.assign({}, addIfNotEmpty("excluded", state.excluded)))), addIfNotEmpty("campaign", campaignId || state.campaignIdVisualSearch || state.campaignId));
+    return processVisualSearch(store, body, token, apiPath)();
+};
 const makeUploadFileRequest = (store, token, apiPath, campaignId) => async (file) => {
     var _a;
     const state = useStore(store);
@@ -8871,4 +8880,4 @@ const clearAutoSuggestCompletions = (store) => {
     state.autoSuggestCompletions = [];
 };
 
-export { checkDeviceType as A, isMobile as B, fromString as C, fold as D, _ArrayExports as _, makeUploadFileRequest as a, imageFromFileTask as b, setTextSearchQuery as c, clearAutoSuggestCompletions as d, makeAutoSuggestRequest as e, campaignTypeNames as f, getAcceptableFileFormats as g, addIfNotEmpty as h, isDesktop as i, makeTextSearchRequest as j, getAcceptableFileFormatsForDisplay as k, searchState as l, makeVisualSearchRequest as m, isValueMatch as n, isIntervalMatch as o, parseStringToExcluded as p, valueToString as q, extractFilterValue as r, shopTheLookState as s, toFile as t, useSearchStore as u, version as v, getImageSizes as w, checkImageType as x, resetStore as y, makeProductListingPageRequest as z };
+export { makeProductListingPageRequest as A, checkDeviceType as B, isMobile as C, fromString as D, fold as E, _ArrayExports as _, makeVisualSearchByUrlRequest as a, imageFromFileTask as b, makeUploadFileRequest as c, setTextSearchQuery as d, clearAutoSuggestCompletions as e, makeAutoSuggestRequest as f, getAcceptableFileFormats as g, campaignTypeNames as h, isDesktop as i, addIfNotEmpty as j, makeTextSearchRequest as k, getAcceptableFileFormatsForDisplay as l, makeVisualSearchRequest as m, searchState as n, isValueMatch as o, parseStringToExcluded as p, isIntervalMatch as q, valueToString as r, shopTheLookState as s, extractFilterValue as t, useSearchStore as u, version as v, toFile as w, getImageSizes as x, checkImageType as y, resetStore as z };

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

@@ -1,6 +1,6 @@
 import { h, r as registerInstance, H as Host, c as createEvent, g as getElement, F as Fragment } from './index-RkvPN2Rk.js';
 import { i as instance } from './store-BJxQCbNV.js';
-import { k as getAcceptableFileFormatsForDisplay, f as campaignTypeNames, h as addIfNotEmpty, l as searchState, u as useSearchStore, v as version } from './search.store-D4TKj1zR.js';
+import { l as getAcceptableFileFormatsForDisplay, h as campaignTypeNames, j as addIfNotEmpty, n as searchState, u as useSearchStore, v as version } from './search.store-Crmiihat.js';
 import { s as slotChangeListener, a as addEventListenersWithSignal } from './index-OsoUj2Au.js';
 import { S as SecondaryActionIcon } from './SecondaryActionIcon-FWFzrhba.js';
 import { m as modalParts, c as carouselParts, p as productCardParts, r as recommendationsParts, i as initializeLocale } from './index-BtnjaTty.js';
@@ -221,7 +221,7 @@ const VviinnOverlay = class {
 };
 VviinnOverlay.style = vviinnOverlayCss;
 
-const recommendationsSidebarCss = ":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{--vviinn-carousel-columns:4;display:flex;box-sizing:border-box;position:fixed;z-index:9999;height:100vh;left:0;top:0;transition:background 0.1s ease-in-out;width:100vw}:host(.bottom){flex-direction:column;justify-content:flex-end}:host(.no-fixed){position:unset;display:block;width:100%;height:auto}:host(.no-fixed.no-carousel.appended.loading){min-height:calc((var(--product-card-calculated-height) * 3) + 48px)}:host(.right){flex-direction:row;justify-content:flex-end}:host [slot]{visibility:hidden;position:absolute}.sidebar-header{position:relative;text-align:center;padding:var(--spacing-300);padding-top:0px}.sidebar-header.contains-source-img{display:grid;justify-items:center;grid-gap:12px}img.source-image{width:64px;height:64px;border-radius:50%;padding:6px;border:1px solid var(--color-border-02);-o-object-fit:contain;object-fit:contain}:host(.right) .sidebar-header{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.1)}.sidebar-content{padding:0 var(--spacing-300)}:host(.right) .sidebar-content{overflow:auto}.sidebar{background:white;box-sizing:border-box;padding-top:var(--spacing-300);display:flex;flex-direction:column;max-height:100vh;overflow-y:auto}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.no-fixed) .sidebar{transform:unset !important}:host(.bottom.closed) .sidebar{animation-name:slideOutFromBottom;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.open){transition:background 0.3s ease-in-out;background:rgba(0, 0, 0, 0.2)}:host(.bottom.open) .sidebar{animation-name:slideInFromBottom;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{animation-name:slideOutFromRight;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.right.open) .sidebar{animation-name:slideInFromRight;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.right) .sidebar{max-width:480px}:host(.right) vviinn-vpr-widget::part(recommendations-results){display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:var(--spacing-300)}:host(.right) vviinn-vpr-widget{overflow:auto}.title{font-style:normal;font-weight:var(--font-weight-600);font-size:var(--font-size-title);font-family:var(--font-family, var(--font-family-base));line-height:40px;text-align:center;color:#000000}.subtitle{font-size:var(--font-size-body);font-family:var(--font-family, var(--font-family-base));text-align:center}.close-sidebar{position:absolute;background:transparent;border:none;cursor:pointer;margin:0;top:0;color:var(--color-icon-secondary);transition:color 0.1s ease-in-out;padding:var(--spacing-100);right:var(--spacing-200)}.close-sidebar:hover{color:var(--color-icon-primary)}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@media (max-width: 768px){:host{--vviinn-carousel-columns:2}}";
+const recommendationsSidebarCss = ":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:flex;box-sizing:border-box;position:fixed;z-index:9999;height:100vh;left:0;top:0;transition:background 0.1s ease-in-out;width:100vw}:host(.bottom){flex-direction:column;justify-content:flex-end}:host(.no-fixed){position:unset;display:block;width:100%;height:auto}:host(.no-fixed.no-carousel.appended.loading){min-height:calc((var(--product-card-calculated-height) * 3) + 48px)}:host(.right){flex-direction:row;justify-content:flex-end}:host [slot]{visibility:hidden;position:absolute}.sidebar-header{position:relative;text-align:center;padding:var(--spacing-300);padding-top:0px}.sidebar-header.contains-source-img{display:grid;justify-items:center;grid-gap:12px}img.source-image{width:64px;height:64px;border-radius:50%;padding:6px;border:1px solid var(--color-border-02);-o-object-fit:contain;object-fit:contain}:host(.right) .sidebar-header{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.1)}.sidebar-content{padding:0 var(--spacing-300)}:host(.right) .sidebar-content{overflow:auto}.sidebar{background:white;box-sizing:border-box;padding-top:var(--spacing-300);display:flex;flex-direction:column;max-height:100vh;overflow-y:auto}:host(.bottom.idle) .sidebar,:host(.bottom.closed) .sidebar{transform:translateY(100%)}:host(.no-fixed) .sidebar{transform:unset !important}:host(.bottom.closed) .sidebar{animation-name:slideOutFromBottom;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.open){transition:background 0.3s ease-in-out;background:rgba(0, 0, 0, 0.2)}:host(.bottom.open) .sidebar{animation-name:slideInFromBottom;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.right.idle) .sidebar{transform:translateX(100%)}:host(.right.closed) .sidebar{animation-name:slideOutFromRight;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.right.open) .sidebar{animation-name:slideInFromRight;animation-duration:var(\n    --sidebar-animation-duration,\n    var(--sidebar-animation-duration-default)\n  );animation-fill-mode:forwards}:host(.right) .sidebar{max-width:480px}:host(.right) vviinn-vpr-widget::part(recommendations-results){display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:var(--spacing-300)}:host(.right) vviinn-vpr-widget{overflow:auto}.title{font-style:normal;font-weight:var(--font-weight-600);font-size:var(--font-size-title);font-family:var(--font-family, var(--font-family-base));line-height:40px;text-align:center;color:#000000}.subtitle{font-size:var(--font-size-body);font-family:var(--font-family, var(--font-family-base));text-align:center}.close-sidebar{position:absolute;background:transparent;border:none;cursor:pointer;margin:0;top:0;color:var(--color-icon-secondary);transition:color 0.1s ease-in-out;padding:var(--spacing-100);right:var(--spacing-200)}.close-sidebar:hover{color:var(--color-icon-primary)}@keyframes slideInFromBottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideOutFromBottom{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideInFromRight{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideOutFromRight{from{transform:translateX(0)}to{transform:translateX(100%)}}@media (max-width: 768px){:host{--vviinn-carousel-columns:2}}";
 
 const RecommendationsSidebar = class {
     constructor(hostRef) {

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

@@ -1,8 +1,8 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-RkvPN2Rk.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, a 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, c as setTextSearchQuery, y as resetStore, j as makeTextSearchRequest, z as makeProductListingPageRequest, A as checkDeviceType, p as parseStringToExcluded } from './search.store-D4TKj1zR.js';
+import { w as toFile, c as makeUploadFileRequest, x as getImageSizes, v as version, h as campaignTypeNames, j as addIfNotEmpty, m as makeVisualSearchRequest, u as useSearchStore, y as checkImageType, g as getAcceptableFileFormats, d as setTextSearchQuery, z as resetStore, k as makeTextSearchRequest, A as makeProductListingPageRequest, B as checkDeviceType, p as parseStringToExcluded } from './search.store-Crmiihat.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 getIntervalLabel, j as triggerRemoveIntervalFilter, k as announceToScreenReader, s as syncRequestFilters, l as isSubFilterActive, m as RenderFilterButton, n as createImageSearchEvent } from './index-D8FY9QQF.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 getIntervalLabel, j as triggerRemoveIntervalFilter, k as announceToScreenReader, s as syncRequestFilters, l as isSubFilterActive, m as RenderFilterButton, n as createImageSearchEvent } from './index-BsmArtOR.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, o as openProductLink } from './openProductLink-CJ9Wo3Ye.js';

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

@@ -1,8 +1,8 @@
 import { h, r as registerInstance, c as createEvent, f as forceUpdate, F as Fragment, H as Host, g as getElement } from './index-RkvPN2Rk.js';
-import { f as campaignTypeNames, h as addIfNotEmpty, _ as _ArrayExports, u as useSearchStore, B as isMobile, C as fromString, D as fold, v as version } from './search.store-D4TKj1zR.js';
+import { h as campaignTypeNames, j as addIfNotEmpty, _ as _ArrayExports, u as useSearchStore, C as isMobile, D as fromString, E as fold, v as version } from './search.store-Crmiihat.js';
 import { X as has, Y as tuple, _ as _functionExports, g as requireSemigroup, O as OptionExports, v as pipe$1, N as chainW, Z as makeRequest, L as fromEither, $ as resolveApiPath, a0 as createInitPostRequest, a1 as Apply, a2 as TaskEitherExports, E as EitherExports } from './Rectangle-dmgo4KMB.js';
 import { i as instance, d as defaultConfig, t as trackEvent, a as isTrackingEnabled } from './store-BJxQCbNV.js';
-import { S as SET_MODE_IMAGE_WIDTH_CSS_VAR, C as CONTENT_GROUP_CSS_CLASS, o as CAROUSEL_IMAGE_WIDTH_CSS_VAR, p as CAROUSEL_CONTENT_WIDTH_CSS_VAR, R as RESULTS_CALCULATED_COLUMNS_CSS_VAR, D as DEFAULT_COLUMNS_NUMBER, h as getCustomLabels, q as SCROLL_POSITION_TOLERANCE, r as triggerResetFilters, t as triggerFilter, k as announceToScreenReader, i as getIntervalLabel, u as isPriceFilter, l as isSubFilterActive, m as RenderFilterButton, s as syncRequestFilters, P as PlusIcon, w as CUSTOM_LABELS_DELIMITER, v as v4, c as createWidgetEvent, e as createResultEventByType, b as createAddToBasketEvent, d as createAddToWishlistEvent, f as createProductEventByType, x as getRecommendationsBody } from './index-D8FY9QQF.js';
+import { S as SET_MODE_IMAGE_WIDTH_CSS_VAR, C as CONTENT_GROUP_CSS_CLASS, o as CAROUSEL_IMAGE_WIDTH_CSS_VAR, p as CAROUSEL_CONTENT_WIDTH_CSS_VAR, R as RESULTS_CALCULATED_COLUMNS_CSS_VAR, q as CAROUSEL_COLUMNS_CSS_VAR, D as DEFAULT_COLUMNS_NUMBER, h as getCustomLabels, r as SCROLL_POSITION_TOLERANCE, u as triggerResetFilters, t as triggerFilter, k as announceToScreenReader, i as getIntervalLabel, w as isPriceFilter, l as isSubFilterActive, m as RenderFilterButton, s as syncRequestFilters, P as PlusIcon, x as CUSTOM_LABELS_DELIMITER, v as v4, c as createWidgetEvent, e as createResultEventByType, b as createAddToBasketEvent, d as createAddToWishlistEvent, f as createProductEventByType, y as getRecommendationsBody } from './index-BsmArtOR.js';
 import { P as PRODUCT_CARD_IMAGE_WIDTH, D as DISCOVERY_WIDGET_IMAGE_RESOLUTION_WIDTH, c as PRODUCT_CARD_IMAGE_RESOLUTION_WIDTH } from './constants-rqiiCPBX.js';
 import { s as slotChangeListener, a as addEventListenersWithSignal, i as isElementInSelector, S as SlotSkeleton } from './index-OsoUj2Au.js';
 import { o as energyLabelParts, i as initializeLocale, j as extendedFiltersParts, h as filtersParts, q as imageParts, e as contentCardParts, l as listCardParts, p as productCardParts, t as priceRangeParts } from './index-BtnjaTty.js';
@@ -129,7 +129,7 @@ function sequenceT(F) {
     };
 }
 
-const vviinnCarouselCss = ":host{--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4)}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.body.append-slider{min-height:calc(var(--product-card-calculated-height) + 24px)}.body.append-slider.empty-results{min-height:unset}.bullets{display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#e0e0e0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content{display:flex;flex-direction:row;gap:8px;overflow-y:hidden;overflow-x:auto;flex-grow:1;scrollbar-width:thin}:host(.continuity) .content,:host(.grid) .content{padding-bottom:16px}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}content. .content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}@supports (scrollbar-color: unset){.content.continuity,:host(.set){scrollbar-color:transparent transparent}.content.continuity:hover,:host(.set:hover){scrollbar-color:initial}}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) .prev,:host(.continuity) .next{border-radius:2px}:host(.grid) .prev,:host(.grid) .next{border-radius:50%}.prev,.next{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);fill:#525252;cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0;transition:opacity 0.2s ease-in-out}.next:disabled,.prev:disabled{opacity:0.5;cursor:not-allowed}.next.grid-arrows-dynamic:disabled,.prev.grid-arrows-dynamic:disabled{display:none}.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}.body.set{max-width:100%;justify-content:space-between;margin-left:auto;display:flex;flex-direction:row;gap:112px}.body.set::-webkit-scrollbar{display:none}@media (max-width: 768px){.body.set{gap:40px}}@media (max-width: 480px){.items-group{grid-template-columns:repeat(2, 1fr)}}.content.set{grid-gap:20px;height:-moz-fit-content;height:fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow:unset}";
+const vviinnCarouselCss = ":host{}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.body.append-slider{min-height:calc(var(--product-card-calculated-height) + 24px)}.body.append-slider.empty-results{min-height:unset}.bullets{display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#e0e0e0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content{display:flex;flex-direction:row;gap:8px;overflow-y:hidden;overflow-x:auto;flex-grow:1;scrollbar-width:thin}:host(.continuity) .content,:host(.grid) .content{padding-bottom:16px}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}content. .content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}@supports (scrollbar-color: unset){.content.continuity,:host(.set){scrollbar-color:transparent transparent}.content.continuity:hover,:host(.set:hover){scrollbar-color:initial}}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) .prev,:host(.continuity) .next{border-radius:2px}:host(.grid) .prev,:host(.grid) .next{border-radius:50%}.prev,.next{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);fill:#525252;cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0;transition:opacity 0.2s ease-in-out}.next:disabled,.prev:disabled{opacity:0.5;cursor:not-allowed}.next.grid-arrows-dynamic:disabled,.prev.grid-arrows-dynamic:disabled{display:none}.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns, 4), 1fr);min-width:100%}.body.set{max-width:100%;justify-content:space-between;margin-left:auto;display:flex;flex-direction:row;gap:112px}.body.set::-webkit-scrollbar{display:none}@media (max-width: 768px){.body.set{gap:40px}}@media (max-width: 480px){.items-group{grid-template-columns:repeat(2, 1fr)}}.content.set{grid-gap:20px;height:-moz-fit-content;height:fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow:unset}";
 
 const VviinnCarousel = class {
     constructor(hostRef) {
@@ -423,7 +423,11 @@ const VviinnCarousel = class {
         const styleSheet = getComputedStyle(this.el);
         const calculatedColumnsAmount = parseInt(styleSheet.getPropertyValue(RESULTS_CALCULATED_COLUMNS_CSS_VAR));
         if (!calculatedColumnsAmount || isNaN(calculatedColumnsAmount)) {
-            this.columns = DEFAULT_COLUMNS_NUMBER;
+            const cssColumnsAmount = parseInt(styleSheet.getPropertyValue(CAROUSEL_COLUMNS_CSS_VAR));
+            this.columns =
+                cssColumnsAmount >= 1
+                    ? cssColumnsAmount
+                    : DEFAULT_COLUMNS_NUMBER;
         }
         else {
             this.columns = calculatedColumnsAmount;
@@ -556,10 +560,10 @@ const VviinnCarousel = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Host, { key: 'e11e8cfb234d70f22b8ea47021726140d5247253', class: this.getClassMap() }, h("div", { key: '5bc27834ea27a3612f35aa5b715d24c38900c654', class: Object.assign(Object.assign({}, this.getClassMap()), this.getBodyClassMap()) }, this.isSetMode && this.crossSellingRecommendations.length > 0 && (h("vviinn-product-card", { key: '3d21ba5ad6d7a953b6b17452235c09f155b0b425', class: "set-mode product-card--source", productTitle: this.sourceProduct.title, image: (_b = (_a = this.sourceProduct.image) === null || _a === void 0 ? void 0 : _a.thumbnail) !== null && _b !== void 0 ? _b : (_c = this.sourceProduct.image) === null || _c === void 0 ? void 0 : _c.original, images: this.sourceProduct.images, showMultipleImages: this.showMultipleImages, disableMobileSwiper: true, entityType: this.sourceProduct.entityType, price: this.sourceProduct.price.actual, salePrice: this.sourceProduct.price.sale, basePrice: (_d = this.sourceProduct.basePrice) === null || _d === void 0 ? void 0 : _d.actual, baseSalePrice: (_e = this.sourceProduct.basePrice) === null || _e === void 0 ? void 0 : _e.sale, addPriceContainer: this.addPriceContainer, imageWidth: 300, imageResolutionWidth: this.imageResolutionWidth, isSourceProduct: true, currencySign: this.currencySign, pricePrefix: this.pricePrefix, isSetMode: this.isSetMode, locale: this.locale, numberLocale: this.numberLocale, favoriteShow: this.favoriteShow, customLabels: getCustomLabels(this.sourceProduct), responsive: true })), h("div", { key: 'e36046bb907dd55167ce8decd2a3d2d687158a6a', class: this.getContentClassMap() }, this.renderRecommendations(), this.showArrowButtons() && (h(Fragment, { key: '15e0e414cc95a022db4c6a65b652012b0a9a52f2' }, h("button", { key: 'dcd7427334ffbd97857866ec3b07b8d845eb9361', class: {
+        return (h(Host, { key: 'c5f34b585ae2cf1307d3011db185fcb038a807b6', class: this.getClassMap() }, h("div", { key: '098746eefad49ac0cf2bdac38e74fdc53d3b2313', class: Object.assign(Object.assign({}, this.getClassMap()), this.getBodyClassMap()) }, this.isSetMode && this.crossSellingRecommendations.length > 0 && (h("vviinn-product-card", { key: '3fe540bbe42a9fd21c5fb1a79d8f8949c9ef08a7', class: "set-mode product-card--source", productTitle: this.sourceProduct.title, image: (_b = (_a = this.sourceProduct.image) === null || _a === void 0 ? void 0 : _a.thumbnail) !== null && _b !== void 0 ? _b : (_c = this.sourceProduct.image) === null || _c === void 0 ? void 0 : _c.original, images: this.sourceProduct.images, showMultipleImages: this.showMultipleImages, disableMobileSwiper: true, entityType: this.sourceProduct.entityType, price: this.sourceProduct.price.actual, salePrice: this.sourceProduct.price.sale, basePrice: (_d = this.sourceProduct.basePrice) === null || _d === void 0 ? void 0 : _d.actual, baseSalePrice: (_e = this.sourceProduct.basePrice) === null || _e === void 0 ? void 0 : _e.sale, addPriceContainer: this.addPriceContainer, imageWidth: 300, imageResolutionWidth: this.imageResolutionWidth, isSourceProduct: true, currencySign: this.currencySign, pricePrefix: this.pricePrefix, isSetMode: this.isSetMode, locale: this.locale, numberLocale: this.numberLocale, favoriteShow: this.favoriteShow, customLabels: getCustomLabels(this.sourceProduct), responsive: true })), h("div", { key: 'f22aa5a751ee14cdd305193280ec61bbb8fffc8b', class: this.getContentClassMap() }, this.renderRecommendations(), this.showArrowButtons() && (h(Fragment, { key: 'e6a14ce9e7c409cac09d16a0d35b65e70cfff007' }, h("button", { key: '8fb9606e5ba9aecf18252422243f9c4072397a9f', class: {
                 prev: true,
                 "grid-arrows-dynamic": this.gridArrowsDynamic && this.isGridMode,
-            }, onClick: () => this.handleCarouselButtonClick("left"), part: "carousel-button carousel-button-prev", disabled: this.isFirst(), "aria-label": instance.t("buttons.previous") }, h(ChevronIcon, { key: '26ae32a753c9d932cf9c2123ea10584f24c8e953' })), h("button", { key: 'e63bcc69a7302ee13da94f9b17f5f7c7c76d3615', class: "next", onClick: () => this.handleCarouselButtonClick("right"), part: "carousel-button carousel-button-next", disabled: this.isLast(), "aria-label": instance.t("buttons.next") }, h(ChevronIcon, { key: 'dde6c8dec93b6fac3938d11f3542659eec1232b9' })))))), this.showBullets() && (h("div", { key: '1fe11a8336061aff451962e99adb59654de0e6e2', class: "bullets" }, this.renderBullets()))));
+            }, onClick: () => this.handleCarouselButtonClick("left"), part: "carousel-button carousel-button-prev", disabled: this.isFirst(), "aria-label": instance.t("buttons.previous") }, h(ChevronIcon, { key: '70aeaed3d65ebb2344f964f8bfba34f67de1c97a' })), h("button", { key: 'edd35c95f6404725cdfe9548f24fc555efe5b21d', class: "next", onClick: () => this.handleCarouselButtonClick("right"), part: "carousel-button carousel-button-next", disabled: this.isLast(), "aria-label": instance.t("buttons.next") }, h(ChevronIcon, { key: 'e5af48de0f6c1f95dfaaf577ca930a233f8eb488' })))))), this.showBullets() && (h("div", { key: 'b0957a0f30c6a43c71198780d650413c4c28c1d3', class: "bullets" }, this.renderBullets()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {