@crystaldesign/diva-web-planner-react 24.13.0-rc.8 → 24.13.0

package/build/esm/{index-7a0a56df.js → index-af728ba0.js}

@@ -1,8 +1,8 @@
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import 'react';
 import { ContentBoxComponent } from '@crystaldesign/content-box';
 import { observer } from 'mobx-react-lite';
-import FilterItem from './index-5627b24c.js';
+import FilterItem from './index-7cd8dd67.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/{index-2190c850.js → index-b04d1899.js}

@@ -1,4 +1,4 @@
-import { s as styleInject } from './index-62e351ed.js';
+import { s as styleInject } from './index-da1937c1.js';
 import 'react';
 import classnames from 'classnames';
 import { useTranslation } from '@crystaldesign/diva-core';

package/build/esm/{index-3a410b58.js → index-b0837f1f.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useRef, useEffect } from 'react';

package/build/esm/{index-88569e32.js → index-b2b327f2.js}

@@ -1,6 +1,6 @@
-import { s as styleInject } from './index-62e351ed.js';
+import { s as styleInject } from './index-da1937c1.js';
 import { observer } from 'mobx-react-lite';
-import Arrow from './index-7c0a49ff.js';
+import Arrow from './index-46a5bbc3.js';
 import 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';

package/build/esm/{index-d29c4cfb.js → index-b2ca0717.js}

