@crystaldesign/diva-web-planner-react 26.5.0-beta.9 → 26.5.0-rc.1

package/build/esm/{index-efbd49c1.js → index-c3840350.js}

@@ -1,16 +1,16 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { s as styleInject, u as useViewHandler, a as useAnalyzerComponents, M as MissingAnalyzerComponent } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler, a as useAnalyzerComponents, M as MissingAnalyzerComponent } from './index-87690a5b.js';
 import { observer } from 'mobx-react-lite';
 import { useEffect, createElement } from 'react';
-import Product from './index-301bae1a.js';
-import Sidebar from './index-8f79f883.js';
+import Product from './index-969ccaa2.js';
+import Sidebar from './index-3895196f.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import 'react-dynamic-multi-render';
 import '@crystaldesign/diva-core';
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/regenerator';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';
@@ -24,104 +24,104 @@ import '@babel/runtime/helpers/typeof';
 import 'flat';
 import 'react-switch';
 import 'react-countup';
-import './index-c7334423.js';
-import './index-a91bf001.js';
+import './index-a299646e.js';
+import './index-eec1a6f8.js';
 import '@crystaldesign/content-item';
-import './index-f0407656.js';
-import './index-1d1c3714.js';
-import './index-5ecfdc6f.js';
+import './index-292f2883.js';
+import './index-7c34d797.js';
+import './index-80c49623.js';
 import 'sift';
-import './index-68dc625a.js';
-import './index-0cb7f8c1.js';
-import './index-7cc03952.js';
-import './index-1f14f1f5.js';
-import './index.module-b5494b57.js';
-import './index-673ca36d.js';
-import './index-addd466a.js';
+import './index-2a630a5f.js';
+import './index-76a9958a.js';
+import './index-9caac398.js';
+import './index-cfb0bc69.js';
+import './index.module-84be22a3.js';
+import './index-53540b2b.js';
+import './index-9294fdd8.js';
 import '@mui/icons-material/Block';
 import '@mui/icons-material/Warning';
-import './index-8c660cb4.js';
+import './index-956a1303.js';
 import 'react-dropdown';
-import './index-48f46d16.js';
-import './index-40c3aa55.js';
-import './index-64e04ea8.js';
-import './index-ce74bb99.js';
+import './index-735d5dd5.js';
+import './index-ef5e9f57.js';
+import './index-8df53bb0.js';
+import './index-2a2844a2.js';
 import '@crystaldesign/content-box';
-import './index-42bf7ba6.js';
-import './index-320d6231.js';
-import './index-6a541dc9.js';
-import './index-1cc89593.js';
+import './index-bc361961.js';
+import './index-6a81080c.js';
+import './index-c64850f6.js';
+import './index-ccdaebad.js';
 import 'swiper/react';
 import 'swiper/modules';
-import './UnlockCard-a9c0a340.js';
-import './index-072379d9.js';
-import './index-ce3fd2dd.js';
-import './index-03a87736.js';
-import './index-50d81f2b.js';
-import './index-566ac26c.js';
-import './index-1ad6bc31.js';
+import './UnlockCard-0e5de921.js';
+import './index-80cf23e6.js';
+import './index-7371cc32.js';
+import './index-036ea415.js';
+import './index-d38cb2e4.js';
+import './index-10a0aaa6.js';
+import './index-a2c9a2b2.js';
 import 'react-laag';
-import './index.module-c5baf242.js';
-import './index-c19b15a9.js';
-import './index-769e119f.js';
-import './index-b2975c88.js';
-import './index-2efb3634.js';
-import './index-461dc61a.js';
-import './index.module-021d9040.js';
-import './index-270ed7ab.js';
-import './index-939c3fcb.js';
-import './index-756bfb44.js';
-import './index-667b836d.js';
-import './index-49b0ca7b.js';
-import './index-a19c4968.js';
-import './index-d372aea8.js';
-import './index-edcfe7ed.js';
-import './index-9c7fedf7.js';
-import './index-c773cfe3.js';
-import './index-1870516b.js';
-import './index-5baa5713.js';
-import './index-f700d17e.js';
+import './index.module-6edd1343.js';
+import './index-d6b4117f.js';
+import './index-2113347c.js';
+import './index-bcdc4e78.js';
+import './index-bf1bb816.js';
+import './index-f0fe1313.js';
+import './index.module-4d0cce0b.js';
+import './index-c9ff51e5.js';
+import './index-ee191171.js';
+import './index-5859a688.js';
+import './index-e5181f71.js';
+import './index-99d4bea2.js';
+import './index-9fd12b17.js';
+import './index-0a21882a.js';
+import './index-c4f1f611.js';
+import './index-3b2ddda4.js';
+import './index-62051fb4.js';
+import './index-bd6471df.js';
+import './index-f405957c.js';
+import './index-5d9be97d.js';
 import 'rc-slider';
