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

package/build/esm/{index-dc4311b3.js → index-eb9e583e.js}

@@ -1,13 +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 { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
 import { useState, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
-import { ContentBoxComponent } from '@crystaldesign/content-box';
+import { ProductDetailPageComponent } from '@crystaldesign/product-detail-page';
 import ProductsComponent, { useProductState } from '@crystaldesign/products-component';
-import SettingsHeader from './index-35560959.js';
+import SettingsHeader from './index-f9f730d5.js';
 import classnames from 'classnames';
-import Search from './index-73fcc4b6.js';
+import Search from './index-33430d93.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -26,25 +26,25 @@ var navigationVisible = "navigation-visible-goqGH";
 var pdpBackground = "pdp-background-1tl-9";
 var pdpContainer = "pdp-container-EljBO";
 var isMobileClass = "is-mobile-class-eOYXj";
-var css_248z = ".pdp-overlay-2gWQq {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 500;\n}\n.navigation-visible-goqGH.pdp-overlay-2gWQq {\n  position: absolute;\n}\n\n.pdp-background-1tl-9 {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: rgba(244, 244, 244, 0.8);\n\n  z-index: 540;\n}\n\n.pdp-container-EljBO {\n  z-index: 580;\n  background-color: #fff;\n  height: 100%;\n  width: 100%;\n  max-width: 1650px;\n  max-height: 1000px;\n}\n\n.is-mobile-class-eOYXj .pdp-container-EljBO {\n  max-width: none;\n  max-width: initial;\n  max-height: none;\n  max-height: initial;\n}\n";
+var closeButton = "close-button-tHReC";
+var css_248z = ".pdp-overlay-2gWQq {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 500;\n}\n.navigation-visible-goqGH.pdp-overlay-2gWQq {\n  position: absolute;\n}\n\n.pdp-background-1tl-9 {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: rgba(244, 244, 244, 0.8);\n\n  z-index: 540;\n}\n\n.pdp-container-EljBO {\n  z-index: 580;\n  position: relative;\n  background-color: #fff;\n  height: 100%;\n  width: 100%;\n  max-width: 1650px;\n  max-height: 1000px;\n}\n\n.is-mobile-class-eOYXj .pdp-container-EljBO {\n  max-width: none;\n  max-width: initial;\n  max-height: none;\n  max-height: initial;\n}\n\n.close-button-tHReC {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M0.5625 0.836182L18.5625 18.8362M18.5625 0.836182L0.5625 18.8362%22 stroke%3D%22%234A4A4A%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  width: 32px;\n  height: 32px;\n  margin: 12.8px;\n  margin-left: 17.6px;\n  transition: background-color 0.15s ease;\n  border-radius: var(--globalBorderRadius);\n  z-index: 100;\n}\n.close-button-tHReC:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n";
 styleInject(css_248z);
 
 var ProductList = function ProductList(_ref) {
-  var _viewHandler$settings;
+  var _viewHandler$settings, _viewHandler$getViewC;
   var item = _ref.item;
-  var _useDivaCore = useDivaCore(),
-    openComponent = _useDivaCore.actions.openComponent,
-    _useDivaCore$state = _useDivaCore.state,
+  var _useDivaCore = useDivaCore();
+    _useDivaCore.actions.openComponent;
+    var _useDivaCore$state = _useDivaCore.state,
     HeaderElement = _useDivaCore$state.headerInfos.HeaderElement,
     _useDivaCore$state$di = _useDivaCore$state.dimensions,
     isMobile = _useDivaCore$state$di.isMobile,
     height = _useDivaCore$state$di.height,
     isPortrait = _useDivaCore$state$di.isPortrait,
     organization = _useDivaCore$state.organization;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+  var _useTranslation = useTranslation();
+    _useTranslation.t;
   var portalHeaderHeight = HeaderElement === null || HeaderElement === void 0 ? void 0 : HeaderElement.getBoundingClientRect().height;
-  var isMobileLandscape = isMobile && !isPortrait && height < 500;
   var currentlyMobile = isMobile && isPortrait || height < 500;
   var viewHandler = useViewHandler();
   var _useState = useState(),
@@ -56,7 +56,6 @@ var ProductList = function ProductList(_ref) {
       'customFlags.variantsList.organizations': organization._id
     },
     sort: '{-created}',
-    noFilter: true,
     scroller: (_viewHandler$settings = viewHandler.settingsState.settingsScrollerElement) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : undefined
   });
   var closePDP = useCallback(function () {
@@ -66,20 +65,6 @@ var ProductList = function ProductList(_ref) {
     var _id = _ref2._id;
     setCurrentProductId(_id);
   }, []);
-  var cta2 = useCallback(function (id) {
-    openComponent({
-      type: 'DIVA_WEBPLANNER',
-      parameters: {
-        productId: id,
-        checkout: '1',
-        initMode: 'OPENCONFIGTABGROUP',
-        opt: 'SUMMARY'
-      },
-      internal: {
-        forceReload: '1'
-      }
-    });
-  }, []);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(SettingsHeader, {
       isInScroller: false,
@@ -96,28 +81,15 @@ var ProductList = function ProductList(_ref) {
       children: [!currentlyMobile && /*#__PURE__*/jsx("div", {
         onClick: closePDP,
         className: pdpBackground
-      }), /*#__PURE__*/jsx("div", {
+      }), /*#__PURE__*/jsxs("div", {
         className: pdpContainer,
-        children: /*#__PURE__*/jsx(ContentBoxComponent, {
-          onClose: closePDP,
-          settings: {
-            contentBoxProps: {
-              type: 'CloseButtonContainer',
-              hideCloseIcon: isMobileLandscape,
-              content: {
-                type: 'PDP',
-                cta1Params: cta2,
-                hideCat2: true,
-                productId: currentProductId,
-                cta1Text: t('pdp.add_to_basket'),
-                groupVariantsByField: ['dc_color', 'dc_mainColor'],
-                breadcrumb: false,
-                hideInfoSlider: true,
-                style: 'horizontal'
-              }
-            }
-          }
-        })
+        children: [/*#__PURE__*/jsx("div", {
+          onClick: closePDP,
+          className: closeButton
+        }), /*#__PURE__*/jsx(ProductDetailPageComponent, {
+          settings: (_viewHandler$getViewC = viewHandler.getViewConfig()) === null || _viewHandler$getViewC === void 0 ? void 0 : _viewHandler$getViewC.productDetailPageConfig,
+          productId: currentProductId
+        })]
       })]
     })]
   });

