@crystaldesign/diva-web-planner-react 26.6.7-rc.0 → 26.6.7

package/build/esm/index-73cac797.js

@@ -0,0 +1,150 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { u as useViewHandler } from './index-4e6b7562.js';
+import { useRef, useEffect } from 'react';
+import ProductHeader from './index-41fd359e.js';
+import ContentItemWrapper from './index-769c6b92.js';
+import ProductSettings from './index-e535ca23.js';
+import ProductCenter from './index-645843c4.js';
+import ProductFooter from './index-d50e801d.js';
+import ProductInfo from './index-3f6cf6dc.js';
+import { observer } from 'mobx-react-lite';
+import { jsxs, 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/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';
+import '@crystaldesign/content-item';
+import './index-c21be7ef.js';
+import './index-56ca7f75.js';
+import 'sift';
+import './index-71209997.js';
+import './index-2701173b.js';
+import './index-a08d6991.js';
+import './index-2a162372.js';
+import './index.module-40da725d.js';
+import './index-f78afc73.js';
+import './index-b9b51763.js';
+import '@mui/icons-material/Block';
+import '@mui/icons-material/Warning';
+import './index-ad12fe99.js';
+import 'react-dropdown';
+import './index-75415572.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-31a2fa01.js';
+import './index-fde56e5f.js';
+import './index-d49b3bb6.js';
+import '@crystaldesign/content-box';
+import './index-5a01f5db.js';
+import './index-249e8a6a.js';
+import './index-55488ec5.js';
+import './index-79de39ed.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './UnlockCard-43bb0ce2.js';
+import './index-5970b652.js';
+import './index-d49f85b7.js';
+import './index-b7a79f8e.js';
+import './index-5fad9992.js';
+import './index-91ea2596.js';
+import './index-890c9736.js';
+import 'react-laag';
+import './index.module-b01124e7.js';
+import './index-8a501200.js';
+import './index-aa269912.js';
+import './index-59838b9b.js';
+import './index-704fe22f.js';
+import './index-abd7cb98.js';
+import './index.module-d235f9b8.js';
+import './index-c5c0072b.js';
+import './index-2c45f4d9.js';
+import './index-644e2e45.js';
+import './index-a2195d9f.js';
+import './index-5676740f.js';
+import './index-dd70b724.js';
+import './index-d9f47727.js';
+import './index-4230c585.js';
+import './index-4801ecff.js';
+import './index-3c86a01f.js';
+import './index-49fda74d.js';
+import './index-c05ebc09.js';
+import './index-ff12da0b.js';
+import 'rc-slider';
+import './index-63d75fa2.js';
+import './index-72d71409.js';
+import './index-a6aa095c.js';
+import './index-9a6634be.js';
+import './index-967212ed.js';
+import 'react-confetti-explosion';
+import './index-2100307b.js';
+import './index-33341010.js';
+import './index-ee669dff.js';
+import 'react-qr-code';
+import './index-5b581fa5.js';
+import './useCustomDimensions-6b7cb8ec.js';
+import './index-109182d7.js';
+import './ussIsSticky-1916bdba.js';
+import './index-039c79b0.js';
+import './index-c6d0ddb7.js';
+import './index-eaf43d57.js';
+import './index.module-6f10ce99.js';
+import './index-a71bb1ad.js';
+import './index-c41b8790.js';
+import './index-ea1a66c8.js';
+import './index-83f23ac9.js';
+import './index-559098c6.js';
+import './index-6316180c.js';
+import './index-04223be5.js';
+import './index-dd0c0b50.js';
+import './index-a9fd060e.js';
+import './index.module-518abc81.js';
+import './index-57001ba2.js';
+import './index-bfc5a2d2.js';
+import './index-5087ec54.js';
+import './index-d4c74336.js';
+import './index-c3bcb3ac.js';
+import './index-7e0b25a4.js';
+import './index-a51d5d5b.js';
+import './index-19d87026.js';
+import './index-d25c1faf.js';
+
+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 Product = function Product(props) {
+  var viewHandler = useViewHandler();
+  var productElement = useRef(null);
+  var setRef = function setRef(element) {
+    productElement.current = element;
+    viewHandler.productState.setProductElement(element);
+  };
+  useEffect(function () {
+    document.documentElement.style.setProperty('--configuratorProductHeight', viewHandler.settingsState.productHeight);
+  }, [viewHandler.settingsState.productHeight]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    id: "wcConfigurator-product"
+  }, props), {}, {
+    ref: setRef,
+    onTouchStart: function onTouchStart() {
+      if (viewHandler.settingsState.activeSnapPointIndex == 3) viewHandler.settingsState.setActiveSnapPointIndex(2);
+    },
+    children: [/*#__PURE__*/jsx(ProductHeader, {}), /*#__PURE__*/jsx(ProductCenter, {}), viewHandler.productState.footerVisible.length > 1 && /*#__PURE__*/jsx(ProductFooter, {}), /*#__PURE__*/jsx(ProductInfo, {}), /*#__PURE__*/jsx(ProductSettings, {}), /*#__PURE__*/jsx(ContentItemWrapper, {
+      direction: "right"
+    })]
+  }));
+};
+var Product$1 = observer(Product);
+
+export { Product$1 as default };

