@crystaldesign/diva-web-planner-react 26.8.0-beta.6 → 26.8.0-beta.61

package/build/esm/index-f81c3a66.js

@@ -0,0 +1,52 @@
+import { u as useViewHandler } from './index-b4986618.js';
+import 'react';
+import { observer } from 'mobx-react-lite';
+import RoomGallery from './index-a5521567.js';
+import { useDivaCore } from '@crystaldesign/diva-core';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'classnames';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import 'swiper/react';
+import 'swiper/modules';
+import './index-3b8f9739.js';
+import './index.module-27dc1e95.js';
+import './index-fa056f93.js';
+import './index-7fa9586f.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-4f94a226.js';
+import './index-20807646.js';
+
+var AiRoomsSelection = function AiRoomsSelection(props) {
+  var _viewHandler$aiState$, _organization$setting;
+  var viewHandler = useViewHandler();
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    user = _useDivaCore$state.user,
+    organization = _useDivaCore$state.organization;
+  if (!viewHandler.aiState.showAiRoomRenderingInSummary || !viewHandler.viewPlannerHandler.isAny3DVisualization() || (!user ? !viewHandler.aiState.shouldShowAiForAnonymous : !viewHandler.aiState.isAnyLimitDefined) || !((_viewHandler$aiState$ = viewHandler.aiState.enrichedAiRoomRenderings()) !== null && _viewHandler$aiState$ !== void 0 && _viewHandler$aiState$.length) || (_organization$setting = organization.settings) !== null && _organization$setting !== void 0 && (_organization$setting = _organization$setting.aiSettings) !== null && _organization$setting !== void 0 && _organization$setting.checkForDivaKiReady && !viewHandler.aiState.catalogDataKiReady()) return /*#__PURE__*/jsx(Fragment, {});
+
+  // Use enriched items from AI state (computed property with all callbacks and current state)
+  return /*#__PURE__*/jsx(RoomGallery, {
+    roomItems: viewHandler.aiState.enrichedAiRoomRenderings(true),
+    selectedRoom: viewHandler.aiState.selectedRoom
+  });
+};
+var AiRoomsSelection$1 = observer(AiRoomsSelection);
+
+export { AiRoomsSelection$1 as default };

package/build/esm/index-f99ffa6c.js

@@ -0,0 +1,57 @@
+import { u as useViewHandler } from './index-b4986618.js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import 'react';
+import { useTranslation } from '@crystaldesign/diva-core';
+import { p as paletteItem, w as wcSize, a as wcSizeNormal, b as wcImage, t as textContainer, c as wcConfiguratorSettingsTitle } from './index.module-df4a3987.js';
+import IsActive from './index-798bc4fb.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var ViewPoint = function ViewPoint(_ref) {
+  var itemP = _ref.item;
+  var item = itemP;
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx("div", {
+    className: paletteItem,
+    onClick: function onClick() {
+      return viewHandler.paletteViewHandler.clickedOnStaticVPPalette(item);
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      className: classnames(wcSize, wcSizeNormal),
+      children: [item.sel && /*#__PURE__*/jsx(IsActive, {}), /*#__PURE__*/jsx("div", {
+        className: wcImage,
+        style: {
+          backgroundImage: "url(".concat(item.url, ")")
+        }
+      }), /*#__PURE__*/jsx("div", {
+        className: textContainer,
+        children: /*#__PURE__*/jsx("div", {
+          className: wcConfiguratorSettingsTitle,
+          children: t('configurator.' + item.N)
+        })
+      })]
+    })
+  });
+};
+var ViewPoint$1 = observer(ViewPoint);
+
+export { ViewPoint$1 as default };

package/build/esm/index-f9e3410a.js

