@crystaldesign/diva-web-planner-react 24.13.0-rc.8 → 24.13.0

package/build/esm/{index-35b349da.js → index-6efb6d0c.js}

@@ -1,11 +1,11 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import { useRef, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import CheckoutFormNew from './index-45d07a4f.js';
-import ProductCenter from './index-ae57581c.js';
-import ContentItemWrapper from './index-023fee20.js';
+import CheckoutFormNew from './index-f97d9bc4.js';
+import ProductCenter from './index-beca207b.js';
+import ContentItemWrapper from './index-197c235a.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/asyncToGenerator';
@@ -19,22 +19,22 @@ import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import 'classnames';
-import './index-be7c9c45.js';
+import './index-f69766d5.js';
 import 'react-switch';
 import 'react-dropdown';
-import './index-25761db4.js';
-import './index-6f326311.js';
-import './index-548b3897.js';
-import './index-a86358e7.js';
-import './index.module-93e8e774.js';
-import './index-b7624242.js';
-import './index-23004ea0.js';
-import './index-e228fa67.js';
-import './index-657064eb.js';
-import './index-e348b193.js';
-import './index-2ff07b97.js';
+import './index-fe67060b.js';
+import './index-4ec32f66.js';
+import './index-b87d08e2.js';
+import './index-5c0ff9c4.js';
+import './index.module-05074e39.js';
+import './index-4c1845a1.js';
+import './index-67457d73.js';
+import './index-f7d4c232.js';
+import './index-694b4647.js';
+import './index-c7f6bb05.js';
+import './index-0e473bf3.js';
 import '@crystaldesign/content-box';
-import './index-8dff9fb3.js';
+import './index-06881a48.js';
 import '@crystaldesign/content-item';
 import 'react-draggable';
 

package/build/esm/{index-1c4699ee.js → index-6feb2d53.js}

@@ -1,8 +1,8 @@
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import PlannerMsgItem from './index-68564302.js';
+import PlannerMsgItem from './index-be9b556a.js';
 import { jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/index-709770b7.js

@@ -0,0 +1,165 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-da1937c1.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useRef, useEffect } from 'react';
+import { useLayer } from 'react-laag';
+import Tooltip from './index-04463c65.js';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import classnames from 'classnames';
+import FullscreenAr from './index-676524dc.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'react-qr-code';
+
+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 ArQrCodeTooltip = function ArQrCodeTooltip(props) {
+  var _viewHandler$getViewC;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    openModal = _useDivaCore.actions.openModal,
+    _useDivaCore$state = _useDivaCore.state,
+    isMobile = _useDivaCore$state.isMobile,
+    isTablet = _useDivaCore$state.dimensions.isTablet;
+  //tooltip is going to close itself by timer
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    autoClose = _useState2[0],
+    setAutoClose = _useState2[1];
+  var autoCloseTimeout = useRef();
+  var arQrCodeConfig = (_viewHandler$getViewC = viewHandler.getViewConfig()) === null || _viewHandler$getViewC === void 0 ? void 0 : _viewHandler$getViewC.enableAR;
+  var openAr = isMobile || isTablet;
+
+  //for fade animation
+  var _useState3 = useState(viewHandler.productState.arCodeWasVisibleOnce),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tooltipVisible = _useState4[0],
+    setTooltipVisible = _useState4[1];
+  var showTooltip = (tooltipVisible || viewHandler.productState.doShowARQRCode) && !openAr && viewHandler.isParentViewVisible;
+  var _useLayer = useLayer({
+      isOpen: showTooltip,
+      auto: true,
+      placement: 'right-end',
+      triggerOffset: 16
+    }),
+    triggerProps = _useLayer.triggerProps,
+    layerProps = _useLayer.layerProps,
+    renderLayer = _useLayer.renderLayer,
+    arrowProps = _useLayer.arrowProps;
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    url = _useState6[0],
+    setUrl = _useState6[1];
+  useEffect(function () {
+    if (viewHandler.productState.doShowARQRCode == true) {
+      viewHandler.openARObserverConnection(function () {
+        return viewHandler.divaWebPlanner.getPlannerHandler().saveSetHQRenderScript();
+      } // request hqr onreceivehqr triggers update
+      ).then(function (url) {
+        return setUrl(url);
+      });
+    }
+  }, [viewHandler.productState.doShowARQRCode]);
+  useEffect(function () {
+    if (viewHandler.productState.doShowARQRCode && openAr) openModal({
+      content: /*#__PURE__*/jsx(FullscreenAr, {
+        url: url,
+        isArCompatible: viewHandler.productState.isArCompatible,
+        broswerSupportAR: viewHandler.productState.browserSupportAR,
+        activateAR: viewHandler.productState.activateAR
+      }),
+      fullscreen: true,
+      rejectByIcon: true,
+      dontRenderForm: true,
+      callback: function callback(value) {
+        if (!value) {
+          viewHandler.productState.setDoShowARQRCode(false);
+          viewHandler.productState.loadRTVForAr = false;
+          viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : '3D');
+        }
+      }
+    });
+  }, [viewHandler.productState.activateAR, url]);
+  useEffect(function () {
+    //start timeout for auto open the tooltip
+    if (!viewHandler.productState.arCodeWasVisibleOnce && typeof arQrCodeConfig !== 'boolean' && arQrCodeConfig !== null && arQrCodeConfig !== void 0 && arQrCodeConfig.doAutoShow && !openAr) {
+      var _arQrCodeConfig$timeU;
+      autoCloseTimeout.current = setTimeout(function () {
+        viewHandler.productState.setArCodeWasVisibleOnce();
+        setAutoClose(true);
+        viewHandler.productState.setDoShowARQRCode(true);
+      }, ((_arQrCodeConfig$timeU = arQrCodeConfig === null || arQrCodeConfig === void 0 ? void 0 : arQrCodeConfig.timeUntilAutoShow) !== null && _arQrCodeConfig$timeU !== void 0 ? _arQrCodeConfig$timeU : 30) * 1000);
+    }
+    if (!viewHandler.productState.doShowARQRCode && autoClose) {
+      setAutoClose(false);
+    }
+    //delay the state of visible so we animate the fade out
+    if (tooltipVisible !== viewHandler.productState.doShowARQRCode) {
+      setTimeout(function () {
+        setTooltipVisible(viewHandler.productState.doShowARQRCode);
+      }, 200);
+    }
+  }, [viewHandler.productState.doShowARQRCode]);
+  var onClick = function onClick() {
+    viewHandler.productState.setDoShowARQRCode(true);
+    if (openAr) {
+      if (!viewHandler.productState.doShowRTV) {
+        viewHandler.productState.loadRTVForAr = true;
+        viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : 'RTV');
+      }
+      openModal({
+        content: /*#__PURE__*/jsx(FullscreenAr, {
+          url: url,
+          isArCompatible: viewHandler.productState.isArCompatible,
+          broswerSupportAR: viewHandler.productState.browserSupportAR,
+          activateAR: viewHandler.productState.activateAR
+        }),
+        fullscreen: true,
+        dontRenderForm: true,
+        rejectByIcon: true,
+        callback: function callback(value) {
+          if (!value) {
+            viewHandler.productState.loadRTVForAr = false;
+            viewHandler.productState.setDoShowARQRCode(false);
+            viewHandler.productState.onChangePlannerView(viewHandler.productState.allow3DComb ? '3DCOMB' : '3D');
+          }
+        }
+      });
+    }
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("li", _objectSpread(_objectSpread(_objectSpread({
+      id: "ar-icon"
+    }, props), {}, {
+      className: classnames(props.className),
+      onClick: onClick,
+      title: t('configurator.ar_qr_title')
+    }, triggerProps), {}, {
+      style: {
+        visibility: viewHandler.productState.doShowRenderImage || viewHandler.productState.doShow3DComb || viewHandler.productState.doShowRTV ? 'visible' : 'hidden'
+      }
+    })), showTooltip && renderLayer(/*#__PURE__*/jsx(Tooltip, {
+      arrowProps: arrowProps,
+      layerProps: layerProps,
+      autoClose: autoClose,
+      fadeIn: tooltipVisible,
+      fadeout: !viewHandler.productState.doShowARQRCode,
+      url: url
+    }))]
+  });
+};
+var ArQrCodeIcon = observer(ArQrCodeTooltip);
+
+export { ArQrCodeIcon as default };

