@crystaldesign/diva-web-planner-react 24.14.0-beta.8 → 24.14.0-rc.0

package/build/esm/{index-b55e3608.js → index-3378eb03.js}

@@ -1,14 +1,14 @@
-import { s as styleInject, u as useViewHandler } from './index-f37069da.js';
+import { s as styleInject, u as useViewHandler } from './index-78c00eed.js';
 import classnames from 'classnames';
 import { useEffect } from 'react';
-import Inputbox from './index-2864e102.js';
-import Product from './index-5e50464b.js';
-import Settings from './index-72da25bb.js';
-import NavigationButtons from './index-f2b3095b.js';
-import BasketAction from './index-b8c7ed39.js';
-import TabGroup from './index-56f60451.js';
+import Inputbox from './index-2a3dcafb.js';
+import Product from './index-56037e7e.js';
+import Settings from './index-dc38a14f.js';
+import NavigationButtons from './index-56e1c6bd.js';
+import BasketAction from './index-df2562fe.js';
+import TabGroup from './index-e0f74443.js';
 import { observer } from 'mobx-react-lite';
-import BarrierActions from './index-79b00461.js';
+import BarrierActions from './index-17b2a720.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -24,67 +24,67 @@ import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-e0bd96ce.js';
-import './index-31815467.js';
-import './index-6a5720c4.js';
-import './index-e18b0f1c.js';
-import './index-ef719a33.js';
+import './index-1aabf2d6.js';
+import './index-3aa9b5d6.js';
+import './index-8f367602.js';
+import './index-33f908f6.js';
+import './index-40e56edf.js';
 import 'react-laag';
-import './index-eaee9a8a.js';
-import './index-1728d1bd.js';
-import './index-f7b42992.js';
+import './index-d2a408bd.js';
+import './index-00d23ccb.js';
+import './index-44e5cfbe.js';
 import 'sift';
-import './index-6a70e5b3.js';
-import './index-46e6e40f.js';
-import './index-bcbd80e5.js';
-import './index-5a46022e.js';
-import './index.module-82b57313.js';
-import './index-6a4e568e.js';
+import './index-e59e8329.js';
+import './index-59d02025.js';
+import './index-9acec70e.js';
+import './index-a0e5ef19.js';
+import './index.module-4d7bf583.js';
+import './index-da03ac83.js';
 import 'react-switch';
-import './index-05e5de5b.js';
-import './index-c6c2ce62.js';
+import './index-007fc7e3.js';
+import './index-2dc56e9a.js';
 import 'react-dropdown';
-import './index-cb82f975.js';
-import './index-57f275c8.js';
-import './index-0586d33f.js';
-import './index-1728be0c.js';
+import './index-7998c732.js';
+import './index-b25979c4.js';
+import './index-3c1f3355.js';
+import './index-bdf685bc.js';
 import '@crystaldesign/content-box';
-import './index-835e5657.js';
-import './index-8747643c.js';
-import './index-94a6e624.js';
-import './index-7323277f.js';
-import './index-31ab9df1.js';
+import './index-6fef9dff.js';
+import './index-a6180195.js';
+import './index-42fa0481.js';
+import './index-4ff6104b.js';
+import './index-d97360e8.js';
 import '@crystaldesign/products-component';
