@crystaldesign/diva-web-planner-react 25.9.0-beta.4 → 25.9.0-beta.40

package/build/esm/index-5a8431d3.js

@@ -0,0 +1,56 @@
+import { s as styleInject, u as useViewHandler } from './index-bf043ed1.js';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import classnames from 'classnames';
+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 wrapper = "wrapper-93hIM";
+var button = "button-smefE";
+var sel = "sel-vzSUc";
+var disabled = "disabled-l3E8B";
+var css_248z = ".wrapper-93hIM {\n  position: sticky;\n  top: -1px;\n  z-index: 500;\n  display: flex;\n  justify-content: space-around;\n  gap: 16px;\n  background-color: var(--settingsBackgroundColor);\n  padding: 6px;\n}\n\n.button-smefE {\n  transition: color 0.3s ease, border 0.3s ease;\n  cursor: pointer;\n  text-wrap: nowrap;\n  white-space: nowrap;\n  position: relative;\n  flex-grow: 1;\n  text-align: center;\n  padding-top: 4px;\n  padding-bottom: 4px;\n  font-size: 18px;\n}\n\n.button-smefE:hover,\n.sel-vzSUc {\n  border: none;\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE::after {\n  content: '';\n  position: absolute;\n  width: 0px;\n  left: 50%;\n  transition: all ease-in-out 0.2s;\n  bottom: 0;\n  height: 1px;\n  background-color: var(--diva-theme-palette-primary-main);\n}\n\n.button-smefE.sel-vzSUc::after {\n  height: 2px;\n}\n\n.button-smefE:hover::after,\n.sel-vzSUc::after {\n  width: 100%;\n  left: 0;\n}\n.disabled-l3E8B.button-smefE:hover::after {\n  width: 0px;\n  left: 0;\n}\n\n.disabled-l3E8B.button-smefE::after {\n  background-color: lightgray;\n}\n\n.disabled-l3E8B.button-smefE {\n  color: grey;\n  cursor: not-allowed;\n}\n";
+styleInject(css_248z);
+
+var ReplaceSwitch = function ReplaceSwitch(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(wrapper),
+    children: [/*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        return viewHandler.paletteViewHandler.setPlannerReplaceMode(false, true);
+      },
+      className: classnames(button, !viewHandler.settingsState.plannerReplaceMode ? sel : undefined),
+      id: "configurator_plan_tab",
+      children: t('configurator.plan')
+    }), /*#__PURE__*/jsx("div", {
+      onClick: function onClick() {
+        if (viewHandler.settingsState.plannerReplaceModeAvailable) viewHandler.paletteViewHandler.setPlannerReplaceMode(true, true);
+      },
+      className: classnames(button, viewHandler.settingsState.plannerReplaceMode ? sel : undefined, !viewHandler.settingsState.plannerReplaceModeAvailable ? disabled : undefined),
+      id: "configurator_replace_tab",
+      children: t('configurator.replace')
+    })]
+  });
+};
+var ReplaceSwitch$1 = observer(ReplaceSwitch);
+
+export { ReplaceSwitch$1 as default };

package/build/esm/index-5aac46b6.js

