@wulperstudio/cms/node/components/SelectCountry/styled.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WrapperIcon = exports.Select = exports.Root = exports.Option = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _material = require("@mui/material");
var _base = require("@mui/base");
var _jsxRuntime = require("react/jsx-runtime");
var Root = exports.Root = (0, _material.styled)('div')({});
var WrapperIcon = exports.WrapperIcon = (0, _material.styled)('button')({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '32px',
  backgroundColor: 'transparent',
  border: 'none',
  cursor: 'pointer'
});
var Popper = (0, _material.styled)(_base.Popper)({
  zIndex: 1
});
var Listbox = (0, _material.styled)('ul')({
  fontSize: '0.875rem',
  boxSizing: 'border-box',
  padding: '5px',
  margin: '10px 0',
  minWidth: '320px',
  maxHeight: '400px',
  background: '#fff',
  border: '1px solid #CDD2D7',
  borderRadius: '0.75em',
  overflow: 'auto',
  marginTop: '10px',
  outline: '0px'
});

// eslint-disable-next-line max-len
var Select = exports.Select = function Select(props) {
  var slots = Object.assign({
    root: WrapperIcon,
    listbox: Listbox,
    popup: Popper
  }, props.slots);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.Select, Object.assign({}, props, {
    slots: slots
  }));
};
var Option = exports.Option = (0, _material.styled)(_base.Option)(function (_ref) {
  var theme = _ref.theme;
  return (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
    listStyle: 'none',
    padding: '8px',
    borderRadius: '0.45em',
    cursor: 'default',
    '&:last-of-type': {
      borderBottom: 'none'
    }
  }, "&.".concat(_base.optionClasses.selected), {
    backgroundColor: theme.palette.mode === 'dark' ? '#003A75' : '#DAECFF',
    color: theme.palette.mode === 'dark' ? '#DAECFF' : '#003A75'
  }), "&.".concat(_base.optionClasses.highlighted), {
    backgroundColor: theme.palette.mode === 'dark' ? '#2D3843' : '#E7EBF0',
    color: theme.palette.mode === 'dark' ? '#CDD2D7' : '#1A2027'
  }), "&.".concat(_base.optionClasses.highlighted, ".").concat(_base.optionClasses.selected), {
    backgroundColor: theme.palette.mode === 'dark' ? '#003A75' : '#DAECFF',
    color: theme.palette.mode === 'dark' ? '#DAECFF' : '#003A75'
  }), "&.".concat(_base.optionClasses.disabled), {
    color: theme.palette.mode === 'dark' ? '#3E5060' : '#B2BAC2'
  }), "&:hover:not(.".concat(_base.optionClasses.disabled, ")"), {
    backgroundColor: theme.palette.mode === 'dark' ? '#2D3843' : '#E7EBF0',
    color: theme.palette.mode === 'dark' ? '#CDD2D7' : '#1A2027'
  }), '& img', {
    marginRight: '10px'
  });
});