@crystaldesign/diva-web-planner-react 24.15.0-beta.26 → 24.15.0-beta.28

package/build/esm/{index-b1e499bf.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-8790e360.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-f6037f05.js → index-70daa8bf.js}

@@ -1,12 +1,13 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-8790e360.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-f33ce62a.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-2857dc98.js → index-713461cd.js}

@@ -1,5 +1,5 @@
-import { s as styleInject } from './index-8790e360.js';
-import ProductHeader from './index-3ba41156.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-2c41eb35.js';
+import './index-2c18450d.js';
 import '@crystaldesign/content-box';
-import './index-78429d21.js';
+import './index-36252ee9.js';
 import '@crystaldesign/content-item';
 import 'react-draggable';
 

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

@@ -1,10 +1,10 @@
-import { s as styleInject, u as useViewHandler } from './index-8790e360.js';
+import { s as styleInject, u as useViewHandler } from './index-6df691c0.js';
 import { useEffect } from 'react';
-import Inputbox from './index-97f9a601.js';
-import { cssVariables } from './index-e6e32ba8.js';
-import Product from './index-1f9ba23b.js';
-import Settings from './index-d6853b8f.js';
-import TabGroup from './index-0869c483.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,85 +22,86 @@ import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-7d5da857.js';
-import './index-730107fb.js';
+import './index-016cd344.js';
+import './index-99019637.js';
 import 'react-switch';
 import 'react-dropdown';
-import './index-8aae3222.js';
-import './index-705293c9.js';
-import './index-f1ca95ae.js';
-import './index-5ff5dd23.js';
-import './index-d7956ff5.js';
-import './index.module-60927de7.js';
-import './index-65d48f5a.js';
-import './index-ea14cfe4.js';
-import './index-1fc55e97.js';
-import './index-2e917c59.js';
-import './index-924e4221.js';
-import './index-f5bc2142.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-5b6ce507.js';
-import './index-78429d21.js';
+import './index-56a16749.js';
+import './index-36252ee9.js';
 import '@crystaldesign/content-item';
 import 'react-draggable';
-import './index-96258456.js';
-import './index-ced3aa33.js';
-import './index-5491a744.js';
-import './index-449c50c2.js';
-import './index-92047d15.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-b2692853.js';
-import './index-d551a367.js';
-import './index-e7b98bce.js';
+import './index-1fa814f3.js';
+import './index-a24f2645.js';
+import './index-e847bbdf.js';
 import 'sift';
-import './index-5350c4b5.js';
-import './index-4339ebf4.js';
-import './index-45ed6395.js';
-import './index-ce4e115c.js';
-import './index.module-6e827841.js';
-import './index-f33ce62a.js';
-import './index-f61bcbf8.js';
-import './index-8e842577.js';
-import './index-7ccb0839.js';
-import './index-4a2a4047.js';
-import './index-30051da8.js';
-import './index-4e259f1e.js';
-import './index-a42054d3.js';
-import './index-4c4def58.js';
-import './index-1a0c00db.js';
-import './index-32c0cb0b.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-ce5cbcdc.js';
-import './index-570cacf4.js';
-import './index-e6447a0c.js';
-import './index-1fa77883.js';
-import './index-e335f174.js';
-import './index-6c3f2d64.js';
-import './index-49a53af0.js';
-import './index-8934494b.js';
-import './index-667cacb4.js';
-import './index-e08d11dc.js';
-import './index-443351fe.js';
-import './index-ae74481b.js';
-import './index-55f87a4b.js';
-import './index.module-459414e5.js';
-import './index-445ff596.js';
-import './index-5b61b070.js';
-import './index-fe53ef2f.js';
-import './index-1c05d392.js';
-import './index-39619253.js';
-import './index-1f064d7d.js';
-import './index-892b02b0.js';
-import './index.module-718f2af1.js';
-import './index-9ec1c5aa.js';
-import './index-31df5e39.js';
-import './index-2bf32215.js';
-import './index-e1b4d94c.js';
-import './index-ab0f4c75.js';
-import './index-87b30a23.js';
-import './index-870fa3a8.js';
-import './index-14631ba1.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-5491a744.js → index-728d71d6.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-8790e360.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-7f15ca20.js → index-7307e9e6.js}

@@ -1,7 +1,7 @@
-import { s as styleInject } from './index-8790e360.js';
+import { s as styleInject } from './index-6df691c0.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
-import Item from './index-df3ef10d.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-e335f174.js';
+import './index-173167a2.js';
+import './index-74f39aff.js';
 import 'classnames';
-import './index-1fa77883.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-ee2983dc.js → index-73c7c738.js}

@@ -1,4 +1,4 @@
-import { a as usePlannerUIHandler } from './index-8790e360.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-83e817b1.js → index-75ef5b22.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-8790e360.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-7cc704d5.js → index-7672226e.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-8790e360.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-6c3f2d64.js → index-76cdb47a.js}

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

package/build/esm/{index-47518e2a.js → index-77f2cfa2.js}

@@ -1,4 +1,4 @@
-import { s as styleInject } from './index-8790e360.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-f606384b.js → index-79ed1219.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-8790e360.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-e9cc9726.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-8790e360.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-e1c46951.js → index-7c5a455a.js}

@@ -1,4 +1,4 @@
-import { s as styleInject } from './index-8790e360.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-18f8233b.js → index-7d4439ed.js}

@@ -1,4 +1,4 @@
-import { a as usePlannerUIHandler } from './index-8790e360.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-bc9061af.js → index-7d930ef9.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-8790e360.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-83500207.js → index-7f98da7b.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-8790e360.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-ab0f4c75.js → index-80f5f32c.js}

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

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

@@ -1,9 +1,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject, u as useViewHandler } from './index-8790e360.js';
+import { s as styleInject, u as useViewHandler } from './index-6df691c0.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import ActionNavigation from './index-b4090ff1.js';
-import PriceSumm from './index-63d6360c.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-f42b0e21.js → index-81b08c91.js}

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject, u as useViewHandler } from './index-8790e360.js';
+import { s as styleInject, u as useViewHandler } from './index-6df691c0.js';
 import 'react';
-import BasketActionStandard from './index-83e817b1.js';
+import BasketActionStandard from './index-75ef5b22.js';
 import { observer } from 'mobx-react-lite';
 import { jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';

package/build/esm/{index-f75bb377.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-8790e360.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-459414e5.js';
-import { w as wcFavoriteSel, a as wcFavorite } from './index.module-718f2af1.js';
-import { useTranslation, useDivaCore, DivaUtils } from '@crystaldesign/diva-core';
-import IsActive from './index-445ff596.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-1fa77883.js';
-import GenericToolTip from './index-e335f174.js';
-import InfoIcon from './index-f33ce62a.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(),
@@ -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)