package/build/esm/{index-75aa3ab2.js → index-72865cce.js}

@@ -1,8 +1,8 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject } from './index-62e351ed.js';
+import { s as styleInject } from './index-da1937c1.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import VerticalTabGroupItemStandard from './index-d023923a.js';
+import VerticalTabGroupItemStandard from './index-23fe43b2.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/objectWithoutProperties';
@@ -17,7 +17,7 @@ import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import 'classnames';
-import './IconHandler-c7cf438b.js';
+import './IconHandler-06a9ab7d.js';
 
 var verticalItemPoligon = "verticalItemPoligon-uLIgs";
 var wcActiveStep = "wcActiveStep-Cjjc7";

package/build/esm/{index-77647016.js → index-768c5c35.js}

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-62e351ed.js';
+import './index-da1937c1.js';
 import 'react';
 import DynamicMultiRender from 'react-dynamic-multi-render';
 import { jsx } from 'react/jsx-runtime';

package/build/esm/{index-6bfb5d51.js → index-768eb498.js}

@@ -3,7 +3,7 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState, useEffect } from 'react';

package/build/esm/{index-2b8e5896.js → index-77ddee82.js}

@@ -1,10 +1,10 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
-import RalDropdownFilter from './index-f567a210.js';
-import SlideFilter from './index-7a0a56df.js';
+import RalDropdownFilter from './index-7d455ce2.js';
+import SlideFilter from './index-af728ba0.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/objectWithoutProperties';
@@ -20,9 +20,9 @@ import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import 'react-dropdown';
 import 'classnames';