@@ -1,10 +1,10 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import { useRef, useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
 import RealTimeRenderer from '@crystaldesign/real-time-viewer';
-import Image3DNavBar from './index-a86358e7.js';
+import Image3DNavBar from './index-5c0ff9c4.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/{index-fffed128.js → index-b2e22723.js}

@@ -1,9 +1,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-62e351ed.js';
+import './index-da1937c1.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import ArticleOverview from './index-da96c395.js';
-import JsonViewer from './index-68432820.js';
+import ArticleOverview from './index-e7c27375.js';
+import JsonViewer from './index-7d1d8576.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/objectWithoutProperties';
@@ -17,10 +17,10 @@ import '@babel/runtime/helpers/toConsumableArray';
 import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
-import './index.module-591743df.js';
-import './index.module-944b044e.js';
+import './index.module-9dc36cb1.js';
+import './index.module-bbe0a7a1.js';
 import 'classnames';
-import './index.module-12186d8c.js';
+import './index.module-56943cef.js';
 import 'react-collapsible';
 import 'react-json-view';
 

package/build/esm/{index-b9c25f79.js → index-b3766b8d.js}

@@ -1,11 +1,11 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import { useState, useEffect } from 'react';
 import { useTranslation, DivaUtils } from '@crystaldesign/diva-core';
 import classnames from 'classnames';
 import Collapsible from 'react-collapsible';
 import { observer } from 'mobx-react-lite';
-import InfoIcon from './index-91dad7cd.js';
+import InfoIcon from './index-957ad1d5.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -28,7 +28,7 @@ var deltaPriceVisible = "deltaPriceVisible-yzRB0";
 var wcFoldingArrow = "wcFoldingArrow-Ta8kT";
 var wcGroupOpen = "wcGroupOpen-oAf0q";
 var wcDeltaPrice = "wcDeltaPrice-7E6Jg";
-var css_248z = ".wrapper--ib5A {\n  width: 100%;\n}\n\n.wcConfigurator-settings-Jey-L .wcGroupedContainer-PIV-1 {\n  transition: all 0.35s ease;\n  box-sizing: content-box;\n  overflow: visible;\n  display: inline-block;\n  width: 100%;\n}\n\n.wcPaletteHeader-743rE.wcSizeGroupHeader-qNjZR {\n  border-radius: 0 !important;\n  border-radius: initial !important;\n}\n\n.wcPaletteHeader-743rE.wcSizeGroupHeader-qNjZR {\n  width: 98%;\n  height: 24px;\n  padding-top: 9.6px;\n  border-bottom: 1px solid #dfdfdf;\n  position: relative;\n  display: flex;\n  z-index: 100;\n  margin-left: 1%;\n  margin-right: 1%;\n}\n.wcPaletteHeader-743rE.wcSizeGroupHeader-qNjZR:hover {\n  z-index: 200;\n}\n\n.wcGroupHeaderTitle-vGDWm {\n  font-size: 17.6px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  -webkit-text-stroke: 0.4px;\n  width: calc(100% - 32px);\n  margin-left: 32px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n}\n\n.deltaPriceVisible-yzRB0.wcGroupHeaderTitle-vGDWm {\n  width: calc(100% - 132px);\n  height: 100%;\n}\n.wcGroupHeaderTitle-vGDWm:hover {\n  z-index: 200;\n}\n\n.wcPaletteHeader-743rE .wcFoldingArrow-Ta8kT {\n  position: absolute;\n  margin: 6.4px;\n  top: 0px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2211%22 height%3D%227%22 viewBox%3D%220 0 11 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10.4375 0.688354L6.15179 5.68835L1.4375 0.688354%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  transform: rotateZ(0deg);\n  transition: all 0.35s ease;\n  width: 20.8px;\n  height: 22.4px;\n}\n\n.wcGroupOpen-oAf0q .wcPaletteHeader-743rE .wcFoldingArrow-Ta8kT {\n  transform: rotateZ(180deg);\n}\n\n.wcDeltaPrice-7E6Jg {\n  position: absolute;\n  right: 16px;\n}\n";
+var css_248z = ".wrapper--ib5A {\n  width: 100%;\n}\n\n.wcConfigurator-settings-Jey-L .wcGroupedContainer-PIV-1 {\n  transition: all 0.35s ease;\n  box-sizing: content-box;\n  overflow: visible;\n  display: inline-block;\n  width: 100%;\n}\n\n.wcPaletteHeader-743rE.wcSizeGroupHeader-qNjZR {\n  border-radius: 0 !important;\n  border-radius: initial !important;\n}\n\n.wcPaletteHeader-743rE.wcSizeGroupHeader-qNjZR {\n  width: 98%;\n  height: 34px;\n  border-bottom: 1px solid #dfdfdf;\n  position: relative;\n  display: flex;\n  z-index: 100;\n  margin-left: 1%;\n  margin-right: 1%;\n  align-items: center;\n}\n.wcPaletteHeader-743rE.wcSizeGroupHeader-qNjZR:hover {\n  z-index: 200;\n}\n\n.wcGroupHeaderTitle-vGDWm {\n  font-size: 17.6px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  -webkit-text-stroke: 0.4px;\n  width: calc(100% - 32px);\n  margin-top: 6px;\n  overflow: hidden;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  position: relative;\n}\n\n.deltaPriceVisible-yzRB0.wcGroupHeaderTitle-vGDWm {\n  width: calc(100% - 132px);\n  height: 100%;\n}\n.wcGroupHeaderTitle-vGDWm:hover {\n  z-index: 200;\n}\n\n.wcPaletteHeader-743rE .wcFoldingArrow-Ta8kT {\n  margin: 0px 6px;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2211%22 height%3D%227%22 viewBox%3D%220 0 11 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10.4375 0.688354L6.15179 5.68835L1.4375 0.688354%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  transform: rotateZ(0deg);\n  transition: all 0.35s ease;\n  width: 20.8px;\n  height: 22.4px;\n}\n\n.wcGroupOpen-oAf0q .wcPaletteHeader-743rE .wcFoldingArrow-Ta8kT {\n  transform: rotateZ(180deg);\n}\n\n.wcDeltaPrice-7E6Jg {\n  position: absolute;\n  right: 16px;\n}\n";
 styleInject(css_248z);
 
 var Group = function Group(_ref) {
@@ -83,18 +83,20 @@ var Group = function Group(_ref) {
       trigger: /*#__PURE__*/jsxs("div", {
         className: classnames(wcPaletteHeader, wcSizeGroupHeader),
         children: [/*#__PURE__*/jsx("div", {
-          className: classnames(wcGroupHeaderTitle, deltaPrice !== undefined ? deltaPriceVisible : undefined),
-          children: title
-        }), deltaPrice !== undefined && /*#__PURE__*/jsx("div", {
-          className: classnames(wcDeltaPrice),
-          children: (deltaPrice >= 0 ? '+' : '-') + ' ' + DivaUtils.formatPrice(Math.abs(deltaPrice))
+          className: classnames(wcFoldingArrow)
         }), group.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
           item: group,
           style: {
-            bottom: 8
+            zIndex: 100,
+            margin: '0px 10px',
+            position: 'relative'
           }
         }), /*#__PURE__*/jsx("div", {
-          className: classnames(wcFoldingArrow)
+          className: classnames(wcGroupHeaderTitle, deltaPrice !== undefined ? deltaPriceVisible : undefined),
+          children: title
+        }), deltaPrice !== undefined && /*#__PURE__*/jsx("div", {
+          className: classnames(wcDeltaPrice),
+          children: (deltaPrice >= 0 ? '+' : '-') + ' ' + DivaUtils.formatPrice(Math.abs(deltaPrice))
         })]
       }),
       easing: "ease",

package/build/esm/{index-548b3897.js → index-b87d08e2.js}

@@ -1,9 +1,9 @@
-import { u as useViewHandler } from './index-62e351ed.js';
+import { u as useViewHandler } from './index-da1937c1.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import Image3DNavBar from './index-a86358e7.js';
-import { g as wcConfigurator3Dimage, i as imageCenterOrbit, h as imageCenterStatic } from './index.module-93e8e774.js';
-import Logo from './index-b7624242.js';
+import Image3DNavBar from './index-5c0ff9c4.js';
+import { g as wcConfigurator3Dimage, i as imageCenterOrbit, h as imageCenterStatic } from './index.module-05074e39.js';
+import Logo from './index-4c1845a1.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -32,7 +32,7 @@ var Planner3DImage = function Planner3DImage(props) {
       // backgroundImage: viewHandler.productState.RenderImageURL,
       visibility: viewHandler.productState.doShowRenderImage ? 'visible' : 'hidden'
     },
