@crystaldesign/diva-web-planner-react 25.9.0-beta.35 → 25.9.0-beta.37

package/build/esm/{index-d1e6d098.js → index-b651b295.js}

@@ -1,18 +1,18 @@
-import { s as styleInject, u as useViewHandler } from './index-6841f22b.js';
+import { s as styleInject, u as useViewHandler } from './index-c865c45c.js';
 import classnames from 'classnames';
-import DockFilter from './index-2788d555.js';
-import RALFilter from './index-49db189e.js';
+import DockFilter from './index-02f17e02.js';
+import RALFilter from './index-411da277.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
-import Searchbar from './index-476fc243.js';
-import ToggleHeader from './index-dadf5d73.js';
-import NumberInput from './index-e65352bc.js';
-import InfoButton from './index-26b8a919.js';
-import PDFButton from './index-496b1fad.js';
-import SummaryVariantButton from './index-b67db79f.js';
-import SelectedOpv from './index-ae2b2848.js';
-import InfoIcon from './index-5c8012e3.js';
+import Searchbar from './index-9d9ba399.js';
+import ToggleHeader from './index-9b0d35a6.js';
+import NumberInput from './index-3629f103.js';
+import InfoButton from './index-ac908a9f.js';
+import PDFButton from './index-5d1e20f7.js';
+import SummaryVariantButton from './index-02cb24ea.js';
+import SelectedOpv from './index-f0ed4f76.js';
+import InfoIcon from './index-9aa789de.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';
@@ -31,19 +31,19 @@ import '@babel/runtime/helpers/typeof';
 import 'flat';
 import '@crystaldesign/widget-contact-form';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-4d82d57b.js';
+import './index-aea14c06.js';
 import 'react-dropdown';
-import './index-6b2f23e9.js';
-import './index-1e8ccdc0.js';
+import './index-e0464388.js';
+import './index-a4b9d298.js';
 import '@crystaldesign/content-box';
-import './index-5a4cb59f.js';
-import './index-bcce267f.js';
+import './index-a0abf287.js';
+import './index-2f696b58.js';
 import 'react-switch';
-import './index-a7163d17.js';
+import './index-52322b19.js';
 import 'react-laag';
-import './index-dee7a6b0.js';
-import './index-c2a7570b.js';
-import './index-28da97c8.js';
+import './index-7e2d1d67.js';
+import './index-9b04aa68.js';
+import './index-8199846d.js';
 
 var headerWrapper = "header-wrapper-qVEmI";
 var wcConfiguratorSettingsHeaderTitle = "wcConfigurator-settings-header-title--CcUK";
@@ -55,7 +55,7 @@ var landscape = "landscape-DHu2r";
 var portrait = "portrait-8Z7gh";
 var quantity = "quantity-GKJLF";
 var iconsContainer = "icons-container-DbfdO";