@@ -0,0 +1,90 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-b4986618.js';
+import { observer } from 'mobx-react-lite';
+import { useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
+import TabGroupHorizontal from './index-54715f21.js';
+import TabGroupVertical from './index-eb7cca95.js';
+import TabSearch from './index-a57572a5.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+import './index-349cea8e.js';
+import './index-112a4fa8.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+
+var wcConfiguratorSteps = "wcConfigurator-steps-1pUS0";
+var portrait = "portrait-uvNtu";
+var horizontal = "horizontal-6TCsO";
+var wcConfiguratorStepsSplit = "wcConfigurator-steps-split-ATmZ8";
+var closeRight = "close-right-rv5xk";
+var closeLeft = "close-left-S5bW1";
+var vertical = "vertical-HLAFY";
+var tabSearchVisibleClass = "tab-search-visible-class-VelST";
+var landscape = "landscape-O7G0i";
+var wcConfigCloseButton = "wcConfigCloseButton-mkHVY";
+var closeButtonHidden = "closeButtonHidden-g1FQc";
+var wcConfiguratorStepsContainer = "wcConfigurator-steps-Container-Yb9mE";
+var css_248z = ".wcConfigurator-steps-1pUS0 {\n  z-index: 1100;\n}\n\n.portrait-uvNtu.wcConfigurator-steps-1pUS0 {\n  overflow: hidden;\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 {\n  background-color: var(--thirdColor);\n}\n.portrait-uvNtu.horizontal-6TCsO.wcConfigurator-steps-1pUS0 {\n  background-color: rgba(238, 238, 238, 0.95);\n}\n.horizontal-6TCsO .wcConfigurator-steps-split-ATmZ8 {\n  height: 100%;\n  width: calc(100% - 4.3rem);\n  float: left;\n  background: var(--tabGroupBackground);\n}\n\n.horizontal-6TCsO.portrait-uvNtu.close-right-rv5xk .wcConfigurator-steps-split-ATmZ8 {\n  width: calc(100% - 3.6rem);\n}\n.horizontal-6TCsO.portrait-uvNtu.close-left-S5bW1 .wcConfigurator-steps-split-ATmZ8 {\n  width: 100%;\n}\n\n.vertical-HLAFY .wcConfigurator-steps-split-ATmZ8 {\n  height: 100%;\n  width: 100%;\n  background: var(--tabGroupBackground);\n}\n\n.tab-search-visible-class-VelST.vertical-HLAFY .wcConfigurator-steps-split-ATmZ8 {\n  height: calc(100% - 46px);\n}\n.horizontal-6TCsO.landscape-O7G0i .wcConfigurator-steps-split-ATmZ8 {\n  width: 100%;\n}\n\n.wcConfigCloseButton-mkHVY {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M0.5625 0.836182L18.5625 18.8362M18.5625 0.836182L0.5625 18.8362%22 stroke%3D%22%234A4A4A%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  float: left;\n  width: 32px;\n  height: 32px;\n  margin: 12.8px;\n  margin-left: 17.6px;\n  transition: background-color 0.15s ease;\n  border-radius: var(--globalBorderRadius);\n}\n.vertical-HLAFY .wcConfigCloseButton-mkHVY {\n  position: absolute;\n  top: -56px;\n  left: 30px;\n}\n\n.portrait-uvNtu .wcConfigCloseButton-mkHVY {\n  position: absolute;\n  top: 0;\n  margin: 10px;\n}\n\n.portrait-uvNtu.close-right-rv5xk .wcConfigCloseButton-mkHVY {\n  right: 0;\n}\n\n.portrait-uvNtu.close-left-S5bW1 .wcConfigCloseButton-mkHVY {\n  left: -50px;\n}\n\n.wcConfigCloseButton-mkHVY:hover {\n  box-shadow: 0px 1px 4px rgba(68, 49, 49, 0.15);\n}\n\n.wcConfigCloseButton-mkHVY:active {\n  background-color: rgba(197, 197, 197, 0.1);\n}\n\n.wcTabGroupItem-eqGtC:first-child {\n  border-radius: var(--globalBorderRadius) 0 0 var(--globalBorderRadius);\n}\n\n.portrait-uvNtu .wcTabGroupItem-eqGtC:first-child {\n  border-radius: 0px;\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  border-radius: var(--globalBorderRadius);\n  border-width: 0px;\n  overflow-x: auto;\n}\n\n.portrait-uvNtu.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  border-radius: 0px;\n  height: calc(100% - 3px);\n}\n\n.wcConfigur-xKWej .wcConfiguratorator-steps-Container-FGpNz {\n  width: -moz-max-content;\n  width: max-content;\n  height: 100%;\n}\n\n.horizontal-6TCsO .wcConfigurator-steps-split-ATmZ8 {\n  height: 100%;\n  width: calc(100% - 4.3rem);\n  float: left;\n}\n\n.horizontal-6TCsO.closeButtonHidden-g1FQc .wcConfigurator-steps-split-ATmZ8,\n.horizontal-6TCsO.closeButtonHidden-g1FQc.portrait-uvNtu .wcConfigurator-steps-split-ATmZ8,\n.horizontal-6TCsO.closeButtonHidden-g1FQc.landscape-O7G0i .wcConfigurator-steps-split-ATmZ8 {\n  width: 100%;\n  overscroll-behavior: contain;\n}\n\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8::-webkit-scrollbar {\n  display: none;\n}\n\n/* Hide scrollbar for IE and Edge */\n.horizontal-6TCsO.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8,\n.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  -ms-overflow-style: none;\n  scrollbar-width: none; /* Firefox */\n}\n\n.vertical-HLAFY.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8 {\n  overflow: auto;\n\n  /* Hide scrollbar for IE, Edge add Firefox */\n\n  -ms-overflow-style: none;\n  scrollbar-width: none; /* Firefox */\n}\n\n.vertical-HLAFY.wcConfigurator-steps-1pUS0 .wcConfigurator-steps-split-ATmZ8::-webkit-scrollbar {\n  display: none;\n}\n\n.horizontal-6TCsO .wcConfigurator-steps-Container-Yb9mE {\n  width: -moz-max-content;\n  width: max-content;\n  height: 100%;\n  overscroll-behavior: contain;\n}\n\n.vertical-HLAFY .wcConfigurator-steps-Container-Yb9mE {\n  width: 100%;\n  height: 100%;\n}\n\n/* Dark mode – matches backoffice */\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode .horizontal-6TCsO.wcConfigurator-steps-1pUS0,\n.diva-component-DIVA_BACKOFFICE_NEW body.darkmode .horizontal-6TCsO.wcConfigurator-steps-1pUS0 {\n  background-color: rgb(30, 30, 30);\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode .portrait-uvNtu.horizontal-6TCsO.wcConfigurator-steps-1pUS0,\n.diva-component-DIVA_BACKOFFICE_NEW body.darkmode .portrait-uvNtu.horizontal-6TCsO.wcConfigurator-steps-1pUS0 {\n  background-color: rgb(30, 30, 30);\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode .horizontal-6TCsO .wcConfigurator-steps-split-ATmZ8,\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode .vertical-HLAFY .wcConfigurator-Q0f5q -steps-split,\n.diva-component-DIVA_BACKOFFICE_NEW body.darkmode .horizontal-6TCsO .wcConfigurator-steps-split-ATmZ8,\n.diva-component-DIVA_BACKOFFICE_NEW body.darkmode .vertical-HLAFY .wcConfigurator-steps-split-ATmZ8 {\n  background: rgb(20, 20, 20);\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode .wcConfigCloseButton-mkHVY:hover,\n.diva-component-DIVA_BACKOFFICE_NEW body.darkmode .wcConfigCloseButton-mkHVY:hover {\n  box-shadow: 0px 1px 4px rgba(255, 255, 255, 0.1);\n}\n\n.diva-component-DIVA_BACKOFFICE_NEW .darkmode .wcConfigCloseButton-mkHVY:active,\n.diva-component-DIVA_BACKOFFICE_NEW body.darkmode .wcConfigCloseButton-mkHVY:active {\n  background-color: rgba(255, 255, 255, 0.08);\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["className", "showCloseButtonInMobile", "tabSearchClass"];
+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 TabGroupContainer = function TabGroupContainer(_ref) {
+  var className = _ref.className,
+    showCloseButtonInMobile = _ref.showCloseButtonInMobile,
+    tabSearchClass = _ref.tabSearchClass,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state = _useDivaCore.state,
+    isFullscreenComponent = _useDivaCore$state.isFullscreenComponent,
+    isMobile = _useDivaCore$state.dimensions.isMobile;
+  var closeButtonVisible = isFullscreenComponent && showCloseButtonInMobile !== 'none' && !viewHandler.uiState.isMobilePortrait || viewHandler.tabGroupState.curTabGroupType != 'vertical' && !viewHandler.uiState.ViewConfig.hideCloseButton && viewHandler.eventIsManagedByClient('onWebPlanerClose') && !((!showCloseButtonInMobile || showCloseButtonInMobile == 'none') && viewHandler.getIsInMobileView());
+  var tabSearchVisible = viewHandler.uiState.ViewConfig.tabGroupSearchVisible;
+  var tabGroupScroller = useRef(null);
+  useEffect(function () {
+    if (tabGroupScroller.current) {
+      viewHandler.tabGroupState.setTabGroupScroller(tabGroupScroller.current);
+    }
+    return function () {};
+  }, [tabGroupScroller]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(className, wcConfiguratorSteps, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.tabGroupState.curTabGroupType == 'horizontal' ? horizontal : undefined, viewHandler.tabGroupState.curTabGroupType == 'vertical' ? vertical : undefined, !closeButtonVisible ? closeButtonHidden : undefined, tabSearchVisible ? tabSearchVisibleClass : undefined, isMobile ? showCloseButtonInMobile == 'left' ? closeLeft : closeRight : undefined),
+    children: [tabSearchVisible && /*#__PURE__*/jsx(TabSearch, {
+      className: tabSearchClass
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames(wcConfiguratorStepsSplit),
+      ref: tabGroupScroller,
+      children: /*#__PURE__*/jsxs("div", {
+        className: wcConfiguratorStepsContainer,
+        children: [viewHandler.tabGroupState.curTabGroupType == 'horizontal' && /*#__PURE__*/jsx(TabGroupHorizontal, {}), viewHandler.tabGroupState.curTabGroupType == 'vertical' && /*#__PURE__*/jsx(TabGroupVertical, {})]
+      })
+    }), closeButtonVisible && /*#__PURE__*/jsx("div", {
+      className: wcConfigCloseButton,
+      title: t('configurator.ConfigClose'),
+      onClick: viewHandler.onCloseConfigurator
+    })]
+  }));
+};
+var TabGroup = observer(TabGroupContainer);
+
+export { TabGroup as default };

