@crystaldesign/diva-web-planner-react 26.7.0-rc.8 → 26.7.0-rc.9

package/build/esm/UnlockCard-561cb8bc.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-2a04e43a.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-015ad3bc.js

@@ -0,0 +1,52 @@
+import { u as useViewHandler } from './index-2a04e43a.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import RoomGallery from './index-a63be589.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+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 '@crystaldesign/diva-utils';
+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';
+import 'swiper/react';
+import 'swiper/modules';
+import './index-4e3e77ad.js';
+import './index.module-cca52a67.js';
+import './index-f5d4f1c5.js';
+import './index-ba342957.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-4529202e.js';
+import './index-bb3c4c85.js';
+
+var AiRoomsSelection = function AiRoomsSelection(props) {
+  var _viewHandler$aiState$, _organization$setting;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    user = _useDivaCore$state.user,
+    organization = _useDivaCore$state.organization;
+  if (!viewHandler.aiState.showAiRoomRenderingInSummary || !viewHandler.viewPlannerHandler.isAny3DVisualization() || (!user ? !viewHandler.aiState.shouldShowAiForAnonymous : !viewHandler.aiState.isAnyLimitDefined) || !((_viewHandler$aiState$ = viewHandler.aiState.enrichedAiRoomRenderings()) !== null && _viewHandler$aiState$ !== void 0 && _viewHandler$aiState$.length) || (_organization$setting = organization.settings) !== null && _organization$setting !== void 0 && (_organization$setting = _organization$setting.aiSettings) !== null && _organization$setting !== void 0 && _organization$setting.checkForDivaKiReady && !viewHandler.aiState.catalogDataKiReady()) return /*#__PURE__*/jsx(Fragment, {});
+
+  // Use enriched items from AI state (computed property with all callbacks and current state)
+  return /*#__PURE__*/jsx(RoomGallery, {
+    roomItems: viewHandler.aiState.enrichedAiRoomRenderings(true),
+    selectedRoom: viewHandler.aiState.selectedRoom
+  });
+};
+var AiRoomsSelection$1 = observer(AiRoomsSelection);
+
+export { AiRoomsSelection$1 as default };

package/build/esm/index-01b48d02.js

@@ -0,0 +1,37 @@
+import { u as useViewHandler } from './index-2a04e43a.js';
+import 'react';
+import { g as wcPlanner3DGrid } from './index.module-27ea3775.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+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 '@crystaldesign/diva-utils';
+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 Planner3DGrid = function Planner3DGrid(props) {
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(_ref) {
+      return viewHandler.productState.setPlanner3DGridElement(_ref);
+    },
+    id: "diva3dImg_3DGrid",
+    className: wcPlanner3DGrid
+  });
+};
+
+export { Planner3DGrid as default };

package/build/esm/index-025992a2.js

@@ -0,0 +1,44 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject, u as useViewHandler } from './index-2a04e43a.js';
+import 'react';
+import BasketAction from './index-0b9531dc.js';
+import { observer } from 'mobx-react-lite';
+import { jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 '@crystaldesign/diva-utils';
+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';
+import './index.module-8502908b.js';
+
+var wcCheckoutButtonText = "wcCheckoutButtonText-bETEx";
+var wcCheckoutButtonPrice = "wcCheckoutButtonPrice-iT78h";
+var css_248z = ".wcCheckoutButtonText-bETEx {\n  float: left;\n  margin-left: 10%;\n  font-size: 14px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0px;\n  line-height: 36.8px;\n  font-weight: 300;\n}\n\n.wcCheckoutButtonPrice-iT78h {\n  float: right;\n  margin-right: 16px;\n  font-size: 14px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0px;\n  line-height: 36.8px;\n  font-weight: 300;\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 BasketActionGold = function BasketActionGold(props) {
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx(BasketAction, _objectSpread(_objectSpread({}, props), {}, {
+    buttonTextClassName: wcCheckoutButtonText,
+    buttonPriceClassName: wcCheckoutButtonPrice,
+    price: viewHandler.productState.formatedCurSetPrice
+  }));
+};
+var ActionBasket = observer(BasketActionGold);
+
+export { ActionBasket as default };

package/build/esm/index-03cb99f0.js

@@ -0,0 +1,73 @@
+import { s as styleInject, u as useViewHandler, T as Toggle } from './index-2a04e43a.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-03f86982.js