-var css_248z = ".wcConfigurator-settings-header--UZPU {\n  height: 100%;\n  position: relative;\n  width: 100%;\n  --infoIconSize: 24px;\n}\n\n.header-wrapper-qVEmI {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n.wcConfigurator-settings-header-title--CcUK {\n  width: auto;\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  color: var(--secondaryColor);\n  margin-top: 10px;\n  float: left;\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\n.wcConfigurator-settings-header-price-UmViW {\n  width: auto;\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  color: var(--secondaryColor);\n  margin-top: 10px;\n}\n\n.scroller-jdhnI .wcConfigurator-settings-header-title--CcUK {\n  max-width: calc(100% - 51.2px);\n  margin: 8px 0px;\n}\n\n.scroller-jdhnI .wcConfigurator-settings-header-title--CcUK.wcFilterIsVisible-S9QKu {\n  max-width: calc(50% - 19.2px);\n}\n\n.wcConfigurator-settings-header-Filters-Container-hi62D {\n  width: 100%;\n  float: left;\n}\n.wcConfigItem-Header-JEANn {\n  border-radius: 0 !important;\n  border-radius: initial !important;\n}\n.wcConfigItem-Header-JEANn {\n  /* width: calc(100% - 32px); */\n  margin-top: 8px;\n  margin-right: 8px;\n  height: -moz-fit-content;\n  height: fit-content;\n  min-height: 40px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.min-expanded-kEE9N.wcConfigItem-Header-JEANn {\n  overflow: hidden;\n}\n\n:not(.scroller-jdhnI).wcConfigItem-Header-JEANn {\n  margin-left: var(--settingsScrollerPaddingLeft);\n  margin-right: var(--settingsScrollerPaddingRight);\n}\n\n.landscape-DHu2r.wcConfigItem-Header-JEANn,\n.portrait-8Z7gh.wcConfigItem-Header-JEANn {\n  min-height: 40px;\n}\n\n.landscape-DHu2r.scroller-jdhnI header,\n.portrait-8Z7gh.scroller-jdhnI header {\n  min-height: 40px;\n}\n\n.quantity-GKJLF {\n  max-width: 200px;\n  float: left;\n  padding-top: 12px;\n  padding-left: 20%;\n}\n\n.icons-container-DbfdO {\n  display: flex;\n  align-items: center;\n  float: right;\n  position: relative;\n  margin-top: 5px;\n  flex-grow: 2;\n  justify-content: flex-end;\n  max-width: 100%;\n}\n";
+var css_248z = ".wcConfigurator-settings-header--UZPU {\n  height: 100%;\n  position: relative;\n  width: 100%;\n  --infoIconSize: 24px;\n}\n\n.header-wrapper-qVEmI {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.wcConfigurator-settings-header-title--CcUK {\n  width: auto;\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  color: var(--secondaryColor);\n  margin-top: 10px;\n  float: left;\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\n.wcConfigurator-settings-header-price-UmViW {\n  width: auto;\n  font-weight: 600;\n  font-size: 20px;\n  line-height: 24px;\n  color: var(--secondaryColor);\n  margin-top: 10px;\n}\n\n.scroller-jdhnI .wcConfigurator-settings-header-title--CcUK {\n  max-width: calc(100% - 51.2px);\n  margin: 8px 0px;\n}\n\n.scroller-jdhnI .wcConfigurator-settings-header-title--CcUK.wcFilterIsVisible-S9QKu {\n  max-width: calc(50% - 19.2px);\n}\n\n.wcConfigurator-settings-header-Filters-Container-hi62D {\n  width: 100%;\n  float: left;\n}\n.wcConfigItem-Header-JEANn {\n  border-radius: 0 !important;\n  border-radius: initial !important;\n}\n.wcConfigItem-Header-JEANn {\n  /* width: calc(100% - 32px); */\n  margin-top: 8px;\n  margin-right: 8px;\n  height: -moz-fit-content;\n  height: fit-content;\n  min-height: 40px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.min-expanded-kEE9N.wcConfigItem-Header-JEANn {\n  overflow: hidden;\n}\n\n:not(.scroller-jdhnI).wcConfigItem-Header-JEANn {\n  margin-left: var(--settingsScrollerPaddingLeft);\n  margin-right: var(--settingsScrollerPaddingRight);\n}\n\n.landscape-DHu2r.wcConfigItem-Header-JEANn,\n.portrait-8Z7gh.wcConfigItem-Header-JEANn {\n  min-height: 40px;\n}\n\n.landscape-DHu2r.scroller-jdhnI header,\n.portrait-8Z7gh.scroller-jdhnI header {\n  min-height: 40px;\n}\n\n.quantity-GKJLF {\n  max-width: 200px;\n  float: left;\n  padding-top: 12px;\n  padding-left: 20%;\n}\n\n.icons-container-DbfdO {\n  display: flex;\n  align-items: center;\n  float: right;\n  position: relative;\n  margin-top: 5px;\n  flex-grow: 2;\n  justify-content: flex-end;\n  max-width: 100%;\n}\n";
 styleInject(css_248z);
 
 var SettingsItemHeader = function SettingsItemHeader(_ref) {
@@ -93,6 +93,7 @@ var SettingsItemHeader = function SettingsItemHeader(_ref) {
     title = title + ' (' + t('configurator.isMultiselect') + ')';
   }
   if ((_viewHandler$getViewC = viewHandler.getViewConfig()) !== null && _viewHandler$getViewC !== void 0 && _viewHandler$getViewC.showOptionCodexInOptionHeader) title = title + (item.optionCodex ? ' (' + item.optionCodex + ')' : '');
+  if (title == '') return /*#__PURE__*/jsx(Fragment, {});
   return /*#__PURE__*/jsx("div", {
     className: classnames(containerClass, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, isInScroller ? scroller : undefined),
     children: /*#__PURE__*/jsxs("div", {
@@ -108,6 +109,24 @@ var SettingsItemHeader = function SettingsItemHeader(_ref) {
         }), !isSettingsHeader && item.measureUnit && /*#__PURE__*/jsx(NumberInput, {
           item: item
         })]
+      }), !isSettingsHeader && /*#__PURE__*/jsx(Fragment, {
+        children: (_item$selectedElement = item.selectedElements) !== null && _item$selectedElement !== void 0 && (_item$selectedElement = _item$selectedElement[0]) !== null && _item$selectedElement !== void 0 && _item$selectedElement.url ? /*#__PURE__*/jsx(InfoButton, {
+          id: item.id,
+          selectedElement: item.selectedElements[0],
+          openUrl: true
+        }) : item.optionContentItemId ? /*#__PURE__*/jsx(InfoIcon, {
+          item: {
+            contentItemId: item.optionContentItemId,
+            codex: item.configStepKey
+          },
+          style: {
+            position: 'relative',
+            marginLeft: 8
+          }
+        }, item.optionCodex) : !isSettingsHeader && viewHandler.uiState.isInMobileView && (item === null || item === void 0 || (_item$selectedElement2 = item.selectedElements) === null || _item$selectedElement2 === void 0 ? void 0 : _item$selectedElement2.length) && viewHandler.getViewConfig().infoButton && /*#__PURE__*/jsx(InfoButton, {
+          id: item.id,
+          selectedElement: item.selectedElements[0]
+        })
       }), item.quantity !== undefined && !isSettingsHeader && /*#__PURE__*/jsxs("div", {
         className: classnames(quantity),
         children: [" ", t('configurator.quantity', 'Anzahl') + ': ' + item.quantity, "x"]
@@ -126,25 +145,8 @@ var SettingsItemHeader = function SettingsItemHeader(_ref) {
           id: item.id
         }), /*#__PURE__*/jsx(SummaryVariantButton, {
           item: item
-        }), !isSettingsHeader && (item === null || item === void 0 || (_item$selectedElement = item.selectedElements) === null || _item$selectedElement === void 0 || (_item$selectedElement = _item$selectedElement[0]) === null || _item$selectedElement === void 0 ? void 0 : _item$selectedElement.pdfUrl) && /*#__PURE__*/jsx(PDFButton, {
+        }), !isSettingsHeader && (item === null || item === void 0 || (_item$selectedElement3 = item.selectedElements) === null || _item$selectedElement3 === void 0 || (_item$selectedElement3 = _item$selectedElement3[0]) === null || _item$selectedElement3 === void 0 ? void 0 : _item$selectedElement3.pdfUrl) && /*#__PURE__*/jsx(PDFButton, {
           pdfUrl: item.selectedElements[0].pdfUrl
-        }), !isSettingsHeader && /*#__PURE__*/jsx(Fragment, {
-          children: (_item$selectedElement2 = item.selectedElements) !== null && _item$selectedElement2 !== void 0 && (_item$selectedElement2 = _item$selectedElement2[0]) !== null && _item$selectedElement2 !== void 0 && _item$selectedElement2.url ? /*#__PURE__*/jsx(InfoButton, {
-            id: item.id,
-            selectedElement: item.selectedElements[0],
-            openUrl: true
-          }) : item.optionContentItemId ? /*#__PURE__*/jsx(InfoIcon, {
-            item: {
-              contentItemId: item.optionContentItemId,
-              codex: item.configStepKey
-            },
-            style: {
-              bottom: 'calc(50% - 10px)'
-            }
-          }, item.optionCodex) : !isSettingsHeader && viewHandler.uiState.isInMobileView && (item === null || item === void 0 || (_item$selectedElement3 = item.selectedElements) === null || _item$selectedElement3 === void 0 ? void 0 : _item$selectedElement3.length) && viewHandler.getViewConfig().infoButton && /*#__PURE__*/jsx(InfoButton, {
-            id: item.id,
-            selectedElement: item.selectedElements[0]
-          })
         }), specialElement2]
       }), item.selectedElements && item.isMultiselect && /*#__PURE__*/jsx(SelectedOpv, {
         item: item,

package/build/esm/index-b6c0bf29.js

@@ -0,0 +1,77 @@
+import { s as styleInject, u as useViewHandler } from './index-c865c45c.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var paletteItem = "palette-item-SQlml";
+var imageWrapper = "imageWrapper-rcOF5";
+var sel = "sel-1986q";
+var imageBackground = "imageBackground-SUtlD";
+var wcImage = "wcImage-XUaTv";
+var title = "title-Cr0ha";
+var titleSel = "title-sel-8BT-F";
+var mobile = "mobile-NUDZR";
+var css_248z = "/*Size Normal */\n\n.palette-item-SQlml {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  width: -moz-min-content;\n  width: min-content;\n  height: 70px;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n  margin-bottom: 2px;\n  margin-left: 10px;\n}\n\n.palette-item-SQlml:active {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n.palette-item-SQlml:hover {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.imageWrapper-rcOF5 {\n  border-radius: 50%;\n  border: 1px transparent solid;\n  width: 68px;\n  height: 68px;\n  transition: 0.15s ease;\n  border-style: double;\n}\n\n.sel-1986q .imageWrapper-rcOF5,\n.small-oHSfx.sel-1986q .imageWrapper-rcOF5 {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.imageBackground-SUtlD {\n  border-radius: 50%;\n  border: 4px white solid;\n  width: 60px;\n  height: 60px;\n  transition: 0.15s ease;\n}\n\n.sel-1986q .imageBackground-SUtlD {\n  border: 4px var(--primaryColor) solid;\n}\n\n.wcImage-XUaTv {\n  width: 100%;\n  height: 60px;\n  border-radius: 50%;\n  background-size: cover;\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\n.title-Cr0ha {\n  text-align: center;\n  margin: 16px;\n  padding: 8px 16px;\n  font-size: 14px;\n  line-height: 24px;\n  z-index: 400;\n  font-weight: 600;\n  color: var(--secondaryColor);\n  font-family: var(--diva-typography-font-family);\n  margin-left: 12px;\n  text-align: left;\n  white-space: nowrap;\n  background-color: #eee;\n  border-radius: 70px;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.palette-item-SQlml:hover .title-Cr0ha,\n.title-sel-8BT-F {\n  opacity: 1;\n}\n\n.mobile-NUDZR.palette-item-SQlml {\n  width: 45px;\n  height: 45px;\n}\n\n.mobile-NUDZR .title-Cr0ha {\n  margin-right: 12px;\n}\n.mobile-NUDZR .imageWrapper-rcOF5 {\n  width: 43px;\n  height: 43px;\n}\n\n.mobile-NUDZR .imageBackground-SUtlD {\n  width: 39px;\n  height: 39px;\n  border-width: 2px;\n}\n\n.mobile-NUDZR .wcImage-XUaTv {\n  height: 39px;\n}\n\n.mobile-NUDZR .title-Cr0ha {\n  line-height: 2px;\n  font-size: 12px;\n  padding: 14px;\n  margin: 8px;\n}\n\n/* \n@media all and (max-width: 1800px) {\n  .palette-item {\n    width: 81px;\n    height: 81px;\n  }\n  .imageWrapper {\n    width: 79px;\n    height: 79px;\n  }\n  .imageBackground {\n    width: 71px;\n    height: 71px;\n  }\n  .wcImage {\n    height: 71px;\n  }\n  .title {\n    line-height: 81px;\n    font-size: 12px;\n  } \n}\n*/\n";
+styleInject(css_248z);
+
+var Room = function Room(_ref) {
+  var itemP = _ref.item,
+    from = _ref.from,
+    isVP = _ref.isVP;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var onClick = function onClick() {
+    viewHandler.productState.setRoomListExpanded(true); //reset the timeout
+    if (isVP) {
+      viewHandler.paletteViewHandler.clickedOnStaticVPPalette(item, !!from);
+    } else {
+      viewHandler.paletteViewHandler.clickedOnStaticRoomPalette(item, !!from);
+    }
+  };
+  return /*#__PURE__*/jsxs("div", {
+    onClick: onClick,
+    className: classnames(paletteItem, viewHandler.uiState.isInMobileView ? mobile : undefined),
+    children: [/*#__PURE__*/jsx("div", {
+      className: classnames(item.sel ? sel : undefined),
+      children: /*#__PURE__*/jsx("div", {
+        className: classnames(imageWrapper),
+        children: /*#__PURE__*/jsx("div", {
+          className: classnames(imageBackground),
+          children: /*#__PURE__*/jsx("div", {
+            "data-test-id": "select-room",
+            className: wcImage,
+            style: {
+              backgroundImage: "url(".concat(item.url, ")")
+            }
+          })
+        })
+      })
+    }), !isVP && /*#__PURE__*/jsx("div", {
+      className: classnames(item.sel ? titleSel : undefined, title),
+      children: t('configurator.' + item.N)
+    })]
+  });
+};
+var RoomRound = observer(Room);
+
+export { RoomRound as default };

package/build/esm/{index-17b75f05.js → index-b6d2b504.js}

@@ -1,7 +1,7 @@
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { s as styleInject, u as useViewHandler } from './index-6841f22b.js';
+import { s as styleInject, u as useViewHandler } from './index-c865c45c.js';
 import { useRef, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';

package/build/esm/{index-eba58b0e.js → index-b6fb7313.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-6841f22b.js';
+import { s as styleInject, u as useViewHandler } from './index-c865c45c.js';
 import { observer } from 'mobx-react-lite';
 import { useState, useRef } from 'react';
 import classnames from 'classnames';

package/build/esm/index-b7330036.js

@@ -0,0 +1,86 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject } from './index-c865c45c.js';
+import { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@crystaldesign/widget-contact-form';
+
+var wrapper = "wrapper-Y-d99";
+var toggleSwitch = "toggle-switch-Mhnmc";
+var switchSelection = "switch-selection-WpDtT";
+var switchLabel = "switch-label-KDRkk";
+var sel = "sel-0rh79";
+var css_248z = ".wrapper-Y-d99 {\n  height: 36px;\n  width: 100%;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #f4f4f4;\n  border-radius: 6px;\n}\n.toggle-switch-Mhnmc {\n  height: calc(100% - 6px);\n  width: calc(100% - 6px);\n  border-radius: 3px;\n  box-sizing: content-box;\n  box-sizing: initial;\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.switch-selection-WpDtT {\n  display: block;\n  position: absolute;\n  z-index: 1;\n  height: 30px;\n  background-color: #fff;\n  border-radius: 3px;\n  transition: left 0.25s ease-out;\n}\n\n.switch-label-KDRkk {\n  position: relative;\n  display: flex;\n  gap: 4px;\n  justify-content: center;\n  align-items: center;\n  z-index: 2;\n  line-height: 22px;\n  height: 20px;\n  width: calc(100% - 8px);\n  padding: 6px;\n  font-size: 14px;\n  color: rgba(0, 0, 0, 0.6);\n  text-align: center;\n  cursor: pointer;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  transition:\n    color 0.2s ease-out,\n    font-weight 0.2s ease-out;\n}\n\n.sel-0rh79 {\n  font-weight: 300;\n  color: #000;\n}\n";
+styleInject(css_248z);
+
+var MultiToggleSwitch = function MultiToggleSwitch(_ref) {
+  var values = _ref.values,
+    _ref$state = _slicedToArray(_ref.state, 2),
+    selected = _ref$state[0],
+    setSelected = _ref$state[1],
+    round = _ref.round;
+  var widthPercentage = 100 / values.length;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    texts = _useState2[0],
+    setTexts = _useState2[1];
+  useEffect(function () {
+    if (!values.some(function (v) {
+      return !v.endsWith('cm');
+    })) {
+      setTexts(values.map(function (v, i) {
+        return v.replace('cm', '') + (i == values.length - 1 ? 'cm' : '');
+      }));
+    } else {
+      setTexts(values);
+    }
+  }, [values]);
+  return /*#__PURE__*/jsx("div", {
+    className: wrapper,
+    style: {
+      borderRadius: round ? '100px' : undefined
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      className: toggleSwitch,
+      children: [texts.map(function (val, index) {
+        return /*#__PURE__*/jsx("div", {
+          style: {
+            width: widthPercentage + '%'
+          },
+          children: /*#__PURE__*/jsx("label", {
+            onClick: function onClick() {
+              return setSelected(index);
+            },
+            className: classnames(switchLabel, selected === index && sel),
+            children: val
+          })
+        }, index);
+      }), /*#__PURE__*/jsx("div", {
+        className: switchSelection,
+        style: {
+          left: selected / values.length * 100 + '%',
+          width: widthPercentage + '%',
+          borderRadius: round ? '100px' : undefined
+        }
+      })]
+    })
+  });
+};
+
+export { MultiToggleSwitch as default };

package/build/esm/{index-1e374bbf.js → index-b8836964.js}

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { s as styleInject, u as useViewHandler } from './index-6841f22b.js';
+import { s as styleInject, u as useViewHandler } from './index-c865c45c.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
 import { jsx } from 'react/jsx-runtime';

package/build/esm/{index-76850d6b.js → index-b8df6520.js}

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

package/build/esm/{index-e593d4a7.js → index-b9052a89.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-6841f22b.js';
+import { s as styleInject, u as useViewHandler } from './index-c865c45c.js';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
 import classnames from 'classnames';

package/build/esm/{index-d4ed29bd.js → index-b9066dec.js}

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

package/build/esm/{index-142eda9b.js → index-bb214283.js}

@@ -1,9 +1,9 @@
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { a as usePlannerUIHandler } from './index-6841f22b.js';
+import { a as usePlannerUIHandler } from './index-c865c45c.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import Outline3D from './index-0df1c9d2.js';
-import ItemsContainer from './index-29f47254.js';
+import Outline3D from './index-8e77f1f7.js';
+import ItemsContainer from './index-5b34554e.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';
@@ -22,21 +22,21 @@ import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
 import '@crystaldesign/widget-contact-form';
-import './index-a57681a2.js';
-import './index-e594554b.js';
-import './index-e2f4195f.js';
-import './index-f9865934.js';
-import './index-6ca02a83.js';
-import './index-6e8747e6.js';
-import './index-ad25df6b.js';
-import './index-f70f1e24.js';
-import './index-a765d03d.js';
-import './index-963c5f67.js';
-import './index-8f1fc0d1.js';
+import './index-6af77ca9.js';
+import './index-d4fb067a.js';
+import './index-9473d18d.js';
+import './index-e4555d7e.js';
+import './index-f303a360.js';
+import './index-caef96fb.js';
+import './index-4874dc64.js';
+import './index-92c8712b.js';
+import './index-115ab8ac.js';
+import './index-6b991bf8.js';
+import './index-03f6ab6a.js';
 import 'react-draggable';
-import './index-cc3c7634.js';
-import './index-390414e1.js';
-import './index-34038781.js';
+import './index-66fbe10f.js';
+import './index-97192e4b.js';
+import './index-f427cd3b.js';
 
 var PlannerUI = function PlannerUI(_ref) {
   var plannerUIProps = _ref.plannerUIProps;

package/build/esm/{index-7ca2ed84.js → index-bb8fcd73.js}

@@ -1,8 +1,8 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject } from './index-6841f22b.js';
+import { s as styleInject } from './index-c865c45c.js';
 import { useState, useEffect } from 'react';
-import Toggle from './index-bcce267f.js';
+import Toggle from './index-2f696b58.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 var wrapper = "wrapper-i5mp2";

package/build/esm/{index-e49b9bd3.js → index-bd17f4f0.js}

@@ -1,7 +1,7 @@
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { s as styleInject, u as useViewHandler } from './index-6841f22b.js';
+import { s as styleInject, u as useViewHandler } from './index-c865c45c.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';

package/build/esm/{index-10e2e2e4.js → index-bd255983.js}

@@ -1,5 +1,5 @@
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { s as styleInject, u as useViewHandler } from './index-6841f22b.js';
+import { s as styleInject, u as useViewHandler } from './index-c865c45c.js';
 import { useEffect } from 'react';
 import classnames from 'classnames';
 import { jsx, Fragment } from 'react/jsx-runtime';

package/build/esm/{index-10f6a969.js → index-beb450d2.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-6841f22b.js';
+import { s as styleInject, u as useViewHandler } from './index-c865c45c.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';

package/build/esm/{index-17eedf48.js → index-bf0119d7.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-6841f22b.js';
+import { s as styleInject, u as useViewHandler } from './index-c865c45c.js';
 import { useRef, useState, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import classnames from 'classnames';

package/build/esm/{index-b7864cc2.js → index-bf3f89d4.js}

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

package/build/esm/{index-6b432c2c.js → index-c624bade.js}

@@ -1,21 +1,21 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { s as styleInject, u as useViewHandler } from './index-6841f22b.js';
+import { s as styleInject, u as useViewHandler } from './index-c865c45c.js';
 import { useState, useEffect } from 'react';
-import OptionTree from './index-c0fb3f1f.js';
-import PartListTable from './index-3ffbd2af.js';
-import MaskEditor from './index-17eedf48.js';
-import ArticleOverview from './index-ebd8ae97.js';
-import SVGAnalyzer from './index-9ebb7ca4.js';
-import EkTextViewer from './index-6e086aab.js';
-import CatalogMakeup from './index-6532adf3.js';
-import DecisionAnalyzer from './index-60f4e5b5.js';
-import RTVAnalyzer from './index-c2cb7bf7.js';
-import J3DEditor from './index-9e459bbd.js';
-import PriceAnalyzer from './index-fcb64cf1.js';
-import PropertiesEditor from './index-706a982e.js';
-import GridOverview from './index-522710ac.js';
+import OptionTree from './index-cdcaec4c.js';
+import PartListTable from './index-da16233a.js';
+import MaskEditor from './index-bf0119d7.js';
+import ArticleOverview from './index-96e806ca.js';
+import SVGAnalyzer from './index-371f794a.js';
+import EkTextViewer from './index-0e927cad.js';
+import CatalogMakeup from './index-7b260cac.js';
+import DecisionAnalyzer from './index-0e81d28f.js';
+import RTVAnalyzer from './index-3b8a474e.js';
+import J3DEditor from './index-7af87f20.js';
+import PriceAnalyzer from './index-2079e68d.js';
+import PropertiesEditor from './index-268118cb.js';
+import GridOverview from './index-7fde6c3a.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@crystaldesign/diva-core';
@@ -34,40 +34,38 @@ import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
 import '@crystaldesign/widget-contact-form';
-import './index.module-ac125a9e.js';
-import './index-1e374bbf.js';
-import './index-2f58e485.js';
-import './index-06e152be.js';
+import './index.module-53276416.js';
+import './index-b8836964.js';
+import './index-ed37cfe6.js';
+import './index-284c8e0e.js';
 import 'react-collapsible';
-import './index-a8570fee.js';
-import './index-388fae99.js';
-import './index.module-634349f5.js';
+import './index-8897b1f0.js';
+import './index-5f45eaf1.js';
+import './index.module-b36a1c83.js';
 import 'react-json-view-lite';
-import './react-json-viewer-499d0db4.js';
-import './index.module-f0ccd370.js';
-import './DecisionVizualizer-ec891197.js';
+import './react-json-viewer-aca88793.js';
+import './index.module-26b48c01.js';
+import './DecisionVizualizer-79d06f19.js';
 import 'react-draggable';
-import './index-bcce267f.js';
+import './index-2f696b58.js';
 import 'react-switch';
-import './index-5bb1d28c.js';
-import './index-a6a4403a.js';
+import './index-879ae5f6.js';
+import './index-11b411f2.js';
 import 'jsoneditor';
-import './index-37ec4175.js';
-import './index-51812287.js';
-import './index-d66a88dc.js';
-import './index-e8262f65.js';
-import 'react-dropdown';
-import './index.module-8d5793be.js';
-import './index-6b2f23e9.js';
-import './index-e50e180e.js';
-import './index-5f79be11.js';
+import './index-f6c95ee9.js';
+import './index-d55865cd.js';
+import './index-a602df9e.js';
+import './index-58defc7a.js';
+import './index.module-bd0ad4e6.js';
 import 'react-select';
-import './index-02a574da.js';
-import './index-7ca2ed84.js';
-import './CatalogProperties-981aaa1e.js';
-import './ArticleProperties-e967bca0.js';
-import './OptionProperties-d3b9573a.js';
-import './OptionValueProperties-99df53a0.js';
+import './index-8743be03.js';
+import './index-3ebde858.js';
+import './index-3843c5cc.js';
+import './index-bb8fcd73.js';
+import './CatalogProperties-6c62c540.js';
+import './ArticleProperties-2884d168.js';
+import './OptionProperties-00082065.js';
+import './OptionValueProperties-29e42aeb.js';
 
 var wrapper = "wrapper-eIL6V";
 var css_248z = ".wrapper-eIL6V {\n  width: 100%;\n  position: absolute;\n  bottom: 82px;\n  z-index: 1000;\n  background-color: rgba(200, 200, 200, 0.9);\n  overflow: auto;\n}\n\n.draghandle-4ydUz {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(50%, 50%);\n}\n";

package/build/esm/{index-e7cd9420.js → index-c81147e6.js}

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