package/build/esm/index-fa056f93.js

@@ -0,0 +1,123 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { s as styleInject, u as useViewHandler } from './index-b4986618.js';
+import { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-switch';
+import 'react-countup';
+
+var info = "info-N3LzD";
+var selected = "selected-P-U1U";
+var notSel = "not-sel-AFJoQ";
+var background = "background-gCmWP";
+var isOpen = "is-open-0Kj4f";
+var text = "text-m4AQC";
+var hidden = "hidden-R5A8Y";
+var css_248z = ".info-N3LzD {\n  position: absolute;\n  bottom: 0px;\n  right: 0px;\n  cursor: pointer;\n}\n.selected-P-U1U,\n.not-sel-AFJoQ {\n  position: absolute;\n  opacity: 1;\n  transition: 0.3s opacity ease;\n  z-index: 20;\n}\n.selected-P-U1U rect,\n.not-sel-AFJoQ rect,\n.selected-P-U1U path,\n.not-sel-AFJoQ path {\n  transition: 0.3s fill ease;\n}\n\n.info-N3LzD svg {\n  transition: 0.3s filter ease;\n}\n\n.info-N3LzD,\n.info-N3LzD svg {\n  width: 20px;\n  width: var(--infoIconSize, 20px);\n  height: 20px;\n  height: var(--infoIconSize, 20px);\n  transition:\n    0.3s width ease,\n    0.3s height ease;\n}\n\n.selected-P-U1U:hover .background-gCmWP,\n.is-open-0Kj4f .background-gCmWP {\n  fill: var(--diva-theme-palette-primary-main);\n}\n.selected-P-U1U:hover .text-m4AQC,\n.is-open-0Kj4f .text-m4AQC {\n  fill: transparent;\n}\n\n.selected-P-U1U:hover svg,\n.not-sel-AFJoQ:hover svg {\n  filter: drop-shadow(3px 3px 3px #bbb);\n}\n\n.not-sel-AFJoQ:hover path {\n  fill: var(--diva-theme-palette-primary-main);\n}\n.hidden-R5A8Y {\n  opacity: 0;\n  z-index: 10;\n}\n";
+styleInject(css_248z);
+
+var InfoIcon = function InfoIcon(_ref) {
+  var _ref2, _ref3, _codex;
+  var item = _ref.item,
+    style = _ref.style;
+  var viewHandler = useViewHandler();
+  var contentItemId = item.contentItemId;
+  var clickedFrom = (_ref2 = (_ref3 = (_codex = item.codex) !== null && _codex !== void 0 ? _codex : item.articleCodex) !== null && _ref3 !== void 0 ? _ref3 : item.title) !== null && _ref2 !== void 0 ? _ref2 : item.key;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    clicked = _useState2[0],
+    setClicked = _useState2[1];
+  var itemSelected = item.sel || clicked;
+  useEffect(function () {
+    var select = viewHandler.settingsState.contentItemVisible && viewHandler.settingsState.contentItemId == contentItemId && clickedFrom == viewHandler.settingsState.clickedFrom;
+    if (!select && clicked) {
+      setClicked(false);
+    }
+    if (select && !clicked) {
+      setClicked(true);
+    }
+  }, [viewHandler.settingsState.contentItemVisible, viewHandler.settingsState.contentItemId, viewHandler.settingsState.clickedFrom]);
+  if (!item) throw new Error('item for infoIcon not defined');
+  var showIcon = function showIcon() {
+    var _viewHandler$uiState$;
+    if (item.op && (_viewHandler$uiState$ = viewHandler.uiState.ViewConfig.infoIconSettings) !== null && _viewHandler$uiState$ !== void 0 && _viewHandler$uiState$.onlyShowSelectedOPV) {
+      return itemSelected;
+    }
+    return true;
+  };
+  if (!showIcon()) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: info,
+    onClick: function onClick(e) {
+      viewHandler.settingsState.onClickContentItemId(contentItemId, clickedFrom);
+      setClicked(viewHandler.settingsState.contentItemVisible && viewHandler.settingsState.contentItemId == contentItemId);
+      e.stopPropagation();
+    },
+    style: style,
+    children: /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: classnames(selected, !itemSelected ? hidden : undefined, clicked ? isOpen : undefined),
+        children: /*#__PURE__*/jsxs("svg", {
+          viewBox: "0 0 20 20",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [/*#__PURE__*/jsx("rect", {
+            x: "1",
+            y: "1",
+            width: "18",
+            height: "18",
+            rx: "9",
+            fill: "#fff"
+          }), /*#__PURE__*/jsx("path", {
+            className: background,
+            d: "M10.0003 14.75C10.2129 14.75 10.391 14.6781 10.5345 14.5343C10.6782 14.3906 10.75 14.2125 10.75 14V9.75C10.75 9.5375 10.6781 9.35933 10.5343 9.2155C10.3904 9.07183 10.2122 9 9.99975 9C9.78708 9 9.609 9.07183 9.4655 9.2155C9.32183 9.35933 9.25 9.5375 9.25 9.75V14C9.25 14.2125 9.32192 14.3906 9.46575 14.5343C9.60958 14.6781 9.78775 14.75 10.0003 14.75ZM10 7.2885C10.2288 7.2885 10.4207 7.21108 10.5755 7.05625C10.7303 6.90142 10.8077 6.70958 10.8077 6.48075C10.8077 6.25192 10.7303 6.06008 10.5755 5.90525C10.4207 5.75058 10.2288 5.67325 10 5.67325C9.77117 5.67325 9.57933 5.75058 9.4245 5.90525C9.26967 6.06008 9.19225 6.25192 9.19225 6.48075C9.19225 6.70958 9.26967 6.90142 9.4245 7.05625C9.57933 7.21108 9.77117 7.2885 10 7.2885ZM10.0017 19.5C8.68775 19.5 7.45267 19.2507 6.2965 18.752C5.14033 18.2533 4.13467 17.5766 3.2795 16.7218C2.42433 15.8669 1.74725 14.8617 1.24825 13.706C0.749417 12.5503 0.5 11.3156 0.5 10.0017C0.5 8.68775 0.749333 7.45267 1.248 6.2965C1.74667 5.14033 2.42342 4.13467 3.27825 3.2795C4.13308 2.42433 5.13833 1.74725 6.294 1.24825C7.44967 0.749417 8.68442 0.5 9.99825 0.5C11.3123 0.5 12.5473 0.749333 13.7035 1.248C14.8597 1.74667 15.8653 2.42342 16.7205 3.27825C17.5757 4.13308 18.2528 5.13833 18.7518 6.294C19.2506 7.44967 19.5 8.68442 19.5 9.99825C19.5 11.3123 19.2507 12.5473 18.752 13.7035C18.2533 14.8597 17.5766 15.8653 16.7218 16.7205C15.8669 17.5757 14.8617 18.2528 13.706 18.7518C12.5503 19.2506 11.3156 19.5 10.0017 19.5Z",
+            fill: "#fff"
+          }), /*#__PURE__*/jsx("path", {
+            className: text,
+            d: "M10.0003 14.75C10.2129 14.75 10.391 14.6781 10.5345 14.5343C10.6782 14.3906 10.75 14.2125 10.75 14V9.75C10.75 9.5375 10.6781 9.35933 10.5343 9.2155C10.3904 9.07183 10.2122 9 9.99975 9C9.78708 9 9.609 9.07183 9.4655 9.2155C9.32183 9.35933 9.25 9.5375 9.25 9.75V14C9.25 14.2125 9.32192 14.3906 9.46575 14.5343C9.60958 14.6781 9.78775 14.75 10.0003 14.75ZM10 7.2885C10.2288 7.2885 10.4207 7.21108 10.5755 7.05625C10.7303 6.90142 10.8077 6.70958 10.8077 6.48075C10.8077 6.25192 10.7303 6.06008 10.5755 5.90525C10.4207 5.75058 10.2288 5.67325 10 5.67325C9.77117 5.67325 9.57933 5.75058 9.4245 5.90525C9.26967 6.06008 9.19225 6.25192 9.19225 6.48075C9.19225 6.70958 9.26967 6.90142 9.4245 7.05625C9.57933 7.21108 9.77117 7.2885 10 7.2885ZM10.0017 19.5C8.68775 19.5 7.45267 19.2507 6.2965 18.752C5.14033 18.2533 4.13467 17.5766 3.2795 16.7218C2.42433 15.8669 1.74725 14.8617 1.24825 13.706C0.749417 12.5503 0.5 11.3156 0.5 10.0017C0.5 8.68775 0.749333 7.45267 1.248 6.2965C1.74667 5.14033 2.42342 4.13467 3.27825 3.2795C4.13308 2.42433 5.13833 1.74725 6.294 1.24825C7.44967 0.749417 8.68442 0.5 9.99825 0.5C11.3123 0.5 12.5473 0.749333 13.7035 1.248C14.8597 1.74667 15.8653 2.42342 16.7205 3.27825C17.5757 4.13308 18.2528 5.13833 18.7518 6.294C19.2506 7.44967 19.5 8.68442 19.5 9.99825C19.5 11.3123 19.2507 12.5473 18.752 13.7035C18.2533 14.8597 17.5766 15.8653 16.7218 16.7205C15.8669 17.5757 14.8617 18.2528 13.706 18.7518C12.5503 19.2506 11.3156 19.5 10.0017 19.5ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z",
+            fill: "#4F4F4F"
+          })]
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: classnames(notSel, itemSelected ? hidden : undefined),
+        children: /*#__PURE__*/jsxs("svg", {
+          viewBox: "0 0 20 20",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [/*#__PURE__*/jsx("rect", {
+            x: "1",
+            y: "1",
+            width: "18",
+            height: "18",
+            rx: "9",
+            fill: "#fff"
+          }), /*#__PURE__*/jsx("path", {
+            d: "M10.0003 14.75C10.2129 14.75 10.391 14.6781 10.5345 14.5343C10.6782 14.3906 10.75 14.2125 10.75 14V9.75C10.75 9.5375 10.6781 9.35933 10.5343 9.2155C10.3904 9.07183 10.2122 9 9.99975 9C9.78708 9 9.609 9.07183 9.4655 9.2155C9.32183 9.35933 9.25 9.5375 9.25 9.75V14C9.25 14.2125 9.32192 14.3906 9.46575 14.5343C9.60958 14.6781 9.78775 14.75 10.0003 14.75ZM10 7.2885C10.2288 7.2885 10.4207 7.21108 10.5755 7.05625C10.7303 6.90142 10.8077 6.70958 10.8077 6.48075C10.8077 6.25192 10.7303 6.06008 10.5755 5.90525C10.4207 5.75058 10.2288 5.67325 10 5.67325C9.77117 5.67325 9.57933 5.75058 9.4245 5.90525C9.26967 6.06008 9.19225 6.25192 9.19225 6.48075C9.19225 6.70958 9.26967 6.90142 9.4245 7.05625C9.57933 7.21108 9.77117 7.2885 10 7.2885ZM10.0017 19.5C8.68775 19.5 7.45267 19.2507 6.2965 18.752C5.14033 18.2533 4.13467 17.5766 3.2795 16.7218C2.42433 15.8669 1.74725 14.8617 1.24825 13.706C0.749417 12.5503 0.5 11.3156 0.5 10.0017C0.5 8.68775 0.749333 7.45267 1.248 6.2965C1.74667 5.14033 2.42342 4.13467 3.27825 3.2795C4.13308 2.42433 5.13833 1.74725 6.294 1.24825C7.44967 0.749417 8.68442 0.5 9.99825 0.5C11.3123 0.5 12.5473 0.749333 13.7035 1.248C14.8597 1.74667 15.8653 2.42342 16.7205 3.27825C17.5757 4.13308 18.2528 5.13833 18.7518 6.294C19.2506 7.44967 19.5 8.68442 19.5 9.99825C19.5 11.3123 19.2507 12.5473 18.752 13.7035C18.2533 14.8597 17.5766 15.8653 16.7218 16.7205C15.8669 17.5757 14.8617 18.2528 13.706 18.7518C12.5503 19.2506 11.3156 19.5 10.0017 19.5ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z",
+            fill: "#4F4F4F"
+          })]
+        })
+      })]
+    })
+  });
+};
+var InfoIcon$1 = observer(InfoIcon);
+
+export { InfoIcon$1 as default };

