@crystaldesign/diva-web-planner-react 26.7.0-rc.10 → 26.7.0-rc.11

package/build/esm/index-f8298e48.js

@@ -0,0 +1,33 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import './index-4d73d4f0.js';
+import 'react';
+import DynamicMultiRender from 'react-dynamic-multi-render';
+import { jsx } from 'react/jsx-runtime';
+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';
+
+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 OrbitInteraction = function OrbitInteraction(props) {
+  return /*#__PURE__*/jsx(DynamicMultiRender, _objectSpread(_objectSpread({}, props), {}, {
+    componentName: "Product/ProductCenter/Planner3DImage/OrbitInteraction"
+  }));
+};
+
+export { OrbitInteraction as default };

package/build/esm/index-f9db88df.js

@@ -0,0 +1,48 @@
+import './index-4d73d4f0.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 BoxCopy = function BoxCopy(_ref) {
+  var rect = _ref.rect,
+    item = _ref.item,
+    plannerUIProps = _ref.plannerUIProps,
+    invertLeftRight = _ref.invertLeftRight;
+  return /*#__PURE__*/jsx("div", {
+    onClick: function onClick() {
+      var _item$clickFunction;
+      (_item$clickFunction = item.clickFunction) === null || _item$clickFunction === void 0 || _item$clickFunction.call(item, item.setId, Number(item.elementId), {
+        x: item.type == 'BoxCopyLeft' ? -1 : item.type == 'BoxCopyRight' ? 1 : 0,
+        y: item.type == 'BoxCopyTop' ? 1 : 0,
+        z: 0
+      });
+    },
+    style: {
+      left: rect.left + '%',
+      top: 100 - rect.top + '%'
+    },
+    className: classnames(plannerUIProps.classes.buttonGeneral, plannerUIProps.classes.copy.BoxPlannerCopy.copyGlobal, item.type == 'BoxCopyLeft' ? invertLeftRight ? plannerUIProps.classes.copy.BoxPlannerCopy.copyRight : plannerUIProps.classes.copy.BoxPlannerCopy.copyLeft : undefined, item.type == 'BoxCopyTop' ? plannerUIProps.classes.copy.BoxPlannerCopy.copyTop : undefined, item.type == 'BoxCopyRight' ? invertLeftRight ? plannerUIProps.classes.copy.BoxPlannerCopy.copyLeft : plannerUIProps.classes.copy.BoxPlannerCopy.copyRight : undefined)
+  });
+};
+var BoxCopy$1 = observer(BoxCopy);
+
+export { BoxCopy$1 as default };

package/build/esm/index-faba0290.js

