import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import classnames from 'classnames';
import { useEffect } from 'react';
import Inputbox from './index-8f28539b.js';
import Product from './index-9842a3d5.js';
import Settings from './index-34b39633.js';
import TabGroup from './index-04b36d55.js';
import NavigationButtons from './index-d48ce492.js';
import { useDivaCore } from '@crystaldesign/diva-core';
import BasketAction from './index-fe862dce.js';
import { observer } from 'mobx-react-lite';
import BasketMobile from './index-5f476063.js';
import ProgressBar from './index-69223f57.js';
import { jsxs, Fragment, jsx } 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';
import './index-3bcdb4a8.js';
import './index-c6e30dc7.js';
import './index-607ce1b1.js';
import './index-e8768440.js';
import './index-105eab2c.js';
import 'sift';
import './index-0d3bfd91.js';
import './index-2b5bdfe1.js';
import './index-caff71dc.js';
import './index-5cb692e9.js';
import './index.module-d6f043d2.js';
import './index-04a7a9b4.js';
import './index-755074ae.js';
import '@mui/icons-material/Block';
import '@mui/icons-material/Warning';
import './index-db439036.js';
import 'react-dropdown';
import './index-7f2e9c31.js';
import './index-4b3e6bbf.js';
import './index-69271b96.js';
import './index-9a965a68.js';
import '@crystaldesign/content-box';
import './index-e9a81262.js';
import './index-2f37b9f2.js';
import './index-bea5c228.js';
import './index-014a5003.js';
import 'swiper/react';
import 'swiper/modules';
import './UnlockCard-575022e0.js';
import './index-ce21cd4d.js';
import './index-6a697eea.js';
import './index-ea5e3e90.js';
import './index-69fd5e9e.js';
import './index-079ef135.js';
import './index-4b48794b.js';
import 'react-laag';
import './index.module-25687dd9.js';
import './index-3f40a92d.js';
import './index-66fd1759.js';
import './index-8a330776.js';
import './index-4fda4c71.js';
import './index-d896efe9.js';
import './index.module-fe49e10f.js';
import './index-6051ac01.js';
import './index-ec31a7cb.js';
import './index-79fbb400.js';
import './index-2e39dac3.js';
import './index-1641324b.js';
import './index-7635bafb.js';
import './index-0e0e6ac6.js';
import './index-a1cef81d.js';
import './index-4c03ac5c.js';
import './index-10d8be2f.js';
import './index-b7364bb1.js';
import './index-a253bbbf.js';
import './index-4ca1affe.js';
import 'rc-slider';
import './index-c44088dc.js';
import './index-e4d1ba18.js';
import './index-d5bb9bda.js';
import './index-dd2aabd2.js';
import './index-eb98a8c6.js';
import 'react-confetti-explosion';
import './index-d0331808.js';
import './index-7167c5bc.js';
import './index-5a146745.js';
import 'react-qr-code';
import './index-c648d661.js';
import './useCustomDimensions-8be02680.js';
import './index-c0a41b5b.js';
import './ussIsSticky-2f6bc37b.js';
import './index-290c519e.js';
import './index-be7a52a8.js';
import './index-9c4f9dc2.js';
import './index.module-613d19d3.js';
import './index-23081351.js';
import './index-b14a4a7c.js';
import './index-fdf81349.js';
import './index-688fe1aa.js';
import './index-49b01da7.js';
import './index-f4a37353.js';
import './index.module-0226fe2f.js';
import './index-737069b2.js';
import './index-2ae3382c.js';
import './index-a31442c6.js';
import './index-e3b53900.js';
import '@mui/material';
import './index-0e3e6e21.js';
import './index-ffed620d.js';
import './index-45703fc2.js';
import './index-f4e09e5d.js';
import './index-98c25b7b.js';
import './index.module-f05b48c3.js';