-import './index-d7e30b8d.js';
-import './index-91e8222b.js';
-import './index-2d788823.js';
-import './index-b66a4bd4.js';
-import './index-62da2053.js';
-import './index-5a86771b.js';
-import './index-9209f4d4.js';
-import './index-ad03c196.js';
-import './index-87b5753a.js';
-import './index-e65bfb61.js';
-import './index-63bb458b.js';
-import './index-1997099c.js';
-import './index-bcf333b3.js';
-import './index.module-30bda910.js';
-import './index-fd7b60d3.js';
-import './index-de7f0aa6.js';
-import './index-f4a3ffe0.js';
-import './index-205bb466.js';
-import './index-2fb786f7.js';
-import './index-c7db46f5.js';
-import './index-7ad8a57a.js';
-import './index.module-9fc11720.js';
-import './index-f1a1ab2f.js';
-import './index-20071788.js';
-import './index-5767b43c.js';
-import './index-c16069c2.js';
-import './index-cdaf58fc.js';
-import './index-1afd2b54.js';
-import './index-7f05803b.js';
-import './index-95fffd73.js';
+import './index-7a3d3d31.js';
+import './index-b9af893f.js';
+import './index-0fa77985.js';
+import './index-681fe5cc.js';
+import './index-0c92ea5c.js';
+import './index-6231d6c0.js';
+import './index-1f72abf6.js';
+import './index-8c0ebda9.js';
+import './index-e24c19c9.js';
+import './index-86e78ee9.js';
+import './index-84c9ffd8.js';
+import './index-13a34f64.js';
+import './index-bc909eae.js';
+import './index.module-4860657e.js';
+import './index-4635d1ae.js';
+import './index-8fcad7e8.js';
+import './index-6b373137.js';
+import './index-de52cdea.js';
+import './index-77de5457.js';
+import './index-511c4366.js';
+import './index-ff536ff0.js';
+import './index.module-9403b3fe.js';
+import './index-853c176e.js';
+import './index-37ace25f.js';
+import './index-d9b129f1.js';
+import './index-97fe941b.js';
+import './index-517c163f.js';
+import './index-80d64353.js';
+import './index-d8c33a2d.js';
+import './index-d2f6d343.js';
 
 var wcConfigurator = "wcConfigurator-XDqzc";
 var landscape = "landscape-h-sQZ";
@@ -95,10 +95,10 @@ var wcConfiguratorSteps = "wcConfigurator-steps-sGIVo";
 var wcConfiguratorSettingsActions = "wcConfigurator-settings-actions-M6Qsu";
 var wcConfiguratorAction = "wcConfigurator-action-EgrS-";
 var expanded = "expanded-Iylhn";
+var foldedup = "foldedup-NCdbS";
 var settingsHidden = "settings-hidden-T4ySb";
 var isOnLastStep = "isOnLastStep-mmqas";