@@ -0,0 +1,108 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { s as styleInject, u as useViewHandler } from './index-4d73d4f0.js';
+import { useRef, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import CheckoutFormNew from './index-c3d89a5f.js';
+import ProductCenter from './index-e3aa8810.js';
+import ContentItemWrapper from './index-44e4e5df.js';
+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/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-2a606238.js';
+import './index-e543c40c.js';
+import './index-37993405.js';
+import './index-1af30de0.js';
+import './index.module-4158980e.js';
+import './index-27e17811.js';
+import 'swiper/react';
+import 'swiper/modules';
+import './index-d2450f8f.js';
+import './index-f09c2b91.js';
+import '@babel/runtime/helpers/objectDestructuringEmpty';
+import './index-115a4736.js';
+import './index-74626623.js';
+import './index-f8298e48.js';
+import './index-6792203d.js';
+import './index-0c355065.js';
+import 'react-laag';
+import './index-ec8bb27a.js';
+import 'react-qr-code';
+import './index-196fffa2.js';
+import './index-400ddf4c.js';
+import './index-341a3b69.js';
+import '@crystaldesign/content-item';
+
+var arrow = "arrow-GTKSC";
+var css_248z = ".arrow-GTKSC {\n  bottom: 40px;\n  right: 8px;\n  position: absolute;\n  width: 70px;\n  height: 55px;\n  transform: rotate(90deg);\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 26 10%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%236f6f6f%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3EElement 1%3C%2Ftitle%3E%3Cg id%3D%22Ebene_2%22 data-name%3D%22Ebene 2%22%3E%3Cg id%3D%22Ebene_1-2%22 data-name%3D%22Ebene 1%22%3E%3Cpath class%3D%22cls-1%22 d%3D%22M10.5.5l5%2C4.29-5%2C4.71%22%2F%3E%3Cpath class%3D%22cls-1%22 d%3D%22M.5.5l5%2C4.29L.5%2C9.5%22%2F%3E%3Cpath class%3D%22cls-1%22 d%3D%22M20.5.5l5%2C4.29-5%2C4.71%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  background-repeat: no-repeat;\n  background-position: center center;\n  background-size: contain;\n  z-index: 300;\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["contentItemStartPos"];
+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(_ref) {
+  var _viewHandler$configSt2;
+  var contentItemStartPos = _ref.contentItemStartPos,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var viewHandler = useViewHandler();
+  var ref = useRef(null);
+  var onClick = function onClick() {
+    if (ref.current) {
+      var scrollTo = ref.current.getBoundingClientRect().height;
+      if (ref.current.scrollTop > 100) {
+        scrollTo = 0;
+      }
+      ref.current.scrollTo({
+        top: scrollTo,
+        behavior: 'smooth'
+      });
+    }
+  };
+  var setRef = function setRef(element) {
+    ref.current = element;
+    viewHandler.productState.setProductElement(element);
+  };
+  useEffect(function () {
+    var _viewHandler$configSt;
+    if (!viewHandler.uiState.isLoading && (_viewHandler$configSt = viewHandler.configState.paramters) !== null && _viewHandler$configSt !== void 0 && _viewHandler$configSt.checkout) {
+      onClick();
+    }
+  }, [(_viewHandler$configSt2 = viewHandler.configState.paramters) === null || _viewHandler$configSt2 === void 0 ? void 0 : _viewHandler$configSt2.checkout, viewHandler.uiState.isLoading]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    ref: setRef
+  }, props), {}, {
+    id: "wcConfigurator-product",
+    children: [!viewHandler.uiState.isLoading && /*#__PURE__*/jsx("div", {
+      className: arrow,
+      onClick: onClick
+    }), /*#__PURE__*/jsx(ProductCenter, {
+      style: {
+        height: 'calc(100% - 40px)',
+        width: 'calc(100% - 40px)',
+        top: 0,
+        margin: '20px'
+      }
+    }), !viewHandler.uiState.isLoading && viewHandler.divaWebPlanner.getBasket() !== undefined && /*#__PURE__*/jsx(CheckoutFormNew, {}), /*#__PURE__*/jsx(ContentItemWrapper, {
+      direction: contentItemStartPos
+    })]
+  }));
+};
+var Product$1 = observer(Product);
+
+export { Product$1 as default };

package/build/esm/index-fbf5cbfd.js

@@ -0,0 +1,312 @@
+import { s as styleInject, u as useViewHandler } from './index-4d73d4f0.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-0d361be2.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 };

package/build/esm/index-ffc8ca1b.js

@@ -0,0 +1,44 @@
+import { s as styleInject } from './index-4d73d4f0.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';
+
+var pdfButton = "pdfButton-4l4zL";
+var css_248z = ".pdfButton-4l4zL {\n  border-radius: 50%;\n  border: solid 2px var(--primaryColor);\n  width: 26px;\n  height: 26px;\n  cursor: pointer;\n  margin-left: 10px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.pdfButton-4l4zL img {\n  width: 80%;\n}\n";
+styleInject(css_248z);
+
+var pdfIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%23000000%22%3E%3Cpath%20d%3D%22M0%200h24v24H0V0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M20%202H8c-1.1%200-2%20.9-2%202v12c0%201.1.9%202%202%202h12c1.1%200%202-.9%202-2V4c0-1.1-.9-2-2-2zm0%2014H8V4h12v12zM4%206H2v14c0%201.1.9%202%202%202h14v-2H4V6zm12%206V9c0-.55-.45-1-1-1h-2v5h2c.55%200%201-.45%201-1zm-2-3h1v3h-1V9zm4%202h1v-1h-1V9h1V8h-2v5h1zm-8%200h1c.55%200%201-.45%201-1V9c0-.55-.45-1-1-1H9v5h1v-2zm0-2h1v1h-1V9z%22%2F%3E%3C%2Fsvg%3E";
+
+var PDFButton = function PDFButton(_ref) {
+  var pdfUrl = _ref.pdfUrl;
+  return /*#__PURE__*/jsx("div", {
+    className: pdfButton,
+    onClick: function onClick() {
+      return window.open(pdfUrl, '_blank');
+    },
+    children: /*#__PURE__*/jsx("img", {
+      src: pdfIcon
+    })
+  });
+};
+
+export { PDFButton as default };