-import './index-7c0a49ff.js';
+import './index-46a5bbc3.js';
 import '@crystaldesign/content-box';
-import './index-5627b24c.js';
+import './index-7cd8dd67.js';
 
 var css_248z = "#wcConfigurator .Dropdown-root {\n  position: relative;\n}\n\n#wcConfigurator .Dropdown-control {\n  position: relative;\n  overflow: hidden;\n  background-color: white;\n  border: 1px solid #ccc;\n  border-radius: 2px;\n  box-sizing: border-box;\n  color: #333;\n  cursor: default;\n  outline: none;\n  padding: 4px 24px 4px 10px;\n  transition: all 200ms ease;\n}\n\n#wcConfigurator .Dropdown-control:hover {\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);\n}\n\n#wcConfigurator .Dropdown-arrow {\n  border-color: #999 transparent transparent;\n  border-style: solid;\n  border-width: 5px 5px 0;\n  content: ' ';\n  display: block;\n  height: 0;\n  margin-top: -ceil(2.5);\n  position: absolute;\n  right: 10px;\n  top: 14px;\n  width: 0;\n}\n\n#wcConfigurator .is-open .Dropdown-arrow {\n  border-color: transparent transparent #999;\n  border-width: 0 5px 5px;\n}\n\n#wcConfigurator .Dropdown-menu {\n  background-color: white;\n  border: 1px solid #ccc;\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);\n  box-sizing: border-box;\n  margin-top: -1px;\n  max-height: 200px;\n  overflow-y: auto;\n  position: absolute;\n  top: 100%;\n  width: 100%;\n  z-index: 1000;\n  -webkit-overflow-scrolling: touch;\n}\n\n#wcConfigurator .Dropdown-menu .Dropdown-group > .Dropdown-title {\n  padding: 8px 10px;\n  color: rgba(51, 51, 51, 1);\n  font-weight: 300;\n  text-transform: capitalize;\n}\n\n#wcConfigurator .Dropdown-option {\n  box-sizing: border-box;\n  color: rgba(51, 51, 51, 0.8);\n  cursor: pointer;\n  display: block;\n  padding: 8px 10px;\n}\n\n#wcConfigurator .Dropdown-option:last-child {\n  border-bottom-right-radius: 2px;\n  border-bottom-left-radius: 2px;\n}\n\n#wcConfigurator .Dropdown-option:hover {\n  background-color: #f2f9fc;\n  color: #333;\n}\n\n#wcConfigurator .Dropdown-option.is-selected {\n  background-color: #f2f9fc;\n  color: #333;\n}\n\n#wcConfigurator .Dropdown-noresults {\n  box-sizing: border-box;\n  color: #ccc;\n  cursor: default;\n  display: block;\n  padding: 8px 10px;\n}\n";
 styleInject(css_248z);