-var foldedup = "foldedup-NCdbS";
-var css_248z = ".wcConfigurator-XDqzc {\n  position: relative;\n  height: calc(100% - 60px);\n  width: 100%;\n  margin: 30px 0;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  letter-spacing: 0.5px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.1px;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */\n  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently*/\n}\n\n.wcConfigurator-XDqzc *,\n.wcConfigurator-XDqzc *::before,\n.wcConfigurator-XDqzc *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wcConfigurator-XDqzc.landscape-h-sQZ {\n  height: 100%;\n  width: 100%;\n  margin: 0;\n}\n\n.wcConfigurator-XDqzc.portrait-GHprw {\n  height: 100%;\n  width: 100%;\n  margin: 0;\n}\n\n/******************************************Product*******************************************/\n\n.wcConfigurator-product--JVWg {\n  position: absolute;\n  width: 69%;\n  top: calc(56px + 20px);\n  height: calc(100% - 56px - 20px);\n}\n\n/**************************************ConfigPalette***************************************/\n.wcConfigurator-settings-YxHjA {\n  position: absolute;\n  width: 31%;\n  overflow: visible;\n  z-index: 500;\n  right: 0px;\n  top: calc(56px + 20px);\n  height: calc(100% - 60px - 56px - 70px);\n  transition: width 0.2s ease-in-out;\n}\n\n/**************************************TabGroup********************************************/\n\n.wcConfigurator-steps-sGIVo {\n  position: absolute;\n  z-index: 300;\n  height: 56px;\n  width: 100%;\n  transition: width 0.2s ease-in-out;\n}\n\n/************************************Navigaton Buttons*************************************/\n\n.wcConfigurator-settings-actions-M6Qsu {\n  position: absolute;\n  width: 31%;\n  height: 40px;\n  right: 0px;\n  bottom: calc(40px + 20px);\n  padding-top: 10px;\n  z-index: 500;\n  transition: width 0.2s ease-in-out;\n}\n\n/*************************************Basket Button****************************************/\n.wcConfigurator-action-EgrS- {\n  position: absolute;\n  width: 31%;\n  height: 40px;\n  right: 0px;\n  bottom: 0px;\n  padding-top: 20px;\n  z-index: 500;\n  transition: width 0.2s ease-in-out;\n}\n\n/****************************************Settings- Expanded *******************************/\n.expanded-Iylhn .wcConfigurator-settings-YxHjA,\n.expanded-Iylhn .wcConfigurator-action-EgrS-,\n.expanded-Iylhn .wcConfigurator-settings-actions-M6Qsu {\n  width: 62%;\n}\n\n.wcConfigurator-XDqzc.portrait-GHprw,\n.landscape-h-sQZ.wcConfigurator-XDqzc {\n  padding: 0;\n  padding: initial;\n  overflow: hidden;\n}\n/*********************************************************************Mobile Landscape***********************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Landscape ****************************/\n.landscape-h-sQZ .wcConfigurator-product--JVWg {\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n}\n.landscape-h-sQZ.settings-hidden-T4ySb .wcConfigurator-product--JVWg {\n  height: calc(100% - 40px);\n}\n\n/*************************ConfigPalette -- Mobile Landscape ***************************/\n\n.landscape-h-sQZ .wcConfigurator-settings-YxHjA {\n  top: calc(54.4px + 40px);\n  right: 0;\n  height: calc(100% - 54.4px - 40px - var(--configuratorActionHeight));\n  width: 55%;\n}\n\n/*configuratorPalette wird nach unten aus dem Blickfeld geschoben*/\n.landscape-h-sQZ.settings-hidden-T4ySb .wcConfigurator-settings-YxHjA {\n  top: 100%;\n}\n\n/*****************************TabGroup -- Mobile Landscape ****************************/\n\n.landscape-h-sQZ .wcConfigurator-steps-sGIVo {\n  position: absolute;\n  right: 0px;\n  left: auto;\n  left: initial;\n  top: 54.4px;\n  height: 40px;\n  width: 55%;\n}\n\n.landscape-h-sQZ.settings-hidden-T4ySb .wcConfigurator-steps-sGIVo {\n  left: 0px;\n  top: calc(100% - 40px);\n  width: 100%;\n}\n\n/******************Navigaton Buttons -- Mobile Landscape ******************************/\n.landscape-h-sQZ .wcConfigurator-settings-actions-M6Qsu {\n  bottom: 0px;\n  width: 55%;\n  height: var(--configuratorActionHeight);\n  padding-top: 0px;\n  right: 0;\n}\n\n.landscape-h-sQZ.settings-hidden-T4ySb .wcConfigurator-settings-actions-M6Qsu {\n  display: none !important;\n}\n\n/*********************Basket Button-- Mobile Landscape*********************************/\n.landscape-h-sQZ .wcConfigurator-action-EgrS-,\n.landscape-h-sQZ.settings-hidden-T4ySb .wcConfigurator-action-EgrS- {\n  display: none !important;\n}\n\n.landscape-h-sQZ.isOnLastStep-mmqas .wcConfigurator-action-EgrS- {\n  display: block;\n  right: 0px;\n  bottom: 0px;\n  width: 55%;\n  height: var(--configuratorActionHeight);\n  padding-top: 0px;\n}\n\n/*********************************************************************Mobile Portrait************************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Portrait *****************************/\n.portrait-GHprw .wcConfigurator-product--JVWg {\n  top: 0;\n  left: 0;\n  height: 48%;\n  width: 100%;\n}\n\n.portrait-GHprw.foldedup-NCdbS .wcConfigurator-product--JVWg {\n  z-index: 1;\n}\n\n.portrait-GHprw.settings-hidden-T4ySb .wcConfigurator-product--JVWg {\n  height: calc(100% - 40px);\n}\n\n/*************************ConfigPalette -- Mobile Portrait ****************************/\n\n.portrait-GHprw .wcConfigurator-settings-YxHjA {\n  left: 0px;\n  top: calc(48% + 40px);\n  height: calc(52% - 40px - var(--configuratorActionHeight));\n  width: 100%;\n}\n\n.portrait-GHprw.settings-hidden-T4ySb .wcConfigurator-settings-YxHjA {\n  top: 100%;\n}\n\n.portrait-GHprw.foldedup-NCdbS .wcConfigurator-settings-YxHjA {\n  top: 2.5rem;\n  height: calc(100% - 40px);\n}\n\n/*****************************TabGroup -- Mobile Portrait *****************************/\n\n.portrait-GHprw .wcConfigurator-steps-sGIVo {\n  position: absolute;\n  left: 0px;\n  top: 48%;\n  width: 100%;\n  height: 40px;\n}\n\n.portrait-GHprw.foldedup-NCdbS .wcConfigurator-steps-sGIVo {\n  top: 0px;\n}\n\n.portrait-GHprw.settings-hidden-T4ySb .wcConfigurator-steps-sGIVo {\n  top: auto;\n  top: initial;\n  bottom: 0px;\n}\n/******************Navigaton Buttons -- Mobile Portrait *******************************/\n\n.portrait-GHprw .wcConfigurator-settings-actions-M6Qsu {\n  bottom: 0px;\n  width: 100%;\n  height: var(--configuratorActionHeight);\n  padding-top: 0px;\n  right: 0px;\n}\n.portrait-GHprw.isOnLastStep-mmqas .wcConfigurator-settings-actions-M6Qsu,\n.portrait-GHprw.settings-hidden-T4ySb .wcConfigurator-settings-actions-M6Qsu {\n  display: none !important;\n}\n\n/*********************Basket Button-- Mobile Portrait *********************************/\n\n.portrait-GHprw .wcConfigurator-action-EgrS-,\n.portrait-GHprw.settings-hidden-T4ySb .wcConfigurator-action-EgrS- {\n  display: none;\n}\n\n.portrait-GHprw.isOnLastStep-mmqas .wcConfigurator-action-EgrS- {\n  right: 0px;\n  bottom: 0px;\n  width: 100%;\n  height: var(--configuratorActionHeight);\n  padding-top: 0px;\n  display: block;\n}\n::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n::-webkit-scrollbar-track {\n  background: #dfdfdf;\n  border-radius: 3px;\n}\n::-webkit-scrollbar-thumb {\n  background: #b1b1b1;\n  border-radius: 3px;\n}\n";
+var css_248z = ".wcConfigurator-XDqzc {\n  position: relative;\n  height: calc(100% - 60px);\n  width: 100%;\n  margin: 30px 0;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  letter-spacing: 0.5px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.1px;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */\n  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently*/\n}\n\n.wcConfigurator-XDqzc *,\n.wcConfigurator-XDqzc *::before,\n.wcConfigurator-XDqzc *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wcConfigurator-XDqzc.landscape-h-sQZ {\n  height: 100%;\n  width: 100%;\n  margin: 0;\n}\n\n.wcConfigurator-XDqzc.portrait-GHprw {\n  height: 100%;\n  width: 100%;\n  margin: 0;\n}\n\n/******************************************Product*******************************************/\n\n.wcConfigurator-product--JVWg {\n  position: absolute;\n  width: 69%;\n  top: calc(56px + 20px);\n  height: calc(100% - 56px - 20px);\n}\n\n/**************************************ConfigPalette***************************************/\n.wcConfigurator-settings-YxHjA {\n  position: absolute;\n  width: 31%;\n  overflow: visible;\n  z-index: 500;\n  right: 0px;\n  top: calc(56px + 20px);\n  height: calc(100% - 60px - 56px - 70px);\n  transition: width 0.2s ease-in-out;\n}\n\n/**************************************TabGroup********************************************/\n\n.wcConfigurator-steps-sGIVo {\n  position: absolute;\n  z-index: 300;\n  height: 56px;\n  width: 100%;\n  transition: width 0.2s ease-in-out;\n}\n\n/************************************Navigaton Buttons*************************************/\n\n.wcConfigurator-settings-actions-M6Qsu {\n  position: absolute;\n  width: 31%;\n  height: 40px;\n  right: 0px;\n  bottom: calc(40px + 20px);\n  padding-top: 10px;\n  z-index: 500;\n  transition: width 0.2s ease-in-out;\n}\n\n/*************************************Basket Button****************************************/\n.wcConfigurator-action-EgrS- {\n  position: absolute;\n  width: 31%;\n  height: 40px;\n  right: 0px;\n  bottom: 0px;\n  padding-top: 20px;\n  z-index: 500;\n  transition: width 0.2s ease-in-out;\n}\n\n/****************************************Settings- Expanded *******************************/\n.expanded-Iylhn .wcConfigurator-settings-YxHjA,\n.expanded-Iylhn .wcConfigurator-action-EgrS-,\n.expanded-Iylhn .wcConfigurator-settings-actions-M6Qsu {\n  width: 62%;\n}\n\n.wcConfigurator-XDqzc.portrait-GHprw,\n.landscape-h-sQZ.wcConfigurator-XDqzc {\n  padding: 0;\n  padding: initial;\n  overflow: hidden;\n}\n/*********************************************************************Mobile Landscape***********************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Landscape ****************************/\n.landscape-h-sQZ .wcConfigurator-product--JVWg {\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n  max-width: none;\n  max-width: initial;\n}\n\n/*************************ConfigPalette -- Mobile Landscape ***************************/\n\n.landscape-h-sQZ .wcConfigurator-settings-YxHjA {\n  display: none;\n}\n\n/*configuratorPalette wird nach unten aus dem Blickfeld geschoben*/\n/* .landscape.settings-hidden .wcConfigurator-settings {\n  top: 100%;\n} */\n\n/*****************************TabGroup -- Mobile Landscape ****************************/\n\n.landscape-h-sQZ .wcConfigurator-steps-sGIVo {\n  display: none;\n}\n\n/******************Navigaton Buttons -- Mobile Landscape ******************************/\n.landscape-h-sQZ .wcConfigurator-settings-actions-M6Qsu {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Landscape*********************************/\n.landscape-h-sQZ .wcConfigurator-action-EgrS- {\n  display: none;\n}\n\n/*********************************************************************Mobile Portrait************************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Portrait *****************************/\n.portrait-GHprw .wcConfigurator-product--JVWg {\n  top: 0;\n  left: 0;\n  height: 48%;\n  width: 100%;\n}\n\n.portrait-GHprw.foldedup-NCdbS .wcConfigurator-product--JVWg {\n  z-index: 1;\n}\n\n.portrait-GHprw.settings-hidden-T4ySb .wcConfigurator-product--JVWg {\n  height: calc(100% - 40px);\n}\n\n/*************************ConfigPalette -- Mobile Portrait ****************************/\n\n.portrait-GHprw .wcConfigurator-settings-YxHjA {\n  left: 0px;\n  top: calc(48% + 40px);\n  height: calc(52% - 40px - var(--configuratorActionHeight));\n  width: 100%;\n}\n\n.portrait-GHprw.settings-hidden-T4ySb .wcConfigurator-settings-YxHjA {\n  top: 100%;\n}\n\n.portrait-GHprw.foldedup-NCdbS .wcConfigurator-settings-YxHjA {\n  top: 2.5rem;\n  height: calc(100% - 40px);\n}\n\n/*****************************TabGroup -- Mobile Portrait *****************************/\n\n.portrait-GHprw .wcConfigurator-steps-sGIVo {\n  position: absolute;\n  left: 0px;\n  top: 48%;\n  width: 100%;\n  height: 40px;\n}\n\n.portrait-GHprw.foldedup-NCdbS .wcConfigurator-steps-sGIVo {\n  top: 0px;\n}\n\n.portrait-GHprw.settings-hidden-T4ySb .wcConfigurator-steps-sGIVo {\n  top: auto;\n  top: initial;\n  bottom: 0px;\n}\n/******************Navigaton Buttons -- Mobile Portrait *******************************/\n\n.portrait-GHprw .wcConfigurator-settings-actions-M6Qsu {\n  bottom: 0px;\n  width: 100%;\n  height: var(--configuratorActionHeight);\n  padding-top: 0px;\n  right: 0px;\n}\n.portrait-GHprw.isOnLastStep-mmqas .wcConfigurator-settings-actions-M6Qsu,\n.portrait-GHprw.settings-hidden-T4ySb .wcConfigurator-settings-actions-M6Qsu {\n  display: none !important;\n}\n\n/*********************Basket Button-- Mobile Portrait *********************************/\n\n.portrait-GHprw .wcConfigurator-action-EgrS-,\n.portrait-GHprw.settings-hidden-T4ySb .wcConfigurator-action-EgrS- {\n  display: none;\n}\n\n.portrait-GHprw.isOnLastStep-mmqas .wcConfigurator-action-EgrS- {\n  right: 0px;\n  bottom: 0px;\n  width: 100%;\n  height: var(--configuratorActionHeight);\n  padding-top: 0px;\n  display: block;\n}\n::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n::-webkit-scrollbar-track {\n  background: #dfdfdf;\n  border-radius: 3px;\n}\n::-webkit-scrollbar-thumb {\n  background: #b1b1b1;\n  border-radius: 3px;\n}\n";
 styleInject(css_248z);
 
 var Gold = function Gold(props) {

package/build/esm/{index-e18b0f1c.js → index-33f908f6.js}

@@ -1,9 +1,9 @@
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { u as useViewHandler } from './index-f37069da.js';
+import { u as useViewHandler } from './index-78c00eed.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import { useTranslation } from '@crystaldesign/diva-core';
-import { w as wcConfiguratorSettingsHeaderActElements, S as SettingsPosNr$1 } from './index-ef719a33.js';
+import { w as wcConfiguratorSettingsHeaderActElements, S as SettingsPosNr$1 } from './index-40e56edf.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -18,7 +18,7 @@ import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import 'react-laag';
-import './index-eaee9a8a.js';
+import './index-d2a408bd.js';
 import 'classnames';
 
 var SettingsPosNrContainer = function SettingsPosNrContainer(_ref) {

package/build/esm/{index-903acad9.js → index-363a8397.js}

@@ -1,7 +1,7 @@
-import { s as styleInject } from './index-f37069da.js';
+import { s as styleInject } from './index-78c00eed.js';
 import 'react';
-import PlannerUI from './index-b1ebee21.js';
-import { c as wc3DOutlineSvg, d as wc3DOutlinePolygon, e as wc3DOutlinePolygonContours, f as wc3DOutlinePolygonContoursSel } from './index.module-41d7c5f1.js';
+import PlannerUI from './index-5314f4d7.js';
+import { c as wc3DOutlineSvg, d as wc3DOutlinePolygon, e as wc3DOutlinePolygonContours, f as wc3DOutlinePolygonContoursSel } from './index.module-8baf6836.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-96992296.js';
+import './index-d88ae19b.js';
 import 'classnames';
-import './index-53f5c5c8.js';
-import './index-c653356d.js';
-import './index-9f2e607e.js';
-import './index-38a9ad48.js';
-import './index-965d855c.js';
-import './index-8c3a9e2c.js';
-import './index-3f70040b.js';
-import './index-90cbc60f.js';
-import './index-51ac9599.js';
-import './index-6fd7f393.js';
-import './index-56d8cda7.js';
-import './index-38215619.js';
+import './index-e32c6b03.js';
+import './index-55ba96a6.js';
+import './index-a0abdb7f.js';
+import './index-630686ea.js';
+import './index-dafa5f25.js';
+import './index-3c9930ed.js';
+import './index-78781ebd.js';
+import './index-e2c3b613.js';
+import './index-1c5eacf2.js';
+import './index-7b38889d.js';
+import './index-d70d2f75.js';
+import './index-2781eb94.js';
 import 'react-draggable';
-import './index-7d5c27f6.js';
-import './index-cdfa9e28.js';
-import './index-1b18a545.js';
+import './index-37d467ee.js';
+import './index-47587365.js';
+import './index-1b84adec.js';
 
 var hidden = "hidden-75j7C";
 var css_248z = ".hidden-75j7C {\n  display: none;\n}\n";
@@ -101,7 +101,10 @@ var HiddenPlannerUI = function HiddenPlannerUI() {
       move3DGrid: {
         move3DGrid: ''
       },
-      trash: '',
+      trash: {
+        boxplanner: '',
+        trashClass: ''
+      },
       dimension: {
         distanceToGround: '',
         distanceToGroundIcon: ''

package/build/esm/{index-20071788.js → index-37ace25f.js}

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

package/build/esm/{index-7d5c27f6.js → index-37d467ee.js}

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-f37069da.js';
+import { u as useViewHandler } from './index-78c00eed.js';
 import { useState } from 'react';
 import classnames from 'classnames';
 import { Vector2 } from '@crystaldesign/web-planner-logic';

package/build/esm/{index-414cfc13.js → index-38b8aebb.js}

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

package/build/esm/{index-31815467.js → index-3aa9b5d6.js}

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

package/build/esm/{index-3fdc95b7.js → index-3bda00f7.js}

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

package/build/esm/{index-0586d33f.js → index-3c1f3355.js}

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { s as styleInject } from './index-f37069da.js';
+import { s as styleInject } from './index-78c00eed.js';
 import 'react';
 import classnames from 'classnames';
 import { jsx } from 'react/jsx-runtime';

package/build/esm/{index-8c3a9e2c.js → index-3c9930ed.js}

@@ -1,4 +1,4 @@
-import './index-f37069da.js';
+import './index-78c00eed.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';

package/build/esm/{index-7538815c.js → index-3d65d198.js}

@@ -1,9 +1,9 @@
-import { s as styleInject, u as useViewHandler } from './index-f37069da.js';
+import { s as styleInject, u as useViewHandler } from './index-78c00eed.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import Group from './index-9501980d.js';
+import Group from './index-0fa746a3.js';
 import { useDivaCore } from '@crystaldesign/diva-core';
-import StandradGroup from './index-6775077f.js';
+import StandradGroup from './index-4f704943.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -18,9 +18,9 @@ import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import 'classnames';
-import './index-62060d2e.js';
+import './index-e41f602f.js';
 import 'react-collapsible';
-import './index-05e5de5b.js';
+import './index-007fc7e3.js';
 
 var container = "container-IOQq6";
 var css_248z = ".container-IOQq6 {\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n  width: 100%;\n}\n";

package/build/esm/{index-44161157.js → index-40c692e3.js}

@@ -1,11 +1,11 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { s as styleInject, u as useViewHandler } from './index-f37069da.js';
+import { s as styleInject, u as useViewHandler } from './index-78c00eed.js';
 import { useRef, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import CheckoutFormNew from './index-b0d1aac9.js';
-import ProductCenter from './index-423ca39e.js';
-import ContentItemWrapper from './index-a64e88a7.js';
+import CheckoutFormNew from './index-c5728dcc.js';
+import ProductCenter from './index-cad0350b.js';
+import ContentItemWrapper from './index-e870f0ab.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/asyncToGenerator';
@@ -19,22 +19,22 @@ import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import 'classnames';
-import './index-6a4e568e.js';
+import './index-da03ac83.js';
 import 'react-switch';
 import 'react-dropdown';
-import './index-c4e53eb2.js';
-import './index-4d4cf791.js';
-import './index-7aafbf0e.js';
-import './index-ec67b68e.js';
-import './index.module-29a609ca.js';
-import './index-7f1f0ccd.js';
-import './index-872ddf17.js';
-import './index-f878cc0e.js';
-import './index-f0f94304.js';
-import './index-2290bd6c.js';
-import './index-853b1399.js';
+import './index-b9ebe6ae.js';
+import './index-4fec04c5.js';
+import './index-d936cd51.js';
+import './index-2837cc66.js';
+import './index.module-702a1e11.js';
+import './index-b8cc69c9.js';
+import './index-c84f1694.js';
+import './index-86c21008.js';
+import './index-8caf1d13.js';
+import './index-4890dffc.js';
+import './index-71faed98.js';
 import '@crystaldesign/content-box';
-import './index-aa96446b.js';
+import './index-5fedc70f.js';
 import '@crystaldesign/content-item';
 import 'react-draggable';
 

package/build/esm/{index-1831bcd5.js → index-40c8edb3.js}

@@ -1,8 +1,8 @@
-import './index-f37069da.js';
+import './index-78c00eed.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import SVGOverview from './index-282b2fdb.js';
-import SVGSourceViewer from './index-967557d5.js';
+import SVGOverview from './index-51149c8a.js';
+import SVGSourceViewer from './index-03b64339.js';
 import { jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -17,7 +17,7 @@ import '@babel/runtime/helpers/toConsumableArray';
 import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
-import './index.module-d7fc2242.js';
+import './index.module-e168886a.js';
 import 'classnames';
 
 var index = function index(props) {

package/build/esm/{index-ef719a33.js → index-40e56edf.js}

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

package/build/esm/{index-94a6e624.js → index-42fa0481.js}

@@ -1,10 +1,10 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-f37069da.js';
+import { s as styleInject, u as useViewHandler } from './index-78c00eed.js';
 import { useDivaCore } from '@crystaldesign/diva-core';
 import { useState, useCallback, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { ContentBoxComponent } from '@crystaldesign/content-box';
-import SettingsHeader from './index-31815467.js';
+import SettingsHeader from './index-3aa9b5d6.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/{index-f7b42992.js → index-44e5cfbe.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-f37069da.js';
+import { s as styleInject, u as useViewHandler } from './index-78c00eed.js';
 import React, { useState, useEffect, Suspense } from 'react';
 import { observer } from 'mobx-react-lite';
 import sift from 'sift';
-import TextBox from './index-6a70e5b3.js';
-import ItemVariant from './index-46e6e40f.js';
-import SettingsPaletteGroup from './index-bcbd80e5.js';
-import ToggleOption from './index-5a46022e.js';
-import GroupDropdown from './index-c6c2ce62.js';
-import PromotedProducts from './index-94a6e624.js';
-import ToggleName from './index-7323277f.js';
-import ProductList from './index-31ab9df1.js';
-import itemPaletteTypeComponentMap from './index-91e8222b.js';
-import ItemWrapper from './index-f1a1ab2f.js';
+import TextBox from './index-e59e8329.js';
+import ItemVariant from './index-59d02025.js';
+import SettingsPaletteGroup from './index-9acec70e.js';
+import ToggleOption from './index-a0e5ef19.js';
+import GroupDropdown from './index-2dc56e9a.js';
+import PromotedProducts from './index-42fa0481.js';
+import ToggleName from './index-4ff6104b.js';
+import ProductList from './index-d97360e8.js';
+import itemPaletteTypeComponentMap from './index-b9af893f.js';
+import ItemWrapper from './index-853c176e.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-3295b21c.js');
+  return import('./index-d56aae32.js');
 });
 var DoorPlanner = /*#__PURE__*/React.lazy(function () {
-  return import('./index-531e6b99.js');
+  return import('./index-025cf6a2.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-8953636b.js → index-4585b821.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-f37069da.js';
+import { s as styleInject, u as useViewHandler } from './index-78c00eed.js';
 import 'react';
 import { ContentBoxComponent } from '@crystaldesign/content-box';
 import { observer } from 'mobx-react-lite';