-import './index-c4d43896.js';
-import './index-bd25e428.js';
-import './index-604c3548.js';
-import './index-4cf7766e.js';
-import './index-1c502ce6.js';
+import './index-22d0e084.js';
+import './index-c21e16b7.js';
+import './index-ceb6f2e6.js';
+import './index-3cd6b301.js';
+import './index-beaa268e.js';
 import 'react-confetti-explosion';
-import './index-068afe56.js';
-import './index-763b36fa.js';
-import './index-9774366c.js';
+import './index-9625dd72.js';
+import './index-ea77111b.js';
+import './index-e18dc0ba.js';
 import 'react-qr-code';
-import './index-3fb7c01c.js';
-import './useCustomDimensions-a17f4739.js';
-import './index-130b910c.js';
-import './ussIsSticky-5a77c7e9.js';
-import './index-5fb8aeca.js';
-import './index-1219ff6b.js';
-import './index-032aa00e.js';
-import './index.module-4770510d.js';
-import './index-67fa18f0.js';
-import './index-388444e2.js';
-import './index-b0549eeb.js';
-import './index-53b09faa.js';
-import './index-3e55bccb.js';
-import './index-40c30570.js';
-import './index-434fb5f6.js';
-import './index-cb4d86b8.js';
-import './index-a7010742.js';
-import './index-1b0bbf85.js';
-import './index.module-0292f388.js';
-import './index-1d089060.js';
-import './index-6de67722.js';
-import './index-b6980bff.js';
-import './index-c71624cc.js';
-import './index-87aadcf4.js';
-import './index-89ee46c7.js';
-import './index-e86bc2cc.js';
-import './index-c9b969c6.js';
-import './index-3d38a038.js';
-import './index-20069ffe.js';
-import './index-75c88f3c.js';
+import './index-77316c45.js';
+import './useCustomDimensions-b81dea5f.js';
+import './index-c57a329b.js';
+import './ussIsSticky-9a789d46.js';
+import './index-13953401.js';
+import './index-56f985be.js';
+import './index-b7a3f3a5.js';
+import './index.module-dee7d954.js';
+import './index-d2d015e2.js';
+import './index-183061d9.js';
+import './index-15392d3b.js';
+import './index-1f64159d.js';
+import './index-ad94b0db.js';
+import './index-5e31da98.js';
+import './index-f3bd61b0.js';
+import './index-95163002.js';
+import './index-44b403f5.js';
+import './index-548831ce.js';
+import './index.module-d0221b96.js';
+import './index-8297b5a7.js';
+import './index-249b0ad2.js';
+import './index-a2197de6.js';
+import './index-f2788552.js';
+import './index-04649c6f.js';
+import './index-ed319bd8.js';
+import './index-82466b67.js';
+import './index-b36ce14b.js';
+import './index-482acfd3.js';
+import './index-219ec315.js';
+import './index-372dc453.js';
 
 var list = "list-N44Jp";
 var css_248z = ".whole-wrapper-5OM64 {\n  position: absolute;\n  margin-left: 50px;\n  height: 92%;\n  background-color: var(--settingsBackgroundColor);\n  padding-left: 5px;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  box-shadow: inset 0px 4px 40px 1px rgba(0, 0, 0, 0.1);\n  border-right: 2px solid;\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n}\n.not-expanded-A0UYP {\n  width: calc(25.5%) !important;\n}\n.not-expanded-A0UYP {\n  background-color: white;\n}\n.list-N44Jp {\n  width: calc(63% - 50px) !important;\n}\n.list-N44Jp {\n  z-index: 590;\n  background-color: rgba(250, 250, 250, 0.5);\n  margin-left: 50px;\n  /*width: calc(69% - 50px); pfister*/\n}\n";

package/build/esm/{index-4ef502fc.js → index-c4272c2c.js}

@@ -1,15 +1,15 @@
-import { s as styleInject } from './index-22049a2e.js';
+import { s as styleInject } from './index-87690a5b.js';
 import 'react';
 import classnames from 'classnames';
 import { useTranslation } from '@crystaldesign/diva-core';