package/build/esm/{index-f0a839ef.js → index-789ff882.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';

package/build/esm/{index-7a270571.js → index-79af1b1e.js}

@@ -1,5 +1,5 @@
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';

package/build/esm/{index-446f4379.js → index-79e9e79e.js}

@@ -1,4 +1,4 @@
-import { s as styleInject } from './index-62e351ed.js';
+import { s as styleInject } from './index-da1937c1.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';

package/build/esm/{index-5627b24c.js → index-7cd8dd67.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import classnames from 'classnames';

package/build/esm/{index-0fc595ee.js → index-7cd92e48.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';

package/build/esm/{index-68432820.js → index-7d1d8576.js}

@@ -1,8 +1,8 @@
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { u as useViewHandler } from './index-62e351ed.js';
+import { u as useViewHandler } from './index-da1937c1.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
-import { r as reactJson, a as reactJsonExpanded } from './index.module-944b044e.js';
+import { r as reactJson, a as reactJsonExpanded } from './index.module-bbe0a7a1.js';
 import classnames from 'classnames';
 import ReactJson from 'react-json-view';
 import { jsx, Fragment } from 'react/jsx-runtime';

package/build/esm/{index-f567a210.js → index-7d455ce2.js}

@@ -1,9 +1,9 @@
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import 'react';
 import Dropdown from 'react-dropdown';
 import { useTranslation } from '@crystaldesign/diva-core';
 import classnames from 'classnames';
-import Arrow from './index-7c0a49ff.js';
+import Arrow from './index-46a5bbc3.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/{index-3d829d38.js → index-7e7e5243.js}

@@ -1,4 +1,4 @@
-import { s as styleInject } from './index-62e351ed.js';
+import { s as styleInject } from './index-da1937c1.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';

package/build/esm/{index-cebb7db1.js → index-7eb5a5ec.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';

package/build/esm/{index-11793fbc.js → index-815a4c37.js}

@@ -1,5 +1,5 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import './index-62e351ed.js';
+import './index-da1937c1.js';
 import 'react';
 import DynamicMultiRender from 'react-dynamic-multi-render';
 import { jsx } from 'react/jsx-runtime';

package/build/esm/{index-116f370b.js → index-82e3de8c.js}

@@ -1,7 +1,7 @@
-import { s as styleInject } from './index-62e351ed.js';
+import { s as styleInject } from './index-da1937c1.js';
 import 'react';
 import { observer } from 'mobx-react-lite';
-import Item from './index-ee70afcd.js';
+import Item from './index-32f0b8bd.js';
 import { jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -17,9 +17,9 @@ import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
 import 'react-laag';
-import './index-f96e96f7.js';
+import './index-f0bf3818.js';
 import 'classnames';
-import './index-16ea62d8.js';
+import './index-5df5f2eb.js';
 
 var wrapper = "wrapper-Da1y8";
 var css_248z = ".wrapper-Da1y8 {\n  display: flex;\n  margin-left: 16px;\n  margin-right: 16px;\n  gap: 6px 10px;\n  overflow: auto;\n  width: 100%;\n  flex-wrap: wrap;\n}\n";

package/build/esm/{index-c4ec02f1.js → index-89e0d53b.js}

@@ -1,12 +1,12 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState, useEffect } from 'react';
 import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
-import ProductHeaderFunction from './index-23bad17f.js';
+import ProductHeaderFunction from './index-ab0c7b18.js';
 import { ContentBoxComponent } from '@crystaldesign/content-box';
-import ContentItemWrapper from './index-023fee20.js';
+import ContentItemWrapper from './index-197c235a.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';
@@ -36,7 +36,7 @@ var wcFormattedprice = "wcFormattedprice-sdLxf";
 var wcFormattedBruttoPrice = "wc-formatted-brutto-price-MDFl1";
 var fullscreen = "fullscreen-94axf";
 var room = "room-NxmMf";
-var css_248z = "/* Productdaten */\n\n.wrapper-y4VmL {\n  display: flex;\n  flex-direction: row;\n  height: 70px;\n  z-index: 112;\n  transition: width 0.2s ease-in-out, 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: 16px 0 16px 16px;\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\n.landscape-TuCY- .functionWrapper-3sgkI {\n  margin: 8px 24px 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  text-transform: uppercase;\n  letter-spacing: 0.2px;\n  color: var(--secondaryColor);\n  margin: 0 0 10px;\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  border-radius: 100px;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.textbackground-F3b8W {\n  border-radius: 0px 0px 12px 0px;\n  padding: 0px 12px 6px 16px;\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  margin-top: 5px;\n\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\n.wcPriceinfo-Zmaer {\n  color: var(--secondaryColor);\n  font-size: 14px;\n  font-size: var(--priceInfoFontSize, 14px);\n  font-weight: 300;\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\n.wcFormattedprice-sdLxf {\n  color: var(--secondaryColor);\n  font-size: 14px;\n  font-size: var(--priceInfoFontSize, 14px);\n  -webkit-text-stroke: 0.4px;\n  margin: 0px;\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\n.wc-formatted-brutto-price-MDFl1 {\n  position: relative;\n  color: var(--secondaryColor);\n  font-size: 14px;\n  font-size: var(--priceInfoFontSize, 14px);\n  -webkit-text-stroke: 0.4px;\n  margin: 0px 10px;\n}\n\n.wc-formatted-brutto-price-MDFl1:before {\n  position: absolute;\n  content: '';\n  left: 0;\n  top: 50%;\n  right: 0;\n  border-top: 1px solid;\n  border-color: inherit;\n\n  transform: rotate(5deg);\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: 0px;\n  margin-top: 14.4px;\n  font-size: 22.4px;\n  line-height: 18px;\n  width: 67%;\n}\n.landscape-TuCY- h2 {\n  margin: 0;\n  margin: initial;\n  font-weight: 100;\n  width: 67%;\n  line-height: 0.65;\n  -webkit-text-stroke: 0.3px;\n}\n.landscape-TuCY- .wcPriceinfo-Zmaer {\n  font-size: 15.6px;\n}\n\n.landscape-TuCY- .wcFormattedprice-sdLxf {\n  font-size: 15.6px;\n}\n\n.portrait-Otsjq.wrapper-y4VmL {\n  height: 54.4px;\n  width: calc(100% - 4px);\n}\n\n.portrait-Otsjq h1 {\n  margin: 0px;\n  font-size: 17px;\n  line-height: 20px;\n}\n\n.portrait-Otsjq.room-NxmMf h1,\n.landscape-TuCY-.fullscreen-94axf.room-NxmMf h1 {\n  color: var(--secondaryColor);\n  text-shadow: 3px 4px 15px #000000;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n}\n\n.portrait-Otsjq.room-NxmMf .wcPriceinfo-Zmaer,\n.landscape-TuCY-.fullscreen-94axf.room-NxmMf .wcPriceinfo-Zmaer,\n.portrait-Otsjq.room-NxmMf .wcFormattedprice-sdLxf,\n.landscape-TuCY-.fullscreen-94axf.room-NxmMf .wcFormattedprice-sdLxf {\n  color: white;\n}\n\n.portrait-Otsjq h2 {\n  margin: 0;\n  margin: initial;\n  font-weight: 100;\n  width: 67%;\n  line-height: 0.65;\n}\n";
+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: 16px 0 16px 16px;\n  pointer-events: none;\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\n.landscape-TuCY- .functionWrapper-3sgkI {\n  margin: 8px 24px 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  text-transform: uppercase;\n  letter-spacing: 0.2px;\n  color: var(--secondaryColor);\n  margin: 0 0 10px;\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  border-radius: 100px;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.textbackground-F3b8W {\n  border-radius: 0px 0px 12px 0px;\n  padding: 0px 12px 6px 16px;\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  margin-top: 5px;\n\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\n.wcPriceinfo-Zmaer {\n  color: var(--secondaryColor);\n  font-size: 14px;\n  font-size: var(--priceInfoFontSize, 14px);\n  font-weight: 300;\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\n.wcFormattedprice-sdLxf {\n  color: var(--secondaryColor);\n  font-size: 14px;\n  font-size: var(--priceInfoFontSize, 14px);\n  -webkit-text-stroke: 0.4px;\n  margin: 0px;\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\n.wc-formatted-brutto-price-MDFl1 {\n  position: relative;\n  color: var(--secondaryColor);\n  font-size: 14px;\n  font-size: var(--priceInfoFontSize, 14px);\n  -webkit-text-stroke: 0.4px;\n  margin: 0px 10px;\n}\n\n.wc-formatted-brutto-price-MDFl1:before {\n  position: absolute;\n  content: '';\n  left: 0;\n  top: 50%;\n  right: 0;\n  border-top: 1px solid;\n  border-color: inherit;\n\n  transform: rotate(5deg);\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: 0px;\n  margin-top: 14.4px;\n  font-size: 22.4px;\n  line-height: 18px;\n  width: 67%;\n}\n.landscape-TuCY- h2 {\n  margin: 0;\n  margin: initial;\n  font-weight: 100;\n  width: 67%;\n  line-height: 0.65;\n  -webkit-text-stroke: 0.3px;\n}\n.landscape-TuCY- .wcPriceinfo-Zmaer {\n  font-size: 15.6px;\n}\n\n.landscape-TuCY- .wcFormattedprice-sdLxf {\n  font-size: 15.6px;\n}\n\n.portrait-Otsjq.wrapper-y4VmL {\n  height: 54.4px;\n  width: calc(100% - 4px);\n}\n\n.portrait-Otsjq h1 {\n  margin: 0px;\n  font-size: 17px;\n  line-height: 20px;\n}\n\n.portrait-Otsjq.room-NxmMf h1,\n.landscape-TuCY-.fullscreen-94axf.room-NxmMf h1 {\n  color: var(--secondaryColor);\n  text-shadow: 3px 4px 15px #000000;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n}\n\n.portrait-Otsjq.room-NxmMf .wcPriceinfo-Zmaer,\n.landscape-TuCY-.fullscreen-94axf.room-NxmMf .wcPriceinfo-Zmaer,\n.portrait-Otsjq.room-NxmMf .wcFormattedprice-sdLxf,\n.landscape-TuCY-.fullscreen-94axf.room-NxmMf .wcFormattedprice-sdLxf {\n  color: white;\n}\n\n.portrait-Otsjq h2 {\n  margin: 0;\n  margin: initial;\n  font-weight: 100;\n  width: 67%;\n  line-height: 0.65;\n}\n";
 styleInject(css_248z);
 
 var ProductHeader = function ProductHeader(_ref) {

package/build/esm/{index-99294363.js → index-8a2de610.js}

@@ -1,9 +1,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import 'react';
-import SettingsHeaderContainer from './index-8f078920.js';
-import SettingsScroller from './index-5f2a2806.js';
+import SettingsHeaderContainer from './index-3b480c77.js';
+import SettingsScroller from './index-f3ec3010.js';
 import { observer } from 'mobx-react-lite';
 import classnames from 'classnames';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -18,61 +18,61 @@ import '@babel/runtime/helpers/toConsumableArray';
 import '@crystaldesign/diva-utils';
 import 'mobx';
 import '@crystaldesign/web-planner-logic';
-import './index-5c4f322a.js';
-import './index-13235a1b.js';
-import './index-b06783a8.js';
+import './index-e9412c0b.js';
+import './index-67aacbb4.js';
+import './index-d9942e7e.js';
 import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-f60e005a.js';
+import './index-c482b456.js';
 import 'react-laag';
-import './index-d1f22ab9.js';
-import './index-ea29a6a5.js';
+import './index-a28968be.js';
+import './index-bb1f29f5.js';
 import 'sift';
-import './index-b7b52366.js';
-import './index-36b8737f.js';
-import './index-df53a144.js';
-import './index-f052ab58.js';
-import './index.module-b935be8f.js';
-import './index-be7c9c45.js';
+import './index-3a00e0fe.js';
+import './index-dc932821.js';
+import './index-c54fe13f.js';
+import './index-280dedaf.js';
+import './index.module-41dce6ba.js';
+import './index-f69766d5.js';
 import 'react-switch';
-import './index-91dad7cd.js';
-import './index-4d84f110.js';
+import './index-957ad1d5.js';
+import './index-99510341.js';
 import 'react-dropdown';
-import './index-2b8e5896.js';
-import './index-f567a210.js';
-import './index-7c0a49ff.js';
-import './index-7a0a56df.js';
+import './index-77ddee82.js';
+import './index-7d455ce2.js';
+import './index-46a5bbc3.js';
+import './index-af728ba0.js';
 import '@crystaldesign/content-box';
-import './index-5627b24c.js';
-import './index-9da557ad.js';
-import './index-6ad5a07d.js';
-import './index-3ade1675.js';
-import './index-9b56809f.js';
+import './index-7cd8dd67.js';
+import './index-fa03b253.js';
+import './index-680fb7a2.js';
+import './index-2d62c92a.js';
+import './index-f2f589d8.js';
 import '@crystaldesign/products-component';
-import './index-94727056.js';
-import './index-b5459cba.js';
-import './index-f65bb429.js';
-import './index-16ea62d8.js';
-import './index-f96e96f7.js';
-import './index-23c588bf.js';
-import './index-f0a839ef.js';
-import './index-527f3dd0.js';
-import './index-7d054ceb.js';
-import './index-ede9e219.js';
-import './index-bf284357.js';
-import './index-cfd8aecc.js';
-import './index-e03da047.js';
-import './index.module-066031ee.js';
-import './index-0c2ec30e.js';
-import './index-76635e2e.js';
-import './index-01d9c656.js';
-import './index-4ea13a98.js';
-import './index-446f4379.js';
-import './index-12ac87fd.js';
-import './index-83a3c172.js';
-import './index.module-06be1225.js';
-import './index-4aca1b41.js';
-import './index-5b4a087a.js';
-import './index-eb660a71.js';
+import './index-08b37d8f.js';
+import './index-3debe282.js';
+import './index-de029bb8.js';
+import './index-5df5f2eb.js';
+import './index-f0bf3818.js';
+import './index-6a822b2d.js';
+import './index-789ff882.js';
+import './index-6049c785.js';
+import './index-fd6f8567.js';
+import './index-d28ea7d6.js';
+import './index-0ad24019.js';
+import './index-39969591.js';
+import './index-16855ee9.js';
+import './index.module-82b063ad.js';
+import './index-becb2d22.js';
+import './index-5c425835.js';
+import './index-b94feec5.js';
+import './index-ad7356fe.js';
+import './index-79e9e79e.js';
+import './index-e3ec990c.js';
+import './index-ecd7bb90.js';
+import './index.module-7d0d413a.js';
+import './index-45d36f9e.js';
+import './index-42efedb9.js';
+import './index-d6a5a11f.js';
 
 var wcConfiguratorSettings = "wcConfigurator-settings-nB7sW";
 var tabsHorizontal = "tabs-horizontal-052sb";

package/build/esm/{index-06cddcea.js → index-8b421390.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import classnames from 'classnames';

package/build/esm/{index-3d5060db.js → index-8ed93425.js}

@@ -1,15 +1,15 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import { useState } from 'react';
 import { useHover, useLayer } from 'react-laag';
 import { observer } from 'mobx-react-lite';
-import { w as wcFavoriteSel, a as wcFavorite } from './index.module-06be1225.js';
+import { w as wcFavoriteSel, a as wcFavorite } from './index.module-7d0d413a.js';
 import classnames from 'classnames';
-import IsActive from './index-0c2ec30e.js';
+import IsActive from './index-becb2d22.js';
 import { useDivaCore } from '@crystaldesign/diva-core';
-import GenericToolTip from './index-f96e96f7.js';
-import InfoIcon from './index-91dad7cd.js';
+import GenericToolTip from './index-f0bf3818.js';
+import InfoIcon from './index-957ad1d5.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/objectWithoutProperties';

package/build/esm/{index-91e9c240.js → index-908fe5cc.js}

@@ -1,15 +1,15 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import { w as wcFavoriteSel, a as wcFavorite } from './index.module-06be1225.js';
+import { w as wcFavoriteSel, a as wcFavorite } from './index.module-7d0d413a.js';
 import { useHover, useLayer } from 'react-laag';
-import GenericToolTip from './index-f96e96f7.js';
-import MetaData from './index-16ea62d8.js';
+import GenericToolTip from './index-f0bf3818.js';
+import MetaData from './index-5df5f2eb.js';
 import { useDivaCore } from '@crystaldesign/diva-core';
-import InfoIcon from './index-91dad7cd.js';
+import InfoIcon from './index-957ad1d5.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/objectWithoutProperties';

package/build/esm/{index-47258563.js → index-90a0c1e5.js}

@@ -1,4 +1,4 @@
-import { s as styleInject, u as useViewHandler } from './index-62e351ed.js';
+import { s as styleInject, u as useViewHandler } from './index-da1937c1.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useRef, useEffect } from 'react';