@crystaldesign/diva-web-planner-react 26.8.0-beta.17 → 26.8.0-beta.19

package/build/esm/UnlockCard-def953e7.js

@@ -0,0 +1,216 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject } from './index-cef0fc63.js';
+import { useState, useEffect } from 'react';
+import { useTranslation, DivaUtils } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var container = "container-uvLa8";
+var emptyText = "emptyText-k7-1y";
+var headline = "headline-VRP8M";
+var subheadline = "subheadline-aM8S8";
+var styleSelection = "styleSelection-iOIY2";
+var styleDescriptionText = "styleDescriptionText-XEUG7";
+var styleButtonsSwiper = "styleButtonsSwiper-zhnww";
+var styleButton = "styleButton-dyuqQ";
+var styleButtonSelected = "styleButtonSelected-uZne1";
+var mainImageCard = "mainImageCard-v7g41";
+var mainImage = "mainImage-WR82W";
+var mainImageOverlay = "mainImageOverlay-133HG";
+var mainImageTitle = "mainImageTitle-olUtp";
+var mainImageDescription = "mainImageDescription-k1GIu";
+var styleButtonImage = "styleButtonImage-by1s3";
+var styleButtonLabel = "styleButtonLabel-0R04R";
+var customInputSection = "customInputSection-zwl9g";
+var customInput = "customInput-5jLl3";
+var promptExamplesSwiper = "promptExamplesSwiper-gEPT1";
+var promptExampleChip = "promptExampleChip-jph5O";
+var generateSection = "generateSection-3wiMe";
+var generateButton = "generateButton-TP6yS";
+var generateButtonSubtext = "generateButtonSubtext-AaiB-";
+var remainingText = "remainingText-P3Ibl";
+var errorMessage = "errorMessage-6Dfp4";
+var unlockCard = "unlockCard-zmqvI";
+var unlockTitle = "unlockTitle-ZdltE";
+var unlockText = "unlockText-Jixn2";
+var unlockEmailInput = "unlockEmailInput-z5SXf";
+var unlockSubmitButton = "unlockSubmitButton-XuvH2";
+var unlockSubmitArrow = "unlockSubmitArrow-fCYvp";
+var unlockSuccessCard = "unlockSuccessCard-2ICYg";
+var unlockSuccessIcon = "unlockSuccessIcon-pOmcL";
+var unlockSuccessText = "unlockSuccessText-rtcHE";
+var tryVariantLink = "tryVariantLink-ZX0JF";
+var sceneHistory = "sceneHistory-i3VQY";
+var sceneHistoryTitle = "sceneHistoryTitle-fJPXT";
+var sceneHistorySwiper = "sceneHistorySwiper-oOVFf";
+var sceneThumb = "sceneThumb-mVxuB";
+var sceneThumbSelected = "sceneThumbSelected-MfJxR";
+var sceneThumbLabel = "sceneThumbLabel-oGzO-";
+var sceneThumbPlaceholder = "sceneThumbPlaceholder-h9u4D";
+var sceneThumbPlaceholderSelected = "sceneThumbPlaceholderSelected-Fq7Ap";
+var sceneThumbPlaceholderIcon = "sceneThumbPlaceholderIcon-GSqqQ";
+var sceneThumbPlaceholderImage = "sceneThumbPlaceholderImage-y4e-e";
+var sceneThumbSpinnerOverlay = "sceneThumbSpinnerOverlay-Z7vXT";
+var sceneThumbSpinner = "sceneThumbSpinner-3IkcG";
+var css_248z = ".container-uvLa8 {\n  padding-top: 16px;\n  padding-left: 12px;\n}\n\n.mobile .container-uvLa8 {\n  padding-left: 0px;\n}\n\n.emptyText-k7-1y {\n  font-size: 14px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-secondary);\n  margin: 0;\n}\n\n.headline-VRP8M {\n  font-size: 18px;\n  font-weight: 300;\n  line-height: 1.3;\n  letter-spacing: inherit;\n  color: var(--diva-theme-palette-text-primary);\n  margin: 0 0 8px;\n}\n\n.subheadline-aM8S8 {\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: var(--diva-theme-palette-text-secondary);\n  margin: 0 0 16px;\n}\n\n.mobile .subheadline-aM8S8 {\n  margin: 0 0 8px;\n}\n\n.styleSelection-iOIY2 {\n  margin-bottom: 16px;\n}\n\n.styleDescriptionText-XEUG7 {\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: var(--diva-theme-palette-text-secondary);\n  margin: 0;\n}\n\n.mobile .styleDescriptionText-XEUG7 {\n  font-size: 12px;\n}\n\n.styleButtonsSwiper-zhnww {\n  margin-bottom: 16px;\n  min-height: 60px;\n  overflow: visible;\n}\n\n.styleButtonsSwiper-zhnww .swiper {\n  position: relative;\n  overflow: hidden;\n  list-style: none;\n  padding: 6px 0;\n  z-index: 1;\n}\n\n.styleButtonsSwiper-zhnww .swiper-wrapper {\n  height: auto !important;\n}\n\n.styleButtonsSwiper-zhnww .swiper-wrapper {\n  position: relative;\n  width: calc(100% - 24px);\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  transition-property: transform;\n  padding: 12px;\n}\n\n.styleSelection-iOIY2 .styleButtonsSwiper-zhnww .swiper-slide {\n  flex-shrink: 0;\n  width: 28%;\n  display: flex;\n  align-items: center;\n  overflow: visible;\n}\n\n.styleButtonsSwiper-zhnww .swiper-button-prev,\n.styleButtonsSwiper-zhnww .swiper-button-next {\n  position: absolute;\n  top: 50%;\n  width: 24px;\n  height: 24px;\n  margin-top: -12px;\n  z-index: 10;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n}\n.styleButtonsSwiper-zhnww .swiper-button-prev svg,\n.styleButtonsSwiper-zhnww .swiper-button-next svg {\n  display: none;\n}\n\n.styleButtonsSwiper-zhnww .swiper-button-prev:focus,\n.styleButtonsSwiper-zhnww .swiper-button-prev:active,\n.styleButtonsSwiper-zhnww .swiper-button-next:focus,\n.styleButtonsSwiper-zhnww .swiper-button-next:active {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.styleButtonsSwiper-zhnww .swiper-button-prev::before,\n.styleButtonsSwiper-zhnww .swiper-button-next::before {\n  display: none !important;\n}\n\n.styleButtonsSwiper-zhnww .swiper-button-prev:after,\n.styleButtonsSwiper-zhnww .swiper-button-next:after {\n  text-transform: none !important;\n}\n\n.styleButtonsSwiper-zhnww .swiper-button-prev:after,\n.styleButtonsSwiper-zhnww .swiper-button-next:after {\n  font-family: swiper-icons;\n  font-size: 24px;\n  letter-spacing: 0;\n  font-feature-settings: ;\n  font-variant: normal;\n  font-variant: initial;\n  line-height: 1;\n}\n\n.styleButtonsSwiper-zhnww .swiper-button-prev,\n.styleButtonsSwiper-zhnww .swiper-rtl .swiper-button-next {\n  left: 4px;\n  right: auto;\n}\n\n.styleButtonsSwiper-zhnww .swiper-button-next,\n.styleButtonsSwiper-zhnww .swiper-rtl .swiper-button-prev {\n  right: 4px;\n  left: auto;\n}\n\n.styleButtonsSwiper-zhnww .swiper-button-disabled {\n  display: none;\n}\n\n.styleButton-dyuqQ {\n  position: relative;\n  width: 100%;\n  min-width: 0;\n  padding: 0;\n  border: 2px solid transparent;\n  border-radius: 10px;\n  overflow: hidden;\n  cursor: pointer;\n  background: none;\n  transition:\n    border-color 0.2s,\n    box-shadow 0.2s;\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n  aspect-ratio: 4 / 3;\n}\n\n.styleButton-dyuqQ:hover:not(:disabled) {\n  border-color: var(--diva-theme-palette-primary-main);\n}\n\n.styleButton-dyuqQ:focus,\n.styleButton-dyuqQ:active {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.styleButton-dyuqQ:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.styleButtonSelected-uZne1 {\n  border-color: var(--diva-theme-palette-primary-main);\n  box-shadow: 0 0 0 1px var(--diva-theme-palette-primary-main);\n}\n\n.mainImageCard-v7g41 {\n  position: relative;\n  width: calc(100% - 24px);\n  margin-left: 12px;\n  margin-right: 12px;\n  border-radius: 12px;\n  overflow: hidden;\n  margin-bottom: 4px;\n  aspect-ratio: 5 / 3;\n}\n\n.mainImage-WR82W {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n  display: block;\n}\n\n.mainImageOverlay-133HG {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 24px 20px 20px;\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 100%);\n  color: #fff;\n}\n\n.mainImageTitle-olUtp {\n  font-size: 22px;\n  font-weight: 400;\n  line-height: 1.3;\n  margin: 0 0 4px;\n  color: #fff;\n}\n\n.mainImageDescription-k1GIu {\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  margin: 0;\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.styleButtonImage-by1s3 {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n  border-radius: 8px;\n}\n\n.styleButtonLabel-0R04R {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 4px 6px 6px;\n  font-size: 11px;\n  font-weight: 400;\n  line-height: 1.3;\n  color: #fff;\n  text-align: center;\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);\n  pointer-events: none;\n}\n\n.customInputSection-zwl9g {\n  margin-bottom: 16px;\n}\n\n.mobile .customInputSection-zwl9g {\n  margin-bottom: 8px;\n}\n\n.customInputToggle-2ymcH {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0;\n  margin-bottom: 10px;\n  font-size: 13px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-secondary);\n  background: none;\n  border: none;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n}\n\n.customInputToggle-2ymcH:hover {\n  color: var(--diva-theme-palette-text-primary);\n}\n\n.customInputToggleOpen-FGN3h {\n  color: var(--diva-theme-palette-text-primary);\n}\n\n.customInput-5jLl3 {\n  width: calc(100% - 28px);\n  padding: 12px 14px;\n  font-size: 16px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-primary);\n  border: 1px solid #e8e3da;\n  border: 1px solid var(--galleryItemBorderColor, #e8e3da);\n  border-radius: 24px;\n  background: var(--settingsBackgroundColor);\n  margin-bottom: 10px;\n}\n\n.customInput-5jLl3:focus {\n  outline: none;\n  border-color: var(--diva-theme-palette-primary-main);\n  box-shadow: 0 0 0 1px var(--diva-theme-palette-primary-main);\n}\n\n.customInput-5jLl3::-moz-placeholder {\n  color: var(--diva-theme-palette-text-secondary);\n}\n\n.customInput-5jLl3::placeholder {\n  color: var(--diva-theme-palette-text-secondary);\n}\n\n.promptExamplesSwiper-gEPT1 {\n  margin-bottom: 4px;\n}\n\n.promptExamplesSwiper-gEPT1 .swiper {\n  position: relative;\n  overflow: hidden;\n  padding: 2px 0;\n}\n\n.promptExamplesSwiper-gEPT1 .swiper-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.promptExamplesSwiper-gEPT1 .swiper-slide {\n  width: auto !important;\n}\n\n.promptExamplesSwiper-gEPT1 .swiper-slide {\n  flex-shrink: 0;\n}\n\n.promptExamplesSwiper-gEPT1 .swiper-button-prev,\n.promptExamplesSwiper-gEPT1 .swiper-button-next {\n  display: none;\n}\n\n.promptExampleChip-jph5O {\n  padding: 8px 16px;\n  font-size: 13px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-primary);\n  background: var(--settingsBackgroundColor);\n  border: 1px solid #e8e3da;\n  border: 1px solid var(--galleryItemBorderColor, #e8e3da);\n  border-radius: 20px;\n  cursor: pointer;\n  white-space: nowrap;\n  transition:\n    border-color 0.2s,\n    background 0.2s;\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n}\n\n.promptExampleChip-jph5O:hover {\n  border-color: var(--diva-theme-palette-primary-main);\n  background: color-mix(in srgb, var(--diva-theme-palette-primary-main) 6%, #fff);\n  background: color-mix(in srgb, var(--diva-theme-palette-primary-main) 6%, var(--settingsBackgroundColor, #fff));\n}\n\n.generateSection-3wiMe {\n  margin-bottom: 24px;\n}\n\n.generateButton-TP6yS {\n  width: calc(100% - 48px);\n  padding: 16px 24px;\n  font-size: 16px;\n  font-weight: 400;\n  color: #fff;\n  color: var(--diva-theme-palette-primary-contrast-text, #fff);\n  background: var(--diva-theme-palette-primary-main);\n  border: none;\n  border-radius: 16px;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  transition:\n    background 0.2s,\n    box-shadow 0.2s,\n    transform 0.15s;\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n}\n\n.generateButton-TP6yS:focus,\n.generateButton-TP6yS:active {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.generateButton-TP6yS:hover:not(:disabled) {\n  background: var(--diva-theme-palette-primary-dark);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n  transform: translateY(-1px);\n}\n\n.generateButton-TP6yS:disabled {\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n.generateButtonSubtext-AaiB- {\n  font-size: 12px;\n  font-weight: 300;\n  opacity: 0.75;\n}\n\n.remainingText-P3Ibl {\n  font-size: 12px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-secondary);\n  text-align: center;\n  margin: 8px 0 0;\n}\n\n.errorMessage-6Dfp4 {\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #d32f2f;\n  color: var(--diva-theme-palette-error-main, #d32f2f);\n  background: color-mix(in srgb, #d32f2f 8%, transparent);\n  background: color-mix(in srgb, var(--diva-theme-palette-error-main, #d32f2f) 8%, transparent);\n  border: 1px solid color-mix(in srgb, #d32f2f 25%, transparent);\n  border: 1px solid color-mix(in srgb, var(--diva-theme-palette-error-main, #d32f2f) 25%, transparent);\n  border-radius: 4px;\n  border-radius: var(--globalBorderRadius, 4px);\n  padding: 10px 14px;\n  margin: 12px 0 0;\n  text-align: center;\n}\n\n.unlockCard-zmqvI {\n  padding: 24px 20px;\n  border: 2px solid color-mix(in srgb, var(--diva-theme-palette-primary-main) 20%, transparent);\n  border-radius: 4px;\n  border-radius: var(--globalBorderRadius, 4px);\n  background: var(--settingsBackgroundColor);\n  text-align: center;\n}\n\n.unlockTitle-ZdltE {\n  font-size: 18px;\n  font-weight: 300;\n\n  color: var(--diva-theme-palette-primary-main);\n  margin: 0 0 12px;\n}\n\n.unlockText-Jixn2 {\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.6;\n  color: var(--diva-theme-palette-text-secondary);\n  margin: 0 0 16px;\n}\n\n.unlockEmailInput-z5SXf {\n  width: calc(100% - 28px);\n  padding: 12px 14px;\n  font-size: 16px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-primary);\n  border: 1px solid #e8e3da;\n  border: 1px solid var(--galleryItemBorderColor, #e8e3da);\n  border-radius: 4px;\n  border-radius: var(--globalBorderRadius, 4px);\n  background: var(--settingsBackgroundColor);\n  margin-bottom: 12px;\n}\n\n.unlockEmailInput-z5SXf:focus {\n  outline: none;\n  border-color: var(--diva-theme-palette-primary-main);\n  box-shadow: 0 0 0 1px var(--diva-theme-palette-primary-main);\n}\n\n.unlockEmailInput-z5SXf::-moz-placeholder {\n  color: var(--diva-theme-palette-text-secondary);\n}\n\n.unlockEmailInput-z5SXf::placeholder {\n  color: var(--diva-theme-palette-text-secondary);\n}\n\n.unlockSubmitButton-XuvH2 {\n  width: calc(100% - 48px);\n  padding: 14px 24px;\n  font-size: 14px;\n  font-weight: 400;\n  color: #fff;\n  color: var(--diva-theme-palette-primary-contrast-text, #fff);\n  background: var(--diva-theme-palette-primary-main);\n  border: none;\n  border-radius: var(--buttons-border-radius);\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    box-shadow 0.2s;\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.unlockSubmitButton-XuvH2:focus,\n.unlockSubmitButton-XuvH2:active {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.unlockSubmitButton-XuvH2:hover:not(:disabled) {\n  background: var(--diva-theme-palette-primary-dark);\n  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n  box-shadow: var(--boxShadowActive, 0 6px 12px rgba(0, 0, 0, 0.15));\n}\n\n.unlockSubmitButton-XuvH2:disabled {\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n.unlockSubmitArrow-fCYvp {\n  font-size: 18px;\n  line-height: 1;\n}\n\n.unlockSuccessCard-2ICYg {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  min-height: 120px;\n}\n\n.unlockSuccessIcon-pOmcL {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: var(--diva-theme-palette-primary-main);\n  color: #fff;\n  color: var(--diva-theme-palette-primary-contrast-text, #fff);\n  font-size: 20px;\n  line-height: 1;\n}\n\n.unlockSuccessText-rtcHE {\n  font-size: 15px;\n  font-weight: 400;\n  color: var(--diva-theme-palette-text-primary);\n  margin: 0;\n}\n\n.tryVariantLink-ZX0JF {\n  display: block;\n  margin: 12px auto 24px;\n  padding: 0;\n  font-size: 14px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-primary-main);\n  text-decoration: underline;\n  text-underline-offset: 3px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.tryVariantLink-ZX0JF:hover {\n  color: var(--diva-theme-palette-primary-dark);\n}\n\n.sceneHistory-i3VQY {\n}\n\n.sceneHistoryTitle-fJPXT {\n  font-size: 15px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-secondary);\n  margin: 0 0 0 2px;\n}\n\n.sceneHistorySwiper-oOVFf {\n  padding-bottom: 8px;\n}\n\n.sceneHistorySwiper-oOVFf .swiper {\n  position: relative;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n  z-index: 1;\n}\n\n.sceneHistorySwiper-oOVFf .swiper-wrapper {\n  position: relative;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  transition-property: transform;\n  padding: 12px 3px;\n}\n\n.sceneHistory-i3VQY .sceneHistorySwiper-oOVFf .swiper-slide {\n  flex-shrink: 0;\n  width: 108px;\n  height: auto;\n}\n\n.sceneHistorySwiper-oOVFf .swiper-button-prev,\n.sceneHistorySwiper-oOVFf .swiper-button-next {\n  position: absolute;\n  top: 50%;\n  width: 24px;\n  height: 24px;\n  margin-top: -12px;\n  z-index: 10;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n}\n\n.sceneHistorySwiper-oOVFf .swiper-button-prev svg,\n.sceneHistorySwiper-oOVFf .swiper-button-next svg {\n  display: none;\n}\n\n.sceneHistorySwiper-oOVFf .swiper-button-prev:focus,\n.sceneHistorySwiper-oOVFf .swiper-button-prev:active,\n.sceneHistorySwiper-oOVFf .swiper-button-next:focus,\n.sceneHistorySwiper-oOVFf .swiper-button-next:active {\n  outline: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.sceneHistorySwiper-oOVFf .swiper-button-prev::before,\n.sceneHistorySwiper-oOVFf .swiper-button-next::before {\n  display: none !important;\n}\n\n.sceneHistorySwiper-oOVFf .swiper-button-prev:after,\n.sceneHistorySwiper-oOVFf .swiper-button-next:after {\n  font-family: swiper-icons;\n  font-size: 24px;\n}\n\n.sceneHistorySwiper-oOVFf .swiper-button-prev,\n.sceneHistorySwiper-oOVFf .swiper-rtl .swiper-button-next {\n  left: 4px;\n  right: auto;\n}\n\n.sceneHistorySwiper-oOVFf .swiper-button-next,\n.sceneHistorySwiper-oOVFf .swiper-rtl .swiper-button-prev {\n  right: 4px;\n  left: auto;\n}\n\n.sceneHistorySwiper-oOVFf .swiper-button-prev:after {\n  content: 'prev';\n}\n\n.sceneHistorySwiper-oOVFf .swiper-button-next:after {\n  content: 'next';\n}\n\n.sceneHistorySwiper-oOVFf .swiper-button-disabled {\n  display: none;\n}\n\n.sceneThumb-mVxuB {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 4 / 3;\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: 8px;\n  border: 1px solid #e8e3da;\n  border: 1px solid var(--galleryItemBorderColor, #e8e3da);\n  cursor: pointer;\n  transition:\n    border-color 0.2s,\n    box-shadow 0.2s;\n}\n\n.sceneThumb-mVxuB:hover {\n  border-color: var(--diva-theme-palette-primary-main);\n}\n\n.sceneThumbSelected-MfJxR {\n  border-color: var(--diva-theme-palette-primary-main);\n  box-shadow: 0 0 0 1px var(--diva-theme-palette-primary-main);\n}\n\n.sceneThumb-mVxuB img {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n}\n\n.sceneThumbLabel-oGzO- {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 12px 6px 5px;\n  font-size: 10px;\n  font-weight: 400;\n  line-height: 1.2;\n  color: #fff;\n  text-align: center;\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 100%);\n  pointer-events: none;\n}\n\n.sceneThumbPlaceholder-h9u4D {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 4 / 3;\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: 8px;\n  border: 1px solid #e8e3da;\n  border: 1px solid var(--galleryItemBorderColor, #e8e3da);\n  background: #f5efe8;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition:\n    border-color 0.2s,\n    box-shadow 0.2s;\n}\n\n.sceneThumbPlaceholderSelected-Fq7Ap {\n  border-color: var(--diva-theme-palette-primary-main);\n  box-shadow: 0 0 0 1px var(--diva-theme-palette-primary-main);\n}\n\n.sceneThumbPlaceholderIcon-GSqqQ {\n  font-size: 24px;\n  opacity: 0.5;\n  color: #c9a96e;\n}\n\n.sceneThumbPlaceholderImage-y4e-e {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n  opacity: 0.6;\n}\n\n.sceneThumbSpinnerOverlay-Z7vXT {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.55);\n  -webkit-backdrop-filter: blur(1px);\n          backdrop-filter: blur(1px);\n}\n\n.sceneThumbSpinner-3IkcG {\n  width: 22px;\n  height: 22px;\n  border: 2px solid rgba(0, 0, 0, 0.15);\n  border-top-color: var(--diva-theme-palette-primary-main);\n  border-radius: 50%;\n  animation: sceneThumbSpin-w7AXw 0.8s linear infinite;\n}\n\n@keyframes sceneThumbSpin-w7AXw {\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+styleInject(css_248z);
+
+var UnlockCard = function UnlockCard(_ref) {
+  var budgetTotal = _ref.budgetTotal,
+    leadBonus = _ref.leadBonus,
+    leadKeyActive = _ref.leadKeyActive,
+    onSubmit = _ref.onSubmit,
+    onSuccess = _ref.onSuccess;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState(function () {
+      var cached = DivaUtils.getCookie('user_key');
+      return cached && DivaUtils.validateEmail(cached) ? cached : '';
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    email = _useState2[0],
+    setEmail = _useState2[1];
+  var _useState3 = useState(function () {
+      var hasStoredLeadKey = !!localStorage.getItem('diva_lead_key');
+      return leadKeyActive || hasStoredLeadKey || leadBonus <= 0 ? 'exhausted' : 'form';
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    phase = _useState4[0],
+    setPhase = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    errorMsg = _useState6[0],
+    setErrorMsg = _useState6[1];
+  useEffect(function () {
+    if (leadKeyActive && phase === 'form') {
+      setPhase('exhausted');
+    }
+  }, [leadKeyActive]);
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var result, _result$message, _result$message2, _result$message3;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setPhase('loading');
+            setErrorMsg('');
+            _context.next = 4;
+            return onSubmit(email);
+          case 4:
+            result = _context.sent;
+            if (result !== null && result !== void 0 && result.success) {
+              setPhase('success');
+              setTimeout(function () {
+                return onSuccess();
+              }, 2500);
+            } else if ((result === null || result === void 0 ? void 0 : result.reason) === 'LEAD_KEY_BONUS_EXHAUSTED') {
+              setErrorMsg((_result$message = result === null || result === void 0 ? void 0 : result.message) !== null && _result$message !== void 0 ? _result$message : '');
+              setPhase('leadBonusExhausted');
+            } else if ((result === null || result === void 0 ? void 0 : result.reason) === 'EMAIL_ALREADY_USED') {
+              setErrorMsg((_result$message2 = result === null || result === void 0 ? void 0 : result.message) !== null && _result$message2 !== void 0 ? _result$message2 : '');
+              setPhase('emailAlreadyUsed');
+            } else {
+              setErrorMsg((_result$message3 = result === null || result === void 0 ? void 0 : result.message) !== null && _result$message3 !== void 0 ? _result$message3 : '');
+              setPhase('error');
+            }
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleSubmit() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  if (phase === 'success') {
+    return /*#__PURE__*/jsxs("div", {
+      className: "".concat(unlockCard, " ").concat(unlockSuccessCard),
+      children: [/*#__PURE__*/jsx("span", {
+        className: unlockSuccessIcon,
+        children: "\u2713"
+      }), /*#__PURE__*/jsx("p", {
+        className: unlockSuccessText,
+        children: t('configurator.inspiration.unlockSuccess', 'Erfolgreich freigeschaltet – jetzt weiter generieren!')
+      })]
+    });
+  }
+  if (phase === 'exhausted') {
+    return /*#__PURE__*/jsxs("div", {
+      className: unlockCard,
+      children: [/*#__PURE__*/jsx("h4", {
+        className: unlockTitle,
+        children: t('configurator.inspiration.exhaustedTitle', 'Sie haben heute alle Raumbilder genutzt')
+      }), /*#__PURE__*/jsx("p", {
+        className: unlockText,
+        children: t('configurator.inspiration.exhaustedText', 'Ihr Kontingent ist für heute aufgebraucht. Kommen Sie morgen wieder – dann stehen Ihnen neue Raumbilder zur Verfügung.')
+      })]
+    });
+  }
+  if (phase === 'emailAlreadyUsed') {
+    return /*#__PURE__*/jsxs("div", {
+      className: unlockCard,
+      children: [/*#__PURE__*/jsx("h4", {
+        className: unlockTitle,
+        children: t('configurator.inspiration.emailAlreadyUsedTitle', 'Diese E-Mail-Adresse wurde bereits verwendet')
+      }), /*#__PURE__*/jsx("p", {
+        className: unlockText,
+        children: t('configurator.inspiration.emailAlreadyUsedText', 'Die Freischaltung zusätzlicher Raumbilder ist pro E-Mail-Adresse nur einmal möglich.')
+      })]
+    });
+  }
+  if (phase === 'leadBonusExhausted') {
+    return /*#__PURE__*/jsxs("div", {
+      className: unlockCard,
+      children: [/*#__PURE__*/jsx("h4", {
+        className: unlockTitle,
+        children: t('configurator.inspiration.leadKeyBonusExhaustedTitle', 'Bonus-Kontingent aufgebraucht')
+      }), /*#__PURE__*/jsx("p", {
+        className: unlockText,
+        children: t('configurator.inspiration.leadKeyBonusExhaustedText', 'Für diese E-Mail-Adresse sind alle zusätzlichen Raumbilder bereits verbraucht. Es können keine weiteren Bilder mehr freigeschaltet werden.')
+      })]
+    });
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: unlockCard,
+    children: [/*#__PURE__*/jsx("h4", {
+      className: unlockTitle,
+      children: t('configurator.inspiration.unlockTitle', 'Gefällt dir, was du siehst?')
+    }), /*#__PURE__*/jsx("p", {
+      className: unlockText,
+      children: t('configurator.inspiration.unlockTextLead', {
+        budgetTotal: budgetTotal,
+        leadBonus: leadBonus
+      })
+    }), /*#__PURE__*/jsx("input", {
+      type: "email",
+      className: unlockEmailInput,
+      value: email,
+      onChange: function onChange(e) {
+        return setEmail(e.target.value);
+      },
+      placeholder: t('configurator.inspiration.emailPlaceholder'),
+      disabled: phase === 'loading'
+    }), phase === 'error' && errorMsg && /*#__PURE__*/jsx("p", {
+      className: unlockText,
+      children: errorMsg
+    }), /*#__PURE__*/jsxs("button", {
+      type: "button",
+      className: unlockSubmitButton,
+      disabled: phase === 'loading' || !DivaUtils.validateEmail(email),
+      onClick: handleSubmit,
+      children: [phase === 'loading' ? t('configurator.inspiration.unlocking', 'Wird freigeschaltet…') : t('configurator.inspiration.unlockButton', "".concat(leadBonus, " weitere Raumbilder freischalten")), phase !== 'loading' && /*#__PURE__*/jsx("span", {
+        className: unlockSubmitArrow,
+        children: "\u2192"
+      })]
+    })]
+  });
+};
+
+var UnlockCard$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': UnlockCard
+});
+
+export { styleButtonLabel as A, generateSection as B, generateButton as C, generateButtonSubtext as D, errorMessage as E, remainingText as F, customInputSection as G, styleDescriptionText as H, customInput as I, promptExamplesSwiper as J, promptExampleChip as K, tryVariantLink as L, UnlockCard$1 as M, UnlockCard as U, sceneHistoryTitle as a, sceneHistorySwiper as b, container as c, sceneThumbPlaceholder as d, emptyText as e, sceneThumbPlaceholderSelected as f, sceneThumbPlaceholderImage as g, headline as h, sceneThumbLabel as i, sceneThumbPlaceholderIcon as j, sceneThumbSpinnerOverlay as k, sceneThumbSpinner as l, sceneThumb as m, sceneThumbSelected as n, subheadline as o, mainImageCard as p, mainImage as q, mainImageOverlay as r, sceneHistory as s, mainImageTitle as t, mainImageDescription as u, styleSelection as v, styleButtonsSwiper as w, styleButton as x, styleButtonSelected as y, styleButtonImage as z };

package/build/esm/index-00060ed1.js

@@ -0,0 +1,73 @@
+import { s as styleInject, u as useViewHandler, T as Toggle } from './index-cef0fc63.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import { getLogger } from '@crystaldesign/diva-core';
+import { DivaError } from '@crystaldesign/diva-utils';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var headerToggle = "header-toggle-W-6CA";
+var css_248z = ".header-toggle-W-6CA {\n  float: right;\n}\n";
+styleInject(css_248z);
+
+var LOG = getLogger('Planner', 'ToggleHandler');
+var ToggleHeader = function ToggleHeader(_ref) {
+  var item = _ref.item;
+  var viewHandler = useViewHandler();
+  var items = item.groups[0].items;
+  var yesItem;
+  var noItem;
+  if (!items) return /*#__PURE__*/jsx(Fragment, {});
+  for (var i = 0; i < items.length; i++) {
+    var _items$i$codex, _items$i$codex2;
+    if ((_items$i$codex = items[i].codex) !== null && _items$i$codex !== void 0 && _items$i$codex.startsWith('OPVNEIN')) {
+      noItem = items[i];
+    }
+    if ((_items$i$codex2 = items[i].codex) !== null && _items$i$codex2 !== void 0 && _items$i$codex2.startsWith('OPVJA')) {
+      yesItem = items[i];
+    }
+  }
+  if (!noItem || !yesItem) {
+    if (items.length == 2) {
+      noItem = items[0];
+      yesItem = items[1];
+    }
+    if (!noItem || !yesItem) {
+      LOG.error(new DivaError('Achtung! Bei der Option: ' + items[0].op + ' gibt es keine eindeutige werte für JA und NEIN', {
+        code: 'WC_0011'
+      }));
+      return /*#__PURE__*/jsx(Fragment, {});
+    }
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: headerToggle,
+    children: /*#__PURE__*/jsx(Toggle, {
+      onChange: function onChange() {
+        viewHandler.paletteViewHandler.clickedOnConfigPalette(noItem.sel ? yesItem : noItem, undefined, item.id);
+      },
+      val: item,
+      state: noItem.sel == false,
+      off: noItem.text,
+      on: yesItem.text
+    })
+  });
+};
+var ToggleHeader$1 = observer(ToggleHeader);
+
+export { ToggleHeader$1 as default };

