@crystaldesign/diva-web-planner-react 26.4.0-rc.4 → 26.5.0-beta.1

package/build/esm/index-8a95da51.js

@@ -0,0 +1,126 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import './index-e3bc1a41.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { Vector2 } from '@crystaldesign/web-planner-logic';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var mousePosOnScreenLastFrame = new Vector2(0, 0);
+var Outline = function Outline(_ref) {
+  var _item$size, _item$size2;
+  var item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
+  var _useState3 = useState(item.position.x),
+    _useState4 = _slicedToArray(_useState3, 2),
+    posX = _useState4[0],
+    setPosX = _useState4[1];
+  var _useState5 = useState(item.position.y),
+    _useState6 = _slicedToArray(_useState5, 2),
+    posY = _useState6[0],
+    setPosY = _useState6[1];
+  var mouseDownDetected = false;
+
+  //LOG.log("Set outline UI x: " + posX + ", y: " + posY);
+  return /*#__PURE__*/jsx("div", {
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+    },
+    onMouseDown: function onMouseDown(e) {
+      mouseDownDetected = true;
+      mousePosOnScreenLastFrame = new Vector2(e.clientX, e.clientY);
+    },
+    onTouchStart: function onTouchStart(e) {
+      if (e.touches.length != 1) return;
+      mouseDownDetected = true;
+      mousePosOnScreenLastFrame = new Vector2(e.touches[0].clientX, e.touches[0].clientY);
+    },
+    onMouseMove: function onMouseMove(e) {
+      if (mouseDownDetected && !isDragging) {
+        var _item$onDragStartFunc;
+        setIsDragging(true);
+        (_item$onDragStartFunc = item.onDragStartFunction) === null || _item$onDragStartFunc === void 0 || _item$onDragStartFunc.call(item, item.setId, Number(item.elementId));
+      }
+      if (isDragging) {
+        var _item$onDragMoveFunct;
+        //item.position.x += e.clientX - mousePosOnScreenLastFrame.x;
+        //item.position.y += e.clientY - mousePosOnScreenLastFrame.y;
+
+        (_item$onDragMoveFunct = item.onDragMoveFunction) === null || _item$onDragMoveFunct === void 0 || _item$onDragMoveFunct.call(item, item.setId, Number(item.elementId), new Vector2(e.clientX - mousePosOnScreenLastFrame.x, e.clientY - mousePosOnScreenLastFrame.y));
+        setPosX(posX + e.clientX - mousePosOnScreenLastFrame.x);
+        setPosY(posY + e.clientY - mousePosOnScreenLastFrame.y);
+        mousePosOnScreenLastFrame.x = e.clientX;
+        mousePosOnScreenLastFrame.y = e.clientY;
+      }
+      mouseDownDetected = false;
+    },
+    onTouchMove: function onTouchMove(e) {
+      if (e.touches.length != 1) return;
+      if (mouseDownDetected && !isDragging) {
+        var _item$onDragStartFunc2;
+        setIsDragging(true);
+        (_item$onDragStartFunc2 = item.onDragStartFunction) === null || _item$onDragStartFunc2 === void 0 || _item$onDragStartFunc2.call(item, item.setId, Number(item.elementId));
+      }
+      if (isDragging) {
+        var _item$onDragMoveFunct2;
+        //item.position.x += e.clientX - mousePosOnScreenLastFrame.x;
+        //item.position.y += e.clientY - mousePosOnScreenLastFrame.y;
+
+        (_item$onDragMoveFunct2 = item.onDragMoveFunction) === null || _item$onDragMoveFunct2 === void 0 || _item$onDragMoveFunct2.call(item, item.setId, Number(item.elementId), new Vector2(e.touches[0].clientX - mousePosOnScreenLastFrame.x, e.touches[0].clientY - mousePosOnScreenLastFrame.y));
+        setPosX(posX + e.touches[0].clientX - mousePosOnScreenLastFrame.x);
+        setPosY(posY + e.touches[0].clientY - mousePosOnScreenLastFrame.y);
+        mousePosOnScreenLastFrame.x = e.touches[0].clientX;
+        mousePosOnScreenLastFrame.y = e.touches[0].clientY;
+      }
+      mouseDownDetected = false;
+    },
+    onMouseUp: function onMouseUp() {
+      if (isDragging) {
+        var _item$onDragEndFuncti;
+        setIsDragging(false);
+        (_item$onDragEndFuncti = item.onDragEndFunction) === null || _item$onDragEndFuncti === void 0 || _item$onDragEndFuncti.call(item, item.setId, Number(item.elementId));
+      }
+      mouseDownDetected = false;
+    },
+    onTouchEnd: function onTouchEnd() {
+      if (isDragging) {
+        var _item$onDragEndFuncti2;
+        setIsDragging(false);
+        (_item$onDragEndFuncti2 = item.onDragEndFunction) === null || _item$onDragEndFuncti2 === void 0 || _item$onDragEndFuncti2.call(item, item.setId, Number(item.elementId));
+      }
+      mouseDownDetected = false;
+    },
+    style: {
+      left: posX + 'px',
+      top: posY + 'px',
+      width: (item === null || item === void 0 || (_item$size = item.size) === null || _item$size === void 0 ? void 0 : _item$size.x) + 'px',
+      height: (item === null || item === void 0 || (_item$size2 = item.size) === null || _item$size2 === void 0 ? void 0 : _item$size2.y) + 'px',
+      transform: 'rotate(' + (item === null || item === void 0 ? void 0 : item.rotOfElement) + 'deg)'
+    },
+    className: classnames(isDragging ? plannerUIProps.classes.outline.outline2D.draggableActive : undefined, item.elemState == 'selected' ? plannerUIProps.classes.outline.outline2D.draggable : undefined, item.elemState == 'selectable' ? plannerUIProps.classes.outline.outline2D.selectable : undefined)
+  });
+};
+var Outline$1 = observer(Outline);
+
+export { Outline$1 as default };