-import { g as getKey } from './index-5ecfdc6f.js';
+import { g as getKey } from './index-80c49623.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
 import 'mobx-react-lite';
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/regenerator';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';
@@ -23,80 +23,80 @@ import 'flat';
 import 'react-switch';
 import 'react-countup';
 import 'sift';
-import './index-68dc625a.js';
-import './index-0cb7f8c1.js';
-import './index-7cc03952.js';
-import './index-1f14f1f5.js';
-import './index.module-b5494b57.js';
-import './index-673ca36d.js';
-import './index-addd466a.js';
+import './index-2a630a5f.js';
+import './index-76a9958a.js';
+import './index-9caac398.js';
+import './index-cfb0bc69.js';
+import './index.module-84be22a3.js';
+import './index-53540b2b.js';
+import './index-9294fdd8.js';
 import '@mui/icons-material/Block';
 import '@mui/icons-material/Warning';
-import './index-8c660cb4.js';
+import './index-956a1303.js';
 import 'react-dropdown';
-import './index-48f46d16.js';
+import './index-735d5dd5.js';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-40c3aa55.js';
-import './index-64e04ea8.js';
-import './index-ce74bb99.js';
+import './index-ef5e9f57.js';
+import './index-8df53bb0.js';
+import './index-2a2844a2.js';
 import '@crystaldesign/content-box';
-import './index-42bf7ba6.js';
-import './index-320d6231.js';
-import './index-6a541dc9.js';
-import './index-1cc89593.js';
+import './index-bc361961.js';
+import './index-6a81080c.js';
+import './index-c64850f6.js';
+import './index-ccdaebad.js';
 import 'swiper/react';
 import 'swiper/modules';
-import './UnlockCard-a9c0a340.js';
-import './index-072379d9.js';
-import './index-ce3fd2dd.js';
-import './index-03a87736.js';
-import './index-50d81f2b.js';
-import './index-566ac26c.js';
-import './index-1ad6bc31.js';
+import './UnlockCard-0e5de921.js';
+import './index-80cf23e6.js';
+import './index-7371cc32.js';
+import './index-036ea415.js';
+import './index-d38cb2e4.js';
+import './index-10a0aaa6.js';
+import './index-a2c9a2b2.js';
 import 'react-laag';
-import './index.module-c5baf242.js';
-import './index-c19b15a9.js';
-import './index-769e119f.js';
-import './index-b2975c88.js';
-import './index-2efb3634.js';
-import './index-461dc61a.js';
-import './index.module-021d9040.js';
-import './index-270ed7ab.js';
-import './index-939c3fcb.js';
-import './index-756bfb44.js';
-import './index-667b836d.js';
-import './index-49b0ca7b.js';
-import './index-a19c4968.js';
-import './index-d372aea8.js';
-import './index-edcfe7ed.js';
-import './index-9c7fedf7.js';
-import './index-c773cfe3.js';
-import './index-1870516b.js';
-import './index-5baa5713.js';
-import './index-f700d17e.js';
+import './index.module-6edd1343.js';
+import './index-d6b4117f.js';
+import './index-2113347c.js';
+import './index-bcdc4e78.js';
+import './index-bf1bb816.js';
+import './index-f0fe1313.js';
+import './index.module-4d0cce0b.js';
+import './index-c9ff51e5.js';
+import './index-ee191171.js';
+import './index-5859a688.js';
+import './index-e5181f71.js';
+import './index-99d4bea2.js';
+import './index-9fd12b17.js';
+import './index-0a21882a.js';
+import './index-c4f1f611.js';
+import './index-3b2ddda4.js';
+import './index-62051fb4.js';
+import './index-bd6471df.js';
+import './index-f405957c.js';
+import './index-5d9be97d.js';
 import 'rc-slider';
-import './index-c4d43896.js';
-import './index-bd25e428.js';
-import './index-604c3548.js';
-import './index-4cf7766e.js';
-import './index-1c502ce6.js';
+import './index-22d0e084.js';
+import './index-c21e16b7.js';
+import './index-ceb6f2e6.js';
+import './index-3cd6b301.js';
+import './index-beaa268e.js';
 import 'react-confetti-explosion';
-import './index-068afe56.js';
-import './index-763b36fa.js';
-import './index-9774366c.js';
+import './index-9625dd72.js';
+import './index-ea77111b.js';
+import './index-e18dc0ba.js';
 import 'react-qr-code';
