@crystaldesign/diva-web-planner-react 25.1.0-rc.9 → 25.1.0

package/build/esm/index-8994fe35.js

@@ -0,0 +1,193 @@
+import { s as styleInject, u as useViewHandler } from './index-c5621857.js';
+import { useEffect } from 'react';
+import Inputbox from './index-a45bd545.js';
+import Settings from './index-84ff3ba4.js';
+import TabGroup from './index-5cd62312.js';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import Toolbar from './index-4c75893d.js';
+import NavigationButtons from './index-6ebbcb62.js';
+import ContentItemWrapper from './index-f81c3c0c.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-d6fc33ef.js';
+import './index-2301f0be.js';
+import './index-24ceeea9.js';
+import './index-88aa031d.js';
+import './index-b804dc4a.js';
+import 'react-laag';
+import './index-3a1eed96.js';
+import './index-034cf50c.js';
+import './index-84a80858.js';
+import 'sift';
+import './index-568bb3a8.js';
+import './index-ddaade20.js';
+import './index-d8912c6b.js';
+import './index-86b419c1.js';
+import './index.module-b76deeb7.js';
+import './index-c8598133.js';
+import 'react-switch';
+import './index-6403dff3.js';
+import './index-ff532b7c.js';
+import './index-346533c8.js';
+import 'react-dropdown';
+import './index-c149edbf.js';
+import './index-b8668de1.js';
+import './index-11f52655.js';
+import './index-6d1afb08.js';
+import '@crystaldesign/content-box';
+import './index-e5b0840f.js';
+import './index-5bc4f5d4.js';
+import './index-17d9d10c.js';
+import './index-948e8015.js';
+import './index-c716ad35.js';
+import './index-7b1906ed.js';
+import './index-52101ce2.js';
+import './index-7644273f.js';
+import './index-dab7c20e.js';
+import './index-2b6c69d8.js';
+import './index-b2a7df87.js';
+import './index-ab56240c.js';
+import './index-8f634f10.js';
+import './index-f12cd9f3.js';
+import './index-35d64df5.js';
+import './index-e81cfe6f.js';
+import './index.module-36a37d63.js';
+import './index-9322c4c1.js';
+import './index-722b78dc.js';
+import './index-3b6f2757.js';
+import './index-655e04a8.js';
+import './index-ac53e17e.js';
+import './index-f39f7a2b.js';
+import './index-ac04ddd6.js';
+import './index.module-542a9a0f.js';
+import './index-2a9340d0.js';
+import './index-498a17f3.js';
+import './index-a8edc564.js';
+import './index-c6e4c32a.js';
+import './index-099003cc.js';
+import './index-cf8c2624.js';
+import './index-91354d97.js';
+import './index-063b2535.js';
+import './index-440ac7ec.js';
+import './index-3ab345e4.js';
+import './index.module-85f9ba7e.js';
+import './index-3b83603a.js';
+import './index-4870296b.js';
+import './index-54ba1346.js';
+import 'react-collapsible';
+import './index-255e8884.js';
+import './index-73a1ee5f.js';
+import './index.module-15854236.js';
+import 'react-json-view-lite';
+import './react-json-viewer-4b80640d.js';
+import './index-4f9d2409.js';
+import './index.module-220f529a.js';
+import './index-2d0ff3eb.js';
+import 'jsoneditor';
+import './index-fd11b7e1.js';
+import './index-046a4b22.js';
+import './index-c0c9f35f.js';
+import './index-f76c6491.js';
+import './index-4ee66aca.js';
+import './index.module-86bb7338.js';
+import './index-489d617c.js';
+import './index-030d20b0.js';
+import './index-4f5967bb.js';
+import './index-b3bcd353.js';
+import './index.module-1db6dba2.js';
+import './index-b5dc7291.js';
+import './index-d2271f0f.js';
+import './DecisionVizualizer-8884209e.js';
+import './index-0db332ee.js';
+import './index-74a6cc09.js';
+import './index-9eb3e7a3.js';
+import './index-2af30692.js';
+import './index-17c6bb83.js';
+import './CatalogProperties-65cc2caf.js';
+import './ArticleProperties-2500da6b.js';
+import './OptionProperties-48be9b2a.js';
+import './OptionValueProperties-ca68f479.js';
+import 'react-select';
+import '@crystaldesign/content-item';
+import 'react-draggable';
+
+var wcConfigurator = "wcConfigurator-XqlAg";
+var wcConfiguratorSteps = "wc-configurator-steps-KdP9s";
+var mobile = "mobile-PPTgR";
+var wcConfiguratorSettings = "wc-configurator-Settings-dVmBR";
+var wcConfiguratorSettingsActions = "wcConfigurator-settings-actions-yVOyu";
+var css_248z = ".wcConfigurator-XqlAg {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  -webkit-font-smoothing: antialiased;\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  position: relative;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.wcConfigurator-XqlAg *,\n.wcConfigurator-XqlAg *::before,\n.wcConfigurator-XqlAg *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wc-configurator-steps-KdP9s {\n  height: 56px;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  margin: 0 8px;\n}\n.mobile-PPTgR .wc-configurator-steps-KdP9s {\n  height: 40px;\n}\n\n.wc-configurator-Settings-dVmBR {\n  height: calc(100% - 56px - 42px - 40px);\n  position: relative;\n  border-right: 1px solid #e6e6e6;\n}\n\n.mobile-PPTgR .wc-configurator-Settings-dVmBR {\n  height: calc(100% - 40px - 42px - 40px);\n}\n\n.wcConfigurator-settings-actions-yVOyu {\n  height: 40px;\n  z-index: 1001;\n}\n";
+styleInject(css_248z);
+
+var Wysiwyg = function Wysiwyg(props) {
+  var viewHandler = useViewHandler();
+  useEffect(function () {
+    viewHandler.layoutRendered = true;
+    viewHandler.initCSSVariablesObj(cssVariables);
+  }, []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      ref: function ref(configuratorRef) {
+        return viewHandler.uiState.setConfiguratorRef(configuratorRef);
+      },
+      style: {
+        pointerEvents: viewHandler.uiState.configuratorDisabled ? 'none' : undefined
+      },
+      hidden: viewHandler.uiState.configuratorHidden,
+      id: "wcConfigurator",
+      className: classnames(wcConfigurator, viewHandler.getIsInMobileView() ? mobile : undefined),
+      children: [/*#__PURE__*/jsx(TabGroup, {
+        className: wcConfiguratorSteps
+      }), /*#__PURE__*/jsx(Settings, {
+        className: wcConfiguratorSettings
+      }), /*#__PURE__*/jsx(NavigationButtons, {
+        className: wcConfiguratorSettingsActions,
+        showBackButtonText: true
+      }), /*#__PURE__*/jsx(Toolbar, {}), viewHandler.settingsState.contentItemId && /*#__PURE__*/jsx(ContentItemWrapper, {
+        id: viewHandler.settingsState.contentItemId,
+        startPos: "right"
+      })]
+    }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
+  });
+};
+var cssVariables = {
+  '--primaryColor': '#df2927',
+  '--secondaryColor': '#404040',
+  '--thirdColor': '#8a8a8a',
+  '--globalBorderRadius': '3px',
+  '--galleryItemRadius': '3px',
+  '--articlePosNrRadius': '3px',
+  '--articlePosNrSize': '20.8px',
+  '--articlePosNrFontSize': '16px',
+  '--settingsBackgroundColor': '#fefefe',
+  '--settingsScrollerPaddingTopBottom': '30px',
+  '--settingsScrollerPaddingRight': '30px',
+  '--settingsScrollerPaddingLeft': '30px',
+  '--tabGroupBackground': 'var(--thirdColor)',
+  '--foldArrowMarginRight': '16px',
+  '--configuratorActionWidthForthBackSpacer': '0.1rem',
+  '--configuratorActionForthWidth': 'calc(50% - calc(var(--configuratorActionWidthForthBackSpacer) / 2) - 2px)',
+  '--configuratorActionBackWidth': 'calc(50% - calc(var(--configuratorActionWidthForthBackSpacer) / 2) - 2px)',
+  '--lineHeight1': '36.8px',
+  '--fontWeight1': '600',
+  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
+  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0, 0.3)',
+  '--itemsMargin': '0.3125rem'
+};
+var index = observer(Wysiwyg);
+
+export { cssVariables, index as default };

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