package/build/esm/index.js

@@ -1,5 +1,5 @@
 import '@babel/runtime/helpers/defineProperty';
-export { A as AnalyzerComponentsProvider, G as GenericToolTip, M as MissingAnalyzerComponent, f as PlannerMsgItem, S as SettingsItemHeader, T as ToggleElement, V as ViewHandlerProvider, W as WebPlannerReact, h as default, a as useAnalyzerComponents, c as usePlannerUIHandler, u as useViewHandler } from './index-c5415355.js';
+export { A as AnalyzerComponentsProvider, G as GenericToolTip, M as MissingAnalyzerComponent, f as PlannerMsgItem, S as SettingsItemHeader, T as ToggleElement, V as ViewHandlerProvider, W as WebPlannerReact, h as default, a as useAnalyzerComponents, c as usePlannerUIHandler, u as useViewHandler } from './index-4d73d4f0.js';
 import 'react';
 import '@crystaldesign/diva-core';
 import 'react/jsx-runtime';

package/build/esm/index.module-0cdb0049.js

@@ -0,0 +1,25 @@
+import { s as styleInject } from './index-4d73d4f0.js';
+
+var wcBoxPlannerAddElement = "wcBoxPlanner_AddElement-LWKJQ";
+var wcBoxPlannerAddElementLeft = "wcBoxPlanner_AddElementLeft-sCzAl";
+var wcBoxPlannerAddElementTop = "wcBoxPlanner_AddElementTop-XO6vt";
+var wcBoxPlannerAddElementRight = "wcBoxPlanner_AddElementRight--dGaZ";
+var css_248z$3 = ".wcBoxPlanner_AddElement-LWKJQ {\n  border-radius: 0px !important;\n}\n\n.wcBoxPlanner_AddElement-LWKJQ {\n  height: var(--copyArrowSize);\n  width: var(--copyArrowSize);\n  background-repeat: no-repeat;\n  background-color: rgba(0, 0, 0, 0);\n  background-size: calc(var(--copyArrowSize) * 0.5);\n  background-position: left center;\n  position: absolute;\n  cursor: pointer;\n  transform-origin: top left;\n  z-index: 263;\n  margin-top: calc(var(--copyArrowSize) * -1.2);\n}\n\n.wcBoxPlanner_AddElementLeft-sCzAl {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2214%22 height%3D%2225%22 viewBox%3D%220 0 14 25%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1.47657 13.1203C1.15196 12.7895 0.989658 12.6242 0.989658 12.4198C0.989658 12.2154 1.15196 12.0501 1.47657 11.7193L11.8254 1.17541C12.5534 0.433651 12.9174 0.0627729 13.2282 0.189821C13.5391 0.316868 13.5391 0.836538 13.5391 1.87588L13.5391 22.9637C13.5391 24.0031 13.5391 24.5227 13.2282 24.6498C12.9174 24.7768 12.5534 24.4059 11.8254 23.6642L1.47657 13.1203Z%22 fill%3D%22%234A4A4A%22 stroke%3D%22white%22 stroke-width%3D%220%2C5px%22 stroke-linecap%3D%22round%22  %2F%3E%3C%2Fsvg%3E\");\n  margin-left: calc(var(--copyArrowSize) * -1);\n}\n\n.wcBoxPlanner_AddElementTop-XO6vt {\n  background-position: center center !important;\n}\n\n.wcBoxPlanner_AddElementTop-XO6vt {\n  transform: rotate(90deg);\n  margin-top: calc(var(--copyArrowSize) * -0.8);\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2214%22 height%3D%2225%22 viewBox%3D%220 0 14 25%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1.47657 13.1203C1.15196 12.7895 0.989658 12.6242 0.989658 12.4198C0.989658 12.2154 1.15196 12.0501 1.47657 11.7193L11.8254 1.17541C12.5534 0.433651 12.9174 0.0627729 13.2282 0.189821C13.5391 0.316868 13.5391 0.836538 13.5391 1.87588L13.5391 22.9637C13.5391 24.0031 13.5391 24.5227 13.2282 24.6498C12.9174 24.7768 12.5534 24.4059 11.8254 23.6642L1.47657 13.1203Z%22 fill%3D%22%234A4A4A%22 stroke%3D%22white%22 stroke-width%3D%220%2C5px%22 stroke-linecap%3D%22round%22  %2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcBoxPlanner_AddElementRight--dGaZ {\n  margin-left: calc(var(--copyArrowSize) * -0.3);\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2214%22 height%3D%2225%22 viewBox%3D%220 0 14 25%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M13.0291 11.7193C13.3537 12.0501 13.516 12.2154 13.516 12.4198C13.516 12.6242 13.3537 12.7895 13.0291 13.1203L2.68029 23.6642C1.95226 24.4059 1.58825 24.7768 1.27743 24.6498C0.966613 24.5227 0.966613 24.0031 0.966613 22.9637L0.966614 1.87588C0.966614 0.836538 0.966614 0.316868 1.27743 0.18982C1.58825 0.0627725 1.95226 0.43365 2.68029 1.17541L13.0291 11.7193Z%22 fill%3D%22%234A4A4A%22 stroke%3D%22lightgrey%22 stroke-width%3D%220%2C5px%22 stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n";
+styleInject(css_248z$3);
+
+var wc2DRotClock = "wc2DRot_Clock-N3u5r";
+var wc2DRotCounterClock = "wc2DRot_CounterClock-WrGZW";
+var wcPlanner3DRot = "wcPlanner_3DRot-CXUT7";
+var css_248z$2 = "/*STANDARD*/\n.wc2DRot_Clock-N3u5r {\n  background-size: 100%;\n  border-radius: 50%;\n  width: var(--rotSize);\n  height: var(--rotSize);\n  margin-top: calc(var(--rotSize) / -2);\n  margin-left: calc(var(--rotSize) / -2);\n  background-position: center center;\n  background-color: #f5f5f5;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 transform%3D%22rotate(90 20 20)%22 fill%3D%22%23F5F5F5%22%2F%3E%3Cpath d%3D%22M21.8657 10.7202L25.1613 13.4909L23.0233 17.0687%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M16.9885 30.2448C15.5631 28.5139 14.7485 26.2739 14.7485 23.8303C14.7485 18.2303 19.3304 13.6484 24.9304 13.6484%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  cursor: pointer;\n  z-index: 260;\n}\n\n.wc2DRot_Clock-N3u5r:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 transform%3D%22rotate(90 20 20)%22 fill%3D%22%23C4C4C4%22%2F%3E%3Cpath d%3D%22M21.8657 10.7202L25.1613 13.4909L23.0233 17.0687%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M16.9885 30.2448C15.5631 28.5139 14.7485 26.2739 14.7485 23.8303C14.7485 18.2303 19.3304 13.6484 24.9304 13.6484%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wc2DRot_CounterClock-WrGZW {\n  background-size: 100%;\n  border-radius: 50%;\n  width: var(--rotSize);\n  height: var(--rotSize);\n  margin-top: calc(var(--rotSize) / -2);\n  margin-left: calc(var(--rotSize) / -2);\n  background-position: center center;\n  cursor: pointer;\n  background-color: #f5f5f5;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 transform%3D%22rotate(90 20 20)%22 fill%3D%22%23F5F5F5%22%2F%3E%3Cpath d%3D%22M18.3994 10.6538L15.1627 13.375L17.2625 16.889%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M23.1896 29.8298C24.5896 28.1298 25.3896 25.9298 25.3896 23.5298C25.3896 18.0298 20.8896 13.5298 15.3896 13.5298%22 stroke%3D%22%23555050%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  z-index: 260;\n}\n\n.wc2DRot_CounterClock-WrGZW:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 transform%3D%22rotate(90 20 20)%22 fill%3D%22%23C4C4C4%22%2F%3E%3Cpath d%3D%22M18.3994 10.6538L15.1627 13.375L17.2625 16.889%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M23.1896 29.8298C24.5896 28.1298 25.3896 25.9298 25.3896 23.5298C25.3896 18.0298 20.8896 13.5298 15.3896 13.5298%22 stroke%3D%22%23555050%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.wcPlanner_3DRot-CXUT7 {\n  z-index: 262;\n  position: absolute;\n  height: 50px;\n  width: 50px;\n  margin-top: -25;\n  margin-left: -25;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2255%22   %09height%3D%2255%22   %09viewBox%3D%220 0 55 55%22   %09fill%3D%22none%22   %09xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%09%3Cellipse cx%3D%2227.5%22       %09%09cy%3D%2227.5%22       %09%09rx%3D%2227.5%22       %09%09ry%3D%2227.5%22       %09%09transform%3D%22rotate(90 27.5 27.5)%22       %09%09fill%3D%22%23F5F5F5%22%2F%3E%09%3Cpath d%3D%22M39.7251 20.7786L37.8951 24.6934L33.8709 23.5501M19.5289 21.1219C20.8367 19.2902 22.7968 17.9186 25.1659 17.2838C30.5952 15.829 36.2276 19.0809 37.6824 24.5102M15.6382 31.3574L18.5261 28.0496L22.2554 30.1955M35.9884 36.2525C34.1842 37.6833 31.8494 38.5009 29.3024 38.5009C23.4654 38.5009 18.6897 33.902 18.6897 28.2812%22    %09%09stroke%3D%22%234B4B4B%22    %09%09stroke-width%3D%221.5%22    %09%09stroke-linecap%3D%22round%22    %09%09stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  cursor: pointer;\n  transform-origin: center center;\n  background-size: contain;\n}\n\n.wcPlanner_3DRot-CXUT7:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2255%22   %09height%3D%2255%22   %09viewBox%3D%220 0 55 55%22   %09fill%3D%22none%22   %09xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%09%3Cellipse cx%3D%2227.5%22       %09%09cy%3D%2227.5%22       %09%09rx%3D%2227.5%22       %09%09ry%3D%2227.5%22       %09%09transform%3D%22rotate(90 27.5 27.5)%22       %09%09fill%3D%22%23C4C4C4%22%2F%3E%09%3Cpath d%3D%22M39.7251 20.7786L37.8951 24.6934L33.8709 23.5501M19.5289 21.1219C20.8367 19.2902 22.7968 17.9186 25.1659 17.2838C30.5952 15.829 36.2276 19.0809 37.6824 24.5102M15.6382 31.3574L18.5261 28.0496L22.2554 30.1955M35.9884 36.2525C34.1842 37.6833 31.8494 38.5009 29.3024 38.5009C23.4654 38.5009 18.6897 33.902 18.6897 28.2812%22    %09%09stroke%3D%22%234B4B4B%22    %09%09stroke-width%3D%221.5%22    %09%09stroke-linecap%3D%22round%22    %09%09stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n";
+styleInject(css_248z$2);
+
+var wcPlannerDistanceToGround = "wcPlanner_DistanceToGround-x51NC";
+var wcPlannerArrowDistanceToGround = "wcPlanner_ArrowDistanceToGround-9JNDN";
+var css_248z$1 = ".wcPlanner_DistanceToGround-x51NC {\n  width: 87px;\n  height: 30px;\n  border-radius: 3px;\n  font-size: 15px;\n  line-height: 30px;\n  text-align: left;\n  margin-left: 3px;\n  background-color: rgba(230, 230, 230, 0.637);\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n  z-index: 262;\n  margin-top: -30px;\n  position: absolute;\n  background-position: 7% 59%;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2211%22 height%3D%227%22 viewBox%3D%220 0 11 7%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M10.4375 0.688354L6.15179 5.68835L1.4375 0.688354%22 stroke%3D%22%236F6F6F%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-size: 17px 17px;\n  background-repeat: no-repeat;\n}\n.wcPlanner_ArrowDistanceToGround-9JNDN {\n  width: 30px;\n  height: 30px;\n  z-index: 262;\n}\n\n.wcPlanner_DistanceToGround-x51NC > div {\n  margin-left: 29px;\n}\n";
+styleInject(css_248z$1);
+
+var wcPlanner3DMove = "wcPlanner_3DMove-2lBby";
+var css_248z = ".wcPlanner_3DMove-2lBby {\n  z-index: 262;\n  position: absolute;\n  height: 50px;\n  width: 50px;\n  margin-top: -25;\n  margin-left: -25;\n  cursor: pointer;\n  transform-origin: center center;\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2255%22   %09height%3D%2255%22   %09viewBox%3D%220 0 55 55%22   %09fill%3D%22none%22   %09xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%09%3Cellipse cx%3D%2227.5%22       %09%09cy%3D%2227.5%22       %09%09rx%3D%2227.5%22       %09%09ry%3D%2227.5%22       %09%09transform%3D%22rotate(90 27.5 27.5)%22       %09%09fill%3D%22%23F5F5F5%22%2F%3E%09%3Cpath d%3D%22M23.9128 18.0246L27.4164 15.125L30.7293 18.0246%22    %09%09stroke%3D%22%234A4A4A%22    %09%09stroke-width%3D%221.5%22    %09%09stroke-miterlimit%3D%2210%22    %09%09stroke-linecap%3D%22round%22    %09%09stroke-linejoin%3D%22round%22%2F%3E%09%3Cpath d%3D%22M27.4067 15.1649V23.5367%22    %09%09stroke%3D%22%234A4A4A%22    %09%09stroke-width%3D%221.5%22    %09%09stroke-miterlimit%3D%2210%22    %09%09stroke-linecap%3D%22round%22    %09%09stroke-linejoin%3D%22round%22%2F%3E%09%3Cpath d%3D%22M36.9751 23.9135L39.8747 27.417L36.9751 30.7299%22    %09%09stroke%3D%22%234A4A4A%22    %09%09stroke-width%3D%221.5%22    %09%09stroke-miterlimit%3D%2210%22    %09%09stroke-linecap%3D%22round%22    %09%09stroke-linejoin%3D%22round%22%2F%3E%09%3Cpath d%3D%22M39.8743 27.4169L31.4631 27.4067%22    %09%09stroke%3D%22%234A4A4A%22    %09%09stroke-width%3D%221.5%22    %09%09stroke-miterlimit%3D%2210%22    %09%09stroke-linecap%3D%22round%22    %09%09stroke-linejoin%3D%22round%22%2F%3E%09%3Cpath d%3D%22M31.0865 36.9757L27.5829 39.8753L24.27 36.9757%22    %09%09stroke%3D%22%234A4A4A%22    %09%09stroke-width%3D%221.5%22    %09%09stroke-miterlimit%3D%2210%22    %09%09stroke-linecap%3D%22round%22    %09%09stroke-linejoin%3D%22round%22%2F%3E%09%3Cpath d%3D%22M27.5833 39.8744L27.5935 31.4632%22    %09%09stroke%3D%22%234A4A4A%22    %09%09stroke-width%3D%221.5%22    %09%09stroke-miterlimit%3D%2210%22    %09%09stroke-linecap%3D%22round%22    %09%09stroke-linejoin%3D%22round%22%2F%3E%09%3Cpath d%3D%22M18.0249 31.0878L15.1252 27.5842L18.0249 24.2713%22    %09%09stroke%3D%22%234A4A4A%22    %09%09stroke-width%3D%221.5%22    %09%09stroke-miterlimit%3D%2210%22    %09%09stroke-linecap%3D%22round%22    %09%09stroke-linejoin%3D%22round%22%2F%3E%09%3Cpath d%3D%22M15.125 27.5834L23.5362 27.5937%22    %09%09stroke%3D%22%234A4A4A%22    %09%09stroke-width%3D%221.5%22    %09%09stroke-miterlimit%3D%2210%22    %09%09stroke-linecap%3D%22round%22    %09%09stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n  background-size: contain;\n}\n\n.wcPlanner_3DMove-2lBby:hover {\n  background-image: url(\"data:image/svg+xml,%3Csvg width%3D%2255%22 height%3D%2255%22 viewBox%3D%220 0 55 55%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cellipse cx%3D%2227.5%22 cy%3D%2227.5%22 rx%3D%2227.5%22 ry%3D%2227.5%22 transform%3D%22rotate(90 27.5 27.5)%22 fill%3D%22%23C4C4C4%22%2F%3E%3Cpath d%3D%22M23.9128 18.0246L27.4164 15.125L30.7293 18.0246%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M27.4067 15.1649V23.5367%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M36.9751 23.9135L39.8747 27.417L36.9751 30.7299%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M39.8743 27.4169L31.4631 27.4067%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M31.0865 36.9757L27.5829 39.8753L24.27 36.9757%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M27.5833 39.8744L27.5935 31.4632%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M18.0249 31.0878L15.1252 27.5842L18.0249 24.2713%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Cpath d%3D%22M15.125 27.5834L23.5362 27.5937%22 stroke%3D%22%234A4A4A%22 stroke-width%3D%221.5%22 stroke-miterlimit%3D%2210%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n";
+styleInject(css_248z);
+
+export { wcBoxPlannerAddElementLeft as a, wcBoxPlannerAddElementTop as b, wcBoxPlannerAddElementRight as c, wcPlanner3DRot as d, wcPlanner3DMove as e, wcPlannerDistanceToGround as f, wcPlannerArrowDistanceToGround as g, wc2DRotClock as h, wc2DRotCounterClock as i, wcBoxPlannerAddElement as w };