package/build/esm/index-75415572.js

@@ -0,0 +1,115 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import { u as useViewHandler } from './index-4e6b7562.js';
+import { observer } from 'mobx-react-lite';
+import { useEffect } from 'react';
+import RalDropdownFilter from './index-31a2fa01.js';
+import SlideFilter from './index-d49b3bb6.js';
+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/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';
+import 'react-dropdown';
+import './index-fde56e5f.js';
+import '@crystaldesign/content-box';
+import './index-5a01f5db.js';
+
+var defaultColorFilters = [{
+  rgb: '#CC3300',
+  text: 'red'
+}, {
+  rgb: '#FF8C00',
+  text: 'orange'
+}, {
+  rgb: '#E1C699',
+  text: 'beige'
+}, {
+  rgb: '#330000',
+  text: 'brown'
+}, {
+  rgb: '#F0E68C',
+  text: 'yellow'
+}, {
+  rgb: '#006633',
+  text: 'green'
+}, {
+  rgb: '#3333FF',
+  text: 'blue'
+}, {
+  rgb: '#6633FF',
+  text: 'violet'
+}, {
+  rgb: '#CCCCCC',
+  text: 'grey'
+}, {
+  rgb: '#000000',
+  text: 'black'
+}, {
+  rgb: '#eeeeee',
+  text: 'white'
+}, {
+  rgb: '#eeeeee',
+  text: 'else'
+}];
+
+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 RalFilter = function RalFilter(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  var palette = viewHandler.settingsState.itemPalettes.get(props.id);
+  var visibleColorItems = [];
+  var deleteCurValue = function deleteCurValue() {
+    viewHandler.paletteViewHandler.onSelectFilter(props.id, '', 'RAL');
+  };
+  useEffect(function () {
+    if (palette && !(palette !== null && palette !== void 0 && palette.deleteCurFilter)) palette.deleteCurFilter = deleteCurValue;
+  }, [palette]);
+  palette === null || palette === void 0 || palette.groups.map(function (group) {
+    return group.items.map(function (itemP) {
+      var _item$colorGroups;
+      var item = itemP;
+      if (!((_item$colorGroups = item.colorGroups1) !== null && _item$colorGroups !== void 0 && _item$colorGroups.length)) return;
+      var colorGroups = [item.colorGroups1, item.colorGroups2, item.colorGroups3];
+      var _loop = function _loop() {
+        var groups = colorGroups[i];
+        var group = defaultColorFilters.find(function (group) {
+          return group.text === groups;
+        });
+        if (group && !visibleColorItems.find(function (i) {
+          return i.text === groups;
+        })) {
+          visibleColorItems.push(group);
+        }
+      };
+      for (var i = 0; i < colorGroups.length; i++) {
+        _loop();
+      }
+    });
+  });
+  if (viewHandler.uiState.isInMobileView && viewHandler.getViewConfig().ralFilter) return /*#__PURE__*/jsx(SlideFilter, _objectSpread({
+    deleteCurValue: deleteCurValue,
+    visibleColorItems: visibleColorItems
+  }, props));else return /*#__PURE__*/jsx(RalDropdownFilter, _objectSpread({
+    deleteCurValue: deleteCurValue,
+    visibleColorItems: visibleColorItems
+  }, props));
+};
+var RALFilter = observer(RalFilter);
+
+export { RALFilter as default };

