@crystaldesign/diva-web-planner-react 26.8.0-beta.16 → 26.8.0-beta.18

package/build/esm/index-b2bd5f86.js

@@ -0,0 +1,51 @@
+import { s as styleInject, u as useViewHandler } from './index-cef0fc63.js';
+import 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 container = "container-LyqYI";
+var hidden = "hidden-TqWZg";
+var notHidden = "not-hidden-Wbdom";
+var text = "text-022qF";
+var css_248z = ".container-LyqYI {\n  bottom: 32px;\n  left: 0px;\n  position: absolute;\n  z-index: 990;\n  margin-left: 20px;\n  margin-bottom: 20px;\n  opacity: 1;\n  display: flex;\n  align-items: center;\n}\n\n.hidden-TqWZg {\n  opacity: 0;\n}\n\n.not-hidden-Wbdom {\n  transition: opacity 0.5s;\n}\n.text-022qF {\n  margin-left: 10px;\n  font-size: 13px;\n}\n";
+styleInject(css_248z);
+
+var RotateIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M0%200h24v24H0V0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M16.48%202.52c3.27%201.55%205.61%204.72%205.97%208.48h1.5C23.44%204.84%2018.29%200%2012%200l-.66.03%203.81%203.81%201.33-1.32zm-6.25-.77c-.59-.59-1.54-.59-2.12%200L1.75%208.11c-.59.59-.59%201.54%200%202.12l12.02%2012.02c.59.59%201.54.59%202.12%200l6.36-6.36c.59-.59.59-1.54%200-2.12L10.23%201.75zm4.6%2019.44L2.81%209.17l6.36-6.36%2012.02%2012.02-6.36%206.36zm-7.31.29C4.25%2019.94%201.91%2016.76%201.55%2013H.05C.56%2019.16%205.71%2024%2012%2024l.66-.03-3.81-3.81-1.33%201.32z%22%2F%3E%3C%2Fsvg%3E";
+
+var RotateInfo = function RotateInfo(props) {
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (!viewHandler.uiState.isMobileLandscape || viewHandler.uiState.isMobilePortrait || viewHandler.uiState.ViewConfig.disableLandscape) return /*#__PURE__*/jsx(Fragment, {});
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(container, !viewHandler.productState.orbitHidden ? hidden : notHidden),
+    children: [/*#__PURE__*/jsx("img", {
+      src: RotateIcon
+    }), /*#__PURE__*/jsx("div", {
+      className: text,
+      children: t('configurator.rotate_mobile')
+    })]
+  });
+};
+var RotateInfo$1 = observer(RotateInfo);
+
+export { RotateInfo$1 as default };

package/build/esm/index-b2bfa211.js