-    children: [/*#__PURE__*/jsx(Image3DNavBar, {}), /*#__PURE__*/jsx("img", {
+    children: [viewHandler.productState.doShowRenderImage && /*#__PURE__*/jsx(Image3DNavBar, {}), /*#__PURE__*/jsx("img", {
       className: !viewHandler.productState.plannerRenderingIsStaticBG ? imageCenterOrbit : imageCenterStatic,
       id: "diva3dImg",
       draggable: "false",

package/build/esm/{index-ae2c167c.js → index-b92bf04a.js}

@@ -1,10 +1,10 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.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-91dad7cd.js';
+import InfoIcon from './index-957ad1d5.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -27,7 +27,7 @@ var title = "title-2mKgp";
 var colum = "colum-cjf3n";
 var dropdownWidth = "dropdownWidth-D5Fng";
 var image = "image-7MOa9";
-var css_248z = ".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: box-shadow 0.5s, 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 css_248z = ".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";
 styleInject(css_248z);
 
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
@@ -36,7 +36,8 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 var DropDowmText = function DropDowmText(_ref) {
   var _item$selectedElement;
   var item = _ref.item,
-    paletteId = _ref.paletteId;
+    paletteId = _ref.paletteId,
+    style = _ref.style;
   var viewHandler = useViewHandler();
   var allItemsP = item.groups.flatMap(function (group) {
     return group.items;
@@ -97,6 +98,7 @@ var DropDowmText = function DropDowmText(_ref) {
     ref: function ref(_ref2) {
       return item.htmlRef = _ref2;
     },
+    style: style,
     children: [/*#__PURE__*/jsx("div", {
       className: classnames(colum, title),
       children: item.name
@@ -114,8 +116,8 @@ var DropDowmText = function DropDowmText(_ref) {
     }), contentItem && /*#__PURE__*/jsx(InfoIcon, {
       item: contentItem,
       style: {
-        bottom: 'calc(50% - 8px)',
-        right: '-5%'
+        bottom: '24px',
+        right: '20px'
       }
     })]
   });

package/build/esm/{index-01d9c656.js → index-b94feec5.js}

@@ -1,4 +1,4 @@
-import { s as styleInject } from './index-62e351ed.js';
+import { s as styleInject } from './index-da1937c1.js';
 import classnames from 'classnames';
 import 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';

package/build/esm/{index-ea29a6a5.js → index-bb1f29f5.js}

@@ -1,19 +1,19 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import React, { useState, useEffect, Suspense } from 'react';
 import { observer } from 'mobx-react-lite';
 import sift from 'sift';
-import TextBox from './index-b7b52366.js';
-import ItemVariant from './index-36b8737f.js';
-import SettingsPaletteGroup from './index-df53a144.js';
-import ToggleOption from './index-f052ab58.js';
-import GroupDropdown from './index-4d84f110.js';
-import PromotedProducts from './index-6ad5a07d.js';
-import ToggleName from './index-3ade1675.js';
-import ProductList from './index-9b56809f.js';
-import itemPaletteTypeComponentMap from './index-b5459cba.js';
-import ItemWrapper from './index-4aca1b41.js';
+import TextBox from './index-3a00e0fe.js';
+import ItemVariant from './index-dc932821.js';
+import SettingsPaletteGroup from './index-c54fe13f.js';
+import ToggleOption from './index-280dedaf.js';
+import GroupDropdown from './index-99510341.js';
+import PromotedProducts from './index-680fb7a2.js';
+import ToggleName from './index-2d62c92a.js';
+import ProductList from './index-f2f589d8.js';
+import itemPaletteTypeComponentMap from './index-3debe282.js';
+import ItemWrapper from './index-45d36f9e.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 var collapsableInner = "collapsable-inner-YPvJa";
@@ -23,10 +23,10 @@ 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 ShelfPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-fce3e4ae.js');
+  return import('./index-6424cf19.js');
 });
 var DoorPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-3716a714.js');
+  return import('./index-47015d1e.js');
 });
 var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
   var _viewHandler$uiState$, _settingsSizes$gapDef, _settingsSizes$sizeDe, _viewHandler$uiState$2, _item$groups$;
@@ -66,64 +66,78 @@ var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
   //s the catalogteam can define the size of the items so it would be some kind of catalog ux improvment -> TODO refactoring
   var settingsSizes = (_viewHandler$uiState$ = viewHandler.uiState.ViewConfig.settingsSizes) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : {};
   var gridGap = (_settingsSizes$gapDef = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapDefault) !== null && _settingsSizes$gapDef !== void 0 ? _settingsSizes$gapDef : '10px';
-  var gridItemSize = (_settingsSizes$sizeDe = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeDefault) !== null && _settingsSizes$sizeDe !== void 0 ? _settingsSizes$sizeDe : '300px';
+  var gridSize = (_settingsSizes$sizeDe = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeDefault) !== null && _settingsSizes$sizeDe !== void 0 ? _settingsSizes$sizeDe : '300px';
+  var infoIconSize = undefined;
   if (item.isRenderedNotInSettingPalette && !item.isRenderedInAccessorieStep) {
-    gridItemSize = '240px';
+    gridSize = '240px';
   } else if (item.type == 'SUMMARY_ARTICLES' || item.type === 'SUMMARY_OPTIONTREE' || item.type == 'SUMMARY_PARTLIST' || item.type == 'VARIANTS') {
-    gridItemSize = 'calc(100% - 20px)';
+    gridSize = 'calc(100% - 20px)';
   } else if (item.type == 'GAL_GROUP_DROPDOWN' || item.type === 'GAL_BIG') {
-    gridItemSize = '100px';
+    gridSize = '100px';
   } else if (item.type == 'ACC') {
     if (settingsSizes.sizeAccessoires) {
-      gridItemSize = settingsSizes.sizeAccessoires;
+      gridSize = settingsSizes.sizeAccessoires;
     }
   } else if (item.type == 'ACC_CONFIG') {
-    gridItemSize = '100%';
+    gridSize = '100%';
   } else if (item.type.startsWith('GAL_SMALL')) {
-    gridItemSize = '60px';
+    gridSize = '60px';
   } else if (item.type == 'RANGE') {
-    gridItemSize = '100%';
+    gridSize = '100%';
   } else if (item.type == 'GAL') {
     var _settingsSizes$sizeGa, _settingsSizes$gapGal;
-    gridItemSize = (_settingsSizes$sizeGa = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeGallery) !== null && _settingsSizes$sizeGa !== void 0 ? _settingsSizes$sizeGa : '80px';
+    gridSize = (_settingsSizes$sizeGa = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeGallery) !== null && _settingsSizes$sizeGa !== void 0 ? _settingsSizes$sizeGa : '80px';
     gridGap = (_settingsSizes$gapGal = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapGallery) !== null && _settingsSizes$gapGal !== void 0 ? _settingsSizes$gapGal : '10px';
   } else if (item.type === 'PLANNERSWITCH') {
-    gridItemSize = '170px';
+    gridSize = '170px';
   } else if (item.type === 'SMALL' && viewHandler.getIsInMobileView() && ((_viewHandler$uiState$2 = viewHandler.uiState.templateConfigKeys) === null || _viewHandler$uiState$2 === void 0 ? void 0 : _viewHandler$uiState$2.ItemDefault) == 'jungle') {
     //for the usecase of schlaraffia in mobile
     //TODO for refactorig this should be done nicer
-    gridItemSize = '120px';
+    gridSize = '120px';
   } else if (item.type === 'SHELFPLANNER' && viewHandler.productState.shelfPlannerRTV) {
-    gridItemSize = '120px';
+    gridSize = '120px';
   } else if (item.type === 'VERY_SMALL') {
-    gridItemSize = '48%';
+    gridSize = '48%';
   } else if (item.type === 'GAL_TEXT') {
-    gridItemSize = '100px';
+    gridSize = '100px';
   } else if (item.type === 'GAL_BIG_TEXT') {
-    gridItemSize = '120px';
+    gridSize = '120px';
   } else if (item.type === 'GAL_SMALL_TEXT') {
-    gridItemSize = '70px';
+    gridSize = '70px';
   }
+  if (['GAL_SMALL_GROUP_DROPDOWN', 'TOGGLE', 'TOGGLE_NAME', 'DROPDOWN_IMAGE', 'DROPDOWN_TEXT'].includes(item.type)) {
+    infoIconSize = '20px';
+  }
+  var variables = _objectSpread({
+    '--gridSize': gridSize,
+    '--gridGap': gridGap
+  }, infoIconSize ? {
+    '--infoIconSize': infoIconSize
+  } : {});
   if (!item.visible) return /*#__PURE__*/jsx(Fragment, {});
   switch (item.type) {
     case 'TOGGLE':
       return /*#__PURE__*/jsx(ToggleOption, {
+        style: variables,
         item: item,
         paletteId: item.id
       });
     case 'TOGGLE_NAME':
       return /*#__PURE__*/jsx(ToggleName, {
+        style: variables,
         item: item,
         paletteId: item.id
       });
     case 'TEXTBOX':
       return /*#__PURE__*/jsx(TextBox, {
+        style: variables,
         item: item,
         paletteId: item.id
       });
     case 'DROPDOWN_TEXT':
     case 'DROPDOWN_IMAGE':
       return /*#__PURE__*/jsx(ItemVariant, {
+        style: variables,
         item: item,
         paletteId: item.id
       });
@@ -140,10 +154,7 @@ var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
           filteredGroups: filteredGroups,
           item: item,
           id: item.id,
-          style: {
-            '--gridSize': gridItemSize,
-            '--gridGap': gridGap
-          }
+          style: variables
         }, item.id)
       });
     case 'PRODUCTS':
@@ -172,8 +183,7 @@ var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
         contentInnerClassName: innerGridClass
       }, item.configStepKey);
       return /*#__PURE__*/jsx(ItemWrapper, {
-        gridGap: gridGap,
-        gridItemSize: gridItemSize,
+        style: variables,
         item: item,
         children: childGroup
       });