-import './index-3fb7c01c.js';
-import './useCustomDimensions-a17f4739.js';
-import './index-130b910c.js';
-import './ussIsSticky-5a77c7e9.js';
-import './index-5fb8aeca.js';
-import './index-1219ff6b.js';
-import './index-032aa00e.js';
-import './index.module-4770510d.js';
-import './index-67fa18f0.js';
-import './index-388444e2.js';
-import './index-b0549eeb.js';
-import './index-53b09faa.js';
+import './index-77316c45.js';
+import './useCustomDimensions-b81dea5f.js';
+import './index-c57a329b.js';
+import './ussIsSticky-9a789d46.js';
+import './index-13953401.js';
+import './index-56f985be.js';
+import './index-b7a3f3a5.js';
+import './index.module-dee7d954.js';
+import './index-d2d015e2.js';
+import './index-183061d9.js';
+import './index-15392d3b.js';
+import './index-1f64159d.js';
 
 var container = "container-UuJhj";
 var title = "title-f6urG";

package/build/esm/{index-edcfe7ed.js → index-c4f1f611.js}

@@ -1,17 +1,17 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler, G as GenericToolTip, P as PricePreview } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler, G as GenericToolTip, P as PricePreview } from './index-87690a5b.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import MetaData from './index-a19c4968.js';
-import InfoIcon from './index-673ca36d.js';
+import MetaData from './index-9fd12b17.js';
+import InfoIcon from './index-53540b2b.js';
 import { useHover, useLayer } from 'react-laag';
 import { useDivaCore } from '@crystaldesign/diva-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/regenerator';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';

package/build/esm/{index-130b910c.js → index-c57a329b.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler, b as PriceCounter } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler, b as PriceCounter } from './index-87690a5b.js';
 import { observer } from 'mobx-react-lite';
 import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
 import { useState, useEffect } from 'react';
@@ -7,8 +7,8 @@ import classnames from 'classnames';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/regenerator';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';
@@ -31,11 +31,11 @@ var title = "title-1Yq19";
 var mobile = "mobile-Oy5-9";
 var small = "small-2vDXh";
 var percentage = "percentage--8-xl";
