@crystaldesign/diva-web-planner-react 25.13.0-rc.15 → 25.13.0-rc.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/diva-web-planner-react",
-  "version": "25.13.0-rc.15",
+  "version": "25.13.0-rc.17",
   "license": "MIT",
   "devDependencies": {
     "@testing-library/jest-dom": "^6.5.0",
@@ -12,12 +12,12 @@
     "react-dom": "18.3.1"
   },
   "dependencies": {
-    "@crystaldesign/content-item": "25.13.0-rc.15",
-    "@crystaldesign/product-detail-page": "25.13.0-rc.15",
-    "@crystaldesign/products-component": "25.13.0-rc.15",
-    "@crystaldesign/real-time-viewer": "25.13.0-rc.15",
-    "@crystaldesign/web-planner-logic": "25.13.0-rc.15",
-    "@crystaldesign/widget-contact-form": "25.13.0-rc.15",
+    "@crystaldesign/content-item": "25.13.0-rc.17",
+    "@crystaldesign/product-detail-page": "25.13.0-rc.17",
+    "@crystaldesign/products-component": "25.13.0-rc.17",
+    "@crystaldesign/real-time-viewer": "25.13.0-rc.17",
+    "@crystaldesign/web-planner-logic": "25.13.0-rc.17",
+    "@crystaldesign/widget-contact-form": "25.13.0-rc.17",
     "@google/model-viewer": "3.5.0",
     "@react-google-maps/api": "2.20.6",
     "@types/three": "0.163.0",
@@ -46,11 +46,14 @@
   },
   "peerDependencies": {
     "@crystaldesign/diva-core": "*",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.5",
+    "@mui/material": "^6.1.5",
     "react": ">=18.3.1 <20.0.0",
-    "react-dom": ">=18.3.1 <20.0.0",
-    "vaul": "^1.1.2"
+    "react-dom": ">=18.3.1 <20.0.0"
   },
   "types": "./build/types/web-planner-react/src/index.d.ts",
   "module": "build/esm/index.js",
-  "gitHead": "bc76907da9a01c61c4dc02536b4241045b83c6af"
+  "gitHead": "58d04962e025fea645102950aa58ad085dcacc85"
 }

package/build/esm/index-0712963a.js