@@ -0,0 +1,403 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler, C as Checkout } from './index-bf043ed1.js';
+import React, { useState, useRef, useEffect, useMemo, Suspense } from 'react';
+import { observer } from 'mobx-react-lite';
+import sift from 'sift';
+import TextBox from './index-d84ef7ed.js';
+import ItemVariant from './index-dcc42a5a.js';
+import SettingsPaletteGroup from './index-20a9dd72.js';
+import ToggleOption from './index-c91e55ba.js';
+import GroupDropdown from './index-f8eac242.js';
+import PromotedProducts from './index-353a9e34.js';
+import ToggleName from './index-2ca26e70.js';
+import itemPaletteTypeComponentMap from './index-4031cd26.js';
+import classnames from 'classnames';
+import StepInfo from './index-8be23bbd.js';
+import SettingsHeader from './index-c0429481.js';
+import ReplaceSwitch from './index-5a8431d3.js';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation } from 'swiper/modules';
+import Slider from './index-e86bf2f3.js';
+import MultiToggle from './index-babcd563.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+var collapsableInner = "collapsable-inner-YPvJa";
+var css_248z$3 = ".collapsable-outer-J0amo {\n  overflow: visible !important;\n}\n\n.collapsable-outer-J0amo {\n  height: auto;\n  transition: none 0s ease 0s;\n}\n\n.collapsable-inner-YPvJa {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--gridSize), 1fr));\n  grid-auto-rows: min-content;\n  grid-gap: var(--gridGap);\n  margin-top: var(--gridGap);\n}\n";
+styleInject(css_248z$3);
+
+var wcConfiguratorConfigPaletteContainer = "wcConfigurator-ConfigPaletteContainer-uKDCv";
+var css_248z$2 = ".wcConfigurator-ConfigPaletteContainer-uKDCv {\n  width: 100%;\n  margin-bottom: 24px;\n}\n";
+styleInject(css_248z$2);
+
+var horizontalGroup = "horizontal-group-394E3";
+var css_248z$1 = ".horizontal-group-394E3 {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n\n/*navigation*/\n\n.horizontal-group-394E3 .swiper-slide {\n  width: auto;\n  width: initial;\n}\n\n.horizontal-group-394E3 .swiper-button-prev,\n.horizontal-group-394E3 .swiper-button-next {\n  position: absolute;\n  top: 50%;\n  top: var(--swiper-navigation-top-offset, 50%);\n  width: calc(var(--swiper-navigation-size) / 44 * 27);\n  height: var(--swiper-navigation-size);\n  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));\n  z-index: 10;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--swiper-theme-color);\n  color: var(--swiper-navigation-color, var(--swiper-theme-color));\n}\n.horizontal-group-394E3 .swiper-button-prev.swiper-button-disabled,\n.horizontal-group-394E3 .swiper-button-next.swiper-button-disabled {\n  opacity: 0.35;\n  cursor: auto;\n  pointer-events: none;\n}\n.horizontal-group-394E3 .swiper-button-prev.swiper-button-hidden,\n.horizontal-group-394E3 .swiper-button-next.swiper-button-hidden {\n  opacity: 0;\n  cursor: auto;\n  pointer-events: none;\n}\n.horizontal-group-394E3 .swiper-navigation-disabled .swiper-button-prev,\n.horizontal-group-394E3 .swiper-navigation-disabled .swiper-button-next {\n  display: none !important;\n}\n.horizontal-group-394E3 .swiper-button-prev svg,\n.horizontal-group-394E3 .swiper-button-next svg {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n  transform-origin: center;\n}\n.horizontal-group-394E3 .swiper-rtl .swiper-button-prev svg,\n.horizontal-group-394E3 .swiper-rtl .swiper-button-next svg {\n  transform: rotate(180deg);\n}\n.horizontal-group-394E3 .swiper-button-prev,\n.horizontal-group-394E3 .swiper-rtl .swiper-button-next {\n  left: 10px;\n  left: var(--swiper-navigation-sides-offset, 10px);\n  right: auto;\n}\n.horizontal-group-394E3 .swiper-button-next,\n.horizontal-group-394E3 .swiper-rtl .swiper-button-prev {\n  right: 10px;\n  right: var(--swiper-navigation-sides-offset, 10px);\n  left: auto;\n}\n.horizontal-group-394E3 .swiper-button-lock {\n  display: none;\n}\n/* Navigation font start */\n.horizontal-group-394E3 .swiper-button-prev:after,\n.horizontal-group-394E3 .swiper-button-next:after {\n  text-transform: none !important;\n}\n.horizontal-group-394E3 .swiper-button-prev:after,\n.horizontal-group-394E3 .swiper-button-next:after {\n  font-family: swiper-icons;\n  font-size: var(--swiper-navigation-size);\n  letter-spacing: 0;\n  font-feature-settings: ;\n  font-variant: normal;\n  font-variant: initial;\n  line-height: 1;\n}\n.horizontal-group-394E3 .swiper-button-prev:after,\n.horizontal-group-394E3 .swiper-rtl .swiper-button-next:after {\n  content: 'prev';\n}\n.horizontal-group-394E3 .swiper-button-next,\n.horizontal-group-394E3 .swiper-rtl .swiper-button-prev {\n  right: 10px;\n  right: var(--swiper-navigation-sides-offset, 10px);\n  left: auto;\n}\n.horizontal-group-394E3 .swiper-button-next:after,\n.horizontal-group-394E3 .swiper-rtl .swiper-button-prev:after {\n  content: 'next';\n}\n/* Navigation font end */\n\n/*swiper min css*/\n\n@font-face {\n  font-family: swiper-icons;\n  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');\n  font-weight: 400;\n  font-style: normal;\n}\n\n.horizontal-group-394E3 .swiper {\n  position: relative;\n  overflow: hidden;\n  list-style: none;\n  padding: 0;\n  z-index: 1;\n}\n.horizontal-group-394E3 .swiper-vertical.swiper {\n  width: 100%;\n}\n\n.horizontal-group-394E3 .swiper-vertical > .swiper-wrapper {\n  flex-direction: column;\n}\n.horizontal-group-394E3 .swiper-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  display: flex;\n  transition-property: transform;\n  box-sizing: content-box;\n}\n.horizontal-group-394E3 .swiper-android .swiper-slide,\n.horizontal-group-394E3 .swiper-wrapper {\n  transform: translate3d(0px, 0, 0);\n}\n.horizontal-group-394E3 .swiper-pointer-events {\n  touch-action: pan-y;\n}\n.horizontal-group-394E3 .swiper-pointer-events.swiper-vertical {\n  touch-action: pan-x;\n}\n.horizontal-group-394E3 .swiper-slide {\n  flex-shrink: 0;\n  height: 100%;\n  position: relative;\n  transition-property: transform;\n}\n\n.horizontal-group-394E3 .swiper-vertical .swiper-slide {\n  height: auto;\n}\n\n.horizontal-group-394E3 .swiper-slide-invisible-blank {\n  visibility: hidden;\n}\n.horizontal-group-394E3 .swiper-autoheight,\n.horizontal-group-394E3 .swiper-autoheight .swiper-slide {\n  height: auto;\n}\n.horizontal-group-394E3 .swiper-autoheight .swiper-wrapper {\n  align-items: flex-start;\n  transition-property: transform, height;\n}\n.horizontal-group-394E3 .swiper-backface-hidden .swiper-slide {\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n.horizontal-group-394E3 .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: x mandatory;\n}\n.horizontal-group-394E3 .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n  scroll-snap-type: y mandatory;\n}\n.horizontal-group-394E3 .swiper-centered > .swiper-wrapper::before {\n  content: '';\n  flex-shrink: 0;\n  order: 9999;\n}\n[dir=\"ltr\"] .horizontal-group-394E3 .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-left: var(--swiper-centered-offset-before);\n}\n[dir=\"rtl\"] .horizontal-group-394E3 .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n  margin-right: var(--swiper-centered-offset-before);\n}\n.horizontal-group-394E3 .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n  height: 100%;\n  min-height: 1px;\n  width: var(--swiper-centered-offset-after);\n}\n.horizontal-group-394E3 .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n  margin-top: var(--swiper-centered-offset-before);\n}\n.horizontal-group-394E3 .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n  width: 100%;\n  min-width: 1px;\n  height: var(--swiper-centered-offset-after);\n}\n.horizontal-group-394E3 .swiper-centered > .swiper-wrapper > .swiper-slide {\n  scroll-snap-align: center center;\n}\n";
+styleInject(css_248z$1);
+
+var HorizantalGroup = function HorizantalGroup(_ref) {
+  var item = _ref.item,
+    PaletteComponent = _ref.PaletteComponent;
+  var elements = item.groups.flatMap(function (group) {
+    return group.items;
+  });
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    swiperRef = _useState2[0],
+    setSwiperRef = _useState2[1];
+  var selectedIdx = useRef(0);
+  var navigateToOnClick = function navigateToOnClick(index) {
+    selectedIdx.current = index;
+    swiperRef === null || swiperRef === void 0 || swiperRef.slideTo(index);
+  };
+  useEffect(function () {
+    if (swiperRef) {
+      swiperRef.slideTo(selectedIdx.current, 0);
+    }
+  }, [swiperRef]);
+  if (elements.length == 1) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(horizontalGroup),
+    id: item.id.toString(),
+    children: /*#__PURE__*/jsx(Swiper, {
+      onSwiper: setSwiperRef,
+      resizeObserver: true,
+      modules: [Navigation],
+      slidesPerView: 'auto',
+      style: {
+        width: 'fit-content'
+      },
+      spaceBetween: 8,
+      scrollbar: true,
+      children: elements.map(function (e, index) {
+        return /*#__PURE__*/jsx(SwiperSlide, {
+          onClick: function onClick(e) {
+            navigateToOnClick(index - 1);
+            e.stopPropagation();
+          },
+          children: /*#__PURE__*/jsx(PaletteComponent, {
+            paletteType: item.type,
+            paletteId: item.id,
+            item: e
+          }, getKey(e))
+        }, index);
+      })
+    })
+  });
+};
+var HorizantalGroup$1 = observer(HorizantalGroup);
+
+var index$3 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': HorizantalGroup$1
+});
+
+var wrapper = "wrapper-2fZg-";
+var css_248z = ".wrapper-2fZg- {\n  position: sticky;\n  top: -1px;\n  z-index: 500;\n  display: flex;\n  justify-content: space-around;\n  gap: 16px;\n  background-color: var(--settingsBackgroundColor);\n  padding: 6px;\n  width: calc(100% - 12px);\n}\n";
+styleInject(css_248z);
+
+var ArticleOverviewWrapper = function ArticleOverviewWrapper(props) {
+  var viewHandler = useViewHandler();
+  var item = viewHandler.settingsState.itemPalettes.get(1);
+  if (!item) return /*#__PURE__*/jsx(Fragment, {});
+  var PaletteComponent = itemPaletteTypeComponentMap[item.type];
+  return /*#__PURE__*/jsx("div", {
+    className: wrapper,
+    children: /*#__PURE__*/jsx(HorizantalGroup$1, {
+      item: item,
+      PaletteComponent: PaletteComponent
+    })
+  });
+};
+var ArticleOverviewWrapper$1 = observer(ArticleOverviewWrapper);
+
+var index$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': ArticleOverviewWrapper$1
+});
+
+var ItemWrapper = function ItemWrapper(_ref) {
+  var item = _ref.item,
+    style = _ref.style,
+    children = _ref.children;
+  var viewHandler = useViewHandler();
+  var Header = !item.isHeader && !item.hideHeader ? /*#__PURE__*/jsx(SettingsHeader, {
+    isInScroller: true,
+    isSettingsHeader: false,
+    item: item
+  }) : /*#__PURE__*/jsx(Fragment, {});
+  var plannerArticles = item.type.startsWith('ART');
+  var planner2Dot0 = plannerArticles && viewHandler.settingsState.planner2Dot0Active;
+  return /*#__PURE__*/jsxs("div", {
+    style: style,
+    className: classnames(wcConfiguratorConfigPaletteContainer, {
+      wcFilterVisible: item.filterVisible
+    }),
+    ref: function ref(_ref2) {
+      return item.htmlRef = _ref2;
+    },
+    id: item.configStepKey,
+    children: [/*#__PURE__*/jsx(StepInfo, {
+      stepInfo: item.info
+    }), !planner2Dot0 && Header, planner2Dot0 && /*#__PURE__*/jsx(ArticleOverviewWrapper$1, {}), plannerArticles && !planner2Dot0 && viewHandler.settingsState.doShowReplaceMode && (!viewHandler.paletteViewHandler.plannerItems.DoShowAdditionalPlannerElements || item.id == 2) && /*#__PURE__*/jsx(ReplaceSwitch, {}), planner2Dot0 && Header, children]
+  });
+};
+var ItemWrapper$1 = observer(ItemWrapper);
+
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': ItemWrapper$1
+});
+
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useGridVariables = function useGridVariables(item) {
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    dimensions = _useDivaCore.state.dimensions;
+  var variables = useMemo(function () {
+    var _viewHandler$uiState$, _viewHandler$settings, _viewHandler$settings2, _settingsSizes$gapDef, _settingsSizes$sizeDe, _viewHandler$uiState$2;
+    //this code now sets a css variable within a specific palette to define the grid items size and gird gap
+    //this is a big improvement to the solution we had bevor (windowspecific itemsize hardcoded) but still can be done better
+    //s the catalogteam can define the size of the items so it would be some kind of catalog ux improvment -> TODO refactoring
+
+    var settingsSizes = (_viewHandler$uiState$ = viewHandler.uiState.ViewConfig.settingsSizes) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : {};
+    var settingsContainerWidth = (_viewHandler$settings = (_viewHandler$settings2 = viewHandler.settingsState.settingsScrollerElement) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.getBoundingClientRect().width) !== null && _viewHandler$settings !== void 0 ? _viewHandler$settings : 0;
+    var gridGap = (_settingsSizes$gapDef = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapDefault) !== null && _settingsSizes$gapDef !== void 0 ? _settingsSizes$gapDef : '10px';
+    var gridSize = (_settingsSizes$sizeDe = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeDefault) !== null && _settingsSizes$sizeDe !== void 0 ? _settingsSizes$sizeDe : '300px';
+    var infoIconSize = undefined;
+    if (item.isRenderedNotInSettingPalette && !item.isRenderedInAccessorieStep) {
+      gridSize = '240px';
+    } else if (item.type == 'SUMMARY_ARTICLES' || item.type === 'SUMMARY_OPTIONTREE' || item.type == 'SUMMARY_PARTLIST' || item.type == 'VARIANTS') {
+      gridSize = 'calc(100% - 20px)';
+    } else if (item.type == 'GAL_GROUP_DROPDOWN' || item.type === 'GAL_BIG') {
+      gridSize = '100px';
+    } else if (item.type == 'ACC') {
+      if (settingsSizes.sizeAccessoires) {
+        gridSize = settingsSizes.sizeAccessoires;
+      }
+    } else if (item.type == 'ACC_CONFIG') {
+      gridSize = '100%';
+    } else if (item.type == 'RANGE') {
+      gridSize = '100%';
+    } else if (item.type == 'GAL') {
+      var _settingsSizes$sizeGa, _settingsSizes$gapGal;
+      gridSize = (_settingsSizes$sizeGa = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.sizeGallery) !== null && _settingsSizes$sizeGa !== void 0 ? _settingsSizes$sizeGa : '80px';
+      gridGap = (_settingsSizes$gapGal = settingsSizes === null || settingsSizes === void 0 ? void 0 : settingsSizes.gapGallery) !== null && _settingsSizes$gapGal !== void 0 ? _settingsSizes$gapGal : '10px';
+    } else if (item.type === 'PLANNERSWITCH') {
+      gridSize = '170px';
+    } else if (item.type === 'SMALL' && viewHandler.getIsInMobileView() && ((_viewHandler$uiState$2 = viewHandler.uiState.templateConfigKeys) === null || _viewHandler$uiState$2 === void 0 ? void 0 : _viewHandler$uiState$2.ItemDefault) == 'jungle') {
+      //for the usecase of schlaraffia in mobile
+      //TODO for refactorig this should be done nicer
+      gridSize = '120px';
+    } else if (item.type === 'SHELFPLANNER' && viewHandler.productState.shelfPlannerRTV) {
+      gridSize = '120px';
+    } else if (item.type === 'VERY_SMALL') {
+      gridSize = '48%';
+    } else if (item.type == 'GAL_TEXT_2') {
+      if (settingsContainerWidth > 700) gridSize = '120px';else if (settingsContainerWidth > 550) gridSize = '120px';else if (settingsContainerWidth > 400) gridSize = '110px';else gridSize = '100px';
+    } else if (item.type == 'GAL_TEXT') {
+      if (settingsContainerWidth > 700) gridSize = '100px';else if (settingsContainerWidth > 550) gridSize = '100px';else if (settingsContainerWidth > 400) gridSize = '90px';else gridSize = '80px';
+    } else if (item.type == 'GAL_BIG_TEXT_2') {
+      if (settingsContainerWidth > 700) gridSize = '190px';else if (settingsContainerWidth > 550) gridSize = '170px';else if (settingsContainerWidth > 400) gridSize = '145px';else gridSize = '130px';
+    } else if (item.type == 'GAL_BIG_TEXT' || item.type == 'ART_2') {
+      if (settingsContainerWidth > 700) gridSize = '120px';else if (settingsContainerWidth > 550) gridSize = '120px';else if (settingsContainerWidth > 400) gridSize = '110px';else gridSize = '100px';
+    } else if (item.type == 'GAL_SMALL_TEXT_2' || item.type == 'PLANNER_2.0') {
+      if (settingsContainerWidth > 700) gridSize = '110px';else if (settingsContainerWidth > 550) gridSize = '95px';else if (settingsContainerWidth > 400) gridSize = '80px';else gridSize = '70px';
+      gridGap = '8px';
+    } else if (item.type == 'GAL_SMALL_TEXT') {
+      if (settingsContainerWidth > 700) gridSize = '75px';else if (settingsContainerWidth > 550) gridSize = '70px';else if (settingsContainerWidth > 400) gridSize = '55px';else gridSize = '50px';
+      gridGap = '6px';
+    } else if (item.type.startsWith('GAL_SMALL')) {
+      gridSize = '60px';
+    }
+    if (['GAL_SMALL_GROUP_DROPDOWN', 'TOGGLE', 'TOGGLE_NAME', 'DROPDOWN_IMAGE', 'DROPDOWN_TEXT'].includes(item.type)) {
+      infoIconSize = '20px';
+    }
+    return _objectSpread$1({
+      '--gridSize': gridSize,
+      '--gridGap': gridGap
+    }, infoIconSize ? {
+      '--infoIconSize': infoIconSize
+    } : {});
+  }, [item, viewHandler.uiState.ViewConfig.settingsSizes, viewHandler.settingsState.settingsScrollerElement, dimensions]);
+  return variables;
+};
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ShelfPlanner = /*#__PURE__*/React.lazy(function () {
+  return import('./index-4c6b8e1b.js');
+});
+var DoorPlanner = /*#__PURE__*/React.lazy(function () {
+  return import('./index-1f59fc27.js');
+});
+var ProductList = /*#__PURE__*/React.lazy(function () {
+  return import('./index-008116e9.js');
+});
+var SettingsPaletteItem = function SettingsPaletteItem(_ref) {
+  var _item$groups$;
+  var item = _ref.item,
+    groupSize = _ref.groupSize;
+  var viewHandler = useViewHandler();
+  var variables = useGridVariables(item);
+  var PaletteComponent = itemPaletteTypeComponentMap[item.type];
+  if (PaletteComponent === undefined) throw new Error("component type: '" + item.type + "' not implemented");
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    filteredGroups = _useState2[0],
+    setFilteredGroups = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filteredGroupsWithEmptyGroups = _useState4[0],
+    setFilteredGroupsWithEmptyGroups = _useState4[1];
+  useEffect(function () {
+    var filteredGroupsWithEmptyGroups = item.groups.map(function (group) {
+      return _objectSpread(_objectSpread({}, group), {}, {
+        items: item.currentItemsFilter && item.type !== 'PLANNERSWITCH' ? group.items.filter(sift(item.currentItemsFilter)) : group.items
+      });
+    });
+    var filteredGroups = filteredGroupsWithEmptyGroups.filter(function (group) {
+      return group.items.length > 0;
+    });
+    if (filteredGroups.length > 0) {
+      filteredGroupsWithEmptyGroups = filteredGroups;
+    }
+    setFilteredGroups(filteredGroups);
+    setFilteredGroupsWithEmptyGroups(filteredGroupsWithEmptyGroups);
+  }, [item, viewHandler.settingsState.itemPalettes]);
+  var doNotRenderGroups = filteredGroups.length === 1 && filteredGroups[0].name === 'none';
+  var innerGridClass = item.type.startsWith('SUMMARY') ? '' : collapsableInner;
+  if (!item.visible) return /*#__PURE__*/jsx(Fragment, {});
+
+  //is rendered with the articleoverviewwrapper
+  if (item.type == 'PLANNER_2.0') return /*#__PURE__*/jsx(Fragment, {});
+  switch (item.type) {
+    case 'CHECKOUT':
+      return /*#__PURE__*/jsx(Checkout, {
+        viewHandler: viewHandler
+      });
+    case 'TOGGLE':
+      return /*#__PURE__*/jsx(ToggleOption, {
+        style: variables,
+        item: item,
+        paletteId: item.id
+      });
+    case 'TOGGLE_NAME':
+      return /*#__PURE__*/jsx(ToggleName, {
+        style: variables,
+        item: item,
+        paletteId: item.id
+      });
+    case 'TEXTBOX':
+      return /*#__PURE__*/jsx(TextBox, {
+        style: variables,
+        item: item,
+        paletteId: item.id
+      });
+    case 'DROPDOWN_TEXT':
+    case 'DROPDOWN_IMAGE':
+      return /*#__PURE__*/jsx(ItemVariant, {
+        style: variables,
+        item: item,
+        paletteId: item.id
+      });
+    case 'NUMBER':
+      return /*#__PURE__*/jsx(PaletteComponent, {
+        paletteId: item.id,
+        item: (_item$groups$ = item.groups[0]) === null || _item$groups$ === void 0 || (_item$groups$ = _item$groups$.items) === null || _item$groups$ === void 0 ? void 0 : _item$groups$[0],
+        groupSize: groupSize
+      }, item.id + item.configStepKey);
+    case 'SLIDER':
+      return /*#__PURE__*/jsx(Slider, {
+        style: variables,
+        item: item,
+        paletteId: item.id
+      });
+    case 'MULTI_TOGGLE':
+    case 'MULTI_TOGGLE_ROUND':
+      return /*#__PURE__*/jsx(MultiToggle, {
+        style: variables,
+        item: item,
+        paletteId: item.id,
+        round: item.type === 'MULTI_TOGGLE_ROUND'
+      });
+    case 'SHELFPLANNER':
+      return /*#__PURE__*/jsx(Suspense, {
+        fallback: /*#__PURE__*/jsx(Fragment, {}),
+        children: /*#__PURE__*/jsx(ShelfPlanner, {
+          filteredGroups: filteredGroups,
+          item: item,
+          id: item.id,
+          style: variables
+        }, item.id)
+      });
+    case 'PRODUCTS':
+      return /*#__PURE__*/jsx(ProductList, {
+        item: item
+      });
+    case 'PROMOTED':
+      return /*#__PURE__*/jsx(PromotedProducts, {
+        item: item
+      });
+    case 'DOOR_PLANNER':
+      return /*#__PURE__*/jsx(Suspense, {
+        fallback: /*#__PURE__*/jsx(Fragment, {}),
+        children: /*#__PURE__*/jsx(DoorPlanner, {
+          item: item
+        })
+      });
+    case 'GAL_GROUP_DROPDOWN':
+    case 'GAL_SMALL_GROUP_DROPDOWN':
+      var childGroup = /*#__PURE__*/jsx(GroupDropdown, {
+        item: item,
+        PaletteComponent: PaletteComponent,
+        filteredGroups: filteredGroupsWithEmptyGroups,
+        id: item.id,
+        showSearchBar: item.type == 'GAL_GROUP_DROPDOWN',
+        contentInnerClassName: innerGridClass
+      }, item.configStepKey);
+      return /*#__PURE__*/jsx(ItemWrapper$1, {
+        style: variables,
+        item: item,
+        children: childGroup
+      });
+    default:
+      var children;
+      if (doNotRenderGroups) children = /*#__PURE__*/jsx("div", {
+        className: innerGridClass,
+        children: filteredGroups.map(function (group) {
+          return group.items.map(function (paletteItem, i) {
+            return /*#__PURE__*/jsx(PaletteComponent, {
+              paletteType: item.type,
+              paletteId: item.id,
+              item: paletteItem
+            }, getKey(paletteItem));
+          });
+        })
+      });else children = /*#__PURE__*/jsx(SettingsPaletteGroup, {
+        groups: filteredGroups,
+        contentInnerClassName: innerGridClass,
+        itemPalette: item,
+        PaletteComponent: PaletteComponent
+      });
+      return /*#__PURE__*/jsx(ItemWrapper$1, {
+        style: variables,
+        item: item,
+        children: children
+      });
+  }
+};
+var getKey = function getKey(item) {
+  var _ref2, _ref3, _ref4, _item$basketId;
+  return (_ref2 = (_ref3 = (_ref4 = (_item$basketId = item.basketId) !== null && _item$basketId !== void 0 ? _item$basketId : item.codex) !== null && _ref4 !== void 0 ? _ref4 : item.key) !== null && _ref3 !== void 0 ? _ref3 : item.articleCodex) !== null && _ref2 !== void 0 ? _ref2 : item.title;
+};
+var SettingsItem = observer(SettingsPaletteItem);
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  getKey: getKey,
+  'default': SettingsItem
+});
+
+export { SettingsItem as S, index$2 as a, index$1 as b, collapsableInner as c, index as d, getKey as g, index$3 as i };

