import { s as styleInject, u as useViewHandler } from './index-bbdfb97a.js';
import classnames from 'classnames';
import { toJS } from 'mobx';
import { observer } from 'mobx-react-lite';
import 'react';
import { jsx, Fragment } 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 '@crystaldesign/web-planner-logic';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var infoContainer = "info-container-7yeog";
var mobile = "mobile-EMOn-";
var css_248z = ".info-container-7yeog {\n  position: absolute;\n  top: 0;\n  right: 0;\n  background-color: rgba(248, 248, 248, 0.75);\n  z-index: 800;\n  width: 300px;\n}\n\n.mobile-EMOn-.info-container-7yeog {\n  bottom: 0;\n  left: 0;\n  top: auto;\n  top: initial;\n  width: 100%;\n}\n";
styleInject(css_248z);

var ProductInfo = function ProductInfo(props) {
  var viewHandler = useViewHandler();
  return /*#__PURE__*/jsx(Fragment, {
    children: viewHandler.settingsState.infoBoxContent && /*#__PURE__*/jsx("div", {
      className: classnames(infoContainer, viewHandler.uiState.isInMobileView ? mobile : undefined),
      children: viewHandler.settingsState.infoBoxContent && toJS(viewHandler.settingsState.infoBoxContent.content)
    })
  });
};
var ProductInfo$1 = observer(ProductInfo);

export { ProductInfo$1 as default };