package/build/esm/index-75ab4e24.js

@@ -0,0 +1,51 @@
+import './index-4e6b7562.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var Trash = function Trash(_ref) {
+  var item = _ref.item,
+    rect = _ref.rect,
+    onElement = _ref.onElement,
+    plannerUIProps = _ref.plannerUIProps;
+  var left = rect.doUseCalc ? rect.leftCalc : item.position.interpretation == 'percentage' ? rect.left + '%' : rect.left + 'px';
+  var top = rect.doUseCalc ? rect.topCalc : item.position.interpretation == 'percentage' ? 'calc(' + rect.top + '% )' : rect.top + 'px';
+  return /*#__PURE__*/jsx("div", {
+    ref: function ref(elem) {
+      return onElement(elem);
+    },
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId));
+    },
+    style: {
+      left: left,
+      top: top
+    },
+    className: classnames(plannerUIProps.classes.trash.trashClass, plannerUIProps.classes.buttonGeneral, item.plannerMode == 'BOX' ? plannerUIProps.classes.trash.boxplanner : undefined),
+    id: "testDel",
+    children: item.posNr
+  });
+};
+var Trash$1 = observer(Trash);
+
+export { Trash$1 as default };

package/build/esm/index-762f01a6.js

@@ -0,0 +1,61 @@
+import { s as styleInject } from './index-4e6b7562.js';
+import 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import InfoIcon from './index-f78afc73.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var conceptItem = "concept-item-2p8re";
+var sel = "sel-smMlG";
+var wrapper = "wrapper-W6n19";
+var textWrapper = "text-wrapper-UeHd9";
+var title = "title-cP9re";
+var css_248z = ".concept-item-2p8re {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  border-radius: 12px;\n  transition:\n    border-color 0.3s ease,\n    box-shadow 0.3s ease;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  border: 1px solid transparent;\n}\n\n.concept-item-2p8re:not(.sel-smMlG):hover {\n  box-shadow: var(--boxShadowHover);\n  border: 1px solid var(--primaryColor);\n}\n\n.wrapper-W6n19 {\n  border-radius: 11px;\n  display: flex;\n  transition: border-color 0.3s ease;\n  border: 3px solid transparent;\n  display: flex;\n  width: calc(100% - 6px);\n  --infoIconSize: 24px;\n  max-height: 86px;\n  overflow: hidden;\n}\n\n.sel-smMlG .wrapper-W6n19 {\n  border: 3px solid var(--primaryColor);\n}\n\n.concept-item-2p8re img {\n  height: 100%;\n  -o-object-fit: cover;\n     object-fit: cover;\n  -o-object-position: center;\n     object-position: center;\n  border-radius: 8px;\n  min-width: 100%;\n}\n\n.text-wrapper-UeHd9 {\n  position: absolute;\n  bottom: 3px;\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n  width: calc(100% - 6px);\n  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n  height: 42px;\n}\n\n.title-cP9re {\n  font-size: 14px;\n  font-weight: 600;\n  color: white;\n  margin-bottom: 5px;\n}\n";
+styleInject(css_248z);
+
+var ConceptItem = function ConceptItem(_ref) {
+  var item = _ref.item;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(conceptItem, item.selected ? sel : undefined),
+    onClick: item.onClick,
+    children: /*#__PURE__*/jsxs("div", {
+      className: wrapper,
+      children: [/*#__PURE__*/jsx("img", {
+        src: item.image
+      }), item.name && /*#__PURE__*/jsx("div", {
+        className: textWrapper,
+        children: /*#__PURE__*/jsx("div", {
+          className: title,
+          children: item.name
+        })
+      }), item.contentItemId && /*#__PURE__*/jsx(InfoIcon, {
+        item: item,
+        style: {
+          top: 0,
+          bottom: 'unset'
+        }
+      })]
+    })
+  });
+};
+var ConceptItem$1 = observer(ConceptItem);
+
+export { ConceptItem$1 as default };

