@crystaldesign/diva-web-planner-react 26.13.0-beta.33 → 26.13.0-beta.35

package/build/esm/index-826cd06e.js

@@ -1,63 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { u as useViewHandler, _ as _onClickCheckout, I as Icon } from './index-069dfa13.js';
-import 'react';
-import { useTranslation } from '@crystaldesign/diva-core';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import 'react-dynamic-multi-render';
-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/web-planner-logic';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-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 BasketMobile = function BasketMobile(_ref) {
-  var _viewHandler$uiState$;
-  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
-  var viewHandler = useViewHandler();
-  var addToBasketButton = (_viewHandler$uiState$ = viewHandler.uiState.checkoutConfig) === null || _viewHandler$uiState$ === void 0 ? void 0 : _viewHandler$uiState$.buttons.find(function (b) {
-    return b.type === 'ADD_TO_BASKET';
-  });
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/jsx(Fragment, {
-    children: addToBasketButton ? /*#__PURE__*/jsx("div", {
-      onClick: function onClick() {
-        return _onClickCheckout(addToBasketButton, viewHandler, addToBasketButton.index, t);
-      },
-      className: props.className,
-      style: {
-        backgroundImage: 'unset',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
-      children: /*#__PURE__*/jsx(Icon, {
-        checkoutButton: _objectSpread({
-          isPrimary: true
-        }, addToBasketButton),
-        size: 32
-      })
-    }) : /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
-      onClick: function onClick() {
-        return viewHandler.actionButtonState.onClickAddToBasket(viewHandler);
-      }
-    }))
-  });
-};
-
-export { BasketMobile as default };

package/build/esm/index-843252a6.js