-var css_248z = ".wrapper-1wXYE {\n  position: sticky;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin-bottom: 8px;\n  white-space: nowrap;\n}\n\n.priceWrapper-oLrQ1 {\n  display: flex;\n  flex-direction: row;\n  gap: 16px;\n  width: 100%;\n  justify-content: space-between;\n  flex-wrap: nowrap;\n}\n\n.price-aaYz6 {\n  font-size: 18px;\n  line-height: 18px;\n  font-size: 24px;\n  line-height: 24px;\n  color: rgba(17, 24, 39, 1);\n  font-weight: 700;\n}\n.rabattVisible-npE0I .price-aaYz6 {\n  color: rgb(220, 38, 38);\n}\n\n.brutto-T4loO {\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 300;\n  color: rgba(107, 114, 128, 1);\n  -webkit-text-decoration-line: line-through;\n          text-decoration-line: line-through;\n  display: none;\n}\n.rabattVisible-npE0I .brutto-T4loO {\n  display: block;\n}\n\n.title-1Yq19 {\n  width: auto;\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  color: var(--secondaryColor);\n  margin-top: 10px;\n  float: left;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  text-align: center;\n}\n\n.mobile-Oy5-9 .title-1Yq19,\n.small-2vDXh .title-1Yq19 {\n  font-size: 16px;\n  line-height: 20px;\n}\n\n.percentage--8-xl {\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 16px;\n  color: #fff;\n  padding: 4px 8px;\n  border-radius: 40px;\n  background-color: rgb(220, 38, 38);\n}\n";
+var css_248z = ".wrapper-1wXYE {\n  position: sticky;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin-bottom: 8px;\n  white-space: nowrap;\n}\n\n.priceWrapper-oLrQ1 {\n  display: flex;\n  flex-direction: row;\n  gap: 16px;\n  width: 100%;\n  justify-content: space-between;\n  flex-wrap: nowrap;\n}\n\n.price-aaYz6 {\n  font-size: 18px;\n  line-height: 18px;\n  font-size: 24px;\n  line-height: 24px;\n  color: rgba(17, 24, 39, 1);\n  font-weight: 700;\n}\n.rabattVisible-npE0I .price-aaYz6 {\n  color: rgb(220, 38, 38);\n}\n\n.brutto-T4loO {\n  font-size: 18px;\n  line-height: 24px;\n  font-weight: 300;\n  color: rgba(107, 114, 128, 1);\n  -webkit-text-decoration-line: line-through;\n          text-decoration-line: line-through;\n  display: none;\n}\n.rabattVisible-npE0I .brutto-T4loO {\n  display: block;\n}\n\n.title-1Yq19 {\n  width: auto;\n  font-weight: 500;\n  font-size: 22px;\n  line-height: 24px;\n  color: var(--secondaryColor);\n  margin-top: 18px;\n  float: left;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.mobile-Oy5-9 .title-1Yq19,\n.small-2vDXh .title-1Yq19 {\n  font-size: 20px;\n  line-height: 22px;\n}\n\n.percentage--8-xl {\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 16px;\n  color: #fff;\n  padding: 4px 8px;\n  border-radius: 40px;\n  background-color: rgb(220, 38, 38);\n}\n";
 styleInject(css_248z);
 
 var SummaryHeader = function SummaryHeader(props) {
-  var _viewHandler$settings, _viewHandler$settings2, _viewHandler$productS, _viewHandler$productS2;
+  var _viewHandler$settings, _viewHandler$settings2, _viewHandler$getViewC, _viewHandler$productS, _viewHandler$productS2;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var viewHandler = useViewHandler();
@@ -54,7 +54,7 @@ var SummaryHeader = function SummaryHeader(props) {
     className: classnames(wrapper, viewHandler.getIsInMobileView() ? mobile : undefined, showRabatt ? rabattVisible : undefined, ((_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().width) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 400) < 400 ? small : undefined),
     children: [/*#__PURE__*/jsx("div", {
       className: title,
-      children: t('configurator.summary.header.title')
+      children: t((_viewHandler$getViewC = viewHandler.getViewConfig().summaryHeaderTitle) !== null && _viewHandler$getViewC !== void 0 ? _viewHandler$getViewC : 'configurator.summary.header.title')
     }), !hidePrices && /*#__PURE__*/jsxs("div", {
       className: priceWrapper,
       children: [/*#__PURE__*/jsx("div", {

package/build/esm/{index-6a541dc9.js → index-c64850f6.js}

@@ -1,14 +1,15 @@
-import { s as styleInject, u as useViewHandler, S as SettingsHeader } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler, S as SettingsHeader } from './index-87690a5b.js';
 import { useDivaCore } from '@crystaldesign/diva-core';
-import { useCallback, useEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { ContentBoxComponent } from '@crystaldesign/content-box';
+import classnames from 'classnames';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/regenerator';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';
@@ -16,7 +17,6 @@ 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';
@@ -24,8 +24,9 @@ import 'react-switch';
 import 'react-countup';
 
 var productsGrid = "products-grid-b9XWQ";
+var productsGridDisabled = "products-grid-disabled-1BegM";
 var skeleton = "skeleton-XdjqR";
-var css_248z = ".products-grid-b9XWQ {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));\n  grid-auto-rows: min-content;\n  grid-gap: 10px;\n  height: 100%;\n  padding-top: 16px;\n  padding-bottom: 16px;\n}\n\n.mobile .products-grid-b9XWQ {\n  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\n}\n\n.skeleton-XdjqR {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  color: var(--primaryColor);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 22px;\n  box-shadow: rgba(0, 0, 0,0.1) 0px 0px 16px 0px;\n}\n";
+var css_248z = ".products-grid-b9XWQ {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));\n  grid-auto-rows: min-content;\n  grid-gap: 10px;\n  height: 100%;\n  padding-top: 16px;\n  padding-bottom: 16px;\n}\n\n.products-grid-disabled-1BegM {\n  pointer-events: none;\n}\n\n.mobile .products-grid-b9XWQ {\n  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));\n}\n\n.skeleton-XdjqR {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  color: var(--primaryColor);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 22px;\n  box-shadow: rgba(0, 0, 0,0.1) 0px 0px 16px 0px;\n}\n";
 styleInject(css_248z);
 
 var PromotedProducts = function PromotedProducts(_ref) {
@@ -38,7 +39,12 @@ var PromotedProducts = function PromotedProducts(_ref) {
   var viewHandler = useViewHandler();
   var settingsState = viewHandler.settingsState;
   var productsConfig = viewHandler.getViewConfig().productsConfig;
+  var isOpeningProductRef = useRef(false);
+  var didStartLoadingRef = useRef(false);
   var onAddProduct = useCallback(function (productId) {
+    if (viewHandler.uiState.isLogicLoading || settingsState.promotedOptimisticProductId != null || isOpeningProductRef.current) return;
+    isOpeningProductRef.current = true;
+    didStartLoadingRef.current = false;
     settingsState.setPromotedOptimisticProductId(productId);
     openComponent({
       type: 'DIVA_WEBPLANNER',
@@ -50,17 +56,21 @@ var PromotedProducts = function PromotedProducts(_ref) {
         keepCache: '1'
       }
     });
-  }, [openComponent, settingsState]);
+  }, [openComponent, settingsState, viewHandler.uiState]);
   var configProductId = (_viewHandler$configSt = viewHandler.configState.productId) !== null && _viewHandler$configSt !== void 0 ? _viewHandler$configSt : !viewHandler.configState.divaNr && viewHandler.divaWebPlanner.getStartProductId();
-
-  // Keep the selection ring on the clicked tile while the planner reloads; `configState.productId` can
-  // clear or lag during `initialize`, which caused flicker without this.
   var selectedProduct = (_settingsState$promot = settingsState.promotedOptimisticProductId) !== null && _settingsState$promot !== void 0 ? _settingsState$promot : configProductId;
   useEffect(function () {
-    if (settingsState.promotedOptimisticProductId != null && configProductId === settingsState.promotedOptimisticProductId) {
+    if (!isOpeningProductRef.current) return;
+    if (viewHandler.uiState.isLogicLoading) {
+      didStartLoadingRef.current = true;
+      return;
+    }
+    if (didStartLoadingRef.current) {
+      isOpeningProductRef.current = false;
+      didStartLoadingRef.current = false;
       settingsState.setPromotedOptimisticProductId(null);
     }
-  }, [settingsState.promotedOptimisticProductId, configProductId, settingsState]);
+  }, [settingsState, viewHandler.uiState.isLogicLoading]);
   useEffect(function () {
     settingsState.setPromotedOptimisticProductId(null);
   }, [organization._id, settingsState]);
@@ -72,13 +82,15 @@ var PromotedProducts = function PromotedProducts(_ref) {
   }, [organization._id, viewHandler.uiState.isLogicLoading, catalogCodex]);
   var groups = settingsState.promotedGroups;
   var skeletons = productsConfig !== null && productsConfig !== void 0 && productsConfig.maxCount && productsConfig.showSkeletions ? getSkeletons(productsConfig.maxCount, groups.length) : [];
+  var areProductsDisabled = viewHandler.uiState.isLogicLoading || settingsState.promotedOptimisticProductId != null || isOpeningProductRef.current;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(SettingsHeader, {
       isInScroller: false,
       isSettingsHeader: true,
       item: item
     }), /*#__PURE__*/jsxs("div", {
-      className: productsGrid,
+      className: classnames(productsGrid, areProductsDisabled ? productsGridDisabled : undefined),
+      "aria-disabled": areProductsDisabled,
       children: [groups.map(function (group, i) {
         return /*#__PURE__*/jsx(ContentBoxComponent, {
           settings: {

package/build/esm/{index-f83c0c38.js → index-c6fb5ed9.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-22049a2e.js';
+import { u as useViewHandler } from './index-87690a5b.js';
 import { useState, useRef } from 'react';
 import classnames from 'classnames';
 import { Vector2 } from '@crystaldesign/web-planner-logic';
@@ -9,8 +9,8 @@ import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
 import '@crystaldesign/diva-core';
 import 'mobx-react-lite';
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/regenerator';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';

package/build/esm/{index-132d3d33.js → index-c750b215.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler } from './index-87690a5b.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';
@@ -7,8 +7,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/regenerator';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';

package/build/esm/{index-df446419.js → index-c8bf9e7b.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler } from './index-87690a5b.js';
 import { observer } from 'mobx-react-lite';
 import { useState, useEffect } from 'react';
 import classnames from 'classnames';
@@ -7,8 +7,8 @@ import { jsx } 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/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/regenerator';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';

package/build/esm/{index-dad1850c.js → index-c948eca9.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-22049a2e.js';
+import { s as styleInject, u as useViewHandler } from './index-87690a5b.js';
 import 'react';
 import { Rnd } from 'react-rnd';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -7,8 +7,8 @@ import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
 import '@crystaldesign/diva-core';
 import 'mobx-react-lite';
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/regenerator';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';

package/build/esm/{index-270ed7ab.js → index-c9ff51e5.js}

@@ -1,10 +1,10 @@
 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-22049a2e.js';
+import { s as styleInject, u as useViewHandler } from './index-87690a5b.js';
 import { observer } from 'mobx-react-lite';
 import { useRef, useState, useEffect } from 'react';
-import StepInfo from './index-939c3fcb.js';
+import StepInfo from './index-ee191171.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';