package/build/esm/index-0062addc.js

@@ -0,0 +1,318 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler, P as PricePreview, G as GenericToolTip } from './index-cef0fc63.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { useHover, useLayer } from 'react-laag';
+import MetaData from './index-e2e0b8f0.js';
+import SubTabGroup from './index-e78e213c.js';
+import InfoIcon from './index-74b42439.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import 'react-collapsible';
+import './index-4985b99a.js';
+import './index-6cb74bd6.js';
+import './index-456d9b2e.js';
+import 'sift';
+import './index-86cf2cc0.js';
+import './index-eb6559f1.js';
+import './index-b2c5a6c2.js';
+import './index-6bb8df8d.js';
+import './index.module-5f975eb0.js';
+import './index-3a7cfdde.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-34893fc4.js';
+import 'react-dropdown';
+import './index-8c145e8b.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-131aa3e3.js';
+import './index-5f88bcb2.js';
+import './index-3a7ff0ba.js';
+import '@crystaldesign/content-box';
+import './index-87ffa373.js';
+import './index-e6fa2412.js';
+import './index-94f9d4f2.js';
+import './index-b690d82a.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-def953e7.js';
+import './index-dba581fc.js';
+import './index-58daf67a.js';
+import './index-b2f441d2.js';
+import './index-86fd1d06.js';
+import './index-8bb4ae0b.js';
+import './index-cbafe66e.js';
+import './index.module-d9cf5ffc.js';
+import './index-22da423f.js';
+import './index-bc3fdbd5.js';
+import './index-43582b48.js';
+import './index-4bed5832.js';
+import './index-ef2203f9.js';
+import './index.module-8e8c1569.js';
+import './index-ac61c3e7.js';
+import './index-69b5bf76.js';
+import './index-421f919a.js';
+import './index-b1cbe76f.js';
+import './index-f11738f1.js';
+import './index-67727ab5.js';
+import './index-81c8db56.js';
+import './index-7c00ed5f.js';
+import './index-53da4e61.js';
+import './index-cadb7830.js';
+import './index-dcbe0bcb.js';
+import './index-94240469.js';
+import 'rc-slider';
+import './index-4f89c78e.js';
+import './index-87e494b8.js';
+import './index-b44399a2.js';
+import './index-bf521b3c.js';
+import './index-3d0cb9b9.js';
+import 'react-confetti-explosion';
+import './index-c87114bf.js';
+import './index-16eb8604.js';
+import './index-d5fca0f2.js';
+import 'react-qr-code';
+import './index-14b3d4e7.js';
+import './useCustomDimensions-b68b7933.js';
+import './index-bd52c562.js';
+import './ussIsSticky-947f9763.js';
+import './index-3d0939ae.js';
+import './index-e7e4da5b.js';
+import './index-0146d2e9.js';
+import './index.module-7b3ba9ca.js';
+import './index-ebd8e6ff.js';
+import './index-bcdf9a84.js';
+import './index-3f2681cc.js';
+import './index-b2bfa211.js';
+import './index-24d5095c.js';
+import './index-acbea2af.js';
+
+var accItem = "AccItem-2APRQ";
+var wcSize = "wcSize-dO69R";
+var wcSizeNormal = "wcSize-normal-ibUrf";
+var wcImage = "wcImage-LUYJr";
+var wcAccInfoContainer = "wcAccInfoContainer-noQuw";
+var wcConfiguratorSettingsTitle = "wcConfigurator-settings-title-QkL6Y";
+var metaData = "meta-data-FNjdQ";
+var wcAccSize = "wcAccSize-IgCBc";
+var wcCtaContainer = "wcCTAContainer-gIkLT";
+var wcAccCtaMinus = "wcAccCTAMinus-juYDC";
+var wcAccCtaPlus = "wcAccCTAPlus-W-ORy";
+var disable = "disable-81BEw";
+var wcAccCtaQuantity = "wcAccCTAQuantity-PS2L0";
+var accItemLandscape = "AccItemLandscape-bJ4ph";
+var accItemPortrait = "AccItemPortrait-1gIUO";
+var css_248z = "/* Accessoires*/\n\n.AccItem-2APRQ {\n  border-radius: var(--globalBorderRadius);\n  background: white;\n  position: relative;\n  display: flex;\n  z-index: 100;\n  white-space: pre-line;\n}\n\n.AccItem-2APRQ:hover {\n  z-index: 200;\n}\n\n.AccItem-2APRQ .wcSize-dO69R {\n  width: 98%;\n  background: white;\n  position: relative;\n  border-radius: var(--globalBorderRadius);\n}\n\n.AccItem-2APRQ .wcSize-normal-ibUrf {\n  height: 80px;\n}\n\n.AccItem-2APRQ .wcImagePlaceHolder-o65Jq {\n  width: 48px;\n  float: left;\n  height: 48px;\n}\n\n.AccItem-2APRQ .wcSize-normal-ibUrf .wcImage-LUYJr {\n  height: 80px;\n}\n\n.AccItem-2APRQ .wcImage-LUYJr {\n  width: 80px;\n  float: left;\n  border-radius: var(--globalBorderRadius) 0px 0px var(--globalBorderRadius);\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n}\n\n.wcAccInfoContainer-noQuw {\n  float: left;\n  width: calc(100% - 203.2px);\n  position: relative;\n  height: calc(100% - 12px);\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.AccItem-2APRQ .wcAccInfoContainer-noQuw {\n  width: calc(100% - 181.2px);\n}\n\n.AccItem-2APRQ .wcConfigurator-settings-title-QkL6Y {\n  display: -webkit-box;\n  float: left;\n  max-height: 64px;\n  min-height: 16px;\n  margin-top: 8px;\n  max-width: 100%;\n  color: var(--secondaryColor);\n  font-size: 16px;\n  line-height: 20.8px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 100;\n}\n\n.AccItem-2APRQ .wcConfigurator-settings-title-QkL6Y.meta-data-FNjdQ {\n  -webkit-line-clamp: 1;\n}\n\n.AccItem-2APRQ .wcAccSize-IgCBc {\n  display: -webkit-box;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  font-size: 13px;\n  line-height: 16px;\n  color: #6f6f6f;\n  width: calc(100% - 32px);\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  z-index: 200;\n  position: relative;\n}\n\n@media all and (max-width: 1100px) {\n  .AccItem-2APRQ .wcSize-normal-ibUrf {\n    height: 80px;\n  }\n\n  .AccItem-2APRQ .wcSize-normal-ibUrf img {\n    height: 80px;\n  }\n}\n\n.AccItem-2APRQ .wcCTAContainer-gIkLT {\n  position: absolute;\n  bottom: 0px;\n  right: 0px;\n  width: 100px;\n  height: 32px;\n}\n\n.AccItem-2APRQ .wcCTAContainer-gIkLT {\n  font-size: 18px;\n  line-height: 20px;\n  color: var(--secondaryColor);\n  text-align: center;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.AccItem-2APRQ .wcAccCTAMinus-juYDC,\n.AccItem-2APRQ .wcAccCTAPlus-W-ORy {\n  font-weight: 300;\n  height: 21px;\n  width: 21px;\n  float: left;\n  background: #f2f2f2;\n  border-radius: 21px;\n  -webkit-text-stroke: 0px;\n  transition: background-color 0.15s ease;\n}\n\n.AccItem-2APRQ .wcAccCTAMinus-juYDC:hover,\n.AccItem-2APRQ .wcAccCTAPlus-W-ORy:hover {\n  background: #d9d9d9;\n  color: #424242;\n  cursor: pointer;\n}\n.AccItem-2APRQ .disable-81BEw.wcAccCTAMinus-juYDC,\n.AccItem-2APRQ .disable-81BEw.wcAccCTAPlus-W-ORy {\n  background: #f7f7f7;\n}\n.AccItem-2APRQ .disable-81BEw.wcAccCTAMinus-juYDC:hover,\n.AccItem-2APRQ .disable-81BEw.wcAccCTAPlus-W-ORy:hover {\n  background: #f7f7f7;\n  color: var(--secondaryColor);\n  cursor: inherit;\n}\n\n.AccItem-2APRQ .wcAccCTAQuantity-PS2L0 {\n  float: left;\n  width: 40px;\n  height: 16px;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  -webkit-text-stroke: 0.4px;\n}\n\n.AccItem-2APRQ .wcAccCTAMinus-juYDC {\n  line-height: 19px;\n}\n\n.AccItemLandscape-bJ4ph .wcCTAContainer-gIkLT {\n  font-size: 16px;\n  line-height: 30px;\n  width: 80px;\n  height: 48px;\n}\n\n.AccItemLandscape-bJ4ph .wcAccCTAMinus-juYDC {\n  line-height: 30px;\n}\n\n.AccItemLandscape-bJ4ph .wcAccCTAMinus-juYDC,\n.AccItemLandscape-bJ4ph .wcAccCTAPlus-W-ORy {\n  height: 30px;\n  width: 30px;\n  border-radius: 50%;\n}\n.AccItemLandscape-bJ4ph .wcAccInfoContainer-noQuw {\n  width: calc(100% - 192px);\n}\n\n.AccItemPortrait-1gIUO .wcCTAContainer-gIkLT {\n  font-size: 16px;\n  line-height: 30px;\n  width: 104px;\n  height: 48px;\n}\n\n.AccItemPortrait-1gIUO .wcAccCTAMinus-juYDC {\n  line-height: 32px;\n}\n\n.AccItemPortrait-1gIUO .wcAccCTAMinus-juYDC,\n.AccItemPortrait-1gIUO .wcAccCTAPlus-W-ORy {\n  height: 30px;\n  width: 30px;\n\n  border-radius: 50%;\n}\n.AccItemPortrait-1gIUO .wcAccInfoContainer-noQuw {\n  width: calc(100% - 192px);\n}\n";
+styleInject(css_248z);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var AccessoiresStandard = function AccessoiresStandard(_ref) {
+  var _renderLayer, _item$longDescription;
+  var itemP = _ref.item,
+    wrapper = _ref.wrapper,
+    _ref$wcAccInfoContain = _ref.wcAccInfoContainerClass,
+    wcAccInfoContainerClass = _ref$wcAccInfoContain === void 0 ? wcAccInfoContainer : _ref$wcAccInfoContain,
+    _ref$wcConfiguratorSe = _ref.wcConfiguratorSettingsTitleClass,
+    wcConfiguratorSettingsTitleClass = _ref$wcConfiguratorSe === void 0 ? wcConfiguratorSettingsTitle : _ref$wcConfiguratorSe,
+    hidePrice = _ref.hidePrice,
+    hideSize = _ref.hideSize;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    hidePrices = _useDivaCore$state.hidePrices,
+    _useDivaCore$state$di = _useDivaCore$state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+  var isClicked = false;
+  var pricesAreHidden = viewHandler.getViewConfig().dontShowBasePrice || hidePrices || hidePrice;
+  var onPlusClick = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var ret;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!isClicked) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            isClicked = true;
+            _context.next = 5;
+            return viewHandler.paletteViewHandler.clickedOnAccessoirePaletteWrapper(item, 'plus');
+          case 5:
+            ret = _context.sent;
+            if (ret == 'AccessorieNoFreeSpace') {
+              viewHandler.productState.updatePlannerMsgContainer('ACCESSOIRE_MSG', true, 'INFO', 'NO_DOCKINGPOINT_FOR_ELEMENT', true);
+            }
+            if (ret == 'MaxQuantityReached') {
+              viewHandler.productState.updatePlannerMsgContainer('ACCESSOIRE_MSG', true, 'INFO', 'MAX_QUANTITY_REACHED', true);
+            }
+            isClicked = false;
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onPlusClick() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var onMinusClick = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!isClicked) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 2:
+            isClicked = true;
+            _context2.next = 5;
+            return viewHandler.paletteViewHandler.clickedOnAccessoirePaletteWrapper(item, 'minus');
+          case 5:
+            isClicked = false;
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function onMinusClick() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var itemPalettesGroupedByArticles = {};
+  if (item.configStepKeys) {
+    var _loop = function _loop() {
+      var stepKey = item.configStepKeys[i];
+      var itemPalette = viewHandler.settingsState.itemPaletteArr.find(function (_ref4) {
+        var _ref5 = _slicedToArray(_ref4, 2);
+          _ref5[0];
+          var itemPalette = _ref5[1];
+        return itemPalette.configStepKey == stepKey.key;
+      });
+      if (!itemPalette) return 1; // continue
+      if (!itemPalettesGroupedByArticles[stepKey.basketId]) itemPalettesGroupedByArticles[stepKey.basketId] = {};
+      itemPalettesGroupedByArticles[stepKey.basketId][itemPalette[0]] = itemPalette[1];
+    };
+    for (var i = 0; i < item.configStepKeys.length; i++) {
+      if (_loop()) continue;
+    }
+  }
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0],
+    setMetaDataVisible = _useState2[1];
+
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 1500,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+      className: classnames(accItem, wrapper, viewHandler.uiState.isMobilePortrait ? accItemPortrait : undefined, viewHandler.uiState.isMobileLandscape ? accItemLandscape : undefined)
+    }, triggerProps), hoverProps), {}, {
+      children: [/*#__PURE__*/jsxs("div", {
+        className: classnames(wcSize, wcSizeNormal),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(wcImage),
+          onClick: onPlusClick,
+          style: {
+            backgroundImage: "url(".concat(item.image, ")")
+          }
+        }), /*#__PURE__*/jsxs("div", {
+          className: classnames(wcAccInfoContainerClass),
+          children: [/*#__PURE__*/jsx("div", {
+            className: classnames(wcConfiguratorSettingsTitleClass, metaDataVisible !== '' ? metaData : undefined),
+            children: item.name
+          }), /*#__PURE__*/jsx(MetaData, {
+            metaData: item.metaData,
+            visible: [metaDataVisible, setMetaDataVisible]
+          }, item.articleCodex), !hideSize && /*#__PURE__*/jsx("div", {
+            className: classnames(wcAccSize),
+            children: item.formattedSize
+          })]
+        }), /*#__PURE__*/jsxs("div", {
+          className: classnames(wcCtaContainer),
+          children: [item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+            item: item,
+            style: {
+              left: -32,
+              bottom: viewHandler.getIsInMobileView() ? 26 : 12
+            }
+          }, item.articleCodex), /*#__PURE__*/jsx("div", {
+            onClick: onMinusClick,
+            className: classnames(wcAccCtaMinus, 0 == item.actQuantity ? disable : undefined),
+            children: "-"
+          }), /*#__PURE__*/jsx("div", {
+            className: classnames(wcAccCtaQuantity),
+            children: item.actQuantity
+          }), /*#__PURE__*/jsx("div", {
+            onClick: onPlusClick,
+            className: classnames(wcAccCtaPlus, item.maxQuantity == item.actQuantity && item.maxQuantity != 0 ? disable : undefined),
+            children: "+"
+          })]
+        })]
+      }), !pricesAreHidden && !!item.price && /*#__PURE__*/jsx(PricePreview, {
+        price: item.price,
+        style: {
+          paddingTop: 6
+        }
+      })]
+    })), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: (_item$longDescription = item.longDescription) !== null && _item$longDescription !== void 0 ? _item$longDescription : item.name,
+      desciption: metaDataVisible,
+      codex: item.articleCodex,
+      pricePreviewPromise: item.pricePreviewPromise,
+      image: item.image,
+      layerProps: layerProps
+    }, item.articleCodex))), !!Object.keys(itemPalettesGroupedByArticles).length && /*#__PURE__*/jsx(SubTabGroup, {
+      itemPalettesOfArticle: itemPalettesGroupedByArticles,
+      zIndexBase: 300
+    })]
+  });
+};
+var AccessoiresStandard$1 = observer(AccessoiresStandard);
+
+export { AccessoiresStandard$1 as default };