@@ -0,0 +1,101 @@
+import { s as styleInject, u as useViewHandler } from './index-c5621857.js';
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+import classnames from 'classnames';
+import { ContentBoxComponent } from '@crystaldesign/content-box';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+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';
+
+var container = "container-bxM6C";
+var hidden = "hidden-X63IT";
+var mobile = "mobile--b4Sq";
+var wrapper = "wrapper-jE0i2";
+var imageItem = "image-item-2MypG";
+var sel = "sel-9mQFl";
+var css_248z = ".container-bxM6C {\n  position: absolute;\n  top: 20%;\n  right: 16px;\n  z-index: 700;\n  -webkit-tap-highlight-color: transparent;\n  width: 50px;\n  height: 100%;\n  transition: opacity 0.5s;\n}\n\n.hidden-X63IT {\n  opacity: 0;\n  z-index: 0;\n}\n\n.mobile--b4Sq.container-bxM6C {\n  right: auto;\n  right: initial;\n  top: auto;\n  top: initial;\n  bottom: 8px;\n  width: -moz-min-content;\n  width: min-content;\n  max-width: 50%;\n  border-radius: 48px;\n  height: 40px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.wrapper-jE0i2 {\n  background-color: #f2f2f2;\n  border-radius: 40px;\n  position: relative;\n  height: -moz-min-content;\n  height: min-content;\n  max-height: 60%;\n  display: flex;\n  padding-left: 7px;\n  padding-right: 7px;\n  overflow: hidden;\n}\n\n.mobile--b4Sq .wrapper-jE0i2 {\n  padding-top: 4px;\n  padding-bottom: 4px;\n  padding-left: 0;\n  padding-left: initial;\n  padding-right: 0;\n  padding-right: initial;\n  width: -moz-min-content;\n  width: min-content;\n  max-width: 100%;\n  height: 32px;\n  max-height: none;\n  max-height: initial;\n  display: block;\n}\n\n.image-item-2MypG {\n  margin-top: 12px;\n  margin-bottom: 12px;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  border: solid #f8f8f8 2px;\n  display: block;\n  cursor: pointer;\n  transition: border-color 200ms ease;\n}\n\n.mobile--b4Sq .image-item-2MypG {\n  width: 28px;\n  height: 28px;\n  margin-top: 0;\n  margin-top: initial;\n  margin-bottom: 0;\n  margin-bottom: initial;\n  margin-left: 6px;\n  margin-right: 6px;\n}\n\n.sel-9mQFl.image-item-2MypG {\n  border: 2px solid #4f4f4f;\n}\n\n.image-item-2MypG:hover {\n  cursor: pointer;\n  border: solid #9d9d9d 2px;\n}\n";
+styleInject(css_248z);
+
+var PromotedOpvs = function PromotedOpvs(props) {
+  var _viewHandler$settings, _promotedOpvs$article;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    height = _useDivaCore$state$di.height,
+    width = _useDivaCore$state$di.width;
+  useEffect(function () {
+    if (viewHandler.productState.configChangedByPromoOpvs) {
+      viewHandler.productState.setConfigChangedByPromoOpvs(false);
+    } else {
+      viewHandler.productState.setSelectedPromitionIndex(undefined);
+    }
+  }, [viewHandler.settingsState.configChanged]);
+  var contents = [];
+  var catalogData = viewHandler.divaWebPlanner.getCatalogData();
+  var promotedOpvs = catalogData === null || catalogData === void 0 ? void 0 : catalogData.promotedOpvs;
+  var selectedArticleCodex = (_viewHandler$settings = viewHandler.settingsState.selectedArticles) === null || _viewHandler$settings === void 0 || (_viewHandler$settings = _viewHandler$settings[0]) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.codex;
+  if (viewHandler.uiState.isLoading || !selectedArticleCodex || !promotedOpvs) return /*#__PURE__*/jsx(Fragment, {});
+  if (!viewHandler.productState.promotionVisible || !((_promotedOpvs$article = promotedOpvs.articles[selectedArticleCodex]) !== null && _promotedOpvs$article !== void 0 && _promotedOpvs$article.length)) {
+    if (viewHandler.uiState.configSettingsIsHidden) viewHandler.uiState.onClickHideConfigSettings();
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  var _loop = function _loop(i) {
+    var promo = promotedOpvs.articles[selectedArticleCodex][i];
+    var opv = catalogData.getOptionValue(promo.displayOPV);
+    contents.push({
+      swiperSlideStyle: {
+        height: 'auto',
+        width: 'auto'
+      },
+      content: /*#__PURE__*/jsx("span", {
+        onClick: function onClick(e) {
+          return viewHandler.productState.onPromotionClick(promo.variantValues, i);
+        },
+        style: {
+          backgroundImage: 'url(' + (opv !== null && opv !== void 0 && opv.image ? catalogData.getCatImageURL(opv.image, '_gal') : '') + ')'
+        },
+        className: classnames(imageItem, viewHandler.productState.selectedPromotionIndex === i ? sel : undefined)
+      }, i)
+    });
+  };
+  for (var i = 0; i < promotedOpvs.articles[selectedArticleCodex].length; i++) {
+    _loop(i);
+  }
+  var sliderProps = {
+    type: 'SliderContainer',
+    sliderType: viewHandler.uiState.isInMobileView ? 'slideX' : 'slideY',
+    slidesPerView: 'auto',
+    freeMode: true,
+    allowTouchMove: true,
+    contents: contents,
+    scrollToSelectedItem: true,
+    mousewheel: true
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(container, viewHandler.uiState.isInMobileView ? mobile : undefined, !viewHandler.uiState.configSettingsIsHidden ? hidden : undefined),
+    children: /*#__PURE__*/jsx("div", {
+      className: wrapper,
+      children: /*#__PURE__*/jsx("div", {
+        children: /*#__PURE__*/jsx(ContentBoxComponent, {
+          settings: {
+            contentBoxProps: sliderProps
+          }
+        }, +height + width)
+      })
+    })
+  });
+};
+var PromotedOpvs$1 = observer(PromotedOpvs);
+
+export { PromotedOpvs$1 as default };

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