package/build/esm/index-8b7692bc.js

@@ -0,0 +1,33 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-e3bc1a41.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+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 ProductFooter = function ProductFooter(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/ProductFooter"
+  }));
+};
+
+export { ProductFooter as default };

package/build/esm/index-8c8696de.js

@@ -0,0 +1,154 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler, P as PricePreview, G as GenericToolTip } from './index-e3bc1a41.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { w as wcFavoriteSel, a as wcFavorite } from './index.module-c0ff3aac.js';
+import { useHover, useLayer } from 'react-laag';
+import MetaData from './index-74f39781.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import InfoIcon from './index-3954252c.js';
+import ReverseCheck from './index-ff4990b9.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 'react-switch';
+import 'react-countup';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+
+var paletteItem = "palette-item-0YKyA";
+var wcVCodexText = "wcVCodexText-oxSnB";
+var sel = "sel-Mp0M2";
+var imageWrapper = "imageWrapper-wAIJh";
+var small = "small-NQCY6";
+var wcImage = "wcImage--G64h";
+var titleWrapper = "titleWrapper-kC1Fd";
+var title = "title-gcSeP";
+var mobile = "mobile--MrOW";
+var tablet = "tablet-R7-Yj";
+var big = "big-Rc8hW";
+var css_248z = "/*Size Normal */\n\n.palette-item-0YKyA {\n  border-radius: var(--globalBorderRadius);\n  position: relative;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.palette-item-0YKyA:active,\n.palette-item-0YKyA:hover {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.wcVCodexText-oxSnB {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n  color: white;\n  display: none;\n  text-align: center;\n}\n\n.palette-item-0YKyA:hover .wcVCodexText-oxSnB,\n.sel-Mp0M2 .wcVCodexText-oxSnB {\n  display: block;\n}\n\n.imageWrapper-wAIJh {\n  border-radius: calc(var(--globalBorderRadius) * 2 + 2px);\n  border: 1px rgb(230, 230, 230) solid;\n  display: flex;\n  transition: 0.15s ease;\n  position: relative;\n}\n.palette-item-0YKyA:hover .imageWrapper-wAIJh {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px var(--primaryColor) solid;\n  border: 1px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n.sel-Mp0M2.palette-item-0YKyA:hover .imageWrapper-wAIJh,\n.small-NQCY6.sel-Mp0M2.palette-item-0YKyA:hover .imageWrapper-wAIJh {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px rgb(230, 230, 230) solid;\n}\n.sel-Mp0M2 .imageWrapper-wAIJh,\n.small-NQCY6.sel-Mp0M2 .imageWrapper-wAIJh {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.wcImage--G64h {\n  width: calc(100% - 8px);\n  border: 4px white solid;\n  border-radius: calc(var(--globalBorderRadius) * 2 + 2px);\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  -o-object-fit: contain;\n     object-fit: contain;\n  background-color: #fff;\n  transition: border 0.3s ease;\n  aspect-ratio: 1/1;\n}\n.sel-Mp0M2 .wcImage--G64h,\n.small-NQCY6.sel-Mp0M2 .wcImage--G64h {\n  border: 4px var(--primaryColor) solid;\n  border: 4px var(--optionItemBorderSelColor, var(--primaryColor)) solid;\n}\n\n.hexColor-47l-a {\n  width: 80px;\n  height: 80px;\n}\n\n.titleWrapper-kC1Fd {\n  display: flex;\n  justify-content: center;\n  overflow: visible;\n  max-height: 32px;\n}\n\n.title-gcSeP {\n  text-align: center;\n  width: 100%;\n  height: 32px;\n  min-height: -moz-fit-content;\n  min-height: fit-content;\n  max-height: -moz-fit-content;\n  max-height: fit-content;\n  font-size: 14px;\n  line-height: 16px;\n  overflow: hidden;\n  display: -webkit-box;\n  word-wrap: break-word;\n  -webkit-box-orient: vertical;\n  -webkit-hyphens: auto;\n  hyphens: auto;\n  -webkit-line-clamp: 2;\n  transition: height 0.3s ease-out;\n}\n\n.mobile--MrOW:not(.tablet-R7-Yj) .title-gcSeP {\n  font-size: 12px;\n  line-height: 14px;\n}\n\n.palette-item-0YKyA:hover .title-gcSeP,\n.palette-item-0YKyA:focus .title-gcSeP {\n  max-height: -moz-fit-content;\n  max-height: fit-content;\n  min-height: -moz-fit-content;\n  min-height: fit-content;\n  -webkit-line-clamp: 30;\n  height: 50px;\n  z-index: 200;\n  background-color: var(--settingsBackgroundColor);\n  border-bottom-left-radius: 6px;\n  border-bottom-right-radius: 6px;\n  transition: height 0.3s ease-in;\n}\n\n@supports (-moz-appearance: none) {\n  .palette-item-0YKyA:hover .title-gcSeP,\n  .palette-item-0YKyA:focus .title-gcSeP {\n    height: -moz-fit-content;\n    height: fit-content;\n  }\n}\n\n/* Size Small */\n\n.small-NQCY6 .wcVCodexText-oxSnB {\n  font-size: 12px;\n}\n\n.small-NQCY6 .title-gcSeP {\n  font-size: 12px;\n  height: 15px;\n  -webkit-line-clamp: 1;\n}\n\n.small-NQCY6 .titleWrapper-kC1Fd {\n  max-height: 14px;\n}\n\n.mobile--MrOW:not(.tablet-R7-Yj).small-NQCY6 .title-gcSeP {\n  font-size: 11px;\n  height: 14px;\n}\n\n.mobile--MrOW:not(.tablet-R7-Yj).small-NQCY6 .titleWrapper-kC1Fd {\n  max-height: 14px;\n}\n\n/* Size big */\n\n.big-Rc8hW .wcVCodexText-oxSnB {\n  font-size: 15px;\n}\n\n.big-Rc8hW .title-gcSeP {\n  font-size: 15px;\n  -webkit-line-clamp: 2;\n}\n\n.mobile--MrOW:not(.tablet-R7-Yj).big-Rc8hW .title-gcSeP {\n  font-size: 13px;\n}\n";
+styleInject(css_248z);
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Option = function Option(_ref) {
+  var _item$hexColor, _renderLayer;
+  var itemP = _ref.item,
+    type = _ref.type,
+    paletteId = _ref.paletteId,
+    hidePricePreview = _ref.hidePricePreview,
+    namePostFix = _ref.namePostFix;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    metaDataVisible = _useState2[0],
+    setMetaDataVisible = _useState2[1];
+  var onClick = function onClick() {
+    viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
+  };
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    isMobile = _useDivaCore$state$di.isMobile,
+    isTablet = _useDivaCore$state$di.isTablet;
+
+  /* tool tip stuff*/
+  var triggerProps = {};
+  var layerProps = {};
+  var renderLayer = undefined;
+  var isOver = false;
+  var hoverProps = {};
+  var hover = useHover({
+    delayEnter: 1500,
+    hideOnScroll: true
+  });
+  var tooltip = useLayer({
+    isOpen: hover[0],
+    auto: true,
+    placement: viewHandler.getViewConfig().tooltipPosition || 'left-center'
+  });
+  if (!isMobile && !isTablet && !viewHandler.getViewConfig().hideTooltip && (item.image || item.hexColor) && !item.contentItemId) {
+    isOver = hover[0];
+    hoverProps = hover[1];
+    triggerProps = tooltip.triggerProps;
+    layerProps = tooltip.layerProps;
+    renderLayer = tooltip.renderLayer;
+  }
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    id: item.codex,
+    className: classnames(paletteItem, item.sel ? sel : undefined, type == 'big' ? big : undefined, type == 'small' ? small : undefined, viewHandler.getIsInMobileView() ? mobile : undefined, viewHandler.uiState.isTablet ? tablet : undefined),
+    onClick: onClick
+  }, triggerProps), hoverProps), {}, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames(imageWrapper),
+      children: [viewHandler.getViewConfig().showVCodexInGallery && item.vCodex && /*#__PURE__*/jsx("div", {
+        className: classnames(wcVCodexText),
+        children: item.vCodex
+      }), item.image ? /*#__PURE__*/jsx("img", {
+        className: classnames(wcImage),
+        src: type != 'small' ? item.image.replace('_gal', '') : item.image
+      }) : /*#__PURE__*/jsx("div", {
+        className: classnames(wcImage),
+        style: {
+          backgroundColor: '#' + ((_item$hexColor = item.hexColor) !== null && _item$hexColor !== void 0 ? _item$hexColor : 'fff')
+        }
+      }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+        item: item
+      }, item.codex)]
+    }), /*#__PURE__*/jsx("div", {
+      className: titleWrapper,
+      children: /*#__PURE__*/jsx("div", {
+        className: title,
+        dangerouslySetInnerHTML: {
+          __html: item.text + (namePostFix ? namePostFix : '')
+        }
+      })
+    }), item.doShowFav && /*#__PURE__*/jsx("div", {
+      className: item.isFav ? wcFavoriteSel : wcFavorite,
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.clickedOnFavIcon(item);
+      }
+    }), /*#__PURE__*/jsx(MetaData, {
+      style: {
+        position: 'relative',
+        "float": 'left',
+        display: 'none'
+      },
+      metaData: item.metaData,
+      visible: [metaDataVisible, setMetaDataVisible]
+    }, item.codex), !hidePricePreview && item.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+      asyncPricePreview: item.pricePreviewPromise,
+      sel: item.sel,
+      style: type == 'small' ? {
+        fontSize: 9
+      } : undefined
+    }), item.checkForReversingChanges !== undefined && /*#__PURE__*/jsx(ReverseCheck, {
+      item: item,
+      paletteId: paletteId
+    }), isOver && ((_renderLayer = renderLayer) === null || _renderLayer === void 0 ? void 0 : _renderLayer(/*#__PURE__*/jsx(GenericToolTip, {
+      text: item.text + (item.freeText ? item.freeText : '') + (namePostFix ? namePostFix : ''),
+      hexColor: item.hexColor,
+      desciption: metaDataVisible,
+      pricePreviewPromise: item.pricePreviewPromise,
+      image: item.image,
+      layerProps: layerProps
+    }, item.codex)))]
+  }));
+};
+var GalleryText2 = observer(Option);
+
+export { GalleryText2 as default };