package/build/esm/index-fa0d33f7.js

@@ -0,0 +1,312 @@
+import { s as styleInject, u as useViewHandler } from './index-b4986618.js';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { SwipeableDrawer, Box } from '@mui/material';
+import { observer } from 'mobx-react-lite';
+import { a as swiperWrapper } from './index.module-2f1f61e6.js';
+import classnames from 'classnames';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useDivaCore } 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/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 drawerContent = "drawer-content-JVadm";
+var tabGroups = "tab-groups-5A6NV";
+var swiperWrapper1 = "swiper-wrapper1-n9OSK";
+var drawerHandle = "drawer-handle-QJB1W";
+var drawerHandleLine = "drawer-handle-line-HgJne";
+var wcConfiguratorStepsMobile = "wcConfiguratorStepsMobile-KM8rA";
+var css_248z = ".drawer-content-JVadm {\n  outline: medium none invert;\n  outline: initial;\n  position: absolute;\n  z-index: 1000;\n  width: 100%;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  opacity: 1;\n  overscroll-behavior: contain;\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n  transform: translateZ(0);\n  -webkit-transform: translateZ(0);\n}\n\n.diva-fullscreen .drawer-content-JVadm {\n  position: fixed;\n}\n\n/* Fix for mobile browser address bar showing/hiding */\n@supports (height: 100dvh) {\n  .drawer-content-JVadm {\n    max-height: 100dvh;\n  }\n}\n\ndiv.tab-groups-5A6NV {\n  width: 100%;\n  opacity: 1;\n  height: var(--configuratorTabGroupHeight);\n  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;\n  background: initial;\n  border-radius: 0px;\n  box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.1);\n  border-top-right-radius: 8px;\n  border-top-right-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  border-top-left-radius: 8px;\n  border-top-left-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  touch-action: none;\n  cursor: grab;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.swiper-wrapper1-n9OSK {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n  background-color: var(--settingsBackgroundColor);\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n  transform: translateZ(0);\n  -webkit-transform: translateZ(0);\n}\n\n.tab-groups-5A6NV > span {\n  transform: none;\n  transform: initial;\n  left: auto;\n  left: initial;\n  top: auto;\n  top: initial;\n}\n\n.drawer-handle-QJB1W {\n  position: absolute;\n  left: 50%;\n  transform: translate(-50%, -32px);\n  width: 40px;\n  height: 40px;\n  touch-action: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top-right-radius: 8px;\n  border-top-right-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  border-top-left-radius: 8px;\n  border-top-left-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  cursor: grab;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n}\n\n.drawer-handle-line-HgJne {\n  width: var(--configuratorTabGroupHeight);\n  height: 4px;\n  background-color: rgba(234, 234, 234, 0.9);\n  border-radius: 2px;\n}\n\n.wcConfiguratorStepsMobile-KM8rA {\n  position: relative;\n  height: var(--configuratorTabGroupHeight);\n  width: 100%;\n  display: flex;\n  border-top-right-radius: 8px;\n  border-top-right-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  border-top-left-radius: 8px;\n  border-top-left-radius: var(--mobile-tabgroup-drawer-border-radius, 8px);\n  overflow: hidden;\n}\n\n.overlay-w4YdQ {\n  background-color: rgba(0, 0, 0, 0.4);\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  opacity: 0;\n  top: -1000px;\n  height: 300vh;\n  left: -50px;\n  width: 200vw;\n\n  animation: fadeIn-0-8BB 0.3s ease-in forwards;\n  z-index: 10000;\n}\n\n.nested-drawer-content-gs440 {\n  position: absolute;\n  z-index: 10001;\n  width: 100%;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overscroll-behavior: contain;\n}\n\n.nested-drawer-aQNMD {\n  display: flex;\n  flex-direction: column;\n  border-top-left-radius: 10px;\n  border-top-right-radius: 10px;\n  border: 0px solid #e4e4e7;\n  border-bottom: none;\n  border-top-width: 1px;\n  z-index: 2000000;\n  box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.1);\n  background-color: rgba(255, 255, 255, 0.95);\n}\n\n.drawer-header-OTfW- {\n  padding: 8px 32px;\n}\n.scroll-wrapper-TzOu2 {\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 0px 32px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 12px;\n}\n\ndiv.nested-handle-P5BWs {\n  background: transparent;\n}\n\n.nested-drawer-handle-line-IIhyo {\n  width: calc(36px);\n  height: 4px;\n  background-color: rgba(234, 234, 234, 0.9);\n  border-radius: 2px;\n}\n\n.nested-drawer-handle-42J00 {\n  position: absolute;\n  left: 50%;\n  transform: translate(-50%, -10px);\n  width: 40px;\n  height: 40px;\n  touch-action: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.bottom-spacer-GC9mC {\n  min-height: 36px;\n  width: 100%;\n}\n";
+styleInject(css_248z);
+
+function useDrawerHook() {
+  var viewHandler = useViewHandler();
+  var _useState = useState(viewHandler.uiState.isMobilePortrait),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dragStartY = _useState6[0],
+    setDragStartY = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dragStartX = _useState8[0],
+    setDragStartX = _useState8[1];
+  var _useState9 = useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    dragCurrentY = _useState10[0],
+    setDragCurrentY = _useState10[1];
+  var _useState11 = useState(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    dragStartTime = _useState12[0],
+    setDragStartTime = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    isVerticalSwipe = _useState14[0],
+    setIsVerticalSwipe = _useState14[1];
+  var drawerRef = useRef(null);
+  var _useDivaCore = useDivaCore(),
+    _useDivaCore$state$di = _useDivaCore.state.dimensions,
+    width = _useDivaCore$state$di.width,
+    totalHeight = _useDivaCore$state$di.height;
+
+  // Get snap points from UIState (already calculated with proper height)
+  var snapPoints = viewHandler.uiState.snapPoints;
+  var _useState15 = useState(function () {
+      var initialSnapPoints = viewHandler.uiState.snapPoints;
+      var snapIndex = viewHandler.settingsState.activeSnapPointIndex;
+      var snapPoint = initialSnapPoints[snapIndex];
+      return snapPoint ? "".concat(snapPoint, "px") : '50%';
+    }),
+    _useState16 = _slicedToArray(_useState15, 2),
+    drawerHeight = _useState16[0],
+    setDrawerHeight = _useState16[1];
+
+  // Update drawer open state based on device orientation and fullscreen
+  useEffect(function () {
+    var forceCloseByRotation = !viewHandler.uiState.isMobilePortrait;
+    var shouldOpen = !forceCloseByRotation;
+    setOpen(shouldOpen);
+  }, [viewHandler.uiState.isInMobileView, viewHandler.uiState.isMobileLandscape, viewHandler.uiState.isTablet, width, totalHeight]);
+
+  // Calculate drawer height based on snap point index
+  useEffect(function () {
+    if (isDragging) return; // Don't update while dragging
+
+    var snapIndex = viewHandler.settingsState.activeSnapPointIndex;
+    var snapPoint = snapPoints[snapIndex];
+    if (snapPoint !== undefined) {
+      setDrawerHeight("".concat(snapPoint, "px"));
+    }
+  }, [viewHandler.settingsState.activeSnapPointIndex, isDragging, snapPoints]);
+
+  // Find nearest snap point based on current position and velocity
+  var findNearestSnapPoint = function findNearestSnapPoint(currentDrawerHeight, velocity) {
+    // If swiping fast, use velocity to determine direction
+    // velocity = deltaY / deltaTime, where deltaY = dragStartY - dragCurrentY
+    // Positive velocity: finger moved up (dragCurrentY < dragStartY) → expand drawer
+    // Negative velocity: finger moved down (dragCurrentY > dragStartY) → close drawer
+    if (Math.abs(velocity) > 0.5) {
+      var currentIndex = viewHandler.settingsState.activeSnapPointIndex;
+      if (velocity > 0) {
+        // Swiping up (expanding drawer)
+        return Math.min(snapPoints.length - 1, currentIndex + 1);
+      } else {
+        // Swiping down (closing drawer)
+        return Math.max(0, currentIndex - 1);
+      }
+    }
+
+    // Otherwise, find closest snap point by comparing drawer heights
+    var closestIndex = 0;
+    var minDistance = Math.abs(currentDrawerHeight - snapPoints[0]);
+    for (var i = 1; i < snapPoints.length; i++) {
+      var distance = Math.abs(currentDrawerHeight - snapPoints[i]);
+      if (distance < minDistance) {
+        minDistance = distance;
+        closestIndex = i;
+      }
+    }
+    return closestIndex;
+  };
+
+  // Prevent default touch behavior to avoid page refresh on Android
+  var useMove = useMemo(function () {
+    return function (ev) {
+      return ev.preventDefault();
+    };
+  }, []);
+
+  // Handle touch start
+  var handleTouchStart = function handleTouchStart(e) {
+    var touch = e.touches[0];
+    setDragStartY(touch.clientY);
+    setDragStartX(touch.pageX);
+    setDragCurrentY(touch.clientY);
+    setDragStartTime(Date.now());
+    setIsVerticalSwipe(false);
+    setIsDragging(false);
+  };
+
+  // Handle touch move
+  var handleTouchMove = function handleTouchMove(e) {
+    var touch = e.touches[0];
+    var currentY = touch.clientY;
+    var currentX = touch.pageX;
+    var deltaY = Math.abs(currentY - dragStartY);
+    var deltaX = Math.abs(currentX - dragStartX);
+    var threshold = 1;
+
+    // Detect vertical swipe - only enable dragging if swipe is more vertical than horizontal
+    if (!isVerticalSwipe && deltaY >= threshold && deltaY > deltaX * 2) {
+      setIsVerticalSwipe(true);
+      setIsDragging(true);
+      // Prevent page refresh on Android when vertical swipe is detected
+      window.addEventListener('touchmove', useMove, {
+        passive: false
+      });
+    }
+
+    // Only update height if vertical swipe is detected
+    if (isVerticalSwipe && snapPoints.length > 0) {
+      setDragCurrentY(currentY);
+
+      // Calculate the new height based on drag
+      var dragDeltaY = dragStartY - currentY;
+      var currentSnapPoint = snapPoints[viewHandler.settingsState.activeSnapPointIndex] || snapPoints[2];
+      var maxHeight = snapPoints[snapPoints.length - 1];
+      var minHeight = snapPoints[0];
+      var newHeight = Math.max(minHeight, Math.min(maxHeight, currentSnapPoint + dragDeltaY));
+      setDrawerHeight("".concat(newHeight, "px"));
+    }
+  };
+
+  // Handle touch end
+  var handleTouchEnd = function handleTouchEnd() {
+    // Remove the event listener
+    window.removeEventListener('touchmove', useMove);
+    if (!isDragging) {
+      setIsVerticalSwipe(false);
+      return;
+    }
+    var deltaY = dragStartY - dragCurrentY;
+    var deltaTime = Date.now() - dragStartTime;
+    var velocity = deltaTime > 0 ? deltaY / deltaTime : 0;
+
+    // Calculate current drawer height in pixels
+    var currentHeight = snapPoints[viewHandler.settingsState.activeSnapPointIndex] + deltaY;
+
+    // Find nearest snap point
+    var nearestSnapIndex = findNearestSnapPoint(currentHeight, velocity);
+
+    // Set isDragging to false first to enable transitions
+    setIsDragging(false);
+    setIsVerticalSwipe(false);
+
+    // Use requestAnimationFrame to ensure smooth transition
+    requestAnimationFrame(function () {
+      viewHandler.settingsState.setActiveSnapPointIndex(nearestSnapIndex);
+    });
+  };
+
+  // Cleanup event listener on unmount
+  useEffect(function () {
+    return function () {
+      window.removeEventListener('touchmove', useMove);
+    };
+  }, [useMove]);
+
+  // Toggle drawer open/close
+  var toggleDrawer = function toggleDrawer(newOpen) {
+    setOpen(newOpen);
+    if (!newOpen) {
+      viewHandler.settingsState.setActiveSnapPointIndex(2);
+    }
+  };
+  return {
+    open: open,
+    toggleDrawer: toggleDrawer,
+    drawerHeight: drawerHeight,
+    handleTouchStart: handleTouchStart,
+    handleTouchMove: handleTouchMove,
+    handleTouchEnd: handleTouchEnd,
+    drawerRef: drawerRef,
+    isDragging: isDragging
+  };
+}
+
+var SettingsBottomDrawer = function SettingsBottomDrawer(_ref) {
+  var draggerElement = _ref.draggerElement,
+    children = _ref.children;
+  var viewHandler = useViewHandler();
+  var _useDrawerHook = useDrawerHook(),
+    open = _useDrawerHook.open,
+    toggleDrawer = _useDrawerHook.toggleDrawer,
+    drawerHeight = _useDrawerHook.drawerHeight,
+    handleTouchStart = _useDrawerHook.handleTouchStart,
+    handleTouchMove = _useDrawerHook.handleTouchMove,
+    handleTouchEnd = _useDrawerHook.handleTouchEnd,
+    drawerRef = _useDrawerHook.drawerRef,
+    isDragging = _useDrawerHook.isDragging;
+  var iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);
+  return /*#__PURE__*/jsxs(SwipeableDrawer, {
+    anchor: "bottom",
+    open: open,
+    onClose: function onClose() {
+      return toggleDrawer(false);
+    },
+    onOpen: function onOpen() {
+      return toggleDrawer(true);
+    },
+    disableSwipeToOpen: true,
+    disableBackdropTransition: !iOS,
+    disableDiscovery: true,
+    variant: "persistent",
+    ModalProps: {
+      keepMounted: true,
+      disableEnforceFocus: true,
+      disableAutoFocus: true
+    },
+    slotProps: {
+      paper: {
+        ref: drawerRef,
+        className: drawerContent,
+        style: {
+          height: drawerHeight,
+          opacity: viewHandler.uiState.isMobileLandscape ? 0 : 1,
+          position: 'absolute',
+          transition: isDragging ? 'none' : 'height 0.3s cubic-bezier(0.4, 0.0, 0.2, 1)',
+          willChange: isDragging ? 'height' : 'auto',
+          borderTopRightRadius: 'var(--mobile-tabgroup-drawer-border-radius, 8px)',
+          borderTopLeftRadius: 'var(--mobile-tabgroup-drawer-border-radius, 8px)',
+          overflow: 'visible'
+        },
+        elevation: 0
+      }
+    },
+    children: [/*#__PURE__*/jsxs(Box, {
+      className: classnames(tabGroups),
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      sx: {
+        cursor: 'grab',
+        userSelect: 'none'
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        className: drawerHandle,
+        children: /*#__PURE__*/jsx("div", {
+          className: drawerHandleLine
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: wcConfiguratorStepsMobile,
+        children: draggerElement
+      })]
+    }), viewHandler.uiState.isInMobileView && /*#__PURE__*/jsx("div", {
+      className: classnames(swiperWrapper, swiperWrapper1),
+      children: children
+    })]
+  });
+};
+var SettingsBottomDrawer$1 = observer(SettingsBottomDrawer);
+
+export { SettingsBottomDrawer$1 as default };