@@ -0,0 +1,32 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { u as useViewHandler } from './index-c5621857.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+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 BasketMobile = function BasketMobile(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    onClick: function onClick() {
+      return viewHandler.actionButtonState.onClickAddToBasket();
+    }
+  }));
+};
+
+export { BasketMobile as default };

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

@@ -0,0 +1,64 @@
+import { s as styleInject, u as useViewHandler } from './index-c5621857.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+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';
+
+var paletteItem = "PaletteItem-jutHc";
+var imageWrapper = "imageWrapper--38qX";
+var sel = "sel-wpwWJ";
+var imageBackground = "imageBackground-qOQQh";
+var wcImage = "wcImage-e8f7s";
+var title = "title-63pJt";
+var textHover = "textHover-nhN12";
+var css_248z = "/*Size Normal */\n\n.PaletteItem-jutHc {\n  border-radius: var(--globalBorderRadius);\n  margin: calc(var(--itemsMargin) - 0.1rem);\n  position: relative;\n  float: left;\n  width: 96px;\n  height: 96px;\n  z-index: 100;\n  transition: all 0.15s ease;\n  cursor: pointer;\n}\n\n.PaletteItem-jutHc:active {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n.PaletteItem-jutHc:hover {\n  z-index: 200;\n  transition: 0.15s ease;\n}\n\n.imageWrapper--38qX {\n  border-radius: 50%;\n  border: 1px transparent solid;\n  width: 94px;\n  height: 94px;\n  transition: 0.15s ease;\n  border-style: double;\n}\n.imageWrapper--38qX:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px var(--primaryColor) solid;\n}\n.sel-wpwWJ .imageWrapper--38qX:hover,\n.small-bg43M.sel-wpwWJ .imageWrapper--38qX:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n  border: 1px var(--primaryColor) solid;\n}\n.sel-wpwWJ .imageWrapper--38qX,\n.small-bg43M.sel-wpwWJ .imageWrapper--38qX {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.imageBackground-qOQQh {\n  border-radius: 50%;\n  border: 4px white solid;\n  width: 86px;\n  height: 86px;\n  transition: 0.15s ease;\n  background-color: #c2c2c2;\n}\n\n.sel-wpwWJ .imageBackground-qOQQh,\n.imageWrapper--38qX:hover {\n  background-color: #404040;\n}\n\n.sel-wpwWJ .imageBackground-qOQQh {\n  border: 4px var(--primaryColor) solid;\n}\n\n.wcImage-e8f7s {\n  width: 100%;\n  height: 86px;\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.sel-wpwWJ .wcImage-e8f7s,\n.small-bg43M.sel-wpwWJ .wcImage-e8f7s,\n.imageWrapper--38qX:hover .wcImage-e8f7s {\n  opacity: 0.5;\n}\n\n.title-63pJt {\n  text-align: center;\n  width: 100%;\n  font-size: 14px;\n  line-height: 96px;\n  display: none;\n  position: absolute;\n  top: 0;\n  z-index: 400;\n  color: #fff;\n  font-weight: 600;\n}\n\n.imageWrapper--38qX:hover .title-63pJt,\n.textHover-nhN12,\n.sel-wpwWJ .title-63pJt {\n  display: block;\n}\n\n@media all and (max-width: 1800px) {\n  .PaletteItem-jutHc {\n    width: 81px;\n    height: 81px;\n  }\n  .imageWrapper--38qX {\n    width: 79px;\n    height: 79px;\n  }\n  .imageBackground-qOQQh {\n    width: 71px;\n    height: 71px;\n  }\n  .wcImage-e8f7s {\n    height: 71px;\n  }\n  .title-63pJt {\n    line-height: 81px;\n    font-size: 12px;\n  }\n}\n";
+styleInject(css_248z);
+
+var Room = function Room(_ref) {
+  var itemP = _ref.item,
+    from = _ref.from;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx("div", {
+    className: paletteItem,
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickedOnStaticRoomPalette(item, !!from);
+    },
+    children: /*#__PURE__*/jsx("div", {
+      className: classnames(item.sel ? sel : undefined),
+      children: /*#__PURE__*/jsxs("div", {
+        className: classnames(imageWrapper),
+        children: [/*#__PURE__*/jsx("div", {
+          className: classnames(imageBackground),
+          children: /*#__PURE__*/jsx("div", {
+            className: wcImage,
+            style: {
+              backgroundImage: "url(".concat(item.url, ")")
+            }
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: classnames(title, !item.url ? textHover : undefined),
+          children: t('configurator.' + item.N)
+        })]
+      })
+    })
+  });
+};
+var RoomSerious = observer(Room);
+
+export { RoomSerious as default };

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

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-c5621857.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+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 SettingsItemDefaultTemplate = function SettingsItemDefaultTemplate(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/Options/Default/Default"
+  }));
+};
+
+export { SettingsItemDefaultTemplate as default };

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

