@crystaldesign/diva-web-planner-react 26.10.0-beta.9 → 26.11.0-beta.1

package/build/esm/Planner3DImage-8f21be56.js

@@ -0,0 +1,360 @@
+import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
+import _createClass from '@babel/runtime/helpers/createClass';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-899b8922.js';
+import { Vector2, Rendering } from '@crystaldesign/web-planner-logic';
+import 'react';
+import 'react-dynamic-multi-render';
+import 'react/jsx-runtime';
+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/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var Planner3DImageUI = /*#__PURE__*/function () {
+  function Planner3DImageUI(getConfiguratorState, plannerPaletteViewInfo, settingsState) {
+    _classCallCheck(this, Planner3DImageUI);
+    this.settingsState = settingsState;
+    _defineProperty(this, "uiHTMLContainer", void 0);
+    _defineProperty(this, "classUI", 'wc3DImageUI');
+    _defineProperty(this, "getConfiguratorState", void 0);
+    _defineProperty(this, "plannerPaletteViewInfo", void 0);
+    this.getConfiguratorState = getConfiguratorState;
+    this.plannerPaletteViewInfo = plannerPaletteViewInfo;
+  }
+
+  /**
+   * This function adds the trash icon (deletion) on the 3D image.
+   * The position is computed based on the informations from the rendering
+   * @param element   The elements where the icon should be displayed
+   * @param posXPercent   The procentual X position of the deletion icon when it should be displayd on TOP_RIGHT_BACK config
+   * @param posYPercent   The procentual Y position of the deletion icon when it should be displayd on TOP_RIGHT_BACK config
+   */
+  return _createClass(Planner3DImageUI, [{
+    key: "addDelIcon",
+    value: function addDelIcon(plannerUIHandler, element, posXPercent, posYPercent) {
+      if (posXPercent > 100 || posXPercent < 0 || posYPercent > 100 || posYPercent < 0) return;
+      plannerUIHandler.addTrashIconUI(element.getSetId(), element.getElementId(), element.getRotDeg(), new Vector2(posXPercent, posYPercent, 'percentage'), element.getPlannerType() == 'BOX' ? 'BOX' : '3D');
+    }
+  }, {
+    key: "addDimensionInfo",
+    value: function addDimensionInfo(plannerUIHandler, setId, element, rendering) {
+      var alternateRenderInfo = rendering.getAlternateRenderInfo();
+      if (rendering.getAlternateRenderingsExist() && alternateRenderInfo == undefined) return; //Only display the dimensions when no door is shown
+      var elementId = element.parentElementId + '.' + element.shelfGridId + '.' + element.shelfRasterHeight;
+      var position = rendering.getLeftBottomFrontUIPos(setId, elementId);
+      if (!position) return;
+      if (position.x < 0 || position.x > 100) return;
+      if (position.y < 0 || position.y > 100) return;
+      var distVal = Math.round(rendering.getDistanceToGround(setId, elementId));
+      if (distVal == -1) return;
+      plannerUIHandler.addDistanceFromGround(setId, element.parentElementId, distVal, position);
+    }
+
+    /**
+     * This function adds the position number to the 3D image. It returns the position of the number on the screen and its width
+     * @param element
+     * @param posXPercent
+     * @param posYPercent
+     * @param elemIsSelected
+     * @param elemIsSelectable
+     */
+  }, {
+    key: "addPosNrUI",
+    value: function addPosNrUI(plannerUIHandler, element, posXPercent, posYPercent, elemIsSelected, elemIsSelectable) {
+      var _plannerUIHandler$get;
+      if (posXPercent < 0) posXPercent = 0;
+      if (posXPercent > 100) posXPercent = 100;
+      if (posYPercent < 0) posYPercent = 0;
+      if (posYPercent > 100) posYPercent = 100;
+      plannerUIHandler.addPosNrUI(element.getSetId(), element.getElementId(), element.getIsDockedAccessoire(), new Vector2(posXPercent, posYPercent, 'percentage'), element.getRotDeg(), 1, (_plannerUIHandler$get = plannerUIHandler.getPosNrByBasketId(element.getBasketId())) === null || _plannerUIHandler$get === void 0 ? void 0 : _plannerUIHandler$get.toString(), elemIsSelected ? 'selected' : elemIsSelectable ? 'selectable' : 'unselectable', '3D');
+    }
+
+    /**
+       * This function adds the docking points of the box planner. It is the docking point for docking to left and right and if the element is the top element in the colum
+       * it also adds the add to top. 
+       * @param element   The current selected element
+       * @param rendering The rendering that holds the information about the screen positions
+        */
+  }, {
+    key: "addBoxPlannerDockingPoints",
+    value: function addBoxPlannerDockingPoints(plannerUIHandler, element, rendering) {
+      var displayTopDP = false;
+      var avoDP = element.getFreeDockingPointByTypeAndNumber('AVO', 1);
+      if (avoDP != undefined && !avoDP.IsDisabled) displayTopDP = true; //The dockingpoint can be disabled when e.g. the max count of elements per col is reached
+
+      var leftCenter = rendering.getBoxPlannerCornerUIPos(element.getSetId(), element.getElementId(), 'LEFTCENTER');
+      if (leftCenter) plannerUIHandler.addCopy(element.getSetId(), element.getElementId(), 'BoxCopyLeft', leftCenter, '3D');
+      var rightCenter = rendering.getBoxPlannerCornerUIPos(element.getSetId(), element.getElementId(), 'RIGHTCENTER');
+      if (rightCenter) plannerUIHandler.addCopy(element.getSetId(), element.getElementId(), 'BoxCopyRight', rightCenter, '3D');
+      if (displayTopDP) {
+        var topCenter = rendering.getBoxPlannerCornerUIPos(element.getSetId(), element.getElementId(), 'TOPCENTER');
+        if (topCenter) plannerUIHandler.addCopy(element.getSetId(), element.getElementId(), 'BoxCopyTop', topCenter, '3D');
+      }
+    }
+  }, {
+    key: "addCopyIcon",
+    value: function addCopyIcon(plannerUIHandler, element) {
+      plannerUIHandler.addCopy(element.getSetId(), element.getElementId(), 'CopyElement', new Vector2(0, 0), '3D');
+    }
+
+    /**
+     * This function adds the accessoire DockingPoints on the 3D Image.
+     * @param element   The current element
+     * @param viewDockingPointList
+     * @param selectedDP
+     */
+  }, {
+    key: "addAccDockingPoints",
+    value: function addAccDockingPoints(plannerUIHandler, element, viewDockingPointList, typeOnly) {
+      var allDockingPoints = element.getAllDockingPoints();
+      for (var i = 0; i < allDockingPoints.length; i++) {
+        var _this$plannerPaletteV;
+        var dp = allDockingPoints[i];
+        if ((_this$plannerPaletteV = this.plannerPaletteViewInfo) !== null && _this$plannerPaletteV !== void 0 && (_this$plannerPaletteV = _this$plannerPaletteV.plannerConfiguration.hideAVButtons) !== null && _this$plannerPaletteV !== void 0 && _this$plannerPaletteV.includes(dp.Type)) continue;
+        if ((dp.Type == 'AVO' || dp.Type == 'AVC' || dp.Type == 'AVU' || dp.Type == 'AVS' || dp.Type == 'AVN') && typeOnly == undefined || typeOnly === dp.Type) {
+          for (var j = 0; j < viewDockingPointList.length; j++) {
+            if (dp.Name == viewDockingPointList[j].N) {
+              //Man kann ihn anzeigen.
+
+              plannerUIHandler.addDP(element.getSetId(), element.getElementId(), dp.DpId, 'ACC', dp.IsDocking ? 'DOCKING' : 'NOT_DOCKING', dp.OnElementId, element.getRotDeg(), 0, new Vector2(viewDockingPointList[j].x, viewDockingPointList[j].y, 'percentage'), '3D');
+            }
+          }
+        }
+      }
+    }
+  }, {
+    key: "addOutlinePolygon",
+    value: function addOutlinePolygon(plannerUIHandler, rendering, plannerElement, state, viewPortSize) {
+      var outlineInfo = rendering.getOutlinePolygonForSVG(plannerElement.getSetId(), plannerElement.getElementId(), viewPortSize);
+      if (outlineInfo) {
+        plannerUIHandler.addOutline3D(plannerElement.getSetId(), plannerElement.getElementId(), outlineInfo.points, outlineInfo.avgCamDist, state, plannerElement.getPlannerType() == 'BOX');
+      }
+    }
+
+    /**
+     * Initializes the UI of the 3D image
+     * @param htmlContainer     The html Container where the UI should be rendered into
+     */
+  }, {
+    key: "initialize",
+    value: function initialize(htmlContainer) {
+      if (!this.uiHTMLContainer) {
+        this.uiHTMLContainer = document.createElement('div');
+        this.uiHTMLContainer.classList.add(this.classUI);
+        htmlContainer.appendChild(this.uiHTMLContainer);
+      }
+    }
+
+    /**
+     * Update the UserInterface on the 3D image.
+     * @param allPlannedElements    A list
+     * @param rendering
+     * @param selectedElements
+     * @param selectableElements
+     * @param setAllElementsSelectable
+     * @param selectedDP
+     */
+  }, {
+    key: "updateUI",
+    value: function updateUI(plannerUIHandler, allPlannedElementsDict, allVisualizedNotPlannedElementsDict, rendering, selectedElementsDict, selectableElementsDict, setAllElementsSelectable, selectedDP, viewPortSize) {
+      var _this = this;
+      //Run through all position Elements and look if they are visible in the UIInfo
+
+      plannerUIHandler.clear2D3DViewerUI();
+      allPlannedElementsDict.forEach(function (allPlannedElements, setId) {
+        for (var i = 0; i < allPlannedElements.length; i++) {
+          var element = allPlannedElements[i];
+          if (!rendering.hasUIInfosOfElement(element.getSetId(), element.getElementId())) continue;
+          var elemIsSelected = false;
+          var elemIsSelectable = setAllElementsSelectable;
+          //TODO only show number of acccessoire if one of the accessoires or parent is selected
+          if (selectedElementsDict.has(setId)) {
+            var selectedElements = selectedElementsDict.get(setId);
+            var selectedElemetIds = selectedElements.map(function (item) {
+              return item.getElementId();
+            });
+            elemIsSelected = selectedElemetIds.includes(element.getElementId());
+          }
+          if (!elemIsSelected && !setAllElementsSelectable) {
+            if (selectableElementsDict.has(setId)) {
+              var selectableElements = selectableElementsDict.get(setId);
+              for (var j = 0; j < selectableElements.length; j++) {
+                if (element.getElementId() == selectableElements[j].getElementId()) {
+                  elemIsSelectable = true;
+                  break;
+                }
+              }
+            }
+          }
+          _this.addOutlinePolygon(plannerUIHandler, rendering, element, elemIsSelected ? 'selected' : elemIsSelectable ? 'selectable' : 'unselectable', viewPortSize);
+          switch (element.getPlannerType()) {
+            case 'STD':
+              {
+                var isPlanner = ['PLANNER', 'PRODUCTS', 'PROMOTED', 'PLANNER_2.0'].includes(_this.getConfiguratorState());
+                var _elemUIInfo = rendering.getLeftTopBackUIPos(element.getSetId(), element.getElementId());
+                if (_elemUIInfo && (!_this.settingsState.posNrAreHidden || isPlanner)) _this.addPosNrUI(plannerUIHandler, element, _elemUIInfo.x, _elemUIInfo.y, elemIsSelected, elemIsSelectable);
+                if (elemIsSelected) {
+                  if (isPlanner) {
+                    if (element.getIsDockedAccessoire()) {
+                      _this.addAccDockingPoints(plannerUIHandler, element, rendering.getAllDockingPoints(element.getSetId(), element.getElementId()), 'AVO');
+                    } else {
+                      _this.addAccDockingPoints(plannerUIHandler, element, rendering.getAllDockingPoints(element.getSetId(), element.getElementId()));
+                    }
+                    var _elemUIInfo2 = rendering.getRightTopBackUIPos(element.getSetId(), element.getElementId());
+                    _this.addDelIcon(plannerUIHandler, element, _elemUIInfo2.x, _elemUIInfo2.y);
+                    _this.addCopyIcon(plannerUIHandler, element);
+                  }
+                }
+                //if this is the ACC_PLANNER step the accessoreis show the deleteIcon
+                if (_this.getConfiguratorState() == 'ACC_PLANNER' && element.getIsDockedAccessoire()) {
+                  var _elemUIInfo3 = rendering.getRightTopBackUIPos(element.getSetId(), element.getElementId());
+                  _this.addDelIcon(plannerUIHandler, element, _elemUIInfo3.x, _elemUIInfo3.y);
+                }
+              }
+              break;
+            case 'BOX':
+              var elemUIInfo = rendering.getBoxPlannerCornerUIPos(element.getSetId(), element.getElementId(), 'RIGHTTOPFRONT');
+              if (elemUIInfo) {
+                _this.addPosNrUI(plannerUIHandler, element, elemUIInfo.x, elemUIInfo.y, elemIsSelected, elemIsSelectable);
+              }
+              if (elemIsSelected) {
+                _this.addBoxPlannerDockingPoints(plannerUIHandler, element, rendering);
+                if (!_this.checkBoxPlannerSingleElement(allPlannedElements) && element.getFreeDockingPointByTypeAndNumber('AVO', 1) != undefined) {
+                  //Only display Delete Icon for boxPlanner when there is more than 1 element and the element has no element on top
+                  var posBoxTrash = rendering.getBoxPlannerCornerUIPos(element.getSetId(), element.getElementId(), 'RIGHTTOPFRONT');
+                  if (posBoxTrash) _this.addDelIcon(plannerUIHandler, element, posBoxTrash.x, posBoxTrash.y);
+                }
+              }
+              break;
+          }
+        }
+      });
+      allVisualizedNotPlannedElementsDict.forEach(function (allVisualizedNotPlannedElements, setId) {
+        for (var i = 0; i < allVisualizedNotPlannedElements.length; i++) {
+          var element = allVisualizedNotPlannedElements[i];
+          if (element.isShelfAcc) _this.addDimensionInfo(plannerUIHandler, setId, element, rendering);
+        }
+      });
+    }
+
+    /**
+     * This function returns true if only one Element is left.
+     * If the backside module is activated, it is also one element left, if the two are opposite
+     */
+  }, {
+    key: "checkBoxPlannerSingleElement",
+    value: function checkBoxPlannerSingleElement(allPlannerElements) {
+      if (allPlannerElements.length == 1) return true;
+      if (allPlannerElements.length == 2) {
+        var dockingPoints1 = allPlannerElements[0].getAllDockingPoints();
+        var dockingPoints2 = allPlannerElements[0].getAllDockingPoints();
+        for (var i = 0; i < dockingPoints1.length; i++) {
+          var dockingPoint1 = dockingPoints1[i];
+          for (var j = 0; j < dockingPoints2.length; j++) {
+            var dockingPoint2 = dockingPoints2[j];
+            if (dockingPoint1.IsDocking && dockingPoint2.IsDocking && dockingPoint1.Number == 2 && dockingPoint2.Number == 2 && (dockingPoint1.Type == 'AVO' || dockingPoint1.Type == 'AVU')) return true;
+          }
+        }
+      }
+      return false;
+    }
+
+    /**-------------------------Getter ------------------------------- */
+  }, {
+    key: "Class3DUI",
+    get: function get() {
+      return this.classUI;
+    }
+  }]);
+}();
+
+var Planner3DImage = /*#__PURE__*/function () {
+  function Planner3DImage(getConfiguratorState, update3DImgSrcInView, onDoShowNav3DChanged, plannerPaletteViewInfo, settingsState) {
+    _classCallCheck(this, Planner3DImage);
+    _defineProperty(this, "imageContainer", undefined);
+    _defineProperty(this, "UIHandler", void 0);
+    _defineProperty(this, "curRendering", void 0);
+    _defineProperty(this, "update3DImgSrcInView", void 0);
+    _defineProperty(this, "onDoShowNav3DChanged", void 0);
+    this.UIHandler = new Planner3DImageUI(getConfiguratorState, plannerPaletteViewInfo, settingsState);
+    this.curRendering = new Rendering('Placeholder', 'Placeholder', '', -1, -1, false, false, 0, false, 'STREAM');
+    this.onDoShowNav3DChanged = onDoShowNav3DChanged;
+    this.update3DImgSrcInView = update3DImgSrcInView;
+  }
+  /*
+    private onDragStart = (e: any) => {
+        e.preventDefault();
+    };
+    */
+  /**
+   * This function is called to initialize the view of the 3D Image. All HTML components are created.
+   * @param htmlElementID The Html Id where the image should be rendered
+   */
+  return _createClass(Planner3DImage, [{
+    key: "initialize",
+    value: function initialize(htmlElementID) {
+      this.imageContainer = document.getElementById(htmlElementID);
+      if (this.imageContainer) {
+        this.UIHandler.initialize(this.imageContainer);
+      }
+    }
+
+    /**
+     * Clear all views - 2D Grid and 3D image
+     */
+  }, {
+    key: "clearView",
+    value: function clearView() {
+      this.curRendering = new Rendering('Placeholder', 'Placeholder', '', -1, -1, false, false, 0, false, 'STREAM');
+      this.update3DImgSrcInView('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); //"data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" basis a blank white image
+    }
+
+    /**
+     * This function is called when the user Interface of the current rendering has to be updated. This can be the case when the planner Changed or the configurator step changed.
+     * @param selectedElements
+     * @param selectableElements
+     * @param setAllElementsSelectable if this is set the elements in the selectableElements are ignored and all Elements that are not selected are declared to be selectable
+     */
+  }, {
+    key: "updateUI",
+    value: function updateUI(plannerUIHandler, allPlannedElements, allVisualizedNotPlannedElements, selectedElementsDict, selectableElements, setAllElementsSelectable, selectedDP, viewPortSize) {
+      this.UIHandler.updateUI(plannerUIHandler, allPlannedElements, allVisualizedNotPlannedElements, this.curRendering, selectedElementsDict, selectableElements, setAllElementsSelectable, selectedDP, viewPortSize);
+    }
+
+    /**
+     * This function is called when a new rendering should displayed on the screen.
+     * This function handels also the positioning of posnum etc.
+     * @param rendering     The rendering to display
+     */
+  }, {
+    key: "updatePlannerView",
+    value: function updatePlannerView(rendering) {
+      var prevImageHasStaticBG = this.curRendering.getHasStaticBackground();
+      var curImageHasStaticBG = rendering.getHasStaticBackground();
+      if (prevImageHasStaticBG != curImageHasStaticBG) {
+        this.onDoShowNav3DChanged(!curImageHasStaticBG);
+      }
+      this.curRendering = rendering;
+      this.update3DImgSrcInView(rendering.getImageForSrc());
+    }
+  }, {
+    key: "resetSelectedElementsOnEnterPlannerMode",
+    value: function resetSelectedElementsOnEnterPlannerMode() {
+      return false;
+    }
+  }]);
+}();
+
+export { Planner3DImage as default };

package/build/esm/UnlockCard-3fb76e70.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-899b8922.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-0029288b.js

@@ -0,0 +1,33 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-899b8922.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+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';
+
+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 ItemVariant = function ItemVariant(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "TabGroup/TabGroupHorizontal/item"
+  }));
+};
+
+export { ItemVariant as default };