package/build/esm/{index-db0b5ab3.js → index-ede73d86.js}

@@ -1,14 +1,14 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 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 classnames from 'classnames';
 import { useHover, useLayer } from 'react-laag';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 import { useDivaCore } from '@crystaldesign/diva-core';
-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 { jsx, jsxs } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/objectWithoutProperties';
@@ -20,6 +20,7 @@ import '@babel/runtime/helpers/toConsumableArray';
 import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
+import './index-74f39aff.js';
 
 var articleItem = "ArticleItem-2xa9z";
 var sel = "sel-3vhEw";
@@ -70,8 +71,8 @@ var Article = function Article(_ref) {
     auto: true,
     placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
   });
-  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip) {
-    isOver = hover[0] && !viewHandler.settingsState.isContentItemIdVisible(item.contentItemId);
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip && !item.contentItemId) {
+    isOver = hover[0];
     hoverProps = hover[1];
     triggerProps = tooltip.triggerProps;
     layerProps = tooltip.layerProps;
@@ -105,7 +106,6 @@ var Article = function Article(_ref) {
         }, item.codex), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
           text: item.title,
           desciption: metaDataVisible,
-          price: item.price,
           codex: item.articleCodex,
           image: item.imgSrc,
           layerProps: layerProps

package/build/esm/{index-8df07366.js → index-ee299917.js}

@@ -1,7 +1,7 @@
-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 ToolContainer from './index-18392647.js';
+import ToolContainer from './index-4e1951be.js';
 import { useDivaCore } from '@crystaldesign/diva-core';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
@@ -17,48 +17,48 @@ import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-f45a51a0.js';
-import './index.module-96182b35.js';
-import './index-b277983d.js';
-import './index-5d139f77.js';
+import './index-58147685.js';
+import './index.module-601a4b3f.js';
+import './index-c8b50907.js';
+import './index-6e5fc108.js';
 import 'classnames';
-import './index-3baf3a7f.js';
+import './index-b429149d.js';
 import 'react-collapsible';
-import './index-d8595bda.js';
-import './index-83452164.js';
-import './index.module-a120745c.js';
+import './index-7f98da7b.js';
+import './index-a0403f6d.js';
+import './index.module-ab609e8b.js';
 import 'react-json-view-lite';