@@ -0,0 +1,186 @@
+import { s as styleInject, u as useViewHandler, _ as _onClickCheckout } from './index-cef0fc63.js';
+import { observer } from 'mobx-react-lite';
+import { useMemo } from 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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';
+
+var container = "container-jVXha";
+var headline = "headline-wXulF";
+var subheadline = "subheadline-dAJ7Z";
+var dealerCard = "dealerCard-WsUAS";
+var dealerImage = "dealerImage-Wd3ix";
+var dealerContent = "dealerContent-Se-R3";
+var dealerName = "dealerName-z85PP";
+var dealerDescription = "dealerDescription-wPDsN";
+var infoBlock = "infoBlock-i-S-s";
+var contactList = "contactList-vdVHd";
+var contactItem = "contactItem-g32vy";
+var contactIcon = "contactIcon-gLhAV";
+var ctaButton = "ctaButton-0BeyQ";
+var ctaSubtext = "ctaSubtext-ScjcP";
+var css_248z = ".container-jVXha {\n  padding: 16px 0;\n  border-top: 1px solid #e8e3da;\n  border-top: 1px solid var(--galleryItemBorderColor, #e8e3da);\n}\n\n.headline-wXulF {\n  font-size: 18px;\n  font-weight: 300;\n  line-height: 1.3;\n  color: var(--diva-theme-palette-text-primary);\n  margin: 0 0 8px;\n}\n\n.subheadline-dAJ7Z {\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: var(--diva-theme-palette-text-secondary);\n  margin: 0 0 16px;\n}\n\n.dealerCard-WsUAS {\n  overflow: hidden;\n  border-radius: var(--buttons-border-radius);\n  border: 1px solid #e8e3da;\n  border: 1px solid var(--galleryItemBorderColor, #e8e3da);\n  background: var(--settingsBackgroundColor);\n  margin-bottom: 16px;\n}\n\n.dealerImage-Wd3ix {\n  overflow: hidden;\n  aspect-ratio: 16 / 8;\n}\n\n.dealerImage-Wd3ix img {\n  width: 100%;\n  height: 100%;\n  -o-object-fit: contain;\n     object-fit: contain;\n  -o-object-position: top center;\n     object-position: top center;\n}\n\n.dealerContent-Se-R3 {\n  padding: 8px 16px;\n}\n\n.dealerName-z85PP {\n  font-size: 16px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-primary);\n  margin: 0 0 4px;\n}\n\n.dealerDescription-wPDsN {\n  font-size: 14px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-secondary);\n  margin: 0 0 12px;\n}\n\n.infoBlock-i-S-s {\n  font-size: 14px;\n  font-weight: 300;\n  line-height: 1.5;\n  color: var(--diva-theme-palette-text-secondary);\n  margin-bottom: 12px;\n  white-space: pre-line;\n}\n\n.contactList-vdVHd {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  border-top: 1px solid #e8e3da;\n  border-top: 1px solid var(--galleryItemBorderColor, #e8e3da);\n  padding-top: 12px;\n}\n\n.contactItem-g32vy {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-secondary);\n}\n\n.contactItem-g32vy a {\n  color: var(--diva-theme-palette-text-secondary);\n  text-decoration: none;\n}\n\n.contactItem-g32vy a:hover {\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.contactIcon-gLhAV {\n  flex-shrink: 0;\n  width: 16px;\n  height: 16px;\n  margin-top: 2px;\n  opacity: 0.6;\n}\n\n.ctaButton-0BeyQ {\n  width: calc(100% - 48px);\n  padding: 14px 24px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #fff;\n  color: var(--diva-theme-palette-primary-contrast-text, #fff);\n  background: var(--diva-theme-palette-primary-main);\n  border: none;\n  border-radius: var(--buttons-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  transition:\n    background 0.2s,\n    box-shadow 0.2s;\n}\n\n.ctaButton-0BeyQ:hover {\n  background: var(--diva-theme-palette-primary-dark);\n}\n\n.ctaSubtext-ScjcP {\n  font-size: 12px;\n  font-weight: 300;\n  color: var(--diva-theme-palette-text-secondary);\n  text-align: center;\n  margin: 8px 0 0;\n}\n";
+styleInject(css_248z);
+
+var AppointmentPreview = function AppointmentPreview() {
+  var _contactData$contactP, _contactData$contactP2;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var organization = viewHandler.uiState.organization;
+  var contactData = useMemo(function () {
+    var data = organization === null || organization === void 0 ? void 0 : organization.additionalContactData;
+    if (!data) return undefined;
+    var arr = Array.isArray(data) ? data : [data];
+    return arr[0];
+  }, [organization === null || organization === void 0 ? void 0 : organization.additionalContactData]);
+  var appointmentButton = useMemo(function () {
+    var config = viewHandler.uiState.checkoutConfig;
+    if (!(config !== null && config !== void 0 && config.buttons)) return undefined;
+    return config.buttons.find(function (b) {
+      return b.type === 'APPOINTMENT';
+    });
+  }, [viewHandler.uiState.checkoutConfig]);
+  var handleCtaClick = function handleCtaClick() {
+    if (appointmentButton) {
+      var _appointmentButton$in;
+      _onClickCheckout(appointmentButton, viewHandler, (_appointmentButton$in = appointmentButton.index) !== null && _appointmentButton$in !== void 0 ? _appointmentButton$in : 0, t, undefined, undefined);
+    }
+  };
+  if (!contactData) return null;
+  var hasContactInfo = contactData.street || contactData.zipCode || contactData.city || contactData.phone || contactData.email;
+  if (!hasContactInfo && !contactData.description && !contactData.info && !contactData.contactPersonName && !contactData.contactPersonImage) return null;
+  return /*#__PURE__*/jsxs("div", {
+    className: container,
+    children: [/*#__PURE__*/jsx("h3", {
+      className: headline,
+      children: t('checkout.appointment.preview.headline', 'Persönliche Beratung vereinbaren')
+    }), /*#__PURE__*/jsx("p", {
+      className: subheadline,
+      children: t('checkout.appointment.preview.subheadline')
+    }), /*#__PURE__*/jsxs("div", {
+      className: dealerCard,
+      children: [((_contactData$contactP = contactData.contactPersonImage) === null || _contactData$contactP === void 0 ? void 0 : _contactData$contactP.url) && /*#__PURE__*/jsx("div", {
+        className: dealerImage,
+        children: /*#__PURE__*/jsx("img", {
+          src: contactData.contactPersonImage.url,
+          alt: (_contactData$contactP2 = contactData.contactPersonName) !== null && _contactData$contactP2 !== void 0 ? _contactData$contactP2 : ''
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: dealerContent,
+        children: [(contactData.contactPersonName || contactData.description) && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("h4", {
+            className: dealerName,
+            children: contactData.contactPersonName
+          }), contactData.description && /*#__PURE__*/jsx("p", {
+            className: dealerDescription,
+            children: contactData.description
+          })]
+        }), contactData.info && /*#__PURE__*/jsx("div", {
+          className: infoBlock,
+          children: contactData.info
+        }), /*#__PURE__*/jsxs("div", {
+          className: contactList,
+          children: [(contactData.street || contactData.zipCode || contactData.city) && /*#__PURE__*/jsxs("a", {
+            className: contactItem,
+            href: "https://www.google.com/maps/search/?api=1&query=".concat(encodeURIComponent([contactData.street, contactData.zipCode, contactData.city].filter(Boolean).join(', '))),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: [/*#__PURE__*/jsxs("svg", {
+              className: contactIcon,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: [/*#__PURE__*/jsx("path", {
+                d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"
+              }), /*#__PURE__*/jsx("circle", {
+                cx: "12",
+                cy: "10",
+                r: "3"
+              })]
+            }), /*#__PURE__*/jsxs("div", {
+              children: [contactData.street && /*#__PURE__*/jsx("div", {
+                children: contactData.street
+              }), (contactData.zipCode || contactData.city) && /*#__PURE__*/jsx("div", {
+                children: [contactData.zipCode, contactData.city].filter(Boolean).join(' ')
+              })]
+            })]
+          }), contactData.phone && /*#__PURE__*/jsxs("div", {
+            className: contactItem,
+            children: [/*#__PURE__*/jsx("svg", {
+              className: contactIcon,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: /*#__PURE__*/jsx("path", {
+                d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"
+              })
+            }), /*#__PURE__*/jsx("a", {
+              href: "tel:".concat(contactData.phone.replace(/\s/g, '')),
+              children: contactData.phone
+            })]
+          }), contactData.email && /*#__PURE__*/jsxs("div", {
+            className: contactItem,
+            children: [/*#__PURE__*/jsxs("svg", {
+              className: contactIcon,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: [/*#__PURE__*/jsx("path", {
+                d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
+              }), /*#__PURE__*/jsx("path", {
+                d: "M22 6l-10 7L2 6"
+              })]
+            }), /*#__PURE__*/jsx("a", {
+              href: "mailto:".concat(contactData.email),
+              children: contactData.email
+            })]
+          })]
+        })]
+      })]
+    }), appointmentButton && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsxs("button", {
+        type: "button",
+        className: ctaButton,
+        onClick: handleCtaClick,
+        children: [t('checkout.appointment.preview.cta', 'Persönliche Beratung vereinbaren'), /*#__PURE__*/jsx("svg", {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          children: /*#__PURE__*/jsx("path", {
+            d: "M5 12h14M12 5l7 7-7 7"
+          })
+        })]
+      }), /*#__PURE__*/jsx("p", {
+        className: ctaSubtext,
+        children: t('checkout.appointment.preview.ctaSubtext')
+      })]
+    })]
+  });
+};
+var AppointmentPreview$1 = observer(AppointmentPreview);
+
+export { AppointmentPreview$1 as default };