package/build/esm/index-769c6b92.js

@@ -0,0 +1,162 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { u as useViewHandler } from './index-4e6b7562.js';
+import { observer } from 'mobx-react-lite';
+import { useState, useEffect } from 'react';
+import { ContentItemComponent } from '@crystaldesign/content-item';
+import { getLogger, useDivaCore } from '@crystaldesign/diva-core';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import '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 LOG = getLogger('Planner', 'InfoBox');
+var ContentItemWrapper = function ContentItemWrapper(_ref) {
+  var direction = _ref.direction,
+    mountElement = _ref.mountElement,
+    drawerStyle = _ref.drawerStyle;
+  var viewHandler = useViewHandler();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$actions = _useDivaCore.actions,
+    openDrawerMenu = _useDivaCore$actions.openDrawerMenu,
+    closeDrawerMenu = _useDivaCore$actions.closeDrawerMenu;
+  useEffect(function () {
+    if (viewHandler.settingsState.contentItemVisible && viewHandler.settingsState.contentItemId) {
+      setOpen(true);
+      var isMobile = viewHandler.getIsInMobileView();
+      var onClose = function onClose() {
+        closeDrawerMenu('content-item', true);
+        viewHandler.settingsState.setContentItemId();
+      };
+      var basketIds = viewHandler.settingsState.selectedArticles.map(function (article) {
+        return article.basketId;
+      }).flat();
+      var variantValues = viewHandler.divaWebPlanner.getVariantValues(basketIds);
+      var initialContext = variantValues.map(function (vv) {
+        return {
+          featureCodex: vv.OPT.startsWith('OPT') ? vv.OPT.substring(3) : vv.OPT,
+          selectedOptions: [vv.OPV]
+        };
+      });
+      var content = /*#__PURE__*/jsx(ContentItemComponent, {
+        onClose: onClose,
+        contentItemId: viewHandler.settingsState.contentItemId,
+        wrapperStyle: {
+          display: 'flex',
+          flexDirection: 'column'
+        },
+        headerWrapperStyle: {
+          borderTopRightRadius: '8px',
+          borderTopLeftRadius: '8px'
+        },
+        onContentItemLoaded: function onContentItemLoaded(title) {
+          LOG.businessEvent('onLoadInfoBox', 'InfoBox', 'Lade Infobox', {
+            id: viewHandler.settingsState.contentItemId,
+            title: title !== null && title !== void 0 ? title : undefined
+          });
+        },
+        params: {
+          initialContext: initialContext
+        },
+        onEvent: function onEvent(event) {
+          if (event.type == 'applyResults') {
+            var _viewHandler$divaWebP;
+            var results = event.payload;
+            var addOPT = !((_viewHandler$divaWebP = viewHandler.divaWebPlanner.actSet()) !== null && _viewHandler$divaWebP !== void 0 && _viewHandler$divaWebP.CatalogData.isIDMFormat);
+            if (addOPT) Object.entries(results).forEach(function (_ref2) {
+              var _ref3 = _slicedToArray(_ref2, 2),
+                optCodex = _ref3[0],
+                optValue = _ref3[1];
+              results["OPT".concat(optCodex)] = "OPV".concat(optValue);
+            });
+            viewHandler.paletteViewHandler.changeOnCheckoutConfig(results, basketIds);
+          } else if (event.type == 'onCancel' || event.type == 'onClose') {
+            onClose();
+          }
+        }
+      }, viewHandler.settingsState.contentItemId + viewHandler.settingsState.contentItemVisible);
+      if (isMobile) {
+        var _viewHandler$uiState$;
+        openDrawerMenu({
+          id: 'content-item',
+          content: content,
+          onClose: onClose,
+          open: true,
+          hideCloseButton: true,
+          showOverlay: true,
+          noModal: false,
+          direction: 'bottom',
+          mountElement: (_viewHandler$uiState$ = viewHandler.uiState.wrapperRef) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : undefined,
+          handleInternScroll: true
+        });
+      } else {
+        var _ref4;
+        openDrawerMenu({
+          id: 'content-item',
+          content: content,
+          onClose: onClose,
+          open: true,
+          hideCloseButton: true,
+          showOverlay: false,
+          noModal: true,
+          direction: direction,
+          mountElement: (_ref4 = mountElement !== null && mountElement !== void 0 ? mountElement : viewHandler.productState.productElement) !== null && _ref4 !== void 0 ? _ref4 : undefined,
+          handleInternScroll: true,
+          drawerStyle: _objectSpread(_objectSpread({
+            position: 'absolute',
+            zIndex: 550,
+            maxWidth: 500,
+            maxHeight: 600,
+            top: 0,
+            bottom: 'unset',
+            boxShadow: '2px 1px 4px rgba(0, 0, 0, 0.15)'
+          }, direction === 'right' ? {
+            borderTopLeftRadius: '16px',
+            borderBottomLeftRadius: '16px'
+          } : {
+            borderTopRightRadius: '16px',
+            borderBottomRightRadius: '16px'
+          }), drawerStyle),
+          wrapperStyle: _objectSpread({
+            zIndex: 550,
+            boxShadow: '2px 1px 4px rgba(0, 0, 0, 0.15)'
+          }, direction === 'right' ? {
+            borderTopLeftRadius: '16px',
+            borderBottomLeftRadius: '16px'
+          } : {
+            borderTopRightRadius: '16px',
+            borderBottomRightRadius: '16px'
+          })
+        });
+      }
+    } else if (open) {
+      closeDrawerMenu('content-item', true);
+      setTimeout(function () {
+        setOpen(false);
+      }, 400);
+    }
+  }, [viewHandler.settingsState.contentItemVisible, viewHandler.settingsState.contentItemId]);
+  return /*#__PURE__*/jsx(Fragment, {});
+};
+var ContentItemWrapper$1 = observer(ContentItemWrapper);
+
+export { ContentItemWrapper$1 as default };

