@crystaldesign/diva-web-planner-react 26.7.0-rc.9 → 26.7.1-rc.0

package/build/esm/index-dade0892.js

@@ -1,186 +0,0 @@
-import { s as styleInject, u as useViewHandler, _ as _onClickCheckout } from './index-2a04e43a.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-dccf9b4f.js

@@ -1,165 +0,0 @@
-import { s as styleInject, u as useViewHandler, b as PriceCounter } from './index-2a04e43a.js';
-import classnames from 'classnames';
-import { observer } from 'mobx-react-lite';
-import 'react';
-import { getLogger, useTranslation, useDivaCore } from '@crystaldesign/diva-core';
-import Functions from './index-59beaa17.js';
-import { ContentBoxComponent } from '@crystaldesign/content-box';
-import { u as useCustomDimensions } from './useCustomDimensions-dd45806d.js';
-import { ContentItemComponent } from '@crystaldesign/content-item';
-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 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import 'react-switch';
-import 'react-countup';
-import './index-692d1d75.js';
-
-var wrapper = "wrapper-y4VmL";
-var wcConfiguratorProductHeader = "wcConfiguratorProductHeader-W1oWZ";
-var expanded = "expanded-rNRc-";
-var functionWrapper = "functionWrapper-3sgkI";
-var portrait = "portrait-Otsjq";
-var landscape = "landscape-TuCY-";
-var contentBoxWrapper = "content-box-wrapper-KgSZb";
-var maxExpanded = "max-Expanded-4m94C";
-var textbackground = "textbackground-F3b8W";
-var wcPriceinfoContainer = "wcPriceinfoContainer-bH9C-";
-var wcFormattedPrice = "wc-formatted-price--PHbM";
-var wcFormattedBruttoPrice = "wc-formatted-brutto-price-MDFl1";
-var dimensions = "dimensions-wxroF";
-var rabattVisible = "rabatt-visible-vvkfB";
-var tablet = "tablet-n1n5E";
-var fullscreen = "fullscreen-94axf";
-var sideMenuButton = "side-menu-button-NA9Lt";
-var css_248z = "/* Productdaten */\n\n.wrapper-y4VmL {\n  display: flex;\n  flex-direction: row;\n  height: 70px;\n  z-index: 112;\n  transition:\n    width 0.2s ease-in-out,\n    opacity 0.5s ease-in-out;\n  opacity: 1;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n.wcConfiguratorProductHeader-W1oWZ {\n  flex-basis: 50%;\n  justify-self: flex-start;\n  z-index: 300;\n  margin: 8px 0 0px 8px;\n  pointer-events: none;\n}\n\n.expanded-rNRc- .wcConfiguratorProductHeader-W1oWZ {\n  flex-basis: 100%;\n}\n.functionWrapper-3sgkI {\n  flex-basis: 50%;\n}\n\n.functionWrapper-3sgkI {\n  flex-basis: 100%;\n  position: relative;\n  z-index: 112;\n  margin: 16px;\n}\n.portrait-Otsjq .functionWrapper-3sgkI {\n  margin: 6px 12px;\n}\n\n.landscape-TuCY- .functionWrapper-3sgkI {\n  margin: 8px 12px 0px 0px;\n}\n\n.content-box-wrapper-KgSZb {\n  z-index: 112;\n}\n\n.expanded-rNRc-.wrapper-y4VmL {\n  width: calc(55% - 40px - 24px);\n}\n\n.max-Expanded-4m94C.wrapper-y4VmL,\n.settings-Foldedup-HM7JT.wrapper-y4VmL {\n  opacity: 0;\n}\n\n.wrapper-y4VmL h1 {\n  font-weight: 300;\n  font-size: 24px;\n  line-height: 27.2px;\n  letter-spacing: 0.2px;\n  color: var(--secondaryColor);\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  white-space: nowrap;\n}\n.textbackground-F3b8W {\n  border-radius: 0px 0px 12px 0px;\n  padding: 0px 12px 6px 8px;\n  position: absolute;\n  width: -moz-fit-content;\n  width: fit-content;\n  white-space: nowrap;\n  left: 0px;\n}\n\n.portrait-Otsjq .textbackground-F3b8W {\n  background-color: transparent;\n}\n\n.expanded-rNRc-.wrapper-y4VmL h1 {\n  max-width: 300px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.wcPriceinfoContainer-bH9C- {\n  display: flex;\n  flex-direction: column;\n}\n\n.wcPriceinfo-Zmaer {\n  color: var(--secondaryColor);\n  font-size: 14px;\n  font-size: var(--priceInfoFontSize, 14px);\n\n  -webkit-text-stroke: 0.4px;\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.wrapper-y4VmL h1,\n.wc-formatted-price--PHbM,\n.wc-formatted-brutto-price-MDFl1,\n.dimensions-wxroF {\n  margin: 0px;\n  background-color: rgba(255, 255, 255, 0.5);\n  border-radius: 4px;\n  padding: 2px 4px;\n  width: -moz-fit-content;\n  width: fit-content;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.wc-formatted-price--PHbM {\n  color: var(--secondaryColor);\n  font-size: 16px;\n  font-size: var(--priceInfoFontSize, 16px);\n  -webkit-text-stroke: 0.4px;\n  font-weight: 700;\n  transition: color 0.3s ease-in-out;\n}\n.rabatt-visible-vvkfB .wc-formatted-price--PHbM {\n  color: rgb(220, 38, 38);\n}\n\n.wc-formatted-brutto-price-MDFl1 {\n  color: rgb(113, 113, 122);\n  font-size: 14px;\n  -webkit-text-stroke: 0.4px;\n  text-decoration: line-through;\n  height: 0px;\n  overflow: hidden;\n  opacity: 0;\n  transition:\n    height 0.3s ease-in-out,\n    opacity 0.3s ease-in-out;\n}\n\n.rabatt-visible-vvkfB .wc-formatted-brutto-price-MDFl1 {\n  height: 12px;\n  opacity: 1;\n}\n\n.dimensions-wxroF {\n  font-size: 16px;\n  color: var(--secondaryColor);\n  font-weight: 300;\n}\n\n.tablet-n1n5E .dimensions-wxroF {\n  font-size: 14px;\n}\n\n.portrait-Otsjq:not(.tablet-n1n5E) .dimensions-wxroF {\n  font-size: 12px;\n}\n\n.landscape-TuCY-.wrapper-y4VmL {\n  margin-left: 2rem;\n  width: calc(100% - 1rem);\n  height: 54.4px;\n}\n\n.fullscreen-94axf.landscape-TuCY-.wrapper-y4VmL {\n  left: 50px;\n  top: 0px;\n  margin-left: 0.5rem;\n  margin-top: 4px;\n  width: calc(100% - 1rem);\n  height: 24.4px;\n}\n\n.landscape-TuCY- h1 {\n  margin-top: 14px;\n  font-size: 22px;\n  line-height: 18px;\n  width: 67%;\n}\n\n.landscape-TuCY- .wcPriceinfo-Zmaer {\n  font-size: 14px;\n}\n\n.portrait-Otsjq .wc-formatted-price--PHbM {\n  font-size: 14px;\n}\n\n.portrait-Otsjq .wc-formatted-brutto-price-MDFl1 {\n  font-size: 11px;\n}\n\n.landscape-TuCY- .wc-formatted-price--PHbM {\n  font-size: 15px;\n}\n\n.portrait-Otsjq .wrapper-y4VmL {\n  height: 54.4px;\n  width: calc(100% - 4px);\n}\n\n.portrait-Otsjq h1 {\n  font-size: 15px;\n  line-height: 16px;\n}\n\n.tablet-n1n5E .wc-formatted-price--PHbM {\n  font-size: 16px;\n}\n\n.tablet-n1n5E .wc-formatted-brutto-price-MDFl1 {\n  font-size: 14px;\n}\n\n.tablet-n1n5E .wcPriceinfo-Zmaer {\n  font-size: 16px;\n}\n\n.tablet-n1n5E h1 {\n  font-size: 20px;\n  line-height: 22px;\n}\n\n.side-menu-button-NA9Lt {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z%22 fill%3D%22%234F4F4F%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6Z%22 fill%3D%22%234F4F4F%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M2 18C2 17.4477 2.44772 17 3 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18Z%22 fill%3D%22%234F4F4F%22%2F%3E%3C%2Fsvg%3E\");\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n  transition: background-color 0.3s ease;\n  z-index: 1000;\n  margin: 10px 12px;\n  aspect-ratio: 1 / 1;\n}\n\n.tablet-n1n5E .side-menu-button-NA9Lt {\n  width: 22px;\n  height: 22px;\n}\n";
-styleInject(css_248z);
-
-var LOG = getLogger('Planner', 'InfoBox');
-var ProductHeader = function ProductHeader(_ref) {
-  var _viewHandler$productS, _viewHandler$productS2, _bbox$X, _bbox$X2, _bbox$Y, _bbox$Z, _bbox$wOLT, _bbox$dOLT, _bbox$hOLT;
-  var hidePrice = _ref.hidePrice,
-    productClass = _ref.productClass;
-  var viewHandler = useViewHandler();
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var bbox = viewHandler.settingsState.bbox;
-  var _useDivaCore = useDivaCore(),
-    _useDivaCore$state = _useDivaCore.state,
-    hidePrices = _useDivaCore$state.hidePrices,
-    isMobile = _useDivaCore$state.dimensions.isMobile,
-    _useDivaCore$state$na = _useDivaCore$state.navigationConfiguration,
-    enableMobile = _useDivaCore$state$na.enableMobile,
-    hideHeader = _useDivaCore$state$na.hideHeader,
-    openSideMenu = _useDivaCore.actions.openSideMenu;
-  var showMobileNavButton = isMobile && enableMobile && !hideHeader;
-  var headerContentBoxProps = viewHandler.getViewConfig().productHeaderContentBox;
-  var _useCustomDimensions = useCustomDimensions(),
-    dimensions$1 = _useCustomDimensions.dimensions,
-    dimOnlyForOneArticle = _useCustomDimensions.dimOnlyForOneArticle;
-  var hideWebConfiguratorTitle = viewHandler.getViewConfig().hideWebConfiguratorTitle || viewHandler.getViewConfig().hideWebConfiguratorTitleInMobile && viewHandler.getIsInMobileView();
-  var showRabatt = viewHandler.productState.formatedBruttoPrice !== undefined && !viewHandler.getViewConfig().hideRabattPrice;
-  var showMainDimensions = viewHandler.productState.doShow3DDimensionLines || viewHandler.productState.doShowGrid || viewHandler.productState.doShowMainDimensions && !isMobile;
-  return /*#__PURE__*/jsxs("div", {
-    className: classnames(wrapper, productClass, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isTablet ? tablet : undefined, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? maxExpanded : undefined, showRabatt ? rabattVisible : undefined, fullscreen),
-    children: [showMobileNavButton && /*#__PURE__*/jsx("div", {
-      id: "side-menu-button",
-      className: sideMenuButton,
-      onClick: function onClick() {
-        return openSideMenu();
-      }
-    }), /*#__PURE__*/jsxs("div", {
-      className: wcConfiguratorProductHeader,
-      "data-test-id": "configProductHeader",
-      children: [!hideWebConfiguratorTitle && /*#__PURE__*/jsx("h1", {
-        "data-test-id": "productHeaderTitle",
-        children: viewHandler.productState.webConifguratorTitle
-      }), /*#__PURE__*/jsxs("div", {
-        className: textbackground,
-        children: [!hidePrices && !hidePrice && /*#__PURE__*/jsxs("div", {
-          className: wcPriceinfoContainer,
-          children: [/*#__PURE__*/jsx("span", {
-            className: classnames(wcFormattedBruttoPrice),
-            "data-test-id": "productHeaderFormattedBruttoPrice",
-            children: /*#__PURE__*/jsx(PriceCounter, {
-              price: (_viewHandler$productS = viewHandler.productState.formatedBruttoPrice) !== null && _viewHandler$productS !== void 0 ? _viewHandler$productS : 0
-            })
-          }), /*#__PURE__*/jsx("span", {
-            className: wcFormattedPrice,
-            "data-test-id": "productHeaderFormattedPrice",
-            children: /*#__PURE__*/jsx(PriceCounter, {
-              price: (_viewHandler$productS2 = viewHandler.productState.formatedCurSetPrice) !== null && _viewHandler$productS2 !== void 0 ? _viewHandler$productS2 : 0
-            })
-          })]
-        }), showMainDimensions && /*#__PURE__*/jsxs(Fragment, {
-          children: [((_bbox$X = bbox === null || bbox === void 0 ? void 0 : bbox.X) !== null && _bbox$X !== void 0 ? _bbox$X : 0) > 0 && /*#__PURE__*/jsxs("div", {
-            className: dimensions,
-            children: [/*#__PURE__*/jsxs("span", {
-              children: [t('configurator.bth_short'), ": "]
-            }), /*#__PURE__*/jsxs("span", {
-              children: [(_bbox$X2 = bbox === null || bbox === void 0 ? void 0 : bbox.X) !== null && _bbox$X2 !== void 0 ? _bbox$X2 : -1, " \xD7 ", (_bbox$Y = bbox === null || bbox === void 0 ? void 0 : bbox.Y) !== null && _bbox$Y !== void 0 ? _bbox$Y : -1, " \xD7 ", (_bbox$Z = bbox === null || bbox === void 0 ? void 0 : bbox.Z) !== null && _bbox$Z !== void 0 ? _bbox$Z : -1, " cm"]
-            })]
-          }), (bbox === null || bbox === void 0 ? void 0 : bbox.wOLT) !== undefined && /*#__PURE__*/jsxs("div", {
-            className: dimensions,
-            children: [/*#__PURE__*/jsxs("span", {
-              children: [t('configurator.without_olf'), ": "]
-            }), /*#__PURE__*/jsxs("span", {
-              children: [(_bbox$wOLT = bbox === null || bbox === void 0 ? void 0 : bbox.wOLT) !== null && _bbox$wOLT !== void 0 ? _bbox$wOLT : -1, " \xD7 ", (_bbox$dOLT = bbox === null || bbox === void 0 ? void 0 : bbox.dOLT) !== null && _bbox$dOLT !== void 0 ? _bbox$dOLT : -1, " \xD7 ", (_bbox$hOLT = bbox === null || bbox === void 0 ? void 0 : bbox.hOLT) !== null && _bbox$hOLT !== void 0 ? _bbox$hOLT : -1, " cm"]
-            })]
-          })]
-        }), (showMainDimensions || !isMobile) && !!(dimensions$1 !== null && dimensions$1 !== void 0 && dimensions$1.length) && dimensions$1.map(function (dimension) {
-          var _dimension$text, _dimension$dimension;
-          return /*#__PURE__*/jsxs("div", {
-            className: dimensions,
-            children: [/*#__PURE__*/jsxs("span", {
-              children: [(_dimension$text = dimension.text) !== null && _dimension$text !== void 0 ? _dimension$text : t('configurator.headerdimension.' + dimension.dimensionId), !dimOnlyForOneArticle && ' (' + dimension.posNrs.join(',') + ')', ":", ' ']
-            }), /*#__PURE__*/jsxs("span", {
-              children: [(_dimension$dimension = dimension.dimension) !== null && _dimension$dimension !== void 0 ? _dimension$dimension : 0, " ", dimension.unit]
-            })]
-          });
-        })]
-      })]
-    }), /*#__PURE__*/jsx("div", {
-      className: functionWrapper,
-      children: /*#__PURE__*/jsx(Functions, {})
-    }), !viewHandler.uiState.isInMobileView && viewHandler.productState.currentBanner && /*#__PURE__*/jsx("div", {
-      className: contentBoxWrapper,
-      children: /*#__PURE__*/jsx(ContentItemComponent, {
-        contentItemId: viewHandler.productState.currentBanner.contentItemId,
-        wrapperStyle: {
-          display: 'flex',
-          flexDirection: 'column',
-          maxHeight: 'inherit'
-        },
-        onContentItemLoaded: function onContentItemLoaded(title) {
-          LOG.businessEvent('onLoadInfoBox', 'InfoBox', 'Lade Infobox', {
-            id: viewHandler.productState.currentBanner.contentItemId,
-            title: title
-          });
-        }
-      })
-    }), headerContentBoxProps && !viewHandler.uiState.isInMobileView && !viewHandler.productState.currentBanner && /*#__PURE__*/jsx("div", {
-      className: contentBoxWrapper,
-      children: /*#__PURE__*/jsx(ContentBoxComponent, {
-        settings: {
-          contentBoxProps: headerContentBoxProps
-        }
-      })
-    })]
-  });
-};
-var ProductHeader$1 = observer(ProductHeader);
-
-export { ProductHeader$1 as default };