@@ -0,0 +1,57 @@
+import { s as styleInject, u as useViewHandler } from './index-2a04e43a.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, jsx } 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 '@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';
+
+var wrapper = "wrapper-93hIM";
+var button = "button-smefE";
+var sel = "sel-vzSUc";
+var disabled = "disabled-l3E8B";
+var css_248z = ".wrapper-93hIM {\n  position: sticky;\n  top: -1px;\n  z-index: 500;\n  display: flex;\n  justify-content: space-around;\n  gap: 16px;\n  background-color: var(--settingsBackgroundColor);\n  padding: 6px;\n}\n\n.button-smefE {\n  transition: color 0.3s ease, border 0.3s ease;\n  cursor: pointer;\n  text-wrap: nowrap;\n  white-space: nowrap;\n  position: relative;\n  flex-grow: 1;\n  text-align: center;\n  padding-top: 4px;\n  padding-bottom: 4px;\n  font-size: 18px;\n}\n\n.button-smefE:hover,\n.sel-vzSUc {\n  border: none;\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE::after {\n  content: '';\n  position: absolute;\n  width: 0px;\n  left: 50%;\n  transition: all ease-in-out 0.2s;\n  bottom: 0;\n  height: 1px;\n  background-color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE.sel-vzSUc::after {\n  height: 2px;\n}\n\n.button-smefE:hover::after,\n.sel-vzSUc::after {\n  width: 100%;\n  left: 0;\n}\n.disabled-l3E8B.button-smefE:hover::after {\n  width: 0px;\n  left: 0;\n}\n\n.disabled-l3E8B.button-smefE::after {\n  background-color: lightgray;\n}\n\n.disabled-l3E8B.button-smefE {\n  color: grey;\n  cursor: not-allowed;\n}\n";
+styleInject(css_248z);
+
+var ReplaceSwitch = function ReplaceSwitch(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wrapper),
+    children: [/*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.setPlannerReplaceMode(false, true);
+      },
+      className: classnames(button, !viewHandler.settingsState.plannerReplaceMode ? sel : undefined),
+      id: "configurator_plan_tab",
+      children: t('configurator.plan')
+    }), /*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        if (viewHandler.settingsState.plannerReplaceModeAvailable) viewHandler.paletteViewHandler.setPlannerReplaceMode(true, true);
+      },
+      className: classnames(button, viewHandler.settingsState.plannerReplaceMode ? sel : undefined, !viewHandler.settingsState.plannerReplaceModeAvailable ? disabled : undefined),
+      id: "configurator_replace_tab",
+      children: t('configurator.replace')
+    })]
+  });
+};
+var ReplaceSwitch$1 = observer(ReplaceSwitch);
+
+export { ReplaceSwitch$1 as default };

package/build/esm/index-04250e75.js

@@ -0,0 +1,60 @@
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { s as styleInject, u as useViewHandler } from './index-2a04e43a.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 '@crystaldesign/diva-utils';
+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 wrapper = "wrapper-XC5WL";
+var doneBar = "doneBar-xosJY";
+var todoBar = "todoBar-sVQM-";
+var css_248z = ".wrapper-XC5WL {\n  position: absolute;\n  width: 100%;\n  height: 3px;\n  bottom: 0;\n  left: 0;\n  z-index: 2000;\n}\n\n.doneBar-xosJY {\n  background: #ccc;\n  border-radius: 0 1px 1px 0;\n  transition: width 0.35s ease-in-out;\n  height: 100%;\n}\n\n.todoBar-sVQM- {\n  background: #eee;\n  transition: width 0.35s ease-in-out;\n  height: 100%;\n}\n";
+styleInject(css_248z);
+
+var ProgressBar = function ProgressBar(_ref) {
+  var _viewHandler$configur;
+  _objectDestructuringEmpty(_ref);
+  var viewHandler = useViewHandler();
+  var lastStep = (_viewHandler$configur = viewHandler.configuratorStructureHandler) === null || _viewHandler$configur === void 0 ? void 0 : _viewHandler$configur.lastConfigStep;
+  var currentStep = viewHandler.tabGroupState.curConfigStep;
+  if (!lastStep || !currentStep) return /*#__PURE__*/jsx(Fragment, {});
+  var current = currentStep.posNr;
+  var total = lastStep.posNr;
+  var doneInPercent = total == 1 ? 0 : Math.round(current / total * 100);
+  var todoInPercent = 100 - doneInPercent;
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    children: [/*#__PURE__*/jsx("div", {
+      className: doneBar,
+      style: {
+        width: doneInPercent + '%'
+      }
+    }), /*#__PURE__*/jsx("div", {
+      className: todoBar,
+      style: {
+        width: todoInPercent + '%'
+      }
+    })]
+  });
+};
+var ProgressBar$1 = observer(ProgressBar);
+
+export { ProgressBar$1 as default };