var wcConfigurator = "wcConfigurator-YOuy8";
var landscape = "landscape-EyFBs";
var portrait = "portrait-XiOPl";
var wcConfiguratorProduct = "wcConfigurator-product-Ovdqk";
var minExpanded = "min-expanded-aFvtw";
var wcConfiguratorSettingsWrapper = "wc-configurator-settings-wrapper-ymkif";
var expanded = "expanded-LXnio";
var maxExpanded = "max-expanded-Q2hOy";
var wcConfiguratorSettings = "wcConfigurator-settings-OLzdK";
var wcConfiguratorSteps = "wcConfigurator-steps-1--dZ";
var closeButtonVisible = "close-button-visible-y3GY8";
var wcConfiguratorSettingsActions = "wcConfigurator-settings-actions-xqcr5";
var wcConfiguratorAction = "wcConfigurator-action-ycd5b";
var mobileActionAfterTabgroups = "mobile-action-after-tabgroups-mgMRu";
var tablet = "tablet-W9NOW";
var css_248z = ".wcConfigurator-YOuy8 {\n  position: relative;\n\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  font-family: var(--diva-typography-font-family);\n  font-weight: 100;\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  overscroll-behavior-y: contain;\n  background-color: var(--configuratorBackgroundColor);\n}\n\n.wcConfigurator-YOuy8 *,\n.wcConfigurator-YOuy8 *::before,\n.wcConfigurator-YOuy8 *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wcConfigurator-YOuy8.landscape-EyFBs {\n  height: 100%;\n  width: 100%;\n}\n\n.wcConfigurator-YOuy8.portrait-XiOPl {\n  height: 100%;\n  width: 100%;\n}\n\n/******************************************Product*******************************************/\n\n.wcConfigurator-product-Ovdqk {\n  position: absolute;\n  width: 63%;\n  max-width: calc(100% - 564px);\n  left: 0px;\n  top: 0;\n  height: 100%;\n}\n.min-expanded-aFvtw .wcConfigurator-product-Ovdqk {\n  width: calc(100% - 128px - 16px);\n  max-width: none;\n  max-width: initial;\n}\n\n.wc-configurator-settings-wrapper-ymkif {\n  position: absolute;\n  z-index: 600;\n  height: calc(100% - 32px);\n  width: calc(37% - 16px);\n  min-width: 550px;\n  right: 0;\n  padding: 16px 16px 16px 0;\n  background-color: var(--settingsBackgroundColor);\n  transition: width 0.45s;\n  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);\n}\n\n.expanded-LXnio .wc-configurator-settings-wrapper-ymkif {\n  width: 70%;\n}\n\n.min-expanded-aFvtw .wc-configurator-settings-wrapper-ymkif {\n  width: calc(128px);\n  min-width: 0;\n  min-width: initial;\n}\n.max-expanded-Q2hOy .wc-configurator-settings-wrapper-ymkif {\n  width: calc(100% - 16px);\n  z-index: 801;\n}\n\n/**************************************ConfigPalette***************************************/\n.wcConfigurator-settings-OLzdK {\n  position: absolute;\n  width: calc(100% - 128px - 4px - 16px);\n\n  overflow-y: hidden;\n  overflow-x: hidden;\n  overflow: visible;\n  z-index: 100;\n  right: calc(128px + 4px + 16px);\n  top: 16px;\n  height: calc(100% - 32px - 4px - 50px);\n}\n\n/**************************************TabGroup********************************************/\n\n.wcConfigurator-steps-1--dZ {\n  position: absolute;\n  z-index: 300;\n  right: 16px;\n  top: 16px;\n  height: calc(100% - 32px - 4px - 50px);\n  width: 128px;\n}\n.close-button-visible-y3GY8 .wcConfigurator-steps-1--dZ {\n  top: 80px;\n  height: calc(100% - 32px - 4px - 50px - 64px);\n}\n\n/************************************Navigaton Buttons*************************************/\n\n.wcConfigurator-settings-actions-xqcr5 {\n  position: absolute;\n  width: calc(100% - 128px - 4px - 16px);\n  height: 50px;\n  right: calc(128px + 4px + 16px);\n  bottom: 16px;\n  z-index: 200;\n}\n\n.min-expanded-aFvtw .wcConfigurator-settings-actions-xqcr5 {\n  overflow: hidden;\n}\n\n/*************************************Basket Button****************************************/\n.wcConfigurator-action-ycd5b {\n  position: absolute;\n  width: 128px;\n  height: 50px;\n  right: 16px;\n  bottom: 16px;\n  z-index: 200;\n}\n\n/****************************************Settings- Expanded *******************************/\n.expanded-LXnio .wcConfigurator-settings-OLzdK,\n.max-expanded-Q2hOy .wcConfigurator-settings-OLzdK,\n.expanded-LXnio .wcConfigurator-settings-actions-xqcr5,\n.max-expanded-Q2hOy .wcConfigurator-settings-actions-xqcr5 {\n  width: calc(100% - 128px - 16px - 4px);\n}\n\n.wcConfigurator-YOuy8.portrait-XiOPl,\n.landscape-EyFBs.wcConfigurator-YOuy8 {\n  padding: 0;\n  padding: initial;\n  overflow: hidden;\n}\n/*********************************************************************Mobile Landscape***********************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Landscape ****************************/\n.landscape-EyFBs .wcConfigurator-product-Ovdqk {\n  width: 100%;\n  height: 100%;\n  top: 0px;\n  left: 0px;\n  max-width: none;\n  max-width: initial;\n}\n\n/*************************ConfigPalette -- Mobile Landscape ***************************/\n\n.landscape-EyFBs .wcConfigurator-settings-OLzdK {\n  display: none;\n}\n\n/*configuratorPalette wird nach unten aus dem Blickfeld geschoben*/\n/* .landscape.settings-hidden .wcConfigurator-settings {\n  top: 100%;\n} */\n\n/*****************************TabGroup -- Mobile Landscape ****************************/\n\n.landscape-EyFBs .wcConfigurator-steps-1--dZ {\n  display: none;\n}\n\n/******************Navigaton Buttons -- Mobile Landscape ******************************/\n.landscape-EyFBs .wcConfigurator-settings-actions-xqcr5 {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Landscape*********************************/\n.landscape-EyFBs .wcConfigurator-action-ycd5b {\n  display: none;\n}\n\n/*********************************************************************Mobile Portrait************************************************************************/\n\n/**********************3D / 2D Bereich -- Mobile Portrait *****************************/\n.portrait-XiOPl .wcConfigurator-product-Ovdqk {\n  top: 0px;\n  left: 0px;\n  height: var(--configuratorProductHeight);\n  transition: height 0.2s ease-out;\n  width: 100%;\n  max-width: none;\n  max-width: initial;\n}\n\n/*************************ConfigPalette -- Mobile Portrait ****************************/\n\n.portrait-XiOPl .wcConfigurator-settings-OLzdK {\n  left: 0px;\n  top: auto;\n  top: initial;\n  transition: height 0.2s ease-out;\n  bottom: 0px;\n  width: 100%;\n  z-index: 1000;\n}\n\n/*****************************TabGroup -- Mobile Portrait *****************************/\n\n.portrait-XiOPl .wcConfigurator-steps-1--dZ {\n  position: relative;\n  right: auto;\n  right: initial;\n  top: auto;\n  top: initial;\n  transition: none 0s ease 0s;\n  transition: initial;\n  flex-grow: 10;\n  height: var(--configuratorTabGroupHeight);\n  width: 100%;\n}\n\n/******************Navigaton Buttons -- Mobile Portrait *******************************/\n\n.portrait-XiOPl .wcConfigurator-settings-actions-xqcr5 {\n  display: none;\n  bottom: 0px;\n  width: calc(100% - 10px);\n\n  height: calc(var(--configuratorActionHeight) - 5px);\n  margin: 0 5px 5px 5px;\n  padding-top: 0px;\n  right: 0px;\n}\n\n/*********************Basket Button-- Mobile Portrait *********************************/\n\n.portrait-XiOPl .wcConfigurator-action-ycd5b,\n.portrait-XiOPl.settings-hidden-NnHMW .wcConfigurator-action-ycd5b {\n  display: none;\n}\n\n/*********************Basket Button-- Mobile Portrait onTop *********************************/\n\n.mobile-action-after-tabgroups-mgMRu {\n  position: relative;\n  transition: bottom 0.2s ease-out;\n  width: 50px;\n  height: var(--configuratorTabGroupHeight);\n  background: no-repeat url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2222%22 viewBox%3D%220 0 24 22%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M1 1H3.70647C4.17122 1 4.57471 1.32018 4.68031 1.77277L5.66667 6M5.66667 6L7.81969 15.2272C7.92529 15.6798 8.32878 16 8.79353 16H19.7192C20.1781 16 20.5781 15.6877 20.6894 15.2425L22.6894 7.24253C22.8472 6.61139 22.3698 6 21.7192 6H5.66667Z%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2210%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3Ccircle cx%3D%2218%22 cy%3D%2220%22 r%3D%221.25%22 stroke%3D%22white%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\") center center var(--primaryColor);\n  background-size: 37%;\n  z-index: 600;\n}\n\n.landscape-EyFBs,\n.portrait-XiOPl {\n  --configuratorActionHeight: 50px;\n  --configuratorTabGroupHeight: 38px;\n}\n\n.tablet-W9NOW {\n  --configuratorTabGroupHeight: 50px;\n  --mobile-tabgroup-drawer-border-radius: 16px;\n}\n\n.wcConfigurator-YOuy8 ::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n.wcConfigurator-YOuy8 ::-webkit-scrollbar-track {\n  background: #dfdfdf;\n  border-radius: 3px;\n}\n.wcConfigurator-YOuy8 ::-webkit-scrollbar-thumb {\n  background: #b1b1b1;\n  border-radius: 3px;\n}\n";
styleInject(css_248z);