package/build/esm/index-dfc650f1.js

@@ -1,224 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-2a04e43a.js';
-import classnames from 'classnames';
-import { useEffect } from 'react';
-import Inputbox from './index-5fc73ede.js';
-import Product from './index-17f3b439.js';
-import Settings from './index-b47735eb.js';
-import NavigationButtons from './index-2e4a1787.js';
-import ActionBasket from './index-7a264813.js';
-import TabGroup from './index-6ba635a1.js';
-import { observer } from 'mobx-react-lite';
-import BasketMobile from './index-31780cc0.js';
-import { useDivaCore } from '@crystaldesign/diva-core';
-import ProgressBar from './index-04250e75.js';
-import { jsxs, Fragment, jsx } 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';
-import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-04cb90f4.js';
-import './index-ce21481e.js';
-import './index-bae88b30.js';
-import './index-d86f8621.js';
-import './index-48efc6ff.js';
-import 'sift';
-import './index-1fa73fb8.js';
-import './index-2d2d2431.js';
-import './index-4fc3796a.js';
-import './index-e11d0c6e.js';
-import './index.module-e403d21f.js';
-import './index-f5d4f1c5.js';
-import './index-f6870a49.js';
-import '@mui/icons-material/Block';
-import '@mui/icons-material/Warning';
-import './index-7536d002.js';
-import 'react-dropdown';
-import './index-d2a91e70.js';
-import './index-17cc643d.js';
-import './index-ed03d390.js';
-import './index-346f109f.js';
-import '@crystaldesign/content-box';
-import './index-f9a110fe.js';
-import './index-f281fab5.js';
-import './index-af530b8e.js';
-import './index-9cf0f255.js';
-import 'swiper/react';
-import 'swiper/modules';
-import './UnlockCard-561cb8bc.js';
-import './index-622d2f18.js';
-import './index-d36bc5e4.js';
-import './index-5cfd2f4f.js';
-import './index-f6c9850b.js';
-import './index-55105a3e.js';
-import './index-152c53e6.js';
-import 'react-laag';
-import './index.module-c4a06a9f.js';
-import './index-a3c77564.js';
-import './index-81938dc2.js';
-import './index-7974fc02.js';
-import './index-2ca021f4.js';
-import './index-d7cdb94e.js';
-import './index.module-2c07ccb5.js';
-import './index-b8c241a3.js';
-import './index-a422385b.js';
-import './index-19c1368a.js';
-import './index-4953f1f6.js';
-import './index-4b230f94.js';
-import './index-ef005904.js';
-import './index-f8dbc204.js';
-import './index-38d7a702.js';
-import './index-eb0f660b.js';
-import './index-a4767a74.js';
-import './index-7f9b794d.js';
-import './index-03f86982.js';
-import './index-9e44e103.js';
-import 'rc-slider';
-import './index-a52fd6a3.js';
-import './index-64a7e78e.js';
-import './index-04847887.js';
-import './index-72a54d79.js';
-import './index-5279fb47.js';
-import 'react-confetti-explosion';
-import './index-8abbaf37.js';
-import './index-5a195e83.js';
-import './index-3627081b.js';
-import 'react-qr-code';
-import './index-701c1cca.js';
-import './useCustomDimensions-dd45806d.js';
-import './index-5a39a0b2.js';
-import './ussIsSticky-287a90a0.js';
-import './index-015ad3bc.js';
-import './index-a63be589.js';
-import './index-4e3e77ad.js';
-import './index.module-cca52a67.js';
-import './index-ba342957.js';
-import './index-4529202e.js';
-import './index-bb3c4c85.js';
-import './index-dade0892.js';
-import './index-2e67f9a9.js';
-import './index-52ac045b.js';
-import './index.module-654ad05a.js';
-import './index-6787e36a.js';
-import './index-71f719fc.js';
-import './index-fb82924a.js';
-import './index-1a8851e9.js';
-import '@mui/material';
-import './index-11140301.js';
-import './index-e27225ae.js';
-import './index-d0e2c9b3.js';
-import './index-08cd06cd.js';
-import './index-7684da9a.js';
-import './index-a2f67704.js';
-
-var wcConfigurator = "wcConfigurator-8WNGD";
-var landscape = "landscape-fycCb";
-var portrait = "portrait-mcAF6";
-var wcConfiguratorProduct = "wcConfigurator-product-RWY1l";
-var wcConfiguratorSettings = "wcConfigurator-settings-St4gK";
-var wcConfiguratorSteps = "wcConfigurator-steps-fRfjC";
-var wcConfiguratorSettingsActions = "wcConfigurator-settings-actions--47XW";
-var wcConfiguratorAction = "wcConfigurator-action-9vcgt";
-var expanded = "expanded-tbaDC";
-var mobileActionAfterTabgroups = "mobile-action-after-tabgroups-6Fs5C";
-var mobileSettingsWrapper = "mobile-settings-wrapper-JxzDy";
-var css_248z = ".wcConfigurator-8WNGD {\n  position: relative;\n  height: calc(100% - 60px);\n  width: 100%;\n  margin: 30px 0;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 300;\n  letter-spacing: 0.5px;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke: 0.1px;\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  overscroll-behavior-y: contain;\n  background-color: var(--configuratorBackgroundColor);\n}\n\n.wcConfigurator-8WNGD *,\n.wcConfigurator-8WNGD *::before,\n.wcConfigurator-8WNGD *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wcConfigurator-8WNGD.landscape-fycCb {\n  height: 100%;\n  width: 100%;\n  margin: 0;\n}\n\n.wcConfigurator-8WNGD.portrait-mcAF6 {\n  height: 100%;\n  width: 100%;\n  margin: 0;\n}\n\n/******************************************Product*******************************************/\n\n.wcConfigurator-product-RWY1l {\n  position: absolute;\n  width: 69%;\n  top: calc(56px + 20px);\n  height: calc(100% - 56px - 20px);\n}\n\n/**************************************ConfigPalette***************************************/\n.wcConfigurator-settings-St4gK {\n  position: absolute;\n  width: 31%;\n  overflow: visible;\n  z-index: 600;\n  right: 0px;\n  top: calc(56px + 20px);\n  height: calc(100% - 60px - 56px - 70px - 40px);\n  transition: width 0.2s ease-in-out;\n}\n\n/**************************************TabGroup********************************************/\n\n.wcConfigurator-steps-fRfjC {\n  position: absolute;\n  z-index: 600;\n  height: 56px;\n  width: 100%;\n  transition: width 0.2s ease-in-out;\n}\n\n/************************************Navigaton Buttons*************************************/\n\n.wcConfigurator-settings-actions--47XW {\n  position: absolute;\n  width: calc(31% - var(--settingsScrollerPaddingRight) - var(--settingsScrollerPaddingLeft));\n  height: 80px;\n  right: 0px;\n  bottom: calc(40px + 20px);\n  padding-top: 10px;\n  z-index: 600;\n  transition: width 0.2s ease-in-out;\n  padding-right: var(--settingsScrollerPaddingRight);\n  padding-left: var(--settingsScrollerPaddingLeft);\n  background-color: var(--settingsBackgroundColor);\n}\n\n/*************************************Basket Button****************************************/\n.wcConfigurator-action-9vcgt {\n  position: absolute;\n  width: calc(31% - var(--settingsScrollerPaddingRight) - var(--settingsScrollerPaddingLeft));\n  height: 40px;\n  right: 0px;\n  bottom: 0px;\n  padding-top: 20px;\n  z-index: 600;\n  transition: width 0.2s ease-in-out;\n  font-weight: 700;\n  padding-right: var(--settingsScrollerPaddingRight);\n  padding-left: var(--settingsScrollerPaddingLeft);\n}\n\n/****************************************Settings- Expanded *******************************/\n.expanded-tbaDC .wcConfigurator-settings-St4gK {\n  width: 62%;\n}\n\n.expanded-tbaDC .wcConfigurator-action-9vcgt,\n.expanded-tbaDC .wcConfigurator-settings-actions--47XW {\n  width: calc(62% - var(--settingsScrollerPaddingRight) - var(--settingsScrollerPaddingLeft));\n}\n\n.wcConfigurator-8WNGD.portrait-mcAF6,\n.landscape-fycCb.wcConfigurator-8WNGD {\n  padding: 0;\n  padding: initial;\n  overflow: hidden;\n} /*********************************************************************Mobile Landscape***********************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Landscape ****************************/\n.landscape-fycCb .wcConfigurator-product-RWY1l {\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n  max-width: none;\n  max-width: initial;\n}\n\n/*************************ConfigPalette -- Mobile Landscape ***************************/\n\n.landscape-fycCb .wcConfigurator-settings-St4gK {\n  display: none;\n}\n\n/*****************************TabGroup -- Mobile Landscape ****************************/\n\n.landscape-fycCb .wcConfigurator-steps-fRfjC {\n  display: none;\n}\n\n/******************Navigaton Buttons -- Mobile Landscape ******************************/\n.landscape-fycCb .wcConfigurator-settings-actions--47XW {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Landscape*********************************/\n.landscape-fycCb .wcConfigurator-action-9vcgt {\n  display: none;\n}\n\n/*********************************************************************Mobile Portrait************************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Portrait *****************************/\n.portrait-mcAF6 .wcConfigurator-product-RWY1l {\n  top: 0px;\n  left: 0px;\n  height: var(--configuratorProductHeight);\n  transition: height 0.2s ease-out;\n  width: 100%;\n  max-width: none;\n  max-width: initial;\n}\n\n/*************************ConfigPalette -- Mobile Portrait ****************************/\n\n.portrait-mcAF6 .wcConfigurator-settings-St4gK {\n  left: 0px;\n  top: auto;\n  top: initial;\n  transition: height 0.2s ease-out;\n  bottom: 0px;\n  width: 100%;\n  z-index: 1000;\n}\n\n/*****************************TabGroup -- Mobile Portrait *****************************/\n\n.portrait-mcAF6 .wcConfigurator-steps-fRfjC {\n  position: relative;\n  right: auto;\n  right: initial;\n  top: auto;\n  top: initial;\n  transition: none 0s ease 0s;\n  transition: initial;\n  flex-grow: 10;\n  height: var(--configuratorTabGroupHeight);\n  width: 100%;\n}\n\n/******************Navigaton Buttons -- Mobile Portrait *******************************/\n\n.portrait-mcAF6 .wcConfigurator-settings-actions--47XW {\n  display: none;\n  bottom: 0px;\n  width: calc(100% - 10px);\n\n  height: calc(var(--configuratorActionHeight) - 5px);\n  margin: 0 5px 5px 5px;\n  padding-top: 0px;\n  right: 0px;\n}\n\n/*********************Basket Button-- Mobile Portrait *********************************/\n\n.portrait-mcAF6 .wcConfigurator-action-9vcgt,\n.portrait-mcAF6.settings-hidden-dySS8 .wcConfigurator-action-9vcgt {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Portrait onTop *********************************/\n\n.mobile-action-after-tabgroups-6Fs5C {\n  position: relative;\n  transition: bottom 0.2s ease-out;\n  width: 50px;\n  height: var(--configuratorTabGroupHeight);\n  background: no-repeat 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\") center center var(--primaryColor);\n  background-size: 37%;\n  z-index: 300;\n}\n\n.mobile-settings-wrapper-JxzDy {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.landscape-fycCb,\n.portrait-mcAF6 {\n  --configuratorActionHeight: 50px;\n  --configuratorTabGroupHeight: 38px;\n}\n\n.tablet-cNnDV {\n  --configuratorTabGroupHeight: 50px;\n  --mobile-tabgroup-drawer-border-radius: 16px;\n}\n\n::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n::-webkit-scrollbar-track {\n  background: #dfdfdf;\n  border-radius: 3px;\n}\n::-webkit-scrollbar-thumb {\n  background: #b1b1b1;\n  border-radius: 3px;\n}\n";
-styleInject(css_248z);
-
-var Ralph = function Ralph(props) {
-  var viewHandler = useViewHandler();
-  useEffect(function () {
-    viewHandler.layoutRendered = true;
-    viewHandler.initCSSVariablesObj(cssVariables);
-  }, []);
-  var _useDivaCore = useDivaCore(),
-    isFullscreenComponent = _useDivaCore.state.isFullscreenComponent;
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx("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.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined),
-      children: /*#__PURE__*/jsxs("div", {
-        id: "wcConfigurator-wrapper",
-        ref: function ref(wrapperRef) {
-          return viewHandler.uiState.setWrapperRef(wrapperRef);
-        },
-        className: mobileSettingsWrapper,
-        children: [/*#__PURE__*/jsx(Product, {
-          className: wcConfiguratorProduct
-        }), viewHandler.uiState.isInMobileView ? /*#__PURE__*/jsx(Settings, {
-          tabgroupElement: /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx(TabGroup, {
-              className: wcConfiguratorSteps,
-              showCloseButtonInMobile: isFullscreenComponent ? 'left' : undefined
-            }), /*#__PURE__*/jsx(BasketMobile, {
-              className: mobileActionAfterTabgroups
-            }), /*#__PURE__*/jsx(ProgressBar, {})]
-          })
-        }) : /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx(TabGroup, {
-            className: wcConfiguratorSteps,
-            showCloseButtonInMobile: 'right'
-          }), /*#__PURE__*/jsx(Settings, {
-            className: wcConfiguratorSettings
-          }), /*#__PURE__*/jsx(NavigationButtons, {
-            className: wcConfiguratorSettingsActions,
-            showCheckoutButtons: viewHandler.uiState.isMobilePortrait
-          }), /*#__PURE__*/jsx(ActionBasket, {
-            containerClassName: wcConfiguratorAction,
-            showCheckoutButtons: true
-          })]
-        }), ")"]
-      })
-    }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
-  });
-};
-var cssVariables = {
-  '--primaryColor': '#a81e1e',
-  '--secondaryColor': '#4a4a4a',
-  '--thirdColor': '#f3f3f3',
-  '--settingsBackgroundColor': 'rgba(248, 248, 248, 0.95)',
-  '--tabGroupBackground': 'rgba(248, 248, 248, 0.95)',
-  '--articlePosNrRadius': '3px',
-  '--articlePosNrSize': '20.8px',
-  '--galleryItemRadius': '3px',
-  '--galleryItemRowCount': '4',
-  '--galleryItemMargin': '1%',
-  '--galleryItemRowCountSmall': '3',
-  '--galleryItemMarginSmall': '0.5%',
-  '--galleryItemBorderColor': '#e8e9ed83',
-  '--galleryItemBorderSelColor': 'var(--secondaryColor)',
-  '--galleryItemBorder': '1px',
-  '--settingsScrollerPaddingTopBottom': '0px',
-  '--settingsScrollerPaddingRight': '10px',
-  '--settingsScrollerPaddingLeft': '10px',
-  '--configuratorActionHeight': '40px',
-  '--fontWeight1': '600',
-  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
-  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0 , 0.3)',
-  '--globalBorderRadius': '3px',
-  '--mobile-tabgroup-drawer-border-radius': '12px',
-  '--buttons-border-radius': '8px'
-};
-var index = observer(Ralph);
-
-export { index as default };