-import 'react-json-view-lite/dist/index.css';
-import './index-68c2b694.js';
-import './index.module-7aed3bdf.js';
-import './index-ea8f0a84.js';
+import './react-json-viewer-2c12c80c.js';
+import './index-281f8063.js';
+import './index.module-ffd75389.js';
+import './index-a70b7856.js';
 import 'jsoneditor';
-import './index-140c3d25.js';
-import './index-0e51d119.js';
-import './index-cfd81226.js';
-import './index-36c48240.js';
-import './index-343e785d.js';
-import './index.module-34dce928.js';
-import './index-3359842b.js';
-import './index-69afb3e4.js';
-import './index-347aac40.js';
-import './index-6cb48bac.js';
+import './index-b10763dd.js';
+import './index-080cd319.js';
+import './index-f93486a0.js';
+import './index-e68f6f51.js';
+import './index-49627217.js';
+import './index.module-ba5f0ffb.js';
+import './index-aea64d87.js';
+import './index-6956134b.js';
+import './index-d921e82f.js';
+import './index-b6f317c5.js';
 import 'react-dropdown';
-import './index.module-f7318abb.js';
-import './index-218ee072.js';
-import './index-9f89acb3.js';
-import './index-621b5157.js';
-import './index-d990839b.js';
-import './index-de531631.js';
-import './index-88042273.js';
-import './index-fa15e6d8.js';
-import './index-3cdef1a0.js';
-import './index-78e7ed44.js';
+import './index.module-33eb7e5f.js';
+import './index-d8824de9.js';
+import './index-cf1857cb.js';
+import './index-623947f7.js';
+import './index-3ee1cb37.js';
+import './index-2d2c0a71.js';
+import './index-48776737.js';
+import './index-46b52a30.js';
+import './index-bb5b77fc.js';
+import './index-99019637.js';
 import 'react-switch';
-import './CatalogProperties-6e646df9.js';
-import './ArticleProperties-eab0258f.js';
-import './OptionProperties-09d82003.js';
-import './OptionValueProperties-15c52041.js';
+import './CatalogProperties-5552695a.js';
+import './ArticleProperties-065a373a.js';
+import './OptionProperties-235dea6d.js';
+import './OptionValueProperties-78908c06.js';
 import 'react-select';
 
 var container = "container-43rJg";

package/build/esm/{index-693199fe.js → index-eef5ffa8.js}

@@ -1,10 +1,10 @@
-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 'react';
 import { useTranslation } from '@crystaldesign/diva-core';
-import { p as paletteItem, w as wcSize, a as wcSizeNormal, b as wcImage, t as textContainer, c as wcConfiguratorSettingsTitle } from './index.module-38c0cb37.js';
-import IsActive from './index-f94c7c97.js';
+import { p as paletteItem, w as wcSize, a as wcSizeNormal, b as wcImage, t as textContainer, c as wcConfiguratorSettingsTitle } from './index.module-303f0086.js';
+import IsActive from './index-30b25a59.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/{index-94603890.js → index-f068d038.js}

@@ -1,9 +1,9 @@
-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 classnames from 'classnames';
-import StepInfo from './index-ef0457b0.js';
-import SettingsHeader from './index-35560959.js';
-import ReplaceSwitch from './index-21ae7a56.js';
+import StepInfo from './index-8cd9a28a.js';
+import SettingsHeader from './index-f9f730d5.js';
+import ReplaceSwitch from './index-63f750fb.js';
 import { observer } from 'mobx-react-lite';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';

package/build/esm/{index-63596fd1.js → index-f0bb936f.js}

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

package/build/esm/{index-96b5d583.js → index-f206063e.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-637d3f54.js → index-f3c76936.js}

@@ -1,7 +1,7 @@
-import { s as styleInject } from './index-5f412e0b.js';
+import { s as styleInject } from './index-6df691c0.js';
 import 'react';
