children such as `TableCell`.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType,\n\n /**\n * If `true`, the table row will shade on hover.\n */\n hover: PropTypes.bool,\n\n /**\n * If `true`, the table row will have the selected shading.\n */\n selected: PropTypes.bool\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiTableRow'\n})(TableRow);","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport capitalize from '../utils/capitalize';\nimport { darken, fade, lighten } from '../styles/colorManipulator';\nimport TableContext from '../Table/TableContext';\nimport Tablelvl2Context from '../Table/Tablelvl2Context';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: _extends({}, theme.typography.body2, {\n display: 'table-cell',\n verticalAlign: 'inherit',\n // Workaround for a rendering bug with spanned columns in Chrome 62.0.\n // Removes the alpha (sets it to 1), and lightens or darkens the theme color.\n borderBottom: \"1px solid\\n \".concat(theme.palette.type === 'light' ? lighten(fade(theme.palette.divider, 1), 0.88) : darken(fade(theme.palette.divider, 1), 0.68)),\n textAlign: 'left',\n padding: 16\n }),\n\n /* Styles applied to the root element if `variant=\"head\"` or `context.table.head`. */\n head: {\n color: theme.palette.text.primary,\n lineHeight: theme.typography.pxToRem(24),\n fontWeight: theme.typography.fontWeightMedium\n },\n\n /* Styles applied to the root element if `variant=\"body\"` or `context.table.body`. */\n body: {\n color: theme.palette.text.primary\n },\n\n /* Styles applied to the root element if `variant=\"footer\"` or `context.table.footer`. */\n footer: {\n color: theme.palette.text.secondary,\n lineHeight: theme.typography.pxToRem(21),\n fontSize: theme.typography.pxToRem(12)\n },\n\n /* Styles applied to the root element if `size=\"small\"`. */\n sizeSmall: {\n padding: '6px 24px 6px 16px',\n '&:last-child': {\n paddingRight: 16\n },\n '&$paddingCheckbox': {\n width: 24,\n // prevent the checkbox column from growing\n padding: '0 12px 0 16px',\n '&:last-child': {\n paddingLeft: 12,\n paddingRight: 16\n },\n '& > *': {\n padding: 0\n }\n }\n },\n\n /* Styles applied to the root element if `padding=\"checkbox\"`. */\n paddingCheckbox: {\n width: 48,\n // prevent the checkbox column from growing\n padding: '0 0 0 4px',\n '&:last-child': {\n paddingLeft: 0,\n paddingRight: 4\n }\n },\n\n /* Styles applied to the root element if `padding=\"none\"`. */\n paddingNone: {\n padding: 0,\n '&:last-child': {\n padding: 0\n }\n },\n\n /* Styles applied to the root element if `align=\"left\"`. */\n alignLeft: {\n textAlign: 'left'\n },\n\n /* Styles applied to the root element if `align=\"center\"`. */\n alignCenter: {\n textAlign: 'center'\n },\n\n /* Styles applied to the root element if `align=\"right\"`. */\n alignRight: {\n textAlign: 'right',\n flexDirection: 'row-reverse'\n },\n\n /* Styles applied to the root element if `align=\"justify\"`. */\n alignJustify: {\n textAlign: 'justify'\n },\n\n /* Styles applied to the root element if `context.table.stickyHeader={true}`. */\n stickyHeader: {\n position: 'sticky',\n top: 0,\n left: 0,\n zIndex: 2,\n backgroundColor: theme.palette.background.default\n }\n };\n};\n/**\n * The component renders a `| ` element when the parent context is a header\n * or otherwise a ` | ` element.\n */\n\nvar TableCell = /*#__PURE__*/React.forwardRef(function TableCell(props, ref) {\n var _props$align = props.align,\n align = _props$align === void 0 ? 'inherit' : _props$align,\n classes = props.classes,\n className = props.className,\n component = props.component,\n paddingProp = props.padding,\n scopeProp = props.scope,\n sizeProp = props.size,\n sortDirection = props.sortDirection,\n variantProp = props.variant,\n other = _objectWithoutProperties(props, [\"align\", \"classes\", \"className\", \"component\", \"padding\", \"scope\", \"size\", \"sortDirection\", \"variant\"]);\n\n var table = React.useContext(TableContext);\n var tablelvl2 = React.useContext(Tablelvl2Context);\n var isHeadCell = tablelvl2 && tablelvl2.variant === 'head';\n var role;\n var Component;\n\n if (component) {\n Component = component;\n role = isHeadCell ? 'columnheader' : 'cell';\n } else {\n Component = isHeadCell ? 'th' : 'td';\n }\n\n var scope = scopeProp;\n\n if (!scope && isHeadCell) {\n scope = 'col';\n }\n\n var padding = paddingProp || (table && table.padding ? table.padding : 'default');\n var size = sizeProp || (table && table.size ? table.size : 'medium');\n var variant = variantProp || tablelvl2 && tablelvl2.variant;\n var ariaSort = null;\n\n if (sortDirection) {\n ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';\n }\n\n return /*#__PURE__*/React.createElement(Component, _extends({\n ref: ref,\n className: clsx(classes.root, classes[variant], className, align !== 'inherit' && classes[\"align\".concat(capitalize(align))], padding !== 'default' && classes[\"padding\".concat(capitalize(padding))], size !== 'medium' && classes[\"size\".concat(capitalize(size))], variant === 'head' && table && table.stickyHeader && classes.stickyHeader),\n \"aria-sort\": ariaSort,\n role: role,\n scope: scope\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? TableCell.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * Set the text-align on the table cell content.\n *\n * Monetary or generally number fields **should be right aligned** as that allows\n * you to add them up quickly in your head without having to worry about decimals.\n */\n align: PropTypes.oneOf(['center', 'inherit', 'justify', 'left', 'right']),\n\n /**\n * The table cell contents.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType,\n\n /**\n * Sets the padding applied to the cell.\n * By default, the Table parent component set the value (`default`).\n */\n padding: PropTypes.oneOf(['checkbox', 'default', 'none']),\n\n /**\n * Set scope attribute.\n */\n scope: PropTypes.string,\n\n /**\n * Specify the size of the cell.\n * By default, the Table parent component set the value (`medium`).\n */\n size: PropTypes.oneOf(['medium', 'small']),\n\n /**\n * Set aria-sort direction.\n */\n sortDirection: PropTypes.oneOf(['asc', 'desc', false]),\n\n /**\n * Specify the cell type.\n * By default, the TableHead, TableBody or TableFooter parent component set the value.\n */\n variant: PropTypes.oneOf(['body', 'footer', 'head'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiTableCell'\n})(TableCell);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport Tablelvl2Context from '../Table/Tablelvl2Context';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n display: 'table-row-group'\n }\n};\nvar tablelvl2 = {\n variant: 'body'\n};\nvar defaultComponent = 'tbody';\nvar TableBody = /*#__PURE__*/React.forwardRef(function TableBody(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? defaultComponent : _props$component,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"component\"]);\n\n return /*#__PURE__*/React.createElement(Tablelvl2Context.Provider, {\n value: tablelvl2\n }, /*#__PURE__*/React.createElement(Component, _extends({\n className: clsx(classes.root, className),\n ref: ref,\n role: Component === defaultComponent ? null : 'rowgroup'\n }, other)));\n});\nprocess.env.NODE_ENV !== \"production\" ? TableBody.propTypes = {\n /**\n * The content of the component, normally `TableRow`.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiTableBody'\n})(TableBody);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport Typography from '../Typography';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n margin: 0,\n padding: '16px 24px',\n flex: '0 0 auto'\n }\n};\nvar DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {\n var children = props.children,\n classes = props.classes,\n className = props.className,\n _props$disableTypogra = props.disableTypography,\n disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,\n other = _objectWithoutProperties(props, [\"children\", \"classes\", \"className\", \"disableTypography\"]);\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n className: clsx(classes.root, className),\n ref: ref\n }, other), disableTypography ? children : /*#__PURE__*/React.createElement(Typography, {\n component: \"h2\",\n variant: \"h6\"\n }, children));\n});\nprocess.env.NODE_ENV !== \"production\" ? DialogTitle.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * If `true`, the children won't be wrapped by a typography component.\n * For instance, this can be useful to render an h4 instead of the default h2.\n */\n disableTypography: PropTypes.bool\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiDialogTitle'\n})(DialogTitle);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n flex: '1 1 auto',\n WebkitOverflowScrolling: 'touch',\n // Add iOS momentum scrolling.\n overflowY: 'auto',\n padding: '8px 24px',\n '&:first-child': {\n // dialog without title\n paddingTop: 20\n }\n },\n\n /* Styles applied to the root element if `dividers={true}`. */\n dividers: {\n padding: '16px 24px',\n borderTop: \"1px solid \".concat(theme.palette.divider),\n borderBottom: \"1px solid \".concat(theme.palette.divider)\n }\n };\n};\nvar DialogContent = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$dividers = props.dividers,\n dividers = _props$dividers === void 0 ? false : _props$dividers,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"dividers\"]);\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n className: clsx(classes.root, className, dividers && classes.dividers),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? DialogContent.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * Display the top and bottom dividers.\n */\n dividers: PropTypes.bool\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiDialogContent'\n})(DialogContent);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport withStyles from '../styles/withStyles';\nimport Typography from '../Typography';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n marginBottom: 12\n }\n};\nvar DialogContentText = /*#__PURE__*/React.forwardRef(function DialogContentText(props, ref) {\n return /*#__PURE__*/React.createElement(Typography, _extends({\n component: \"p\",\n variant: \"body1\",\n color: \"textSecondary\",\n ref: ref\n }, props));\n});\nprocess.env.NODE_ENV !== \"production\" ? DialogContentText.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiDialogContentText'\n})(DialogContentText);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: 8,\n justifyContent: 'flex-end',\n flex: '0 0 auto'\n },\n\n /* Styles applied to the root element if `disableSpacing={false}`. */\n spacing: {\n '& > :not(:first-child)': {\n marginLeft: 8\n }\n }\n};\nvar DialogActions = /*#__PURE__*/React.forwardRef(function DialogActions(props, ref) {\n var _props$disableSpacing = props.disableSpacing,\n disableSpacing = _props$disableSpacing === void 0 ? false : _props$disableSpacing,\n classes = props.classes,\n className = props.className,\n other = _objectWithoutProperties(props, [\"disableSpacing\", \"classes\", \"className\"]);\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n className: clsx(classes.root, className, !disableSpacing && classes.spacing),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? DialogActions.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * If `true`, the actions do not have additional margin.\n */\n disableSpacing: PropTypes.bool\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiDialogActions'\n})(DialogActions);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport capitalize from '../utils/capitalize';\nimport withStyles from '../styles/withStyles';\nimport { elementTypeAcceptingRef } from '@material-ui/utils';\nimport useIsFocusVisible from '../utils/useIsFocusVisible';\nimport useForkRef from '../utils/useForkRef';\nimport Typography from '../Typography';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {},\n\n /* Styles applied to the root element if `underline=\"none\"`. */\n underlineNone: {\n textDecoration: 'none'\n },\n\n /* Styles applied to the root element if `underline=\"hover\"`. */\n underlineHover: {\n textDecoration: 'none',\n '&:hover': {\n textDecoration: 'underline'\n }\n },\n\n /* Styles applied to the root element if `underline=\"always\"`. */\n underlineAlways: {\n textDecoration: 'underline'\n },\n // Same reset as ButtonBase.root\n\n /* Styles applied to the root element if `component=\"button\"`. */\n button: {\n position: 'relative',\n WebkitTapHighlightColor: 'transparent',\n backgroundColor: 'transparent',\n // Reset default value\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n border: 0,\n margin: 0,\n // Remove the margin in Safari\n borderRadius: 0,\n padding: 0,\n // Remove the padding in Firefox\n cursor: 'pointer',\n userSelect: 'none',\n verticalAlign: 'middle',\n '-moz-appearance': 'none',\n // Reset\n '-webkit-appearance': 'none',\n // Reset\n '&::-moz-focus-inner': {\n borderStyle: 'none' // Remove Firefox dotted outline.\n\n },\n '&$focusVisible': {\n outline: 'auto'\n }\n },\n\n /* Pseudo-class applied to the root element if the link is keyboard focused. */\n focusVisible: {}\n};\nvar Link = /*#__PURE__*/React.forwardRef(function Link(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$color = props.color,\n color = _props$color === void 0 ? 'primary' : _props$color,\n _props$component = props.component,\n component = _props$component === void 0 ? 'a' : _props$component,\n onBlur = props.onBlur,\n onFocus = props.onFocus,\n TypographyClasses = props.TypographyClasses,\n _props$underline = props.underline,\n underline = _props$underline === void 0 ? 'hover' : _props$underline,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'inherit' : _props$variant,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"color\", \"component\", \"onBlur\", \"onFocus\", \"TypographyClasses\", \"underline\", \"variant\"]);\n\n var _useIsFocusVisible = useIsFocusVisible(),\n isFocusVisible = _useIsFocusVisible.isFocusVisible,\n onBlurVisible = _useIsFocusVisible.onBlurVisible,\n focusVisibleRef = _useIsFocusVisible.ref;\n\n var _React$useState = React.useState(false),\n focusVisible = _React$useState[0],\n setFocusVisible = _React$useState[1];\n\n var handlerRef = useForkRef(ref, focusVisibleRef);\n\n var handleBlur = function handleBlur(event) {\n if (focusVisible) {\n onBlurVisible();\n setFocusVisible(false);\n }\n\n if (onBlur) {\n onBlur(event);\n }\n };\n\n var handleFocus = function handleFocus(event) {\n if (isFocusVisible(event)) {\n setFocusVisible(true);\n }\n\n if (onFocus) {\n onFocus(event);\n }\n };\n\n return /*#__PURE__*/React.createElement(Typography, _extends({\n className: clsx(classes.root, classes[\"underline\".concat(capitalize(underline))], className, focusVisible && classes.focusVisible, component === 'button' && classes.button),\n classes: TypographyClasses,\n color: color,\n component: component,\n onBlur: handleBlur,\n onFocus: handleFocus,\n ref: handlerRef,\n variant: variant\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? Link.propTypes = {\n /**\n * The content of the link.\n */\n children: PropTypes.node.isRequired,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The color of the link.\n */\n color: PropTypes.oneOf(['initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error']),\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: elementTypeAcceptingRef,\n\n /**\n * @ignore\n */\n onBlur: PropTypes.func,\n\n /**\n * @ignore\n */\n onFocus: PropTypes.func,\n\n /**\n * `classes` prop applied to the [`Typography`](/api/typography/) element.\n */\n TypographyClasses: PropTypes.object,\n\n /**\n * Controls when the link should have an underline.\n */\n underline: PropTypes.oneOf(['none', 'hover', 'always']),\n\n /**\n * Applies the theme typography styles.\n */\n variant: PropTypes.string\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiLink'\n})(Link);","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\n// A grid component using the following libs as inspiration.\n//\n// For the implementation:\n// - https://getbootstrap.com/docs/4.3/layout/grid/\n// - https://github.com/kristoferjoseph/flexboxgrid/blob/master/src/css/flexboxgrid.css\n// - https://github.com/roylee0704/react-flexbox-grid\n// - https://material.angularjs.org/latest/layout/introduction\n//\n// Follow this flexbox Guide to better understand the underlying model:\n// - https://css-tricks.com/snippets/css/a-guide-to-flexbox/\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport requirePropFactory from '../utils/requirePropFactory';\nvar SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nvar GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];\n\nfunction generateGrid(globalStyles, theme, breakpoint) {\n var styles = {};\n GRID_SIZES.forEach(function (size) {\n var key = \"grid-\".concat(breakpoint, \"-\").concat(size);\n\n if (size === true) {\n // For the auto layouting\n styles[key] = {\n flexBasis: 0,\n flexGrow: 1,\n maxWidth: '100%'\n };\n return;\n }\n\n if (size === 'auto') {\n styles[key] = {\n flexBasis: 'auto',\n flexGrow: 0,\n maxWidth: 'none'\n };\n return;\n } // Keep 7 significant numbers.\n\n\n var width = \"\".concat(Math.round(size / 12 * 10e7) / 10e5, \"%\"); // Close to the bootstrap implementation:\n // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41\n\n styles[key] = {\n flexBasis: width,\n flexGrow: 0,\n maxWidth: width\n };\n }); // No need for a media query for the first size.\n\n if (breakpoint === 'xs') {\n _extends(globalStyles, styles);\n } else {\n globalStyles[theme.breakpoints.up(breakpoint)] = styles;\n }\n}\n\nfunction getOffset(val) {\n var div = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;\n var parse = parseFloat(val);\n return \"\".concat(parse / div).concat(String(val).replace(String(parse), '') || 'px');\n}\n\nfunction generateGutter(theme, breakpoint) {\n var styles = {};\n SPACINGS.forEach(function (spacing) {\n var themeSpacing = theme.spacing(spacing);\n\n if (themeSpacing === 0) {\n return;\n }\n\n styles[\"spacing-\".concat(breakpoint, \"-\").concat(spacing)] = {\n margin: \"-\".concat(getOffset(themeSpacing, 2)),\n width: \"calc(100% + \".concat(getOffset(themeSpacing), \")\"),\n '& > $item': {\n padding: getOffset(themeSpacing, 2)\n }\n };\n });\n return styles;\n} // Default CSS values\n// flex: '0 1 auto',\n// flexDirection: 'row',\n// alignItems: 'flex-start',\n// flexWrap: 'nowrap',\n// justifyContent: 'flex-start',\n\n\nexport var styles = function styles(theme) {\n return _extends({\n /* Styles applied to the root element. */\n root: {},\n\n /* Styles applied to the root element if `container={true}`. */\n container: {\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'wrap',\n width: '100%'\n },\n\n /* Styles applied to the root element if `item={true}`. */\n item: {\n boxSizing: 'border-box',\n margin: '0' // For instance, it's useful when used with a `figure` element.\n\n },\n\n /* Styles applied to the root element if `zeroMinWidth={true}`. */\n zeroMinWidth: {\n minWidth: 0\n },\n\n /* Styles applied to the root element if `direction=\"column\"`. */\n 'direction-xs-column': {\n flexDirection: 'column'\n },\n\n /* Styles applied to the root element if `direction=\"column-reverse\"`. */\n 'direction-xs-column-reverse': {\n flexDirection: 'column-reverse'\n },\n\n /* Styles applied to the root element if `direction=\"row-reverse\"`. */\n 'direction-xs-row-reverse': {\n flexDirection: 'row-reverse'\n },\n\n /* Styles applied to the root element if `wrap=\"nowrap\"`. */\n 'wrap-xs-nowrap': {\n flexWrap: 'nowrap'\n },\n\n /* Styles applied to the root element if `wrap=\"reverse\"`. */\n 'wrap-xs-wrap-reverse': {\n flexWrap: 'wrap-reverse'\n },\n\n /* Styles applied to the root element if `alignItems=\"center\"`. */\n 'align-items-xs-center': {\n alignItems: 'center'\n },\n\n /* Styles applied to the root element if `alignItems=\"flex-start\"`. */\n 'align-items-xs-flex-start': {\n alignItems: 'flex-start'\n },\n\n /* Styles applied to the root element if `alignItems=\"flex-end\"`. */\n 'align-items-xs-flex-end': {\n alignItems: 'flex-end'\n },\n\n /* Styles applied to the root element if `alignItems=\"baseline\"`. */\n 'align-items-xs-baseline': {\n alignItems: 'baseline'\n },\n\n /* Styles applied to the root element if `alignContent=\"center\"`. */\n 'align-content-xs-center': {\n alignContent: 'center'\n },\n\n /* Styles applied to the root element if `alignContent=\"flex-start\"`. */\n 'align-content-xs-flex-start': {\n alignContent: 'flex-start'\n },\n\n /* Styles applied to the root element if `alignContent=\"flex-end\"`. */\n 'align-content-xs-flex-end': {\n alignContent: 'flex-end'\n },\n\n /* Styles applied to the root element if `alignContent=\"space-between\"`. */\n 'align-content-xs-space-between': {\n alignContent: 'space-between'\n },\n\n /* Styles applied to the root element if `alignContent=\"space-around\"`. */\n 'align-content-xs-space-around': {\n alignContent: 'space-around'\n },\n\n /* Styles applied to the root element if `justify=\"center\"`. */\n 'justify-xs-center': {\n justifyContent: 'center'\n },\n\n /* Styles applied to the root element if `justify=\"flex-end\"`. */\n 'justify-xs-flex-end': {\n justifyContent: 'flex-end'\n },\n\n /* Styles applied to the root element if `justify=\"space-between\"`. */\n 'justify-xs-space-between': {\n justifyContent: 'space-between'\n },\n\n /* Styles applied to the root element if `justify=\"space-around\"`. */\n 'justify-xs-space-around': {\n justifyContent: 'space-around'\n },\n\n /* Styles applied to the root element if `justify=\"space-evenly\"`. */\n 'justify-xs-space-evenly': {\n justifyContent: 'space-evenly'\n }\n }, generateGutter(theme, 'xs'), theme.breakpoints.keys.reduce(function (accumulator, key) {\n // Use side effect over immutability for better performance.\n generateGrid(accumulator, theme, key);\n return accumulator;\n }, {}));\n};\nvar Grid = /*#__PURE__*/React.forwardRef(function Grid(props, ref) {\n var _props$alignContent = props.alignContent,\n alignContent = _props$alignContent === void 0 ? 'stretch' : _props$alignContent,\n _props$alignItems = props.alignItems,\n alignItems = _props$alignItems === void 0 ? 'stretch' : _props$alignItems,\n classes = props.classes,\n classNameProp = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'div' : _props$component,\n _props$container = props.container,\n container = _props$container === void 0 ? false : _props$container,\n _props$direction = props.direction,\n direction = _props$direction === void 0 ? 'row' : _props$direction,\n _props$item = props.item,\n item = _props$item === void 0 ? false : _props$item,\n _props$justify = props.justify,\n justify = _props$justify === void 0 ? 'flex-start' : _props$justify,\n _props$lg = props.lg,\n lg = _props$lg === void 0 ? false : _props$lg,\n _props$md = props.md,\n md = _props$md === void 0 ? false : _props$md,\n _props$sm = props.sm,\n sm = _props$sm === void 0 ? false : _props$sm,\n _props$spacing = props.spacing,\n spacing = _props$spacing === void 0 ? 0 : _props$spacing,\n _props$wrap = props.wrap,\n wrap = _props$wrap === void 0 ? 'wrap' : _props$wrap,\n _props$xl = props.xl,\n xl = _props$xl === void 0 ? false : _props$xl,\n _props$xs = props.xs,\n xs = _props$xs === void 0 ? false : _props$xs,\n _props$zeroMinWidth = props.zeroMinWidth,\n zeroMinWidth = _props$zeroMinWidth === void 0 ? false : _props$zeroMinWidth,\n other = _objectWithoutProperties(props, [\"alignContent\", \"alignItems\", \"classes\", \"className\", \"component\", \"container\", \"direction\", \"item\", \"justify\", \"lg\", \"md\", \"sm\", \"spacing\", \"wrap\", \"xl\", \"xs\", \"zeroMinWidth\"]);\n\n var className = clsx(classes.root, classNameProp, container && [classes.container, spacing !== 0 && classes[\"spacing-xs-\".concat(String(spacing))]], item && classes.item, zeroMinWidth && classes.zeroMinWidth, direction !== 'row' && classes[\"direction-xs-\".concat(String(direction))], wrap !== 'wrap' && classes[\"wrap-xs-\".concat(String(wrap))], alignItems !== 'stretch' && classes[\"align-items-xs-\".concat(String(alignItems))], alignContent !== 'stretch' && classes[\"align-content-xs-\".concat(String(alignContent))], justify !== 'flex-start' && classes[\"justify-xs-\".concat(String(justify))], xs !== false && classes[\"grid-xs-\".concat(String(xs))], sm !== false && classes[\"grid-sm-\".concat(String(sm))], md !== false && classes[\"grid-md-\".concat(String(md))], lg !== false && classes[\"grid-lg-\".concat(String(lg))], xl !== false && classes[\"grid-xl-\".concat(String(xl))]);\n return /*#__PURE__*/React.createElement(Component, _extends({\n className: className,\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? Grid.propTypes = {\n /**\n * Defines the `align-content` style property.\n * It's applied for all screen sizes.\n */\n alignContent: PropTypes.oneOf(['stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around']),\n\n /**\n * Defines the `align-items` style property.\n * It's applied for all screen sizes.\n */\n alignItems: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),\n\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType,\n\n /**\n * If `true`, the component will have the flex *container* behavior.\n * You should be wrapping *items* with a *container*.\n */\n container: PropTypes.bool,\n\n /**\n * Defines the `flex-direction` style property.\n * It is applied for all screen sizes.\n */\n direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),\n\n /**\n * If `true`, the component will have the flex *item* behavior.\n * You should be wrapping *items* with a *container*.\n */\n item: PropTypes.bool,\n\n /**\n * Defines the `justify-content` style property.\n * It is applied for all screen sizes.\n */\n justify: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly']),\n\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `lg` breakpoint and wider screens if not overridden.\n */\n lg: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `md` breakpoint and wider screens if not overridden.\n */\n md: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `sm` breakpoint and wider screens if not overridden.\n */\n sm: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n\n /**\n * Defines the space between the type `item` component.\n * It can only be used on a type `container` component.\n */\n spacing: PropTypes.oneOf(SPACINGS),\n\n /**\n * Defines the `flex-wrap` style property.\n * It's applied for all screen sizes.\n */\n wrap: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']),\n\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for the `xl` breakpoint and wider screens.\n */\n xl: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n\n /**\n * Defines the number of grids the component is going to use.\n * It's applied for all the screen sizes with the lowest priority.\n */\n xs: PropTypes.oneOf([false, 'auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]),\n\n /**\n * If `true`, it sets `min-width: 0` on the item.\n * Refer to the limitations section of the documentation to better understand the use case.\n */\n zeroMinWidth: PropTypes.bool\n} : void 0;\nvar StyledGrid = withStyles(styles, {\n name: 'MuiGrid'\n})(Grid);\n\nif (process.env.NODE_ENV !== 'production') {\n var requireProp = requirePropFactory('Grid');\n StyledGrid.propTypes = _extends({}, StyledGrid.propTypes, {\n alignContent: requireProp('container'),\n alignItems: requireProp('container'),\n direction: requireProp('container'),\n justify: requireProp('container'),\n lg: requireProp('item'),\n md: requireProp('item'),\n sm: requireProp('item'),\n spacing: requireProp('container'),\n wrap: requireProp('container'),\n xs: requireProp('item'),\n zeroMinWidth: requireProp('item')\n });\n}\n\nexport default StyledGrid;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport withStyles from '../styles/withStyles';\nimport { exactProp } from '@material-ui/utils';\nexport var html = {\n WebkitFontSmoothing: 'antialiased',\n // Antialiasing.\n MozOsxFontSmoothing: 'grayscale',\n // Antialiasing.\n // Change from `box-sizing: content-box` so that `width`\n // is not affected by `padding` or `border`.\n boxSizing: 'border-box'\n};\nexport var body = function body(theme) {\n return _extends({\n color: theme.palette.text.primary\n }, theme.typography.body2, {\n backgroundColor: theme.palette.background.default,\n '@media print': {\n // Save printer ink.\n backgroundColor: theme.palette.common.white\n }\n });\n};\nexport var styles = function styles(theme) {\n return {\n '@global': {\n html: html,\n '*, *::before, *::after': {\n boxSizing: 'inherit'\n },\n 'strong, b': {\n fontWeight: theme.typography.fontWeightBold\n },\n body: _extends({\n margin: 0\n }, body(theme), {\n // Add support for document.body.requestFullScreen().\n // Other elements, if background transparent, are not supported.\n '&::backdrop': {\n backgroundColor: theme.palette.background.default\n }\n })\n }\n };\n};\n/**\n * Kickstart an elegant, consistent, and simple baseline to build upon.\n */\n\nfunction CssBaseline(props) {\n /* eslint-disable no-unused-vars */\n var _props$children = props.children,\n children = _props$children === void 0 ? null : _props$children,\n classes = props.classes;\n /* eslint-enable no-unused-vars */\n\n return /*#__PURE__*/React.createElement(React.Fragment, null, children);\n}\n\nprocess.env.NODE_ENV !== \"production\" ? CssBaseline.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * You can wrap a node.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object\n} : void 0;\n\nif (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line\n CssBaseline['propTypes' + ''] = exactProp(CssBaseline.propTypes);\n}\n\nexport default withStyles(styles, {\n name: 'MuiCssBaseline'\n})(CssBaseline);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { refType } from '@material-ui/utils';\nimport { useFormControl } from '../FormControl';\nimport withStyles from '../styles/withStyles';\nimport Typography from '../Typography';\nimport capitalize from '../utils/capitalize';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n display: 'inline-flex',\n alignItems: 'center',\n cursor: 'pointer',\n // For correct alignment with the text.\n verticalAlign: 'middle',\n WebkitTapHighlightColor: 'transparent',\n marginLeft: -11,\n marginRight: 16,\n // used for row presentation of radio/checkbox\n '&$disabled': {\n cursor: 'default'\n }\n },\n\n /* Styles applied to the root element if `labelPlacement=\"start\"`. */\n labelPlacementStart: {\n flexDirection: 'row-reverse',\n marginLeft: 16,\n // used for row presentation of radio/checkbox\n marginRight: -11\n },\n\n /* Styles applied to the root element if `labelPlacement=\"top\"`. */\n labelPlacementTop: {\n flexDirection: 'column-reverse',\n marginLeft: 16\n },\n\n /* Styles applied to the root element if `labelPlacement=\"bottom\"`. */\n labelPlacementBottom: {\n flexDirection: 'column',\n marginLeft: 16\n },\n\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\n /* Styles applied to the label's Typography component. */\n label: {\n '&$disabled': {\n color: theme.palette.text.disabled\n }\n }\n };\n};\n/**\n * Drop in replacement of the `Radio`, `Switch` and `Checkbox` component.\n * Use this component if you want to display an extra label.\n */\n\nvar FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(props, ref) {\n var checked = props.checked,\n classes = props.classes,\n className = props.className,\n control = props.control,\n disabledProp = props.disabled,\n inputRef = props.inputRef,\n label = props.label,\n _props$labelPlacement = props.labelPlacement,\n labelPlacement = _props$labelPlacement === void 0 ? 'end' : _props$labelPlacement,\n name = props.name,\n onChange = props.onChange,\n value = props.value,\n other = _objectWithoutProperties(props, [\"checked\", \"classes\", \"className\", \"control\", \"disabled\", \"inputRef\", \"label\", \"labelPlacement\", \"name\", \"onChange\", \"value\"]);\n\n var muiFormControl = useFormControl();\n var disabled = disabledProp;\n\n if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {\n disabled = control.props.disabled;\n }\n\n if (typeof disabled === 'undefined' && muiFormControl) {\n disabled = muiFormControl.disabled;\n }\n\n var controlProps = {\n disabled: disabled\n };\n ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(function (key) {\n if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {\n controlProps[key] = props[key];\n }\n });\n return /*#__PURE__*/React.createElement(\"label\", _extends({\n className: clsx(classes.root, className, labelPlacement !== 'end' && classes[\"labelPlacement\".concat(capitalize(labelPlacement))], disabled && classes.disabled),\n ref: ref\n }, other), /*#__PURE__*/React.cloneElement(control, controlProps), /*#__PURE__*/React.createElement(Typography, {\n component: \"span\",\n className: clsx(classes.label, disabled && classes.disabled)\n }, label));\n});\nprocess.env.NODE_ENV !== \"production\" ? FormControlLabel.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * If `true`, the component appears selected.\n */\n checked: PropTypes.bool,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`.\n */\n control: PropTypes.element.isRequired,\n\n /**\n * If `true`, the control will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * Pass a ref to the `input` element.\n */\n inputRef: refType,\n\n /**\n * The text to be used in an enclosing label element.\n */\n label: PropTypes.node,\n\n /**\n * The position of the label.\n */\n labelPlacement: PropTypes.oneOf(['bottom', 'end', 'start', 'top']),\n\n /**\n * @ignore\n */\n name: PropTypes.string,\n\n /**\n * Callback fired when the state is changed.\n *\n * @param {object} event The event source of the callback.\n * You can pull out the new checked state by accessing `event.target.checked` (boolean).\n */\n onChange: PropTypes.func,\n\n /**\n * The value of the component.\n */\n value: PropTypes.any\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiFormControlLabel'\n})(FormControlLabel);","import _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport PropTypes from 'prop-types';\nimport merge from './merge';\n\nfunction omit(input, fields) {\n var output = {};\n Object.keys(input).forEach(function (prop) {\n if (fields.indexOf(prop) === -1) {\n output[prop] = input[prop];\n }\n });\n return output;\n}\n\nfunction css(styleFunction) {\n var newStyleFunction = function newStyleFunction(props) {\n var output = styleFunction(props);\n\n if (props.css) {\n return _extends({}, merge(output, styleFunction(_extends({\n theme: props.theme\n }, props.css))), omit(props.css, [styleFunction.filterProps]));\n }\n\n return output;\n };\n\n newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {\n css: PropTypes.object\n }) : {};\n newStyleFunction.filterProps = ['css'].concat(_toConsumableArray(styleFunction.filterProps));\n return newStyleFunction;\n}\n\nexport default css;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport merge from './merge';\n\nfunction compose() {\n for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {\n styles[_key] = arguments[_key];\n }\n\n var fn = function fn(props) {\n return styles.reduce(function (acc, style) {\n var output = style(props);\n\n if (output) {\n return merge(acc, output);\n }\n\n return acc;\n }, {});\n }; // Alternative approach that doesn't yield any performance gain.\n // const handlers = styles.reduce((acc, style) => {\n // style.filterProps.forEach(prop => {\n // acc[prop] = style;\n // });\n // return acc;\n // }, {});\n // const fn = props => {\n // return Object.keys(props).reduce((acc, prop) => {\n // if (handlers[prop]) {\n // return merge(acc, handlers[prop](props));\n // }\n // return acc;\n // }, {});\n // };\n\n\n fn.propTypes = process.env.NODE_ENV !== 'production' ? styles.reduce(function (acc, style) {\n return _extends(acc, style.propTypes);\n }, {}) : {};\n fn.filterProps = styles.reduce(function (acc, style) {\n return acc.concat(style.filterProps);\n }, []);\n return fn;\n}\n\nexport default compose;","import _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport responsivePropType from './responsivePropType';\nimport { handleBreakpoints } from './breakpoints';\n\nfunction getPath(obj, path) {\n if (!path || typeof path !== 'string') {\n return null;\n }\n\n return path.split('.').reduce(function (acc, item) {\n return acc && acc[item] ? acc[item] : null;\n }, obj);\n}\n\nfunction style(options) {\n var prop = options.prop,\n _options$cssProperty = options.cssProperty,\n cssProperty = _options$cssProperty === void 0 ? options.prop : _options$cssProperty,\n themeKey = options.themeKey,\n transform = options.transform;\n\n var fn = function fn(props) {\n if (props[prop] == null) {\n return null;\n }\n\n var propValue = props[prop];\n var theme = props.theme;\n var themeMapping = getPath(theme, themeKey) || {};\n\n var styleFromPropValue = function styleFromPropValue(propValueFinal) {\n var value;\n\n if (typeof themeMapping === 'function') {\n value = themeMapping(propValueFinal);\n } else if (Array.isArray(themeMapping)) {\n value = themeMapping[propValueFinal] || propValueFinal;\n } else {\n value = getPath(themeMapping, propValueFinal) || propValueFinal;\n\n if (transform) {\n value = transform(value);\n }\n }\n\n if (cssProperty === false) {\n return value;\n }\n\n return _defineProperty({}, cssProperty, value);\n };\n\n return handleBreakpoints(props, propValue, styleFromPropValue);\n };\n\n fn.propTypes = process.env.NODE_ENV !== 'production' ? _defineProperty({}, prop, responsivePropType) : {};\n fn.filterProps = [prop];\n return fn;\n}\n\nexport default style;","import style from './style';\nimport compose from './compose';\n\nfunction getBorder(value) {\n if (typeof value !== 'number') {\n return value;\n }\n\n return \"\".concat(value, \"px solid\");\n}\n\nexport var border = style({\n prop: 'border',\n themeKey: 'borders',\n transform: getBorder\n});\nexport var borderTop = style({\n prop: 'borderTop',\n themeKey: 'borders',\n transform: getBorder\n});\nexport var borderRight = style({\n prop: 'borderRight',\n themeKey: 'borders',\n transform: getBorder\n});\nexport var borderBottom = style({\n prop: 'borderBottom',\n themeKey: 'borders',\n transform: getBorder\n});\nexport var borderLeft = style({\n prop: 'borderLeft',\n themeKey: 'borders',\n transform: getBorder\n});\nexport var borderColor = style({\n prop: 'borderColor',\n themeKey: 'palette'\n});\nexport var borderRadius = style({\n prop: 'borderRadius',\n themeKey: 'shape'\n});\nvar borders = compose(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderRadius);\nexport default borders;","import style from './style';\nimport compose from './compose';\nexport var displayPrint = style({\n prop: 'displayPrint',\n cssProperty: false,\n transform: function transform(value) {\n return {\n '@media print': {\n display: value\n }\n };\n }\n});\nexport var displayRaw = style({\n prop: 'display'\n});\nexport var overflow = style({\n prop: 'overflow'\n});\nexport var textOverflow = style({\n prop: 'textOverflow'\n});\nexport var visibility = style({\n prop: 'visibility'\n});\nexport var whiteSpace = style({\n prop: 'whiteSpace'\n});\nexport default compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);","import style from './style';\nimport compose from './compose';\nexport var flexBasis = style({\n prop: 'flexBasis'\n});\nexport var flexDirection = style({\n prop: 'flexDirection'\n});\nexport var flexWrap = style({\n prop: 'flexWrap'\n});\nexport var justifyContent = style({\n prop: 'justifyContent'\n});\nexport var alignItems = style({\n prop: 'alignItems'\n});\nexport var alignContent = style({\n prop: 'alignContent'\n});\nexport var order = style({\n prop: 'order'\n});\nexport var flex = style({\n prop: 'flex'\n});\nexport var flexGrow = style({\n prop: 'flexGrow'\n});\nexport var flexShrink = style({\n prop: 'flexShrink'\n});\nexport var alignSelf = style({\n prop: 'alignSelf'\n});\nexport var justifyItems = style({\n prop: 'justifyItems'\n});\nexport var justifySelf = style({\n prop: 'justifySelf'\n});\nvar flexbox = compose(flexBasis, flexDirection, flexWrap, justifyContent, alignItems, alignContent, order, flex, flexGrow, flexShrink, alignSelf, justifyItems, justifySelf);\nexport default flexbox;","import style from './style';\nimport compose from './compose';\nexport var gridGap = style({\n prop: 'gridGap'\n});\nexport var gridColumnGap = style({\n prop: 'gridColumnGap'\n});\nexport var gridRowGap = style({\n prop: 'gridRowGap'\n});\nexport var gridColumn = style({\n prop: 'gridColumn'\n});\nexport var gridRow = style({\n prop: 'gridRow'\n});\nexport var gridAutoFlow = style({\n prop: 'gridAutoFlow'\n});\nexport var gridAutoColumns = style({\n prop: 'gridAutoColumns'\n});\nexport var gridAutoRows = style({\n prop: 'gridAutoRows'\n});\nexport var gridTemplateColumns = style({\n prop: 'gridTemplateColumns'\n});\nexport var gridTemplateRows = style({\n prop: 'gridTemplateRows'\n});\nexport var gridTemplateAreas = style({\n prop: 'gridTemplateAreas'\n});\nexport var gridArea = style({\n prop: 'gridArea'\n});\nvar grid = compose(gridGap, gridColumnGap, gridRowGap, gridColumn, gridRow, gridAutoFlow, gridAutoColumns, gridAutoRows, gridTemplateColumns, gridTemplateRows, gridTemplateAreas, gridArea);\nexport default grid;","import style from './style';\nimport compose from './compose';\nexport var position = style({\n prop: 'position'\n});\nexport var zIndex = style({\n prop: 'zIndex',\n themeKey: 'zIndex'\n});\nexport var top = style({\n prop: 'top'\n});\nexport var right = style({\n prop: 'right'\n});\nexport var bottom = style({\n prop: 'bottom'\n});\nexport var left = style({\n prop: 'left'\n});\nexport default compose(position, zIndex, top, right, bottom, left);","import style from './style';\nimport compose from './compose';\nexport var color = style({\n prop: 'color',\n themeKey: 'palette'\n});\nexport var bgcolor = style({\n prop: 'bgcolor',\n cssProperty: 'backgroundColor',\n themeKey: 'palette'\n});\nvar palette = compose(color, bgcolor);\nexport default palette;","import style from './style';\nvar boxShadow = style({\n prop: 'boxShadow',\n themeKey: 'shadows'\n});\nexport default boxShadow;","import style from './style';\nimport compose from './compose';\n\nfunction transform(value) {\n return value <= 1 ? \"\".concat(value * 100, \"%\") : value;\n}\n\nexport var width = style({\n prop: 'width',\n transform: transform\n});\nexport var maxWidth = style({\n prop: 'maxWidth',\n transform: transform\n});\nexport var minWidth = style({\n prop: 'minWidth',\n transform: transform\n});\nexport var height = style({\n prop: 'height',\n transform: transform\n});\nexport var maxHeight = style({\n prop: 'maxHeight',\n transform: transform\n});\nexport var minHeight = style({\n prop: 'minHeight',\n transform: transform\n});\nexport var sizeWidth = style({\n prop: 'size',\n cssProperty: 'width',\n transform: transform\n});\nexport var sizeHeight = style({\n prop: 'size',\n cssProperty: 'height',\n transform: transform\n});\nexport var boxSizing = style({\n prop: 'boxSizing'\n});\nvar sizing = compose(width, maxWidth, minWidth, height, maxHeight, minHeight, boxSizing);\nexport default sizing;","import style from './style';\nimport compose from './compose';\nexport var fontFamily = style({\n prop: 'fontFamily',\n themeKey: 'typography'\n});\nexport var fontSize = style({\n prop: 'fontSize',\n themeKey: 'typography'\n});\nexport var fontStyle = style({\n prop: 'fontStyle',\n themeKey: 'typography'\n});\nexport var fontWeight = style({\n prop: 'fontWeight',\n themeKey: 'typography'\n});\nexport var letterSpacing = style({\n prop: 'letterSpacing'\n});\nexport var lineHeight = style({\n prop: 'lineHeight'\n});\nexport var textAlign = style({\n prop: 'textAlign'\n});\nvar typography = compose(fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign);\nexport default typography;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { chainPropTypes, getDisplayName } from '@material-ui/utils';\nimport hoistNonReactStatics from 'hoist-non-react-statics';\nimport makeStyles from '../makeStyles';\n\nfunction omit(input, fields) {\n var output = {};\n Object.keys(input).forEach(function (prop) {\n if (fields.indexOf(prop) === -1) {\n output[prop] = input[prop];\n }\n });\n return output;\n} // styled-components's API removes the mapping between components and styles.\n// Using components as a low-level styling construct can be simpler.\n\n\nexport default function styled(Component) {\n var componentCreator = function componentCreator(style) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n var name = options.name,\n stylesOptions = _objectWithoutProperties(options, [\"name\"]);\n\n if (process.env.NODE_ENV !== 'production' && Component === undefined) {\n throw new Error(['You are calling styled(Component)(style) with an undefined component.', 'You may have forgotten to import it.'].join('\\n'));\n }\n\n var classNamePrefix = name;\n\n if (process.env.NODE_ENV !== 'production') {\n if (!name) {\n // Provide a better DX outside production.\n var displayName = getDisplayName(Component);\n\n if (displayName !== undefined) {\n classNamePrefix = displayName;\n }\n }\n }\n\n var stylesOrCreator = typeof style === 'function' ? function (theme) {\n return {\n root: function root(props) {\n return style(_extends({\n theme: theme\n }, props));\n }\n };\n } : {\n root: style\n };\n var useStyles = makeStyles(stylesOrCreator, _extends({\n Component: Component,\n name: name || Component.displayName,\n classNamePrefix: classNamePrefix\n }, stylesOptions));\n var filterProps;\n var propTypes = {};\n\n if (style.filterProps) {\n filterProps = style.filterProps;\n delete style.filterProps;\n }\n /* eslint-disable react/forbid-foreign-prop-types */\n\n\n if (style.propTypes) {\n propTypes = style.propTypes;\n delete style.propTypes;\n }\n /* eslint-enable react/forbid-foreign-prop-types */\n\n\n var StyledComponent = /*#__PURE__*/React.forwardRef(function StyledComponent(props, ref) {\n var children = props.children,\n classNameProp = props.className,\n clone = props.clone,\n ComponentProp = props.component,\n other = _objectWithoutProperties(props, [\"children\", \"className\", \"clone\", \"component\"]);\n\n var classes = useStyles(props);\n var className = clsx(classes.root, classNameProp);\n var spread = other;\n\n if (filterProps) {\n spread = omit(spread, filterProps);\n }\n\n if (clone) {\n return /*#__PURE__*/React.cloneElement(children, _extends({\n className: clsx(children.props.className, className)\n }, spread));\n }\n\n if (typeof children === 'function') {\n return children(_extends({\n className: className\n }, spread));\n }\n\n var FinalComponent = ComponentProp || Component;\n return /*#__PURE__*/React.createElement(FinalComponent, _extends({\n ref: ref,\n className: className\n }, spread), children);\n });\n process.env.NODE_ENV !== \"production\" ? StyledComponent.propTypes = _extends({\n /**\n * A render function or node.\n */\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * If `true`, the component will recycle it's children HTML element.\n * It's using `React.cloneElement` internally.\n *\n * This prop will be deprecated and removed in v5\n */\n clone: chainPropTypes(PropTypes.bool, function (props) {\n if (props.clone && props.component) {\n return new Error('You can not use the clone and component prop at the same time.');\n }\n\n return null;\n }),\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType\n }, propTypes) : void 0;\n\n if (process.env.NODE_ENV !== 'production') {\n StyledComponent.displayName = \"Styled(\".concat(classNamePrefix, \")\");\n }\n\n hoistNonReactStatics(StyledComponent, Component);\n return StyledComponent;\n };\n\n return componentCreator;\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport { styled as styledWithoutDefault } from '@material-ui/styles';\nimport defaultTheme from './defaultTheme';\n\nvar styled = function styled(Component) {\n var componentCreator = styledWithoutDefault(Component);\n return function (style, options) {\n return componentCreator(style, _extends({\n defaultTheme: defaultTheme\n }, options));\n };\n};\n\nexport default styled;","import { borders, compose, display, flexbox, grid, palette, positions, shadows, sizing, spacing, typography, css } from '@material-ui/system';\nimport styled from '../styles/styled';\nexport var styleFunction = css(compose(borders, display, flexbox, grid, positions, palette, shadows, sizing, spacing, typography));\n/**\n * @ignore - do not document.\n */\n\nvar Box = styled('div')(styleFunction, {\n name: 'MuiBox'\n});\nexport default Box;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { Transition } from 'react-transition-group';\nimport useTheme from '../styles/useTheme';\nimport { reflow, getTransitionProps } from '../transitions/utils';\nimport useForkRef from '../utils/useForkRef';\n\nfunction getScale(value) {\n return \"scale(\".concat(value, \", \").concat(Math.pow(value, 2), \")\");\n}\n\nvar styles = {\n entering: {\n opacity: 1,\n transform: getScale(1)\n },\n entered: {\n opacity: 1,\n transform: 'none'\n }\n};\n/**\n * The Grow transition is used by the [Tooltip](/components/tooltips/) and\n * [Popover](/components/popover/) components.\n * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.\n */\n\nvar Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {\n var children = props.children,\n _props$disableStrictM = props.disableStrictModeCompat,\n disableStrictModeCompat = _props$disableStrictM === void 0 ? false : _props$disableStrictM,\n inProp = props.in,\n onEnter = props.onEnter,\n onEntered = props.onEntered,\n onEntering = props.onEntering,\n onExit = props.onExit,\n onExited = props.onExited,\n onExiting = props.onExiting,\n style = props.style,\n _props$timeout = props.timeout,\n timeout = _props$timeout === void 0 ? 'auto' : _props$timeout,\n _props$TransitionComp = props.TransitionComponent,\n TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,\n other = _objectWithoutProperties(props, [\"children\", \"disableStrictModeCompat\", \"in\", \"onEnter\", \"onEntered\", \"onEntering\", \"onExit\", \"onExited\", \"onExiting\", \"style\", \"timeout\", \"TransitionComponent\"]);\n\n var timer = React.useRef();\n var autoTimeout = React.useRef();\n var theme = useTheme();\n var enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;\n var nodeRef = React.useRef(null);\n var foreignRef = useForkRef(children.ref, ref);\n var handleRef = useForkRef(enableStrictModeCompat ? nodeRef : undefined, foreignRef);\n\n var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {\n return function (nodeOrAppearing, maybeAppearing) {\n if (callback) {\n var _ref = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing],\n _ref2 = _slicedToArray(_ref, 2),\n node = _ref2[0],\n isAppearing = _ref2[1]; // onEnterXxx and onExitXxx callbacks have a different arguments.length value.\n\n\n if (isAppearing === undefined) {\n callback(node);\n } else {\n callback(node, isAppearing);\n }\n }\n };\n };\n\n var handleEntering = normalizedTransitionCallback(onEntering);\n var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {\n reflow(node); // So the animation always start from the start.\n\n var _getTransitionProps = getTransitionProps({\n style: style,\n timeout: timeout\n }, {\n mode: 'enter'\n }),\n transitionDuration = _getTransitionProps.duration,\n delay = _getTransitionProps.delay;\n\n var duration;\n\n if (timeout === 'auto') {\n duration = theme.transitions.getAutoHeightDuration(node.clientHeight);\n autoTimeout.current = duration;\n } else {\n duration = transitionDuration;\n }\n\n node.style.transition = [theme.transitions.create('opacity', {\n duration: duration,\n delay: delay\n }), theme.transitions.create('transform', {\n duration: duration * 0.666,\n delay: delay\n })].join(',');\n\n if (onEnter) {\n onEnter(node, isAppearing);\n }\n });\n var handleEntered = normalizedTransitionCallback(onEntered);\n var handleExiting = normalizedTransitionCallback(onExiting);\n var handleExit = normalizedTransitionCallback(function (node) {\n var _getTransitionProps2 = getTransitionProps({\n style: style,\n timeout: timeout\n }, {\n mode: 'exit'\n }),\n transitionDuration = _getTransitionProps2.duration,\n delay = _getTransitionProps2.delay;\n\n var duration;\n\n if (timeout === 'auto') {\n duration = theme.transitions.getAutoHeightDuration(node.clientHeight);\n autoTimeout.current = duration;\n } else {\n duration = transitionDuration;\n }\n\n node.style.transition = [theme.transitions.create('opacity', {\n duration: duration,\n delay: delay\n }), theme.transitions.create('transform', {\n duration: duration * 0.666,\n delay: delay || duration * 0.333\n })].join(',');\n node.style.opacity = '0';\n node.style.transform = getScale(0.75);\n\n if (onExit) {\n onExit(node);\n }\n });\n var handleExited = normalizedTransitionCallback(onExited);\n\n var addEndListener = function addEndListener(nodeOrNext, maybeNext) {\n var next = enableStrictModeCompat ? nodeOrNext : maybeNext;\n\n if (timeout === 'auto') {\n timer.current = setTimeout(next, autoTimeout.current || 0);\n }\n };\n\n React.useEffect(function () {\n return function () {\n clearTimeout(timer.current);\n };\n }, []);\n return /*#__PURE__*/React.createElement(TransitionComponent, _extends({\n appear: true,\n in: inProp,\n nodeRef: enableStrictModeCompat ? nodeRef : undefined,\n onEnter: handleEnter,\n onEntered: handleEntered,\n onEntering: handleEntering,\n onExit: handleExit,\n onExited: handleExited,\n onExiting: handleExiting,\n addEndListener: addEndListener,\n timeout: timeout === 'auto' ? null : timeout\n }, other), function (state, childProps) {\n return /*#__PURE__*/React.cloneElement(children, _extends({\n style: _extends({\n opacity: 0,\n transform: getScale(0.75),\n visibility: state === 'exited' && !inProp ? 'hidden' : undefined\n }, styles[state], style, children.props.style),\n ref: handleRef\n }, childProps));\n });\n});\nprocess.env.NODE_ENV !== \"production\" ? Grow.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * A single child content element.\n */\n children: PropTypes.element,\n\n /**\n * Enable this prop if you encounter 'Function components cannot be given refs',\n * use `unstable_createStrictModeTheme`,\n * and can't forward the ref in the child component.\n */\n disableStrictModeCompat: PropTypes.bool,\n\n /**\n * If `true`, show the component; triggers the enter or exit animation.\n */\n in: PropTypes.bool,\n\n /**\n * @ignore\n */\n onEnter: PropTypes.func,\n\n /**\n * @ignore\n */\n onEntered: PropTypes.func,\n\n /**\n * @ignore\n */\n onEntering: PropTypes.func,\n\n /**\n * @ignore\n */\n onExit: PropTypes.func,\n\n /**\n * @ignore\n */\n onExited: PropTypes.func,\n\n /**\n * @ignore\n */\n onExiting: PropTypes.func,\n\n /**\n * @ignore\n */\n style: PropTypes.object,\n\n /**\n * The duration for the transition, in milliseconds.\n * You may specify a single timeout for all transitions, or individually with an object.\n *\n * Set to 'auto' to automatically calculate transition time based on height.\n */\n timeout: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.shape({\n appear: PropTypes.number,\n enter: PropTypes.number,\n exit: PropTypes.number\n })])\n} : void 0;\nGrow.muiSupportAuto = true;\nexport default Grow;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport * as ReactDOM from 'react-dom';\nimport { chainPropTypes, elementTypeAcceptingRef, refType, HTMLElementType } from '@material-ui/utils';\nimport debounce from '../utils/debounce';\nimport clsx from 'clsx';\nimport ownerDocument from '../utils/ownerDocument';\nimport ownerWindow from '../utils/ownerWindow';\nimport createChainedFunction from '../utils/createChainedFunction';\nimport withStyles from '../styles/withStyles';\nimport Modal from '../Modal';\nimport Grow from '../Grow';\nimport Paper from '../Paper';\nexport function getOffsetTop(rect, vertical) {\n var offset = 0;\n\n if (typeof vertical === 'number') {\n offset = vertical;\n } else if (vertical === 'center') {\n offset = rect.height / 2;\n } else if (vertical === 'bottom') {\n offset = rect.height;\n }\n\n return offset;\n}\nexport function getOffsetLeft(rect, horizontal) {\n var offset = 0;\n\n if (typeof horizontal === 'number') {\n offset = horizontal;\n } else if (horizontal === 'center') {\n offset = rect.width / 2;\n } else if (horizontal === 'right') {\n offset = rect.width;\n }\n\n return offset;\n}\n\nfunction getTransformOriginValue(transformOrigin) {\n return [transformOrigin.horizontal, transformOrigin.vertical].map(function (n) {\n return typeof n === 'number' ? \"\".concat(n, \"px\") : n;\n }).join(' ');\n} // Sum the scrollTop between two elements.\n\n\nfunction getScrollParent(parent, child) {\n var element = child;\n var scrollTop = 0;\n\n while (element && element !== parent) {\n element = element.parentElement;\n scrollTop += element.scrollTop;\n }\n\n return scrollTop;\n}\n\nfunction getAnchorEl(anchorEl) {\n return typeof anchorEl === 'function' ? anchorEl() : anchorEl;\n}\n\nexport var styles = {\n /* Styles applied to the root element. */\n root: {},\n\n /* Styles applied to the `Paper` component. */\n paper: {\n position: 'absolute',\n overflowY: 'auto',\n overflowX: 'hidden',\n // So we see the popover when it's empty.\n // It's most likely on issue on userland.\n minWidth: 16,\n minHeight: 16,\n maxWidth: 'calc(100% - 32px)',\n maxHeight: 'calc(100% - 32px)',\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0\n }\n};\nvar Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {\n var action = props.action,\n anchorEl = props.anchorEl,\n _props$anchorOrigin = props.anchorOrigin,\n anchorOrigin = _props$anchorOrigin === void 0 ? {\n vertical: 'top',\n horizontal: 'left'\n } : _props$anchorOrigin,\n anchorPosition = props.anchorPosition,\n _props$anchorReferenc = props.anchorReference,\n anchorReference = _props$anchorReferenc === void 0 ? 'anchorEl' : _props$anchorReferenc,\n children = props.children,\n classes = props.classes,\n className = props.className,\n containerProp = props.container,\n _props$elevation = props.elevation,\n elevation = _props$elevation === void 0 ? 8 : _props$elevation,\n getContentAnchorEl = props.getContentAnchorEl,\n _props$marginThreshol = props.marginThreshold,\n marginThreshold = _props$marginThreshol === void 0 ? 16 : _props$marginThreshol,\n onEnter = props.onEnter,\n onEntered = props.onEntered,\n onEntering = props.onEntering,\n onExit = props.onExit,\n onExited = props.onExited,\n onExiting = props.onExiting,\n open = props.open,\n _props$PaperProps = props.PaperProps,\n PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,\n _props$transformOrigi = props.transformOrigin,\n transformOrigin = _props$transformOrigi === void 0 ? {\n vertical: 'top',\n horizontal: 'left'\n } : _props$transformOrigi,\n _props$TransitionComp = props.TransitionComponent,\n TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,\n _props$transitionDura = props.transitionDuration,\n transitionDurationProp = _props$transitionDura === void 0 ? 'auto' : _props$transitionDura,\n _props$TransitionProp = props.TransitionProps,\n TransitionProps = _props$TransitionProp === void 0 ? {} : _props$TransitionProp,\n other = _objectWithoutProperties(props, [\"action\", \"anchorEl\", \"anchorOrigin\", \"anchorPosition\", \"anchorReference\", \"children\", \"classes\", \"className\", \"container\", \"elevation\", \"getContentAnchorEl\", \"marginThreshold\", \"onEnter\", \"onEntered\", \"onEntering\", \"onExit\", \"onExited\", \"onExiting\", \"open\", \"PaperProps\", \"transformOrigin\", \"TransitionComponent\", \"transitionDuration\", \"TransitionProps\"]);\n\n var paperRef = React.useRef(); // Returns the top/left offset of the position\n // to attach to on the anchor element (or body if none is provided)\n\n var getAnchorOffset = React.useCallback(function (contentAnchorOffset) {\n if (anchorReference === 'anchorPosition') {\n if (process.env.NODE_ENV !== 'production') {\n if (!anchorPosition) {\n console.error('Material-UI: You need to provide a `anchorPosition` prop when using ' + '.');\n }\n }\n\n return anchorPosition;\n }\n\n var resolvedAnchorEl = getAnchorEl(anchorEl); // If an anchor element wasn't provided, just use the parent body element of this Popover\n\n var anchorElement = resolvedAnchorEl && resolvedAnchorEl.nodeType === 1 ? resolvedAnchorEl : ownerDocument(paperRef.current).body;\n var anchorRect = anchorElement.getBoundingClientRect();\n\n if (process.env.NODE_ENV !== 'production') {\n var box = anchorElement.getBoundingClientRect();\n\n if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {\n console.warn(['Material-UI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', \"Make sure the element is present in the document or that it's not display none.\"].join('\\n'));\n }\n }\n\n var anchorVertical = contentAnchorOffset === 0 ? anchorOrigin.vertical : 'center';\n return {\n top: anchorRect.top + getOffsetTop(anchorRect, anchorVertical),\n left: anchorRect.left + getOffsetLeft(anchorRect, anchorOrigin.horizontal)\n };\n }, [anchorEl, anchorOrigin.horizontal, anchorOrigin.vertical, anchorPosition, anchorReference]); // Returns the vertical offset of inner content to anchor the transform on if provided\n\n var getContentAnchorOffset = React.useCallback(function (element) {\n var contentAnchorOffset = 0;\n\n if (getContentAnchorEl && anchorReference === 'anchorEl') {\n var contentAnchorEl = getContentAnchorEl(element);\n\n if (contentAnchorEl && element.contains(contentAnchorEl)) {\n var scrollTop = getScrollParent(element, contentAnchorEl);\n contentAnchorOffset = contentAnchorEl.offsetTop + contentAnchorEl.clientHeight / 2 - scrollTop || 0;\n } // != the default value\n\n\n if (process.env.NODE_ENV !== 'production') {\n if (anchorOrigin.vertical !== 'top') {\n console.error(['Material-UI: You can not change the default `anchorOrigin.vertical` value ', 'when also providing the `getContentAnchorEl` prop to the popover component.', 'Only use one of the two props.', 'Set `getContentAnchorEl` to `null | undefined`' + ' or leave `anchorOrigin.vertical` unchanged.'].join('\\n'));\n }\n }\n }\n\n return contentAnchorOffset;\n }, [anchorOrigin.vertical, anchorReference, getContentAnchorEl]); // Return the base transform origin using the element\n // and taking the content anchor offset into account if in use\n\n var getTransformOrigin = React.useCallback(function (elemRect) {\n var contentAnchorOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n return {\n vertical: getOffsetTop(elemRect, transformOrigin.vertical) + contentAnchorOffset,\n horizontal: getOffsetLeft(elemRect, transformOrigin.horizontal)\n };\n }, [transformOrigin.horizontal, transformOrigin.vertical]);\n var getPositioningStyle = React.useCallback(function (element) {\n // Check if the parent has requested anchoring on an inner content node\n var contentAnchorOffset = getContentAnchorOffset(element);\n var elemRect = {\n width: element.offsetWidth,\n height: element.offsetHeight\n }; // Get the transform origin point on the element itself\n\n var elemTransformOrigin = getTransformOrigin(elemRect, contentAnchorOffset);\n\n if (anchorReference === 'none') {\n return {\n top: null,\n left: null,\n transformOrigin: getTransformOriginValue(elemTransformOrigin)\n };\n } // Get the offset of of the anchoring element\n\n\n var anchorOffset = getAnchorOffset(contentAnchorOffset); // Calculate element positioning\n\n var top = anchorOffset.top - elemTransformOrigin.vertical;\n var left = anchorOffset.left - elemTransformOrigin.horizontal;\n var bottom = top + elemRect.height;\n var right = left + elemRect.width; // Use the parent window of the anchorEl if provided\n\n var containerWindow = ownerWindow(getAnchorEl(anchorEl)); // Window thresholds taking required margin into account\n\n var heightThreshold = containerWindow.innerHeight - marginThreshold;\n var widthThreshold = containerWindow.innerWidth - marginThreshold; // Check if the vertical axis needs shifting\n\n if (top < marginThreshold) {\n var diff = top - marginThreshold;\n top -= diff;\n elemTransformOrigin.vertical += diff;\n } else if (bottom > heightThreshold) {\n var _diff = bottom - heightThreshold;\n\n top -= _diff;\n elemTransformOrigin.vertical += _diff;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n if (elemRect.height > heightThreshold && elemRect.height && heightThreshold) {\n console.error(['Material-UI: The popover component is too tall.', \"Some part of it can not be seen on the screen (\".concat(elemRect.height - heightThreshold, \"px).\"), 'Please consider adding a `max-height` to improve the user-experience.'].join('\\n'));\n }\n } // Check if the horizontal axis needs shifting\n\n\n if (left < marginThreshold) {\n var _diff2 = left - marginThreshold;\n\n left -= _diff2;\n elemTransformOrigin.horizontal += _diff2;\n } else if (right > widthThreshold) {\n var _diff3 = right - widthThreshold;\n\n left -= _diff3;\n elemTransformOrigin.horizontal += _diff3;\n }\n\n return {\n top: \"\".concat(Math.round(top), \"px\"),\n left: \"\".concat(Math.round(left), \"px\"),\n transformOrigin: getTransformOriginValue(elemTransformOrigin)\n };\n }, [anchorEl, anchorReference, getAnchorOffset, getContentAnchorOffset, getTransformOrigin, marginThreshold]);\n var setPositioningStyles = React.useCallback(function () {\n var element = paperRef.current;\n\n if (!element) {\n return;\n }\n\n var positioning = getPositioningStyle(element);\n\n if (positioning.top !== null) {\n element.style.top = positioning.top;\n }\n\n if (positioning.left !== null) {\n element.style.left = positioning.left;\n }\n\n element.style.transformOrigin = positioning.transformOrigin;\n }, [getPositioningStyle]);\n\n var handleEntering = function handleEntering(element, isAppearing) {\n if (onEntering) {\n onEntering(element, isAppearing);\n }\n\n setPositioningStyles();\n };\n\n var handlePaperRef = React.useCallback(function (instance) {\n // #StrictMode ready\n paperRef.current = ReactDOM.findDOMNode(instance);\n }, []);\n React.useEffect(function () {\n if (open) {\n setPositioningStyles();\n }\n });\n React.useImperativeHandle(action, function () {\n return open ? {\n updatePosition: function updatePosition() {\n setPositioningStyles();\n }\n } : null;\n }, [open, setPositioningStyles]);\n React.useEffect(function () {\n if (!open) {\n return undefined;\n }\n\n var handleResize = debounce(function () {\n setPositioningStyles();\n });\n window.addEventListener('resize', handleResize);\n return function () {\n handleResize.clear();\n window.removeEventListener('resize', handleResize);\n };\n }, [open, setPositioningStyles]);\n var transitionDuration = transitionDurationProp;\n\n if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {\n transitionDuration = undefined;\n } // If the container prop is provided, use that\n // If the anchorEl prop is provided, use its parent body element as the container\n // If neither are provided let the Modal take care of choosing the container\n\n\n var container = containerProp || (anchorEl ? ownerDocument(getAnchorEl(anchorEl)).body : undefined);\n return /*#__PURE__*/React.createElement(Modal, _extends({\n container: container,\n open: open,\n ref: ref,\n BackdropProps: {\n invisible: true\n },\n className: clsx(classes.root, className)\n }, other), /*#__PURE__*/React.createElement(TransitionComponent, _extends({\n appear: true,\n in: open,\n onEnter: onEnter,\n onEntered: onEntered,\n onExit: onExit,\n onExited: onExited,\n onExiting: onExiting,\n timeout: transitionDuration\n }, TransitionProps, {\n onEntering: createChainedFunction(handleEntering, TransitionProps.onEntering)\n }), /*#__PURE__*/React.createElement(Paper, _extends({\n elevation: elevation,\n ref: handlePaperRef\n }, PaperProps, {\n className: clsx(classes.paper, PaperProps.className)\n }), children)));\n});\nprocess.env.NODE_ENV !== \"production\" ? Popover.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * A ref for imperative actions.\n * It currently only supports updatePosition() action.\n */\n action: refType,\n\n /**\n * A HTML element, or a function that returns it.\n * It's used to set the position of the popover.\n */\n anchorEl: chainPropTypes(PropTypes.oneOfType([HTMLElementType, PropTypes.func]), function (props) {\n if (props.open && (!props.anchorReference || props.anchorReference === 'anchorEl')) {\n var resolvedAnchorEl = getAnchorEl(props.anchorEl);\n\n if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {\n var box = resolvedAnchorEl.getBoundingClientRect();\n\n if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {\n return new Error(['Material-UI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', \"Make sure the element is present in the document or that it's not display none.\"].join('\\n'));\n }\n } else {\n return new Error(['Material-UI: The `anchorEl` prop provided to the component is invalid.', \"It should be an Element instance but it's `\".concat(resolvedAnchorEl, \"` instead.\")].join('\\n'));\n }\n }\n\n return null;\n }),\n\n /**\n * This is the point on the anchor where the popover's\n * `anchorEl` will attach to. This is not used when the\n * anchorReference is 'anchorPosition'.\n *\n * Options:\n * vertical: [top, center, bottom];\n * horizontal: [left, center, right].\n */\n anchorOrigin: PropTypes.shape({\n horizontal: PropTypes.oneOfType([PropTypes.oneOf(['center', 'left', 'right']), PropTypes.number]).isRequired,\n vertical: PropTypes.oneOfType([PropTypes.oneOf(['bottom', 'center', 'top']), PropTypes.number]).isRequired\n }),\n\n /**\n * This is the position that may be used\n * to set the position of the popover.\n * The coordinates are relative to\n * the application's client area.\n */\n anchorPosition: PropTypes.shape({\n left: PropTypes.number.isRequired,\n top: PropTypes.number.isRequired\n }),\n\n /**\n * This determines which anchor prop to refer to to set\n * the position of the popover.\n */\n anchorReference: PropTypes.oneOf(['anchorEl', 'anchorPosition', 'none']),\n\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * A HTML element, component instance, or function that returns either.\n * The `container` will passed to the Modal component.\n *\n * By default, it uses the body of the anchorEl's top-level document object,\n * so it's simply `document.body` most of the time.\n */\n container: PropTypes\n /* @typescript-to-proptypes-ignore */\n .oneOfType([HTMLElementType, PropTypes.instanceOf(React.Component), PropTypes.func]),\n\n /**\n * The elevation of the popover.\n */\n elevation: PropTypes.number,\n\n /**\n * This function is called in order to retrieve the content anchor element.\n * It's the opposite of the `anchorEl` prop.\n * The content anchor element should be an element inside the popover.\n * It's used to correctly scroll and set the position of the popover.\n * The positioning strategy tries to make the content anchor element just above the\n * anchor element.\n */\n getContentAnchorEl: PropTypes.func,\n\n /**\n * Specifies how close to the edge of the window the popover can appear.\n */\n marginThreshold: PropTypes.number,\n\n /**\n * Callback fired when the component requests to be closed.\n */\n onClose: PropTypes.func,\n\n /**\n * Callback fired before the component is entering.\n */\n onEnter: PropTypes.func,\n\n /**\n * Callback fired when the component has entered.\n */\n onEntered: PropTypes.func,\n\n /**\n * Callback fired when the component is entering.\n */\n onEntering: PropTypes.func,\n\n /**\n * Callback fired before the component is exiting.\n */\n onExit: PropTypes.func,\n\n /**\n * Callback fired when the component has exited.\n */\n onExited: PropTypes.func,\n\n /**\n * Callback fired when the component is exiting.\n */\n onExiting: PropTypes.func,\n\n /**\n * If `true`, the popover is visible.\n */\n open: PropTypes.bool.isRequired,\n\n /**\n * Props applied to the [`Paper`](/api/paper/) element.\n */\n PaperProps: PropTypes\n /* @typescript-to-proptypes-ignore */\n .shape({\n component: elementTypeAcceptingRef\n }),\n\n /**\n * This is the point on the popover which\n * will attach to the anchor's origin.\n *\n * Options:\n * vertical: [top, center, bottom, x(px)];\n * horizontal: [left, center, right, x(px)].\n */\n transformOrigin: PropTypes.shape({\n horizontal: PropTypes.oneOfType([PropTypes.oneOf(['center', 'left', 'right']), PropTypes.number]).isRequired,\n vertical: PropTypes.oneOfType([PropTypes.oneOf(['bottom', 'center', 'top']), PropTypes.number]).isRequired\n }),\n\n /**\n * The component used for the transition.\n * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.\n */\n TransitionComponent: PropTypes.elementType,\n\n /**\n * Set to 'auto' to automatically calculate transition time based on height.\n */\n transitionDuration: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.shape({\n appear: PropTypes.number,\n enter: PropTypes.number,\n exit: PropTypes.number\n })]),\n\n /**\n * Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.\n */\n TransitionProps: PropTypes.object\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiPopover'\n})(Popover);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport { isFragment } from 'react-is';\nimport PropTypes from 'prop-types';\nimport * as ReactDOM from 'react-dom';\nimport ownerDocument from '../utils/ownerDocument';\nimport List from '../List';\nimport getScrollbarSize from '../utils/getScrollbarSize';\nimport useForkRef from '../utils/useForkRef';\n\nfunction nextItem(list, item, disableListWrap) {\n if (list === item) {\n return list.firstChild;\n }\n\n if (item && item.nextElementSibling) {\n return item.nextElementSibling;\n }\n\n return disableListWrap ? null : list.firstChild;\n}\n\nfunction previousItem(list, item, disableListWrap) {\n if (list === item) {\n return disableListWrap ? list.firstChild : list.lastChild;\n }\n\n if (item && item.previousElementSibling) {\n return item.previousElementSibling;\n }\n\n return disableListWrap ? null : list.lastChild;\n}\n\nfunction textCriteriaMatches(nextFocus, textCriteria) {\n if (textCriteria === undefined) {\n return true;\n }\n\n var text = nextFocus.innerText;\n\n if (text === undefined) {\n // jsdom doesn't support innerText\n text = nextFocus.textContent;\n }\n\n text = text.trim().toLowerCase();\n\n if (text.length === 0) {\n return false;\n }\n\n if (textCriteria.repeating) {\n return text[0] === textCriteria.keys[0];\n }\n\n return text.indexOf(textCriteria.keys.join('')) === 0;\n}\n\nfunction moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, traversalFunction, textCriteria) {\n var wrappedOnce = false;\n var nextFocus = traversalFunction(list, currentFocus, currentFocus ? disableListWrap : false);\n\n while (nextFocus) {\n // Prevent infinite loop.\n if (nextFocus === list.firstChild) {\n if (wrappedOnce) {\n return;\n }\n\n wrappedOnce = true;\n } // Same logic as useAutocomplete.js\n\n\n var nextFocusDisabled = disabledItemsFocusable ? false : nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';\n\n if (!nextFocus.hasAttribute('tabindex') || !textCriteriaMatches(nextFocus, textCriteria) || nextFocusDisabled) {\n // Move to the next element.\n nextFocus = traversalFunction(list, nextFocus, disableListWrap);\n } else {\n nextFocus.focus();\n return;\n }\n }\n}\n\nvar useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;\n/**\n * A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton.\n * It's exposed to help customization of the [`Menu`](/api/menu/) component. If you\n * use it separately you need to move focus into the component manually. Once\n * the focus is placed inside the component it is fully keyboard accessible.\n */\n\nvar MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {\n var actions = props.actions,\n _props$autoFocus = props.autoFocus,\n autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,\n _props$autoFocusItem = props.autoFocusItem,\n autoFocusItem = _props$autoFocusItem === void 0 ? false : _props$autoFocusItem,\n children = props.children,\n className = props.className,\n _props$disabledItemsF = props.disabledItemsFocusable,\n disabledItemsFocusable = _props$disabledItemsF === void 0 ? false : _props$disabledItemsF,\n _props$disableListWra = props.disableListWrap,\n disableListWrap = _props$disableListWra === void 0 ? false : _props$disableListWra,\n onKeyDown = props.onKeyDown,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'selectedMenu' : _props$variant,\n other = _objectWithoutProperties(props, [\"actions\", \"autoFocus\", \"autoFocusItem\", \"children\", \"className\", \"disabledItemsFocusable\", \"disableListWrap\", \"onKeyDown\", \"variant\"]);\n\n var listRef = React.useRef(null);\n var textCriteriaRef = React.useRef({\n keys: [],\n repeating: true,\n previousKeyMatched: true,\n lastTime: null\n });\n useEnhancedEffect(function () {\n if (autoFocus) {\n listRef.current.focus();\n }\n }, [autoFocus]);\n React.useImperativeHandle(actions, function () {\n return {\n adjustStyleForScrollbar: function adjustStyleForScrollbar(containerElement, theme) {\n // Let's ignore that piece of logic if users are already overriding the width\n // of the menu.\n var noExplicitWidth = !listRef.current.style.width;\n\n if (containerElement.clientHeight < listRef.current.clientHeight && noExplicitWidth) {\n var scrollbarSize = \"\".concat(getScrollbarSize(true), \"px\");\n listRef.current.style[theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;\n listRef.current.style.width = \"calc(100% + \".concat(scrollbarSize, \")\");\n }\n\n return listRef.current;\n }\n };\n }, []);\n\n var handleKeyDown = function handleKeyDown(event) {\n var list = listRef.current;\n var key = event.key;\n /**\n * @type {Element} - will always be defined since we are in a keydown handler\n * attached to an element. A keydown event is either dispatched to the activeElement\n * or document.body or document.documentElement. Only the first case will\n * trigger this specific handler.\n */\n\n var currentFocus = ownerDocument(list).activeElement;\n\n if (key === 'ArrowDown') {\n // Prevent scroll of the page\n event.preventDefault();\n moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, nextItem);\n } else if (key === 'ArrowUp') {\n event.preventDefault();\n moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, previousItem);\n } else if (key === 'Home') {\n event.preventDefault();\n moveFocus(list, null, disableListWrap, disabledItemsFocusable, nextItem);\n } else if (key === 'End') {\n event.preventDefault();\n moveFocus(list, null, disableListWrap, disabledItemsFocusable, previousItem);\n } else if (key.length === 1) {\n var criteria = textCriteriaRef.current;\n var lowerKey = key.toLowerCase();\n var currTime = performance.now();\n\n if (criteria.keys.length > 0) {\n // Reset\n if (currTime - criteria.lastTime > 500) {\n criteria.keys = [];\n criteria.repeating = true;\n criteria.previousKeyMatched = true;\n } else if (criteria.repeating && lowerKey !== criteria.keys[0]) {\n criteria.repeating = false;\n }\n }\n\n criteria.lastTime = currTime;\n criteria.keys.push(lowerKey);\n var keepFocusOnCurrent = currentFocus && !criteria.repeating && textCriteriaMatches(currentFocus, criteria);\n\n if (criteria.previousKeyMatched && (keepFocusOnCurrent || moveFocus(list, currentFocus, false, disabledItemsFocusable, nextItem, criteria))) {\n event.preventDefault();\n } else {\n criteria.previousKeyMatched = false;\n }\n }\n\n if (onKeyDown) {\n onKeyDown(event);\n }\n };\n\n var handleOwnRef = React.useCallback(function (instance) {\n // #StrictMode ready\n listRef.current = ReactDOM.findDOMNode(instance);\n }, []);\n var handleRef = useForkRef(handleOwnRef, ref);\n /**\n * the index of the item should receive focus\n * in a `variant=\"selectedMenu\"` it's the first `selected` item\n * otherwise it's the very first item.\n */\n\n var activeItemIndex = -1; // since we inject focus related props into children we have to do a lookahead\n // to check if there is a `selected` item. We're looking for the last `selected`\n // item and use the first valid item as a fallback\n\n React.Children.forEach(children, function (child, index) {\n if (! /*#__PURE__*/React.isValidElement(child)) {\n return;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n if (isFragment(child)) {\n console.error([\"Material-UI: The Menu component doesn't accept a Fragment as a child.\", 'Consider providing an array instead.'].join('\\n'));\n }\n }\n\n if (!child.props.disabled) {\n if (variant === 'selectedMenu' && child.props.selected) {\n activeItemIndex = index;\n } else if (activeItemIndex === -1) {\n activeItemIndex = index;\n }\n }\n });\n var items = React.Children.map(children, function (child, index) {\n if (index === activeItemIndex) {\n var newChildProps = {};\n\n if (autoFocusItem) {\n newChildProps.autoFocus = true;\n }\n\n if (child.props.tabIndex === undefined && variant === 'selectedMenu') {\n newChildProps.tabIndex = 0;\n }\n\n return /*#__PURE__*/React.cloneElement(child, newChildProps);\n }\n\n return child;\n });\n return /*#__PURE__*/React.createElement(List, _extends({\n role: \"menu\",\n ref: handleRef,\n className: className,\n onKeyDown: handleKeyDown,\n tabIndex: autoFocus ? 0 : -1\n }, other), items);\n});\nprocess.env.NODE_ENV !== \"production\" ? MenuList.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * If `true`, will focus the `[role=\"menu\"]` container and move into tab order.\n */\n autoFocus: PropTypes.bool,\n\n /**\n * If `true`, will focus the first menuitem if `variant=\"menu\"` or selected item\n * if `variant=\"selectedMenu\"`.\n */\n autoFocusItem: PropTypes.bool,\n\n /**\n * MenuList contents, normally `MenuItem`s.\n */\n children: PropTypes.node,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * If `true`, will allow focus on disabled items.\n */\n disabledItemsFocusable: PropTypes.bool,\n\n /**\n * If `true`, the menu items will not wrap focus.\n */\n disableListWrap: PropTypes.bool,\n\n /**\n * @ignore\n */\n onKeyDown: PropTypes.func,\n\n /**\n * The variant to use. Use `menu` to prevent selected items from impacting the initial focus\n * and the vertical alignment relative to the anchor element.\n */\n variant: PropTypes.oneOf(['menu', 'selectedMenu'])\n} : void 0;\nexport default MenuList;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport { isFragment } from 'react-is';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { HTMLElementType } from '@material-ui/utils';\nimport withStyles from '../styles/withStyles';\nimport Popover from '../Popover';\nimport MenuList from '../MenuList';\nimport * as ReactDOM from 'react-dom';\nimport setRef from '../utils/setRef';\nimport useTheme from '../styles/useTheme';\nvar RTL_ORIGIN = {\n vertical: 'top',\n horizontal: 'right'\n};\nvar LTR_ORIGIN = {\n vertical: 'top',\n horizontal: 'left'\n};\nexport var styles = {\n /* Styles applied to the `Paper` component. */\n paper: {\n // specZ: The maximum height of a simple menu should be one or more rows less than the view\n // height. This ensures a tapable area outside of the simple menu with which to dismiss\n // the menu.\n maxHeight: 'calc(100% - 96px)',\n // Add iOS momentum scrolling.\n WebkitOverflowScrolling: 'touch'\n },\n\n /* Styles applied to the `List` component via `MenuList`. */\n list: {\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0\n }\n};\nvar Menu = /*#__PURE__*/React.forwardRef(function Menu(props, ref) {\n var _props$autoFocus = props.autoFocus,\n autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,\n children = props.children,\n classes = props.classes,\n _props$disableAutoFoc = props.disableAutoFocusItem,\n disableAutoFocusItem = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,\n _props$MenuListProps = props.MenuListProps,\n MenuListProps = _props$MenuListProps === void 0 ? {} : _props$MenuListProps,\n onClose = props.onClose,\n onEntering = props.onEntering,\n open = props.open,\n _props$PaperProps = props.PaperProps,\n PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,\n PopoverClasses = props.PopoverClasses,\n _props$transitionDura = props.transitionDuration,\n transitionDuration = _props$transitionDura === void 0 ? 'auto' : _props$transitionDura,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'selectedMenu' : _props$variant,\n other = _objectWithoutProperties(props, [\"autoFocus\", \"children\", \"classes\", \"disableAutoFocusItem\", \"MenuListProps\", \"onClose\", \"onEntering\", \"open\", \"PaperProps\", \"PopoverClasses\", \"transitionDuration\", \"variant\"]);\n\n var theme = useTheme();\n var autoFocusItem = autoFocus && !disableAutoFocusItem && open;\n var menuListActionsRef = React.useRef(null);\n var contentAnchorRef = React.useRef(null);\n\n var getContentAnchorEl = function getContentAnchorEl() {\n return contentAnchorRef.current;\n };\n\n var handleEntering = function handleEntering(element, isAppearing) {\n if (menuListActionsRef.current) {\n menuListActionsRef.current.adjustStyleForScrollbar(element, theme);\n }\n\n if (onEntering) {\n onEntering(element, isAppearing);\n }\n };\n\n var handleListKeyDown = function handleListKeyDown(event) {\n if (event.key === 'Tab') {\n event.preventDefault();\n\n if (onClose) {\n onClose(event, 'tabKeyDown');\n }\n }\n };\n /**\n * the index of the item should receive focus\n * in a `variant=\"selectedMenu\"` it's the first `selected` item\n * otherwise it's the very first item.\n */\n\n\n var activeItemIndex = -1; // since we inject focus related props into children we have to do a lookahead\n // to check if there is a `selected` item. We're looking for the last `selected`\n // item and use the first valid item as a fallback\n\n React.Children.map(children, function (child, index) {\n if (! /*#__PURE__*/React.isValidElement(child)) {\n return;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n if (isFragment(child)) {\n console.error([\"Material-UI: The Menu component doesn't accept a Fragment as a child.\", 'Consider providing an array instead.'].join('\\n'));\n }\n }\n\n if (!child.props.disabled) {\n if (variant !== \"menu\" && child.props.selected) {\n activeItemIndex = index;\n } else if (activeItemIndex === -1) {\n activeItemIndex = index;\n }\n }\n });\n var items = React.Children.map(children, function (child, index) {\n if (index === activeItemIndex) {\n return /*#__PURE__*/React.cloneElement(child, {\n ref: function ref(instance) {\n // #StrictMode ready\n contentAnchorRef.current = ReactDOM.findDOMNode(instance);\n setRef(child.ref, instance);\n }\n });\n }\n\n return child;\n });\n return /*#__PURE__*/React.createElement(Popover, _extends({\n getContentAnchorEl: getContentAnchorEl,\n classes: PopoverClasses,\n onClose: onClose,\n onEntering: handleEntering,\n anchorOrigin: theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN,\n transformOrigin: theme.direction === 'rtl' ? RTL_ORIGIN : LTR_ORIGIN,\n PaperProps: _extends({}, PaperProps, {\n classes: _extends({}, PaperProps.classes, {\n root: classes.paper\n })\n }),\n open: open,\n ref: ref,\n transitionDuration: transitionDuration\n }, other), /*#__PURE__*/React.createElement(MenuList, _extends({\n onKeyDown: handleListKeyDown,\n actions: menuListActionsRef,\n autoFocus: autoFocus && (activeItemIndex === -1 || disableAutoFocusItem),\n autoFocusItem: autoFocusItem,\n variant: variant\n }, MenuListProps, {\n className: clsx(classes.list, MenuListProps.className)\n }), items));\n});\nprocess.env.NODE_ENV !== \"production\" ? Menu.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * A HTML element, or a function that returns it.\n * It's used to set the position of the menu.\n */\n anchorEl: PropTypes\n /* @typescript-to-proptypes-ignore */\n .oneOfType([HTMLElementType, PropTypes.func]),\n\n /**\n * If `true` (Default) will focus the `[role=\"menu\"]` if no focusable child is found. Disabled\n * children are not focusable. If you set this prop to `false` focus will be placed\n * on the parent modal container. This has severe accessibility implications\n * and should only be considered if you manage focus otherwise.\n */\n autoFocus: PropTypes.bool,\n\n /**\n * Menu contents, normally `MenuItem`s.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * When opening the menu will not focus the active item but the `[role=\"menu\"]`\n * unless `autoFocus` is also set to `false`. Not using the default means not\n * following WAI-ARIA authoring practices. Please be considerate about possible\n * accessibility implications.\n */\n disableAutoFocusItem: PropTypes.bool,\n\n /**\n * Props applied to the [`MenuList`](/api/menu-list/) element.\n */\n MenuListProps: PropTypes.object,\n\n /**\n * Callback fired when the component requests to be closed.\n *\n * @param {object} event The event source of the callback.\n * @param {string} reason Can be: `\"escapeKeyDown\"`, `\"backdropClick\"`, `\"tabKeyDown\"`.\n */\n onClose: PropTypes.func,\n\n /**\n * Callback fired before the Menu enters.\n */\n onEnter: PropTypes.func,\n\n /**\n * Callback fired when the Menu has entered.\n */\n onEntered: PropTypes.func,\n\n /**\n * Callback fired when the Menu is entering.\n */\n onEntering: PropTypes.func,\n\n /**\n * Callback fired before the Menu exits.\n */\n onExit: PropTypes.func,\n\n /**\n * Callback fired when the Menu has exited.\n */\n onExited: PropTypes.func,\n\n /**\n * Callback fired when the Menu is exiting.\n */\n onExiting: PropTypes.func,\n\n /**\n * If `true`, the menu is visible.\n */\n open: PropTypes.bool.isRequired,\n\n /**\n * @ignore\n */\n PaperProps: PropTypes.object,\n\n /**\n * `classes` prop applied to the [`Popover`](/api/popover/) element.\n */\n PopoverClasses: PropTypes.object,\n\n /**\n * The length of the transition in `ms`, or 'auto'\n */\n transitionDuration: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.shape({\n appear: PropTypes.number,\n enter: PropTypes.number,\n exit: PropTypes.number\n })]),\n\n /**\n * The variant to use. Use `menu` to prevent selected items from impacting the initial focus\n * and the vertical alignment relative to the anchor element.\n */\n variant: PropTypes.oneOf(['menu', 'selectedMenu'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiMenu'\n})(Menu);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport { formatMuiErrorMessage as _formatMuiErrorMessage } from \"@material-ui/utils\";\nimport * as React from 'react';\nimport { isFragment } from 'react-is';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport ownerDocument from '../utils/ownerDocument';\nimport capitalize from '../utils/capitalize';\nimport { refType } from '@material-ui/utils';\nimport Menu from '../Menu/Menu';\nimport { isFilled } from '../InputBase/utils';\nimport useForkRef from '../utils/useForkRef';\nimport useControlled from '../utils/useControlled';\n\nfunction areEqualValues(a, b) {\n if (_typeof(b) === 'object' && b !== null) {\n return a === b;\n }\n\n return String(a) === String(b);\n}\n\nfunction isEmpty(display) {\n return display == null || typeof display === 'string' && !display.trim();\n}\n/**\n * @ignore - internal component.\n */\n\n\nvar SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref) {\n var ariaLabel = props['aria-label'],\n autoFocus = props.autoFocus,\n autoWidth = props.autoWidth,\n children = props.children,\n classes = props.classes,\n className = props.className,\n defaultValue = props.defaultValue,\n disabled = props.disabled,\n displayEmpty = props.displayEmpty,\n IconComponent = props.IconComponent,\n inputRefProp = props.inputRef,\n labelId = props.labelId,\n _props$MenuProps = props.MenuProps,\n MenuProps = _props$MenuProps === void 0 ? {} : _props$MenuProps,\n multiple = props.multiple,\n name = props.name,\n onBlur = props.onBlur,\n onChange = props.onChange,\n onClose = props.onClose,\n onFocus = props.onFocus,\n onOpen = props.onOpen,\n openProp = props.open,\n readOnly = props.readOnly,\n renderValue = props.renderValue,\n _props$SelectDisplayP = props.SelectDisplayProps,\n SelectDisplayProps = _props$SelectDisplayP === void 0 ? {} : _props$SelectDisplayP,\n tabIndexProp = props.tabIndex,\n type = props.type,\n valueProp = props.value,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'standard' : _props$variant,\n other = _objectWithoutProperties(props, [\"aria-label\", \"autoFocus\", \"autoWidth\", \"children\", \"classes\", \"className\", \"defaultValue\", \"disabled\", \"displayEmpty\", \"IconComponent\", \"inputRef\", \"labelId\", \"MenuProps\", \"multiple\", \"name\", \"onBlur\", \"onChange\", \"onClose\", \"onFocus\", \"onOpen\", \"open\", \"readOnly\", \"renderValue\", \"SelectDisplayProps\", \"tabIndex\", \"type\", \"value\", \"variant\"]);\n\n var _useControlled = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: 'Select'\n }),\n _useControlled2 = _slicedToArray(_useControlled, 2),\n value = _useControlled2[0],\n setValue = _useControlled2[1];\n\n var inputRef = React.useRef(null);\n\n var _React$useState = React.useState(null),\n displayNode = _React$useState[0],\n setDisplayNode = _React$useState[1];\n\n var _React$useRef = React.useRef(openProp != null),\n isOpenControlled = _React$useRef.current;\n\n var _React$useState2 = React.useState(),\n menuMinWidthState = _React$useState2[0],\n setMenuMinWidthState = _React$useState2[1];\n\n var _React$useState3 = React.useState(false),\n openState = _React$useState3[0],\n setOpenState = _React$useState3[1];\n\n var handleRef = useForkRef(ref, inputRefProp);\n React.useImperativeHandle(handleRef, function () {\n return {\n focus: function focus() {\n displayNode.focus();\n },\n node: inputRef.current,\n value: value\n };\n }, [displayNode, value]);\n React.useEffect(function () {\n if (autoFocus && displayNode) {\n displayNode.focus();\n }\n }, [autoFocus, displayNode]);\n React.useEffect(function () {\n if (displayNode) {\n var label = ownerDocument(displayNode).getElementById(labelId);\n\n if (label) {\n var handler = function handler() {\n if (getSelection().isCollapsed) {\n displayNode.focus();\n }\n };\n\n label.addEventListener('click', handler);\n return function () {\n label.removeEventListener('click', handler);\n };\n }\n }\n\n return undefined;\n }, [labelId, displayNode]);\n\n var update = function update(open, event) {\n if (open) {\n if (onOpen) {\n onOpen(event);\n }\n } else if (onClose) {\n onClose(event);\n }\n\n if (!isOpenControlled) {\n setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);\n setOpenState(open);\n }\n };\n\n var handleMouseDown = function handleMouseDown(event) {\n // Ignore everything but left-click\n if (event.button !== 0) {\n return;\n } // Hijack the default focus behavior.\n\n\n event.preventDefault();\n displayNode.focus();\n update(true, event);\n };\n\n var handleClose = function handleClose(event) {\n update(false, event);\n };\n\n var childrenArray = React.Children.toArray(children); // Support autofill.\n\n var handleChange = function handleChange(event) {\n var index = childrenArray.map(function (child) {\n return child.props.value;\n }).indexOf(event.target.value);\n\n if (index === -1) {\n return;\n }\n\n var child = childrenArray[index];\n setValue(child.props.value);\n\n if (onChange) {\n onChange(event, child);\n }\n };\n\n var handleItemClick = function handleItemClick(child) {\n return function (event) {\n if (!multiple) {\n update(false, event);\n }\n\n var newValue;\n\n if (multiple) {\n newValue = Array.isArray(value) ? value.slice() : [];\n var itemIndex = value.indexOf(child.props.value);\n\n if (itemIndex === -1) {\n newValue.push(child.props.value);\n } else {\n newValue.splice(itemIndex, 1);\n }\n } else {\n newValue = child.props.value;\n }\n\n if (child.props.onClick) {\n child.props.onClick(event);\n }\n\n if (value === newValue) {\n return;\n }\n\n setValue(newValue);\n\n if (onChange) {\n event.persist(); // Preact support, target is read only property on a native event.\n\n Object.defineProperty(event, 'target', {\n writable: true,\n value: {\n value: newValue,\n name: name\n }\n });\n onChange(event, child);\n }\n };\n };\n\n var handleKeyDown = function handleKeyDown(event) {\n if (!readOnly) {\n var validKeys = [' ', 'ArrowUp', 'ArrowDown', // The native select doesn't respond to enter on MacOS, but it's recommended by\n // https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html\n 'Enter'];\n\n if (validKeys.indexOf(event.key) !== -1) {\n event.preventDefault();\n update(true, event);\n }\n }\n };\n\n var open = displayNode !== null && (isOpenControlled ? openProp : openState);\n\n var handleBlur = function handleBlur(event) {\n // if open event.stopImmediatePropagation\n if (!open && onBlur) {\n event.persist(); // Preact support, target is read only property on a native event.\n\n Object.defineProperty(event, 'target', {\n writable: true,\n value: {\n value: value,\n name: name\n }\n });\n onBlur(event);\n }\n };\n\n delete other['aria-invalid'];\n var display;\n var displaySingle;\n var displayMultiple = [];\n var computeDisplay = false;\n var foundMatch = false; // No need to display any value if the field is empty.\n\n if (isFilled({\n value: value\n }) || displayEmpty) {\n if (renderValue) {\n display = renderValue(value);\n } else {\n computeDisplay = true;\n }\n }\n\n var items = childrenArray.map(function (child) {\n if (! /*#__PURE__*/React.isValidElement(child)) {\n return null;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n if (isFragment(child)) {\n console.error([\"Material-UI: The Select component doesn't accept a Fragment as a child.\", 'Consider providing an array instead.'].join('\\n'));\n }\n }\n\n var selected;\n\n if (multiple) {\n if (!Array.isArray(value)) {\n throw new Error(process.env.NODE_ENV !== \"production\" ? \"Material-UI: The `value` prop must be an array when using the `Select` component with `multiple`.\" : _formatMuiErrorMessage(2));\n }\n\n selected = value.some(function (v) {\n return areEqualValues(v, child.props.value);\n });\n\n if (selected && computeDisplay) {\n displayMultiple.push(child.props.children);\n }\n } else {\n selected = areEqualValues(value, child.props.value);\n\n if (selected && computeDisplay) {\n displaySingle = child.props.children;\n }\n }\n\n if (selected) {\n foundMatch = true;\n }\n\n return /*#__PURE__*/React.cloneElement(child, {\n 'aria-selected': selected ? 'true' : undefined,\n onClick: handleItemClick(child),\n onKeyUp: function onKeyUp(event) {\n if (event.key === ' ') {\n // otherwise our MenuItems dispatches a click event\n // it's not behavior of the native |