@crystaldesign/diva-web-planner-react 26.6.0-beta.9 → 26.6.0-rc.0

package/build/esm/UnlockCard-222a8944.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-ce7786d2.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-00dd7c39.js

@@ -0,0 +1,57 @@
+import { s as styleInject, u as useViewHandler } from './index-ce7786d2.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/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+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-0476f1e9.js

@@ -0,0 +1,89 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-ce7786d2.js';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { jsxs, Fragment, jsx } 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/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 inputBox = "input-box-NpxK9";
+var mobile = "mobile-OhbeO";
+var css_248z = ".input-box-NpxK9 {\n  width: 70px;\n  font-size: 20px;\n  height: 22px;\n}\n\n.input-box-NpxK9.mobile-OhbeO {\n  font-size: 16px;\n  height: 18px;\n  width: 50px;\n}\n";
+styleInject(css_248z);
+
+var NumberInput = function NumberInput(_ref) {
+  var item = _ref.item;
+  var viewHandler = useViewHandler();
+  var _useState = useState(item.numberInput),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputGotChangedByComponent = _useState4[0],
+    setInputGotChangedByComponent = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    invalidValue = _useState6[0],
+    setInvalidValue = _useState6[1];
+  useEffect(function () {
+    var _item$groups;
+    var opvItem = (_item$groups = item.groups) === null || _item$groups === void 0 || (_item$groups = _item$groups[0].items) === null || _item$groups === void 0 ? void 0 : _item$groups[0];
+    if (inputValue && opvItem && !isNaN(inputValue) && Number(opvItem.measureMinimum) <= inputValue && Number(opvItem.measureMaximum) >= inputValue) {
+      setInvalidValue(false);
+      if (inputValue !== Number(opvItem.freeText)) {
+        if (inputGotChangedByComponent) {
+          setInputGotChangedByComponent(false);
+          onRangeChange(opvItem);
+        }
+      }
+    } else {
+      setInvalidValue(true);
+    }
+  }, [inputValue]);
+  useEffect(function () {
+    setInputValue(item.numberInput);
+  }, [item]);
+  var onRangeChange = function onRangeChange(opvItem) {
+    if (inputValue) {
+      viewHandler.paletteViewHandler.onRangeClickChange(item, opvItem, inputValue.toString());
+    }
+  };
+  var onChange = function onChange(e) {
+    var newVal = Number(e.target.value);
+    if (newVal >= 0) {
+      setInputGotChangedByComponent(true);
+      setInputValue(newVal);
+    }
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [': ', /*#__PURE__*/jsx("input", {
+      className: classnames(inputBox, viewHandler.uiState.isInMobileView ? mobile : undefined),
+      onChange: onChange,
+      style: {
+        color: invalidValue ? 'red' : undefined
+      },
+      type: "number",
+      value: inputValue
+    }), ' ', item.measureUnit]
+  });
+};
+var NumberInput$1 = observer(NumberInput);
+
+export { NumberInput$1 as default };

package/build/esm/index-04e05d1b.js

