vviinn-widgets 2.34.0 → 2.35.0

package/dist/cjs/constants-7684cbfc.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const DEFAULT_EXAMPLE_IMAGE = "https://cdn.vviinn.com/assets/merchant/default/vviinn_img_start-hero.jpg";
+
+exports.DEFAULT_EXAMPLE_IMAGE = DEFAULT_EXAMPLE_IMAGE;

package/dist/cjs/{customized-slots-0a8d663c.js → customized-slots-5bede102.js}

@@ -17,19 +17,9 @@ function fromString(s) {
 
 const defaultSlotsNames = [
   "vviinn-onboarding-title",
-  "onboarding-card-1-icon",
-  "onboarding-card-1-text",
-  "onboarding-card-2-icon",
-  "onboarding-card-2-text",
-  "onboarding-card-3-icon",
-  "onboarding-card-3-text",
-  "vviinn-example-images-title",
-  "vviinn-example-images-1",
-  "vviinn-example-images-2",
-  "vviinn-example-images-3",
-  "vviinn-example-images-4",
   "vviinn-teaser-text",
   "vviinn-image-upload-button-text",
+  "vviinn-camera-button-text",
   "vviinn-privacy-badge-text",
   "vviinn-image-search-modal-title",
   "vviinn-basket-button-text",

package/dist/cjs/index-235ee3c0.js

@@ -0,0 +1,40 @@
+'use strict';
+
+const index = require('./index-5619b5ec.js');
+
+const ArrowIcon = () => (index.h("svg", { width: "12", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { d: "M0 10 10 0l1.4 1.4L2.8 10l8.6 8.6L10 20 0 10Z" })));
+const CameraIcon = () => (index.h("svg", { width: "22", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.567 3H19A3.01 3.01 0 0 1 22 6v7.69h-2V6c0-.55-.451-1-1.001-1h-3.502l-2.03-3H8.543L6.603 5H3.001c-.55 0-1 .45-1 1v11c0 .55.45 1 1 1h5.933v2H3.001A3.01 3.01 0 0 1 0 17V6c0-1.65 1.35-3 3.001-3h2.522l1.94-3h7.074l2.03 3Zm-5.562 3c1.28 0 2.561.48 3.542 1.46h-.01a4.992 4.992 0 0 1 .64 6.29l3.051 3.05-1.41 1.41-3.052-3.05c-.84.55-1.8.83-2.76.83-1.282 0-2.562-.48-3.543-1.46a5.002 5.002 0 0 1 0-7.07A5.026 5.026 0 0 1 11.005 6Zm-2.771 5a2.763 2.763 0 0 0 2.771 2.77A2.763 2.763 0 0 0 13.776 11a2.763 2.763 0 0 0-2.771-2.77A2.763 2.763 0 0 0 8.234 11Z", fill: "#161616" })));
+const ChevronIcon = () => (index.h("svg", { width: "9", height: "16", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { d: "m9 8-7.895 8L0 14.88 6.79 8 0 1.12 1.105 0 9 8Z" })));
+const VisualSearchIcon = () => (index.h("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5 2C3.35 2 2 3.35 2 5v2H0V5c0-2.76 2.24-5 5-5h2v2H5Zm5 3c1.28 0 2.56.48 3.54 1.46h-.01a4.994 4.994 0 0 1 .64 6.29l3.05 3.05-1.41 1.41-3.05-3.05c-.84.55-1.8.83-2.76.83a4.98 4.98 0 0 1-3.54-1.46 5.003 5.003 0 0 1 0-7.07C7.44 5.49 8.72 5 10 5Zm-2.77 5c0 .74.29 1.44.81 1.96s1.22.81 1.96.81 1.44-.29 1.96-.81.81-1.22.81-1.96-.29-1.44-.81-1.96-1.22-.81-1.96-.81-1.44.29-1.96.81-.81 1.22-.81 1.96ZM2 15v-2H0v2c0 2.76 2.24 5 5 5h2v-2H5c-1.65 0-3-1.35-3-3ZM13 0h2c2.76 0 5 2.24 5 5v2h-2V5c0-1.65-1.35-3-3-3h-2V0Z", fill: "#161616" })));
+const CrossIcon = () => (index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "#161616" })));
+const UploadActionIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+  index.h("path", { d: "M4.5 21C4.1 21 3.75 20.85 3.45 20.55C3.15 20.25 3 19.9 3 19.5V4.5C3 4.1 3.15 3.75 3.45 3.45C3.75 3.15 4.1 3 4.5 3H19.5C19.9 3 20.25 3.15 20.55 3.45C20.85 3.75 21 4.1 21 4.5V19.5C21 19.9 20.85 20.25 20.55 20.55C20.25 20.85 19.9 21 19.5 21H4.5ZM6.65 17.075H17.375C17.525 17.075 17.6333 17.0083 17.7 16.875C17.7667 16.7417 17.7583 16.6083 17.675 16.475L14.75 12.575C14.6667 12.475 14.5667 12.425 14.45 12.425C14.3333 12.425 14.2333 12.475 14.15 12.575L11.15 16.45L9.125 13.675C9.04167 13.575 8.94167 13.525 8.825 13.525C8.70833 13.525 8.60833 13.575 8.525 13.675L6.375 16.475C6.275 16.6083 6.25833 16.7417 6.325 16.875C6.39167 17.0083 6.5 17.075 6.65 17.075Z", fill: "currentColor" })));
+const UpdateIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.5998 4.57C20.3898 4.19 19.8798 3.68 19.4198 0.37C19.3798 0.15 19.2198 0 19.0098 0C18.7998 0 18.6298 0.15 18.5898 0.37C18.1198 3.66 17.6298 4.13 14.4098 4.57C14.1698 4.61 14.0098 4.77 14.0098 5C14.0098 5.23 14.1698 5.39 14.4098 5.42C17.6298 5.81 18.1398 6.31 18.5898 9.62C18.6298 9.84 18.7998 10 19.0098 10C19.2198 10 19.3898 9.84 19.4198 9.62C19.8898 6.31 20.3898 5.81 23.5998 5.42C23.8398 5.38 23.9998 5.22 23.9998 5C23.9998 4.78 23.8298 4.6 23.5998 4.57Z", fill: "currentColor" }),
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M19.93 13C19.43 13 19.01 13.37 18.95 13.86C18.52 17.36 15.51 20.06 11.89 20C8.24 19.94 5.15 16.92 5.01 13.27C4.92 10.79 6.13 8.58 8.01 7.27V11C8.01 11.55 8.46 12 9.01 12C9.56 12 10.01 11.55 10.01 11V5C10.01 4.45 9.56 4 9.01 4H3C2.45 4 2 4.45 2 5C2 5.55 2.45 6 3 6H6.35C4.24 7.71 2.91 10.35 3 13.3C3.15 17.98 7.06 21.87 11.74 22C16.45 22.13 20.37 18.65 20.93 14.13C21 13.53 20.53 13.01 19.93 13.01V13Z", fill: "currentColor" })));
+const CameraActionIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+  index.h("path", { d: "M12 17.5C13.25 17.5 14.3125 17.0625 15.1875 16.1875C16.0625 15.3125 16.5 14.25 16.5 13C16.5 11.75 16.0625 10.6875 15.1875 9.8125C14.3125 8.9375 13.25 8.5 12 8.5C10.75 8.5 9.6875 8.9375 8.8125 9.8125C7.9375 10.6875 7.5 11.75 7.5 13C7.5 14.25 7.9375 15.3125 8.8125 16.1875C9.6875 17.0625 10.75 17.5 12 17.5ZM12 15.5C11.3 15.5 10.7083 15.2583 10.225 14.775C9.74167 14.2917 9.5 13.7 9.5 13C9.5 12.3 9.74167 11.7083 10.225 11.225C10.7083 10.7417 11.3 10.5 12 10.5C12.7 10.5 13.2917 10.7417 13.775 11.225C14.2583 11.7083 14.5 12.3 14.5 13C14.5 13.7 14.2583 14.2917 13.775 14.775C13.2917 15.2583 12.7 15.5 12 15.5ZM4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V7C2 6.45 2.19583 5.97917 2.5875 5.5875C2.97917 5.19583 3.45 5 4 5H7.15L8.4 3.65C8.58333 3.45 8.80417 3.29167 9.0625 3.175C9.32083 3.05833 9.59167 3 9.875 3H14.125C14.4083 3 14.6792 3.05833 14.9375 3.175C15.1958 3.29167 15.4167 3.45 15.6 3.65L16.85 5H20C20.55 5 21.0208 5.19583 21.4125 5.5875C21.8042 5.97917 22 6.45 22 7V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4Z", fill: "currentColor" })));
+const RoundCameraIcon = () => (index.h("svg", { width: "72", height: "72", viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M36 72C55.8823 72 72 55.8823 72 36C72 16.1177 55.8823 0 36 0C16.1177 0 0 16.1177 0 36C0 55.8823 16.1177 72 36 72ZM51.8333 25.4167C51.1667 24.75 50.1667 24.25 49.1667 24.25H44.1667L42 20.1667C41.8333 19.8333 41.3333 19.5 41 19.3333C40.5 19.1667 40 19 39.5 19H32.5C32 19 31.5 19.1667 31 19.3333C30.6667 19.5 30.1667 19.8333 29.8333 20.1667L27.6667 24.25H22.6667C21.6667 24.25 20.8333 24.5833 20.1667 25.4167C19.5 26.25 19 27.0833 19 28.0833V46C19 47 19.3333 48 20.1667 48.6667C21 49.3333 21.8333 49.8333 22.8333 49.8333H46.8333L39.6667 42.6667C38.5 43.3333 37.3333 43.6667 36 43.6667C33.8333 43.6667 32.1667 43 30.6667 41.5C29.1667 40 28.5 38.1667 28.5 36.1667C28.5 34.1667 29.1667 32.3333 30.6667 30.8333C32.1667 29.3333 34 28.6667 36 28.6667C38 28.6667 39.8333 29.3333 41.3333 30.8333C42.8333 32.3333 43.5 34.1667 43.5 36.1667C43.5 37.5 43.1667 38.6667 42.5 39.8333L51.5 48.8333L51.6667 48.6667C52.3333 48 52.8333 47 52.8333 46V28.0833C52.8333 26.8333 52.6667 26.0833 51.8333 25.4167ZM38.8333 33.1667C38 32.3333 37.1667 32 36 32C34.8333 32 34 32.3333 33.1667 33.1667C32.3333 34 32 34.8333 32 36C32 37.1667 32.3333 38 33.1667 38.8333C34 39.6667 34.8333 40 36 40C37.1667 40 38 39.6667 38.8333 38.8333C39.6667 38 40 37.1667 40 36C40 34.8333 39.6667 34 38.8333 33.1667Z", fill: "white" }),
+  index.h("g", { filter: "url(#filter0_b_5_4702)" },
+    index.h("path", { d: "M49.1667 24.25C50.1667 24.25 51.1667 24.75 51.8333 25.4167C52.6667 26.0833 52.8333 26.8333 52.8333 28.0833V46C52.8333 47 52.3333 48 51.6667 48.6667L51.5 48.8333L42.5 39.8333C43.1667 38.6667 43.5 37.5 43.5 36.1667C43.5 34.1667 42.8333 32.3333 41.3333 30.8333C39.8333 29.3333 38 28.6667 36 28.6667C34 28.6667 32.1667 29.3333 30.6667 30.8333C29.1667 32.3333 28.5 34.1667 28.5 36.1667C28.5 38.1667 29.1667 40 30.6667 41.5C32.1667 43 33.8333 43.6667 36 43.6667C37.3333 43.6667 38.5 43.3333 39.6667 42.6667L46.8333 49.8333H22.8333C21.8333 49.8333 21 49.3333 20.1667 48.6667C19.3333 48 19 47 19 46V28.0833C19 27.0833 19.5 26.25 20.1667 25.4167C20.8333 24.5833 21.6667 24.25 22.6667 24.25H27.6667L29.8333 20.1667C30.1667 19.8333 30.6667 19.5 31 19.3333C31.5 19.1667 32 19 32.5 19H39.5C40 19 40.5 19.1667 41 19.3333C41.3333 19.5 41.8333 19.8333 42 20.1667L44.1667 24.25H49.1667Z", fill: "black", "fill-opacity": "0.25" }),
+    index.h("path", { d: "M36 32C37.1667 32 38 32.3333 38.8333 33.1667C39.6667 34 40 34.8333 40 36C40 37.1667 39.6667 38 38.8333 38.8333C38 39.6667 37.1667 40 36 40C34.8333 40 34 39.6667 33.1667 38.8333C32.3333 38 32 37.1667 32 36C32 34.8333 32.3333 34 33.1667 33.1667C34 32.3333 34.8333 32 36 32Z", fill: "black", "fill-opacity": "0.25" }))));
+const WarningIcon = () => (index.h("svg", { slot: "icon", class: "icon", width: "32", height: "32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  index.h("path", { d: "M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28Zm0 26a12 12 0 1 1 0-24 12 12 0 0 1 0 24Z", fill: "#525252" }),
+  index.h("path", { d: "M17 8h-2v11h2V8Zm-1 14a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z", fill: "#525252" })));
+
+exports.ArrowIcon = ArrowIcon;
+exports.CameraActionIcon = CameraActionIcon;
+exports.CameraIcon = CameraIcon;
+exports.ChevronIcon = ChevronIcon;
+exports.CrossIcon = CrossIcon;
+exports.RoundCameraIcon = RoundCameraIcon;
+exports.UpdateIcon = UpdateIcon;
+exports.UploadActionIcon = UploadActionIcon;
+exports.VisualSearchIcon = VisualSearchIcon;
+exports.WarningIcon = WarningIcon;

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-carousel_4.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"color":[1],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32],"updatingAllCards":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnAddToBasket","trackAddToBasket"],[0,"vviinnUpdatingAllCardsFinished","updatingAllCardsFinishedListener"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[16],"widgetVersion":[1,"widget-version"],"addToBasketShow":[4,"add-to-basket-show"],"updatingAllCards":[4,"updating-all-cards"],"updateButtonLocation":[1,"update-button-location"],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[32],"crossSellingRecommendations":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"mode":[1],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"index":[2],"updatingAllCards":[4,"updating-all-cards"],"defaultAnimationInterval":[2,"default-animation-interval"],"imageLoaded":[32],"isTransitioning":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-skeleton",{"height":[2],"halfWidth":[4,"half-width"]}]]],["search-filters_20.cjs",[[1,"vviinn-onboarding"],[1,"vviinn-example-images",{"basicEventData":[16],"exampleImagesTitle":[1,"example-images-title"]}],[1,"vviinn-image-view",{"basicEventData":[16],"cropper":[32]},[[0,"vviinnSelectObject","selectDetectedObject"]]],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"],"widgetVersion":[1,"widget-version"]}],[1,"vviinn-empty-results"],[1,"vviinn-image-selector",{"basicEventData":[16],"startUpload":[4,"start-upload"],"resetVpsButton":[16]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedFilter":[32],"hideFilters":[32]}],[1,"vviinn-privacy-badge",{"privacyBadgeText":[1,"privacy-badge-text"]}],[1,"vviinn-teaser"],[1,"vviinn-example-image",{"src":[1],"width":[2],"height":[2],"basicEventData":[16],"selected":[32]}],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"hideBackButton":[4,"hide-back-button"],"slider":[32]}],[1,"vviinn-onboarding-card-1",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-onboarding-card-2",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-onboarding-card-3",{"cardTitle":[1,"card-title"],"cardText":[1,"card-text"]}],[1,"vviinn-overlay"],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32],"isRTL":[32]}]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"apiPath":[1,"api-path"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"buttonPressed":[4,"button-pressed"],"mode":[1],"resetVpsButton":[16],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"],[0,"secondaryActionClicked","trackSecondaryAction"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"mode":[1],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"apiPath":[1,"api-path"],"buttonPressed":[32]},[[0,"vviinnWidgetClose","handleModalClosed"]]]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"locale":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"buttonChildren":[16],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"showingInButton":[4,"showing-in-button"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"campaignType":[1,"campaign-type"],"locale":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"apiPath":[1,"api-path"]}]]]], options);
+  return index.bootstrapLazy([["vviinn-button.cjs",[[1,"vviinn-button",{"addStyle":[4,"add-style"]}]]],["vviinn-preloader.cjs",[[1,"vviinn-preloader"]]],["vviinn-error.cjs",[[1,"vviinn-error"]]],["vviinn-carousel_4.cjs",[[1,"vviinn-vpr-widget",{"blockTitle":[1,"block-title"],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"productId":[1,"product-id"],"token":[1],"currencySign":[1,"currency-sign"],"pricePrefix":[1,"price-prefix"],"mode":[1],"campaignType":[1,"campaign-type"],"locale":[1],"campaigns":[1],"color":[1],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"showScroll":[4,"show-scroll"],"cssUrl":[1,"css-url"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"apiPath":[1,"api-path"],"useCarousel":[4,"use-carousel"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"closed":[4],"opened":[4],"recommendations":[32],"trackingDeactivated":[32],"hasErrorOnLoad":[32],"updatingAllCards":[32]},[[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnAddToBasket","trackAddToBasket"],[0,"vviinnUpdatingAllCardsFinished","updatingAllCardsFinishedListener"]]],[0,"vviinn-carousel",{"mode":[1],"imageWidth":[2,"image-width"],"showScroll":[4,"show-scroll"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"recommendations":[16],"widgetVersion":[1,"widget-version"],"addToBasketShow":[4,"add-to-basket-show"],"updatingAllCards":[4,"updating-all-cards"],"updateButtonLocation":[1,"update-button-location"],"moveDirection":[32],"contentGroups":[32],"activeContentGroup":[32],"isRTL":[32],"crossSellingRecommendations":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-product-card",{"brand":[1],"currency":[1],"deeplink":[1],"image":[1],"imageRatio":[2,"image-ratio"],"imageWidth":[2,"image-width"],"locale":[1],"price":[2],"pricePrefix":[1,"price-prefix"],"productId":[1,"product-id"],"productTitle":[1,"product-title"],"productType":[1,"product-type"],"salePrice":[2,"sale-price"],"responsive":[4],"dimmedBackground":[4,"dimmed-background"],"mode":[1],"addToBasketShow":[4,"add-to-basket-show"],"updateButtonLocation":[1,"update-button-location"],"campaignTypeId":[1,"campaign-type-id"],"widgetElementId":[1,"widget-element-id"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"index":[2],"updatingAllCards":[4,"updating-all-cards"],"defaultAnimationInterval":[2,"default-animation-interval"],"imageLoaded":[32],"isTransitioning":[32]},[[0,"vviinnCrossSellingClick","crossSellingClickListener"]]],[1,"vviinn-skeleton",{"height":[2],"halfWidth":[4,"half-width"]}]]],["search-filters_15.cjs",[[1,"vviinn-image-view",{"basicEventData":[16],"cropper":[32]},[[0,"vviinnSelectObject","selectDetectedObject"]]],[1,"vviinn-overlayed-modal",{"active":[4],"resetState":[16],"buttonElementId":[1,"button-element-id"],"hideBackButton":[4,"hide-back-button"],"widgetVersion":[1,"widget-version"],"isFirstScreen":[4,"is-first-screen"]}],[1,"vviinn-empty-results",{"handler":[16]}],[1,"vviinn-image-selector",{"basicEventData":[16],"startUpload":[4,"start-upload"],"resetVpsButton":[16]}],[1,"vviinn-server-error",{"handler":[16]}],[1,"vviinn-wrong-format",{"handler":[16]}],[1,"search-filters",{"filter":[16],"basicEventData":[16],"selectedFilter":[32],"hideFilters":[32]}],[1,"vviinn-example-image",{"exampleImageSource":[1,"example-image-source"],"width":[2],"height":[2],"basicEventData":[16],"srcObject":[16],"selected":[32],"videoInitialized":[32]}],[1,"vviinn-privacy-badge",{"privacyBadgeText":[1,"privacy-badge-text"]}],[1,"vviinn-slide"],[1,"vviinn-slider",{"showBullets":[4,"show-bullets"],"position":[514],"showArrows":[4,"show-arrows"],"elementsCount":[32],"internalPosition":[32],"swipeStartPosition":[32],"isRTL":[32]}],[1,"vviinn-teaser"],[1,"vviinn-detected-object",{"detectedObject":[16],"basicEventData":[16],"position":[32]}],[1,"vviinn-modal",{"active":[1540],"resetState":[16],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"hideBackButton":[4,"hide-back-button"],"isFirstScreen":[4,"is-first-screen"],"slider":[32]}],[1,"vviinn-overlay"]]],["vviinn-vps-widget.cjs",[[1,"vviinn-vps-widget",{"token":[1],"active":[1028],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"exampleImageSource":[1,"example-image-source"],"apiPath":[1,"api-path"],"showingInButton":[4,"showing-in-button"],"buttonElementId":[1,"button-element-id"],"buttonPressed":[4,"button-pressed"],"mode":[1],"resetVpsButton":[16],"slidePosition":[32],"width":[32],"wrongImageFormat":[32],"trackingDeactivated":[32],"stream":[32],"cameraEnabled":[32]},[[0,"vviinnCameraEnabled","trackCameraEnabled"],[0,"vviinnProductLoad","trackProductLoad"],[0,"vviinnProductView","trackProductView"],[0,"vviinnProductClick","trackProductClick"],[0,"vviinnAuxClick","trackAuxClick"],[0,"vviinnImageCrop","trachSearchAreaChanges"],[0,"vviinnSelectObject","trackDetectedObject"],[0,"vviinnSelectFilter","trackFilter"],[0,"secondaryActionClicked","trackSecondaryAction"]]]]],["vviinn-vps-button.cjs",[[1,"vviinn-vps-button",{"token":[1],"currencySign":[1,"currency-sign"],"locale":[1],"campaignId":[1,"campaign-id"],"addStyle":[4,"add-style"],"mode":[1],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"imageResolutionWidth":[2,"image-resolution-width"],"exampleImageSource":[1,"example-image-source"],"apiPath":[1,"api-path"],"buttonPressed":[32]},[[0,"vviinnWidgetClose","handleModalClosed"]]]]],["vviinn-recommendations-sidebar.cjs",[[1,"vviinn-recommendations-sidebar",{"sidebarTitle":[1,"sidebar-title"],"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"widgetScrollbar":[4,"widget-scrollbar"],"mode":[1],"campaigns":[1],"campaignType":[1,"campaign-type"],"color":[1],"locale":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"buttonChildren":[16],"apiPath":[1,"api-path"],"buttonElementId":[1,"button-element-id"],"widgetVersion":[1,"widget-version"],"showingInButton":[4,"showing-in-button"],"state":[32]},[[16,"click","bodyClickListener"]]]]],["vviinn-vpr-button.cjs",[[1,"vviinn-vpr-button",{"token":[1],"productId":[1,"product-id"],"position":[1],"sourceImage":[1,"source-image"],"sidebarTitle":[1,"sidebar-title"],"modalScrollbar":[4,"modal-scrollbar"],"campaigns":[1],"campaignType":[1,"campaign-type"],"locale":[1],"color":[1],"addStyle":[4,"add-style"],"mode":[1],"imageWidth":[2,"image-width"],"currencySign":[1,"currency-sign"],"noResultText":[1,"no-result-text"],"noResultShow":[4,"no-result-show"],"gridArrowsDynamic":[4,"grid-arrows-dynamic"],"excluded":[1],"productDetailNewTab":[4,"product-detail-new-tab"],"addToBasketShow":[4,"add-to-basket-show"],"apiPath":[1,"api-path"]}]]]], options);
   });
 };
 

package/dist/cjs/{package-bec51a19.js → package-a2950df6.js}

@@ -1,5 +1,5 @@
 'use strict';
 
-const version = "2.34.0";
+const version = "2.35.0";
 
 exports.version = version;

package/dist/cjs/{search-filters_20.cjs.entry.js → search-filters_15.cjs.entry.js}

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5619b5ec.js');
 const imageSearch_store = require('./imageSearch.store-dc4e98b3.js');
 const i18next = require('./i18next-74ff3413.js');
-const customizedSlots = require('./customized-slots-0a8d663c.js');
-const index$1 = require('./index-0547e502.js');
+const index$1 = require('./index-235ee3c0.js');
+const customizedSlots = require('./customized-slots-5bede102.js');
 
 // -------------------------------------------------------------------------------------
 // -------------------------------------------------------------------------------------
@@ -188,19 +188,17 @@ const VviinnDetectedObject = class {
 };
 VviinnDetectedObject.style = vviinnDetectedObjectCss;
 
-const vviinnEmptyResultsCss = ":host{display:grid}vviinn-error{justify-items:center}";
-
 const VviinnEmptyResults = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.handler = undefined;
   }
   render() {
-    return (index.h(index.Host, null, index.h("vviinn-error", null, index.h("svg", { slot: "icon", class: "icon", width: "32", height: "32", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M16 2a14 14 0 1 0 0 28 14 14 0 0 0 0-28Zm0 26a12 12 0 1 1 0-24 12 12 0 0 1 0 24Z", fill: "#525252" }), index.h("path", { d: "M17 8h-2v11h2V8Zm-1 14a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z", fill: "#525252" })), index.h("h4", { slot: "title" }, i18next.instance.t("emptyResultsBlock.title")), index.h("span", { slot: "text" }, i18next.instance.t("emptyResultsBlock.text")))));
+    return (index.h(index.Host, null, index.h("vviinn-error", null, index.h(index$1.WarningIcon, null), index.h("h4", { slot: "title" }, i18next.instance.t("emptyResultsBlock.title")), index.h("button", { slot: "action", onClick: this.handler }, i18next.instance.t("emptyResultsBlock.button")))));
   }
 };
-VviinnEmptyResults.style = vviinnEmptyResultsCss;
 
-const vviinnExampleImageCss = ":host{display:block;margin-bottom:8px;position:relative}:host(:focus){border:2px solid var(--color-primary)}img{width:100%;height:auto;cursor:pointer}.image-preloader{background:rgba(0, 0, 0, 0.25);border-radius:4px;bottom:12px;display:none;padding:4px 6px;position:absolute;right:12px;z-index:4}vviinn-preloader{--preloader-size:12px}@media (max-width: 640px){.image-preloader{display:block}}";
+const vviinnExampleImageCss = ":host{display:block;width:100%;height:100%;position:relative;overflow:hidden;flex-grow:1;transition:height 0.6s ease-in-out}img{width:100%;height:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}video{width:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.example-button{cursor:pointer;padding:4px;border-radius:50%;border:2px solid white;position:absolute;bottom:26px;left:calc(50% - 36px);background-color:transparent;line-height:0;opacity:0.6}.hidden{display:none}";
 
 const VviinnExampleImage = class {
   constructor(hostRef) {
@@ -208,63 +206,66 @@ const VviinnExampleImage = class {
     this.vviinnImageUpload = index.createEvent(this, "vviinnImageUpload", 7);
     this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
     this.vviinnImageUploadFinished = index.createEvent(this, "vviinnImageUploadFinished", 7);
-    this.src = "";
+    this.vviinnCameraEnabled = index.createEvent(this, "vviinnCameraEnabled", 7);
+    this.exampleImageSource = undefined;
     this.width = 0;
     this.height = 0;
     this.basicEventData = undefined;
+    this.srcObject = undefined;
     this.selected = false;
+    this.videoInitialized = false;
+  }
+  componentDidLoad() {
+    this.videoElement = this.el.shadowRoot.getElementById("camera-preview");
   }
   async selectImage() {
     this.selected = true;
     this.vviinnImageUpload.emit(this.basicEventData);
-    const file = await imageSearch_store.toFile(this.src);
-    const processResult = await imageSearch_store.processSelectedFile(file);
-    imageSearch_store._function.pipe(processResult, imageSearch_store.Either.match(() => this.vviinnNoResult.emit(this.basicEventData), () => this.vviinnImageUploadFinished.emit()));
+    let file;
+    if (this.srcObject) {
+      const video = this.videoElement;
+      const canvas = document.createElement("canvas");
+      this.videoElement.pause();
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      const dataURI = canvas.toDataURL("image/jpeg");
+      file = await imageSearch_store.toFile(dataURI);
+    }
+    else {
+      file = await imageSearch_store.toFile(this.exampleImageSource);
+    }
+    imageSearch_store._function.pipe(await imageSearch_store.processSelectedFile(file), imageSearch_store.Either.match(() => this.vviinnNoResult.emit(this.basicEventData), () => this.vviinnImageUploadFinished.emit()));
     this.selected = false;
+    this.videoInitialized = false;
+    this.vviinnCameraEnabled.emit(false);
   }
   handleKeyPress({ key }) {
     if (key !== "Enter" && key !== " ")
       return;
     this.selectImage();
   }
-  showPreloader() {
-    return ((imageSearch_store.imageSearchState.objectDetectionInProgress ||
-      imageSearch_store.imageSearchState.loading) &&
-      this.selected);
-  }
-  render() {
-    return (index.h(index.Host, { onClick: () => this.selectImage(), onKeyUp: (ev) => this.handleKeyPress(ev) }, this.showPreloader() ? (index.h("div", { class: "image-preloader" }, index.h("vviinn-preloader", null))) : null, index.h("img", { src: this.src, width: this.width, height: this.height, tabindex: 1 })));
-  }
-};
-VviinnExampleImage.style = vviinnExampleImageCss;
-
-const vviinnExampleImagesCss = "h3{font-size:22px;font-weight:600;line-height:32px;margin:0;margin-bottom:16px;text-align:center}.images{display:block;-moz-column-count:2;column-count:2;-moz-column-gap:16px;column-gap:16px}";
-
-const VviinnExampleImages = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.vviinnImageUpload = index.createEvent(this, "vviinnImageUpload", 7);
-    this.vviinnNoResult = index.createEvent(this, "vviinnNoResult", 7);
-    this.vviinnImageUploadFinished = index.createEvent(this, "vviinnImageUploadFinished", 7);
-    this.basicEventData = undefined;
-    this.exampleImagesTitle = undefined;
-  }
-  componentWillLoad() {
-    customizedSlots.slotChangeListener(this, this.el);
-  }
-  delegateFocus() {
-    const firstSlot = this.imagesBlock.childNodes[0];
-    const firstExampleImage = firstSlot.childNodes[0];
-    firstExampleImage.focus();
+  handleSrcObjectChange() {
+    if (!this.srcObject)
+      return;
+    this.videoElement.srcObject = this.srcObject;
+    this.videoElement.onloadedmetadata = () => {
+      this.vviinnCameraEnabled.emit(true);
+      this.videoInitialized = true;
+    };
   }
   render() {
-    return (index.h(index.Host, { onFocus: () => this.delegateFocus() }, index.h("slot", { name: "vviinn-example-images-title" }, index.h("h3", null, this.exampleImagesTitle)), index.h("div", { class: "images", ref: (el) => (this.imagesBlock = el) }, index.h("slot", { name: "vviinn-example-images-1" }, index.h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDEtTC5qcGc=", basicEventData: this.basicEventData })), index.h("slot", { name: "vviinn-example-images-2" }, index.h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDItTS5qcGc=", basicEventData: this.basicEventData })), index.h("slot", { name: "vviinn-example-images-3" }, index.h("vviinn-example-image", { width: 280, height: 480, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDMtTS5qcGc=", basicEventData: this.basicEventData })), index.h("slot", { name: "vviinn-example-images-4" }, index.h("vviinn-example-image", { width: 480, height: 640, src: "https://cdn.vviinn.com/0/fit/480/0/ce/0/Z3M6Ly9haWFhcy1pbWdwcm94eS9leGFtcGxlcy9pbWctaW5zcGlyYXRpb24tMDQtTC5qcGc=", basicEventData: this.basicEventData })))));
+    return (index.h(index.Host, { onKeyUp: (ev) => this.handleKeyPress(ev) }, index.h("video", { id: "camera-preview", class: { hidden: !this.videoInitialized }, autoplay: true, playsinline: true, muted: true }), index.h("img", { src: this.exampleImageSource, width: this.width, height: this.height, tabindex: 1, class: { hidden: this.videoInitialized } }), index.h("button", { class: { "example-button": true, hidden: !this.videoInitialized }, onClick: () => this.selectImage() }, index.h(index$1.RoundCameraIcon, null))));
   }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "srcObject": ["handleSrcObjectChange"]
+  }; }
 };
-VviinnExampleImages.style = vviinnExampleImagesCss;
+VviinnExampleImage.style = vviinnExampleImageCss;
 
-const vviinnImageSelectorCss = ":host{display:block}:host(::hover){background:whitesmoke}.visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);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}";
+const vviinnImageSelectorCss = ".visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);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}";
 
 const VviinnImageSelector = class {
   constructor(hostRef) {
@@ -280,7 +281,7 @@ const VviinnImageSelector = class {
     this.vviinnImageUpload.emit(this.basicEventData);
     const input = event.target;
     const processingResult = await imageSearch_store.processSelectedFile(input.files[0]);
-    imageSearch_store._function.pipe(processingResult, imageSearch_store.match$1(() => this.vviinnNoResult.emit(this.basicEventData), () => this.vviinnImageUploadFinished.emit()));
+    imageSearch_store._function.pipe(processingResult, imageSearch_store.match$1(({ kind }) => this.vviinnNoResult.emit(Object.assign(Object.assign({}, this.basicEventData), { reason: kind })), () => this.vviinnImageUploadFinished.emit()));
     input.value = null;
   }
   isLoading() {
@@ -293,7 +294,7 @@ const VviinnImageSelector = class {
     }
   }
   render() {
-    return (index.h(index.Host, { exportparts: "button" }, this.isLoading() ? index.h("vviinn-preloader", null) : null, this.isLoading() ? null : (index.h("label", { htmlFor: "fileInput", part: "button" }, index.h("slot", { name: "upload-button-text" }, "Upload image"))), index.h("input", { id: "fileInput", class: "visually-hidden", type: "file", accept: "image/*", onChange: (event) => this.handleInputChange(event), ref: (el) => (this.fileInput = el) })));
+    return (index.h(index.Host, { exportparts: "button" }, this.isLoading() ? (index.h("vviinn-preloader", null)) : (index.h("label", { htmlFor: "fileInput", part: "button" }, index.h("slot", { name: "upload-button-text" }, "Upload image"))), index.h("input", { id: "fileInput", class: "visually-hidden", type: "file", accept: "image/*", onChange: (event) => this.handleInputChange(event), ref: (el) => (this.fileInput = el) })));
   }
   static get watchers() { return {
     "startUpload": ["startUploadWatcher"]
@@ -3560,7 +3561,7 @@ var cropper = imageSearch_store.createCommonjsModule(function (module, exports)
 }));
 });
 
-const vviinnImageViewCss = ":host {\n  display: grid;\n  position: relative;\n  justify-self: center;\n  direction: ltr;\n}\n\n.image-container > img {\n  display: block;\n  max-width: 100%;\n}\n\n.image-preloader {\n  background: rgba(0, 0, 0, 0.25);\n  border-radius: 4px;\n  bottom: 18px;\n  padding: 4px 6px;\n  pointer-events: none;\n  position: absolute;\n  right: 18px;\n  z-index: 4;\n}\nvviinn-preloader {\n  --preloader-size: 12px;\n}\n\n.cropper-container {\n  direction: ltr;\n  font-size: 0;\n  line-height: 0;\n  position: relative;\n  touch-action: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n\n  & img {\n    backface-visibility: hidden;\n    display: block;\n    height: 100%;\n    image-orientation: 0deg;\n    max-height: none !important;\n    max-width: none !important;\n    min-height: 0 !important;\n    min-width: 0 !important;\n    width: 100%;\n  }\n}\n\n.cropper-wrap-box,\n.cropper-canvas,\n.cropper-drag-box,\n.cropper-crop-box,\n.cropper-modal {\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.cropper-wrap-box,\n.cropper-canvas {\n  overflow: hidden;\n}\n\n.cropper-drag-box {\n  background-color: #fff;\n  opacity: 0;\n}\n\n.cropper-modal {\n  background-color: #000;\n  opacity: 0.4;\n}\n\n.cropper-view-box {\n  display: block;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n}\n\n.cropper-face,\n.cropper-point {\n  display: block;\n  height: 100%;\n  opacity: 0.1;\n  position: absolute;\n  width: 100%;\n}\n\n.cropper-face {\n  background-color: #fff;\n  left: 0;\n  top: 0;\n}\n\n.cropper-point {\n  height: 30px;\n  width: 30px;\n  opacity: 1;\n}\n\n.point-e,\n.point-s,\n.point-w,\n.point-n {\n  display: none;\n}\n\n.point-ne {\n  cursor: nesw-resize;\n  right: -15px;\n  top: -15px;\n}\n\n.point-nw {\n  cursor: nwse-resize;\n  left: -15px;\n  top: -15px;\n}\n\n.point-sw {\n  bottom: -15px;\n  cursor: nesw-resize;\n  left: -15px;\n}\n\n.point-se {\n  bottom: -15px;\n  cursor: nwse-resize;\n  right: -15px;\n}\n\n.cropper-point::before {\n  position: absolute;\n  content: url(\"data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 2L26 22C26 24.2091 24.2091 26 22 26L2 26' stroke='white' stroke-width='4' stroke-linecap='square'/%3E%3C/svg%3E\");\n  display: block;\n  poiter-events: none;\n}\n\n.point-ne::before {\n  transform: rotate(-90deg);\n  left: -11px;\n  top: 13px;\n}\n\n.point-nw::before {\n  transform: rotate(180deg);\n  left: 13px;\n  top: 13px;\n}\n\n.point-sw::before {\n  transform: rotate(90deg);\n  left: 13px;\n  top: -11px;\n}\n\n.point-se::before {\n  left: -11px;\n  top: -11px;\n}\n\n.cropper-invisible {\n  opacity: 0;\n}\n\n.cropper-hide {\n  display: block;\n  height: 0;\n  position: absolute;\n  width: 0;\n}\n\n.cropper-hidden {\n  display: none !important;\n}\n\n.cropper-move {\n  cursor: move;\n}\n\n.cropper-crop {\n  cursor: crosshair;\n}\n\n.cropper-disabled .cropper-drag-box,\n.cropper-disabled .cropper-face,\n.cropper-disabled .cropper-line,\n.cropper-disabled .cropper-point {\n  cursor: not-allowed;\n}\n";
+const vviinnImageViewCss = ":host {\n  display: grid;\n  position: relative;\n  justify-self: center;\n  direction: ltr;\n}\n\n.image-container > img {\n  display: block;\n  max-width: 100%;\n}\n\n.image-preloader {\n  background: rgba(0, 0, 0, 0.25);\n  border-radius: 4px;\n  bottom: 18px;\n  padding: 4px 6px;\n  pointer-events: none;\n  color: white;\n  position: absolute;\n  right: 18px;\n  z-index: 4;\n}\nvviinn-preloader {\n  --preloader-size: 12px;\n}\n\n.cropper-container {\n  direction: ltr;\n  font-size: 0;\n  line-height: 0;\n  position: relative;\n  touch-action: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n\n  & img {\n    backface-visibility: hidden;\n    display: block;\n    height: 100%;\n    image-orientation: 0deg;\n    max-height: none !important;\n    max-width: none !important;\n    min-height: 0 !important;\n    min-width: 0 !important;\n    width: 100%;\n  }\n}\n\n.cropper-wrap-box,\n.cropper-canvas,\n.cropper-drag-box,\n.cropper-crop-box,\n.cropper-modal {\n  bottom: 0;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.cropper-wrap-box,\n.cropper-canvas {\n  overflow: hidden;\n}\n\n.cropper-drag-box {\n  background-color: #fff;\n  opacity: 0;\n}\n\n.cropper-modal {\n  background-color: #000;\n  opacity: 0.4;\n}\n\n.cropper-view-box {\n  display: block;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n}\n\n.cropper-face,\n.cropper-point {\n  display: block;\n  height: 100%;\n  opacity: 0.1;\n  position: absolute;\n  width: 100%;\n}\n\n.cropper-face {\n  background-color: #fff;\n  left: 0;\n  top: 0;\n}\n\n.cropper-point {\n  height: 30px;\n  width: 30px;\n  opacity: 1;\n}\n\n.point-e,\n.point-s,\n.point-w,\n.point-n {\n  display: none;\n}\n\n.point-ne {\n  cursor: nesw-resize;\n  right: -15px;\n  top: -15px;\n}\n\n.point-nw {\n  cursor: nwse-resize;\n  left: -15px;\n  top: -15px;\n}\n\n.point-sw {\n  bottom: -15px;\n  cursor: nesw-resize;\n  left: -15px;\n}\n\n.point-se {\n  bottom: -15px;\n  cursor: nwse-resize;\n  right: -15px;\n}\n\n.cropper-point::before {\n  position: absolute;\n  content: url(\"data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 2L26 22C26 24.2091 24.2091 26 22 26L2 26' stroke='white' stroke-width='4' stroke-linecap='square'/%3E%3C/svg%3E\");\n  display: block;\n  poiter-events: none;\n}\n\n.point-ne::before {\n  transform: rotate(-90deg);\n  left: -11px;\n  top: 13px;\n}\n\n.point-nw::before {\n  transform: rotate(180deg);\n  left: 13px;\n  top: 13px;\n}\n\n.point-sw::before {\n  transform: rotate(90deg);\n  left: 13px;\n  top: -11px;\n}\n\n.point-se::before {\n  left: -11px;\n  top: -11px;\n}\n\n.cropper-invisible {\n  opacity: 0;\n}\n\n.cropper-hide {\n  display: block;\n  height: 0;\n  position: absolute;\n  width: 0;\n}\n\n.cropper-hidden {\n  display: none !important;\n}\n\n.cropper-move {\n  cursor: move;\n}\n\n.cropper-crop {\n  cursor: crosshair;\n}\n\n.cropper-disabled .cropper-drag-box,\n.cropper-disabled .cropper-face,\n.cropper-disabled .cropper-line,\n.cropper-disabled .cropper-point {\n  cursor: not-allowed;\n}\n";
 
 const INITIAL_CROP_AREA = 0.91;
 const INITIAL_CROP_AREA_OFFSET = 1 - INITIAL_CROP_AREA;
@@ -3679,7 +3680,7 @@ const VviinnImageView = class {
 };
 VviinnImageView.style = vviinnImageViewCss;
 
-const vviinnModalCss = ":host{background:white;border-radius:4px;box-sizing:border-box;display:grid;grid-template-rows:min-content auto;max-width:960px;overflow:auto}@media (max-width: 768px){:host{animation-name:fade-in;animation-duration:0.5s;animation-fill-mode:forwards}:host(.closed){animation-name:fade-out;animation-fill-mode:none}.body{overflow-y:auto}}.head{display:flex;align-items:center;border-bottom:1px solid #f4f4f4;padding:16px}.title{display:flex;align-items:center;transform:translateX(-6px);font-weight:600;font-size:18px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:4px;color:#c6c6c6}button:hover{color:#000}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";
+const vviinnModalCss = ":host{background:white;border-radius:24px;box-sizing:border-box;display:grid;grid-template-rows:min-content auto;max-width:960px;overflow:auto;position:relative}.head{position:absolute;width:100%;box-sizing:border-box;display:flex;align-items:center;z-index:1;padding:14px}@media (max-width: 768px){:host{animation-name:fade-in;animation-duration:0.5s;animation-fill-mode:forwards;border-radius:24px 24px 0 0}:host(.closed){animation-name:fade-out;animation-fill-mode:none}.head{position:sticky;z-index:1}:host(:not(.first-screen)) .head{background-color:white}.body{overflow-y:auto}:host(.first-screen) .body{transform:translateY(-64px)}:host(:not(.first-screen)) .body{padding-bottom:64px}}.title{display:flex;align-items:center;transform:translateX(-6px);font-weight:600;font-size:18px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:6px;color:#525252}button:hover{color:#000}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";
 
 const VviinnModal = class {
   constructor(hostRef) {
@@ -3691,11 +3692,16 @@ const VviinnModal = class {
     this.buttonElementId = undefined;
     this.widgetVersion = undefined;
     this.hideBackButton = false;
+    this.isFirstScreen = undefined;
     this.slider = false;
   }
   componentWillLoad() {
     customizedSlots.slotChangeListener(this, this.el);
   }
+  resetTopScroll() {
+    const element = this.el.shadowRoot.querySelector(".body");
+    element.scroll({ top: 0 });
+  }
   close() {
     this.active = false;
     setTimeout(() => {
@@ -3720,8 +3726,9 @@ const VviinnModal = class {
     }), imageSearch_store.Option.getOrElse(() => null));
   }
   render() {
-    return (index.h(index.Host, { exportparts: "secondary-action, title, close-button", class: { closed: !this.active }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, index.h("div", { class: "head" }, !this.hideBackButton && (index.h("button", { part: "secondary-action", onClick: () => {
+    return (index.h(index.Host, { exportparts: "secondary-action, title, close-button", class: { closed: !this.active, "first-screen": this.isFirstScreen }, onAnimationEnd: (ev) => this.handleAnimationEnd(ev) }, index.h("div", { class: "head" }, !this.hideBackButton && (index.h("button", { part: "secondary-action", onClick: () => {
         this.resetState();
+        this.resetTopScroll();
         this.secondaryActionClicked.emit();
       } }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M20.25 12H3.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M10.5 5.25L3.75 12L10.5 18.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("div", { class: "title", part: "title" }, this.renderImage(), index.h("slot", { name: "vviinn-image-search-modal-title" }, i18next.instance.t("imageSearchModalTitle"))), index.h("button", { onClick: () => this.close(), class: "close-button", part: "close-button" }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z", fill: "currentColor" })))), index.h("div", { class: "body" }, index.h("slot", null))));
   }
@@ -3729,76 +3736,6 @@ const VviinnModal = class {
 };
 VviinnModal.style = vviinnModalCss;
 
-const vviinnOnboardingCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}::host{display:block}h3{font-size:22px;font-weight:600;line-height:32px;margin:0;margin-bottom:16px;text-align:center}vviinn-slide{background:#f4f4f4;padding:24px}svg{padding:16px 0}.text{display:grid;grid-gap:8px}.text>h4{color:#161616;font-size:18px;font-weight:600;line-height:24px;margin:unset;text-align:center}.text>p{color:#525252;font-size:14px;font-style:normal;font-weight:normal;line-height:20px;margin:unset;text-align:center}.colored{fill:var(--color-icons, var(--color-icons-system))}";
-
-const VviinnOnboarding = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  componentWillLoad() {
-    customizedSlots.slotChangeListener(this, this.el);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "vviinn-onboarding-title" }, index.h("h3", null, i18next.instance.t("onboardingBlock.onboardingTitleText"))), index.h("vviinn-slider", { showArrows: true }, index.h("vviinn-slide", null, index.h("vviinn-onboarding-card-1", { cardTitle: i18next.instance.t("onboardingBlock.onboardingCard1.title"), cardText: i18next.instance.t("onboardingBlock.onboardingCard1.text") })), index.h("vviinn-slide", null, index.h("vviinn-onboarding-card-2", { cardTitle: i18next.instance.t("onboardingBlock.onboardingCard2.title"), cardText: i18next.instance.t("onboardingBlock.onboardingCard2.text") })), index.h("vviinn-slide", null, index.h("vviinn-onboarding-card-3", { cardTitle: i18next.instance.t("onboardingBlock.onboardingCard3.title"), cardText: i18next.instance.t("onboardingBlock.onboardingCard3.text") })))));
-  }
-  get el() { return index.getElement(this); }
-};
-VviinnOnboarding.style = vviinnOnboardingCss;
-
-const onboardingCardCss$2 = ":host{align-items:center;background:#f4f4f4;display:grid;grid-template-rows:repeat(2, 1fr);justify-items:center;padding:24px;width:100%}h4{color:#161616;font-size:18px;font-weight:600;line-height:24px;margin:unset;text-align:center}svg{padding:16px 0}p{color:#525252;font-size:14px;font-style:normal;font-weight:normal;line-height:20px;margin:unset;text-align:center}.colored{fill:var(--color-icons, var(--color-icons-system))}.text{display:grid;grid-gap:8px}";
-
-const VviinnOnboardingCard1 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.cardTitle = undefined;
-    this.cardText = undefined;
-  }
-  componentWillLoad() {
-    customizedSlots.slotChangeListener(this, this.el);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "onboarding-card-1-icon" }, index.h(index$1.OnboardingCard1Icon, null)), index.h("slot", { name: "onboarding-card-1-text" }, index.h("div", { class: "text" }, index.h("h4", null, this.cardTitle), index.h("p", null, this.cardText)))));
-  }
-  get el() { return index.getElement(this); }
-};
-VviinnOnboardingCard1.style = onboardingCardCss$2;
-
-const onboardingCardCss$1 = ":host{align-items:center;background:#f4f4f4;display:grid;grid-template-rows:repeat(2, 1fr);justify-items:center;padding:24px;width:100%}h4{color:#161616;font-size:18px;font-weight:600;line-height:24px;margin:unset;text-align:center}svg{padding:16px 0}p{color:#525252;font-size:14px;font-style:normal;font-weight:normal;line-height:20px;margin:unset;text-align:center}.colored{fill:var(--color-icons, var(--color-icons-system))}.text{display:grid;grid-gap:8px}";
-
-const VviinnOnboardingCard2 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.cardTitle = undefined;
-    this.cardText = undefined;
-  }
-  componentWillLoad() {
-    customizedSlots.slotChangeListener(this, this.el);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "onboarding-card-2-icon" }, index.h(index$1.OnboardingCard2Icon, null)), index.h("slot", { name: "onboarding-card-2-text" }, index.h("div", { class: "text" }, index.h("h4", null, this.cardTitle), index.h("p", null, this.cardText)))));
-  }
-  get el() { return index.getElement(this); }
-};
-VviinnOnboardingCard2.style = onboardingCardCss$1;
-
-const onboardingCardCss = ":host{align-items:center;background:#f4f4f4;display:grid;grid-template-rows:repeat(2, 1fr);justify-items:center;padding:24px;width:100%}h4{color:#161616;font-size:18px;font-weight:600;line-height:24px;margin:unset;text-align:center}svg{padding:16px 0}p{color:#525252;font-size:14px;font-style:normal;font-weight:normal;line-height:20px;margin:unset;text-align:center}.colored{fill:var(--color-icons, var(--color-icons-system))}.text{display:grid;grid-gap:8px}";
-
-const VviinnOnboardingCard3 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.cardTitle = undefined;
-    this.cardText = undefined;
-  }
-  componentWillLoad() {
-    customizedSlots.slotChangeListener(this, this.el);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "onboarding-card-3-icon" }, index.h(index$1.OnboardingCard3Icon, null)), index.h("slot", { name: "onboarding-card-3-text" }, index.h("div", { class: "text" }, index.h("h4", null, this.cardTitle), index.h("p", null, this.cardText)))));
-  }
-  get el() { return index.getElement(this); }
-};
-VviinnOnboardingCard3.style = onboardingCardCss;
-
 const vviinnOverlayCss = ":host{animation:fade-in 0.5s ease-in-out;background:rgba(0, 0, 0, 0.5);display:block;height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100vw;z-index:9999}@keyframes fade-in{from{opacity:0.1}to{opacity:1}}";
 
 const VviinnOverlay = class {
@@ -3811,7 +3748,7 @@ const VviinnOverlay = class {
 };
 VviinnOverlay.style = vviinnOverlayCss;
 
-const vviinnOverlayedModalCss = ":host{display:none}:host(.active){display:block}vviinn-overlay{align-items:center;display:grid;justify-items:center;cursor:default}vviinn-modal{margin-left:24px;margin-right:24px}@media (max-width: 768px){vviinn-modal{border-radius:4px 4px 0 0;height:100vh;margin-top:32px;transform:translateY(100%);width:100vw;margin-left:0;margin-right:0}vviinn-overlay{align-items:end;display:grid;justify-items:center}}";
+const vviinnOverlayedModalCss = ":host{display:none}:host(.active){display:block}vviinn-overlay{align-items:center;display:grid;justify-items:center;cursor:default}vviinn-modal{margin-left:24px;margin-right:24px}@media (max-width: 768px){vviinn-modal{height:100vh;height:100svh;margin-top:64px;transform:translateY(100%);width:100vw;margin-left:0;margin-right:0}vviinn-overlay{align-items:end;display:grid;justify-items:center}}";
 
 const VviinnOverlayedModal = class {
   constructor(hostRef) {
@@ -3822,14 +3759,15 @@ const VviinnOverlayedModal = class {
     this.buttonElementId = undefined;
     this.hideBackButton = false;
     this.widgetVersion = undefined;
+    this.isFirstScreen = undefined;
   }
   render() {
-    return (index.h(index.Host, { class: { active: this.active } }, index.h("vviinn-overlay", null, index.h("vviinn-modal", { resetState: this.resetState, active: this.active, buttonElementId: this.buttonElementId, hideBackButton: this.hideBackButton, widgetVersion: this.widgetVersion }, index.h("slot", null, "CONTENT")))));
+    return (index.h(index.Host, { class: { active: this.active } }, index.h("vviinn-overlay", null, index.h("vviinn-modal", { resetState: this.resetState, active: this.active, buttonElementId: this.buttonElementId, hideBackButton: this.hideBackButton, widgetVersion: this.widgetVersion, isFirstScreen: this.isFirstScreen }, index.h("slot", null, "CONTENT")))));
   }
 };
 VviinnOverlayedModal.style = vviinnOverlayedModalCss;
 
-const vviinnPrivacyBadgeCss = ":host{display:block;background:#F4F4F4;padding:17px}.content{display:grid;grid-template-columns:min-content auto;grid-gap:9px}.content p{color:#525252;font-size:12px;line-height:16px;margin:unset}";
+const vviinnPrivacyBadgeCss = ":host{color:#525252;font-size:12px;line-height:16px}:host(.visible){color:transparent}@media (max-width: 768px){:host(.visible){display:none}}";
 
 const VviinnPrivacyBadge = class {
   constructor(hostRef) {
@@ -3840,24 +3778,21 @@ const VviinnPrivacyBadge = class {
     customizedSlots.slotChangeListener(this, this.el);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", null, index.h("div", { class: "content" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" }, index.h("defs", null), index.h("path", { fill: "#525252", d: "M8.5 11V7h-2v1h1v3H6v1h4v-1H8.5zM8 4a.75.75 0 100 1.5A.75.75 0 008 4z" }), index.h("path", { fill: "#525252", d: "M8 15A7 7 0 118 1a7 7 0 010 14zM8 2a6 6 0 100 12A6 6 0 008 2z" })), index.h("slot", { name: "vviinn-privacy-badge-text" }, index.h("p", null, this.privacyBadgeText))))));
+    return (index.h(index.Host, null, index.h("slot", { name: "vviinn-privacy-badge-text" }, index.h("div", null, this.privacyBadgeText))));
   }
   get el() { return index.getElement(this); }
 };
 VviinnPrivacyBadge.style = vviinnPrivacyBadgeCss;
 
-const vviinnServerErrorCss = ":host{display:block}";
-
 const VviinnServerError = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.handler = undefined;
   }
   render() {
-    return (index.h(index.Host, null, index.h("vviinn-error", null, index.h("h4", { slot: "title" }, "Keine Verbindung"), index.h("span", { slot: "text" }, "Etwas hat leider nicht funktioniert. Bitte pr\u00FCfen Sie Ihre Internetverbindung und laden Sie das Bild noch einmal hoch."), index.h("button", { slot: "action", onClick: this.handler }, "Erneut versuchen"))));
+    return (index.h(index.Host, null, index.h("vviinn-error", null, index.h(index$1.WarningIcon, null), index.h("h4", { slot: "title" }, i18next.instance.t("serverErrorBlock.title")), index.h("button", { slot: "action", onClick: this.handler }, i18next.instance.t("serverErrorBlock.button")))));
   }
 };
-VviinnServerError.style = vviinnServerErrorCss;
 
 const vviinnSlideCss = ":host{display:grid;justify-items:center}";
 
@@ -3993,7 +3928,7 @@ const VviinnSlider = class {
 };
 VviinnSlider.style = vviinnSliderCss;
 
-const vviinnTeaserCss = ":host{align-items:center;display:grid;justify-items:center;grid-gap:16px}.vviinn-teaser-text{font-size:28px;font-weight:600;line-height:40px;size:28px;text-align:center}";
+const vviinnTeaserCss = ":host{align-items:center;display:grid;justify-items:center;grid-gap:16px}.vviinn-teaser-text{font-size:22px;font-weight:600;line-height:28px;text-align:center;white-space:pre-line}";
 
 const VviinnTeaser = class {
   constructor(hostRef) {
@@ -4003,37 +3938,29 @@ const VviinnTeaser = class {
     customizedSlots.slotChangeListener(this, this.el);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", null, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "64", fill: "none" }, index.h("defs", null), index.h("path", { fill: "#C6C6C6", d: "M48 28a11.98 11.98 0 00-9.77 18.942L28 57.172 30.828 60l10.23-10.23A11.994 11.994 0 1048 28zm0 20a8 8 0 118-8 8.009 8.009 0 01-8 8zM34 24a6 6 0 10-6-6 6.006 6.006 0 006 6zm0-8a2 2 0 110 4 2 2 0 010-4z" }), index.h("path", { fill: "#C6C6C6", d: "M24 48H8V35.993L18 26l11.172 11.172L32 34.336 20.828 23.165a4 4 0 00-5.656 0L8 30.336V8h40v12h4V8a4.004 4.004 0 00-4-4H8a4.004 4.004 0 00-4 4v40a4.005 4.005 0 004 4h16v-4z" })), index.h("span", { class: "vviinn-teaser-text" }, index.h("slot", { name: "vviinn-teaser-text" }, i18next.instance.t("teaserText_1"), index.h("br", null), i18next.instance.t("teaserText_2"))))));
+    return (index.h(index.Host, null, index.h("slot", null, index.h("span", { class: "vviinn-teaser-text" }, index.h("slot", { name: "vviinn-teaser-text" }, i18next.instance.t("teaserText"))))));
   }
   get el() { return index.getElement(this); }
 };
 VviinnTeaser.style = vviinnTeaserCss;
 
-const vviinnWrongFormatCss = ":host{display:block}";
-
 const VviinnWrongFormat = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.handler = undefined;
   }
   render() {
-    return (index.h(index.Host, null, index.h("vviinn-error", null, index.h("h4", { slot: "title" }, "Dateityp wird nicht unterst\u00FCtzt"), index.h("span", { slot: "text" }, "Leider unterst\u00FCtzen wir dieses Format nicht. Bitte laden Sie eine .jpg, .png oder .webp Bilddatei hoch."), index.h("button", { slot: "action", onClick: this.handler }, "Neues Bild hochladen"))));
+    return (index.h(index.Host, null, index.h("vviinn-error", null, index.h(index$1.WarningIcon, null), index.h("h4", { slot: "title" }, i18next.instance.t("wrongFormatBlock.title")), index.h("span", { slot: "text" }, i18next.instance.t("wrongFormatBlock.text")), index.h("button", { slot: "action", onClick: this.handler }, i18next.instance.t("wrongFormatBlock.button")))));
   }
 };
-VviinnWrongFormat.style = vviinnWrongFormatCss;
 
 exports.search_filters = SearchFilters;
 exports.vviinn_detected_object = VviinnDetectedObject;
 exports.vviinn_empty_results = VviinnEmptyResults;
 exports.vviinn_example_image = VviinnExampleImage;
-exports.vviinn_example_images = VviinnExampleImages;
 exports.vviinn_image_selector = VviinnImageSelector;
 exports.vviinn_image_view = VviinnImageView;
 exports.vviinn_modal = VviinnModal;
-exports.vviinn_onboarding = VviinnOnboarding;
-exports.vviinn_onboarding_card_1 = VviinnOnboardingCard1;
-exports.vviinn_onboarding_card_2 = VviinnOnboardingCard2;
-exports.vviinn_onboarding_card_3 = VviinnOnboardingCard3;
 exports.vviinn_overlay = VviinnOverlay;
 exports.vviinn_overlayed_modal = VviinnOverlayedModal;
 exports.vviinn_privacy_badge = VviinnPrivacyBadge;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5619b5ec.js');
-const index$1 = require('./index-0547e502.js');
+const index$1 = require('./index-235ee3c0.js');
 
 const vviinnButtonCss = ":host{display:block}.open-button{align-items:center;background:rgba(255, 255, 255, 0.8);border-radius:50%;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);box-sizing:border-box;cursor:pointer;display:grid;height:40px;justify-items:center;padding:0;width:40px;transition:all 0.25s ease-in-out}.raw-open-button{background:none;border:none;cursor:pointer}.open-button:hover{box-shadow:0px 2px 6px rgba(0, 0, 0, 0.25)}.open-button:focus{border:2px solid rgba(15, 98, 254, 0.5);outline:none}.open-button:active{background:#f4f4f4;outline:none}";
 

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

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5619b5ec.js');
 const imageSearch_store = require('./imageSearch.store-dc4e98b3.js');
-const index$1 = require('./index-0547e502.js');
+const index$1 = require('./index-235ee3c0.js');
 const i18next = require('./i18next-74ff3413.js');
-const customizedSlots = require('./customized-slots-0a8d663c.js');
-const _package = require('./package-bec51a19.js');
+const customizedSlots = require('./customized-slots-5bede102.js');
+const _package = require('./package-a2950df6.js');
 const index$2 = require('./index-7ff2ab5f.js');
 
 const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-item-width:150px;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4);--vviinn-carousel-image-width-system:140px}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.content-wrapper *{box-sizing:border-box}.content-wrapper{overflow-y:hidden;overflow-x:auto;flex-grow:1}.bullets{margin-top:16px;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:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}.content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}.content{display:flex;flex-direction:row;grid-gap:8px;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.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}.next:disabled,.prev: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%}vviinn-product-card::part(price-container){text-align:center}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}@media (max-width: 480px){:host(.modern) button{display:none}.items-group{grid-template-columns:repeat(2, 1fr)}}";

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5619b5ec.js');
 
-const vviinnErrorCss = ":host{background:#F4F4F4;border-radius:8px;display:grid;grid-gap:20px;padding:24px;text-align:center}::slotted(svg){display:grid;align-self:center}::slotted(h4){margin:unset;font-weight:600;font-size:18px;line-height:24px}::slotted(span){font-size:14px;line-height:20px}::slotted(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--color-primary, var(--color-primary-system));font-weight:600;font-size:16px;line-height:20px;cursor:pointer}";
+const vviinnErrorCss = ":host{background:#f4f4f4;border-radius:8px;display:grid;grid-gap:20px;padding:24px;text-align:center;justify-items:center}::slotted(svg){display:grid;align-self:center}::slotted(h4){margin:unset;font-weight:600;font-size:18px;line-height:24px}::slotted(span){font-size:14px;line-height:20px}::slotted(button){-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--color-primary, var(--color-primary-system));font-weight:600;font-size:16px;line-height:20px;cursor:pointer}";
 
 const VviinnError = class {
   constructor(hostRef) {