@@ -1,177 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-6c523325.js';
-import { useEffect } from 'react';
-import Inputbox from './index-ad3e50e0.js';
-import { cssVariables } from './index-b66e6ad5.js';
-import Product from './index-b7fb33c8.js';
-import Settings from './index-6a701986.js';
-import TabGroup from './index-50d43a53.js';
-import { observer } from 'mobx-react-lite';
-import classnames from 'classnames';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-dynamic-multi-render';
-import '@crystaldesign/diva-core';
-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 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-import '@babel/runtime/helpers/objectDestructuringEmpty';
-import './index-911a9252.js';
-import './index-07c216a7.js';
-import 'react-switch';
-import 'react-dropdown';
-import './index-37d7aeee.js';
-import './index-a8283a76.js';
-import './index-bcbb7997.js';
-import './index-8ca17ba6.js';
-import './index-744e8004.js';
-import './index.module-885ca117.js';
-import './index-86012332.js';
-import './index-892c9e4f.js';
-import './index-58cd221a.js';
-import './index-696dc2e9.js';
-import './index-50eaf656.js';
-import './index-e18d4be0.js';
-import './index-b04beb4f.js';
-import './index-46654484.js';
-import './index-cf7a20e9.js';
-import 'react-laag';
-import './index-b9599f5e.js';
-import 'react-qr-code';
-import './index-29521142.js';
-import './index-de99ce8e.js';
-import './index-f9a21ff3.js';
-import './index-1211ea34.js';
-import '@crystaldesign/content-item';
-import './index-aed74211.js';
-import './index-ebd70162.js';
-import './index-a8554b71.js';
-import './index-30bbab35.js';
-import 'sift';
-import './index-1cc37ed6.js';
-import './index-c4479614.js';
-import './index-18e4d4ad.js';
-import './index-c109f354.js';
-import './index.module-8dff9505.js';
-import './index-4f02d832.js';
-import './index-ecd51038.js';
-import './index-b2dff07b.js';
-import 'react-countup';
-import './index-9b1420ab.js';
-import './index-8d6bf8b2.js';
-import './index-ba8e427a.js';
-import './index-cd76fb27.js';
-import './index-31898726.js';
-import '@crystaldesign/content-box';
-import './index-eb621e1a.js';
-import './index-3375282a.js';
-import './index-4fb856c9.js';
-import './index-9800ca73.js';
-import './index-a893a911.js';
-import './index-0ebc45ca.js';
-import './index-eb8fd769.js';
-import './index-733928e9.js';
-import './index-2df062f8.js';
-import './index.module-a636283b.js';
-import './index-70a0b398.js';
-import './index-3669be47.js';
-import './index-88a16c53.js';
-import './index-480d8655.js';
-import './index-67ec4491.js';
-import './index-3a6aeaf9.js';
-import './index.module-cd8c5eb4.js';
-import './index-1ba90988.js';
-import './index-0797a9aa.js';
-import './index-b91f6842.js';
-import './index-8b09fac7.js';
-import './index-8c0651d9.js';
-import './index-38236e36.js';
-import './index-c7d410ef.js';
-import './index-eb3bcc47.js';
-import './index-e42fe96d.js';
-import './index-0893dde5.js';
-import './index-06d16e34.js';
-import './index-3b5c6d05.js';
-import 'swiper/react';
-import 'swiper/modules';
-import './index-23f5b8a3.js';
-import 'rc-slider';
-import './index-3d5dc414.js';
-import './index-f2cb4324.js';
-import './index-0fef639f.js';
-import './index-77cf9f10.js';
-import 'react-confetti-explosion';
-import './index-d6057a99.js';
-import './useCustomDimensions-c009cdad.js';
-import './index-dc0d9cfe.js';
-import './ussIsSticky-6eac5d62.js';
-import './index-5e1f0fa4.js';
-import './index-b59638b0.js';
-import './index-4c07dacd.js';
-import './index.module-63c649ce.js';
-import './index-863efb22.js';
-import './index-e4ed71cd.js';
-import './index-1f57c5a7.js';
-import './index-1d506494.js';
-import './index.module-b2a2dcd3.js';
-import './index-a259fb26.js';
-import './index-372acd15.js';
-import './index-11bdfc24.js';
-import './index-201418b7.js';
-import 'vaul';
-import './index-26760182.js';
-import './index-83b16677.js';
-import './index-55817cc9.js';
-import './index-3752a161.js';
-import './index-b54165e7.js';
-
-var wcConfigurator = "wcConfigurator-VvOGT";
-var wcConfiguratorSteps = "wc-configurator-steps-CYXm7";
-var wcConfiguratorProduct = "wc-configurator-product-Z3rOO";
-var productList = "product-list-18YTy";
-var wcConfiguratorSettings = "wc-configurator-Settings-On8Ph";
-var css_248z = "body {\n  margin: 0;\n  overscroll-behavior-x: none;\n}\n\n.wcConfigurator-VvOGT {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\n  -webkit-font-smoothing: antialiased;\n  -webkit-touch-callout: none; /* iOS Safari */\n  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */\n  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */\n  user-select: none; /* Non-prefixed version, currently*/\n\n  position: relative;\n  height: 100%;\n  width: 100%;\n  display: flex;\n}\n\n.wcConfigurator-VvOGT *,\n.wcConfigurator-VvOGT *::before,\n.wcConfigurator-VvOGT *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wc-configurator-steps-CYXm7 {\n  width: 75px;\n  position: relative;\n}\n.wc-configurator-product-Z3rOO {\n  width: calc(100% - 501px);\n  position: relative;\n  overflow: auto;\n}\n.wc-configurator-product-Z3rOO.product-list-18YTy {\n  display: none;\n}\n\n.wc-configurator-Settings-On8Ph.product-list-18YTy {\n  flex-grow: 1;\n  position: relative;\n  overflow: auto;\n}\n\n.wc-configurator-Settings-On8Ph {\n  width: 426px;\n  position: relative;\n  border-right: 1px solid #e6e6e6;\n}\n\n::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n::-webkit-scrollbar-track {\n  background: #dfdfdf;\n  border-radius: 3px;\n}\n::-webkit-scrollbar-thumb {\n  background: #b1b1b1;\n  border-radius: 3px;\n}\n";
-styleInject(css_248z);
-
-var Serious = function Serious(props) {
-  var _viewHandler$tabGroup;
-  var viewHandler = useViewHandler();
-  useEffect(function () {
-    viewHandler.layoutRendered = true;
-    viewHandler.initCSSVariablesObj(cssVariables);
-  }, []);
-  var currentIsProductList = ((_viewHandler$tabGroup = viewHandler.tabGroupState.curTabGroup) === null || _viewHandler$tabGroup === void 0 ? void 0 : _viewHandler$tabGroup.type) == 'PRODUCTS';
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs("div", {
-      ref: function ref(configuratorRef) {
-        return viewHandler.uiState.setConfiguratorRef(configuratorRef);
-      },
-      style: {
-        pointerEvents: viewHandler.uiState.configuratorDisabled ? 'none' : undefined
-      },
-      hidden: viewHandler.uiState.configuratorHidden,
-      id: "wcConfigurator",
-      className: wcConfigurator,
-      children: [/*#__PURE__*/jsx(Product, {
-        className: classnames(wcConfiguratorProduct, currentIsProductList ? productList : undefined),
-        contentItemStartPos: "left"
-      }), /*#__PURE__*/jsx(Settings, {
-        className: classnames(wcConfiguratorSettings, currentIsProductList ? productList : undefined)
-      }), /*#__PURE__*/jsx(TabGroup, {
-        className: wcConfiguratorSteps
-      })]
-    }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
-  });
-};
-var index = observer(Serious);
-
-export { index as default };

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