package/build/esm/index-5c6ba6b3.js

@@ -0,0 +1,32 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-bf043ed1.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 '@crystaldesign/widget-contact-form';
+
+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 PlannerMsgContainer = function PlannerMsgContainer(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/ProductCenter/PlannerMsgContainer"
+  }));
+};
+
+export { PlannerMsgContainer as default };

package/build/esm/index-5d4d1d02.js

@@ -0,0 +1,96 @@
+import { s as styleInject, u as useViewHandler } from './index-bf043ed1.js';
+import 'react';
+import classnames from 'classnames';
+import Option from './index-2134ecb8.js';
+import { useTranslation } from '@crystaldesign/diva-core';
+import InfoIcon from './index-b80c7ffb.js';
+import PricePreview from './index-f053e4aa.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+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';
+import './index.module-c75f1c61.js';
+import './index.module-12bc4555.js';
+import './index-78ffdef9.js';
+import 'react-laag';
+import './index-e3ee6b34.js';
+import './index-34067bd2.js';
+
+var container = "container-GW-AX";
+var sel = "sel-jrQj2";
+var titleContainer = "title-container-W41FT";
+var title = "title-FojkZ";
+var subTitle = "sub-title-RJrKO";
+var ccConstructionWarning = "ccConstructionWarning-8h9KH";
+var css_248z = ".container-GW-AX {\n  position: relative;\n  box-sizing: border-box;\n  border: 2px solid #e8e9ed;\n  border-radius: 6px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.container-GW-AX.sel-jrQj2 {\n  border: 2px solid var(--secondaryColor);\n}\n\n.container-GW-AX img {\n  width: 100%;\n\n  -o-object-fit: contain;\n\n     object-fit: contain;\n}\n\n.title-container-W41FT {\n  height: 30px;\n  color: #4b4b4b;\n  background: #f2f2f2;\n}\n.title-FojkZ,\n.sub-title-RJrKO {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  height: 1.2em;\n  text-align: right;\n  margin: 0 3px;\n}\n\n.title-FojkZ {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  font-weight: 600;\n  font-size: 13px;\n  line-height: 15px;\n}\n\n.sub-title-RJrKO {\n  -webkit-line-clamp: 1;\n  white-space: nowrap;\n  font-size: 9px;\n  line-height: 12px;\n  font-weight: 300;\n}\n\n.ccConstructionWarning-8h9KH {\n  display: block;\n  height: 30px;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 64 64%22%3E%3Cdefs%3E%3ClinearGradient gradientTransform%3D%22matrix(1.31117 0 0 1.30239 737.39 159.91)%22 gradientUnits%3D%22userSpaceOnUse%22 id%3D%220%22 y2%3D%22-.599%22 x2%3D%220%22 y1%3D%2245.47%22%3E%3Cstop stop-color%3D%22%23ffc515%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22%23ffd55b%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg transform%3D%22matrix(.85714 0 0 .85714-627.02-130.8)%22%3E%3Cpath d%3D%22m797.94 212.01l-25.607-48c-.736-1.333-2.068-2.074-3.551-2.074-1.483 0-2.822.889-3.569 2.222l-25.417 48c-.598 1.185-.605 2.815.132 4 .737 1.185 1.921 1.778 3.404 1.778h51.02c1.483 0 2.821-.741 3.42-1.926.747-1.185.753-2.667.165-4%22 fill%3D%22url(%230)%22%2F%3E%3Cpath d%3D%22m-26.309 18.07c-1.18 0-2.135.968-2.135 2.129v12.82c0 1.176.948 2.129 2.135 2.129 1.183 0 2.135-.968 2.135-2.129v-12.82c0-1.176-.946-2.129-2.135-2.129zm0 21.348c-1.18 0-2.135.954-2.135 2.135 0 1.18.954 2.135 2.135 2.135 1.181 0 2.135-.954 2.135-2.135 0-1.18-.952-2.135-2.135-2.135z%22 transform%3D%22matrix(1.05196 0 0 1.05196 796.53 161.87)%22 fill%3D%22%23000%22 stroke%3D%22%2340330d%22 fill-opacity%3D%22.75%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  width: 30px;\n  background-repeat: no-repeat;\n  background-size: contain;\n  padding: 0;\n  position: absolute;\n  z-index: 888;\n  top: 0;\n  right: 0;\n}\n";
+styleInject(css_248z);
+
+var OptionJungle = function OptionJungle(_ref) {
+  var _item$text, _item$text2;
+  var itemP = _ref.item,
+    paletteId = _ref.paletteId;
+    _ref.type;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (item.layout == 'TEXT' || !viewHandler.uiState.isInMobileView) return /*#__PURE__*/jsx(Option, {
+    item: item,
+    paletteId: paletteId
+  });
+  var header = (_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.split(/,(.+)/)[0];
+  var subText = (_item$text2 = item.text) === null || _item$text2 === void 0 ? void 0 : _item$text2.split(/,(.+)/)[1];
+  if (!subText) {
+    var _item$text3, _item$text4;
+    header = (_item$text3 = item.text) === null || _item$text3 === void 0 ? void 0 : _item$text3.split(/\((.+)/)[0];
+    subText = (_item$text4 = item.text) === null || _item$text4 === void 0 || (_item$text4 = _item$text4.split(/\((.+)/)[1]) === null || _item$text4 === void 0 ? void 0 : _item$text4.replace(')', '');
+  }
+  var onClick = function onClick() {
+    viewHandler.paletteViewHandler.clickedOnConfigPalette(item, undefined, paletteId);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    id: item.codex,
+    className: classnames(container, item.sel ? sel : undefined),
+    onClick: onClick,
+    children: [/*#__PURE__*/jsx("img", {
+      style: {
+        maxHeight: viewHandler.settingsState.settingsWidth / 3
+      },
+      src: item.image,
+      title: item.text + (item.freeText ? item.freeText : '')
+    }), /*#__PURE__*/jsxs("div", {
+      className: titleContainer,
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(title),
+        children: header
+      }), subText && /*#__PURE__*/jsx("div", {
+        className: classnames(subTitle),
+        children: subText
+      })]
+    }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+      item: item
+    }, item.codex), item.disabledByConstructionRule && /*#__PURE__*/jsx("div", {
+      className: classnames(ccConstructionWarning),
+      title: t('configurator.' + item.disabledByConstructionRule)
+    }), item.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+      asyncPricePreview: item.pricePreviewPromise,
+      sel: item.sel
+    })]
+  });
+};
+
+export { OptionJungle as default };