@@ -1,87 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-069dfa13.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/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/web-planner-logic';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import 'react-switch';
-import 'react-countup';
-
-var optionTitleWrapper = "option-title-wrapper-nelTh";
-var optionTitle = "option-title-b23DF";
-var defined = "defined-9MId3";
-var current = "current-XPc15";
-var optionValue = "option-value-0dXL2";
-var suggested = "suggested-cnTpG";
-var required = "required-JhxVe";
-var disabled = "disabled-YODb1";
-var css_248z = ".option-title-wrapper-nelTh {\n  color: #fff;\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  padding: 8px 24px;\n  cursor: pointer;\n  transition: background-color ease 0.3s;\n  border-right: #5b798b 8px solid;\n  flex-wrap: wrap;\n  overflow: hidden;\n}\n\n.option-title-wrapper-nelTh:hover {\n  background-color: #4b6e84;\n}\n\n.option-title-b23DF {\n  font-weight: 600;\n}\n.defined-9MId3 {\n  border-right: #53ac00 8px solid;\n  background-color: #0d3040;\n}\n\n.defined-9MId3:hover {\n  background-color: #134054;\n}\n.current-XPc15 {\n  border-right: #edff2a 8px solid;\n  background-color: #1e455b;\n}\n.option-value-0dXL2 {\n  max-width: 70%;\n  overflow: hidden;\n}\n\n.suggested-cnTpG {\n  border-right: #ff958b 8px solid;\n}\n\n.required-JhxVe {\n  border-right: #ff2a2a 8px solid;\n}\n.disabled-YODb1 {\n  background-color: #9da7ad;\n}\n.option-title-wrapper-nelTh.disabled-YODb1:hover {\n  cursor: not-allowed;\n  background-color: #9da7ad;\n}\n";
-styleInject(css_248z);
-
-var OptionStepComponent = function OptionStepComponent(_ref) {
-  var _configStep$optionsta, _configStep$optionsta2, _configStep$optionsta3, _configStep$optionsta4, _configStep$optionsta5, _configStep$optionsta6, _configStep$optionsta7, _configStep$optionsta8;
-  var _ref$step = _ref.step,
-    option = _ref$step.option,
-    configStep = _ref$step.configStep;
-  var viewHandler = useViewHandler();
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var value = (_configStep$optionsta = configStep.optionstate) === null || _configStep$optionsta === void 0 ? void 0 : _configStep$optionsta.valName;
-  var isRequired = (_configStep$optionsta2 = configStep.optionstate) === null || _configStep$optionsta2 === void 0 ? void 0 : _configStep$optionsta2.isRequired;
-  var isSuggested = (_configStep$optionsta3 = configStep.optionstate) === null || _configStep$optionsta3 === void 0 ? void 0 : _configStep$optionsta3.isSuggested;
-  if ((_configStep$optionsta4 = configStep.optionstate) !== null && _configStep$optionsta4 !== void 0 && _configStep$optionsta4.isDifferentOption) {
-    value = 'divers';
-  } else if ((_configStep$optionsta5 = configStep.optionstate) !== null && _configStep$optionsta5 !== void 0 && _configStep$optionsta5.freeTextLang) {
-    var text = '';
-    var freetexts = configStep.optionstate.freeTextLang;
-    for (var key in freetexts) {
-      var _freetexts$key;
-      text += key + ': ' + ((_freetexts$key = freetexts[key]) !== null && _freetexts$key !== void 0 ? _freetexts$key : '') + ';';
-    }
-    if (text) value = text;
-  } else if ((_configStep$optionsta6 = configStep.optionstate) !== null && _configStep$optionsta6 !== void 0 && _configStep$optionsta6.freeText) {
-    value = configStep.optionstate.freeText + (!viewHandler.getViewConfig().hideMeasureUnit ? ' ' + configStep.optionstate.measureUnit : '');
-  } else if ((_configStep$optionsta7 = configStep.optionstate) !== null && _configStep$optionsta7 !== void 0 && _configStep$optionsta7.isMultiselect && (_configStep$optionsta8 = configStep.optionstate) !== null && _configStep$optionsta8 !== void 0 && (_configStep$optionsta8 = _configStep$optionsta8.multiSelects) !== null && _configStep$optionsta8 !== void 0 && _configStep$optionsta8.length) {
-    var _configStep$optionsta9, _configStep$optionsta10;
-    value = ((_configStep$optionsta9 = (_configStep$optionsta10 = configStep.optionstate) === null || _configStep$optionsta10 === void 0 ? void 0 : _configStep$optionsta10.multiSelects) !== null && _configStep$optionsta9 !== void 0 ? _configStep$optionsta9 : []).map(function (opv) {
-      return opv.name;
-    }).join(',');
-  }
-  return /*#__PURE__*/jsxs("div", {
-    className: classnames(optionTitleWrapper, viewHandler.configuratorStructureHandler.curOptionCodex === option.codex ? current : undefined, viewHandler.configStepAlreadyVisited(configStep) ? defined : undefined, configStep.isDisabledByDiverseParentOption ? disabled : undefined, isSuggested ? suggested : undefined, isRequired ? required : undefined),
-    title: configStep.isDisabledByDiverseParentOption ? t('configurator.disable_tabgroup_classification') : undefined,
-    onClick: function onClick() {
-      if (configStep.isDisabledByDiverseParentOption) return;
-      // The marker is only consumed when the option changes; set on a no-op click it would be attributed to a later navigation.
-      if (viewHandler.configuratorStructureHandler.curOptionCodex !== option.codex) window.lastNavigationType = 'TABGROUP_CONFIG_STEP';
-      viewHandler.navigateToConfigStep(configStep.key);
-    },
-    children: [/*#__PURE__*/jsx("div", {
-      className: optionTitle,
-      title: !configStep.isDisabledByDiverseParentOption ? option.codex : undefined,
-      children: option.title
-    }), /*#__PURE__*/jsx("div", {
-      className: optionValue,
-      title: !configStep.isDisabledByDiverseParentOption ? value : undefined,
-      children: value
-    })]
-  });
-};
-var ConfigStep = observer(OptionStepComponent);
-
-export { ConfigStep as default };

package/build/esm/index-85d1b3f9.js