@@ -0,0 +1,42 @@
+import './index-c5621857.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+
+var ElementCopy = function ElementCopy(_ref) {
+  var item = _ref.item,
+    rect = _ref.rect,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+    },
+    style: {
+      left: rect.doUseCalc ? rect.leftCalc : item.position.interpretation == 'percentage' ? rect.left + '%' : rect.left + 'px',
+      top: rect.doUseCalc ? rect.topCalc : item.position.interpretation == 'percentage' ? rect.top + '%' : rect.top + 'px'
+    },
+    className: classnames(plannerUIProps.classes.copy.ElementCopy, plannerUIProps.classes.buttonGeneral)
+  });
+};
+var ElementCopy$1 = observer(ElementCopy);
+
+export { ElementCopy$1 as default };

package/build/esm/index-91354d97.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-c5621857.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+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 ItemVariant = function ItemVariant(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "TabGroup/TabGroupVertical/ItemVariants"
+  }));
+};
+
+export { ItemVariant as default };

package/build/esm/index-9182bcfc.js

@@ -0,0 +1,59 @@
+import { s as styleInject, u as useViewHandler } from './index-c5621857.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+import { useDivaCore, useTranslation } from '@crystaldesign/diva-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+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';
+
+var wcConfiguratorAction = "wcConfigurator-action-1kRvz";
+var wcConfiguratorActionButton = "wcConfigurator-action-Button-uCk2M";
+var wcCheckoutButtonPrice = "wcCheckoutButtonPrice-S5Uqm";
+var wcCheckoutButtonText = "wcCheckoutButtonText-AKaeu";
+var css_248z = ".wcConfigurator-action-1kRvz {\n  background: rgba(242.2, 242.2, 242.2, 0.9);\n  transition: width 0.2s ease-in-out;\n}\n\n.wcConfigurator-action-Button-uCk2M {\n  background-color: var(--primaryColor);\n  background-color: var(--saveButton, var(--primaryColor));\n  border: 1px var(--primaryColor) solid;\n  border: 1px var(--saveButton, var(--primaryColor)) solid;\n  border-radius: var(--globalBorderRadius);\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  line-height: var(--lineHeight1);\n  font-weight: var(--fontWeight1);\n  height: calc(100% - 2px);\n  font-size: 14px;\n  color: white;\n  flex-grow: 1;\n  -webkit-text-stroke: 0px;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n\n.wcConfigurator-action-Button-uCk2M:hover {\n  cursor: pointer;\n  transition: box-shadow 0.3s;\n\n  box-shadow: 0px 1px 4px #707070;\n}\n\n.wcConfigurator-settings-actions-isOnFirstStepDisabled-4PqCh .wcConfigurator-action-Button-uCk2M {\n  pointer-events: none;\n  background-color: #c25353;\n  border-color: #c25353;\n}\n\n.wcCheckoutButtonPrice-S5Uqm {\n  float: right;\n  margin-right: 10%;\n}\n.wcCheckoutButtonIcon-6TJQ5 {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2222%22 viewBox%3D%220 0 24 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1H3.70647C4.17122 1 4.57471 1.32018 4.68031 1.77277L5.66667 6M5.66667 6L7.81969 15.2272C7.92529 15.6798 8.32878 16 8.79353 16H19.7192C20.1781 16 20.5781 15.6877 20.6894 15.2425L22.6894 7.24253C22.8472 6.61139 22.3698 6 21.7192 6H5.66667Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2210%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2218%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: contain;\n  width: 50%;\n  height: 50%;\n  transform: translate(-50%, -50%);\n  left: 50%;\n  top: 50%;\n  position: absolute;\n}\n\n.landscape-1LGy8 .wcConfigurator-action-1kRvz {\n  /*auser In die Zusammenfassung wird ausgeblendet*/\n  display: none;\n}\n.landscape-1LGy8 .wcConfigurator-Settings-hidden-kvVds.wcConfigurator-settings-actions-isOnLastStep-BV9rP .wcConfigurator-action-1kRvz {\n  display: none;\n}\n\n.landscape-1LGy8 .wcConfigurator-action-1kRvz .wcConfigurator-action-Button-uCk2M {\n  line-height: var(--configuratorActionHeight);\n}\n.wcConfigurator-action-Button-uCk2M .wcCheckoutButtonText-AKaeu {\n  margin-top: 0px;\n}\n\n.landscape-1LGy8 .wcConfigurator-action-Button-uCk2M .wcCheckoutButtonText-AKaeu,\n.portrait-ySRAg .wcConfigurator-action-Button-uCk2M .wcCheckoutButtonText-AKaeu {\n  margin-top: 0px;\n}\n\n.wcCheckoutButtonText-AKaeu {\n  float: left;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n}\n";
+styleInject(css_248z);
+
+var BasketActionStandard = function BasketActionStandard(_ref) {
+  var _ref$buttonTextClassN = _ref.buttonTextClassName,
+    buttonTextClassName = _ref$buttonTextClassN === void 0 ? wcCheckoutButtonText : _ref$buttonTextClassN,
+    _ref$buttonPriceClass = _ref.buttonPriceClassName,
+    buttonPriceClassName = _ref$buttonPriceClass === void 0 ? wcCheckoutButtonPrice : _ref$buttonPriceClass,
+    containerClassName = _ref.containerClassName,
+    price = _ref.price;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    hidePrices = _useDivaCore.state.hidePrices;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(wcConfiguratorAction, containerClassName),
+    children: /*#__PURE__*/jsxs("div", {
+      className: wcConfiguratorActionButton,
+      onClick: function onClick() {
+        return viewHandler.actionButtonState.onClickAddToBasket();
+      },
+      id: "wcConfigurator-action-tobasket",
+      children: [/*#__PURE__*/jsx("div", {
+        className: buttonTextClassName,
+        children: t('configurator.ADD_TO_BASKET')
+      }), !hidePrices && viewHandler.tabGroupState.curTabGroupType == 'horizontal' && price && /*#__PURE__*/jsx("div", {
+        className: buttonPriceClassName,
+        children: price
+      })]
+    })
+  });
+};
+var BasketActionStandard$1 = observer(BasketActionStandard);
+
+export { BasketActionStandard$1 as default };

package/build/esm/index-9322c4c1.js

@@ -0,0 +1,27 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-c5621857.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'mobx-react-lite';
+
+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 };