-import PlannerUI from './index-78e31c50.js';
-import { c as wc3DOutlineSvg, d as wc3DOutlinePolygon, e as wc3DOutlinePolygonContours, f as wc3DOutlinePolygonContoursSel } from './index.module-548b8400.js';
+import PlannerUI from './index-28c52bb6.js';
+import { c as wc3DOutlineSvg, d as wc3DOutlinePolygon, e as wc3DOutlinePolygonContours, f as wc3DOutlinePolygonContoursSel } from './index.module-2534d52b.js';
 import { jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -17,24 +17,24 @@ import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import 'mobx-react-lite';
-import './index-cba52a64.js';
+import './index-c5ec6a3c.js';
 import 'classnames';
-import './index-53e85b76.js';
-import './index-53b3b182.js';
-import './index-7b60dc62.js';
-import './index-c05c92ea.js';
-import './index-0b97b13f.js';
-import './index-1c33a872.js';
-import './index-05c0756a.js';
-import './index-5a360430.js';
-import './index-aee7488c.js';
-import './index-16f18399.js';
-import './index-8fca8eef.js';
-import './index-7e9733fb.js';
+import './index-2657b480.js';
+import './index-7d4439ed.js';
+import './index-73c7c738.js';
+import './index-b8631493.js';
+import './index-ae0302ce.js';
+import './index-ab5be988.js';
+import './index-5b6022f1.js';
+import './index-a35976d0.js';
+import './index-14bba05b.js';
+import './index-3d05f696.js';
+import './index-3738378c.js';
+import './index-1a936693.js';
 import 'react-draggable';
-import './index-6a28fd59.js';
-import './index-3ca9801e.js';
-import './index-8ccb338f.js';
+import './index-9db7e889.js';
+import './index-d4bf61b5.js';
+import './index-a4ffefa6.js';
 
 var hidden = "hidden-75j7C";
 var css_248z = ".hidden-75j7C {\n  display: none;\n}\n";

package/build/esm/{index-f4fddea9.js → index-f4512daf.js}

@@ -1,15 +1,16 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 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 classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import { w as wcFavoriteSel, a as wcFavorite } from './index.module-850e46e7.js';
+import { w as wcFavoriteSel, a as wcFavorite } from './index.module-b0ccd92b.js';
 import { useHover, useLayer } from 'react-laag';
-import GenericToolTip from './index-c12bb239.js';
-import MetaData from './index-28d6d9cb.js';
+import GenericToolTip from './index-173167a2.js';
+import MetaData from './index-bfa9d7df.js';
 import { useDivaCore } from '@crystaldesign/diva-core';
-import InfoIcon from './index-14f6943b.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';
@@ -30,7 +31,7 @@ var small = "small-Ynrzj";
 var wcImage = "wcImage-eveCj";
 var title = "title-mFBM6";
 var big = "big-wADuy";
-var css_248z = "/*Size Normal */\n\n.PaletteItem-C-fa2 {\n  border-radius: var(--globalBorderRadius);\n  position: relative;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n}\n\n.PaletteItem-C-fa2:active,\n.PaletteItem-C-fa2:hover {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.wcVCodexText-GN3-8 {\n  position: absolute;\n  line-height: 104px;\n  width: 100%;\n  color: white;\n  display: none;\n  text-align: center;\n}\n\n.PaletteItem-C-fa2:hover .wcVCodexText-GN3-8,\n.sel-3ZIRz .wcVCodexText-GN3-8 {\n  display: block;\n}\n\n.imageWrapper-QwsRE {\n  border-radius: 50%;\n  border: 1px rgb(230, 230, 230) solid;\n  display: flex;\n  transition: 0.15s ease;\n  position: relative;\n}\n.imageWrapper-QwsRE:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px var(--primaryColor) solid;\n  border: 1px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n.sel-3ZIRz .imageWrapper-QwsRE:hover,\n.small-Ynrzj.sel-3ZIRz .imageWrapper-QwsRE:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px rgb(230, 230, 230) solid;\n}\n.sel-3ZIRz .imageWrapper-QwsRE,\n.small-Ynrzj.sel-3ZIRz .imageWrapper-QwsRE {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.wcImage-eveCj {\n  width: calc(100% - 7px);\n  aspect-ratio: 1;\n  border: 4px white solid;\n  border-radius: 50%;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n.sel-3ZIRz .wcImage-eveCj,\n.small-Ynrzj.sel-3ZIRz .wcImage-eveCj {\n  border: 4px var(--primaryColor) solid;\n  border: 4px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n\n.hexColor-NBrjx {\n  width: 80px;\n  height: 80px;\n}\n\n.title-mFBM6 {\n  margin-top: 4px;\n  text-align: center;\n  float: left;\n  max-height: 64px;\n  min-height: 16px;\n  width: 100%;\n  font-size: 14px;\n  line-height: 16px;\n  overflow: hidden;\n  display: -webkit-box;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  z-index: 400;\n}\n\n.PaletteItem-C-fa2:hover .title-mFBM6,\n.small-Ynrzj .PaletteItem-C-fa2:hover .title-mFBM6 {\n  max-height: 608px;\n  -webkit-line-clamp: 30;\n  overflow: visible;\n  z-index: 200;\n}\n\n/* Size Small */\n\n.small-Ynrzj .wcVCodexText-GN3-8 {\n  line-height: 58px;\n  font-size: 12px;\n}\n\n.small-Ynrzj .title-mFBM6 {\n  font-size: 12px;\n  margin-top: 6px;\n  -webkit-line-clamp: 1;\n}\n/* Size very Small */\n\n.very-small-XTQPS .wcVCodexText-GN3-8 {\n  line-height: 48px;\n  font-size: 10px;\n}\n\n.very-small-XTQPS .title-mFBM6 {\n  font-size: 10px;\n  margin-top: 5px;\n  -webkit-line-clamp: 1;\n}\n\n/* Size big */\n\n.big-wADuy .wcVCodexText-GN3-8 {\n  line-height: 158px;\n  font-size: 15px;\n}\n\n.big-wADuy .title-mFBM6 {\n  font-size: 15px;\n  margin-top: 10px;\n  -webkit-line-clamp: 2;\n}\n";
+var css_248z = "/*Size Normal */\n\n.PaletteItem-C-fa2 {\n  border-radius: var(--globalBorderRadius);\n  position: relative;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n}\n\n.PaletteItem-C-fa2:active,\n.PaletteItem-C-fa2:hover {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.wcVCodexText-GN3-8 {\n  position: absolute;\n  line-height: 104px;\n  width: 100%;\n  color: white;\n  display: none;\n  text-align: center;\n}\n\n.PaletteItem-C-fa2:hover .wcVCodexText-GN3-8,\n.sel-3ZIRz .wcVCodexText-GN3-8 {\n  display: block;\n}\n\n.imageWrapper-QwsRE {\n  border-radius: 50%;\n  border: 1px rgb(230, 230, 230) solid;\n  display: flex;\n  transition: 0.15s ease;\n  position: relative;\n}\n.imageWrapper-QwsRE:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px var(--primaryColor) solid;\n  border: 1px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n.sel-3ZIRz .imageWrapper-QwsRE:hover,\n.small-Ynrzj.sel-3ZIRz .imageWrapper-QwsRE:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px rgb(230, 230, 230) solid;\n}\n.sel-3ZIRz .imageWrapper-QwsRE,\n.small-Ynrzj.sel-3ZIRz .imageWrapper-QwsRE {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.wcImage-eveCj {\n  width: calc(100% - 8px);\n  aspect-ratio: 1;\n  border: 4px white solid;\n  border-radius: 50%;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n}\n.sel-3ZIRz .wcImage-eveCj,\n.small-Ynrzj.sel-3ZIRz .wcImage-eveCj {\n  border: 4px var(--primaryColor) solid;\n  border: 4px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n\n.hexColor-NBrjx {\n  width: 80px;\n  height: 80px;\n}\n\n.title-mFBM6 {\n  margin-top: 4px;\n  text-align: center;\n  float: left;\n  max-height: 64px;\n  min-height: 16px;\n  width: 100%;\n  font-size: 14px;\n  line-height: 16px;\n  overflow: hidden;\n  display: -webkit-box;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  -webkit-line-clamp: 2;\n  position: relative;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  z-index: 400;\n}\n\n.PaletteItem-C-fa2:hover .title-mFBM6,\n.small-Ynrzj .PaletteItem-C-fa2:hover .title-mFBM6 {\n  max-height: 608px;\n  -webkit-line-clamp: 30;\n  overflow: visible;\n  z-index: 200;\n}\n\n/* Size Small */\n\n.small-Ynrzj .wcVCodexText-GN3-8 {\n  line-height: 58px;\n  font-size: 12px;\n}\n\n.small-Ynrzj .title-mFBM6 {\n  font-size: 12px;\n  margin-top: 6px;\n  -webkit-line-clamp: 1;\n}\n/* Size very Small */\n\n.very-small-XTQPS .wcVCodexText-GN3-8 {\n  line-height: 48px;\n  font-size: 10px;\n}\n\n.very-small-XTQPS .title-mFBM6 {\n  font-size: 10px;\n  margin-top: 5px;\n  -webkit-line-clamp: 1;\n}\n\n/* Size big */\n\n.big-wADuy .wcVCodexText-GN3-8 {\n  line-height: 158px;\n  font-size: 15px;\n}\n\n.big-wADuy .title-mFBM6 {\n  font-size: 15px;\n  margin-top: 10px;\n  -webkit-line-clamp: 2;\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; }
@@ -39,7 +40,8 @@ var Option = function Option(_ref) {
   var _item$hexColor, _renderLayer;
   var itemP = _ref.item,
     type = _ref.type,
-    paletteId = _ref.paletteId;
+    paletteId = _ref.paletteId,
+    hidePricePreview = _ref.hidePricePreview;
   var item = itemP;
   var viewHandler = useViewHandler();
   var _useState = useState(''),
@@ -69,8 +71,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;
@@ -115,10 +117,13 @@ var Option = function Option(_ref) {
       },
       metaData: item.metaData,
       visible: [metaDataVisible, setMetaDataVisible]
-    }, item.codex), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+    }, item.codex), !hidePricePreview && item.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+      asyncPricePreview: item.pricePreviewPromise
+    }), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
       text: item.text + (item.freeText ? item.freeText : ''),
       hexColor: item.hexColor,
       desciption: metaDataVisible,