@@ -1,286 +0,0 @@
-import { s as styleInject, u as useViewHandler } from './index-6c523325.js';
-import { useState, useEffect, useMemo } from 'react';
-import { Drawer } from 'vaul';
-import { observer } from 'mobx-react-lite';
-import { a as swiperWrapper } from './index.module-b2a2dcd3.js';
-import classnames from 'classnames';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useDivaCore } from '@crystaldesign/diva-core';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/defineProperty';
-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 'qrcode.react';
-import '@babel/runtime/helpers/typeof';
-import 'flat';
-
-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 overlay = "overlay-w4YdQ";
-var nestedDrawerContent = "nested-drawer-content-gs440";
-var nestedDrawer = "nested-drawer-aQNMD";
-var drawerHeader = "drawer-header-OTfW-";
-var scrollWrapper = "scroll-wrapper-TzOu2";
-var nestedHandle = "nested-handle-P5BWs";
-var nestedDrawerHandleLine = "nested-drawer-handle-line-IIhyo";
-var nestedDrawerHandle = "nested-drawer-handle-42J00";
-var bottomSpacer = "bottom-spacer-GC9mC";
-var css_248z = ".drawer-content-JVadm {\n  transition:\n    opacity 0.3s ease,\n    transform 0.5s cubic-bezier(0.32, 0.72, 0, 1) !important;\n}\n\n.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}\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\n.drawer-content-JVadm.vaul-dragging {\n  transition: opacity 0.3s ease !important;\n  height: calc(100% - 36px) !important;\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}\n\n.swiper-wrapper1-n9OSK {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n  background-color: var(--settingsBackgroundColor);\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: inherit;\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}\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/* to be removed after new vaul release https://github.com/emilkowalski/vaul/pull/580 */\nbody {\n  pointer-events: all !important;\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 _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    startY = _useState2[0],
-    setStartY = _useState2[1];
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    startX = _useState4[0],
-    setStartX = _useState4[1];
-  var viewHandler = useViewHandler();
-  var _useState5 = useState(viewHandler.uiState.isMobilePortrait),
-    _useState6 = _slicedToArray(_useState5, 2),
-    open = _useState6[0],
-    setOpen = _useState6[1];
-  var _useState7 = useState(viewHandler.uiState.snapPoints),
-    _useState8 = _slicedToArray(_useState7, 2),
-    snapPoints = _useState8[0],
-    setSnapPoints = _useState8[1];
-  var _useState9 = useState(viewHandler.settingsState.nestedDrawer !== undefined),
-    _useState10 = _slicedToArray(_useState9, 2),
-    nestedOpen = _useState10[0],
-    setNestedOpen = _useState10[1];
-  var _useState11 = useState(''),
-    _useState12 = _slicedToArray(_useState11, 2),
-    id = _useState12[0],
-    setId = _useState12[1];
-  var _useState13 = useState(null),
-    _useState14 = _slicedToArray(_useState13, 2),
-    snapPointsTimeout = _useState14[0],
-    setSnapPointsTimeout = _useState14[1];
-  var _useDivaCore = useDivaCore(),
-    _useDivaCore$state = _useDivaCore.state,
-    isFullscreenComponent = _useDivaCore$state.isFullscreenComponent,
-    _useDivaCore$state$di = _useDivaCore$state.dimensions,
-    width = _useDivaCore$state$di.width,
-    height = _useDivaCore$state$di.height,
-    initializing = _useDivaCore$state.initializing;
-  useEffect(function () {
-    _trySetSnapPoints();
-  }, [width, height, initializing]);
-  var _trySetSnapPoints = function trySetSnapPoints() {
-    var snapPoints = viewHandler.uiState.snapPoints;
-    if (snapPointsTimeout) clearTimeout(snapPointsTimeout);
-    if (!(snapPoints !== null && snapPoints !== void 0 && snapPoints.length)) {
-      setSnapPointsTimeout(setTimeout(function () {
-        return _trySetSnapPoints();
-      }, 100));
-    } else setSnapPoints(snapPoints);
-  };
-  useEffect(function () {
-    var forceCloseByRotation = !viewHandler.uiState.isMobilePortrait;
-    var forceCloseByFullscreen = isFullscreenComponent && id === 'settings-drawer-content';
-    var open = !forceCloseByRotation && !forceCloseByFullscreen;
-    setOpen(open);
-  }, [isFullscreenComponent, viewHandler.uiState.isInMobileView, viewHandler.uiState.isMobileLandscape, viewHandler.uiState.isTablet, width, height]);
-
-  // Listen for mobile browser address bar show/hide events
-  useEffect(function () {
-    var handleVisualViewportResize = function handleVisualViewportResize() {
-      _trySetSnapPoints();
-    };
-    if (window.visualViewport) {
-      window.visualViewport.addEventListener('resize', handleVisualViewportResize);
-      return function () {
-        var _window$visualViewpor;
-        (_window$visualViewpor = window.visualViewport) === null || _window$visualViewpor === void 0 || _window$visualViewpor.removeEventListener('resize', handleVisualViewportResize);
-      };
-    }
-    return;
-  }, []);
-  useEffect(function () {
-    setId(isFullscreenComponent ? 'settings-drawer-content-fullscreen' : 'settings-drawer-content');
-  }, []);
-  var handleTouchStart = function handleTouchStart(e) {
-    setStartY(e.touches[0].clientY);
-    setStartX(e.touches[0].pageX);
-  };
-  var handleTouchMove = function handleTouchMove(e) {
-    var currentY = e.touches[0].clientY;
-    var currentX = e.touches[0].pageX;
-    var deltaY = Math.abs(currentY - startY);
-    var deltaX = Math.abs(currentX - startX);
-    var threshold = 1;
-
-    // Only preventDefault when swipe vertical is detected to prevent page refresh on android
-    if (deltaY >= threshold && deltaY > deltaX * 2) {
-      window.addEventListener('touchmove', useMove, {
-        passive: false
-      });
-    }
-  };
-  var handleTouchEnd = function handleTouchEnd() {
-    window.removeEventListener('touchmove', useMove);
-  };
-  var useMove = useMemo(function () {
-    return function (ev) {
-      return ev.preventDefault();
-    };
-  }, []);
-  useEffect(function () {
-    if (!!viewHandler.settingsState.nestedDrawer) {
-      setNestedOpen(true);
-    }
-  }, [viewHandler.settingsState.nestedDrawer]);
-
-  // nested drawer logic
-  var nestedClose = function nestedClose() {
-    setNestedOpen(false);
-    viewHandler.settingsState.setActiveSnapPointIndex(2);
-    //delay the state changes so the animation of the drawer is not interrupted
-    setTimeout(function () {
-      viewHandler.settingsState.setNestedDrawer(undefined);
-    }, 400);
-  };
-  return {
-    handleTouchStart: handleTouchStart,
-    handleTouchMove: handleTouchMove,
-    handleTouchEnd: handleTouchEnd,
-    snapPoints: snapPoints,
-    open: open,
-    nestedOpen: nestedOpen,
-    nestedClose: nestedClose,
-    id: id
-  };
-}
-
-var SettingsBottomDrawer = function SettingsBottomDrawer(_ref) {
-  var _viewHandler$settings, _viewHandler$settings2, _viewHandler$settings3;
-  var draggerElement = _ref.draggerElement,
-    children = _ref.children;
-  var viewHandler = useViewHandler();
-  var _useDrawerHook = useDrawerHook(),
-    handleTouchStart = _useDrawerHook.handleTouchStart,
-    handleTouchMove = _useDrawerHook.handleTouchMove,
-    handleTouchEnd = _useDrawerHook.handleTouchEnd,
-    open = _useDrawerHook.open,
-    snapPoints = _useDrawerHook.snapPoints,
-    id = _useDrawerHook.id,
-    nestedOpen = _useDrawerHook.nestedOpen,
-    nestedClose = _useDrawerHook.nestedClose;
-  var container = document.getElementById('wcConfigurator');
-  if (!container) return /*#__PURE__*/jsx(Fragment, {});
-  if (!(snapPoints !== null && snapPoints !== void 0 && snapPoints.length)) return /*#__PURE__*/jsx(Fragment, {});
-  return /*#__PURE__*/jsx(Drawer.Root, {
-    open: open,
-    modal: false,
-    autoFocus: true,
-    handleOnly: true,
-    dismissible: true,
-    defaultOpen: false,
-    repositionInputs: false,
-    snapPoints: snapPoints,
-    shouldScaleBackground: false,
-    container: container,
-    onClose: function onClose() {
-      return viewHandler.settingsState.setActiveSnapPointIndex(2);
-    },
-    closeThreshold: viewHandler.settingsState.activeSnapPointIndex == 0 ? 0.1 : 1,
-    activeSnapPoint: snapPoints[viewHandler.settingsState.activeSnapPointIndex],
-    setActiveSnapPoint: function setActiveSnapPoint(snapPoint) {
-      return viewHandler.settingsState.setActiveSnapPointIndex(snapPoints.indexOf(snapPoint));
-    },
-    children: /*#__PURE__*/jsx(Drawer.Portal, {
-      children: /*#__PURE__*/jsxs(Drawer.Content, {
-        id: id,
-        className: drawerContent,
-        style: {
-          height: '100%',
-          opacity: viewHandler.uiState.isMobileLandscape ? '0' : undefined
-        },
-        children: [/*#__PURE__*/jsx(Drawer.Title, {
-          style: {
-            display: 'none'
-          },
-          children: "Settings Drawer"
-        }), /*#__PURE__*/jsxs(Drawer.Handle, {
-          className: classnames(tabGroups),
-          onTouchStart: handleTouchStart,
-          onTouchMove: handleTouchMove,
-          onTouchEnd: handleTouchEnd,
-          children: [!viewHandler.settingsState.nestedDrawer && /*#__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
-        }), /*#__PURE__*/jsxs(Drawer.NestedRoot, {
-          open: nestedOpen,
-          modal: true,
-          container: container,
-          onClose: nestedClose,
-          repositionInputs: false,
-          shouldScaleBackground: false,
-          children: [((_viewHandler$settings = viewHandler.settingsState.nestedDrawer) === null || _viewHandler$settings === void 0 ? void 0 : _viewHandler$settings.showOverlay) && /*#__PURE__*/jsx(Drawer.Overlay, {
-            className: overlay
-          }), /*#__PURE__*/jsxs(Drawer.Content, {
-            id: 'nested-drawer-content',
-            style: {
-              height: 'fit-content',
-              maxHeight: '100%',
-              opacity: viewHandler.uiState.isMobileLandscape ? '0' : undefined,
-              zIndex: 10001
-            },
-            className: nestedDrawerContent,
-            children: [/*#__PURE__*/jsx(Drawer.Title, {
-              style: {
-                display: 'none'
-              },
-              children: "Nested Drawer"
-            }), /*#__PURE__*/jsx(Drawer.Handle, {
-              className: nestedHandle,
-              children: /*#__PURE__*/jsx("div", {
-                className: nestedDrawerHandle,
-                children: /*#__PURE__*/jsx("div", {
-                  className: nestedDrawerHandleLine
-                })
-              })
-            }), /*#__PURE__*/jsxs("div", {
-              className: nestedDrawer,
-              children: [((_viewHandler$settings2 = viewHandler.settingsState.nestedDrawer) === null || _viewHandler$settings2 === void 0 ? void 0 : _viewHandler$settings2.title) && /*#__PURE__*/jsx("div", {
-                className: classnames(drawerHeader),
-                children: viewHandler.settingsState.nestedDrawer.title
-              }), /*#__PURE__*/jsxs("div", {
-                className: classnames(scrollWrapper),
-                children: [(_viewHandler$settings3 = viewHandler.settingsState.nestedDrawer) === null || _viewHandler$settings3 === void 0 ? void 0 : _viewHandler$settings3.content, /*#__PURE__*/jsx("div", {
-                  className: bottomSpacer
-                })]
-              })]
-            })]
-          })]
-        })]
-      })
-    })
-  });
-};
-var SettingsBottomDrawer$1 = observer(SettingsBottomDrawer);
-
-export { SettingsBottomDrawer$1 as default };