@crystaldesign/diva-web-planner-react 24.15.0-beta.3 → 24.15.0-beta.30

package/build/esm/{index-5d139f77.js → index-6e5fc108.js}

@@ -1,7 +1,7 @@
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { s as styleInject, u as useViewHandler } from './index-5f412e0b.js';
+import { s as styleInject, u as useViewHandler } from './index-6df691c0.js';
 import 'react';
 import { DivaUtils } from '@crystaldesign/diva-core';
 import { observer } from 'mobx-react-lite';

package/build/esm/{index-6e890e53.js → index-70daa8bf.js}

@@ -1,12 +1,13 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-5f412e0b.js';
+import { s as styleInject, u as useViewHandler } from './index-6df691c0.js';
 import Dropdown from 'react-dropdown';
 import { useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import classnames from 'classnames';
-import InfoIcon from './index-14f6943b.js';
+import InfoIcon from './index-9e025ea6.js';
 import MarqueeText from 'react-marquee-text';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import PricePreview from './index-74f39aff.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/objectWithoutProperties';
@@ -28,7 +29,8 @@ var title = "title-2mKgp";
 var colum = "colum-cjf3n";
 var dropdownWidth = "dropdownWidth-D5Fng";
 var image = "image-7MOa9";
-var css_248z$1 = ".wcDropDownSelect-RE7qJ {\n  padding: 8px 24px 8px 8px !important;\n  box-sizing: border-box !important;\n}\n\n.wcDropDownSelect-RE7qJ {\n  height: 2.4375rem;\n  padding: 0.5rem;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 1px solid #cacaca;\n  border-radius: 4px;\n  background-color: #fefefe;\n  font-family: inherit;\n  font-size: 13px;\n  line-height: 22px;\n  color: #0a0a0a;\n  background-origin: content-box;\n  background-position: right -1rem center;\n  background-repeat: no-repeat;\n  background-size: 9px 6px;\n  padding-right: 1.5rem;\n  transition:\n    box-shadow 0.5s,\n    border-color 0.25s ease-in-out;\n  font-weight: 300;\n}\n\n.dropDownArea-yEewD {\n  max-height: 520px !important;\n  width: -moz-fit-content !important;\n  width: fit-content !important;\n  display: inline-block !important;\n}\n\n.dropDownArea-yEewD {\n\n  right: 0;\n  min-width: 152px;\n  max-width: 370px;\n  letter-spacing: 0px;\n  font-size: 13px;\n  font-weight: 300;\n}\n\n.dropDownArea-yEewD .dropOption-i-M5T {\n  white-space: nowrap;\n}\n.wcDropDownSelect-RE7qJ .dropOption-i-M5T {\n  width: 110px;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.row-80qIj {\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  display: flex;\n  padding-bottom: 4px;\n  padding-top: 4px;\n}\n\n.title-2mKgp {\n  text-align: left;\n  padding-bottom: 9px;\n  padding-top: 9px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.colum-cjf3n {\n  width: 50%;\n}\n.dropdownWidth-D5Fng {\n  width: 155px;\n  margin: 10px 15px;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n.image-7MOa9 {\n  width: 45%;\n}\n";
+var text = "text-7Q0NH";
+var css_248z$1 = ".wcDropDownSelect-RE7qJ {\n  padding: 8px 24px 8px 8px !important;\n  box-sizing: border-box !important;\n}\n\n.wcDropDownSelect-RE7qJ {\n  height: 2.4375rem;\n  padding: 0.5rem;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: 1px solid #cacaca;\n  border-radius: 4px;\n  background-color: #fefefe;\n  font-family: inherit;\n  font-size: 13px;\n  line-height: 22px;\n  color: #0a0a0a;\n  background-origin: content-box;\n  background-position: right -1rem center;\n  background-repeat: no-repeat;\n  background-size: 9px 6px;\n  padding-right: 1.5rem;\n  transition:\n    box-shadow 0.5s,\n    border-color 0.25s ease-in-out;\n  font-weight: 300;\n}\n\n.dropDownArea-yEewD {\n  max-height: 520px !important;\n  width: -moz-fit-content !important;\n  width: fit-content !important;\n  display: inline-block !important;\n}\n\n.dropDownArea-yEewD {\n\n  right: 0;\n  min-width: 152px;\n  max-width: 370px;\n  letter-spacing: 0px;\n  font-size: 13px;\n  font-weight: 300;\n}\n.dropOption-i-M5T {\n  position: relative;\n}\n.dropDownArea-yEewD .dropOption-i-M5T {\n  white-space: nowrap;\n}\n.wcDropDownSelect-RE7qJ .dropOption-i-M5T {\n  width: 110px;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.row-80qIj {\n  width: 100%;\n  height: -moz-fit-content;\n  height: fit-content;\n  position: relative;\n  display: flex;\n  padding-bottom: 4px;\n  padding-top: 4px;\n}\n\n.title-2mKgp {\n  text-align: left;\n  padding-bottom: 9px;\n  padding-top: 9px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.colum-cjf3n {\n  width: 50%;\n}\n.dropdownWidth-D5Fng {\n  width: 155px;\n  margin: 10px 15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: -moz-fit-content;\n  height: fit-content;\n}\n\n.image-7MOa9 {\n  width: 45%;\n}\n.text-7Q0NH {\n  padding-right: 64px;\n}\n";
 styleInject(css_248z$1);
 
 var css_248z = "/*\n@ts-ignore\n*/\n@keyframes marqueeScroll {\n  to {\n    transform: translate3d(0, 0, 0);\n  }\n}\n";
@@ -76,11 +78,16 @@ var DropDowmText = function DropDowmText(_ref) {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var _item = _step.value;
       var option = {
-        label: /*#__PURE__*/jsx("div", {
+        label: /*#__PURE__*/jsxs("div", {
           className: dropOption,
-          dangerouslySetInnerHTML: {
-            __html: _item.text
-          }
+          children: [/*#__PURE__*/jsx("div", {
+            className: text,
+            dangerouslySetInnerHTML: {
+              __html: _item.text
+            }
+          }), _item.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+            asyncPricePreview: _item.pricePreviewPromise
+          })]
         }),
         text: _item.text,
         value: _item.codex

package/build/esm/{index-eb15305a.js → index-713461cd.js}

@@ -1,5 +1,5 @@
-import { s as styleInject } from './index-5f412e0b.js';
-import ProductHeader from './index-c1211d6a.js';
+import { s as styleInject } from './index-6df691c0.js';
+import ProductHeader from './index-af1a778c.js';
 import 'react';
 import { jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
@@ -17,9 +17,9 @@ import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import 'mobx-react-lite';
 import 'classnames';
-import './index-7786c1d8.js';
+import './index-2c18450d.js';
 import '@crystaldesign/content-box';
-import './index-09071b24.js';
+import './index-36252ee9.js';
 import '@crystaldesign/content-item';
 import 'react-draggable';
 

package/build/esm/{index-db9d0ae9.js → index-71d53afc.js}

@@ -1,10 +1,10 @@
-import { s as styleInject, u as useViewHandler } from './index-5f412e0b.js';
+import { s as styleInject, u as useViewHandler } from './index-6df691c0.js';
 import { useEffect } from 'react';
-import Inputbox from './index-7a4f1002.js';
-import { cssVariables } from './index-2162e0af.js';
-import Product from './index-f4d50bf2.js';
-import Settings from './index-78db8294.js';
-import TabGroup from './index-33a7a5f6.js';
+import Inputbox from './index-2b45be3f.js';
+import { cssVariables } from './index-52d41c14.js';
+import Product from './index-4fce79ab.js';
+import Settings from './index-99588ff8.js';
+import TabGroup from './index-cc591e2b.js';
 import { observer } from 'mobx-react-lite';
 import classnames from 'classnames';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -22,84 +22,86 @@ import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-a764e96d.js';
-import './index-78e7ed44.js';
+import './index-016cd344.js';
+import './index-99019637.js';
 import 'react-switch';
 import 'react-dropdown';
-import './index-9b4c5ef1.js';
-import './index-8b844785.js';
-import './index-2b4dfae1.js';
-import './index-b414938f.js';
-import './index-3d8f6897.js';
-import './index.module-f44a89c9.js';
-import './index-d24b3ff3.js';
-import './index-88e7c94f.js';
-import './index-c3e56020.js';
-import './index-55c54786.js';
-import './index-893f512f.js';
-import './index-7ff79c57.js';
+import './index-c88c73d1.js';
+import './index-523dd098.js';
+import './index-aeca1db3.js';
+import './index-0d5f1d20.js';
+import './index-1e556bf4.js';
+import './index.module-59a3b96f.js';
+import './index-d3423531.js';
+import './index-b7e8e362.js';
+import './index-aee7b093.js';
+import './index-e48f3286.js';
+import './index-6687c8fc.js';
+import './index-b3e9e0d4.js';
 import '@crystaldesign/content-box';
-import './index-015edfa8.js';
-import './index-09071b24.js';
+import './index-56a16749.js';
+import './index-36252ee9.js';
 import '@crystaldesign/content-item';
 import 'react-draggable';
-import './index-fd91604e.js';
-import './index-35560959.js';
-import './index-d6d399a4.js';
-import './index-fbf1692a.js';
-import './index-48d4b2d1.js';
+import './index-66997e23.js';
+import './index-f9f730d5.js';
+import './index-728d71d6.js';
+import './index-b0bb5bd0.js';
+import './index-58d9085b.js';
 import 'react-laag';
-import './index-863c231f.js';
-import './index-1c259813.js';
-import './index-1a032df7.js';
+import './index-1fa814f3.js';
+import './index-a24f2645.js';
+import './index-e847bbdf.js';
 import 'sift';
-import './index-00876114.js';
-import './index-6c5ebf7d.js';
-import './index-744101c0.js';
-import './index-04b6565c.js';
-import './index.module-b667cd92.js';
-import './index-14f6943b.js';
-import './index-30a12fca.js';
-import './index-7c6ee98f.js';
-import './index-cd94d89b.js';
-import './index-218ee072.js';
-import './index-65275038.js';
-import './index-d4ed4f21.js';
-import './index-b435c759.js';
-import './index-8c35930a.js';
-import './index-ae3c031a.js';
-import './index-dc4311b3.js';
+import './index-4a8e1cc6.js';
+import './index-44dd2b44.js';
+import './index-2db4b504.js';
+import './index-35ea8931.js';
+import './index.module-f726e259.js';
+import './index-9e025ea6.js';
+import './index-74f39aff.js';
+import './index-964aeced.js';
+import './index-4dbf2cfa.js';
+import './index-fe2a846e.js';
+import './index-d8824de9.js';
+import './index-b2efa7b3.js';
+import './index-c54474e6.js';
+import './index-625bc0b7.js';
+import './index-8fe9b473.js';
+import './index-4d5dd6e6.js';
+import './index-eb9e583e.js';
+import '@crystaldesign/product-detail-page';
 import '@crystaldesign/products-component';
-import './index-73fcc4b6.js';
-import './index-3aa996a1.js';
-import './index-db0b5ab3.js';
-import './index-28d6d9cb.js';
-import './index-c12bb239.js';
-import './index-4ce970f6.js';
-import './index-555a9271.js';
-import './index-b5ef6d41.js';
-import './index-6f226cd1.js';
-import './index-b48ac168.js';
-import './index-104e1375.js';
-import './index-7b968448.js';
-import './index-693199fe.js';
-import './index.module-38c0cb37.js';
-import './index-f94c7c97.js';
-import './index-a5e7a716.js';
-import './index-ef0457b0.js';
-import './index-934f868b.js';
-import './index-8480b8c6.js';
-import './index-c4150c7e.js';
-import './index-f4fddea9.js';
-import './index.module-850e46e7.js';
-import './index-94603890.js';
-import './index-21ae7a56.js';
-import './index-08e75635.js';
-import './index-d95a5c77.js';
-import './index-035e83cd.js';
-import './index-63596fd1.js';
-import './index-cf8a5628.js';
-import './index-deaf833a.js';
+import './index-33430d93.js';
+import './index-65f3d176.js';
+import './index-ede73d86.js';
+import './index-bfa9d7df.js';
+import './index-173167a2.js';
+import './index-76cdb47a.js';
+import './index-ce45f274.js';
+import './index-5e3fe9df.js';
+import './index-92cab141.js';
+import './index-be278929.js';
+import './index-f722056b.js';
+import './index-98d9c51a.js';
+import './index-eef5ffa8.js';
+import './index.module-303f0086.js';
+import './index-30b25a59.js';
+import './index-50cf2d8c.js';
+import './index-8cd9a28a.js';
+import './index-a553b790.js';
+import './index-afffb0a8.js';
+import './index-5e7b2cd3.js';
+import './index-f4512daf.js';
+import './index.module-b0ccd92b.js';
+import './index-f068d038.js';
+import './index-63f750fb.js';
+import './index-40ab84f0.js';
+import './index-a8c8686c.js';
+import './index-80f5f32c.js';
+import './index-f0bb936f.js';
+import './index-02658286.js';
+import './index-bd77c544.js';
 
 var wcConfigurator = "wcConfigurator-VvOGT";
 var wcConfiguratorSteps = "wc-configurator-steps-CYXm7";

package/build/esm/{index-d6d399a4.js → index-728d71d6.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-5f412e0b.js';
+import { s as styleInject, u as useViewHandler } from './index-6df691c0.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import { useTranslation } from '@crystaldesign/diva-core';

package/build/esm/{index-2b06e928.js → index-7307e9e6.js}

@@ -1,7 +1,7 @@
-import { s as styleInject } from './index-5f412e0b.js';
+import { s as styleInject } from './index-6df691c0.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
-import Item from './index-81368432.js';
+import Item from './index-8a3a27f7.js';
 import { jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -17,9 +17,10 @@ import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import 'react-laag';
-import './index-c12bb239.js';
+import './index-173167a2.js';
+import './index-74f39aff.js';
 import 'classnames';
-import './index-28d6d9cb.js';
+import './index-bfa9d7df.js';
 
 var wrapper = "wrapper-Da1y8";
 var css_248z = ".wrapper-Da1y8 {\n  display: flex;\n  margin-left: 16px;\n  margin-right: 16px;\n  gap: 6px 10px;\n  overflow: auto;\n  width: 100%;\n  flex-wrap: wrap;\n}\n";

package/build/esm/{index-7b60dc62.js → index-73c7c738.js}

@@ -1,4 +1,4 @@
-import { a as usePlannerUIHandler } from './index-5f412e0b.js';
+import { a as usePlannerUIHandler } from './index-6df691c0.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';

package/build/esm/index-74f39aff.js

@@ -0,0 +1,90 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { s as styleInject, u as useViewHandler } from './index-6df691c0.js';
+import { Suspense } from 'react';
+import DivaUtils from '@crystaldesign/diva-utils';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+var pricePreview = "price-preview-mwp8h";
+var left = "left-j4aB7";
+var right = "right-8Kd-Q";
+var loader = "loader-q6IkE";
+var css_248z = ".price-preview-mwp8h {\n  position: absolute;\n  top: 0;\n\n  background-color: #eaeaea;\n\n  padding: 2px 6px;\n  font-size: 12px;\n}\n\n.left-j4aB7 {\n  left: 0;\n  border-radius: 0px 0px 5px 0px;\n}\n\n.right-8Kd-Q {\n  right: 0;\n  border-radius: 0px 0px 0px 5px;\n}\n\n.loader-q6IkE {\n  border: 3px solid #f3f3f3;\n  border-radius: 50%;\n  border-top: 3px solid #bbb;\n  width: 10px;\n  height: 10px;\n  animation: spinner-Qvhg8 1s linear infinite;\n}\n\n@keyframes spinner-Qvhg8 {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
+styleInject(css_248z);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var PricePreview = function PricePreview(_ref) {
+  var asyncPricePreview = _ref.asyncPricePreview,
+    _ref$pos = _ref.pos,
+    pos = _ref$pos === void 0 ? 'right' : _ref$pos;
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  if (hidePrices) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(pricePreview, pos == 'left' ? left : right),
+    children: /*#__PURE__*/jsx(Suspense, {
+      fallback: /*#__PURE__*/jsx("div", {
+        className: loader
+      }),
+      children: /*#__PURE__*/jsx(AsyncRender, {
+        asyncPricePreview: asyncPricePreview
+      })
+    })
+  });
+};
+var AsyncRender = function AsyncRender(_ref2) {
+  var _window;
+  var asyncPricePreview = _ref2.asyncPricePreview;
+  var result = use(asyncPricePreview);
+  var viewHandler = useViewHandler();
+  var pricePreviewType = viewHandler.getViewConfig().pricePreview;
+  var deltaPrice;
+  switch (pricePreviewType) {
+    default:
+    case 'fromCurrentPrice':
+      deltaPrice = result.price - result.origPrice;
+      break;
+    case 'fromBasePrice':
+      deltaPrice = result.price - result.firstPrice;
+      break;
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [((_window = window) === null || _window === void 0 ? void 0 : _window.DIVA_LOGGER) == 0 && false ? result.calcTime + 'ms ' : '', (deltaPrice < 0 ? '-' : '+') + DivaUtils.formatPrice(Math.abs(deltaPrice), _objectSpread(_objectSpread({}, DivaUtils.defaultPriceFormat), {}, {
+      showDecimals: 'IF_NEEDED'
+    }))]
+  });
+};
+function use(promise) {
+  if (promise.status === 'fulfilled') {
+    return promise.value;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(function (result) {
+      promise.status = 'fulfilled';
+      promise.value = result;
+    }, function (reason) {
+      promise.status = 'rejected';
+      promise.reason = reason;
+    });
+    throw promise;
+  }
+}
+
+export { PricePreview as default };

package/build/esm/{index-faf20eca.js → index-75ef5b22.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-5f412e0b.js';
+import { s as styleInject, u as useViewHandler } from './index-6df691c0.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import classnames from 'classnames';

package/build/esm/{index-597ac391.js → index-7672226e.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-5f412e0b.js';
+import { s as styleInject, u as useViewHandler } from './index-6df691c0.js';
 import { useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';

package/build/esm/{index-4ce970f6.js → index-76cdb47a.js}

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-5f412e0b.js';
+import './index-6df691c0.js';
 import 'react';
 import DynamicMultiRender from 'react-dynamic-multi-render';
 import { jsx } from 'react/jsx-runtime';

package/build/esm/{index-2a23f4d7.js → index-77f2cfa2.js}

@@ -1,4 +1,4 @@
-import { s as styleInject } from './index-5f412e0b.js';
+import { s as styleInject } from './index-6df691c0.js';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 import QRCode from 'react-qr-code';

package/build/esm/{index-418c97ab.js → index-79ed1219.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-5f412e0b.js';
+import { s as styleInject, u as useViewHandler } from './index-6df691c0.js';
 import 'react';
 import { ContentBoxComponent } from '@crystaldesign/content-box';
 import { observer } from 'mobx-react-lite';
@@ -48,7 +48,6 @@ var InfoButton = function InfoButton(_ref) {
               type: 'InfoBox',
               imageUrl: selectedElement.image,
               title: selectedElement.text,
-              price: selectedElement.deltaPrice,
               text: text
             }
           }

package/build/esm/{index-4e5d1163.js → index-7bc6c51d.js}

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { u as useViewHandler } from './index-5f412e0b.js';
+import { u as useViewHandler } from './index-6df691c0.js';
 import 'react';
 import { jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';

package/build/esm/{index-ffb25d06.js → index-7c5a455a.js}

@@ -1,4 +1,4 @@
-import { s as styleInject } from './index-5f412e0b.js';
+import { s as styleInject } from './index-6df691c0.js';
 import 'react';
 import { useTranslation } from '@crystaldesign/diva-core';
 import { observer } from 'mobx-react-lite';

package/build/esm/{index-53b3b182.js → index-7d4439ed.js}

@@ -1,4 +1,4 @@
-import { a as usePlannerUIHandler } from './index-5f412e0b.js';
+import { a as usePlannerUIHandler } from './index-6df691c0.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';

package/build/esm/{index-b4d76604.js → index-7d930ef9.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-5f412e0b.js';
+import { s as styleInject, u as useViewHandler } from './index-6df691c0.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';

package/build/esm/{index-d8595bda.js → index-7f98da7b.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-5f412e0b.js';
+import { s as styleInject, u as useViewHandler } from './index-6df691c0.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
 import { DivaUtils } from '@crystaldesign/diva-core';

package/build/esm/{index-035e83cd.js → index-80f5f32c.js}

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-5f412e0b.js';
+import './index-6df691c0.js';
 import 'react';
 import DynamicMultiRender from 'react-dynamic-multi-render';
 import { jsx } from 'react/jsx-runtime';

package/build/esm/{index-a7693ab2.js → index-81748049.js}

@@ -1,9 +1,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject, u as useViewHandler } from './index-5f412e0b.js';
+import { s as styleInject, u as useViewHandler } from './index-6df691c0.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import ActionNavigation from './index-1b1dd99f.js';
-import PriceSumm from './index-fd9f9d49.js';
+import ActionNavigation from './index-40b9758f.js';
+import PriceSumm from './index-55ff185a.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/objectWithoutProperties';

package/build/esm/{index-7f96bf79.js → index-81b08c91.js}

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject, u as useViewHandler } from './index-5f412e0b.js';
+import { s as styleInject, u as useViewHandler } from './index-6df691c0.js';
 import 'react';
-import BasketActionStandard from './index-faf20eca.js';
+import BasketActionStandard from './index-75ef5b22.js';
 import { observer } from 'mobx-react-lite';
 import { jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
@@ -20,7 +20,7 @@ import 'classnames';
 
 var wcCheckoutButtonText = "wcCheckoutButtonText-bETEx";
 var wcCheckoutButtonPrice = "wcCheckoutButtonPrice-iT78h";
-var css_248z = ".wcCheckoutButtonText-bETEx {\n  float: left;\n  margin-left: 10%;\n  font-size: 14px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0px;\n  line-height: 36.8px;\n  font-weight: 300;\n}\n\n.wcCheckoutButtonPrice-iT78h {\n  float: right;\n  margin-right: 10%;\n  font-size: 14px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0px;\n  line-height: 36.8px;\n  font-weight: 300;\n}\n";
+var css_248z = ".wcCheckoutButtonText-bETEx {\n  float: left;\n  margin-left: 10%;\n  font-size: 14px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0px;\n  line-height: 36.8px;\n  font-weight: 300;\n}\n\n.wcCheckoutButtonPrice-iT78h {\n  float: right;\n  margin-right: 100px;\n  font-size: 14px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0px;\n  line-height: 36.8px;\n  font-weight: 300;\n}\n";
 styleInject(css_248z);
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }

package/build/esm/{index-a930e323.js → index-82b15cff.js}

@@ -1,17 +1,18 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-5f412e0b.js';
+import { u as useViewHandler } from './index-6df691c0.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import { w as wcSize, d as wcSizeSmall, e as wcImagePlaceHolder, b as wcImage, t as textContainer, f as big, c as wcConfiguratorSettingsTitle, m as metaData, g as wcPricePreview, h as ccConstructionWarning, p as paletteItem, s as sel } from './index.module-38c0cb37.js';
-import { w as wcFavoriteSel, a as wcFavorite } from './index.module-850e46e7.js';
-import { useTranslation, useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
-import IsActive from './index-f94c7c97.js';
+import { w as wcSize, d as wcSizeSmall, e as wcImagePlaceHolder, b as wcImage, t as textContainer, f as big, c as wcConfiguratorSettingsTitle, m as metaData, g as ccConstructionWarning, p as paletteItem, s as sel } from './index.module-303f0086.js';
+import { w as wcFavoriteSel, a as wcFavorite } from './index.module-b0ccd92b.js';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import IsActive from './index-30b25a59.js';
 import { useHover, useLayer } from 'react-laag';
-import MetaData from './index-28d6d9cb.js';
-import GenericToolTip from './index-c12bb239.js';
-import InfoIcon from './index-14f6943b.js';
+import MetaData from './index-bfa9d7df.js';
+import GenericToolTip from './index-173167a2.js';
+import InfoIcon from './index-9e025ea6.js';
+import PricePreview from './index-74f39aff.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/objectWithoutProperties';
@@ -29,7 +30,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var Option = function Option(_ref) {
   var _renderLayer;
   var itemP = _ref.item,
-    paletteId = _ref.paletteId;
+    paletteId = _ref.paletteId,
+    hidePricePreview = _ref.hidePricePreview;
   var item = itemP;
   var viewHandler = useViewHandler();
   var _useTranslation = useTranslation(),
@@ -64,8 +66,8 @@ var Option = function Option(_ref) {
     auto: true,
     placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
   });
-  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip && (item.image || item.hexColor)) {
-    isOver = hover[0] && !viewHandler.settingsState.isContentItemIdVisible(item.contentItemId);
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip && (item.image || item.hexColor) && !item.contentItemId) {
+    isOver = hover[0];
     hoverProps = hover[1];
     triggerProps = tooltip.triggerProps;
     layerProps = tooltip.layerProps;
@@ -94,7 +96,7 @@ var Option = function Option(_ref) {
           backgroundImage: "url(".concat(item.image, ")")
         }
       }), /*#__PURE__*/jsxs("div", {
-        className: classnames(textContainer, !item.deltaPrice && item.layout == 'TEXT' ? big : undefined),
+        className: classnames(textContainer, item.layout == 'TEXT' ? big : undefined),
         children: [/*#__PURE__*/jsx("div", {
           className: classnames(wcConfiguratorSettingsTitle, metaDataVisible !== '' ? metaData : undefined),
           dangerouslySetInnerHTML: {
@@ -111,16 +113,15 @@ var Option = function Option(_ref) {
       }), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
         text: item.text + (item.freeText ? item.freeText : ''),
         desciption: metaDataVisible,
-        price: item.deltaPrice,
         image: item.image,
         hexColor: item.hexColor,
+        pricePreviewPromise: item.pricePreviewPromise,
         layerProps: layerProps
-      }, item.codex))), item.deltaPrice !== undefined && /*#__PURE__*/jsx("div", {
-        className: wcPricePreview,
-        children: (item.deltaPrice >= 0 ? '+' : '-') + ' ' + DivaUtils.formatPrice(Math.abs(item.deltaPrice))
-      }), item.doShowFav && /*#__PURE__*/jsx("div", {
+      }, item.codex))), item.doShowFav && /*#__PURE__*/jsx("div", {
         className: item.isFav ? wcFavoriteSel : wcFavorite
       })]
+    }), !hidePricePreview && item.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+      asyncPricePreview: item.pricePreviewPromise
     }), item.disabledByConstructionRule && /*#__PURE__*/jsx("div", {
       className: classnames(ccConstructionWarning),
       title: t('configurator.' + item.disabledByConstructionRule)