package/build/esm/index-8cf06edb.js

@@ -0,0 +1,107 @@
+import { s as styleInject, u as useViewHandler } from './index-e3bc1a41.js';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { observer } from 'mobx-react-lite';
+import ArQrCodeIcon from './index-3b04fc58.js';
+import ProductRoomList from './index-a3e23829.js';
+import { jsx, Fragment, jsxs } 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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import 'react-laag';
+import './index-ba3fa00a.js';
+import 'react-qr-code';
+import './index-ba6589d7.js';
+
+var wcNav3DToolbar = "wc_Nav3DToolbar-NM2CK";
+var wcZoomIn = "wcZoomIn-7oss5";
+var wcZoomOut = "wcZoomOut-4EF8K";
+var wcViews = "wcViews-k2gyz";
+var wc3DDimLine = "wc3DDimLine-ERDw2";
+var wcFullScreen = "wcFullScreen-FuayU";
+var wc3DGridPlannerMode = "wc3DGridPlannerMode-2fAed";
+var css_248z = ".wc_Nav3DToolbar-NM2CK {\n  display: inline;\n  z-index: 601;\n  margin: 0;\n  position: absolute;\n  bottom: 60px;\n  left: -1.6rem;\n}\n\n.wc_Nav3DToolbar-NM2CK li {\n  width: 40px;\n  height: 40px;\n  margin: 0 auto 8px auto;\n  display: block;\n  background-color: rgba(223, 223, 223, 0.8);\n  background-repeat: no-repeat;\n  background-position: center center;\n  border-radius: 50%;\n  transition: background-color 0.15s ease;\n  cursor: pointer;\n}\n\n.wc_Nav3DToolbar-NM2CK li:hover {\n  background-color: rgba(210, 210, 210, 0.8);\n}\n.wc_Nav3DToolbar-NM2CK li:active {\n  background-color: rgba(197, 197, 197, 0.8);\n}\n\n/*------------------------Nav Icons--------------------------------------*/\n\n/* standard */\n\n.wcZoomIn-7oss5 {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23F5F5F5%22%2F%3E%3Cpath d%3D%22M25.7363 24.7891L29.9993 28.1047%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M15.7896 19.6841H23.58%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M19.686 15.7891L19.686 23.5795%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2219.5786%22 cy%3D%2219.5786%22 r%3D%227.57858%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcZoomIn-7oss5:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23C4C4C4%22%2F%3E%3Cpath d%3D%22M25.7363 24.7891L29.9993 28.1047%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M15.7896 19.6841H23.58%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M19.686 15.7891L19.686 23.5795%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2219.5786%22 cy%3D%2219.5786%22 r%3D%227.57858%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcZoomOut-4EF8K {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23F5F5F5%22%2F%3E%3Cpath d%3D%22M24.7362 24.7889L28.9991 28.1045M15.0002 19.9999H22.7907M26.1572 19.5786C26.1572 23.7641 22.7641 27.1572 18.5786 27.1572C14.393 27.1572 11 23.7641 11 19.5786C11 15.393 14.393 12 18.5786 12C22.7641 12 26.1572 15.393 26.1572 19.5786Z%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcZoomOut-4EF8K:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23C4C4C4%22%2F%3E%3Cpath d%3D%22M24.7362 24.7889L28.9991 28.1045M15.0002 19.9999H22.7907M26.1572 19.5786C26.1572 23.7641 22.7641 27.1572 18.5786 27.1572C14.393 27.1572 11 23.7641 11 19.5786C11 15.393 14.393 12 18.5786 12C22.7641 12 26.1572 15.393 26.1572 19.5786Z%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcViews-k2gyz {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23F5F5F5%22%2F%3E%3Cpath d%3D%22M11 14.3811L20 19.0909M11 14.3811L20 10L29 14.3811M11 14.3811V25.0649L20 30M20 19.0909L29 14.3811M20 19.0909V30M29 14.3811V25.0649L20 30%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wcViews-k2gyz:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23C4C4C4%22%2F%3E%3Cpath d%3D%22M11 14.3811L20 19.0909M11 14.3811L20 10L29 14.3811M11 14.3811V25.0649L20 30M20 19.0909L29 14.3811M20 19.0909V30M29 14.3811V25.0649L20 30%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n.wc3DDimLine-ERDw2 {\n  background-color: #f5f5f5 !important;\n}\n.wc3DDimLine-ERDw2 {\n  background-size: 80%;\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 22.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3Csvg version%3D%221.1%22 id%3D%22Ebene_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 viewBox%3D%220 0 15 12%22 style%3D%22enable-background%3Anew 0 0 15 12%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cstyle type%3D%22text%2Fcss%22%3E%09.st0%7Bfill%3Anone%3B %7D%3C%2Fstyle%3E%3Cpath class%3D%22st0%22 d%3D%22M14.8%2C1.3c0-0.6-0.5-1.2-1.2-1.2H1.4c-0.6%2C0-1.2%2C0.5-1.2%2C1.2v9.4c0%2C0.6%2C0.5%2C1.2%2C1.2%2C1.2h12.2%09c0.6%2C0%2C1.2-0.5%2C1.2-1.2C14.8%2C10.7%2C14.8%2C1.3%2C14.8%2C1.3z%22%2F%3E%3Cg%3E%09%3Cpath stroke%3D%22%234B4B4B%22 stroke-width%3D%220.2%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 d%3D%22M12.9%2C2.9c-0.1%2C0-0.2%2C0.1-0.2%2C0.2v5.8c0%2C0.1%2C0.1%2C0.2%2C0.2%2C0.2S13%2C9%2C13%2C8.9V3.1C13%2C3%2C12.9%2C2.9%2C12.9%2C2.9z%22%2F%3E%09%3Cpath stroke%3D%22%234B4B4B%22 stroke-width%3D%220.2%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 d%3D%22M2.1%2C2.9C2.1%2C2.9%2C2%2C3%2C2%2C3.1v5.8C2%2C9%2C2.1%2C9.1%2C2.1%2C9.1c0.1%2C0%2C0.2-0.1%2C0.2-0.2V3.1C2.3%2C3%2C2.2%2C2.9%2C2.1%2C2.9z%22%2F%3E%09%3Cpath stroke%3D%22%234B4B4B%22 stroke-width%3D%220.2%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 d%3D%22M10.3%2C4.9c-0.1%2C0-0.1%2C0-0.2%2C0C10.1%2C5%2C10%2C5%2C10%2C5.1v0.8H5V5.1C5%2C5%2C4.9%2C5%2C4.9%2C4.9c-0.1%2C0-0.1%2C0-0.2%2C0l-1.5%2C1%09%09c0%2C0-0.1%2C0.1-0.1%2C0.1c0%2C0.1%2C0%2C0.1%2C0.1%2C0.1l1.5%2C1c0%2C0%2C0.1%2C0%2C0.1%2C0c0%2C0%2C0.1%2C0%2C0.1%2C0C4.9%2C7.1%2C5%2C7.1%2C5%2C7V6.2H10V7c0%2C0.1%2C0%2C0.1%2C0.1%2C0.1%09%09c0%2C0%2C0.1%2C0%2C0.1%2C0c0%2C0%2C0.1%2C0%2C0.1%2C0l1.5-1c0%2C0%2C0.1-0.1%2C0.1-0.1c0-0.1%2C0-0.1-0.1-0.1L10.3%2C4.9z M4.6%2C6.7L3.6%2C6l1-0.6V6.7z M10.4%2C6.7%09%09V5.4l1%2C0.6L10.4%2C6.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}\n@media (hover: hover) {\n  .wc3DDimLine-ERDw2:hover {\n    background-color: #c4c4c4 !important;\n  }\n}\n\n.wc3DDimLine-ERDw2:active {\n  background-color: #c4c4c4 !important;\n}\n.portrait-Znfkx.wc_Nav3DToolbar-NM2CK li.wc3DDimLine-ERDw2 {\n  display: block;\n}\n\n.wc_Nav3DToolbar-NM2CK .wcFullScreen-FuayU {\n  background-size: 55%;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 1H2C1.44772 1 1 1.44772 1 2V22C1 22.5523 1.44772 23 2 23H21.9999C22.5522 23 22.9999 22.5523 22.9999 22V12M16.0078 1H21.9989C22.5512 1 22.9989 1.44772 22.9989 2V7.99114M22.5002 1.5L13.3195 10.68%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-color: #f5f5f5;\n}\n.wcFullScreen-FuayU:hover {\n  background-color: #c4c4c4;\n}\n\n.diva-pseudo-fullscreen .wc_Nav3DToolbar-NM2CK .wcFullScreen-FuayU {\n  display: none;\n}\n.wc_Nav3DToolbar-NM2CK li.wc3DGridPlannerMode-2fAed {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2231%22 height%3D%2231%22 viewBox%3D%220 0 31 31%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M5.24023 19.5242L2.10094 15.7308L5.24023 12.1436%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M2.18441 15.7428L11.2067 15.7428%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M25.759 11.759L28.8983 15.5525L25.759 19.1397%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M28.8989 15.5395L19.7925 15.5395%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M19.3847 25.9001L15.5912 29.0393L12.004 25.9001%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M15.5917 29.0395L15.6033 19.9331%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M11.6175 5.38248L15.411 2.24319L18.9982 5.38248%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M15.4106 2.24438L15.3991 11.3508%22 stroke%3D%22white%22 stroke-opacity%3D%220.87%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-color: var(--primaryColor);\n  width: 55px;\n  height: 55px;\n  cursor: pointer;\n  padding: 0;\n  cursor: pointer;\n}\n\n.wc_Nav3DToolbar-NM2CK.portrait-Znfkx li.wc3DGridPlannerMode-2fAed {\n  width: 48px;\n  height: 48px;\n}\n\n.ar-absolute-IJps2#ar-icon {\n  position: absolute;\n  left: 12px;\n  bottom: 64px;\n  z-index: 1000;\n  width: 48px;\n  height: 48px;\n}\n\n#ar-icon {\n  width: 55px;\n  height: 55px;\n  cursor: pointer;\n  padding: 0;\n  border-radius: 50%;\n  background-size: 70%;\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3Csvg viewBox%3D%220 0 30 30%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E  %3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M 17.88 1.861 L 14.94 0.471 C 14.79 0.401 14.62 0.401 14.47 0.471 L 11.52 1.861 C 11.1 2.061 10.91 2.571 11.11 2.991 C 11.25 3.301 11.56 3.481 11.88 3.481 C 12 3.481 12.12 3.451 12.24 3.401 L 13.85 2.641 L 13.85 4.711 C 13.85 5.181 14.23 5.561 14.7 5.561 C 15.17 5.561 15.55 5.181 15.55 4.711 L 15.55 2.641 L 17.16 3.401 C 17.58 3.601 18.09 3.421 18.29 2.991 C 18.49 2.561 18.31 2.061 17.88 1.861 Z M 17.161 7.591 L 14.701 8.751 L 12.241 7.591 C 11.821 7.391 11.311 7.571 11.111 8.001 C 10.911 8.421 11.091 8.931 11.521 9.131 L 13.821 10.211 C 13.821 10.231 13.816 10.248 13.811 10.266 C 13.806 10.283 13.801 10.301 13.801 10.321 L 13.801 12.401 C 13.801 12.871 14.181 13.251 14.651 13.251 C 15.121 13.251 15.501 12.871 15.501 12.401 L 15.501 10.321 C 15.501 10.311 15.498 10.301 15.496 10.291 C 15.493 10.281 15.491 10.271 15.491 10.261 L 17.891 9.131 C 18.311 8.931 18.501 8.421 18.301 8.001 C 18.091 7.581 17.581 7.391 17.161 7.591 Z M 21.051 3.421 L 23.681 4.681 C 23.881 4.771 24.001 4.971 24.001 5.181 L 24.001 8.211 C 24.001 8.681 23.621 9.061 23.151 9.061 C 22.681 9.061 22.301 8.681 22.301 8.211 L 22.301 7.091 L 20.911 7.741 C 20.791 7.791 20.671 7.821 20.551 7.821 C 20.231 7.821 19.921 7.641 19.781 7.331 C 19.581 6.911 19.771 6.401 20.191 6.201 L 21.571 5.551 L 20.321 4.951 C 19.901 4.751 19.721 4.241 19.921 3.821 C 20.121 3.401 20.631 3.221 21.051 3.421 Z M 9.21 6.201 L 7.83 5.551 L 9.08 4.951 C 9.5 4.751 9.68 4.241 9.48 3.821 C 9.28 3.391 8.77 3.211 8.35 3.421 L 5.72 4.681 C 5.52 4.771 5.4 4.971 5.4 5.181 L 5.4 8.201 C 5.4 8.671 5.78 9.051 6.25 9.051 C 6.72 9.051 7.1 8.681 7.1 8.211 L 7.1 7.081 L 8.49 7.731 C 8.61 7.791 8.73 7.821 8.85 7.821 C 9.17 7.821 9.48 7.641 9.62 7.331 C 9.821 6.911 9.64 6.401 9.21 6.201 Z M 22.301 13.081 C 22.301 12.611 22.681 12.231 23.151 12.231 C 23.621 12.231 24.001 12.611 24.011 13.081 L 24.011 16.101 C 24.011 16.321 23.881 16.521 23.691 16.611 L 21.061 17.871 C 20.941 17.921 20.811 17.951 20.691 17.951 C 20.371 17.951 20.071 17.771 19.921 17.471 C 19.721 17.051 19.901 16.541 20.321 16.341 L 21.571 15.741 L 20.191 15.091 C 19.761 14.891 19.581 14.391 19.781 13.961 C 19.981 13.531 20.491 13.351 20.911 13.551 L 22.301 14.201 L 22.301 13.081 Z M 9.62 13.951 C 9.42 13.531 8.91 13.341 8.49 13.541 L 7.1 14.201 L 7.1 13.081 C 7.1 12.611 6.72 12.231 6.25 12.231 C 5.78 12.231 5.4 12.611 5.4 13.081 L 5.4 16.111 C 5.4 16.321 5.52 16.521 5.71 16.611 L 8.34 17.871 C 8.46 17.931 8.58 17.951 8.71 17.951 C 9.03 17.951 9.33 17.771 9.48 17.471 C 9.68 17.051 9.5 16.541 9.08 16.341 L 7.83 15.741 L 9.21 15.091 C 9.64 14.891 9.821 14.381 9.62 13.951 Z M 15.551 18.511 L 17.161 17.751 C 17.581 17.551 18.091 17.731 18.291 18.161 C 18.491 18.581 18.301 19.091 17.881 19.291 L 14.941 20.671 C 14.791 20.741 14.611 20.741 14.461 20.671 L 11.521 19.291 C 11.091 19.091 10.911 18.581 11.111 18.161 C 11.311 17.731 11.821 17.551 12.241 17.751 L 13.851 18.511 L 13.851 16.441 C 13.851 15.971 14.231 15.591 14.701 15.591 C 15.171 15.591 15.551 15.971 15.551 16.441 L 15.551 18.511 Z%22 fill%3D%22white%22%2F%3E  %3Ctext style%3D%22fill%3A rgb(255%2C 255%2C 255)%3B font-family%3A Arial%2C sans-serif%3B font-size%3A 10px%3B font-weight%3A 700%3B letter-spacing%3A 1.9px%3B word-spacing%3A -6.7px%3B white-space%3A pre%3B%22 x%3D%227.235%22 y%3D%2228.446%22%3EAR%3C%2Ftext%3E%3C%2Fsvg%3E\");\n  background-color: var(--primaryColor);\n  background-repeat: no-repeat;\n  background-position: center center;\n  display: block;\n  transition: background-color 0.15s ease;\n}\n\ndiv .portrait-Znfkx.wc_Nav3DToolbar-NM2CK #ar-icon {\n  display: block;\n}\n";
+styleInject(css_248z);
+
+var NavBar = function NavBar() {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsx("ul", {
+      id: "navBarControls",
+      className: wcNav3DToolbar,
+      children: !viewHandler.uiState.isInMobileView && /*#__PURE__*/jsxs(Fragment, {
+        children: [(viewHandler.productState.doShowNav3D || viewHandler.productState.doShowNav3DCOMB) && !viewHandler.productState.roomListExpanded && /*#__PURE__*/jsxs(Fragment, {
+          children: [viewHandler.productState.doShow3DZoom && /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx("li", {
+              id: "nav3DZoomIn",
+              onClick: function onClick() {
+                return viewHandler.productState.onNav3DMenuSelect('Nav3DZoomIn');
+              },
+              className: wcZoomIn,
+              title: t('configurator.NAV3DZOOMIN_TT')
+            }), /*#__PURE__*/jsx("li", {
+              id: "nav3DZoomOut",
+              onClick: function onClick() {
+                return viewHandler.productState.onNav3DMenuSelect('Nav3DZoomOut');
+              },
+              className: wcZoomOut,
+              title: t('configurator.NAV3DZOOMOUT_TT')
+            })]
+          }), /*#__PURE__*/jsx("li", {
+            id: "nav3DViews",
+            onClick: function onClick() {
+              return viewHandler.productState.onNav3DMenuSelect('Nav3DViews');
+            },
+            className: wcViews,
+            title: t('configurator.NAV3DVIEWS_TT')
+          }), /*#__PURE__*/jsx("li", {
+            id: "nav3DFullScreen",
+            onClick: function onClick() {
+              return viewHandler.productState.onNav3DMenuSelect('Nav3DFullScreen');
+            },
+            className: wcFullScreen,
+            title: t('configurator.NAV3DFULLSCREEN_TT')
+          }), viewHandler.productState.doEnableToShow3DDimensionLines && /*#__PURE__*/jsx("li", {
+            id: "nav3DDimLine",
+            onClick: function onClick() {
+              return viewHandler.productState.onNav3DMenuSelect('Nav3DDimLine');
+            },
+            className: wc3DDimLine,
+            title: t('configurator.NAV3DDIMLINE_TT')
+          }), viewHandler.productState.doShowNav3DPlannerMode && viewHandler.tabGroupState.hasPlanner && /*#__PURE__*/jsx("li", {
+            id: "nav3DPlannerMode",
+            onClick: function onClick() {
+              return viewHandler.productState.onNav3DMenuSelect('Nav3DPlannerMode');
+            },
+            className: wc3DGridPlannerMode,
+            title: t('configurator.NAV3DPLANNERMODE_TT')
+          })]
+        }), viewHandler.productState.allowQRCodeAR && !viewHandler.productState.roomListExpanded && /*#__PURE__*/jsx(ArQrCodeIcon, {}), /*#__PURE__*/jsx(ProductRoomList, {
+          style: {
+            position: 'static'
+          }
+        })]
+      })
+    })
+  });
+};
+var index = observer(NavBar);
+
+export { index as default };

