@surveycake/rc
Version:
react component of surveycake
1,777 lines (1,696 loc) • 378 kB
JavaScript
import MUICssBaseline from '@material-ui/core/CssBaseline';
export { default as CssBaseline } from '@material-ui/core/CssBaseline';
import { createTheme, alpha, useTheme as useTheme$1, StylesProvider, ThemeProvider as ThemeProvider$2, makeStyles as makeStyles$1, withStyles, createStyles, styled } from '@material-ui/core/styles';
import React, { forwardRef, useState, useRef, useEffect, memo, useContext, useMemo, useCallback, Children, isValidElement, cloneElement, useImperativeHandle, createRef, createContext } from 'react';
import { ThemeProvider as ThemeProvider$1 } from 'emotion-theming';
import MuiAccordion$1 from '@material-ui/core/Accordion';
import MuiAccordionDetails$1 from '@material-ui/core/AccordionDetails';
import createEmotion from 'create-emotion';
import MuiAccordionSummary$1 from '@material-ui/core/AccordionSummary';
import MuiMenuItem$1 from '@material-ui/core/MenuItem';
import MUICheckbox from '@material-ui/core/Checkbox';
import Add from '@material-ui/icons/Add';
import AddCircleOutline from '@material-ui/icons/AddCircleOutline';
import ArrowBack from '@material-ui/icons/ArrowBack';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import ArrowDropDownRounded from '@material-ui/icons/ArrowDropDownRounded';
import ArrowDropUpRounded from '@material-ui/icons/ArrowDropUpRounded';
import ArrowForward from '@material-ui/icons/ArrowForward';
import ArrowRightAlt from '@material-ui/icons/ArrowRightAlt';
import CameraAlt from '@material-ui/icons/CameraAlt';
import ChatOutlined from '@material-ui/icons/ChatOutlined';
import Cancel from '@material-ui/icons/Cancel';
import Check$2 from '@material-ui/icons/Check';
import CheckBox from '@material-ui/icons/CheckBox';
import CheckCircle$2 from '@material-ui/icons/CheckCircle';
import Clear from '@material-ui/icons/Clear';
import Close from '@material-ui/icons/Close';
import CloudDownload from '@material-ui/icons/CloudDownload';
import CloudUpload from '@material-ui/icons//CloudUpload';
import Computer from '@material-ui/icons/Computer';
import CreditCard from '@material-ui/icons/CreditCard';
import Crop from '@material-ui/icons/Crop';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import DeleteOutlineOutlined from '@material-ui/icons/DeleteOutlineOutlined';
import Description from '@material-ui/icons/Description';
import DescriptionOutlined from '@material-ui/icons/DescriptionOutlined';
import DonutSmallIcon from '@material-ui/icons/DonutSmall';
import DragIndicator from '@material-ui/icons/DragIndicator';
import Edit from '@material-ui/icons/Edit';
import EmailOutlined from '@material-ui/icons/EmailOutlined';
import ErrorOutline from '@material-ui/icons/ErrorOutline';
import ExpandMore from '@material-ui/icons/ExpandMore';
import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
import FirstPage from '@material-ui/icons/FirstPage';
import Folder from '@material-ui/icons/Folder';
import FormatAlignCenter from '@material-ui/icons/FormatAlignCenter';
import FormatAlignLeft from '@material-ui/icons/FormatAlignLeft';
import FormatAlignRight from '@material-ui/icons/FormatAlignRight';
import FormatBold from '@material-ui/icons/FormatBold';
import FormatColorFill from '@material-ui/icons/FormatColorFill';
import FormatItalic from '@material-ui/icons/FormatItalic';
import FormatListNumberedRtl$1 from '@material-ui/icons//FormatListNumberedRtl';
import FormatQuote from '@material-ui/icons/FormatQuote';
import FormatUnderlined from '@material-ui/icons/FormatUnderlined';
import GetApp from '@material-ui/icons/GetApp';
import Help from '@material-ui/icons/Help';
import HelpOutline from '@material-ui/icons/HelpOutline';
import History from '@material-ui/icons/History';
import HighlightOffIcon from '@material-ui/icons/HighlightOff';
import HowToVote from '@material-ui/icons/HowToVote';
import IndeterminateCheckBoxOutlined from '@material-ui/icons/IndeterminateCheckBoxOutlined';
import Info from '@material-ui/icons/Info';
import Input from '@material-ui/icons/Input';
import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
import KeyboardArrowUp from '@material-ui/icons/KeyboardArrowUp';
import LabelImportant from '@material-ui/icons/LabelImportant';
import Language from '@material-ui/icons/Language';
import LastPage from '@material-ui/icons/LastPage';
import Link$3 from '@material-ui/icons/Link';
import List from '@material-ui/icons/List';
import ListAlt from '@material-ui/icons/ListAlt';
import Lock$1 from '@material-ui/icons/Lock';
import LockOutlined from '@material-ui/icons/LockOutlined';
import LaunchOutlined from '@material-ui/icons/LaunchOutlined';
import LowPriority from '@material-ui/icons/LowPriority';
import LocalOfferOutlined from '@material-ui/icons/LocalOfferOutlined';
import LocalPrintshopOutlined from '@material-ui/icons/LocalPrintshopOutlined';
import Menu$1 from '@material-ui/icons/Menu';
import MoreHoriz from '@material-ui/icons/MoreHoriz';
import NavigateBefore from '@material-ui/icons/NavigateBefore';
import NavigateNext from '@material-ui/icons/NavigateNext';
import NotInterested from '@material-ui/icons/NotInterested';
import OpenInNew from '@material-ui/icons/OpenInNew';
import Person from '@material-ui/icons/Person';
import PhoneIphone from '@material-ui/icons/PhoneIphone';
import PictureAsPdf from '@material-ui/icons/PictureAsPdf';
import PostAdd from '@material-ui/icons/PostAdd';
import RadioButtonChecked from '@material-ui/icons/RadioButtonChecked';
import Redeem from '@material-ui/icons/Redeem';
import Refresh from '@material-ui/icons/Refresh';
import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
import ReportProblemRounded from '@material-ui/icons/ReportProblemRounded';
import SaveOutlined from '@material-ui/icons/SaveOutlined';
import Schedule from '@material-ui/icons/Schedule';
import Search$1 from '@material-ui/icons/Search';
import SendOutlined from '@material-ui/icons/SendOutlined';
import Settings from '@material-ui/icons/Settings';
import SettingsOutlined from '@material-ui/icons/SettingsOutlined';
import Share from '@material-ui/icons/Share';
import SmsOutlined from '@material-ui/icons/SmsOutlined';
import Sort$1 from '@material-ui/icons/Sort';
import Star$2 from '@material-ui/icons//Star';
import SwapVertIcon from '@material-ui/icons/SwapVert';
import TabletMac from '@material-ui/icons/TabletMac';
import TextFields$1 from '@material-ui/icons//TextFields';
import Title$1 from '@material-ui/icons//Title';
import Tune from '@material-ui/icons/Tune';
import VerifiedUser from '@material-ui/icons/VerifiedUser';
import ViewDayOutlined from '@material-ui/icons/ViewDayOutlined';
import ViewListRounded from '@material-ui/icons//ViewListRounded';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import VisibilityOutlined from '@material-ui/icons/VisibilityOutlined';
import VisibilityOffOutlined from '@material-ui/icons/VisibilityOffOutlined';
import WatchLater from '@material-ui/icons/WatchLater';
import WebAsset from '@material-ui/icons/WebAsset';
import Warning from '@material-ui/icons/Warning';
import SvgIcon from '@material-ui/core/SvgIcon';
import CheckBoxOutlined from '@material-ui/icons/CheckBoxOutlined';
import CloudUploadOutlined from '@material-ui/icons/CloudUploadOutlined';
import FormatListNumberedRtl from '@material-ui/icons/FormatListNumberedRtl';
import StarOutline from '@material-ui/icons/StarOutline';
import TextFields from '@material-ui/icons/TextFields';
import Title from '@material-ui/icons/Title';
import Typography$2 from '@material-ui/core/Typography';
import MuiSelect$1 from '@material-ui/core/Select';
import MUIAlert from '@material-ui/lab/Alert';
import MUIAlertTitle from '@material-ui/lab/AlertTitle';
import MUIAutocomplete from '@material-ui/lab/Autocomplete';
import MUIOutlinedInput from '@material-ui/core/OutlinedInput';
import MUIBackdrop from '@material-ui/core/Backdrop';
import Box$1 from '@material-ui/core/Box';
import MUIButton from '@material-ui/core/Button';
import MUIButtonGroup from '@material-ui/core/ButtonGroup';
import MUICard from '@material-ui/core/Card';
import MUICardActionArea from '@material-ui/core/CardActionArea';
import MUICardActions from '@material-ui/core/CardActions';
import MUICardMedia from '@material-ui/core/CardMedia';
import MUIChip from '@material-ui/core/Chip';
import MUICircularProgress from '@material-ui/core/CircularProgress';
import MUIClickAwayListener from '@material-ui/core/ClickAwayListener';
import MUIDialog from '@material-ui/core/Dialog';
import MUIDialogActions from '@material-ui/core/DialogActions';
import MUIDialogContent from '@material-ui/core/DialogContent';
import MUIDialogContentText from '@material-ui/core/DialogContentText';
import MUIDialogTitle from '@material-ui/core/DialogTitle';
import MUIDivider from '@material-ui/core/Divider';
import MUIDrawer from '@material-ui/core/Drawer';
import Fade$1 from '@material-ui/core/Fade';
import MUIFormControl from '@material-ui/core/FormControl';
import MUIFormControlLabel from '@material-ui/core/FormControlLabel';
import MUIFormGroup from '@material-ui/core/FormGroup';
import MUIFormHelperText from '@material-ui/core/FormHelperText';
import MUIFormLabel from '@material-ui/core/FormLabel';
import MUIGrow from '@material-ui/core/Grow';
import MUIIconButton from '@material-ui/core/IconButton';
import MUIInputAdornment from '@material-ui/core/InputAdornment';
import MUILinearProgress from '@material-ui/core/LinearProgress';
import MUILink from '@material-ui/core/Link';
import MUIMenu from '@material-ui/core/Menu';
import MUIMenuList from '@material-ui/core/MenuList';
import MuiListSubheader$1 from '@material-ui/core/ListSubheader';
import '@material-ui/core';
import MUIPopover from '@material-ui/core/Popover';
import MUIPopper from '@material-ui/core/Popper';
import MUIRadio from '@material-ui/core/Radio';
import MUIRadioGroup from '@material-ui/core/RadioGroup';
import MUISkeleton from '@material-ui/lab/Skeleton';
import Slide$1 from '@material-ui/core/Slide';
import MUISlider from '@material-ui/core/Slider';
import MUISnackbar from '@material-ui/core/Snackbar';
import MUIStep from '@material-ui/core/Step';
import MUIStepLabel from '@material-ui/core/StepLabel';
import MUIStepper from '@material-ui/core/Stepper';
import MUISwipeableDrawer from '@material-ui/core/SwipeableDrawer';
import MUISwitch from '@material-ui/core/Switch';
import MUITab from '@material-ui/core/Tab';
import MUITable from '@material-ui/core/Table';
import MUITableBody from '@material-ui/core/TableBody';
import MUITableCell from '@material-ui/core/TableCell';
import MUITableContainer from '@material-ui/core/TableContainer';
import MUITableHead from '@material-ui/core/TableHead';
import MUITablePagination from '@material-ui/core/TablePagination';
import MUITableRow from '@material-ui/core/TableRow';
import MUITableSortLabel from '@material-ui/core/TableSortLabel';
import MUITabs from '@material-ui/core/Tabs';
import MUITextField from '@material-ui/core/TextField';
import MUIToggleButton from '@material-ui/lab/ToggleButton';
import MUIToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
import MUITooltip from '@material-ui/core/Tooltip';
import { lighten } from 'polished';
import MuiAvatar from '@material-ui/core/Avatar';
import { alpha as alpha$1 } from '@material-ui/core/styles/colorManipulator';
import MuiPaper from '@material-ui/core/Paper';
import MuiCardContent from '@material-ui/core/CardContent';
import MuiCardHeader from '@material-ui/core/CardHeader';
import { DatePicker as DatePicker$1, KeyboardDatePicker as KeyboardDatePicker$1, MuiPickersUtilsProvider } from '@material-ui/pickers';
import styled$1 from '@emotion/styled';
import { ThemeContext } from '@emotion/core';
export { ThemeContext } from '@emotion/core';
import { useTable } from 'react-table';
import { safeAdd, safeMul } from '@surveycake/utils';
import { unmountComponentAtNode, render, createPortal } from 'react-dom';
import { useContainer } from '@surveycake/rhooks';
import MuiModal from '@material-ui/core/Modal';
import MuiSnackbarContent$1 from '@material-ui/core/SnackbarContent';
import DateFnsUtils from '@date-io/date-fns';
var DESKTOP_FONT_SIZE;
(function (DESKTOP_FONT_SIZE) {
DESKTOP_FONT_SIZE[DESKTOP_FONT_SIZE["h1"] = 2] = "h1";
DESKTOP_FONT_SIZE[DESKTOP_FONT_SIZE["h2"] = 1.75] = "h2";
DESKTOP_FONT_SIZE[DESKTOP_FONT_SIZE["h3"] = 1.5] = "h3";
DESKTOP_FONT_SIZE[DESKTOP_FONT_SIZE["h4"] = 1.25] = "h4";
DESKTOP_FONT_SIZE[DESKTOP_FONT_SIZE["h5"] = 1.125] = "h5";
DESKTOP_FONT_SIZE[DESKTOP_FONT_SIZE["h6"] = 1] = "h6";
DESKTOP_FONT_SIZE[DESKTOP_FONT_SIZE["subtitle1"] = 0.875] = "subtitle1";
DESKTOP_FONT_SIZE[DESKTOP_FONT_SIZE["body1"] = 1] = "body1";
DESKTOP_FONT_SIZE[DESKTOP_FONT_SIZE["body2"] = 0.875] = "body2";
DESKTOP_FONT_SIZE[DESKTOP_FONT_SIZE["button"] = 0.875] = "button";
DESKTOP_FONT_SIZE[DESKTOP_FONT_SIZE["caption"] = 0.875] = "caption";
DESKTOP_FONT_SIZE[DESKTOP_FONT_SIZE["overline"] = 0.75] = "overline";
})(DESKTOP_FONT_SIZE || (DESKTOP_FONT_SIZE = {}));
var core =
/*#__PURE__*/
createTheme({
breakpoints: {
values: {
xl: 1440,
lg: 1024,
md: 900,
sm: 600,
xs: 375
}
},
palette: {
primary: {
light: '#79D8B7',
lighter: '#ACE4D1',
lightest: '#E6F7F1',
main: '#3DBA90',
dark: '#009974'
},
secondary: {
light: '#668A97',
lighter: '#76AABE',
lightest: '#AACAD7',
main: '#325A69',
dark: '#11303C'
},
error: {
light: '#F6AFB9',
lighter: '#FDE5E9',
main: '#EE415D',
dark: '#C9354D'
},
warning: {
light: '#F6CD81',
lighter: '#FBE1B1',
lightest: '#FEF2DD',
main: '#F4A91F',
dark: '#E9A01C'
},
info: {
light: '#BADFEF',
lighter: '#E4F5FC',
main: '#43B8EB',
dark: '#0094D3'
},
success: {
light: '#CEE5B1',
lighter: '#E7F4D7',
main: '#88C936',
dark: '#66B204'
},
grey: {
50: '#FFFFFF',
100: '#EEEEEE',
200: '#D2D2D2',
300: '#BDBDBD',
400: '#AAAAAA',
500: '#989898',
600: '#6B6B6B',
700: '#454545',
800: '#3F3F3F',
900: '#333333',
A100: '#FAFAFA',
A200: '#EEEEEE',
A400: '#E3E3E3',
A700: '#C5C5C5'
},
text: {
primary: '#454545',
secondary: '#6B6B6B'
},
chart: {
cornflowerBlue: '#379FED',
mediumAqua: '#66D6BB',
pear: '#D3EC3C',
saffron: '#F1C733',
corn: '#F0EA61',
blueGreen: '#30C3CC',
oxfordBlue: '#091F55',
silverSand: '#C2C2C2',
sandyBrown: '#E99C64'
}
},
/**
* 針對「手機版」的字體設定，可前往 Typography/styles.ts
*/
typography: {
fontFamily:
/*#__PURE__*/
['Roboto', 'Noto Sans TC', 'PingFang TC', '微軟正黑體', 'sans-serif'].join(','),
h1: {
fontSize: DESKTOP_FONT_SIZE.h1 + "rem",
fontWeight: 500,
lineHeight: 1,
letterSpacing: 0,
textTransform: 'none'
},
h2: {
fontSize: DESKTOP_FONT_SIZE.h2 + "rem",
fontWeight: 500,
lineHeight: 1,
letterSpacing: 0,
textTransform: 'none'
},
h3: {
fontSize: DESKTOP_FONT_SIZE.h3 + "rem",
fontWeight: 500,
lineHeight: 1.5,
letterSpacing: 0,
textTransform: 'none'
},
h4: {
fontSize: DESKTOP_FONT_SIZE.h4 + "rem",
fontWeight: 500,
lineHeight: 1.5,
letterSpacing: 0,
textTransform: 'none'
},
h5: {
fontSize: DESKTOP_FONT_SIZE.h5 + "rem",
fontWeight: 500,
lineHeight: 1.5,
letterSpacing: 0,
textTransform: 'none'
},
h6: {
fontSize: DESKTOP_FONT_SIZE.h6 + "rem",
fontWeight: 500,
lineHeight: 1.5,
letterSpacing: 0,
textTransform: 'none'
},
subtitle1: {
fontSize: DESKTOP_FONT_SIZE.subtitle1 + "rem",
fontWeight: 500,
lineHeight: 1.5,
letterSpacing: 0,
textTransform: 'none'
},
body1: {
fontSize: DESKTOP_FONT_SIZE.body1 + "rem",
fontWeight: 400,
lineHeight: 1.5,
letterSpacing: 0,
textTransform: 'none'
},
body2: {
fontSize: DESKTOP_FONT_SIZE.body2 + "rem",
fontWeight: 400,
lineHeight: 1.5,
letterSpacing: 0,
textTransform: 'none'
},
button: {
fontSize: DESKTOP_FONT_SIZE.button + "rem",
fontWeight: 500,
lineHeight: 1,
letterSpacing: 0,
textTransform: 'none'
},
caption: {
fontSize: DESKTOP_FONT_SIZE.caption + "rem",
fontWeight: 500,
lineHeight: 1.5,
letterSpacing: 0,
textTransform: 'none'
},
overline: {
fontSize: DESKTOP_FONT_SIZE.overline + "rem",
fontWeight: 500,
lineHeight: 1.5,
letterSpacing: 0,
textTransform: 'none'
}
},
shadows: ['none', '0 1px 4px rgba(0, 0, 0, 0.12)', '0 4px 12px rgba(0, 0, 0, 0.08)', '0 6px 24px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.02)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 6px 24px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.02)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)', '0 8px 48px rgba(0, 0, 0, 0.1), 0 6px 24px rgba(0, 0, 0, 0.04)']
});
var MuiAccordion = {
root: {
borderTop: "1px solid " + core.palette.grey.A400,
boxShadow: 'none',
'&::before': {
display: 'none'
},
'&$expanded': {
margin: 0
}
}
};
var MuiAccordionDetails = {
root: {
display: 'block',
padding: '0 2rem 2rem'
}
};
var MuiAccordionSummary = {
content: {
margin: '2rem 0',
'&$expanded': {
margin: '2rem 0'
}
},
expandIcon: {
color: core.palette.grey[600]
},
root: {
padding: '0 2rem'
}
};
var MuiAlert = {
root: {
padding:
/*#__PURE__*/
core.spacing(1) + "px " +
/*#__PURE__*/
core.spacing(2) + "px"
},
standardInfo: {
backgroundColor: core.palette.info.lighter,
color: core.palette.grey[700]
},
standardError: {
backgroundColor: core.palette.error.lighter,
color: core.palette.grey[700]
},
standardWarning: {
backgroundColor: core.palette.warning.lighter,
color: core.palette.grey[700]
},
standardSuccess: {
backgroundColor: core.palette.success.lighter,
color: core.palette.grey[700]
},
icon: {
marginRight:
/*#__PURE__*/
core.spacing(1),
padding:
/*#__PURE__*/
core.spacing(1) + "px 0"
},
action: {
alignItems: 'flex-start',
color: core.palette.grey[500],
marginTop:
/*#__PURE__*/
core.spacing(1)
}
};
var MuiAlertTitle = {
root: {
fontSize: core.typography.h6.fontSize,
fontWeight: core.typography.h6.fontWeight
}
};
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _taggedTemplateLiteralLoose(strings, raw) {
if (!raw) {
raw = strings.slice(0);
}
strings.raw = raw;
return strings;
}
var MuiAutocomplete = {
root:
/*#__PURE__*/
_extends({
'&.Mui-focused .MuiOutlinedInput-root': {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
}
}, core.typography.body2),
paper: {
padding: 0,
marginTop: -1,
border: 'solid',
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
borderWidth: 1,
borderColor: core.palette.primary.main
},
listbox: {
'&::-webkit-scrollbar': {
width: 0
}
},
option:
/*#__PURE__*/
_extends({}, core.typography.body2),
tag: {
margin:
/*#__PURE__*/
core.spacing(0)
}
};
var MuiBackdrop = {
root: {
backgroundColor:
/*#__PURE__*/
alpha(core.palette.common.black, 0.4)
}
};
var MuiButton = {
root: {
padding: '11px 16px'
},
sizeLarge: {
fontSize: core.typography.button.fontSize
},
sizeSmall: {
fontSize: core.typography.button.fontSize
},
contained: {
backgroundColor: core.palette.grey.A200,
color: core.palette.grey[600],
padding: '11px 16px',
'&:hover': {
backgroundColor: core.palette.grey.A400
},
'&:disabled': {
backgroundColor: core.palette.grey[300],
color: core.palette.grey[50]
}
},
containedSizeSmall: {
padding: '9px 16px'
},
containedSizeLarge: {
padding: '13px 16px'
},
containedPrimary: {
color: core.palette.grey[50]
},
text: {
color: core.palette.grey[600],
padding: '11px 16px',
'&:hover': {
backgroundColor: core.palette.grey.A400
},
'&:disabled': {
color: core.palette.grey[300]
}
},
textSizeSmall: {
padding: '9px 16px'
},
textSizeLarge: {
padding: '13px 16px'
},
textPrimary: {
color: core.palette.grey[600],
'&:hover': {
color: core.palette.primary.main,
backgroundColor: core.palette.primary.lightest
}
},
textSecondary: {
color: core.palette.text.secondary,
'&:hover': {
color: core.palette.secondary.main,
backgroundColor: core.palette.secondary.lightest
}
},
outlined: {
color: core.palette.grey[600],
padding: '10px 15px',
border: "1px solid " + core.palette.grey[600],
'&:disabled': {
color: core.palette.grey[300],
border: "1px solid " + core.palette.grey[300]
}
},
outlinedSizeLarge: {
padding: '12px 15px'
},
outlinedSizeSmall: {
padding: '8px 15px'
},
outlinedPrimary: {
border: "1px solid " + core.palette.primary.main,
'&:hover': {
backgroundColor: core.palette.primary.lightest
}
},
outlinedSecondary: {
border: "1px solid " + core.palette.secondary.main,
'&:hover': {
backgroundColor: core.palette.secondary.lightest
}
},
iconSizeSmall: {
'& > *:first-child': {
fontSize: '16px'
}
},
startIcon: {
marginRight:
/*#__PURE__*/
core.spacing(0.5)
},
endIcon: {
marginLeft:
/*#__PURE__*/
core.spacing(0.5)
}
};
var MuiCard = {
root: {
boxShadow: 'none',
backgroundColor: 'initial'
}
};
var MuiCardActionArea = {
root: {
'&:hover .MuiCardActionArea-focusHighlight': {
opacity: 0
}
}
};
var MuiCheckbox = {
indeterminate: {
color: core.palette.primary.main
}
};
var MuiChip = {
root:
/*#__PURE__*/
_extends({
backgroundColor: core.palette.grey.A200,
borderRadius:
/*#__PURE__*/
core.spacing(0.5),
color: 'inherit',
height: 'unset',
padding:
/*#__PURE__*/
core.spacing(0.25, 0)
}, core.typography.subtitle1),
icon: {
color: 'inherit'
},
iconSmall: {
width: '1em',
height: '1em'
},
label: {
paddingLeft:
/*#__PURE__*/
core.spacing(1),
paddingRight:
/*#__PURE__*/
core.spacing(1),
'.MuiChip-icon + &': {
padding: '0 4px 0 8px'
}
},
colorPrimary: {
color: core.palette.primary.main,
backgroundColor: core.palette.primary.lightest
},
clickable: {
'&:focus': {
backgroundColor: core.palette.grey.A400
},
'&:hover': {
backgroundColor: core.palette.grey.A400
},
'&:active': {
boxShadow: 'none'
}
},
sizeSmall:
/*#__PURE__*/
_extends({
height: 'unset'
}, core.typography.overline)
};
var MuiDialogActions = {
root: {
padding:
/*#__PURE__*/
core.spacing(2, 3, 2)
},
spacing: {
'& > :not(:first-child)': {
marginLeft:
/*#__PURE__*/
core.spacing(2)
}
}
};
var MuiDialogContent = {
root: {
padding:
/*#__PURE__*/
core.spacing(1, 3, 3),
'&:first-child': {
paddingTop: 4
}
},
dividers: {
borderTop: 'none',
padding: '8px 24px 24px',
borderBottom: "1px solid " + core.palette.grey[100]
}
};
var MuiDialogTitle = {
root: {
padding:
/*#__PURE__*/
core.spacing(3, 3, 1)
}
};
var MuiDialog = {
paper: {
borderRadius: 16
},
paperWidthXs: {
borderRadius: 8
},
paperWidthSm: {
borderRadius: 12
}
};
var MuiDivider = {
root: {
backgroundColor: core.palette.grey.A400
},
light: {
backgroundColor: core.palette.grey.A200
}
};
var MuiFormControlLabel = {
label: {
color: core.palette.text.primary,
'&.Mui-disabled': {
color: core.palette.grey[300]
},
fontSize: core.typography.button.fontSize,
fontWeight: core.typography.button.fontWeight
}
};
var MuiFormHelperText = {
root: {
marginTop:
/*#__PURE__*/
core.spacing(0.5),
color: core.palette.grey[600],
"&.Mui-error": {
color: core.palette.error.dark
}
}
};
var MuiFormLabel = {
root:
/*#__PURE__*/
_extends({}, core.typography.caption, {
margin: 0,
color: core.palette.grey[700]
}),
asterisk: {
color: core.palette.primary.main,
'.Mui-disabled &': {
color: 'inherit'
}
}
};
var MuiIconButton = {
root: {
padding:
/*#__PURE__*/
core.spacing(1.25)
},
sizeSmall: {
padding:
/*#__PURE__*/
core.spacing(1),
'& svg.MuiSvgIcon-root': {
fontSize: 16
}
},
colorPrimary: {
'&:focus': {
color: core.palette.primary.main,
backgroundColor: core.palette.primary.lightest
},
'&:hover': {
color: core.palette.primary.main,
backgroundColor: core.palette.primary.lightest
}
}
};
var MuiLinearProgress = {
root: {
height: 10,
borderRadius: 2
},
colorPrimary: {
backgroundColor: core.palette.grey[100]
},
colorSecondary: {
backgroundColor: core.palette.grey[100]
},
barColorPrimary: {
backgroundColor: core.palette.primary.main
},
barColorSecondary: {
backgroundColor: core.palette.error.main
}
};
var MuiLink = {
root: {
'&:hover': {
color: function color(props) {
return props.color && (props.color === 'primary' || props.color === 'secondary' || props.color === 'error') ? core.palette[props.color].dark : 'inherit';
}
}
}
};
var MuiList = {
root: {
backgroundColor: core.palette.common.white
},
padding: {
paddingLeft:
/*#__PURE__*/
core.spacing(1),
paddingRight:
/*#__PURE__*/
core.spacing(1)
}
};
var MuiListSubheader = {
root: {
lineHeight: 1.6,
color: core.palette.grey[500]
}
};
var MuiMenuItem = {
root:
/*#__PURE__*/
_extends({}, core.typography.body2, {
paddingTop:
/*#__PURE__*/
core.spacing(1),
paddingBottom:
/*#__PURE__*/
core.spacing(1),
'&.Mui-selected': {
color: core.palette.primary.main,
backgroundColor: core.palette.primary.lightest,
'&:hover': {
backgroundColor: core.palette.primary.lightest
}
},
'&:hover': {
backgroundColor: core.palette.primary.lightest
}
}),
gutters: {
paddingLeft:
/*#__PURE__*/
core.spacing(1),
paddingRight:
/*#__PURE__*/
core.spacing(1)
}
};
var MuiOutlinedInput = {
root:
/*#__PURE__*/
_extends({
'&$disabled input': {
cursor: 'not-allowed'
},
'&$disabled $notchedOutline': {
borderColor: core.palette.grey[200]
},
'&$disabled:hover $notchedOutline': {
borderColor: core.palette.grey[200]
},
'label + &': {
marginTop:
/*#__PURE__*/
core.spacing(1)
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: core.palette.grey[500]
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderWidth: 1,
borderColor: function borderColor(props) {
return props.color && (props.color === 'primary' || props.color === 'secondary') ? core.palette[props.color].main : core.palette.primary.main;
}
},
'&.Mui-error .MuiOutlinedInput-notchedOutline': {
borderColor: core.palette.error.main
},
'&.Mui-error:hover .MuiOutlinedInput-notchedOutline': {
borderColor: core.palette.error.main
},
'&.Mui-focused.Mui-error .MuiOutlinedInput-notchedOutline': {
borderColor: core.palette.error.main
}
}, core.typography.body2),
input: {
padding:
/*#__PURE__*/
core.spacing(1.5) + "px " +
/*#__PURE__*/
core.spacing(1) + "px"
},
notchedOutline: {
borderColor: core.palette.grey.A700
},
adornedStart: {
paddingLeft:
/*#__PURE__*/
core.spacing(1)
},
adornedEnd: {
paddingRight:
/*#__PURE__*/
core.spacing(1)
}
};
var MuiPopover = {
paper: {
padding:
/*#__PURE__*/
core.spacing(1),
marginTop:
/*#__PURE__*/
core.spacing(1)
}
};
var MuiRadio = {
root: {
color: core.palette.grey.A700,
'&$checked$colorPrimary, &$checked$colorSecondary': {
color: core.palette.grey.A700
}
},
colorPrimary: {
'&$checked': {
'& .MuiSvgIcon-root:nth-child(2)': {
color: core.palette.primary.main
}
}
},
colorSecondary: {
'&$checked': {
'& .MuiSvgIcon-root:nth-child(2)': {
color: core.palette.secondary.main
}
}
}
};
var MuiSelect = {
root:
/*#__PURE__*/
_extends({}, core.typography.body2, {
color: core.palette.grey[700]
}),
select: {
'&$disabled': {
cursor: 'not-allowed'
},
'.Mui-focused &': {
backgroundColor: core.palette.common.white,
borderRadius: 4
}
},
outlined: {
padding: "9px 32px 9px 8px"
},
icon: {
color: core.palette.grey[500],
top: 'calc(50% - 10px)',
'.Mui-focused &': {
color: core.palette.primary.main
}
}
};
var MuiSlider = {
root: {
height: 5
},
thumb: {
width: 24,
height: 24,
marginTop: -11,
marginLeft: -12,
backgroundColor: core.palette.common.white,
border: '1px solid currentColor',
'&$disabled': {
width: 16,
height: 16,
marginTop: -6,
marginLeft: -8
}
},
valueLabel: {
left: 'calc(-50% + 8px)'
},
rail: {
height: 5,
borderRadius: 2.5,
backgroundColor: core.palette.grey[100],
opacity: 1
},
track: {
height: 5,
borderRadius: 2.5
}
};
var _root;
var MuiSnackbarContent = {
root: (_root = {
backgroundColor: core.palette.common.white,
color: core.palette.grey[700],
padding: 0
}, _root[
/*#__PURE__*/
core.breakpoints.up('sm')] = {
minWidth: 'initial'
}, _root),
message: {
padding: 0,
width: '100%'
}
};
var MuiStepConnector = {
line: {
borderColor: core.palette.grey.A400
},
alternativeLabel: {
left: 'calc(-50% + 20px)',
right: 'calc(50% + 20px)'
}
};
var MuiStepIcon = {
root: {
color: core.palette.grey[500],
width: '1.5rem',
height: '1.5rem'
},
text: {
fill: core.palette.common.white,
fontWeight: core.typography.fontWeightMedium
}
};
var MOBILE_FONT_SIZE;
(function (MOBILE_FONT_SIZE) {
MOBILE_FONT_SIZE[MOBILE_FONT_SIZE["h1"] = 1.5] = "h1";
MOBILE_FONT_SIZE[MOBILE_FONT_SIZE["h2"] = 1.375] = "h2";
MOBILE_FONT_SIZE[MOBILE_FONT_SIZE["h3"] = 1.25] = "h3";
MOBILE_FONT_SIZE[MOBILE_FONT_SIZE["h4"] = 1.125] = "h4";
MOBILE_FONT_SIZE[MOBILE_FONT_SIZE["h5"] = 1] = "h5";
MOBILE_FONT_SIZE[MOBILE_FONT_SIZE["h6"] = 0.875] = "h6";
MOBILE_FONT_SIZE[MOBILE_FONT_SIZE["subtitle1"] = 0.875] = "subtitle1";
MOBILE_FONT_SIZE[MOBILE_FONT_SIZE["body1"] = 1] = "body1";
MOBILE_FONT_SIZE[MOBILE_FONT_SIZE["body2"] = 0.875] = "body2";
MOBILE_FONT_SIZE[MOBILE_FONT_SIZE["button"] = 0.875] = "button";
MOBILE_FONT_SIZE[MOBILE_FONT_SIZE["caption"] = 0.875] = "caption";
MOBILE_FONT_SIZE[MOBILE_FONT_SIZE["overline"] = 0.75] = "overline";
})(MOBILE_FONT_SIZE || (MOBILE_FONT_SIZE = {}));
var _extends2;
var MuiStepLabel = {
label:
/*#__PURE__*/
_extends({}, core.typography.h6, (_extends2 = {}, _extends2[
/*#__PURE__*/
core.breakpoints.down('md')] = {
fontSize: MOBILE_FONT_SIZE.h6 + "rem"
}, _extends2['&$active, &$completed'] = {
color: core.palette.primary.main
}, _extends2['&$alternativeLabel'] = {
marginTop:
/*#__PURE__*/
core.spacing(0.5)
}, _extends2))
};
var MuiStepper = {
root: {
padding: 0,
'&.MuiPaper-root': {
backgroundColor: 'initial'
}
}
};
var MuiSvgIcon = {
root: {
fontSize: '1.25rem'
},
colorAction: {
color: core.palette.grey[500]
},
fontSizeSmall: {
fontSize: '1rem'
},
fontSizeLarge: {
fontSize: '1.5rem'
}
};
var MuiSwitch = {
switchBase: {
'&.Mui-disabled': {
color: core.palette.common.white
},
'&.Mui-checked + .MuiSwitch-track': {
opacity: 1
},
'&.Mui-disabled.Mui-checked + .MuiSwitch-track': {
backgroundColor: core.palette.grey[100],
opacity: 1
},
'&.Mui-disabled + .MuiSwitch-track': {
backgroundColor: core.palette.grey[100],
opacity: 1
}
},
track: {
opacity: 1,
backgroundColor: core.palette.grey[400],
border: "1px solid " + core.palette.grey.A200
},
colorPrimary: {
'&.Mui-disabled': {
color: core.palette.common.white
},
'&.Mui-checked': {
color: core.palette.common.white
},
'&.Mui-checked + .MuiSwitch-track': {
backgroundColor: core.palette.primary.main
},
'&.Mui-disabled.Mui-checked + .MuiSwitch-track': {
backgroundColor: core.palette.primary.lighter,
opacity: 1
},
'&.Mui-disabled + .MuiSwitch-track': {
backgroundColor: core.palette.grey[100],
opacity: 1
}
},
colorSecondary: {
'&.Mui-disabled': {
color: core.palette.common.white
},
'&.Mui-checked': {
color: core.palette.common.white
},
'&.Mui-disabled.Mui-checked + .MuiSwitch-track': {
backgroundColor: core.palette.secondary.lighter,
opacity: 1
},
'&.Mui-disabled + .MuiSwitch-track': {
backgroundColor: core.palette.grey[100],
opacity: 1
}
}
};
var MuiTab = {
root:
/*#__PURE__*/
_extends({}, core.typography.body1, {
padding: 0,
minHeight: 64,
maxWidth: 'initial',
minWidth: 'initial',
color: core.palette.grey[600],
textTransform: 'none',
'@media (min-width: 600px)': {
minWidth: 'initial'
},
'.MuiTabs-vertical &&': {
minHeight: '40px',
marginLeft: 0
}
}),
textColorPrimary: {
color: core.palette.grey[600],
'&$selected': {
'&:hover': {
color: core.palette.primary.dark
}
},
'&:hover': {
color: core.palette.primary.main
}
},
wrapper: {
'.MuiTabs-vertical &': {
alignItems: 'flex-start',
paddingLeft:
/*#__PURE__*/
core.spacing(1)
}
}
};
var MuiTableCell = {
body: {
color: core.palette.grey[800]
},
head: {
backgroundColor: core.palette.common.white,
borderBottom: "1px solid " + core.palette.grey.A200,
color: core.palette.grey[600],
lineHeight: 1.5,
padding:
/*#__PURE__*/
core.spacing(2) + "px"
},
root: {
borderBottom: 'none',
padding:
/*#__PURE__*/
core.spacing(1.5) + "px " +
/*#__PURE__*/
core.spacing(2) + "px"
},
stickyHeader: {
backgroundColor: core.palette.common.white
}
};
var MuiTablePagination = {
input: {
border: "1px solid " + core.palette.grey[500],
borderRadius: 4
},
select: {
color: core.palette.grey[600],
paddingBottom: 4,
paddingTop: 4
},
selectRoot: {
marginLeft: 20,
marginRight: 40
},
caption: {
color: core.palette.grey[600],
fontWeight: 500
},
actions: {
'& > button.Mui-disabled': {
color: core.palette.grey[500]
},
'& > button': {
color: core.palette.grey[700]
}
}
};
var MuiTableRow = {
root: {
'&:nth-of-type(even)': {
backgroundColor: core.palette.grey[50]
},
'&:nth-of-type(odd)': {
backgroundColor: core.palette.grey.A100
},
'&:hover': {
backgroundColor: core.palette.grey.A200
},
'& > th': {
fontWeight: 500
}
}
};
var MuiTabs = {
flexContainer: {
'& > :not(:first-of-type)': {
marginLeft: 24
}
},
indicator: {
'$vertical &': {
left: 0,
right: 'initial'
}
}
};
var MuiToggleButton = {
root: {
borderColor: core.palette.grey.A400,
color: core.palette.grey[600],
padding: '5px 15px',
'&:hover': {
backgroundColor:
/*#__PURE__*/
alpha(core.palette.primary.light, 0.2),
color: core.palette.primary.main
},
'&$selected': {
backgroundColor: core.palette.primary.main,
borderColor: core.palette.primary.main,
color: core.palette.grey[50],
'&:hover': {
backgroundColor:
/*#__PURE__*/
alpha(core.palette.primary.main, 0.95),
color: core.palette.grey[50]
}
}
}
};
var MuiToggleButtonGroup = {
groupedHorizontal: {
'&:hover': {
borderColor: core.palette.primary.main
}
}
};
var MuiTooltip = {
arrow: {
color: core.palette.grey[700]
},
tooltip: {
backgroundColor: core.palette.grey[700],
boxShadow: '0px 1px 2px rgba(69, 69, 69, 0.1), 0px 1px 4px rgba(69, 69, 69, 0.2)',
fontSize: 14,
fontWeight: 400,
lineHeight: 1.6,
padding: 8
}
};
var _h, _h2, _h3, _h4, _h5, _h6;
var MuiTypography = {
h1: (_h = {}, _h[
/*#__PURE__*/
core.breakpoints.down('md')] = {
fontSize: MOBILE_FONT_SIZE.h1 + "rem"
}, _h),
h2: (_h2 = {}, _h2[
/*#__PURE__*/
core.breakpoints.down('md')] = {
fontSize: MOBILE_FONT_SIZE.h2 + "rem"
}, _h2),
h3: (_h3 = {}, _h3[
/*#__PURE__*/
core.breakpoints.down('md')] = {
fontSize: MOBILE_FONT_SIZE.h3 + "rem"
}, _h3),
h4: (_h4 = {}, _h4[
/*#__PURE__*/
core.breakpoints.down('md')] = {
fontSize: MOBILE_FONT_SIZE.h4 + "rem"
}, _h4),
h5: (_h5 = {}, _h5[
/*#__PURE__*/
core.breakpoints.down('md')] = {
fontSize: MOBILE_FONT_SIZE.h5 + "rem"
}, _h5),
h6: (_h6 = {}, _h6[
/*#__PURE__*/
core.breakpoints.down('md')] = {
fontSize: MOBILE_FONT_SIZE.h6 + "rem"
}, _h6)
};
var MuiMenu = {
paper: {
padding: 0
}
};
var useMUITheme = function useMUITheme() {
return useTheme$1();
};
var theme =
/*#__PURE__*/
createTheme({
overrides: {
MuiAccordion: MuiAccordion,
MuiAccordionDetails: MuiAccordionDetails,
MuiAccordionSummary: MuiAccordionSummary,
MuiAlert: MuiAlert,
MuiAlertTitle: MuiAlertTitle,
MuiAutocomplete: MuiAutocomplete,
MuiBackdrop: MuiBackdrop,
MuiButton: MuiButton,
MuiCard: MuiCard,
MuiCardActionArea: MuiCardActionArea,
MuiCheckbox: MuiCheckbox,
MuiChip: MuiChip,
MuiDialog: MuiDialog,
MuiDialogActions: MuiDialogActions,
MuiDialogContent: MuiDialogContent,
MuiDialogTitle: MuiDialogTitle,
MuiDivider: MuiDivider,
MuiFormControlLabel: MuiFormControlLabel,
MuiFormHelperText: MuiFormHelperText,
MuiFormLabel: MuiFormLabel,
MuiIconButton: MuiIconButton,
MuiLinearProgress: MuiLinearProgress,
MuiLink: MuiLink,
MuiList: MuiList,
MuiListSubheader: MuiListSubheader,
MuiMenu: MuiMenu,
MuiMenuItem: MuiMenuItem,
MuiOutlinedInput: MuiOutlinedInput,
MuiPopover: MuiPopover,
MuiRadio: MuiRadio,
MuiSelect: MuiSelect,
MuiSlider: MuiSlider,
MuiSnackbarContent: MuiSnackbarContent,
MuiStepConnector: MuiStepConnector,
MuiStepIcon: MuiStepIcon,
MuiStepLabel: MuiStepLabel,
MuiStepper: MuiStepper,
MuiSvgIcon: MuiSvgIcon,
MuiSwitch: MuiSwitch,
MuiTab: MuiTab,
MuiTableCell: MuiTableCell,
MuiTablePagination: MuiTablePagination,
MuiTableRow: MuiTableRow,
MuiTabs: MuiTabs,
MuiToggleButton: MuiToggleButton,
MuiToggleButtonGroup: MuiToggleButtonGroup,
MuiTooltip: MuiTooltip,
MuiTypography: MuiTypography
}
}, core);
var ThemeProvider = function ThemeProvider(props) {
var children = props.children;
return React.createElement(ThemeProvider$1, {
theme: theme
}, React.createElement(StylesProvider, {
injectFirst: true
}, React.createElement(ThemeProvider$2, {
theme: theme
}, children)));
};
var PureThemeProvider = function PureThemeProvider(props) {
return React.createElement(ThemeProvider$2, {
theme: theme
}, props.children);
};
var Accordion =
/*#__PURE__*/
forwardRef(function (props, ref) {
return React.createElement(MuiAccordion$1, Object.assign({}, props, {
ref: ref
}));
});
var AccordionDetails =
/*#__PURE__*/
forwardRef(function (props, ref) {
return React.createElement(MuiAccordionDetails$1, Object.assign({}, props, {
ref: ref
}));
});
/**
* Please use customEmotion for all emotion related imports due to the nonce issue.
* Reference:
* https://emotion.sh/docs/@emotion/cache#nonce
* https://emotion.sh/docs/@emotion/css#multiple-instances-in-a-single-app-example
*/
/**
* Like the way JSS fetch nonce from meta tag.
* (ref.: https://github.com/cssinjs/jss/blob/master/docs/csp.md)
* @returns nonce if it exists, otherwise undefined
*/
var getNonce = function getNonce() {
var cspMeta = document && document.querySelector("meta[property='csp-nonce']");
var nonce = cspMeta && cspMeta.getAttribute('content');
return nonce ? nonce : undefined;
};
var _createEmotion =
/*#__PURE__*/
createEmotion({
nonce:
/*#__PURE__*/
getNonce()
}),
flush = _createEmotion.flush,
hydrate = _createEmotion.hydrate,
cx = _createEmotion.cx,
merge = _createEmotion.merge,
getRegisteredStyles = _createEmotion.getRegisteredStyles,
injectGlobal = _createEmotion.injectGlobal,
keyframes = _createEmotion.keyframes,
css = _createEmotion.css,
sheet = _createEmotion.sheet,
cache = _createEmotion.cache;
var MenuItem =
/*#__PURE__*/
forwardRef(function (props, ref) {
var rest = _objectWithoutPropertiesLoose(props, ["button"]);
return React.createElement(MuiMenuItem$1, Object.assign({}, rest, {
ref: ref
}), props.children);
});
MenuItem.displayName = 'MenuItem';
var Checkbox =
/*#__PURE__*/
forwardRef(function (props, ref) {
return React.createElement(MUICheckbox, Object.assign({}, props, {
ref: ref
}));
});
Checkbox.displayName = 'Checkbox';
var useCustomStyle =
/*#__PURE__*/
makeStyles$1(function (theme) {
return {
container: {
padding: '8px 8px 8px 48px',
backgroundColor: theme.palette.common.white,
'&:hover': {
backgroundColor: theme.palette.primary.lightest,
'& .MuiSvgIcon-root': {
color: theme.palette.primary.main
}
},
'&.Mui-selected': {
backgroundColor: theme.palette.primary.lightest,
'& > div': {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white
}
}
},
checkbox: {
padding: 0,
color: theme.palette.grey['A400'],
width: '32px',
height: '32px',
alignSelf: 'center',
'&:hover': {
backgroundColor: 'none'
},
'& .MuiSvgIcon-root': {
width: '16px',
height: '16px'
},
'&.MuiCheckbox-indeterminate': {
'& .MuiSvgIcon-root': {
color: theme.palette.primary.main
}
}
},
greyBlock: {
minHeight: '30px',
padding: '4px 8px',
color: theme.palette.grey[600],
backgroundColor: theme.palette.grey[100],
fontSize: '14px',
fontWeight: 500,
lineHeight: '21px',
borderRadius: '4px',
alignSelf: 'center',
whiteSpace: 'pre-wrap'
}
};
});
var AccordionSelectItem = function AccordionSelectItem(_ref) {
var _cx;
var value = _ref.value,
_ref$checked = _ref.checked,
checked = _ref$checked === void 0 ? false : _ref$checked,
indeterminate = _ref.indeterminate,
text = _ref.text,
handleChangeValue = _ref.handleChangeValue;
var theme = useMUITheme();
var customOptionStyle = useCustomStyle(theme);
return React.createElement(MenuItem, {
className: cx(customOptionStyle.container, (_cx = {}, _cx['Mui-selected'] = checked, _cx)),
value: value,
key: value,
onClick: function onClick() {
return handleChangeValue(value);
}
}, React.createElement(Checkbox, {
color: "primary",
checked: checked,
className: customOptionStyle.checkbox,
indeterminate: indeterminate
}), React.createElement("div", {
className: customOptionStyle.greyBlock
}, text));
};
var Advertisement =
/*#__PURE__*/
forwardRef(function (props, ref) {
return React.createElement(SvgIcon, Object.assign({}, props, {
ref: ref,
viewBox: "0 0 24 24"
}), React.createElement("g", {
clipPath: "url(#clip0_2545_1114)"
}, React.createElement("path", {
d: "M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4ZM4 6V18H20V6H4Z"
}), React.createElement("path", {
d: "M12.6 7V17H16.6C17.7 17 18.6 16.1 18.6 15V9C18.6 7.9 17.7 7 16.6 7H12.6ZM14.6 9H16.6V15H14.6V9ZM7.4 7C6.3 7 5.4 7.9 5.4 9V17H7.4V13H9.4V17H11.4V9C11.4 7.9 10.5 7 9.4 7H7.4ZM7.4 9H9.4V11H7.4V9Z"
})), React.createElement("defs", null, React.createElement("clipPath", {
id: "clip0_2545_1114"
}, React.createElement("rect", {
width: "24",
height: "24",
fill: "white"
}))));
});
Advertisement.displayName = 'Advertisement';
var ArrowSort =
/*#__PURE__*/
forwardRef(function (props, ref) {
return React.createElement(SvgIcon, Object.assign({}, props, {
ref: ref,
viewBox: "0 0 20 20"
}), React.createElement("path", {
d: "M13.9609 7.93951L10.4951 4.3777C10.2213 4.09635 9.77864 4.09635 9.50778 4.3777L6.03909 7.93951C5.59932 8.39147 5.91095 9.16669 6.53421 9.16669H13.4658C14.089 9.16669 14.4006 8.39147 13.9609 7.93951Z"
}), React.createElement("path", {
d: "M6.53421 10.8333H13.4658C14.089 10.8333 14.4006 11.6085 13.9609 12.0605L10.4951 15.6223C10.2213 15.9037 9.77864 15.9037 9.50778 15.6223L6.03909 12.0605C5.59932 11.6085 5.91095 10.8333 6.53421 10.8333Z"
}));
});
ArrowSort.displayName = 'ArrowSort';
var ArrowSortAsc =
/*#__PURE__*/
forwardRef(function (props, ref) {
return React.createElement(SvgIcon, Object.assign({}, props, {
ref: ref,
viewBox: "0 0 24 24"
}), React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M12.5941 5.25322L16.7531 9.52739C17.2808 10.0697 16.9068 11 16.1589 11H7.84107C7.09316 11 6.71921 10.0697 7.24694 9.52739L11.4094 5.25322C11.7344 4.91559 12.2656 4.91559 12.5941 5.25322ZM15.8177 14L12.0017 17.9217L8.18253 14H15.8177ZM12.5941 18.7468C12.2656 19.0844 11.7344 19.0844 11.4094 18.7468L7.24694 14.4726C6.71921 13.9303 7.09316 13 7.84107 13H16.1589C16.9068 13 17.2808 13.9303 16.7531 14.4726L12.5941 18.7468Z"
}));
});
ArrowSortAsc.displayName = 'ArrowSortAsc';
var ArrowSortDesc =
/*#__PURE__*/
forwardRef(function (props, ref) {
return React.createElement(SvgIcon, Object.assign({}, props, {
ref: ref,
viewBox: "0 0 24 24"
}), React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M8.18253 10L12.0017 6.07831L15.8177 10H8.18253ZM11.4094 5.25322L7.24694 9.52739C6.71921 10.0697 7.09316 11 7.84107 11H16.1589C16.9068 11 17.2808 10.0697 16.7531 9.52739L12.5941 5.25322C12.2656 4.91559 11.7344 4.91559 11.4094 5.25322ZM16.1589 13H7.84107C7.09316 13 6.71921 13.9303 7.24694 14.4726L11.4094 18.7468C11.7344 19.0844 12.2656 19.0844 12.5941 18.7468L16.7531 14.4726C17.2808 13.9303 16.9068 13 16.1589 13Z"
}));
});
ArrowSortDesc.displayName = 'ArrowSortDesc';
var BarChart =
/*#__PURE__*/
forwardRef(function (props, ref) {
return React.createElement(SvgIcon, Object.assign({}, props, {
ref: ref,
viewBox: "0 0 24 24"
}), React.createElement("path", {
d: "M15 14H16.5C16.75 14 17 13.75 17 13.5V8.25C17 8 16.75 7.75 16.5 7.75H15C14.75 7.75 14.5 8 14.5 8.25V13.5C14.5 13.75 14.75 14 15 14V14ZM18.75 14H20.25C20.5 14 20.75 13.75 20.75 13.5V4.5C20.75 4.25 20.5 4 20.25 4H18.75C18.5 4 18.25 4.25 18.25 4.5V13.5C18.25 13.75 18.5 14 18.75 14ZM7.5 14H9C9.25 14 9.5 13.75 9.5 13.5V10.75C9.5 10.5 9.25 10.25 9 10.25H7.5C7.25 10.25 7 10.5 7 10.75V13.5C7 13.75 7.25 14 7.5 14ZM11.25 14H12.75C13 14 13.25 13.75 13.25 13.5V5.75C13.25 5.5 13 5.25 12.75 5.25H11.25C11 5.25 10.75 5.5 10.75 5.75V13.5C10.75 13.75 11 14 11.25 14V14ZM21.375 16.5H4.5V4.625C4.5 4.27969 4.22031 4 3.875 4H2.625C2.27969 4 2 4.27969 2 4.625V17.75C2 18.4402 2.55977 19 3.25 19H21.375C21.7203 19 22 18.7203 22 18.375V17.125C22 16.7797 21.7203 16.5