@@ -1,89 +0,0 @@
-import { s as styleInject } from './index-069dfa13.js';
-import { useTranslation, useDivaCore, getLogger } from '@crystaldesign/diva-core';
-import 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-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/web-planner-logic';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import 'classnames';
-import 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import 'react-switch';
-import 'react-countup';
-
-var affiliateContainer = "affiliate-container-bOZvB";
-var affiliateMain = "affiliate-main-ipOJf";
-var affiliateMainMobile = "affiliate-main-mobile-VQW52";
-var affiliateProduct = "affiliate-product-ich3t";
-var affiliateProductDescription = "affiliate-product-description-ujnXk";
-var affiliatePartnerList = "affiliate-partner-list-wXqwE";
-var affiliatePartner = "affiliate-partner-Z5vLB";
-var affiliatePartnerImage = "affiliate-partner-image-WSYog";
-var affiliateParnterButton = "affiliate-parnter-button-myx7O";
-var css_248z = ".affiliate-container-bOZvB {\n  max-width: 750px;\n}\n\n.affiliate-container-bOZvB > h2 {\n  margin-top: 0;\n}\n\n.affiliate-main-ipOJf {\n  display: flex;\n  margin-top: 20px;\n  flex-wrap: wrap;\n  gap: 50px;\n}\n.affiliate-main-mobile-VQW52 {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  margin-top: 10px;\n  gap: 10px;\n}\n\n.affiliate-product-ich3t {\n  display: flex;\n  flex-direction: column;\n}\n\n.affiliate-product-ich3t > img {\n  width: 276px;\n  max-width: 100%;\n}\n\n.affiliate-product-description-ujnXk {\n  line-height: 30px;\n  margin-top: 10px;\n  flex: 1 1 20px;\n}\n\n.affiliate-partner-list-wXqwE {\n  flex: 1 1 200px;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.affiliate-partner-Z5vLB {\n  display: flex;\n  justify-content: space-between;\n  flex: 1 1 100px;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n  position: relative;\n}\n\n.affiliate-partner-image-WSYog {\n  cursor: pointer;\n  flex: 1 1 120px;\n  background-color: #fff;\n  background-repeat: no-repeat;\n  background-position: center;\n  width: 204px;\n  max-width: 100%;\n  height: 98px;\n  border: 1px solid #aaa;\n}\n\n.affiliate-parnter-button-myx7O {\n  cursor: pointer;\n  height: 35px;\n  width: 100px;\n  background: var(--secondaryColor);\n  border-radius: 3px;\n  color: #fff;\n  text-align: center;\n  line-height: 35px;\n  flex: 1 1 25px;\n  padding: 0 5px;\n}\n";
-styleInject(css_248z);
-
-getLogger('Planner', 'Affiliate');
-function Affiliate(_ref) {
-  var _product$affiliate;
-  var product = _ref.product;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useDivaCore = useDivaCore(),
-    isMobile = _useDivaCore.state.dimensions.isMobile;
-  return /*#__PURE__*/jsxs("div", {
-    className: affiliateContainer,
-    children: [/*#__PURE__*/jsx("h2", {
-      children: t('affiliatemodal.title')
-    }), /*#__PURE__*/jsx("div", {
-      children: t('affiliatemodal.text')
-    }), /*#__PURE__*/jsxs("div", {
-      className: isMobile ? affiliateMainMobile : affiliateMain,
-      children: [/*#__PURE__*/jsxs("div", {
-        className: affiliateProduct,
-        children: [!isMobile && /*#__PURE__*/jsx("img", {
-          src: product.image
-        }), /*#__PURE__*/jsx("div", {
-          className: affiliateProductDescription,
-          children: product.shortDescription
-        })]
-      }), /*#__PURE__*/jsx("div", {
-        className: affiliatePartnerList,
-        children: (_product$affiliate = product.affiliate) === null || _product$affiliate === void 0 ? void 0 : _product$affiliate.map(function (partner) {
-          return /*#__PURE__*/jsxs("div", {
-            className: affiliatePartner,
-            children: [/*#__PURE__*/jsx("button", {
-              "data-test-id": "affiliate-button",
-              className: affiliatePartnerImage,
-              style: {
-                backgroundImage: 'url(' + partner.logoUrl + ')'
-              },
-              onClick: function onClick() {
-                window.open(partner.link, '_blank');
-              }
-            }), /*#__PURE__*/jsx("div", {
-              className: affiliateParnterButton,
-              onClick: function onClick() {
-                window.open(partner.link, '_blank');
-              },
-              children: t('affiliatemodal.button')
-            })]
-          }, partner.id);
-        })
-      })]
-    })]
-  });
-}
-
-export { Affiliate as default };

package/build/esm/index-86f6ad93.js

@@ -1,45 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject } from './index-069dfa13.js';
-import { observer } from 'mobx-react-lite';
-import 'react';
-import ActionNavigation from './index-02fd2058.js';
-import classnames from 'classnames';
-import { jsx } 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/helpers/objectWithoutProperties';
-import '@babel/runtime/regenerator';
-import '@babel/runtime/helpers/classCallCheck';
-import '@babel/runtime/helpers/createClass';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@crystaldesign/web-planner-logic';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import 'react-switch';
-import 'react-countup';
-import './index.module-79b0c020.js';
-
-var container = "container-LaFKa";
-var back = "back-A14G4";
-var forth = "forth-6EUqO";
-var css_248z = ".container-LaFKa .back-A14G4 {\n  border: 1px var(--secondaryColor) solid;\n  border: 1px var(--navigateBack, var(--secondaryColor)) solid;\n  background-color: white;\n  color: var(--secondaryColor);\n  color: var(--navigateBack, var(--secondaryColor));\n  float: left;\n  width: 50%;\n  box-sizing: border-box;\n  flex-grow: 1;\n}\n\n.container-LaFKa .forth-6EUqO {\n  border: 1px var(--secondaryColor) solid;\n  background-color: var(--secondaryColor);\n  background-color: var(--navigateForth, var(--secondaryColor));\n  color: #ffffff;\n  color: var(--navigateForthFontColor, #ffffff);\n  float: right;\n  width: 50%;\n  box-sizing: border-box;\n  flex-grow: 1;\n}\n";
-styleInject(css_248z);
-
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ActionNavigationGold = function ActionNavigationGold(props) {
-  return /*#__PURE__*/jsx(ActionNavigation, _objectSpread(_objectSpread({}, props), {}, {
-    className: classnames(props.className, container),
-    showBackButtonText: true,
-    backOverwrite: back,
-    forthOverwrite: forth
-  }));
-};
-var index = observer(ActionNavigationGold);
-
-export { index as default };

