@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
72 lines (71 loc) • 2.58 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import React from 'react';
import { styled } from '@mui/material';
import { Popper as PopperUnstyled, Option as OptionUnstyled, optionClasses as optionUnstyledClasses, Select as SelectUnstyled } from '@mui/base';
import { jsx as _jsx } from "react/jsx-runtime";
export var Root = styled('div')({});
export var WrapperIcon = styled('button')({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '32px',
backgroundColor: 'transparent',
border: 'none',
cursor: 'pointer'
});
var Popper = styled(PopperUnstyled)({
zIndex: 1
});
var Listbox = 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
export var Select = function Select(props) {
var slots = Object.assign({
root: WrapperIcon,
listbox: Listbox,
popup: Popper
}, props.slots);
return /*#__PURE__*/_jsx(SelectUnstyled, Object.assign({}, props, {
slots: slots
}));
};
export var Option = styled(OptionUnstyled)(function (_ref) {
var theme = _ref.theme;
return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
listStyle: 'none',
padding: '8px',
borderRadius: '0.45em',
cursor: 'default',
'&:last-of-type': {
borderBottom: 'none'
}
}, "&.".concat(optionUnstyledClasses.selected), {
backgroundColor: theme.palette.mode === 'dark' ? '#003A75' : '#DAECFF',
color: theme.palette.mode === 'dark' ? '#DAECFF' : '#003A75'
}), "&.".concat(optionUnstyledClasses.highlighted), {
backgroundColor: theme.palette.mode === 'dark' ? '#2D3843' : '#E7EBF0',
color: theme.palette.mode === 'dark' ? '#CDD2D7' : '#1A2027'
}), "&.".concat(optionUnstyledClasses.highlighted, ".").concat(optionUnstyledClasses.selected), {
backgroundColor: theme.palette.mode === 'dark' ? '#003A75' : '#DAECFF',
color: theme.palette.mode === 'dark' ? '#DAECFF' : '#003A75'
}), "&.".concat(optionUnstyledClasses.disabled), {
color: theme.palette.mode === 'dark' ? '#3E5060' : '#B2BAC2'
}), "&:hover:not(.".concat(optionUnstyledClasses.disabled, ")"), {
backgroundColor: theme.palette.mode === 'dark' ? '#2D3843' : '#E7EBF0',
color: theme.palette.mode === 'dark' ? '#CDD2D7' : '#1A2027'
}), '& img', {
marginRight: '10px'
});
});