@@ -197,8 +207,7 @@ var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
         PaletteComponent: PaletteComponent
       });
       return /*#__PURE__*/jsx(ItemWrapper, {
-        gridGap: gridGap,
-        gridItemSize: gridItemSize,
+        style: variables,
         item: item,
         children: children
       });

package/build/esm/{index-17dc5ff2.js → index-bb2a15a1.js}

@@ -1,6 +1,6 @@
-import './index-62e351ed.js';
+import './index-da1937c1.js';
 import 'react';
-import Default from './index-91e9c240.js';
+import Default from './index-908fe5cc.js';
 import { jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -17,11 +17,11 @@ import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import 'mobx-react-lite';
 import 'classnames';
-import './index.module-06be1225.js';
+import './index.module-7d0d413a.js';
 import 'react-laag';
-import './index-f96e96f7.js';
-import './index-16ea62d8.js';
-import './index-91dad7cd.js';
+import './index-f0bf3818.js';
+import './index-5df5f2eb.js';
+import './index-957ad1d5.js';
 
 var GallerySerious = function GallerySerious(_ref) {
   var item = _ref.item,

package/build/esm/{index-59eb0d94.js → index-bc03250f.js}

@@ -1,8 +1,8 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-62e351ed.js';
+import { u as useViewHandler } from './index-da1937c1.js';
 import { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import ItemVariant from './index-77647016.js';
+import ItemVariant from './index-768c5c35.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/{index-68564302.js → index-be9b556a.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-62e351ed.js';
+import { u as useViewHandler } from './index-da1937c1.js';
 import classnames from 'classnames';
 import { useState } from 'react';
 import { useTranslation } from '@crystaldesign/diva-core';

package/build/esm/{index-ae57581c.js → index-beca207b.js}

@@ -1,16 +1,16 @@
-import { u as useViewHandler } from './index-62e351ed.js';
+import { u as useViewHandler } from './index-da1937c1.js';
 import { observer } from 'mobx-react-lite';
 import React, { Suspense } from 'react';
-import Planner2DGrid from './index-6f326311.js';
-import Planner3DImage from './index-548b3897.js';
-import { w as wcConfiguratorProductCenter, p as portrait, l as landscape, s as settingsHidden, f as fullscreen, a as wcConfiguratorArticleImage, c as center, b as foldback, d as foldbackLeft, e as foldup } from './index.module-93e8e774.js';
+import Planner2DGrid from './index-4ec32f66.js';
+import Planner3DImage from './index-b87d08e2.js';
+import { w as wcConfiguratorProductCenter, p as portrait, l as landscape, s as settingsHidden, f as fullscreen, a as wcConfiguratorArticleImage, c as center, b as foldback, d as foldbackLeft, e as foldup } from './index.module-05074e39.js';
 import classnames from 'classnames';
-import Planner3DGrid from './index-23004ea0.js';
-import PlannerMsgContainer from './index-e228fa67.js';
-import PlannerUIVariant from './index-657064eb.js';
-import RotateInfo from './index-e348b193.js';
-import PromotedOpvs from './index-2ff07b97.js';
-import OrbitInteraction from './index-8dff9fb3.js';
+import Planner3DGrid from './index-67457d73.js';
+import PlannerMsgContainer from './index-f7d4c232.js';
+import PlannerUIVariant from './index-694b4647.js';
+import RotateInfo from './index-c7f6bb05.js';
+import PromotedOpvs from './index-0e473bf3.js';
+import OrbitInteraction from './index-06881a48.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -25,15 +25,15 @@ import '@babel/runtime/helpers/toConsumableArray';
 import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
-import './index-a86358e7.js';
-import './index-b7624242.js';
+import './index-5c0ff9c4.js';
+import './index-4c1845a1.js';
 import '@crystaldesign/content-box';
 
 var Planner3D = /*#__PURE__*/React.lazy(function () {
-  return import('./index-d29c4cfb.js');
+  return import('./index-b2ca0717.js');
 });
 var PlannerRTV = /*#__PURE__*/React.lazy(function () {
-  return import('./index-0182885c.js');
+  return import('./index-9527581e.js');
 });
 var ProductCenter = function ProductCenter(_ref) {
   var style = _ref.style,

package/build/esm/{index-0c2ec30e.js → index-becb2d22.js}

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

package/build/esm/{index-5d884e3d.js → index-bf10bd9a.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import './index-62e351ed.js';
+import './index-da1937c1.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';

package/build/esm/{index-755b2210.js → index-bf692c8f.js}

@@ -1,9 +1,9 @@
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import 'react';
 import classnames from 'classnames';
-import Option from './index-f8b76b9a.js';
+import Option from './index-55680f41.js';
 import { useTranslation } from '@crystaldesign/diva-core';
-import InfoIcon from './index-91dad7cd.js';
+import InfoIcon from './index-957ad1d5.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -18,12 +18,12 @@ import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import 'mobx-react-lite';
-import './index.module-066031ee.js';
-import './index.module-06be1225.js';
-import './index-0c2ec30e.js';
+import './index.module-82b063ad.js';
+import './index.module-7d0d413a.js';
+import './index-becb2d22.js';
 import 'react-laag';
-import './index-16ea62d8.js';
-import './index-f96e96f7.js';
+import './index-5df5f2eb.js';
+import './index-f0bf3818.js';
 
 var container = "container-GW-AX";
 var sel = "sel-jrQj2";

package/build/esm/{index-f8c880fd.js → index-c3521433.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-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import 'react';
 import { DivaUtils } from '@crystaldesign/diva-core';
 import { observer } from 'mobx-react-lite';

package/build/esm/{index-f60e005a.js → index-c482b456.js}

@@ -1,9 +1,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import { useHover, useLayer } from 'react-laag';
-import SettingsPosNrToolTip from './index-d1f22ab9.js';
+import SettingsPosNrToolTip from './index-a28968be.js';
 import { useDivaCore } from '@crystaldesign/diva-core';
 import classnames from 'classnames';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';

package/build/esm/{index-df53a144.js → index-c54fe13f.js}

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

package/build/esm/{index-e3af7df3.js → index-c5d72c49.js}

@@ -1,4 +1,4 @@
-import './index-62e351ed.js';
+import './index-da1937c1.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';

package/build/esm/{index-02c1c1a3.js → index-c768dfac.js}

@@ -1,9 +1,9 @@
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import classnames from 'classnames';
 import { useTranslation } from '@crystaldesign/diva-core';
-import PriceSumm from './index-62108a8f.js';
+import PriceSumm from './index-4d475890.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/{index-e348b193.js → index-c7f6bb05.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';

package/build/esm/{index-140cd888.js → index-c846df82.js}

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';