package/build/esm/index-88f3f91e.js

@@ -1,225 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-069dfa13.js';
-import classnames from 'classnames';
-import { useEffect } from 'react';
-import Inputbox from './index-99a06cb7.js';
-import Product from './index-9d081e62.js';
-import Settings from './index-ab5f77c2.js';
-import NavigationButtons from './index-e5fa6661.js';
-import ActionBasket from './index-fe37de4e.js';
-import TabGroup from './index-28c1b164.js';
-import { observer } from 'mobx-react-lite';
-import BasketMobile from './index-826cd06e.js';
-import { useDivaCore } from '@crystaldesign/diva-core';
-import ProgressBar from './index-9c0b72fa.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/web-planner-logic';
-import '@crystaldesign/diva-utils';
-import 'mobx';
-import 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import 'react-switch';
-import 'react-countup';
-import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-c82eb7f0.js';
-import './index-c86ae8a7.js';
-import './index-216c7d32.js';
-import './index-9313cb91.js';
-import './index-50a63158.js';
-import 'sift';
-import './index-e5c9f756.js';
-import './index-5f609457.js';
-import './index-a78173dc.js';
-import './index-bbb4336b.js';
-import './index.module-3ca6f52e.js';
-import './index-8a456dfd.js';
-import './index-bbcabb30.js';
-import '@mui/icons-material/Block';
-import '@mui/icons-material/Warning';
-import './index-2b633bf6.js';
-import 'react-dropdown';
-import './index-8b0470ba.js';
-import './index-be6d5a46.js';
-import './index-f78469ae.js';
-import './index-cf01c33d.js';
-import '@crystaldesign/content-box';
-import './index-e524c674.js';
-import './index-608f20ba.js';
-import './index-d24285be.js';
-import './index-edfff167.js';
-import 'swiper/react';
-import 'swiper/modules';
-import './UnlockCard-3cc2f26f.js';
-import './index-7fb23de3.js';
-import './index-eab3e6fa.js';
-import './index-dd838110.js';
-import './index-70664bba.js';
-import './index-fdb316b4.js';
-import './index-8b422743.js';
-import 'react-laag';
-import './index.module-6cced36b.js';
-import './index-9df476f0.js';
-import './index-dba98ae5.js';
-import './index-febf1985.js';
-import './index-ac8d1c4a.js';
-import './index-6cf6a7ad.js';
-import './index.module-23bd72a7.js';
-import './index-28633e47.js';
-import './index-03a51217.js';
-import './index-20cb0e12.js';
-import './index-3d069687.js';
-import './index-3e42b8cc.js';
-import './index-fea3c181.js';
-import './index-7527ccd4.js';
-import './index-40eaae35.js';
-import './index-cbca9804.js';
-import './index-9e9c2c44.js';
-import './index-9757da81.js';
-import './index-0fa1ab1e.js';
-import './index-6e5ae211.js';
-import 'rc-slider';
-import './index-2dc275fb.js';
-import './index-d57c0c64.js';
-import './index-481290a4.js';
-import './index-4203008a.js';
-import './index-ec13a675.js';
-import 'react-confetti-explosion';
-import './index-5ec017b4.js';
-import './index-8e75534c.js';
-import './index-d0aa8627.js';
-import 'react-qr-code';
-import './index-d2c3bf47.js';
-import './useCustomDimensions-b600e846.js';
-import './index-07f28ae2.js';
-import './ussIsSticky-827d6d5e.js';
-import './index-32a8ef24.js';
-import './index-e2dd266a.js';
-import './index-e1cc84ad.js';
-import './index.module-1595ea45.js';
-import './index-0f4621d1.js';
-import './index-c0b895b0.js';
-import './index-32ddd269.js';
-import './index-dba513ca.js';
-import './index-757c0d4d.js';
-import './index-12d30b65.js';
-import './index.module-74e44d78.js';
-import './index-37f47aa5.js';
-import './index-96cd7309.js';
-import './useSteppedWithoutSwipe-3f98081b.js';
-import './index-b0d7b9ed.js';
-import './index-a6ab9ef8.js';
-import '@mui/material';
-import './index-be431d09.js';
-import './index-c625a25a.js';
-import './index-b18c13de.js';
-import './index-2fba492f.js';
-import './index-1151fc97.js';
-import './index-747670f0.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 };