var Standard = function Standard(_ref) {
  _objectDestructuringEmpty(_ref);
  var viewHandler = useViewHandler();
  var _useDivaCore = useDivaCore(),
    isFullscreenComponent = _useDivaCore.state.isFullscreenComponent;
  useEffect(function () {
    viewHandler.layoutRendered = true;
    viewHandler.initCSSVariablesObj(cssVariables);
  }, []);
  return /*#__PURE__*/jsxs(Fragment, {
    children: [/*#__PURE__*/jsx("div", {
      ref: function ref(configuratorRef) {
        return viewHandler.uiState.setConfiguratorRef(configuratorRef);
      },
      style: {
        pointerEvents: viewHandler.uiState.configuratorDisabled ? 'none' : undefined
      },
      hidden: viewHandler.uiState.configuratorHidden,
      id: "wcConfigurator",
      className: classnames(wcConfigurator, viewHandler.uiState.configSettingsIsExpanded ? expanded : undefined, viewHandler.uiState.isMobileLandscape ? landscape : undefined, viewHandler.uiState.isMobilePortrait ? portrait : undefined, viewHandler.uiState.isTablet ? tablet : undefined, viewHandler.uiState.configSettingsIsMinExpanded ? minExpanded : undefined, viewHandler.uiState.configSettingsIsMaxExpanded ? maxExpanded : undefined, isFullscreenComponent ? closeButtonVisible : undefined),
      children: /*#__PURE__*/jsxs("div", {
        id: "wcConfigurator-wrapper",
        ref: function ref(wrapperRef) {
          return viewHandler.uiState.setWrapperRef(wrapperRef);
        },
        style: {
          width: '100%',
          height: '100%',
          position: 'absolute',
          bottom: 0,
          left: 0
        },
        children: [/*#__PURE__*/jsx(Product, {
          className: wcConfiguratorProduct
        }), viewHandler.uiState.isInMobileView ? /*#__PURE__*/jsx(Settings, {
          tabgroupElement: /*#__PURE__*/jsxs(Fragment, {
            children: [/*#__PURE__*/jsx(TabGroup, {
              className: wcConfiguratorSteps,
              showCloseButtonInMobile: isFullscreenComponent ? 'left' : undefined
            }), /*#__PURE__*/jsx(BasketMobile, {
              className: mobileActionAfterTabgroups
            }), /*#__PURE__*/jsx(ProgressBar, {})]
          })
        }) : /*#__PURE__*/jsxs("div", {
          className: wcConfiguratorSettingsWrapper,
          children: [/*#__PURE__*/jsx(TabGroup, {
            className: wcConfiguratorSteps
          }), /*#__PURE__*/jsx(Settings, {
            className: wcConfiguratorSettings
          }), /*#__PURE__*/jsx(NavigationButtons, {
            className: wcConfiguratorSettingsActions,
            showCheckoutButtons: true
          }), /*#__PURE__*/jsx(BasketAction, {
            containerClassName: wcConfiguratorAction,
            showCheckoutButtons: false
          })]
        })]
      })
    }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
  });
};
var cssVariables = {
  '--primaryColor': '#d60084',
  '--secondaryColor': '#4b4b4b',
  '--thirdColor': '#e5e5e5e5',
  '--articlePosNrRadius': '50%',
  '--articlePosNrSize': '1.5rem',
  '--galleryItemRadius': '50%',
  '--galleryItemRowCount': '5',
  '--galleryItemMargin': '0.5%',
  '--galleryItemRowCountSmall': '6',
  '--galleryItemMarginSmall': '0.3%',
  '--galleryItemBorder': '0px',
  '--galleryItemBorderColor': '#e8e9ed',
  '--galleryItemBorderSelColor': 'var(--secondaryColor)',
  '--galleryItemBorderHoverColor': 'var(--thirdColor)',
  '--fontWeight1': '300',
  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0, 0.3)',
  '--tabGroupBackground': 'unset',
  '--settingsBackgroundColor': 'rgba(248, 248, 248, 0.9)',
  '--settingsScrollerPaddingTopBottom': '0px',
  '--settingsScrollerPaddingRight': '12px',
  '--settingsScrollerPaddingLeft': '12px',
  '--configuratorActionHeight': '50px',
  '--configuratorActionForthWidth': 'calc(100% - 56px)',
  '--configuratorActionBackWidth': '50px',
  '--globalBorderRadius': '3px',
  '--mobile-tabgroup-drawer-border-radius': '12px',
  '--buttons-border-radius': '8px'
};
var index = observer(Standard);

export { index as default };