@@ -0,0 +1,159 @@
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { s as styleInject, u as useViewHandler } from './index-ce7786d2.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useState, useEffect } from 'react';
+import StepInfo from './index-2084a9d9.js';
+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/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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var paletteItem = "palette-item-F-QYy";
+var wcTextBox = "wcTextBox-lKT8X";
+var headerTitle = "headerTitle-RuXs-";
+var css_248z = ".palette-item-F-QYy {\n  border-radius: var(--globalBorderRadius);\n  /* background: white; */\n  position: relative;\n  display: flex;\n  width: 100%;\n  z-index: 100;\n}\n\n.palette-item-F-QYy > div {\n  width: 100%;\n}\n.wcTextBox-lKT8X {\n  width: 100%;\n\n  max-width: 120px;\n  padding: 12px 5px;\n  margin: 8px 0;\n  display: inline-block;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.headerTitle-RuXs- {\n  padding-top: 6px;\n  padding-left: 6px;\n  font-weight: 300;\n  font-size: 14px;\n}\n\n/*Hide Arrows*/\n.palette-item-F-QYy input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n/* Firefox */\n.palette-item-F-QYy input[type='number'] {\n  -moz-appearance: textfield;\n}\n";
+styleInject(css_248z);
+
+var NumberBox = function NumberBox(_ref) {
+  var _itemPalette$selected, _itemPalette$selected4, _itemPalette$info, _viewHandler$getViewC, _itemPalette$selected5;
+  var itemP = _ref.item,
+    paletteId = _ref.paletteId;
+  var item = itemP;
+  var throttleRef = useRef(null);
+  var viewHandler = useViewHandler();
+  var itemPalette = viewHandler.settingsState.itemPalettes.get(paletteId);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    userInFocus = _useState2[0],
+    setUserInFocus = _useState2[1];
+  var _useState3 = useState(itemPalette === null || itemPalette === void 0 || (_itemPalette$selected = itemPalette.selectedElements) === null || _itemPalette$selected === void 0 || (_itemPalette$selected = _itemPalette$selected[0]) === null || _itemPalette$selected === void 0 ? void 0 : _itemPalette$selected.freeText),
+    _useState4 = _slicedToArray(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var isDefined = true;
+  if (itemPalette) {
+    var step = viewHandler.configuratorStructureHandler.getConfigStepByKey(itemPalette.configStepKey);
+    if (step) isDefined = step.configStep.isDefined;
+  }
+  if (!itemPalette) return /*#__PURE__*/jsx(Fragment, {});
+  var handleChange = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+      var _e$target$value;
+      var value;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            value = (_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : '';
+            if (!e.target.value.endsWith('.')) {
+              _context.next = 4;
+              break;
+            }
+            setValue(e.target.value);
+            return _context.abrupt("return");
+          case 4:
+            value = value.replace(/[^0-9.,]/g, '');
+            if (value.includes(',') && viewHandler.getViewConfig().allowComma) value = value.replace(/\,/g, '.');
+
+            //delay logic update for 500ms
+            if (throttleRef.current) clearTimeout(throttleRef.current);
+            throttleRef.current = setTimeout(function () {
+              return updateLogic(value);
+            }, 500);
+            setValue(value);
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleChange(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var updateLogic = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!itemPalette) {
+              _context2.next = 3;
+              break;
+            }
+            _context2.next = 3;
+            return viewHandler.paletteViewHandler.onRangeClickChange(itemPalette, item, value);
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function updateLogic(_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    var _itemPalette$selected2, _itemPalette$selected3;
+    setValue((_itemPalette$selected2 = (_itemPalette$selected3 = itemPalette.selectedElements) === null || _itemPalette$selected3 === void 0 || (_itemPalette$selected3 = _itemPalette$selected3[0]) === null || _itemPalette$selected3 === void 0 ? void 0 : _itemPalette$selected3.freeText) !== null && _itemPalette$selected2 !== void 0 ? _itemPalette$selected2 : '');
+  }, [(_itemPalette$selected4 = itemPalette.selectedElements) === null || _itemPalette$selected4 === void 0 || (_itemPalette$selected4 = _itemPalette$selected4[0]) === null || _itemPalette$selected4 === void 0 ? void 0 : _itemPalette$selected4.freeText]);
+  return /*#__PURE__*/jsxs("div", {
+    ref: function ref(_ref4) {
+      if (itemPalette) itemPalette.htmlRef = _ref4;
+    },
+    style: {
+      display: 'block'
+    },
+    children: [itemPalette && /*#__PURE__*/jsx("div", {
+      className: headerTitle,
+      children: itemPalette.name
+    }), (!userInFocus || !((_itemPalette$info = itemPalette.info) !== null && _itemPalette$info !== void 0 && _itemPalette$info.hideDuringUserInput)) && /*#__PURE__*/jsx(StepInfo, {
+      stepInfo: itemPalette.info
+    }), /*#__PURE__*/jsx("div", {
+      className: paletteItem,
+      children: /*#__PURE__*/jsx("div", {
+        style: {
+          margin: '5px'
+        },
+        children: /*#__PURE__*/jsx("input", {
+          onBlur: function onBlur() {
+            setUserInFocus(false);
+          },
+          onFocus: function onFocus() {
+            var _itemPalette$info2;
+            setUserInFocus(!((_itemPalette$info2 = itemPalette.info) !== null && _itemPalette$info2 !== void 0 && _itemPalette$info2.hideDuringUserInput));
+          },
+          autoFocus: viewHandler.getViewConfig().autoFocusForInput,
+          lang: "en-150",
+          className: wcTextBox,
+          placeholder: !((_viewHandler$getViewC = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC !== void 0 && _viewHandler$getViewC.hideMeasureUnit) ? 'In ' + item.measureUnit : undefined,
+          onChange: handleChange,
+          step: "0.01",
+          onKeyDown: function onKeyDown(e) {
+            if (!viewHandler.getViewConfig().allowComma && (e.key === '.' || e.key === ',')) {
+              e.preventDefault();
+            }
+          },
+          value: value,
+          defaultValue: isDefined ? (_itemPalette$selected5 = itemPalette.selectedElements) === null || _itemPalette$selected5 === void 0 || (_itemPalette$selected5 = _itemPalette$selected5[0]) === null || _itemPalette$selected5 === void 0 ? void 0 : _itemPalette$selected5.freeText : undefined
+        })
+      })
+    })]
+  });
+};
+var NumberBox$1 = observer(NumberBox);
+
+export { NumberBox$1 as default };

package/build/esm/index-04e850e8.js

@@ -0,0 +1,41 @@
+import { s as styleInject } from './index-ce7786d2.js';
+import ProductHeader from './index-86088cbb.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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/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-de63765f.js';
+import './index-e4a02474.js';
+import '@crystaldesign/content-box';
+import './useCustomDimensions-2f7f6ef6.js';
+import '@crystaldesign/content-item';
+
+var productHeader = "productHeader-oJxLo";
+var css_248z = ".productHeader-oJxLo {\n  font-weight: 300 !important;\n}\n";
+styleInject(css_248z);
+
+var ProductHeaderBlue = function ProductHeaderBlue(props) {
+  return /*#__PURE__*/jsx(ProductHeader, {
+    productClass: productHeader
+  });
+};
+
+export { ProductHeaderBlue as default };