package/build/esm/index-8d069b96.js

@@ -0,0 +1,67 @@
+import { s as styleInject, u as useViewHandler } from './index-e3bc1a41.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 'react-switch';
+import 'react-countup';
+
+var header = "header-88iFZ";
+var wrapper = "wrapper-zFPaP";
+var title = "title-Mime-";
+var sel = "sel--F5X-";
+var collapseArrow = "collapseArrow-iq67x";
+var open = "open-t8G5n";
+var mobile = "mobile-Ksq3e";
+var css_248z = ".header-88iFZ {\n  height: 48px;\n  position: relative;\n  background-color: var(--diva-theme-palette-primary-light);\n  border-bottom: 2px solid var(--diva-theme-palette-primary-main);\n}\n\n.wrapper-zFPaP {\n  margin-left: 16px;\n  margin-right: 16px;\n  display: flex;\n}\n.title-Mime- {\n  padding: 11px;\n  font-weight: 100;\n  font-size: 18px;\n  position: relative;\n}\n\n.title-Mime-:hover,\n.sel--F5X- {\n  border: none;\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.title-Mime-::after {\n  content: '';\n  position: absolute;\n  width: 0px;\n  height: 3px;\n  left: 50%;\n  bottom: 0;\n  background-color: var(--diva-theme-palette-primary-main);\n  transition: all ease-in-out 0.2s;\n}\n.title-Mime-:hover::after,\n.sel--F5X-::after {\n  width: 100%;\n  left: 0;\n}\n\n.collapseArrow-iq67x {\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: contain;\n  background-image: url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22utf-8%22%3F%3E%3C!-- Generator%3A Adobe Illustrator 16.0.0%2C SVG Export Plug-In . SVG Version%3A 6.00 Build 0)  --%3E%3C!DOCTYPE svg PUBLIC %22-%2F%2FW3C%2F%2FDTD SVG 1.1%2F%2FEN%22 %22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg version%3D%221.1%22 id%3D%22Capa_1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 x%3D%220px%22 y%3D%220px%22%09 width%3D%22960px%22 height%3D%22560px%22 viewBox%3D%220 0 960 560%22 enable-background%3D%22new 0 0 960 560%22 xml%3Aspace%3D%22preserve%22%3E%3Cg id%3D%22Rounded_Rectangle_33_copy_4_1_%22%3E%09%3Cpath d%3D%22M480%2C344.181L268.869%2C131.889c-15.756-15.859-41.3-15.859-57.054%2C0c-15.754%2C15.857-15.754%2C41.57%2C0%2C57.431l237.632%2C238.937%09%09c8.395%2C8.451%2C19.562%2C12.254%2C30.553%2C11.698c10.993%2C0.556%2C22.159-3.247%2C30.555-11.698l237.631-238.937%09%09c15.756-15.86%2C15.756-41.571%2C0-57.431s-41.299-15.859-57.051%2C0L480%2C344.181z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  transform: rotate(90deg);\n  transition: all 0.35s ease;\n  width: 40px;\n  height: 40px;\n  position: absolute;\n  right: 8px;\n  top: 5px;\n}\n.open-t8G5n .collapseArrow-iq67x {\n  transform: rotate(0deg);\n}\n\n.header-88iFZ.mobile-Ksq3e {\n  height: 38px;\n}\n\n.mobile-Ksq3e .title-Mime- {\n  padding: 8px;\n  font-weight: 300;\n  font-size: 14px;\n}\n\n.mobile-Ksq3e .collapseArrow-iq67x {\n  width: 34px;\n  height: 34px;\n  position: absolute;\n  right: 8px;\n  top: 0px;\n}\n";
+styleInject(css_248z);
+
+var SubTabGroupHeader = function SubTabGroupHeader(_ref) {
+  var openState = _ref.openState,
+    curState = _ref.curState,
+    tabs = _ref.tabs;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    onClick: function onClick() {
+      return openState[1](!openState[0]);
+    },
+    className: classnames(header, openState[0] ? open : undefined, viewHandler.uiState.isInMobileView ? mobile : undefined),
+    children: [/*#__PURE__*/jsx("div", {
+      className: wrapper,
+      children: tabs.map(function (b, index) {
+        return /*#__PURE__*/jsxs("div", {
+          className: classnames(title, curState[0] === b && openState[0] ? sel : undefined),
+          onClick: function onClick(e) {
+            curState[1](b);
+            if (!openState[0]) openState[1](true);
+            e.stopPropagation();
+          },
+          children: [b === 'ALL' && tabs.length !== 1 && t('configurator.config_all'), tabs.length === 1 && t('configurator.config_accessoire'), tabs.length > 1 && b !== 'ALL' && index + '.']
+        }, b);
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(collapseArrow)
+    })]
+  });
+};
+var SubTabGroupHeader$1 = observer(SubTabGroupHeader);
+
+export { SubTabGroupHeader$1 as default };

package/build/esm/index-8e216e6a.js

@@ -0,0 +1,33 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-e3bc1a41.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+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 IsActive = function IsActive(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/Options/IsActive"
+  }));
+};
+
+export { IsActive as default };

package/build/esm/index-8e384844.js

@@ -0,0 +1,33 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-e3bc1a41.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+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 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+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 SettingsItemRoomTemplate = function SettingsItemRoomTemplate(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/Options/Default/Room/RoomItem"
+  }));
+};
+
+export { SettingsItemRoomTemplate as default };