package/build/esm/index-77b54965.js

@@ -0,0 +1,37 @@
+import { s as styleInject } from './index-4e6b7562.js';
+import 'react';
+import OrbitInteractionStandard from './index-9d33869b.js';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import 'react-3d-cube-interaction';
+
+var orbitInteractionContainer = "orbit-interaction-container-jxGAx";
+var css_248z = ".orbit-interaction-container-jxGAx {\n  position: absolute;\n  bottom: 20px;\n  right: 70px;\n  z-index: 350;\n}\n";
+styleInject(css_248z);
+
+var OrbitInteractionFree = function OrbitInteractionFree(props) {
+  return /*#__PURE__*/jsx(OrbitInteractionStandard, {
+    orbitInteractionContainerClass: orbitInteractionContainer
+  });
+};
+
+export { OrbitInteractionFree as default };

package/build/esm/index-7995694c.js

@@ -0,0 +1,41 @@
+import { s as styleInject } from './index-4e6b7562.js';
+import ProductHeader from './index-70c15257.js';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import './index-f1de2945.js';
+import './index-8c5c3e4b.js';
+import '@crystaldesign/content-box';
+import './useCustomDimensions-6b7cb8ec.js';
+import '@crystaldesign/content-item';
+
+var productHeader = "productHeader-oJxLo";
+var css_248z = ".productHeader-oJxLo {\n  font-weight: 300 !important;\n}\n";
+styleInject(css_248z);
+
+var ProductHeaderBlue = function ProductHeaderBlue(props) {
+  return /*#__PURE__*/jsx(ProductHeader, {
+    productClass: productHeader
+  });
+};
+
+export { ProductHeaderBlue as default };