import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import { useEffect } from 'react';
import Inputbox from './index-8f28539b.js';
import Settings from './index-34b39633.js';
import TabGroup from './index-04b36d55.js';
import { observer } from 'mobx-react-lite';
import classnames from 'classnames';
import Toolbar from './index-cb31a4f0.js';
import NavigationButtons from './index-d48ce492.js';
import ContentItemWrapper from './index-b28b0372.js';
import { jsxs, Fragment, 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';
import '@babel/runtime/helpers/objectDestructuringEmpty';
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-f01ffae4.js';
import 'react-dom';
import './index-78918709.js';
import 'react-rnd';
import '@crystaldesign/content-item';

var wcConfigurator = "wcConfigurator-XqlAg";
var wcConfiguratorSteps = "wc-configurator-steps-KdP9s";
var mobile = "mobile-PPTgR";
var wcConfiguratorSettings = "wc-configurator-Settings-dVmBR";
var wcConfiguratorSettingsActions = "wcConfigurator-settings-actions-yVOyu";
var css_248z = ".wcConfigurator-XqlAg {\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  flex-direction: column;\n  background-color: var(--configuratorBackgroundColor);\n}\n\n.wcConfigurator-XqlAg *,\n.wcConfigurator-XqlAg *::before,\n.wcConfigurator-XqlAg *::after {\n  box-sizing: content-box;\n  box-sizing: initial;\n}\n\n.wc-configurator-steps-KdP9s {\n  height: 56px;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  margin: 0 8px;\n}\n.mobile-PPTgR .wc-configurator-steps-KdP9s {\n  height: 40px;\n}\n\n.wc-configurator-Settings-dVmBR {\n  height: calc(100% - 56px - 42px - 40px);\n  position: relative;\n  border-right: 1px solid #e6e6e6;\n}\n\n.mobile-PPTgR .wc-configurator-Settings-dVmBR {\n  height: calc(100% - 40px - 42px - 40px);\n}\n\n.wcConfigurator-settings-actions-yVOyu {\n  height: 40px;\n  z-index: 1001;\n}\n\n/* antd Tabs – wysiwyg tab group, navigation only (hide content pane) */\n.wysiwyg-tab-group-tabs.ant-tabs {\n  height: 100%;\n}\n\n.wysiwyg-tab-group-tabs.ant-tabs .ant-tabs-content {\n  display: none;\n}\n\n.wysiwyg-tab-group-tabs.ant-tabs .ant-tabs-nav {\n  margin-bottom: 0;\n}\n\n/* Dark mode – matches backoffice */\n.darkmode .wcConfigurator-XqlAg,\nbody.darkmode .wcConfigurator-XqlAg {\n  --settingsBackgroundColor: transparent;\n}\n\n.darkmode .wc-configurator-Settings-dVmBR {\n  border-right-color: rgba(255, 255, 255, 0.12);\n}\n";
styleInject(css_248z);

var Wysiwyg = function Wysiwyg(props) {
  var _viewHandler$uiState$;
  var viewHandler = useViewHandler();
  useEffect(function () {
    viewHandler.layoutRendered = true;
    viewHandler.initCSSVariablesObj(cssVariables);
  }, []);
  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: classnames(wcConfigurator, viewHandler.getIsInMobileView() ? mobile : undefined),
      children: [/*#__PURE__*/jsx(Toolbar, {}), /*#__PURE__*/jsx(TabGroup, {
        className: wcConfiguratorSteps
      }), /*#__PURE__*/jsx(Settings, {
        className: wcConfiguratorSettings
      }), /*#__PURE__*/jsx(NavigationButtons, {
        className: wcConfiguratorSettingsActions,
        showBackButtonText: true,
        showCheckoutButtons: false
      }), /*#__PURE__*/jsx(ContentItemWrapper, {
        direction: "right",
        mountElement: (_viewHandler$uiState$ = viewHandler.uiState.configuratorRef) !== null && _viewHandler$uiState$ !== void 0 ? _viewHandler$uiState$ : undefined,
        drawerStyle: {
          zIndex: 3000,
          boxShadow: '2px 1px 4px rgba(0, 0, 0, 0.15)'
        }
      })]
    }), viewHandler.settingsState.inputBoxVisible && /*#__PURE__*/jsx(Inputbox, {})]
  });
};
var cssVariables = {
  '--primaryColor': '#df2927',
  '--secondaryColor': '#404040',
  '--thirdColor': '#8a8a8a',
  '--globalBorderRadius': '3px',
  '--galleryItemRadius': '3px',
  '--articlePosNrRadius': '3px',
  '--articlePosNrSize': '20.8px',
  '--settingsBackgroundColor': '#fefefe',
  '--settingsScrollerPaddingTopBottom': '0px',
  '--settingsScrollerPaddingRight': '30px',
  '--settingsScrollerPaddingLeft': '30px',
  '--tabGroupBackground': 'unset',
  '--foldArrowMarginRight': '16px',
  '--configuratorActionForthWidth': 'calc(50% - 3px)',
  '--configuratorActionBackWidth': 'calc(50% - 3px)',
  '--fontWeight1': '600',
  '--boxShadowHover': '0px 1px 4px rgba(0, 0, 0, 0.15)',
  '--boxShadowActive': '0px 1px 4px rgba(0, 0, 0, 0.3)'
};
var index = observer(Wysiwyg);

export { cssVariables, index as default };