package/build/esm/index-b2c5a6c2.js

@@ -0,0 +1,33 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-cef0fc63.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 SettingsPaletteGroup = function SettingsPaletteGroup(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/Groups/PaletteGroup"
+  }));
+};
+
+export { SettingsPaletteGroup as default };

package/build/esm/index-b2c9a368.js

@@ -0,0 +1,139 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { u as useViewHandler } from './index-cef0fc63.js';
+import 'react';
+import SettingsHeaderContainer from './index-fe8dadb6.js';
+import SettingsScroller from './index-ec20f3a9.js';
+import { observer } from 'mobx-react-lite';
+import { w as wcConfiguratorSettings, t as tabsHorizontal, e as expanded } from './index.module-3d895179.js';
+import classnames from 'classnames';
+import SettingsSwiper from './index-5eef0dd3.js';
+import SettingsExpanderButtons from './index-b2656687.js';
+import SettingsBottomDrawer from './index-080ab031.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+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';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-a57e8668.js';
+import './index-6cb74bd6.js';
+import './index-456d9b2e.js';
+import 'sift';
+import './index-86cf2cc0.js';
+import './index-eb6559f1.js';
+import './index-b2c5a6c2.js';
+import './index-6bb8df8d.js';
+import './index.module-5f975eb0.js';
+import './index-74b42439.js';
+import './index-3a7cfdde.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-34893fc4.js';
+import 'react-dropdown';
+import './index-8c145e8b.js';
+import './index-131aa3e3.js';
+import './index-5f88bcb2.js';
+import './index-3a7ff0ba.js';
+import '@crystaldesign/content-box';
+import './index-87ffa373.js';
+import './index-e6fa2412.js';
+import './index-94f9d4f2.js';
+import './index-b690d82a.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-def953e7.js';
+import './index-dba581fc.js';
+import './index-58daf67a.js';
+import './index-b2f441d2.js';
+import './index-86fd1d06.js';
+import './index-8bb4ae0b.js';
+import './index-cbafe66e.js';
+import 'react-laag';
+import './index.module-d9cf5ffc.js';
+import './index-22da423f.js';
+import './index-bc3fdbd5.js';
+import './index-43582b48.js';
+import './index-4bed5832.js';
+import './index-ef2203f9.js';
+import './index.module-8e8c1569.js';
+import './index-ac61c3e7.js';
+import './index-69b5bf76.js';
+import './index-421f919a.js';
+import './index-b1cbe76f.js';
+import './index-f11738f1.js';
+import './index-e2e0b8f0.js';
+import './index-67727ab5.js';
+import './index-81c8db56.js';
+import './index-7c00ed5f.js';
+import './index-53da4e61.js';
+import './index-cadb7830.js';
+import './index-dcbe0bcb.js';
+import './index-94240469.js';
+import 'rc-slider';
+import './index-4f89c78e.js';
+import './index-87e494b8.js';
+import './index-b44399a2.js';
+import './index-bf521b3c.js';
+import './index-3d0cb9b9.js';
+import 'react-confetti-explosion';
+import './index-c87114bf.js';
+import './index-16eb8604.js';
+import './index-d5fca0f2.js';
+import 'react-qr-code';
+import './index-14b3d4e7.js';
+import './useCustomDimensions-b68b7933.js';
+import './index-bd52c562.js';
+import './ussIsSticky-947f9763.js';
+import './index-3d0939ae.js';
+import './index-e7e4da5b.js';
+import './index-0146d2e9.js';
+import './index.module-7b3ba9ca.js';
+import './index-ebd8e6ff.js';
+import './index-bcdf9a84.js';
+import './index-3f2681cc.js';
+import './index-b2bfa211.js';
+import './index-24d5095c.js';
+import './index-acbea2af.js';
+import './index-8bd68b59.js';
+import '@mui/material';
+
+var _excluded = ["className", "tabgroupElement"];
+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 Settings = function Settings(_ref) {
+  var _viewHandler$tabGroup, _viewHandler$tabGroup2;
+  var className = _ref.className,
+    tabgroupElement = _ref.tabgroupElement,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var useSwiper = viewHandler.getIsInMobileView() && viewHandler.getViewConfig().navigateMobileSwiper;
+  var settingsContent = /*#__PURE__*/jsx(Fragment, {
+    children: useSwiper ? /*#__PURE__*/jsx(SettingsSwiper, {}) : /*#__PURE__*/jsxs(Fragment, {
+      children: [!viewHandler.uiState.isInMobileView && !viewHandler.settingsState.forceSettingsHeaderInScrollContainer && !viewHandler.wysiwygDebugState.wysiwygInspectView && /*#__PURE__*/jsx(SettingsHeaderContainer, {}, (_viewHandler$tabGroup = (_viewHandler$tabGroup2 = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup2 === void 0 ? void 0 : _viewHandler$tabGroup2.key) !== null && _viewHandler$tabGroup !== void 0 ? _viewHandler$tabGroup : 0), /*#__PURE__*/jsx(SettingsScroller, {}), /*#__PURE__*/jsx(SettingsExpanderButtons, {})]
+    })
+  });
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    id: "wcConfigurator-settings",
+    className: classnames(className, wcConfiguratorSettings, viewHandler.tabGroupState.curTabGroupType == 'horizontal' ? tabsHorizontal : undefined, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined),
+    children: [/*#__PURE__*/jsx(SettingsBottomDrawer, {
+      draggerElement: tabgroupElement,
+      children: settingsContent
+    }), !viewHandler.uiState.isInMobileView && settingsContent]
+  }));
+};
+var Settings$1 = observer(Settings);
+
+export { Settings$1 as default };