+      pricePreviewPromise: item.pricePreviewPromise,
       image: item.image,
       layerProps: layerProps
     }, item.codex)))]

package/build/esm/{index-104e1375.js → index-f722056b.js}

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 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 classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState, useEffect } from 'react';

package/build/esm/{index-43df4037.js → index-f843720d.js}

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

package/build/esm/{index-cfd81226.js → index-f93486a0.js}

@@ -1,14 +1,14 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { u as useViewHandler } from './index-5f412e0b.js';
+import { u as useViewHandler } from './index-6df691c0.js';
 import { toJS } from 'mobx';
 import { useState } from 'react';
-import { h as header } from './index.module-7aed3bdf.js';
-import { c as collapsibleHeader, d as dpArrow, b as dArrow, e as boxes, f as box, g as boxSelected, h as boxImage, j as jsonSelection, i as jsonSelected } from './index.module-a120745c.js';
+import { h as header } from './index.module-ffd75389.js';
+import { c as collapsibleHeader, d as dpArrow, b as dArrow, e as boxes, f as box, g as boxSelected, h as boxImage, j as jsonSelection, i as jsonSelected } from './index.module-ab609e8b.js';
 import { observer } from 'mobx-react-lite';
 import classnames from 'classnames';
-import { n as notExpanded } from './index.module-96182b35.js';
+import { n as notExpanded } from './index.module-601a4b3f.js';
 import Collapsible from 'react-collapsible';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';

