import { s as styleInject } from './index-bbdfb97a.js';
import { observer } from 'mobx-react-lite';
import Arrow from './index-69271b96.js';
import 'react';
import { jsxs, 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 'classnames';
import 'qrcode.react';
import '@babel/runtime/helpers/typeof';
import 'flat';
import 'react-switch';
import 'react-countup';

var selectContainer = "select-container-IwjJt";
var select = "select-ftXa-";
var arrow = "arrow-vRzWc";
var css_248z = ".select-container-IwjJt {\n  position: relative;\n  width: calc(100% - 16px);\n}\n\n.select-ftXa- {\n  outline: none !important;\n}\n\n.select-ftXa- {\n  position: relative;\n  font-size: 16px;\n  color: #111;\n  line-height: 20px;\n  height: 30px;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  width: calc(100% - 16px);\n  border: 1px solid var(--select-border);\n  border-radius: 3px;\n  padding: 4px 8px;\n  cursor: pointer;\n  background-color: #fff;\n  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);\n}\n\n.arrow-vRzWc {\n  position: absolute;\n  top: 10px;\n  right: 12px;\n  z-index: 10;\n  pointer-events: none;\n}\n";
styleInject(css_248z);

var MobileDropdown = function MobileDropdown(_ref) {
  var onChange = _ref.onChange,
    mobileOptions = _ref.mobileOptions,
    selectedOption = _ref.selectedOption,
    id = _ref.id;
  return /*#__PURE__*/jsxs("div", {
    className: selectContainer,
    id: id,
    children: [/*#__PURE__*/jsx(Arrow, {
      open: false,
      className: arrow
    }), /*#__PURE__*/jsx("select", {
      className: select,
      onChange: onChange,
      value: selectedOption,
      children: mobileOptions.map(function (option) {
        return /*#__PURE__*/jsx("option", {
          value: option.codex,
          dangerouslySetInnerHTML: {
            __html: option.text + (!!option.price ? '  -  ' + option.price : '')
          }
        }, option.codex);
      })
    })]
  });
};
var MobileDropdown$1 = observer(MobileDropdown);

export { MobileDropdown$1 as default };