package/build/esm/index-b2f441d2.js

@@ -0,0 +1,33 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-cef0fc63.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 SummaryOptionTree = function SummaryOptionTree(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Settings/SettingsScroller/SettingsItem/ItemPalette/Summary/OptionTree"
+  }));
+};
+
+export { SummaryOptionTree as default };

package/build/esm/index-b44399a2.js

@@ -0,0 +1,152 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler, P as PricePreview } from './index-cef0fc63.js';
+import { useState, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import InfoIcon from './index-74b42439.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+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 wrapper = "wrapper-7hUK2";
+var title = "title-cL4D6";
+var boxedContainer = "boxedContainer-4aSLS";
+var boxedOption = "boxedOption-pwmLq";
+var selected = "selected-Vv66m";
+var listContainer = "listContainer-JDin9";
+var listOption = "listOption-g5DeJ";
+var radioCircle = "radioCircle--nW1H";
+var radioInner = "radioInner-b2uFk";
+var label = "label-oLz-i";
+var css_248z = ".wrapper-7hUK2 {\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 24px;\n  width: 100%;\n}\n\n.title-cL4D6 {\n  font-weight: bold;\n  font-size: 16px;\n  margin-bottom: 16px;\n  text-align: left;\n  color: var(--secondaryColor);\n}\n\n/* Boxed Mode */\n.boxedContainer-4aSLS {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.boxedOption-pwmLq {\n  position: relative;\n  border: 1px solid #e0e0e0;\n  border: 1px solid var(--optionItemBorderColor, #e0e0e0);\n  border-radius: var(--globalBorderRadius);\n  padding: 12px 24px;\n  cursor: pointer;\n  flex: 1;\n  min-width: 120px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.2s ease-in-out;\n  background-color: #fff;\n}\n\n.boxedOption-pwmLq.selected-Vv66m {\n  border-color: var(--primaryColor);\n  color: var(--primaryColor);\n}\n\n/* List Mode */\n.listContainer-JDin9 {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.listOption-g5DeJ {\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  gap: 12px;\n}\n\n.radioCircle--nW1H {\n  width: 24px;\n  height: 24px;\n  border: 2px solid #e0e0e0;\n  border: 2px solid var(--optionItemBorderColor, #e0e0e0);\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  transition: border-color 0.2s ease-in-out;\n}\n\n.radioCircle--nW1H.selected-Vv66m {\n  border-color: var(--primaryColor);\n}\n\n.radioInner-b2uFk {\n  width: 12px;\n  height: 12px;\n  background-color: var(--primaryColor);\n  border-radius: 50%;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.radioInner-b2uFk.selected-Vv66m {\n  opacity: 1;\n}\n\n.label-oLz-i {\n  font-size: 16px;\n  color: var(--secondaryColor);\n}\n\n.label-oLz-i.selected-Vv66m {\n  color: var(--primaryColor);\n}\n\n/* Helper to toggle between modes for demo */\n.modeToggle-dxDvl {\n  font-size: 10px;\n  color: #999;\n  cursor: pointer;\n  margin-top: 8px;\n  text-decoration: underline;\n  align-self: flex-start;\n}";
+styleInject(css_248z);
+
+var Radio = function Radio(_ref) {
+  var item = _ref.item,
+    style = _ref.style,
+    paletteId = _ref.paletteId,
+    initialDisplayMode = _ref.displayMode,
+    hidePricePreview = _ref.hidePricePreview;
+  var viewHandler = useViewHandler();
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    curIndex = _useState4[0],
+    setCurIndex = _useState4[1];
+  var _useState5 = useState(initialDisplayMode || 'boxed'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    mode = _useState6[0];
+    _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    allEndWithCM = _useState8[0],
+    setAllEndWithCM = _useState8[1];
+  useEffect(function () {
+    var itemList = item.groups.flatMap(function (group) {
+      return group.items;
+    });
+    var endsWithCM = itemList.every(function (i) {
+      return i.text.endsWith('cm');
+    });
+    setItems(itemList);
+    setAllEndWithCM(endsWithCM);
+    setCurIndex(itemList.findIndex(function (i) {
+      return i.sel;
+    }));
+  }, [item]);
+  var onChangeValue = function onChangeValue(index) {
+    setCurIndex(index);
+    var selectedItem = items[index];
+    if (selectedItem) {
+      viewHandler.paletteViewHandler.clickedOnConfigPalette(selectedItem, undefined, paletteId);
+    }
+  };
+  if (items.length === 0) return /*#__PURE__*/jsx(Fragment, {});
+  var getLabelText = function getLabelText(opt) {
+    return allEndWithCM ? opt.text.replace('cm', '') : opt.text;
+  };
+  var renderBoxed = function renderBoxed() {
+    return /*#__PURE__*/jsx("div", {
+      className: boxedContainer,
+      children: items.map(function (opt, index) {
+        return /*#__PURE__*/jsxs("div", {
+          className: classnames(boxedOption, curIndex === index && selected),
+          onClick: function onClick() {
+            return onChangeValue(index);
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            dangerouslySetInnerHTML: {
+              __html: getLabelText(opt)
+            }
+          }), opt.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+            item: opt
+          }, opt.codex), !hidePricePreview && opt.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+            asyncPricePreview: opt.pricePreviewPromise,
+            sel: opt.sel
+          })]
+        }, index);
+      })
+    });
+  };
+  var renderList = function renderList() {
+    return /*#__PURE__*/jsx("div", {
+      className: listContainer,
+      children: items.map(function (opt, index) {
+        return /*#__PURE__*/jsxs("div", {
+          className: listOption,
+          onClick: function onClick() {
+            return onChangeValue(index);
+          },
+          children: [/*#__PURE__*/jsx("div", {
+            className: classnames(radioCircle, curIndex === index && selected),
+            children: /*#__PURE__*/jsx("div", {
+              className: classnames(radioInner, curIndex === index && selected)
+            })
+          }), /*#__PURE__*/jsx("div", {
+            className: classnames(label, curIndex === index && selected),
+            dangerouslySetInnerHTML: {
+              __html: getLabelText(opt)
+            }
+          }), opt.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+            item: opt
+          }, opt.codex), !hidePricePreview && opt.pricePreviewPromise !== undefined && /*#__PURE__*/jsx(PricePreview, {
+            asyncPricePreview: opt.pricePreviewPromise,
+            sel: opt.sel
+          })]
+        }, index);
+      })
+    });
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: wrapper,
+    ref: function ref(_ref2) {
+      return item.htmlRef = _ref2;
+    },
+    style: style,
+    children: [/*#__PURE__*/jsx("div", {
+      className: title,
+      children: item.name + (allEndWithCM ? ' (cm)' : '')
+    }), mode === 'boxed' ? renderBoxed() : renderList()]
+  });
+};
+var Radio$1 = observer(Radio);
+
+export { Radio$1 as default };