package/build/esm/{index-35560959.js → index-f9f730d5.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-fa136b58.js → index-fa8619f6.js}

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

package/build/esm/{index-d7286d57.js → index-fac627d3.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 { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';

package/build/esm/{index-c37a6539.js → index-fbaf699f.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 classnames from 'classnames';
 import { observer } from 'mobx-react-lite';

package/build/esm/{index-cd94d89b.js → index-fe2a846e.js}

@@ -1,9 +1,9 @@
-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 Dropdown from 'react-dropdown';
 import { useTranslation } from '@crystaldesign/diva-core';
 import classnames from 'classnames';
-import Arrow from './index-218ee072.js';
+import Arrow from './index-d8824de9.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/{index-f6636bea.js → index-fe87bcdf.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 'react';
 import { useTranslation } from '@crystaldesign/diva-core';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
-import ArQrCodeIcon from './index-d63031da.js';
-import ProductRoomList from './index-5e13a783.js';
+import ArQrCodeIcon from './index-4afa1fba.js';
+import ProductRoomList from './index-177c1426.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -19,9 +19,9 @@ import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import 'react-laag';
-import './index-077a9a6c.js';
+import './index-5abdc930.js';
 import 'react-qr-code';
-import './index-2a23f4d7.js';
+import './index-77f2cfa2.js';
 
 var wcNav3DToolbar = "wc_Nav3DToolbar-NM2CK";
 var landscape = "landscape-0Dn10";