outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\\n'));\n }\n }\n\n var theme = React.useMemo(function () {\n var output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);\n\n if (output != null) {\n output[nested] = outerTheme !== null;\n }\n\n return output;\n }, [localTheme, outerTheme]);\n return /*#__PURE__*/React.createElement(ThemeContext.Provider, {\n value: theme\n }, children);\n}\n\nprocess.env.NODE_ENV !== \"production\" ? ThemeProvider.propTypes = {\n /**\n * Your component tree.\n */\n children: PropTypes.node.isRequired,\n\n /**\n * A theme object. You can provide a function to extend the outer theme.\n */\n theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired\n} : void 0;\n\nif (process.env.NODE_ENV !== 'production') {\n process.env.NODE_ENV !== \"production\" ? ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) : void 0;\n}\n\nexport default ThemeProvider;","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 _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\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 Modal from '../Modal';\nimport Backdrop from '../Backdrop';\nimport Fade from '../Fade';\nimport { duration } from '../styles/transitions';\nimport Paper from '../Paper';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n '@media print': {\n // Use !important to override the Modal inline-style.\n position: 'absolute !important'\n }\n },\n\n /* Styles applied to the container element if `scroll=\"paper\"`. */\n scrollPaper: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center'\n },\n\n /* Styles applied to the container element if `scroll=\"body\"`. */\n scrollBody: {\n overflowY: 'auto',\n overflowX: 'hidden',\n textAlign: 'center',\n '&:after': {\n content: '\"\"',\n display: 'inline-block',\n verticalAlign: 'middle',\n height: '100%',\n width: '0'\n }\n },\n\n /* Styles applied to the container element. */\n container: {\n height: '100%',\n '@media print': {\n height: 'auto'\n },\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0\n },\n\n /* Styles applied to the `Paper` component. */\n paper: {\n margin: 32,\n position: 'relative',\n overflowY: 'auto',\n // Fix IE 11 issue, to remove at some point.\n '@media print': {\n overflowY: 'visible',\n boxShadow: 'none'\n }\n },\n\n /* Styles applied to the `Paper` component if `scroll=\"paper\"`. */\n paperScrollPaper: {\n display: 'flex',\n flexDirection: 'column',\n maxHeight: 'calc(100% - 64px)'\n },\n\n /* Styles applied to the `Paper` component if `scroll=\"body\"`. */\n paperScrollBody: {\n display: 'inline-block',\n verticalAlign: 'middle',\n textAlign: 'left' // 'initial' doesn't work on IE 11\n\n },\n\n /* Styles applied to the `Paper` component if `maxWidth=false`. */\n paperWidthFalse: {\n maxWidth: 'calc(100% - 64px)'\n },\n\n /* Styles applied to the `Paper` component if `maxWidth=\"xs\"`. */\n paperWidthXs: {\n maxWidth: Math.max(theme.breakpoints.values.xs, 444),\n '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2), {\n maxWidth: 'calc(100% - 64px)'\n })\n },\n\n /* Styles applied to the `Paper` component if `maxWidth=\"sm\"`. */\n paperWidthSm: {\n maxWidth: theme.breakpoints.values.sm,\n '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.sm + 32 * 2), {\n maxWidth: 'calc(100% - 64px)'\n })\n },\n\n /* Styles applied to the `Paper` component if `maxWidth=\"md\"`. */\n paperWidthMd: {\n maxWidth: theme.breakpoints.values.md,\n '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.md + 32 * 2), {\n maxWidth: 'calc(100% - 64px)'\n })\n },\n\n /* Styles applied to the `Paper` component if `maxWidth=\"lg\"`. */\n paperWidthLg: {\n maxWidth: theme.breakpoints.values.lg,\n '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.lg + 32 * 2), {\n maxWidth: 'calc(100% - 64px)'\n })\n },\n\n /* Styles applied to the `Paper` component if `maxWidth=\"xl\"`. */\n paperWidthXl: {\n maxWidth: theme.breakpoints.values.xl,\n '&$paperScrollBody': _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values.xl + 32 * 2), {\n maxWidth: 'calc(100% - 64px)'\n })\n },\n\n /* Styles applied to the `Paper` component if `fullWidth={true}`. */\n paperFullWidth: {\n width: 'calc(100% - 64px)'\n },\n\n /* Styles applied to the `Paper` component if `fullScreen={true}`. */\n paperFullScreen: {\n margin: 0,\n width: '100%',\n maxWidth: '100%',\n height: '100%',\n maxHeight: 'none',\n borderRadius: 0,\n '&$paperScrollBody': {\n margin: 0,\n maxWidth: '100%'\n }\n }\n };\n};\nvar defaultTransitionDuration = {\n enter: duration.enteringScreen,\n exit: duration.leavingScreen\n};\n/**\n * Dialogs are overlaid modal paper based components with a backdrop.\n */\n\nvar Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {\n var BackdropProps = props.BackdropProps,\n children = props.children,\n classes = props.classes,\n className = props.className,\n _props$disableBackdro = props.disableBackdropClick,\n disableBackdropClick = _props$disableBackdro === void 0 ? false : _props$disableBackdro,\n _props$disableEscapeK = props.disableEscapeKeyDown,\n disableEscapeKeyDown = _props$disableEscapeK === void 0 ? false : _props$disableEscapeK,\n _props$fullScreen = props.fullScreen,\n fullScreen = _props$fullScreen === void 0 ? false : _props$fullScreen,\n _props$fullWidth = props.fullWidth,\n fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,\n _props$maxWidth = props.maxWidth,\n maxWidth = _props$maxWidth === void 0 ? 'sm' : _props$maxWidth,\n onBackdropClick = props.onBackdropClick,\n onClose = props.onClose,\n onEnter = props.onEnter,\n onEntered = props.onEntered,\n onEntering = props.onEntering,\n onEscapeKeyDown = props.onEscapeKeyDown,\n onExit = props.onExit,\n onExited = props.onExited,\n onExiting = props.onExiting,\n open = props.open,\n _props$PaperComponent = props.PaperComponent,\n PaperComponent = _props$PaperComponent === void 0 ? Paper : _props$PaperComponent,\n _props$PaperProps = props.PaperProps,\n PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,\n _props$scroll = props.scroll,\n scroll = _props$scroll === void 0 ? 'paper' : _props$scroll,\n _props$TransitionComp = props.TransitionComponent,\n TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,\n _props$transitionDura = props.transitionDuration,\n transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration : _props$transitionDura,\n TransitionProps = props.TransitionProps,\n ariaDescribedby = props['aria-describedby'],\n ariaLabelledby = props['aria-labelledby'],\n other = _objectWithoutProperties(props, [\"BackdropProps\", \"children\", \"classes\", \"className\", \"disableBackdropClick\", \"disableEscapeKeyDown\", \"fullScreen\", \"fullWidth\", \"maxWidth\", \"onBackdropClick\", \"onClose\", \"onEnter\", \"onEntered\", \"onEntering\", \"onEscapeKeyDown\", \"onExit\", \"onExited\", \"onExiting\", \"open\", \"PaperComponent\", \"PaperProps\", \"scroll\", \"TransitionComponent\", \"transitionDuration\", \"TransitionProps\", \"aria-describedby\", \"aria-labelledby\"]);\n\n var mouseDownTarget = React.useRef();\n\n var handleMouseDown = function handleMouseDown(event) {\n mouseDownTarget.current = event.target;\n };\n\n var handleBackdropClick = function handleBackdropClick(event) {\n // Ignore the events not coming from the \"backdrop\"\n // We don't want to close the dialog when clicking the dialog content.\n if (event.target !== event.currentTarget) {\n return;\n } // Make sure the event starts and ends on the same DOM element.\n\n\n if (event.target !== mouseDownTarget.current) {\n return;\n }\n\n mouseDownTarget.current = null;\n\n if (onBackdropClick) {\n onBackdropClick(event);\n }\n\n if (!disableBackdropClick && onClose) {\n onClose(event, 'backdropClick');\n }\n };\n\n return /*#__PURE__*/React.createElement(Modal, _extends({\n className: clsx(classes.root, className),\n BackdropComponent: Backdrop,\n BackdropProps: _extends({\n transitionDuration: transitionDuration\n }, BackdropProps),\n closeAfterTransition: true,\n disableBackdropClick: disableBackdropClick,\n disableEscapeKeyDown: disableEscapeKeyDown,\n onEscapeKeyDown: onEscapeKeyDown,\n onClose: onClose,\n open: open,\n ref: ref\n }, other), /*#__PURE__*/React.createElement(TransitionComponent, _extends({\n appear: true,\n in: open,\n timeout: transitionDuration,\n onEnter: onEnter,\n onEntering: onEntering,\n onEntered: onEntered,\n onExit: onExit,\n onExiting: onExiting,\n onExited: onExited,\n role: \"none presentation\"\n }, TransitionProps), /*#__PURE__*/React.createElement(\"div\", {\n className: clsx(classes.container, classes[\"scroll\".concat(capitalize(scroll))]),\n onMouseUp: handleBackdropClick,\n onMouseDown: handleMouseDown\n }, /*#__PURE__*/React.createElement(PaperComponent, _extends({\n elevation: 24,\n role: \"dialog\",\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby\n }, PaperProps, {\n className: clsx(classes.paper, classes[\"paperScroll\".concat(capitalize(scroll))], classes[\"paperWidth\".concat(capitalize(String(maxWidth)))], PaperProps.className, fullScreen && classes.paperFullScreen, fullWidth && classes.paperFullWidth)\n }), children))));\n});\nprocess.env.NODE_ENV !== \"production\" ? Dialog.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 id(s) of the element(s) that describe the dialog.\n */\n 'aria-describedby': PropTypes.string,\n\n /**\n * The id(s) of the element(s) that label the dialog.\n */\n 'aria-labelledby': PropTypes.string,\n\n /**\n * @ignore\n */\n BackdropProps: PropTypes.object,\n\n /**\n * Dialog children, usually the included sub-components.\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`, clicking the backdrop will not fire the `onClose` callback.\n */\n disableBackdropClick: PropTypes.bool,\n\n /**\n * If `true`, hitting escape will not fire the `onClose` callback.\n */\n disableEscapeKeyDown: PropTypes.bool,\n\n /**\n * If `true`, the dialog will be full-screen\n */\n fullScreen: PropTypes.bool,\n\n /**\n * If `true`, the dialog stretches to `maxWidth`.\n *\n * Notice that the dialog width grow is limited by the default margin.\n */\n fullWidth: PropTypes.bool,\n\n /**\n * Determine the max-width of the dialog.\n * The dialog width grows with the size of the screen.\n * Set to `false` to disable `maxWidth`.\n */\n maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]),\n\n /**\n * Callback fired when the backdrop is clicked.\n */\n onBackdropClick: PropTypes.func,\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\"`.\n */\n onClose: PropTypes.func,\n\n /**\n * Callback fired before the dialog enters.\n */\n onEnter: PropTypes.func,\n\n /**\n * Callback fired when the dialog has entered.\n */\n onEntered: PropTypes.func,\n\n /**\n * Callback fired when the dialog is entering.\n */\n onEntering: PropTypes.func,\n\n /**\n * Callback fired when the escape key is pressed,\n * `disableKeyboard` is false and the modal is in focus.\n */\n onEscapeKeyDown: PropTypes.func,\n\n /**\n * Callback fired before the dialog exits.\n */\n onExit: PropTypes.func,\n\n /**\n * Callback fired when the dialog has exited.\n */\n onExited: PropTypes.func,\n\n /**\n * Callback fired when the dialog is exiting.\n */\n onExiting: PropTypes.func,\n\n /**\n * If `true`, the Dialog is open.\n */\n open: PropTypes.bool.isRequired,\n\n /**\n * The component used to render the body of the dialog.\n */\n PaperComponent: PropTypes.elementType,\n\n /**\n * Props applied to the [`Paper`](/api/paper/) element.\n */\n PaperProps: PropTypes.object,\n\n /**\n * Determine the container for scrolling the dialog.\n */\n scroll: PropTypes.oneOf(['body', 'paper']),\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 * The duration for the transition, in milliseconds.\n * You may specify a single timeout for all transitions, or individually with an object.\n */\n transitionDuration: PropTypes.oneOfType([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: 'MuiDialog'\n})(Dialog);","/* eslint-disable consistent-return, jsx-a11y/no-noninteractive-tabindex, camelcase */\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport ownerDocument from '../utils/ownerDocument';\nimport useForkRef from '../utils/useForkRef';\nimport { exactProp } from '@material-ui/utils';\n/**\n * Utility component that locks focus inside the component.\n */\n\nfunction Unstable_TrapFocus(props) {\n var children = props.children,\n _props$disableAutoFoc = props.disableAutoFocus,\n disableAutoFocus = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,\n _props$disableEnforce = props.disableEnforceFocus,\n disableEnforceFocus = _props$disableEnforce === void 0 ? false : _props$disableEnforce,\n _props$disableRestore = props.disableRestoreFocus,\n disableRestoreFocus = _props$disableRestore === void 0 ? false : _props$disableRestore,\n getDoc = props.getDoc,\n isEnabled = props.isEnabled,\n open = props.open;\n var ignoreNextEnforceFocus = React.useRef();\n var sentinelStart = React.useRef(null);\n var sentinelEnd = React.useRef(null);\n var nodeToRestore = React.useRef();\n var rootRef = React.useRef(null); // can be removed once we drop support for non ref forwarding class components\n\n var handleOwnRef = React.useCallback(function (instance) {\n // #StrictMode ready\n rootRef.current = ReactDOM.findDOMNode(instance);\n }, []);\n var handleRef = useForkRef(children.ref, handleOwnRef);\n var prevOpenRef = React.useRef();\n React.useEffect(function () {\n prevOpenRef.current = open;\n }, [open]);\n\n if (!prevOpenRef.current && open && typeof window !== 'undefined') {\n // WARNING: Potentially unsafe in concurrent mode.\n // The way the read on `nodeToRestore` is setup could make this actually safe.\n // Say we render `open={false}` -> `open={true}` but never commit.\n // We have now written a state that wasn't committed. But no committed effect\n // will read this wrong value. We only read from `nodeToRestore` in effects\n // that were committed on `open={true}`\n // WARNING: Prevents the instance from being garbage collected. Should only\n // hold a weak ref.\n nodeToRestore.current = getDoc().activeElement;\n }\n\n React.useEffect(function () {\n if (!open) {\n return;\n }\n\n var doc = ownerDocument(rootRef.current); // We might render an empty child.\n\n if (!disableAutoFocus && rootRef.current && !rootRef.current.contains(doc.activeElement)) {\n if (!rootRef.current.hasAttribute('tabIndex')) {\n if (process.env.NODE_ENV !== 'production') {\n console.error(['Material-UI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to \"-1\".'].join('\\n'));\n }\n\n rootRef.current.setAttribute('tabIndex', -1);\n }\n\n rootRef.current.focus();\n }\n\n var contain = function contain() {\n if (!doc.hasFocus() || disableEnforceFocus || !isEnabled() || ignoreNextEnforceFocus.current) {\n ignoreNextEnforceFocus.current = false;\n return;\n }\n\n if (rootRef.current && !rootRef.current.contains(doc.activeElement)) {\n rootRef.current.focus();\n }\n };\n\n var loopFocus = function loopFocus(event) {\n // 9 = Tab\n if (disableEnforceFocus || !isEnabled() || event.keyCode !== 9) {\n return;\n } // Make sure the next tab starts from the right place.\n\n\n if (doc.activeElement === rootRef.current) {\n // We need to ignore the next contain as\n // it will try to move the focus back to the rootRef element.\n ignoreNextEnforceFocus.current = true;\n\n if (event.shiftKey) {\n sentinelEnd.current.focus();\n } else {\n sentinelStart.current.focus();\n }\n }\n };\n\n doc.addEventListener('focus', contain, true);\n doc.addEventListener('keydown', loopFocus, true); // With Edge, Safari and Firefox, no focus related events are fired when the focused area stops being a focused area\n // e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=559561.\n //\n // The whatwg spec defines how the browser should behave but does not explicitly mention any events:\n // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.\n\n var interval = setInterval(function () {\n contain();\n }, 50);\n return function () {\n clearInterval(interval);\n doc.removeEventListener('focus', contain, true);\n doc.removeEventListener('keydown', loopFocus, true); // restoreLastFocus()\n\n if (!disableRestoreFocus) {\n // In IE 11 it is possible for document.activeElement to be null resulting\n // in nodeToRestore.current being null.\n // Not all elements in IE 11 have a focus method.\n // Once IE 11 support is dropped the focus() call can be unconditional.\n if (nodeToRestore.current && nodeToRestore.current.focus) {\n nodeToRestore.current.focus();\n }\n\n nodeToRestore.current = null;\n }\n };\n }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open]);\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"div\", {\n tabIndex: 0,\n ref: sentinelStart,\n \"data-test\": \"sentinelStart\"\n }), /*#__PURE__*/React.cloneElement(children, {\n ref: handleRef\n }), /*#__PURE__*/React.createElement(\"div\", {\n tabIndex: 0,\n ref: sentinelEnd,\n \"data-test\": \"sentinelEnd\"\n }));\n}\n\nprocess.env.NODE_ENV !== \"production\" ? Unstable_TrapFocus.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.node,\n\n /**\n * If `true`, the trap focus will not automatically shift focus to itself when it opens, and\n * replace it to the last focused element when it closes.\n * This also works correctly with any trap focus children that have the `disableAutoFocus` prop.\n *\n * Generally this should never be set to `true` as it makes the trap focus less\n * accessible to assistive technologies, like screen readers.\n */\n disableAutoFocus: PropTypes.bool,\n\n /**\n * If `true`, the trap focus will not prevent focus from leaving the trap focus while open.\n *\n * Generally this should never be set to `true` as it makes the trap focus less\n * accessible to assistive technologies, like screen readers.\n */\n disableEnforceFocus: PropTypes.bool,\n\n /**\n * If `true`, the trap focus will not restore focus to previously focused element once\n * trap focus is hidden.\n */\n disableRestoreFocus: PropTypes.bool,\n\n /**\n * Return the document to consider.\n * We use it to implement the restore focus between different browser documents.\n */\n getDoc: PropTypes.func.isRequired,\n\n /**\n * Do we still want to enforce the focus?\n * This prop helps nesting TrapFocus elements.\n */\n isEnabled: PropTypes.func.isRequired,\n\n /**\n * If `true`, focus will be locked.\n */\n open: PropTypes.bool.isRequired\n} : void 0;\n\nif (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line\n Unstable_TrapFocus['propTypes' + ''] = exactProp(Unstable_TrapFocus.propTypes);\n}\n\nexport default Unstable_TrapFocus;","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 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 _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 _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 _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport Typography from '../Typography';\nimport withStyles from '../styles/withStyles';\nimport FormControlContext, { useFormControl } from '../FormControl/FormControlContext';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n display: 'flex',\n height: '0.01em',\n // Fix IE 11 flexbox alignment. To remove at some point.\n maxHeight: '2em',\n alignItems: 'center',\n whiteSpace: 'nowrap'\n },\n\n /* Styles applied to the root element if `variant=\"filled\"`. */\n filled: {\n '&$positionStart:not($hiddenLabel)': {\n marginTop: 16\n }\n },\n\n /* Styles applied to the root element if `position=\"start\"`. */\n positionStart: {\n marginRight: 8\n },\n\n /* Styles applied to the root element if `position=\"end\"`. */\n positionEnd: {\n marginLeft: 8\n },\n\n /* Styles applied to the root element if `disablePointerEvents=true`. */\n disablePointerEvents: {\n pointerEvents: 'none'\n },\n\n /* Styles applied if the adornment is used inside . */\n hiddenLabel: {},\n\n /* Styles applied if the adornment is used inside . */\n marginDense: {}\n};\nvar InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(props, ref) {\n var children = props.children,\n classes = props.classes,\n className = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'div' : _props$component,\n _props$disablePointer = props.disablePointerEvents,\n disablePointerEvents = _props$disablePointer === void 0 ? false : _props$disablePointer,\n _props$disableTypogra = props.disableTypography,\n disableTypography = _props$disableTypogra === void 0 ? false : _props$disableTypogra,\n position = props.position,\n variantProp = props.variant,\n other = _objectWithoutProperties(props, [\"children\", \"classes\", \"className\", \"component\", \"disablePointerEvents\", \"disableTypography\", \"position\", \"variant\"]);\n\n var muiFormControl = useFormControl() || {};\n var variant = variantProp;\n\n if (variantProp && muiFormControl.variant) {\n if (process.env.NODE_ENV !== 'production') {\n if (variantProp === muiFormControl.variant) {\n console.error('Material-UI: The `InputAdornment` variant infers the variant prop ' + 'you do not have to provide one.');\n }\n }\n }\n\n if (muiFormControl && !variant) {\n variant = muiFormControl.variant;\n }\n\n return /*#__PURE__*/React.createElement(FormControlContext.Provider, {\n value: null\n }, /*#__PURE__*/React.createElement(Component, _extends({\n className: clsx(classes.root, className, disablePointerEvents && classes.disablePointerEvents, muiFormControl.hiddenLabel && classes.hiddenLabel, variant === 'filled' && classes.filled, {\n 'start': classes.positionStart,\n 'end': classes.positionEnd\n }[position], muiFormControl.margin === 'dense' && classes.marginDense),\n ref: ref\n }, other), typeof children === 'string' && !disableTypography ? /*#__PURE__*/React.createElement(Typography, {\n color: \"textSecondary\"\n }, children) : children));\n});\nprocess.env.NODE_ENV !== \"production\" ? InputAdornment.propTypes = {\n /**\n * The content of the component, normally an `IconButton` or string.\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 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 * Disable pointer events on the root.\n * This allows for the content of the adornment to focus the input on click.\n */\n disablePointerEvents: PropTypes.bool,\n\n /**\n * If children is a string then disable wrapping in a Typography component.\n */\n disableTypography: PropTypes.bool,\n\n /**\n * @ignore\n */\n muiFormControl: PropTypes.object,\n\n /**\n * The position this adornment should appear relative to the `Input`.\n */\n position: PropTypes.oneOf(['start', 'end']),\n\n /**\n * The variant to use.\n * Note: If you are using the `TextField` component or the `FormControl` component\n * you do not have to set this manually.\n */\n variant: PropTypes.oneOf(['standard', 'outlined', 'filled'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiInputAdornment'\n})(InputAdornment);","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 _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 position: 'absolute',\n right: 16,\n top: '50%',\n transform: 'translateY(-50%)'\n }\n};\n/**\n * Must be used as the last child of ListItem to function properly.\n */\n\nvar ListItemSecondaryAction = /*#__PURE__*/React.forwardRef(function ListItemSecondaryAction(props, ref) {\n var classes = props.classes,\n className = props.className,\n other = _objectWithoutProperties(props, [\"classes\", \"className\"]);\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n className: clsx(classes.root, className),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? ListItemSecondaryAction.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, normally an `IconButton` or selection control.\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} : void 0;\nListItemSecondaryAction.muiName = 'ListItemSecondaryAction';\nexport default withStyles(styles, {\n name: 'MuiListItemSecondaryAction'\n})(ListItemSecondaryAction);","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 capitalize from '../utils/capitalize';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n boxSizing: 'border-box',\n lineHeight: '48px',\n listStyle: 'none',\n color: theme.palette.text.secondary,\n fontFamily: theme.typography.fontFamily,\n fontWeight: theme.typography.fontWeightMedium,\n fontSize: theme.typography.pxToRem(14)\n },\n\n /* Styles applied to the root element if `color=\"primary\"`. */\n colorPrimary: {\n color: theme.palette.primary.main\n },\n\n /* Styles applied to the root element if `color=\"inherit\"`. */\n colorInherit: {\n color: 'inherit'\n },\n\n /* Styles applied to the inner `component` element if `disableGutters={false}`. */\n gutters: {\n paddingLeft: 16,\n paddingRight: 16\n },\n\n /* Styles applied to the root element if `inset={true}`. */\n inset: {\n paddingLeft: 72\n },\n\n /* Styles applied to the root element if `disableSticky={false}`. */\n sticky: {\n position: 'sticky',\n top: 0,\n zIndex: 1,\n backgroundColor: 'inherit'\n }\n };\n};\nvar ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$color = props.color,\n color = _props$color === void 0 ? 'default' : _props$color,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'li' : _props$component,\n _props$disableGutters = props.disableGutters,\n disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,\n _props$disableSticky = props.disableSticky,\n disableSticky = _props$disableSticky === void 0 ? false : _props$disableSticky,\n _props$inset = props.inset,\n inset = _props$inset === void 0 ? false : _props$inset,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"color\", \"component\", \"disableGutters\", \"disableSticky\", \"inset\"]);\n\n return /*#__PURE__*/React.createElement(Component, _extends({\n className: clsx(classes.root, className, color !== 'default' && classes[\"color\".concat(capitalize(color))], inset && classes.inset, !disableSticky && classes.sticky, !disableGutters && classes.gutters),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? ListSubheader.propTypes = {\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 color of the component. It supports those theme colors that make sense for this component.\n */\n color: PropTypes.oneOf(['default', 'primary', 'inherit']),\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 List Subheader will not have gutters.\n */\n disableGutters: PropTypes.bool,\n\n /**\n * If `true`, the List Subheader will not stick to the top during scroll.\n */\n disableSticky: PropTypes.bool,\n\n /**\n * If `true`, the List Subheader will be indented.\n */\n inset: PropTypes.bool\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiListSubheader'\n})(ListSubheader);","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\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 ListItem from '../ListItem';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: _extends({}, theme.typography.body1, _defineProperty({\n minHeight: 48,\n paddingTop: 6,\n paddingBottom: 6,\n boxSizing: 'border-box',\n width: 'auto',\n overflow: 'hidden',\n whiteSpace: 'nowrap'\n }, theme.breakpoints.up('sm'), {\n minHeight: 'auto'\n })),\n // TODO v5: remove\n\n /* Styles applied to the root element if `disableGutters={false}`. */\n gutters: {},\n\n /* Styles applied to the root element if `selected={true}`. */\n selected: {},\n\n /* Styles applied to the root element if dense. */\n dense: _extends({}, theme.typography.body2, {\n minHeight: 'auto'\n })\n };\n};\nvar MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$component = props.component,\n component = _props$component === void 0 ? 'li' : _props$component,\n _props$disableGutters = props.disableGutters,\n disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,\n ListItemClasses = props.ListItemClasses,\n _props$role = props.role,\n role = _props$role === void 0 ? 'menuitem' : _props$role,\n selected = props.selected,\n tabIndexProp = props.tabIndex,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"component\", \"disableGutters\", \"ListItemClasses\", \"role\", \"selected\", \"tabIndex\"]);\n\n var tabIndex;\n\n if (!props.disabled) {\n tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;\n }\n\n return /*#__PURE__*/React.createElement(ListItem, _extends({\n button: true,\n role: role,\n tabIndex: tabIndex,\n component: component,\n selected: selected,\n disableGutters: disableGutters,\n classes: _extends({\n dense: classes.dense\n }, ListItemClasses),\n className: clsx(classes.root, className, selected && classes.selected, !disableGutters && classes.gutters),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? MenuItem.propTypes = {\n /**\n * Menu item 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.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`, compact vertical padding designed for keyboard and mouse input will be used.\n */\n dense: PropTypes.bool,\n\n /**\n * @ignore\n */\n disabled: PropTypes.bool,\n\n /**\n * If `true`, the left and right padding is removed.\n */\n disableGutters: PropTypes.bool,\n\n /**\n * `classes` prop applied to the [`ListItem`](/api/list-item/) element.\n */\n ListItemClasses: PropTypes.object,\n\n /**\n * @ignore\n */\n role: PropTypes.string,\n\n /**\n * @ignore\n */\n selected: PropTypes.bool,\n\n /**\n * @ignore\n */\n tabIndex: PropTypes.number\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiMenuItem'\n})(MenuItem);","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 TableContext from './TableContext';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n display: 'table',\n width: '100%',\n borderCollapse: 'collapse',\n borderSpacing: 0,\n '& caption': _extends({}, theme.typography.body2, {\n padding: theme.spacing(2),\n color: theme.palette.text.secondary,\n textAlign: 'left',\n captionSide: 'bottom'\n })\n },\n\n /* Styles applied to the root element if `stickyHeader={true}`. */\n stickyHeader: {\n borderCollapse: 'separate'\n }\n };\n};\nvar defaultComponent = 'table';\nvar Table = /*#__PURE__*/React.forwardRef(function Table(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 _props$padding = props.padding,\n padding = _props$padding === void 0 ? 'default' : _props$padding,\n _props$size = props.size,\n size = _props$size === void 0 ? 'medium' : _props$size,\n _props$stickyHeader = props.stickyHeader,\n stickyHeader = _props$stickyHeader === void 0 ? false : _props$stickyHeader,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"component\", \"padding\", \"size\", \"stickyHeader\"]);\n\n var table = React.useMemo(function () {\n return {\n padding: padding,\n size: size,\n stickyHeader: stickyHeader\n };\n }, [padding, size, stickyHeader]);\n return /*#__PURE__*/React.createElement(TableContext.Provider, {\n value: table\n }, /*#__PURE__*/React.createElement(Component, _extends({\n role: Component === defaultComponent ? null : 'table',\n ref: ref,\n className: clsx(classes.root, className, stickyHeader && classes.stickyHeader)\n }, other)));\n});\nprocess.env.NODE_ENV !== \"production\" ? Table.propTypes = {\n /**\n * The content of the table, normally `TableHead` and `TableBody`.\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 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 * Allows TableCells to inherit padding of the Table.\n */\n padding: PropTypes.oneOf(['default', 'checkbox', 'none']),\n\n /**\n * Allows TableCells to inherit size of the Table.\n */\n size: PropTypes.oneOf(['small', 'medium']),\n\n /**\n * Set the header sticky.\n *\n * ⚠️ It doesn't work with IE 11.\n */\n stickyHeader: PropTypes.bool\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiTable'\n})(Table);","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 _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';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n width: '100%',\n overflowX: 'auto'\n }\n};\nvar TableContainer = /*#__PURE__*/React.forwardRef(function TableContainer(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'div' : _props$component,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"component\"]);\n\n return /*#__PURE__*/React.createElement(Component, _extends({\n ref: ref,\n className: clsx(classes.root, className)\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? TableContainer.propTypes = {\n /**\n * The table itself, normally ``\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: 'MuiTableContainer'\n})(TableContainer);","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-header-group'\n }\n};\nvar tablelvl2 = {\n variant: 'head'\n};\nvar defaultComponent = 'thead';\nvar TableHead = /*#__PURE__*/React.forwardRef(function TableHead(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\" ? TableHead.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: 'MuiTableHead'\n})(TableHead);","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';\nimport { fade } from '../styles/colorManipulator';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n color: 'inherit',\n display: 'table-row',\n verticalAlign: 'middle',\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n '&$hover:hover': {\n backgroundColor: theme.palette.action.hover\n },\n '&$selected, &$selected:hover': {\n backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.selectedOpacity)\n }\n },\n\n /* Pseudo-class applied to the root element if `selected={true}`. */\n selected: {},\n\n /* Pseudo-class applied to the root element if `hover={true}`. */\n hover: {},\n\n /* Styles applied to the root element if table variant=\"head\". */\n head: {},\n\n /* Styles applied to the root element if table variant=\"footer\". */\n footer: {}\n };\n};\nvar defaultComponent = 'tr';\n/**\n * Will automatically set dynamic row height\n * based on the material table element parent (head, body, etc).\n */\n\nvar TableRow = /*#__PURE__*/React.forwardRef(function TableRow(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 _props$hover = props.hover,\n hover = _props$hover === void 0 ? false : _props$hover,\n _props$selected = props.selected,\n selected = _props$selected === void 0 ? false : _props$selected,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"component\", \"hover\", \"selected\"]);\n\n var tablelvl2 = React.useContext(Tablelvl2Context);\n return /*#__PURE__*/React.createElement(Component, _extends({\n ref: ref,\n className: clsx(classes.root, className, tablelvl2 && {\n 'head': classes.head,\n 'footer': classes.footer\n }[tablelvl2.variant], hover && classes.hover, selected && classes.selected),\n role: Component === defaultComponent ? null : 'row'\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? TableRow.propTypes = {\n /**\n * Should be valid | 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 _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 Input from '../Input';\nimport FilledInput from '../FilledInput';\nimport OutlinedInput from '../OutlinedInput';\nimport InputLabel from '../InputLabel';\nimport FormControl from '../FormControl';\nimport FormHelperText from '../FormHelperText';\nimport Select from '../Select';\nimport withStyles from '../styles/withStyles';\nvar variantComponent = {\n standard: Input,\n filled: FilledInput,\n outlined: OutlinedInput\n};\nexport var styles = {\n /* Styles applied to the root element. */\n root: {}\n};\n/**\n * The `TextField` is a convenience wrapper for the most common cases (80%).\n * It cannot be all things to all people, otherwise the API would grow out of control.\n *\n * ## Advanced Configuration\n *\n * It's important to understand that the text field is a simple abstraction\n * on top of the following components:\n *\n * - [FormControl](/api/form-control/)\n * - [InputLabel](/api/input-label/)\n * - [FilledInput](/api/filled-input/)\n * - [OutlinedInput](/api/outlined-input/)\n * - [Input](/api/input/)\n * - [FormHelperText](/api/form-helper-text/)\n *\n * If you wish to alter the props applied to the `input` element, you can do so as follows:\n *\n * ```jsx\n * const inputProps = {\n * step: 300,\n * };\n *\n * return ;\n * ```\n *\n * For advanced cases, please look at the source of TextField by clicking on the\n * \"Edit this page\" button above. Consider either:\n *\n * - using the upper case props for passing values directly to the components\n * - using the underlying components directly as shown in the demos\n */\n\nvar TextField = /*#__PURE__*/React.forwardRef(function TextField(props, ref) {\n var autoComplete = props.autoComplete,\n _props$autoFocus = props.autoFocus,\n autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,\n children = props.children,\n classes = props.classes,\n className = props.className,\n _props$color = props.color,\n color = _props$color === void 0 ? 'primary' : _props$color,\n defaultValue = props.defaultValue,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n _props$error = props.error,\n error = _props$error === void 0 ? false : _props$error,\n FormHelperTextProps = props.FormHelperTextProps,\n _props$fullWidth = props.fullWidth,\n fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,\n helperText = props.helperText,\n hiddenLabel = props.hiddenLabel,\n id = props.id,\n InputLabelProps = props.InputLabelProps,\n inputProps = props.inputProps,\n InputProps = props.InputProps,\n inputRef = props.inputRef,\n label = props.label,\n _props$multiline = props.multiline,\n multiline = _props$multiline === void 0 ? false : _props$multiline,\n name = props.name,\n onBlur = props.onBlur,\n onChange = props.onChange,\n onFocus = props.onFocus,\n placeholder = props.placeholder,\n _props$required = props.required,\n required = _props$required === void 0 ? false : _props$required,\n rows = props.rows,\n rowsMax = props.rowsMax,\n _props$select = props.select,\n select = _props$select === void 0 ? false : _props$select,\n SelectProps = props.SelectProps,\n type = props.type,\n value = props.value,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'standard' : _props$variant,\n other = _objectWithoutProperties(props, [\"autoComplete\", \"autoFocus\", \"children\", \"classes\", \"className\", \"color\", \"defaultValue\", \"disabled\", \"error\", \"FormHelperTextProps\", \"fullWidth\", \"helperText\", \"hiddenLabel\", \"id\", \"InputLabelProps\", \"inputProps\", \"InputProps\", \"inputRef\", \"label\", \"multiline\", \"name\", \"onBlur\", \"onChange\", \"onFocus\", \"placeholder\", \"required\", \"rows\", \"rowsMax\", \"select\", \"SelectProps\", \"type\", \"value\", \"variant\"]);\n\n if (process.env.NODE_ENV !== 'production') {\n if (select && !children) {\n console.error('Material-UI: `children` must be passed when using the `TextField` component with `select`.');\n }\n }\n\n var InputMore = {};\n\n if (variant === 'outlined') {\n if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {\n InputMore.notched = InputLabelProps.shrink;\n }\n\n if (label) {\n var _InputLabelProps$requ;\n\n var displayRequired = (_InputLabelProps$requ = InputLabelProps === null || InputLabelProps === void 0 ? void 0 : InputLabelProps.required) !== null && _InputLabelProps$requ !== void 0 ? _InputLabelProps$requ : required;\n InputMore.label = /*#__PURE__*/React.createElement(React.Fragment, null, label, displayRequired && \"\\xA0*\");\n }\n }\n\n if (select) {\n // unset defaults from textbox inputs\n if (!SelectProps || !SelectProps.native) {\n InputMore.id = undefined;\n }\n\n InputMore['aria-describedby'] = undefined;\n }\n\n var helperTextId = helperText && id ? \"\".concat(id, \"-helper-text\") : undefined;\n var inputLabelId = label && id ? \"\".concat(id, \"-label\") : undefined;\n var InputComponent = variantComponent[variant];\n var InputElement = /*#__PURE__*/React.createElement(InputComponent, _extends({\n \"aria-describedby\": helperTextId,\n autoComplete: autoComplete,\n autoFocus: autoFocus,\n defaultValue: defaultValue,\n fullWidth: fullWidth,\n multiline: multiline,\n name: name,\n rows: rows,\n rowsMax: rowsMax,\n type: type,\n value: value,\n id: id,\n inputRef: inputRef,\n onBlur: onBlur,\n onChange: onChange,\n onFocus: onFocus,\n placeholder: placeholder,\n inputProps: inputProps\n }, InputMore, InputProps));\n return /*#__PURE__*/React.createElement(FormControl, _extends({\n className: clsx(classes.root, className),\n disabled: disabled,\n error: error,\n fullWidth: fullWidth,\n hiddenLabel: hiddenLabel,\n ref: ref,\n required: required,\n color: color,\n variant: variant\n }, other), label && /*#__PURE__*/React.createElement(InputLabel, _extends({\n htmlFor: id,\n id: inputLabelId\n }, InputLabelProps), label), select ? /*#__PURE__*/React.createElement(Select, _extends({\n \"aria-describedby\": helperTextId,\n id: id,\n labelId: inputLabelId,\n value: value,\n input: InputElement\n }, SelectProps), children) : InputElement, helperText && /*#__PURE__*/React.createElement(FormHelperText, _extends({\n id: helperTextId\n }, FormHelperTextProps), helperText));\n});\nprocess.env.NODE_ENV !== \"production\" ? TextField.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 * This prop helps users to fill forms faster, especially on mobile devices.\n * The name can be confusing, as it's more like an autofill.\n * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n */\n autoComplete: PropTypes.string,\n\n /**\n * If `true`, the `input` element will be focused during the first mount.\n */\n autoFocus: PropTypes.bool,\n\n /**\n * @ignore\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 color of the component. It supports those theme colors that make sense for this component.\n */\n color: PropTypes.oneOf(['primary', 'secondary']),\n\n /**\n * The default value of the `input` element.\n */\n defaultValue: PropTypes.any,\n\n /**\n * If `true`, the `input` element will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * If `true`, the label will be displayed in an error state.\n */\n error: PropTypes.bool,\n\n /**\n * Props applied to the [`FormHelperText`](/api/form-helper-text/) element.\n */\n FormHelperTextProps: PropTypes.object,\n\n /**\n * If `true`, the input will take up the full width of its container.\n */\n fullWidth: PropTypes.bool,\n\n /**\n * The helper text content.\n */\n helperText: PropTypes.node,\n\n /**\n * @ignore\n */\n hiddenLabel: PropTypes.bool,\n\n /**\n * The id of the `input` element.\n * Use this prop to make `label` and `helperText` accessible for screen readers.\n */\n id: PropTypes.string,\n\n /**\n * Props applied to the [`InputLabel`](/api/input-label/) element.\n */\n InputLabelProps: PropTypes.object,\n\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps: PropTypes.object,\n\n /**\n * Props applied to the Input element.\n * It will be a [`FilledInput`](/api/filled-input/),\n * [`OutlinedInput`](/api/outlined-input/) or [`Input`](/api/input/)\n * component depending on the `variant` prop value.\n */\n InputProps: PropTypes.object,\n\n /**\n * Pass a ref to the `input` element.\n */\n inputRef: refType,\n\n /**\n * The label content.\n */\n label: PropTypes.node,\n\n /**\n * If `dense` or `normal`, will adjust vertical spacing of this and contained components.\n */\n margin: PropTypes.oneOf(['dense', 'none', 'normal']),\n\n /**\n * If `true`, a textarea element will be rendered instead of an input.\n */\n multiline: PropTypes.bool,\n\n /**\n * Name attribute of the `input` element.\n */\n name: PropTypes.string,\n\n /**\n * @ignore\n */\n onBlur: PropTypes.func,\n\n /**\n * Callback fired when the value is changed.\n *\n * @param {object} event The event source of the callback.\n * You can pull out the new value by accessing `event.target.value` (string).\n */\n onChange: PropTypes.func,\n\n /**\n * @ignore\n */\n onFocus: PropTypes.func,\n\n /**\n * The short hint displayed in the input before the user enters a value.\n */\n placeholder: PropTypes.string,\n\n /**\n * If `true`, the label is displayed as required and the `input` element` will be required.\n */\n required: PropTypes.bool,\n\n /**\n * Number of rows to display when multiline option is set to true.\n */\n rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n /**\n * Maximum number of rows to display when multiline option is set to true.\n */\n rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n /**\n * Render a [`Select`](/api/select/) element while passing the Input element to `Select` as `input` parameter.\n * If this option is set you must pass the options of the select as children.\n */\n select: PropTypes.bool,\n\n /**\n * Props applied to the [`Select`](/api/select/) element.\n */\n SelectProps: PropTypes.object,\n\n /**\n * The size of the text field.\n */\n size: PropTypes.oneOf(['medium', 'small']),\n\n /**\n * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).\n */\n type: PropTypes.string,\n\n /**\n * The value of the `input` element, required for a controlled component.\n */\n value: PropTypes.any,\n\n /**\n * The variant to use.\n */\n variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiTextField'\n})(TextField);","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 _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { deepmerge, elementAcceptingRef } from '@material-ui/utils';\nimport { fade } from '../styles/colorManipulator';\nimport withStyles from '../styles/withStyles';\nimport capitalize from '../utils/capitalize';\nimport Grow from '../Grow';\nimport Popper from '../Popper';\nimport useForkRef from '../utils/useForkRef';\nimport useId from '../utils/unstable_useId';\nimport setRef from '../utils/setRef';\nimport useIsFocusVisible from '../utils/useIsFocusVisible';\nimport useControlled from '../utils/useControlled';\nimport useTheme from '../styles/useTheme';\n\nfunction round(value) {\n return Math.round(value * 1e5) / 1e5;\n}\n\nfunction arrowGenerator() {\n return {\n '&[x-placement*=\"bottom\"] $arrow': {\n top: 0,\n left: 0,\n marginTop: '-0.71em',\n marginLeft: 4,\n marginRight: 4,\n '&::before': {\n transformOrigin: '0 100%'\n }\n },\n '&[x-placement*=\"top\"] $arrow': {\n bottom: 0,\n left: 0,\n marginBottom: '-0.71em',\n marginLeft: 4,\n marginRight: 4,\n '&::before': {\n transformOrigin: '100% 0'\n }\n },\n '&[x-placement*=\"right\"] $arrow': {\n left: 0,\n marginLeft: '-0.71em',\n height: '1em',\n width: '0.71em',\n marginTop: 4,\n marginBottom: 4,\n '&::before': {\n transformOrigin: '100% 100%'\n }\n },\n '&[x-placement*=\"left\"] $arrow': {\n right: 0,\n marginRight: '-0.71em',\n height: '1em',\n width: '0.71em',\n marginTop: 4,\n marginBottom: 4,\n '&::before': {\n transformOrigin: '0 0'\n }\n }\n };\n}\n\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the Popper component. */\n popper: {\n zIndex: theme.zIndex.tooltip,\n pointerEvents: 'none' // disable jss-rtl plugin\n\n },\n\n /* Styles applied to the Popper component if `interactive={true}`. */\n popperInteractive: {\n pointerEvents: 'auto'\n },\n\n /* Styles applied to the Popper component if `arrow={true}`. */\n popperArrow: arrowGenerator(),\n\n /* Styles applied to the tooltip (label wrapper) element. */\n tooltip: {\n backgroundColor: fade(theme.palette.grey[700], 0.9),\n borderRadius: theme.shape.borderRadius,\n color: theme.palette.common.white,\n fontFamily: theme.typography.fontFamily,\n padding: '4px 8px',\n fontSize: theme.typography.pxToRem(10),\n lineHeight: \"\".concat(round(14 / 10), \"em\"),\n maxWidth: 300,\n wordWrap: 'break-word',\n fontWeight: theme.typography.fontWeightMedium\n },\n\n /* Styles applied to the tooltip (label wrapper) element if `arrow={true}`. */\n tooltipArrow: {\n position: 'relative',\n margin: '0'\n },\n\n /* Styles applied to the arrow element. */\n arrow: {\n overflow: 'hidden',\n position: 'absolute',\n width: '1em',\n height: '0.71em'\n /* = width / sqrt(2) = (length of the hypotenuse) */\n ,\n boxSizing: 'border-box',\n color: fade(theme.palette.grey[700], 0.9),\n '&::before': {\n content: '\"\"',\n margin: 'auto',\n display: 'block',\n width: '100%',\n height: '100%',\n backgroundColor: 'currentColor',\n transform: 'rotate(45deg)'\n }\n },\n\n /* Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */\n touch: {\n padding: '8px 16px',\n fontSize: theme.typography.pxToRem(14),\n lineHeight: \"\".concat(round(16 / 14), \"em\"),\n fontWeight: theme.typography.fontWeightRegular\n },\n\n /* Styles applied to the tooltip (label wrapper) element if `placement` contains \"left\". */\n tooltipPlacementLeft: _defineProperty({\n transformOrigin: 'right center',\n margin: '0 24px '\n }, theme.breakpoints.up('sm'), {\n margin: '0 14px'\n }),\n\n /* Styles applied to the tooltip (label wrapper) element if `placement` contains \"right\". */\n tooltipPlacementRight: _defineProperty({\n transformOrigin: 'left center',\n margin: '0 24px'\n }, theme.breakpoints.up('sm'), {\n margin: '0 14px'\n }),\n\n /* Styles applied to the tooltip (label wrapper) element if `placement` contains \"top\". */\n tooltipPlacementTop: _defineProperty({\n transformOrigin: 'center bottom',\n margin: '24px 0'\n }, theme.breakpoints.up('sm'), {\n margin: '14px 0'\n }),\n\n /* Styles applied to the tooltip (label wrapper) element if `placement` contains \"bottom\". */\n tooltipPlacementBottom: _defineProperty({\n transformOrigin: 'center top',\n margin: '24px 0'\n }, theme.breakpoints.up('sm'), {\n margin: '14px 0'\n })\n };\n};\nvar hystersisOpen = false;\nvar hystersisTimer = null;\nexport function testReset() {\n hystersisOpen = false;\n clearTimeout(hystersisTimer);\n}\nvar Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {\n var _props$arrow = props.arrow,\n arrow = _props$arrow === void 0 ? false : _props$arrow,\n children = props.children,\n classes = props.classes,\n _props$disableFocusLi = props.disableFocusListener,\n disableFocusListener = _props$disableFocusLi === void 0 ? false : _props$disableFocusLi,\n _props$disableHoverLi = props.disableHoverListener,\n disableHoverListener = _props$disableHoverLi === void 0 ? false : _props$disableHoverLi,\n _props$disableTouchLi = props.disableTouchListener,\n disableTouchListener = _props$disableTouchLi === void 0 ? false : _props$disableTouchLi,\n _props$enterDelay = props.enterDelay,\n enterDelay = _props$enterDelay === void 0 ? 100 : _props$enterDelay,\n _props$enterNextDelay = props.enterNextDelay,\n enterNextDelay = _props$enterNextDelay === void 0 ? 0 : _props$enterNextDelay,\n _props$enterTouchDela = props.enterTouchDelay,\n enterTouchDelay = _props$enterTouchDela === void 0 ? 700 : _props$enterTouchDela,\n idProp = props.id,\n _props$interactive = props.interactive,\n interactive = _props$interactive === void 0 ? false : _props$interactive,\n _props$leaveDelay = props.leaveDelay,\n leaveDelay = _props$leaveDelay === void 0 ? 0 : _props$leaveDelay,\n _props$leaveTouchDela = props.leaveTouchDelay,\n leaveTouchDelay = _props$leaveTouchDela === void 0 ? 1500 : _props$leaveTouchDela,\n onClose = props.onClose,\n onOpen = props.onOpen,\n openProp = props.open,\n _props$placement = props.placement,\n placement = _props$placement === void 0 ? 'bottom' : _props$placement,\n _props$PopperComponen = props.PopperComponent,\n PopperComponent = _props$PopperComponen === void 0 ? Popper : _props$PopperComponen,\n PopperProps = props.PopperProps,\n title = props.title,\n _props$TransitionComp = props.TransitionComponent,\n TransitionComponent = _props$TransitionComp === void 0 ? Grow : _props$TransitionComp,\n TransitionProps = props.TransitionProps,\n other = _objectWithoutProperties(props, [\"arrow\", \"children\", \"classes\", \"disableFocusListener\", \"disableHoverListener\", \"disableTouchListener\", \"enterDelay\", \"enterNextDelay\", \"enterTouchDelay\", \"id\", \"interactive\", \"leaveDelay\", \"leaveTouchDelay\", \"onClose\", \"onOpen\", \"open\", \"placement\", \"PopperComponent\", \"PopperProps\", \"title\", \"TransitionComponent\", \"TransitionProps\"]);\n\n var theme = useTheme();\n\n var _React$useState = React.useState(),\n childNode = _React$useState[0],\n setChildNode = _React$useState[1];\n\n var _React$useState2 = React.useState(null),\n arrowRef = _React$useState2[0],\n setArrowRef = _React$useState2[1];\n\n var ignoreNonTouchEvents = React.useRef(false);\n var closeTimer = React.useRef();\n var enterTimer = React.useRef();\n var leaveTimer = React.useRef();\n var touchTimer = React.useRef();\n\n var _useControlled = useControlled({\n controlled: openProp,\n default: false,\n name: 'Tooltip',\n state: 'open'\n }),\n _useControlled2 = _slicedToArray(_useControlled, 2),\n openState = _useControlled2[0],\n setOpenState = _useControlled2[1];\n\n var open = openState;\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n var _React$useRef = React.useRef(openProp !== undefined),\n isControlled = _React$useRef.current; // eslint-disable-next-line react-hooks/rules-of-hooks\n\n\n React.useEffect(function () {\n if (childNode && childNode.disabled && !isControlled && title !== '' && childNode.tagName.toLowerCase() === 'button') {\n console.error(['Material-UI: You are providing a disabled `button` child to the Tooltip component.', 'A disabled element does not fire events.', \"Tooltip needs to listen to the child element's events to display the title.\", '', 'Add a simple wrapper element, such as a `span`.'].join('\\n'));\n }\n }, [title, childNode, isControlled]);\n }\n\n var id = useId(idProp);\n React.useEffect(function () {\n return function () {\n clearTimeout(closeTimer.current);\n clearTimeout(enterTimer.current);\n clearTimeout(leaveTimer.current);\n clearTimeout(touchTimer.current);\n };\n }, []);\n\n var handleOpen = function handleOpen(event) {\n clearTimeout(hystersisTimer);\n hystersisOpen = true; // The mouseover event will trigger for every nested element in the tooltip.\n // We can skip rerendering when the tooltip is already open.\n // We are using the mouseover event instead of the mouseenter event to fix a hide/show issue.\n\n setOpenState(true);\n\n if (onOpen) {\n onOpen(event);\n }\n };\n\n var handleEnter = function handleEnter() {\n var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;\n return function (event) {\n var childrenProps = children.props;\n\n if (event.type === 'mouseover' && childrenProps.onMouseOver && forward) {\n childrenProps.onMouseOver(event);\n }\n\n if (ignoreNonTouchEvents.current && event.type !== 'touchstart') {\n return;\n } // Remove the title ahead of time.\n // We don't want to wait for the next render commit.\n // We would risk displaying two tooltips at the same time (native + this one).\n\n\n if (childNode) {\n childNode.removeAttribute('title');\n }\n\n clearTimeout(enterTimer.current);\n clearTimeout(leaveTimer.current);\n\n if (enterDelay || hystersisOpen && enterNextDelay) {\n event.persist();\n enterTimer.current = setTimeout(function () {\n handleOpen(event);\n }, hystersisOpen ? enterNextDelay : enterDelay);\n } else {\n handleOpen(event);\n }\n };\n };\n\n var _useIsFocusVisible = useIsFocusVisible(),\n isFocusVisible = _useIsFocusVisible.isFocusVisible,\n onBlurVisible = _useIsFocusVisible.onBlurVisible,\n focusVisibleRef = _useIsFocusVisible.ref;\n\n var _React$useState3 = React.useState(false),\n childIsFocusVisible = _React$useState3[0],\n setChildIsFocusVisible = _React$useState3[1];\n\n var handleBlur = function handleBlur() {\n if (childIsFocusVisible) {\n setChildIsFocusVisible(false);\n onBlurVisible();\n }\n };\n\n var handleFocus = function handleFocus() {\n var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;\n return function (event) {\n // Workaround for https://github.com/facebook/react/issues/7769\n // The autoFocus of React might trigger the event before the componentDidMount.\n // We need to account for this eventuality.\n if (!childNode) {\n setChildNode(event.currentTarget);\n }\n\n if (isFocusVisible(event)) {\n setChildIsFocusVisible(true);\n handleEnter()(event);\n }\n\n var childrenProps = children.props;\n\n if (childrenProps.onFocus && forward) {\n childrenProps.onFocus(event);\n }\n };\n };\n\n var handleClose = function handleClose(event) {\n clearTimeout(hystersisTimer);\n hystersisTimer = setTimeout(function () {\n hystersisOpen = false;\n }, 800 + leaveDelay);\n setOpenState(false);\n\n if (onClose) {\n onClose(event);\n }\n\n clearTimeout(closeTimer.current);\n closeTimer.current = setTimeout(function () {\n ignoreNonTouchEvents.current = false;\n }, theme.transitions.duration.shortest);\n };\n\n var handleLeave = function handleLeave() {\n var forward = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;\n return function (event) {\n var childrenProps = children.props;\n\n if (event.type === 'blur') {\n if (childrenProps.onBlur && forward) {\n childrenProps.onBlur(event);\n }\n\n handleBlur();\n }\n\n if (event.type === 'mouseleave' && childrenProps.onMouseLeave && event.currentTarget === childNode) {\n childrenProps.onMouseLeave(event);\n }\n\n clearTimeout(enterTimer.current);\n clearTimeout(leaveTimer.current);\n event.persist();\n leaveTimer.current = setTimeout(function () {\n handleClose(event);\n }, leaveDelay);\n };\n };\n\n var detectTouchStart = function detectTouchStart(event) {\n ignoreNonTouchEvents.current = true;\n var childrenProps = children.props;\n\n if (childrenProps.onTouchStart) {\n childrenProps.onTouchStart(event);\n }\n };\n\n var handleTouchStart = function handleTouchStart(event) {\n detectTouchStart(event);\n clearTimeout(leaveTimer.current);\n clearTimeout(closeTimer.current);\n clearTimeout(touchTimer.current);\n event.persist();\n touchTimer.current = setTimeout(function () {\n handleEnter()(event);\n }, enterTouchDelay);\n };\n\n var handleTouchEnd = function handleTouchEnd(event) {\n if (children.props.onTouchEnd) {\n children.props.onTouchEnd(event);\n }\n\n clearTimeout(touchTimer.current);\n clearTimeout(leaveTimer.current);\n event.persist();\n leaveTimer.current = setTimeout(function () {\n handleClose(event);\n }, leaveTouchDelay);\n };\n\n var handleUseRef = useForkRef(setChildNode, ref);\n var handleFocusRef = useForkRef(focusVisibleRef, handleUseRef); // can be removed once we drop support for non ref forwarding class components\n\n var handleOwnRef = React.useCallback(function (instance) {\n // #StrictMode ready\n setRef(handleFocusRef, ReactDOM.findDOMNode(instance));\n }, [handleFocusRef]);\n var handleRef = useForkRef(children.ref, handleOwnRef); // There is no point in displaying an empty tooltip.\n\n if (title === '') {\n open = false;\n } // For accessibility and SEO concerns, we render the title to the DOM node when\n // the tooltip is hidden. However, we have made a tradeoff when\n // `disableHoverListener` is set. This title logic is disabled.\n // It's allowing us to keep the implementation size minimal.\n // We are open to change the tradeoff.\n\n\n var shouldShowNativeTitle = !open && !disableHoverListener;\n\n var childrenProps = _extends({\n 'aria-describedby': open ? id : null,\n title: shouldShowNativeTitle && typeof title === 'string' ? title : null\n }, other, children.props, {\n className: clsx(other.className, children.props.className),\n onTouchStart: detectTouchStart,\n ref: handleRef\n });\n\n var interactiveWrapperListeners = {};\n\n if (!disableTouchListener) {\n childrenProps.onTouchStart = handleTouchStart;\n childrenProps.onTouchEnd = handleTouchEnd;\n }\n\n if (!disableHoverListener) {\n childrenProps.onMouseOver = handleEnter();\n childrenProps.onMouseLeave = handleLeave();\n\n if (interactive) {\n interactiveWrapperListeners.onMouseOver = handleEnter(false);\n interactiveWrapperListeners.onMouseLeave = handleLeave(false);\n }\n }\n\n if (!disableFocusListener) {\n childrenProps.onFocus = handleFocus();\n childrenProps.onBlur = handleLeave();\n\n if (interactive) {\n interactiveWrapperListeners.onFocus = handleFocus(false);\n interactiveWrapperListeners.onBlur = handleLeave(false);\n }\n }\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.props.title) {\n console.error(['Material-UI: You have provided a `title` prop to the child of .', \"Remove this title prop `\".concat(children.props.title, \"` or the Tooltip component.\")].join('\\n'));\n }\n }\n\n var mergedPopperProps = React.useMemo(function () {\n return deepmerge({\n popperOptions: {\n modifiers: {\n arrow: {\n enabled: Boolean(arrowRef),\n element: arrowRef\n }\n }\n }\n }, PopperProps);\n }, [arrowRef, PopperProps]);\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/React.createElement(PopperComponent, _extends({\n className: clsx(classes.popper, interactive && classes.popperInteractive, arrow && classes.popperArrow),\n placement: placement,\n anchorEl: childNode,\n open: childNode ? open : false,\n id: childrenProps['aria-describedby'],\n transition: true\n }, interactiveWrapperListeners, mergedPopperProps), function (_ref) {\n var placementInner = _ref.placement,\n TransitionPropsInner = _ref.TransitionProps;\n return /*#__PURE__*/React.createElement(TransitionComponent, _extends({\n timeout: theme.transitions.duration.shorter\n }, TransitionPropsInner, TransitionProps), /*#__PURE__*/React.createElement(\"div\", {\n className: clsx(classes.tooltip, classes[\"tooltipPlacement\".concat(capitalize(placementInner.split('-')[0]))], ignoreNonTouchEvents.current && classes.touch, arrow && classes.tooltipArrow)\n }, title, arrow ? /*#__PURE__*/React.createElement(\"span\", {\n className: classes.arrow,\n ref: setArrowRef\n }) : null));\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Tooltip.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`, adds an arrow to the tooltip.\n */\n arrow: PropTypes.bool,\n\n /**\n * Tooltip reference element.\n */\n children: elementAcceptingRef.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,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * Do not respond to focus events.\n */\n disableFocusListener: PropTypes.bool,\n\n /**\n * Do not respond to hover events.\n */\n disableHoverListener: PropTypes.bool,\n\n /**\n * Do not respond to long press touch events.\n */\n disableTouchListener: PropTypes.bool,\n\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay: PropTypes.number,\n\n /**\n * The number of milliseconds to wait before showing the tooltip when one was already recently opened.\n */\n enterNextDelay: PropTypes.number,\n\n /**\n * The number of milliseconds a user must touch the element before showing the tooltip.\n */\n enterTouchDelay: PropTypes.number,\n\n /**\n * This prop is used to help implement the accessibility logic.\n * If you don't provide this prop. It falls back to a randomly generated id.\n */\n id: PropTypes.string,\n\n /**\n * Makes a tooltip interactive, i.e. will not close when the user\n * hovers over the tooltip before the `leaveDelay` is expired.\n */\n interactive: PropTypes.bool,\n\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay: PropTypes.number,\n\n /**\n * The number of milliseconds after the user stops touching an element before hiding the tooltip.\n */\n leaveTouchDelay: PropTypes.number,\n\n /**\n * Callback fired when the component requests to be closed.\n *\n * @param {object} event The event source of the callback.\n */\n onClose: PropTypes.func,\n\n /**\n * Callback fired when the component requests to be open.\n *\n * @param {object} event The event source of the callback.\n */\n onOpen: PropTypes.func,\n\n /**\n * If `true`, the tooltip is shown.\n */\n open: PropTypes.bool,\n\n /**\n * Tooltip placement.\n */\n placement: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),\n\n /**\n * The component used for the popper.\n */\n PopperComponent: PropTypes.elementType,\n\n /**\n * Props applied to the [`Popper`](/api/popper/) element.\n */\n PopperProps: PropTypes.object,\n\n /**\n * Tooltip title. Zero-length titles string are never displayed.\n */\n title: PropTypes\n /* @typescript-to-proptypes-ignore */\n .node.isRequired,\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 * 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: 'MuiTooltip',\n flip: false\n})(Tooltip);","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport { IUtils } from '@date-io/core/IUtils';\nimport { MaterialUiPickersDate } from './typings/date';\n\nexport const MuiPickersContext = React.createContext | null>(null);\n\nexport interface MuiPickersUtilsProviderProps {\n utils: any;\n children: React.ReactNode;\n locale?: any;\n libInstance?: any;\n}\n\nexport const MuiPickersUtilsProvider: React.FC = ({\n utils: Utils,\n children,\n locale,\n libInstance,\n}) => {\n const utils = React.useMemo(() => new Utils({ locale, instance: libInstance }), [\n Utils,\n libInstance,\n locale,\n ]);\n\n return ;\n};\n\nMuiPickersUtilsProvider.propTypes = {\n utils: PropTypes.func.isRequired,\n locale: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),\n children: PropTypes.oneOfType([\n PropTypes.element.isRequired,\n PropTypes.arrayOf(PropTypes.element.isRequired),\n ]).isRequired,\n};\n\nexport default MuiPickersUtilsProvider;\n","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"\n}), 'CheckBoxOutlineBlank');","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\n}), 'CheckBox');","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z\"\n}), 'IndeterminateCheckBox');","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 SwitchBase from '../internal/SwitchBase';\nimport CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank';\nimport CheckBoxIcon from '../internal/svg-icons/CheckBox';\nimport { fade } from '../styles/colorManipulator';\nimport IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox';\nimport capitalize from '../utils/capitalize';\nimport withStyles from '../styles/withStyles';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n color: theme.palette.text.secondary\n },\n\n /* Pseudo-class applied to the root element if `checked={true}`. */\n checked: {},\n\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\n /* Pseudo-class applied to the root element if `indeterminate={true}`. */\n indeterminate: {},\n\n /* Styles applied to the root element if `color=\"primary\"`. */\n colorPrimary: {\n '&$checked': {\n color: theme.palette.primary.main,\n '&:hover': {\n backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n }\n },\n '&$disabled': {\n color: theme.palette.action.disabled\n }\n },\n\n /* Styles applied to the root element if `color=\"secondary\"`. */\n colorSecondary: {\n '&$checked': {\n color: theme.palette.secondary.main,\n '&:hover': {\n backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n }\n },\n '&$disabled': {\n color: theme.palette.action.disabled\n }\n }\n };\n};\nvar defaultCheckedIcon = /*#__PURE__*/React.createElement(CheckBoxIcon, null);\nvar defaultIcon = /*#__PURE__*/React.createElement(CheckBoxOutlineBlankIcon, null);\nvar defaultIndeterminateIcon = /*#__PURE__*/React.createElement(IndeterminateCheckBoxIcon, null);\nvar Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {\n var _props$checkedIcon = props.checkedIcon,\n checkedIcon = _props$checkedIcon === void 0 ? defaultCheckedIcon : _props$checkedIcon,\n classes = props.classes,\n _props$color = props.color,\n color = _props$color === void 0 ? 'secondary' : _props$color,\n _props$icon = props.icon,\n iconProp = _props$icon === void 0 ? defaultIcon : _props$icon,\n _props$indeterminate = props.indeterminate,\n indeterminate = _props$indeterminate === void 0 ? false : _props$indeterminate,\n _props$indeterminateI = props.indeterminateIcon,\n indeterminateIconProp = _props$indeterminateI === void 0 ? defaultIndeterminateIcon : _props$indeterminateI,\n inputProps = props.inputProps,\n _props$size = props.size,\n size = _props$size === void 0 ? 'medium' : _props$size,\n other = _objectWithoutProperties(props, [\"checkedIcon\", \"classes\", \"color\", \"icon\", \"indeterminate\", \"indeterminateIcon\", \"inputProps\", \"size\"]);\n\n var icon = indeterminate ? indeterminateIconProp : iconProp;\n var indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;\n return /*#__PURE__*/React.createElement(SwitchBase, _extends({\n type: \"checkbox\",\n classes: {\n root: clsx(classes.root, classes[\"color\".concat(capitalize(color))], indeterminate && classes.indeterminate),\n checked: classes.checked,\n disabled: classes.disabled\n },\n color: color,\n inputProps: _extends({\n 'data-indeterminate': indeterminate\n }, inputProps),\n icon: /*#__PURE__*/React.cloneElement(icon, {\n fontSize: icon.props.fontSize === undefined && size === \"small\" ? size : icon.props.fontSize\n }),\n checkedIcon: /*#__PURE__*/React.cloneElement(indeterminateIcon, {\n fontSize: indeterminateIcon.props.fontSize === undefined && size === \"small\" ? size : indeterminateIcon.props.fontSize\n }),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? Checkbox.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 is checked.\n */\n checked: PropTypes.bool,\n\n /**\n * The icon to display when the component is checked.\n */\n checkedIcon: 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 * The color of the component. It supports those theme colors that make sense for this component.\n */\n color: PropTypes.oneOf(['default', 'primary', 'secondary']),\n\n /**\n * If `true`, the checkbox will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * If `true`, the ripple effect will be disabled.\n */\n disableRipple: PropTypes.bool,\n\n /**\n * The icon to display when the component is unchecked.\n */\n icon: PropTypes.node,\n\n /**\n * The id of the `input` element.\n */\n id: PropTypes.string,\n\n /**\n * If `true`, the component appears indeterminate.\n * This does not set the native input element to indeterminate due\n * to inconsistent behavior across browsers.\n * However, we set a `data-indeterminate` attribute on the input.\n */\n indeterminate: PropTypes.bool,\n\n /**\n * The icon to display when the component is indeterminate.\n */\n indeterminateIcon: PropTypes.node,\n\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps: PropTypes.object,\n\n /**\n * Pass a ref to the `input` element.\n */\n inputRef: refType,\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 * If `true`, the `input` element will be required.\n */\n required: PropTypes.bool,\n\n /**\n * The size of the checkbox.\n * `small` is equivalent to the dense checkbox styling.\n */\n size: PropTypes.oneOf(['medium', 'small']),\n\n /**\n * The value of the component. The DOM API casts this to a string.\n * The browser uses \"on\" as the default value.\n */\n value: PropTypes.any\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiCheckbox'\n})(Checkbox);","import * as React from 'react';\nimport { createSvgIcon } from '@material-ui/core/utils';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n}), 'Close');","import * as React from 'react';\nimport { createSvgIcon } from '@material-ui/core/utils';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7 10l5 5 5-5z\"\n}), 'ArrowDropDown');","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _typeof from \"@babel/runtime/helpers/esm/typeof\";\n\n/* eslint-disable no-constant-condition */\nimport * as React from 'react';\nimport { setRef, useEventCallback, useControlled, unstable_useId as useId } from '@material-ui/core/utils'; // https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript\n// Give up on IE 11 support for this feature\n\nfunction stripDiacritics(string) {\n return typeof string.normalize !== 'undefined' ? string.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '') : string;\n}\n\nexport function createFilterOptions() {\n var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var _config$ignoreAccents = config.ignoreAccents,\n ignoreAccents = _config$ignoreAccents === void 0 ? true : _config$ignoreAccents,\n _config$ignoreCase = config.ignoreCase,\n ignoreCase = _config$ignoreCase === void 0 ? true : _config$ignoreCase,\n limit = config.limit,\n _config$matchFrom = config.matchFrom,\n matchFrom = _config$matchFrom === void 0 ? 'any' : _config$matchFrom,\n stringify = config.stringify,\n _config$trim = config.trim,\n trim = _config$trim === void 0 ? false : _config$trim;\n return function (options, _ref) {\n var inputValue = _ref.inputValue,\n getOptionLabel = _ref.getOptionLabel;\n var input = trim ? inputValue.trim() : inputValue;\n\n if (ignoreCase) {\n input = input.toLowerCase();\n }\n\n if (ignoreAccents) {\n input = stripDiacritics(input);\n }\n\n var filteredOptions = options.filter(function (option) {\n var candidate = (stringify || getOptionLabel)(option);\n\n if (ignoreCase) {\n candidate = candidate.toLowerCase();\n }\n\n if (ignoreAccents) {\n candidate = stripDiacritics(candidate);\n }\n\n return matchFrom === 'start' ? candidate.indexOf(input) === 0 : candidate.indexOf(input) > -1;\n });\n return typeof limit === 'number' ? filteredOptions.slice(0, limit) : filteredOptions;\n };\n} // To replace with .findIndex() once we stop IE 11 support.\n\nfunction findIndex(array, comp) {\n for (var i = 0; i < array.length; i += 1) {\n if (comp(array[i])) {\n return i;\n }\n }\n\n return -1;\n}\n\nvar defaultFilterOptions = createFilterOptions(); // Number of options to jump in list box when pageup and pagedown keys are used.\n\nvar pageSize = 5;\nexport default function useAutocomplete(props) {\n var _props$autoComplete = props.autoComplete,\n autoComplete = _props$autoComplete === void 0 ? false : _props$autoComplete,\n _props$autoHighlight = props.autoHighlight,\n autoHighlight = _props$autoHighlight === void 0 ? false : _props$autoHighlight,\n _props$autoSelect = props.autoSelect,\n autoSelect = _props$autoSelect === void 0 ? false : _props$autoSelect,\n _props$blurOnSelect = props.blurOnSelect,\n blurOnSelect = _props$blurOnSelect === void 0 ? false : _props$blurOnSelect,\n _props$clearOnBlur = props.clearOnBlur,\n clearOnBlur = _props$clearOnBlur === void 0 ? !props.freeSolo : _props$clearOnBlur,\n _props$clearOnEscape = props.clearOnEscape,\n clearOnEscape = _props$clearOnEscape === void 0 ? false : _props$clearOnEscape,\n _props$componentName = props.componentName,\n componentName = _props$componentName === void 0 ? 'useAutocomplete' : _props$componentName,\n _props$debug = props.debug,\n debug = _props$debug === void 0 ? false : _props$debug,\n _props$defaultValue = props.defaultValue,\n defaultValue = _props$defaultValue === void 0 ? props.multiple ? [] : null : _props$defaultValue,\n _props$disableClearab = props.disableClearable,\n disableClearable = _props$disableClearab === void 0 ? false : _props$disableClearab,\n _props$disableCloseOn = props.disableCloseOnSelect,\n disableCloseOnSelect = _props$disableCloseOn === void 0 ? false : _props$disableCloseOn,\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 _props$filterOptions = props.filterOptions,\n filterOptions = _props$filterOptions === void 0 ? defaultFilterOptions : _props$filterOptions,\n _props$filterSelected = props.filterSelectedOptions,\n filterSelectedOptions = _props$filterSelected === void 0 ? false : _props$filterSelected,\n _props$freeSolo = props.freeSolo,\n freeSolo = _props$freeSolo === void 0 ? false : _props$freeSolo,\n getOptionDisabled = props.getOptionDisabled,\n _props$getOptionLabel = props.getOptionLabel,\n getOptionLabelProp = _props$getOptionLabel === void 0 ? function (option) {\n return option;\n } : _props$getOptionLabel,\n _props$getOptionSelec = props.getOptionSelected,\n getOptionSelected = _props$getOptionSelec === void 0 ? function (option, value) {\n return option === value;\n } : _props$getOptionSelec,\n groupBy = props.groupBy,\n _props$handleHomeEndK = props.handleHomeEndKeys,\n handleHomeEndKeys = _props$handleHomeEndK === void 0 ? !props.freeSolo : _props$handleHomeEndK,\n idProp = props.id,\n _props$includeInputIn = props.includeInputInList,\n includeInputInList = _props$includeInputIn === void 0 ? false : _props$includeInputIn,\n inputValueProp = props.inputValue,\n _props$multiple = props.multiple,\n multiple = _props$multiple === void 0 ? false : _props$multiple,\n onChange = props.onChange,\n onClose = props.onClose,\n onHighlightChange = props.onHighlightChange,\n onInputChange = props.onInputChange,\n onOpen = props.onOpen,\n openProp = props.open,\n _props$openOnFocus = props.openOnFocus,\n openOnFocus = _props$openOnFocus === void 0 ? false : _props$openOnFocus,\n options = props.options,\n _props$selectOnFocus = props.selectOnFocus,\n selectOnFocus = _props$selectOnFocus === void 0 ? !props.freeSolo : _props$selectOnFocus,\n valueProp = props.value;\n var id = useId(idProp);\n var getOptionLabel = getOptionLabelProp;\n\n if (process.env.NODE_ENV !== 'production') {\n getOptionLabel = function getOptionLabel(option) {\n var optionLabel = getOptionLabelProp(option);\n\n if (typeof optionLabel !== 'string') {\n var erroneousReturn = optionLabel === undefined ? 'undefined' : \"\".concat(_typeof(optionLabel), \" (\").concat(optionLabel, \")\");\n console.error(\"Material-UI: The `getOptionLabel` method of \".concat(componentName, \" returned \").concat(erroneousReturn, \" instead of a string for \").concat(JSON.stringify(option), \".\"));\n }\n\n return optionLabel;\n };\n }\n\n var ignoreFocus = React.useRef(false);\n var firstFocus = React.useRef(true);\n var inputRef = React.useRef(null);\n var listboxRef = React.useRef(null);\n\n var _React$useState = React.useState(null),\n anchorEl = _React$useState[0],\n setAnchorEl = _React$useState[1];\n\n var _React$useState2 = React.useState(-1),\n focusedTag = _React$useState2[0],\n setFocusedTag = _React$useState2[1];\n\n var defaultHighlighted = autoHighlight ? 0 : -1;\n var highlightedIndexRef = React.useRef(defaultHighlighted);\n\n var _useControlled = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: componentName\n }),\n _useControlled2 = _slicedToArray(_useControlled, 2),\n value = _useControlled2[0],\n setValue = _useControlled2[1];\n\n var _useControlled3 = useControlled({\n controlled: inputValueProp,\n default: '',\n name: componentName,\n state: 'inputValue'\n }),\n _useControlled4 = _slicedToArray(_useControlled3, 2),\n inputValue = _useControlled4[0],\n setInputValue = _useControlled4[1];\n\n var _React$useState3 = React.useState(false),\n focused = _React$useState3[0],\n setFocused = _React$useState3[1];\n\n var resetInputValue = useEventCallback(function (event, newValue) {\n var newInputValue;\n\n if (multiple) {\n newInputValue = '';\n } else if (newValue == null) {\n newInputValue = '';\n } else {\n var optionLabel = getOptionLabel(newValue);\n newInputValue = typeof optionLabel === 'string' ? optionLabel : '';\n }\n\n if (inputValue === newInputValue) {\n return;\n }\n\n setInputValue(newInputValue);\n\n if (onInputChange) {\n onInputChange(event, newInputValue, 'reset');\n }\n });\n React.useEffect(function () {\n resetInputValue(null, value);\n }, [value, resetInputValue]);\n\n var _useControlled5 = useControlled({\n controlled: openProp,\n default: false,\n name: componentName,\n state: 'open'\n }),\n _useControlled6 = _slicedToArray(_useControlled5, 2),\n open = _useControlled6[0],\n setOpenState = _useControlled6[1];\n\n var inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value);\n var popupOpen = open;\n var filteredOptions = popupOpen ? filterOptions(options.filter(function (option) {\n if (filterSelectedOptions && (multiple ? value : [value]).some(function (value2) {\n return value2 !== null && getOptionSelected(option, value2);\n })) {\n return false;\n }\n\n return true;\n }), // we use the empty string to manipulate `filterOptions` to not filter any options\n // i.e. the filter predicate always returns true\n {\n inputValue: inputValueIsSelectedValue ? '' : inputValue,\n getOptionLabel: getOptionLabel\n }) : [];\n\n if (process.env.NODE_ENV !== 'production') {\n if (value !== null && !freeSolo && options.length > 0) {\n var missingValue = (multiple ? value : [value]).filter(function (value2) {\n return !options.some(function (option) {\n return getOptionSelected(option, value2);\n });\n });\n\n if (missingValue.length > 0) {\n console.warn([\"Material-UI: The value provided to \".concat(componentName, \" is invalid.\"), \"None of the options match with `\".concat(missingValue.length > 1 ? JSON.stringify(missingValue) : JSON.stringify(missingValue[0]), \"`.\"), 'You can use the `getOptionSelected` prop to customize the equality test.'].join('\\n'));\n }\n }\n }\n\n var focusTag = useEventCallback(function (tagToFocus) {\n if (tagToFocus === -1) {\n inputRef.current.focus();\n } else {\n anchorEl.querySelector(\"[data-tag-index=\\\"\".concat(tagToFocus, \"\\\"]\")).focus();\n }\n }); // Ensure the focusedTag is never inconsistent\n\n React.useEffect(function () {\n if (multiple && focusedTag > value.length - 1) {\n setFocusedTag(-1);\n focusTag(-1);\n }\n }, [value, multiple, focusedTag, focusTag]);\n\n function validOptionIndex(index, direction) {\n if (!listboxRef.current || index === -1) {\n return -1;\n }\n\n var nextFocus = index;\n\n while (true) {\n // Out of range\n if (direction === 'next' && nextFocus === filteredOptions.length || direction === 'previous' && nextFocus === -1) {\n return -1;\n }\n\n var option = listboxRef.current.querySelector(\"[data-option-index=\\\"\".concat(nextFocus, \"\\\"]\")); // Same logic as MenuList.js\n\n var nextFocusDisabled = disabledItemsFocusable ? false : option && (option.disabled || option.getAttribute('aria-disabled') === 'true');\n\n if (option && !option.hasAttribute('tabindex') || nextFocusDisabled) {\n // Move to the next element.\n nextFocus += direction === 'next' ? 1 : -1;\n } else {\n return nextFocus;\n }\n }\n }\n\n var setHighlightedIndex = useEventCallback(function (_ref2) {\n var event = _ref2.event,\n index = _ref2.index,\n _ref2$reason = _ref2.reason,\n reason = _ref2$reason === void 0 ? 'auto' : _ref2$reason;\n highlightedIndexRef.current = index; // does the index exist?\n\n if (index === -1) {\n inputRef.current.removeAttribute('aria-activedescendant');\n } else {\n inputRef.current.setAttribute('aria-activedescendant', \"\".concat(id, \"-option-\").concat(index));\n }\n\n if (onHighlightChange) {\n onHighlightChange(event, index === -1 ? null : filteredOptions[index], reason);\n }\n\n if (!listboxRef.current) {\n return;\n }\n\n var prev = listboxRef.current.querySelector('[data-focus]');\n\n if (prev) {\n prev.removeAttribute('data-focus');\n }\n\n var listboxNode = listboxRef.current.parentElement.querySelector('[role=\"listbox\"]'); // \"No results\"\n\n if (!listboxNode) {\n return;\n }\n\n if (index === -1) {\n listboxNode.scrollTop = 0;\n return;\n }\n\n var option = listboxRef.current.querySelector(\"[data-option-index=\\\"\".concat(index, \"\\\"]\"));\n\n if (!option) {\n return;\n }\n\n option.setAttribute('data-focus', 'true'); // Scroll active descendant into view.\n // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js\n //\n // Consider this API instead once it has a better browser support:\n // .scrollIntoView({ scrollMode: 'if-needed', block: 'nearest' });\n\n if (listboxNode.scrollHeight > listboxNode.clientHeight && reason !== 'mouse') {\n var element = option;\n var scrollBottom = listboxNode.clientHeight + listboxNode.scrollTop;\n var elementBottom = element.offsetTop + element.offsetHeight;\n\n if (elementBottom > scrollBottom) {\n listboxNode.scrollTop = elementBottom - listboxNode.clientHeight;\n } else if (element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0) < listboxNode.scrollTop) {\n listboxNode.scrollTop = element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0);\n }\n }\n });\n var changeHighlightedIndex = useEventCallback(function (_ref3) {\n var event = _ref3.event,\n diff = _ref3.diff,\n _ref3$direction = _ref3.direction,\n direction = _ref3$direction === void 0 ? 'next' : _ref3$direction,\n _ref3$reason = _ref3.reason,\n reason = _ref3$reason === void 0 ? 'auto' : _ref3$reason;\n\n if (!popupOpen) {\n return;\n }\n\n var getNextIndex = function getNextIndex() {\n var maxIndex = filteredOptions.length - 1;\n\n if (diff === 'reset') {\n return defaultHighlighted;\n }\n\n if (diff === 'start') {\n return 0;\n }\n\n if (diff === 'end') {\n return maxIndex;\n }\n\n var newIndex = highlightedIndexRef.current + diff;\n\n if (newIndex < 0) {\n if (newIndex === -1 && includeInputInList) {\n return -1;\n }\n\n if (disableListWrap && highlightedIndexRef.current !== -1 || Math.abs(diff) > 1) {\n return 0;\n }\n\n return maxIndex;\n }\n\n if (newIndex > maxIndex) {\n if (newIndex === maxIndex + 1 && includeInputInList) {\n return -1;\n }\n\n if (disableListWrap || Math.abs(diff) > 1) {\n return maxIndex;\n }\n\n return 0;\n }\n\n return newIndex;\n };\n\n var nextIndex = validOptionIndex(getNextIndex(), direction);\n setHighlightedIndex({\n index: nextIndex,\n reason: reason,\n event: event\n }); // Sync the content of the input with the highlighted option.\n\n if (autoComplete && diff !== 'reset') {\n if (nextIndex === -1) {\n inputRef.current.value = inputValue;\n } else {\n var option = getOptionLabel(filteredOptions[nextIndex]);\n inputRef.current.value = option; // The portion of the selected suggestion that has not been typed by the user,\n // a completion string, appears inline after the input cursor in the textbox.\n\n var index = option.toLowerCase().indexOf(inputValue.toLowerCase());\n\n if (index === 0 && inputValue.length > 0) {\n inputRef.current.setSelectionRange(inputValue.length, option.length);\n }\n }\n }\n });\n var syncHighlightedIndex = React.useCallback(function () {\n if (!popupOpen) {\n return;\n }\n\n var valueItem = multiple ? value[0] : value; // The popup is empty, reset\n\n if (filteredOptions.length === 0 || valueItem == null) {\n changeHighlightedIndex({\n diff: 'reset'\n });\n return;\n }\n\n if (!listboxRef.current) {\n return;\n } // Synchronize the value with the highlighted index\n\n\n if (!filterSelectedOptions && valueItem != null) {\n var currentOption = filteredOptions[highlightedIndexRef.current]; // Keep the current highlighted index if possible\n\n if (multiple && currentOption && findIndex(value, function (val) {\n return getOptionSelected(currentOption, val);\n }) !== -1) {\n return;\n }\n\n var itemIndex = findIndex(filteredOptions, function (optionItem) {\n return getOptionSelected(optionItem, valueItem);\n });\n\n if (itemIndex === -1) {\n changeHighlightedIndex({\n diff: 'reset'\n });\n } else {\n setHighlightedIndex({\n index: itemIndex\n });\n }\n\n return;\n } // Prevent the highlighted index to leak outside the boundaries.\n\n\n if (highlightedIndexRef.current >= filteredOptions.length - 1) {\n setHighlightedIndex({\n index: filteredOptions.length - 1\n });\n return;\n } // Restore the focus to the previous index.\n\n\n setHighlightedIndex({\n index: highlightedIndexRef.current\n }); // Ignore filteredOptions (and options, getOptionSelected, getOptionLabel) not to break the scroll position\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [// Only sync the highlighted index when the option switch between empty and not\n // eslint-disable-next-line react-hooks/exhaustive-deps\n filteredOptions.length === 0, // Don't sync the highlighted index with the value when multiple\n // eslint-disable-next-line react-hooks/exhaustive-deps\n multiple ? false : value, filterSelectedOptions, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);\n var handleListboxRef = useEventCallback(function (node) {\n setRef(listboxRef, node);\n\n if (!node) {\n return;\n }\n\n syncHighlightedIndex();\n });\n React.useEffect(function () {\n syncHighlightedIndex();\n }, [syncHighlightedIndex]);\n\n var handleOpen = function handleOpen(event) {\n if (open) {\n return;\n }\n\n setOpenState(true);\n\n if (onOpen) {\n onOpen(event);\n }\n };\n\n var handleClose = function handleClose(event, reason) {\n if (!open) {\n return;\n }\n\n setOpenState(false);\n\n if (onClose) {\n onClose(event, reason);\n }\n };\n\n var handleValue = function handleValue(event, newValue, reason, details) {\n if (value === newValue) {\n return;\n }\n\n if (onChange) {\n onChange(event, newValue, reason, details);\n }\n\n setValue(newValue);\n };\n\n var isTouch = React.useRef(false);\n\n var selectNewValue = function selectNewValue(event, option) {\n var reasonProp = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'select-option';\n var origin = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'options';\n var reason = reasonProp;\n var newValue = option;\n\n if (multiple) {\n newValue = Array.isArray(value) ? value.slice() : [];\n\n if (process.env.NODE_ENV !== 'production') {\n var matches = newValue.filter(function (val) {\n return getOptionSelected(option, val);\n });\n\n if (matches.length > 1) {\n console.error([\"Material-UI: The `getOptionSelected` method of \".concat(componentName, \" do not handle the arguments correctly.\"), \"The component expects a single value to match a given option but found \".concat(matches.length, \" matches.\")].join('\\n'));\n }\n }\n\n var itemIndex = findIndex(newValue, function (valueItem) {\n return getOptionSelected(option, valueItem);\n });\n\n if (itemIndex === -1) {\n newValue.push(option);\n } else if (origin !== 'freeSolo') {\n newValue.splice(itemIndex, 1);\n reason = 'remove-option';\n }\n }\n\n resetInputValue(event, newValue);\n handleValue(event, newValue, reason, {\n option: option\n });\n\n if (!disableCloseOnSelect) {\n handleClose(event, reason);\n }\n\n if (blurOnSelect === true || blurOnSelect === 'touch' && isTouch.current || blurOnSelect === 'mouse' && !isTouch.current) {\n inputRef.current.blur();\n }\n };\n\n function validTagIndex(index, direction) {\n if (index === -1) {\n return -1;\n }\n\n var nextFocus = index;\n\n while (true) {\n // Out of range\n if (direction === 'next' && nextFocus === value.length || direction === 'previous' && nextFocus === -1) {\n return -1;\n }\n\n var option = anchorEl.querySelector(\"[data-tag-index=\\\"\".concat(nextFocus, \"\\\"]\")); // Same logic as MenuList.js\n\n if (option && (!option.hasAttribute('tabindex') || option.disabled || option.getAttribute('aria-disabled') === 'true')) {\n nextFocus += direction === 'next' ? 1 : -1;\n } else {\n return nextFocus;\n }\n }\n }\n\n var handleFocusTag = function handleFocusTag(event, direction) {\n if (!multiple) {\n return;\n }\n\n handleClose(event, 'toggleInput');\n var nextTag = focusedTag;\n\n if (focusedTag === -1) {\n if (inputValue === '' && direction === 'previous') {\n nextTag = value.length - 1;\n }\n } else {\n nextTag += direction === 'next' ? 1 : -1;\n\n if (nextTag < 0) {\n nextTag = 0;\n }\n\n if (nextTag === value.length) {\n nextTag = -1;\n }\n }\n\n nextTag = validTagIndex(nextTag, direction);\n setFocusedTag(nextTag);\n focusTag(nextTag);\n };\n\n var handleClear = function handleClear(event) {\n ignoreFocus.current = true;\n setInputValue('');\n\n if (onInputChange) {\n onInputChange(event, '', 'clear');\n }\n\n handleValue(event, multiple ? [] : null, 'clear');\n };\n\n var handleKeyDown = function handleKeyDown(other) {\n return function (event) {\n if (focusedTag !== -1 && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) === -1) {\n setFocusedTag(-1);\n focusTag(-1);\n }\n\n switch (event.key) {\n case 'Home':\n if (popupOpen && handleHomeEndKeys) {\n // Prevent scroll of the page\n event.preventDefault();\n changeHighlightedIndex({\n diff: 'start',\n direction: 'next',\n reason: 'keyboard',\n event: event\n });\n }\n\n break;\n\n case 'End':\n if (popupOpen && handleHomeEndKeys) {\n // Prevent scroll of the page\n event.preventDefault();\n changeHighlightedIndex({\n diff: 'end',\n direction: 'previous',\n reason: 'keyboard',\n event: event\n });\n }\n\n break;\n\n case 'PageUp':\n // Prevent scroll of the page\n event.preventDefault();\n changeHighlightedIndex({\n diff: -pageSize,\n direction: 'previous',\n reason: 'keyboard',\n event: event\n });\n handleOpen(event);\n break;\n\n case 'PageDown':\n // Prevent scroll of the page\n event.preventDefault();\n changeHighlightedIndex({\n diff: pageSize,\n direction: 'next',\n reason: 'keyboard',\n event: event\n });\n handleOpen(event);\n break;\n\n case 'ArrowDown':\n // Prevent cursor move\n event.preventDefault();\n changeHighlightedIndex({\n diff: 1,\n direction: 'next',\n reason: 'keyboard',\n event: event\n });\n handleOpen(event);\n break;\n\n case 'ArrowUp':\n // Prevent cursor move\n event.preventDefault();\n changeHighlightedIndex({\n diff: -1,\n direction: 'previous',\n reason: 'keyboard',\n event: event\n });\n handleOpen(event);\n break;\n\n case 'ArrowLeft':\n handleFocusTag(event, 'previous');\n break;\n\n case 'ArrowRight':\n handleFocusTag(event, 'next');\n break;\n\n case 'Enter':\n // Wait until IME is settled.\n if (event.which === 229) {\n break;\n }\n\n if (highlightedIndexRef.current !== -1 && popupOpen) {\n var option = filteredOptions[highlightedIndexRef.current];\n var disabled = getOptionDisabled ? getOptionDisabled(option) : false; // We don't want to validate the form.\n\n event.preventDefault();\n\n if (disabled) {\n return;\n }\n\n selectNewValue(event, option, 'select-option'); // Move the selection to the end.\n\n if (autoComplete) {\n inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);\n }\n } else if (freeSolo && inputValue !== '' && inputValueIsSelectedValue === false) {\n if (multiple) {\n // Allow people to add new values before they submit the form.\n event.preventDefault();\n }\n\n selectNewValue(event, inputValue, 'create-option', 'freeSolo');\n }\n\n break;\n\n case 'Escape':\n if (popupOpen) {\n // Avoid Opera to exit fullscreen mode.\n event.preventDefault(); // Avoid the Modal to handle the event.\n\n event.stopPropagation();\n handleClose(event, 'escape');\n } else if (clearOnEscape && (inputValue !== '' || multiple && value.length > 0)) {\n // Avoid Opera to exit fullscreen mode.\n event.preventDefault(); // Avoid the Modal to handle the event.\n\n event.stopPropagation();\n handleClear(event);\n }\n\n break;\n\n case 'Backspace':\n if (multiple && inputValue === '' && value.length > 0) {\n var index = focusedTag === -1 ? value.length - 1 : focusedTag;\n var newValue = value.slice();\n newValue.splice(index, 1);\n handleValue(event, newValue, 'remove-option', {\n option: value[index]\n });\n }\n\n break;\n\n default:\n }\n\n if (other.onKeyDown) {\n other.onKeyDown(event);\n }\n };\n };\n\n var handleFocus = function handleFocus(event) {\n setFocused(true);\n\n if (openOnFocus && !ignoreFocus.current) {\n handleOpen(event);\n }\n };\n\n var handleBlur = function handleBlur(event) {\n // Ignore the event when using the scrollbar with IE 11\n if (listboxRef.current !== null && document.activeElement === listboxRef.current.parentElement) {\n inputRef.current.focus();\n return;\n }\n\n setFocused(false);\n firstFocus.current = true;\n ignoreFocus.current = false;\n\n if (debug && inputValue !== '') {\n return;\n }\n\n if (autoSelect && highlightedIndexRef.current !== -1 && popupOpen) {\n selectNewValue(event, filteredOptions[highlightedIndexRef.current], 'blur');\n } else if (autoSelect && freeSolo && inputValue !== '') {\n selectNewValue(event, inputValue, 'blur', 'freeSolo');\n } else if (clearOnBlur) {\n resetInputValue(event, value);\n }\n\n handleClose(event, 'blur');\n };\n\n var handleInputChange = function handleInputChange(event) {\n var newValue = event.target.value;\n\n if (inputValue !== newValue) {\n setInputValue(newValue);\n\n if (onInputChange) {\n onInputChange(event, newValue, 'input');\n }\n }\n\n if (newValue === '') {\n if (!disableClearable && !multiple) {\n handleValue(event, null, 'clear');\n }\n } else {\n handleOpen(event);\n }\n };\n\n var handleOptionMouseOver = function handleOptionMouseOver(event) {\n setHighlightedIndex({\n event: event,\n index: Number(event.currentTarget.getAttribute('data-option-index')),\n reason: 'mouse'\n });\n };\n\n var handleOptionTouchStart = function handleOptionTouchStart() {\n isTouch.current = true;\n };\n\n var handleOptionClick = function handleOptionClick(event) {\n var index = Number(event.currentTarget.getAttribute('data-option-index'));\n selectNewValue(event, filteredOptions[index], 'select-option');\n isTouch.current = false;\n };\n\n var handleTagDelete = function handleTagDelete(index) {\n return function (event) {\n var newValue = value.slice();\n newValue.splice(index, 1);\n handleValue(event, newValue, 'remove-option', {\n option: value[index]\n });\n };\n };\n\n var handlePopupIndicator = function handlePopupIndicator(event) {\n if (open) {\n handleClose(event, 'toggleInput');\n } else {\n handleOpen(event);\n }\n }; // Prevent input blur when interacting with the combobox\n\n\n var handleMouseDown = function handleMouseDown(event) {\n if (event.target.getAttribute('id') !== id) {\n event.preventDefault();\n }\n }; // Focus the input when interacting with the combobox\n\n\n var handleClick = function handleClick() {\n inputRef.current.focus();\n\n if (selectOnFocus && firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) {\n inputRef.current.select();\n }\n\n firstFocus.current = false;\n };\n\n var handleInputMouseDown = function handleInputMouseDown(event) {\n if (inputValue === '' || !open) {\n handlePopupIndicator(event);\n }\n };\n\n var dirty = freeSolo && inputValue.length > 0;\n dirty = dirty || (multiple ? value.length > 0 : value !== null);\n var groupedOptions = filteredOptions;\n\n if (groupBy) {\n // used to keep track of key and indexes in the result array\n var indexBy = new Map();\n var warn = false;\n groupedOptions = filteredOptions.reduce(function (acc, option, index) {\n var group = groupBy(option);\n\n if (acc.length > 0 && acc[acc.length - 1].group === group) {\n acc[acc.length - 1].options.push(option);\n } else {\n if (process.env.NODE_ENV !== 'production') {\n if (indexBy.get(group) && !warn) {\n console.warn(\"Material-UI: The options provided combined with the `groupBy` method of \".concat(componentName, \" returns duplicated headers.\"), 'You can solve the issue by sorting the options with the output of `groupBy`.');\n warn = true;\n }\n\n indexBy.set(group, true);\n }\n\n acc.push({\n key: index,\n index: index,\n group: group,\n options: [option]\n });\n }\n\n return acc;\n }, []);\n }\n\n return {\n getRootProps: function getRootProps() {\n var other = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n return _extends({\n 'aria-owns': popupOpen ? \"\".concat(id, \"-popup\") : null,\n role: 'combobox',\n 'aria-expanded': popupOpen\n }, other, {\n onKeyDown: handleKeyDown(other),\n onMouseDown: handleMouseDown,\n onClick: handleClick\n });\n },\n getInputLabelProps: function getInputLabelProps() {\n return {\n id: \"\".concat(id, \"-label\"),\n htmlFor: id\n };\n },\n getInputProps: function getInputProps() {\n return {\n id: id,\n value: inputValue,\n onBlur: handleBlur,\n onFocus: handleFocus,\n onChange: handleInputChange,\n onMouseDown: handleInputMouseDown,\n // if open then this is handled imperativeley so don't let react override\n // only have an opinion about this when closed\n 'aria-activedescendant': popupOpen ? '' : null,\n 'aria-autocomplete': autoComplete ? 'both' : 'list',\n 'aria-controls': popupOpen ? \"\".concat(id, \"-popup\") : null,\n // Disable browser's suggestion that might overlap with the popup.\n // Handle autocomplete but not autofill.\n autoComplete: 'off',\n ref: inputRef,\n autoCapitalize: 'none',\n spellCheck: 'false'\n };\n },\n getClearProps: function getClearProps() {\n return {\n tabIndex: -1,\n onClick: handleClear\n };\n },\n getPopupIndicatorProps: function getPopupIndicatorProps() {\n return {\n tabIndex: -1,\n onClick: handlePopupIndicator\n };\n },\n getTagProps: function getTagProps(_ref4) {\n var index = _ref4.index;\n return {\n key: index,\n 'data-tag-index': index,\n tabIndex: -1,\n onDelete: handleTagDelete(index)\n };\n },\n getListboxProps: function getListboxProps() {\n return {\n role: 'listbox',\n id: \"\".concat(id, \"-popup\"),\n 'aria-labelledby': \"\".concat(id, \"-label\"),\n ref: handleListboxRef,\n onMouseDown: function onMouseDown(event) {\n // Prevent blur\n event.preventDefault();\n }\n };\n },\n getOptionProps: function getOptionProps(_ref5) {\n var index = _ref5.index,\n option = _ref5.option;\n var selected = (multiple ? value : [value]).some(function (value2) {\n return value2 != null && getOptionSelected(option, value2);\n });\n var disabled = getOptionDisabled ? getOptionDisabled(option) : false;\n return {\n key: index,\n tabIndex: -1,\n role: 'option',\n id: \"\".concat(id, \"-option-\").concat(index),\n onMouseOver: handleOptionMouseOver,\n onClick: handleOptionClick,\n onTouchStart: handleOptionTouchStart,\n 'data-option-index': index,\n 'aria-disabled': disabled,\n 'aria-selected': selected\n };\n },\n id: id,\n inputValue: inputValue,\n value: value,\n dirty: dirty,\n popupOpen: popupOpen,\n focused: focused || focusedTag !== -1,\n anchorEl: anchorEl,\n setAnchorEl: setAnchorEl,\n focusedTag: focusedTag,\n groupedOptions: groupedOptions\n };\n}","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\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 '@material-ui/core/styles';\nimport Popper from '@material-ui/core/Popper';\nimport ListSubheader from '@material-ui/core/ListSubheader';\nimport Paper from '@material-ui/core/Paper';\nimport IconButton from '@material-ui/core/IconButton';\nimport Chip from '@material-ui/core/Chip';\nimport CloseIcon from '../internal/svg-icons/Close';\nimport ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';\nimport useAutocomplete, { createFilterOptions } from '../useAutocomplete';\nexport { createFilterOptions };\nexport var styles = function styles(theme) {\n var _option;\n\n return {\n /* Styles applied to the root element. */\n root: {\n '&$focused $clearIndicatorDirty': {\n visibility: 'visible'\n },\n\n /* Avoid double tap issue on iOS */\n '@media (pointer: fine)': {\n '&:hover $clearIndicatorDirty': {\n visibility: 'visible'\n }\n }\n },\n\n /* Styles applied to the root element if `fullWidth={true}`. */\n fullWidth: {\n width: '100%'\n },\n\n /* Pseudo-class applied to the root element if focused. */\n focused: {},\n\n /* Styles applied to the tag elements, e.g. the chips. */\n tag: {\n margin: 3,\n maxWidth: 'calc(100% - 6px)'\n },\n\n /* Styles applied to the tag elements, e.g. the chips if `size=\"small\"`. */\n tagSizeSmall: {\n margin: 2,\n maxWidth: 'calc(100% - 4px)'\n },\n\n /* Styles applied when the popup icon is rendered. */\n hasPopupIcon: {},\n\n /* Styles applied when the clear icon is rendered. */\n hasClearIcon: {},\n\n /* Styles applied to the Input element. */\n inputRoot: {\n flexWrap: 'wrap',\n '$hasPopupIcon &, $hasClearIcon &': {\n paddingRight: 26 + 4\n },\n '$hasPopupIcon$hasClearIcon &': {\n paddingRight: 52 + 4\n },\n '& $input': {\n width: 0,\n minWidth: 30\n },\n '&[class*=\"MuiInput-root\"]': {\n paddingBottom: 1,\n '& $input': {\n padding: 4\n },\n '& $input:first-child': {\n padding: '6px 0'\n }\n },\n '&[class*=\"MuiInput-root\"][class*=\"MuiInput-marginDense\"]': {\n '& $input': {\n padding: '4px 4px 5px'\n },\n '& $input:first-child': {\n padding: '3px 0 6px'\n }\n },\n '&[class*=\"MuiOutlinedInput-root\"]': {\n padding: 9,\n '$hasPopupIcon &, $hasClearIcon &': {\n paddingRight: 26 + 4 + 9\n },\n '$hasPopupIcon$hasClearIcon &': {\n paddingRight: 52 + 4 + 9\n },\n '& $input': {\n padding: '9.5px 4px'\n },\n '& $input:first-child': {\n paddingLeft: 6\n },\n '& $endAdornment': {\n right: 9\n }\n },\n '&[class*=\"MuiOutlinedInput-root\"][class*=\"MuiOutlinedInput-marginDense\"]': {\n padding: 6,\n '& $input': {\n padding: '4.5px 4px'\n }\n },\n '&[class*=\"MuiFilledInput-root\"]': {\n paddingTop: 19,\n paddingLeft: 8,\n '$hasPopupIcon &, $hasClearIcon &': {\n paddingRight: 26 + 4 + 9\n },\n '$hasPopupIcon$hasClearIcon &': {\n paddingRight: 52 + 4 + 9\n },\n '& $input': {\n padding: '9px 4px'\n },\n '& $endAdornment': {\n right: 9\n }\n },\n '&[class*=\"MuiFilledInput-root\"][class*=\"MuiFilledInput-marginDense\"]': {\n paddingBottom: 1,\n '& $input': {\n padding: '4.5px 4px'\n }\n }\n },\n\n /* Styles applied to the input element. */\n input: {\n flexGrow: 1,\n textOverflow: 'ellipsis',\n opacity: 0\n },\n\n /* Styles applied to the input element if tag focused. */\n inputFocused: {\n opacity: 1\n },\n\n /* Styles applied to the endAdornment element. */\n endAdornment: {\n // We use a position absolute to support wrapping tags.\n position: 'absolute',\n right: 0,\n top: 'calc(50% - 14px)' // Center vertically\n\n },\n\n /* Styles applied to the clear indicator. */\n clearIndicator: {\n marginRight: -2,\n padding: 4,\n visibility: 'hidden'\n },\n\n /* Styles applied to the clear indicator if the input is dirty. */\n clearIndicatorDirty: {},\n\n /* Styles applied to the popup indicator. */\n popupIndicator: {\n padding: 2,\n marginRight: -2\n },\n\n /* Styles applied to the popup indicator if the popup is open. */\n popupIndicatorOpen: {\n transform: 'rotate(180deg)'\n },\n\n /* Styles applied to the popper element. */\n popper: {\n zIndex: theme.zIndex.modal\n },\n\n /* Styles applied to the popper element if `disablePortal={true}`. */\n popperDisablePortal: {\n position: 'absolute'\n },\n\n /* Styles applied to the `Paper` component. */\n paper: _extends({}, theme.typography.body1, {\n overflow: 'hidden',\n margin: '4px 0'\n }),\n\n /* Styles applied to the `listbox` component. */\n listbox: {\n listStyle: 'none',\n margin: 0,\n padding: '8px 0',\n maxHeight: '40vh',\n overflow: 'auto'\n },\n\n /* Styles applied to the loading wrapper. */\n loading: {\n color: theme.palette.text.secondary,\n padding: '14px 16px'\n },\n\n /* Styles applied to the no option wrapper. */\n noOptions: {\n color: theme.palette.text.secondary,\n padding: '14px 16px'\n },\n\n /* Styles applied to the option elements. */\n option: (_option = {\n minHeight: 48,\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n cursor: 'pointer',\n paddingTop: 6,\n boxSizing: 'border-box',\n outline: '0',\n WebkitTapHighlightColor: 'transparent',\n paddingBottom: 6,\n paddingLeft: 16,\n paddingRight: 16\n }, _defineProperty(_option, theme.breakpoints.up('sm'), {\n minHeight: 'auto'\n }), _defineProperty(_option, '&[aria-selected=\"true\"]', {\n backgroundColor: theme.palette.action.selected\n }), _defineProperty(_option, '&[data-focus=\"true\"]', {\n backgroundColor: theme.palette.action.hover\n }), _defineProperty(_option, '&:active', {\n backgroundColor: theme.palette.action.selected\n }), _defineProperty(_option, '&[aria-disabled=\"true\"]', {\n opacity: theme.palette.action.disabledOpacity,\n pointerEvents: 'none'\n }), _option),\n\n /* Styles applied to the group's label elements. */\n groupLabel: {\n backgroundColor: theme.palette.background.paper,\n top: -8\n },\n\n /* Styles applied to the group's ul elements. */\n groupUl: {\n padding: 0,\n '& $option': {\n paddingLeft: 24\n }\n }\n };\n};\n\nfunction DisablePortal(props) {\n // eslint-disable-next-line react/prop-types\n var anchorEl = props.anchorEl,\n open = props.open,\n other = _objectWithoutProperties(props, [\"anchorEl\", \"open\"]);\n\n return /*#__PURE__*/React.createElement(\"div\", other);\n}\n\nvar _ref = /*#__PURE__*/React.createElement(CloseIcon, {\n fontSize: \"small\"\n});\n\nvar _ref2 = /*#__PURE__*/React.createElement(ArrowDropDownIcon, null);\n\nvar Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(props, ref) {\n /* eslint-disable no-unused-vars */\n var _props$autoComplete = props.autoComplete,\n autoComplete = _props$autoComplete === void 0 ? false : _props$autoComplete,\n _props$autoHighlight = props.autoHighlight,\n autoHighlight = _props$autoHighlight === void 0 ? false : _props$autoHighlight,\n _props$autoSelect = props.autoSelect,\n autoSelect = _props$autoSelect === void 0 ? false : _props$autoSelect,\n _props$blurOnSelect = props.blurOnSelect,\n blurOnSelect = _props$blurOnSelect === void 0 ? false : _props$blurOnSelect,\n ChipProps = props.ChipProps,\n classes = props.classes,\n className = props.className,\n _props$clearOnBlur = props.clearOnBlur,\n clearOnBlur = _props$clearOnBlur === void 0 ? !props.freeSolo : _props$clearOnBlur,\n _props$clearOnEscape = props.clearOnEscape,\n clearOnEscape = _props$clearOnEscape === void 0 ? false : _props$clearOnEscape,\n _props$clearText = props.clearText,\n clearText = _props$clearText === void 0 ? 'Clear' : _props$clearText,\n _props$closeIcon = props.closeIcon,\n closeIcon = _props$closeIcon === void 0 ? _ref : _props$closeIcon,\n _props$closeText = props.closeText,\n closeText = _props$closeText === void 0 ? 'Close' : _props$closeText,\n _props$debug = props.debug,\n debug = _props$debug === void 0 ? false : _props$debug,\n _props$defaultValue = props.defaultValue,\n defaultValue = _props$defaultValue === void 0 ? props.multiple ? [] : null : _props$defaultValue,\n _props$disableClearab = props.disableClearable,\n disableClearable = _props$disableClearab === void 0 ? false : _props$disableClearab,\n _props$disableCloseOn = props.disableCloseOnSelect,\n disableCloseOnSelect = _props$disableCloseOn === void 0 ? false : _props$disableCloseOn,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\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 _props$disablePortal = props.disablePortal,\n disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,\n filterOptions = props.filterOptions,\n _props$filterSelected = props.filterSelectedOptions,\n filterSelectedOptions = _props$filterSelected === void 0 ? false : _props$filterSelected,\n _props$forcePopupIcon = props.forcePopupIcon,\n forcePopupIcon = _props$forcePopupIcon === void 0 ? 'auto' : _props$forcePopupIcon,\n _props$freeSolo = props.freeSolo,\n freeSolo = _props$freeSolo === void 0 ? false : _props$freeSolo,\n _props$fullWidth = props.fullWidth,\n fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,\n _props$getLimitTagsTe = props.getLimitTagsText,\n getLimitTagsText = _props$getLimitTagsTe === void 0 ? function (more) {\n return \"+\".concat(more);\n } : _props$getLimitTagsTe,\n getOptionDisabled = props.getOptionDisabled,\n _props$getOptionLabel = props.getOptionLabel,\n getOptionLabel = _props$getOptionLabel === void 0 ? function (x) {\n return x;\n } : _props$getOptionLabel,\n getOptionSelected = props.getOptionSelected,\n groupBy = props.groupBy,\n _props$handleHomeEndK = props.handleHomeEndKeys,\n handleHomeEndKeys = _props$handleHomeEndK === void 0 ? !props.freeSolo : _props$handleHomeEndK,\n idProp = props.id,\n _props$includeInputIn = props.includeInputInList,\n includeInputInList = _props$includeInputIn === void 0 ? false : _props$includeInputIn,\n inputValueProp = props.inputValue,\n _props$limitTags = props.limitTags,\n limitTags = _props$limitTags === void 0 ? -1 : _props$limitTags,\n _props$ListboxCompone = props.ListboxComponent,\n ListboxComponent = _props$ListboxCompone === void 0 ? 'ul' : _props$ListboxCompone,\n ListboxProps = props.ListboxProps,\n _props$loading = props.loading,\n loading = _props$loading === void 0 ? false : _props$loading,\n _props$loadingText = props.loadingText,\n loadingText = _props$loadingText === void 0 ? 'Loading…' : _props$loadingText,\n _props$multiple = props.multiple,\n multiple = _props$multiple === void 0 ? false : _props$multiple,\n _props$noOptionsText = props.noOptionsText,\n noOptionsText = _props$noOptionsText === void 0 ? 'No options' : _props$noOptionsText,\n onChange = props.onChange,\n onClose = props.onClose,\n onHighlightChange = props.onHighlightChange,\n onInputChange = props.onInputChange,\n onOpen = props.onOpen,\n open = props.open,\n _props$openOnFocus = props.openOnFocus,\n openOnFocus = _props$openOnFocus === void 0 ? false : _props$openOnFocus,\n _props$openText = props.openText,\n openText = _props$openText === void 0 ? 'Open' : _props$openText,\n options = props.options,\n _props$PaperComponent = props.PaperComponent,\n PaperComponent = _props$PaperComponent === void 0 ? Paper : _props$PaperComponent,\n _props$PopperComponen = props.PopperComponent,\n PopperComponentProp = _props$PopperComponen === void 0 ? Popper : _props$PopperComponen,\n _props$popupIcon = props.popupIcon,\n popupIcon = _props$popupIcon === void 0 ? _ref2 : _props$popupIcon,\n renderGroupProp = props.renderGroup,\n renderInput = props.renderInput,\n renderOptionProp = props.renderOption,\n renderTags = props.renderTags,\n _props$selectOnFocus = props.selectOnFocus,\n selectOnFocus = _props$selectOnFocus === void 0 ? !props.freeSolo : _props$selectOnFocus,\n _props$size = props.size,\n size = _props$size === void 0 ? 'medium' : _props$size,\n valueProp = props.value,\n other = _objectWithoutProperties(props, [\"autoComplete\", \"autoHighlight\", \"autoSelect\", \"blurOnSelect\", \"ChipProps\", \"classes\", \"className\", \"clearOnBlur\", \"clearOnEscape\", \"clearText\", \"closeIcon\", \"closeText\", \"debug\", \"defaultValue\", \"disableClearable\", \"disableCloseOnSelect\", \"disabled\", \"disabledItemsFocusable\", \"disableListWrap\", \"disablePortal\", \"filterOptions\", \"filterSelectedOptions\", \"forcePopupIcon\", \"freeSolo\", \"fullWidth\", \"getLimitTagsText\", \"getOptionDisabled\", \"getOptionLabel\", \"getOptionSelected\", \"groupBy\", \"handleHomeEndKeys\", \"id\", \"includeInputInList\", \"inputValue\", \"limitTags\", \"ListboxComponent\", \"ListboxProps\", \"loading\", \"loadingText\", \"multiple\", \"noOptionsText\", \"onChange\", \"onClose\", \"onHighlightChange\", \"onInputChange\", \"onOpen\", \"open\", \"openOnFocus\", \"openText\", \"options\", \"PaperComponent\", \"PopperComponent\", \"popupIcon\", \"renderGroup\", \"renderInput\", \"renderOption\", \"renderTags\", \"selectOnFocus\", \"size\", \"value\"]);\n /* eslint-enable no-unused-vars */\n\n\n var PopperComponent = disablePortal ? DisablePortal : PopperComponentProp;\n\n var _useAutocomplete = useAutocomplete(_extends({}, props, {\n componentName: 'Autocomplete'\n })),\n getRootProps = _useAutocomplete.getRootProps,\n getInputProps = _useAutocomplete.getInputProps,\n getInputLabelProps = _useAutocomplete.getInputLabelProps,\n getPopupIndicatorProps = _useAutocomplete.getPopupIndicatorProps,\n getClearProps = _useAutocomplete.getClearProps,\n getTagProps = _useAutocomplete.getTagProps,\n getListboxProps = _useAutocomplete.getListboxProps,\n getOptionProps = _useAutocomplete.getOptionProps,\n value = _useAutocomplete.value,\n dirty = _useAutocomplete.dirty,\n id = _useAutocomplete.id,\n popupOpen = _useAutocomplete.popupOpen,\n focused = _useAutocomplete.focused,\n focusedTag = _useAutocomplete.focusedTag,\n anchorEl = _useAutocomplete.anchorEl,\n setAnchorEl = _useAutocomplete.setAnchorEl,\n inputValue = _useAutocomplete.inputValue,\n groupedOptions = _useAutocomplete.groupedOptions;\n\n var startAdornment;\n\n if (multiple && value.length > 0) {\n var getCustomizedTagProps = function getCustomizedTagProps(params) {\n return _extends({\n className: clsx(classes.tag, size === 'small' && classes.tagSizeSmall),\n disabled: disabled\n }, getTagProps(params));\n };\n\n if (renderTags) {\n startAdornment = renderTags(value, getCustomizedTagProps);\n } else {\n startAdornment = value.map(function (option, index) {\n return /*#__PURE__*/React.createElement(Chip, _extends({\n label: getOptionLabel(option),\n size: size\n }, getCustomizedTagProps({\n index: index\n }), ChipProps));\n });\n }\n }\n\n if (limitTags > -1 && Array.isArray(startAdornment)) {\n var more = startAdornment.length - limitTags;\n\n if (!focused && more > 0) {\n startAdornment = startAdornment.splice(0, limitTags);\n startAdornment.push( /*#__PURE__*/React.createElement(\"span\", {\n className: classes.tag,\n key: startAdornment.length\n }, getLimitTagsText(more)));\n }\n }\n\n var defaultRenderGroup = function defaultRenderGroup(params) {\n return /*#__PURE__*/React.createElement(\"li\", {\n key: params.key\n }, /*#__PURE__*/React.createElement(ListSubheader, {\n className: classes.groupLabel,\n component: \"div\"\n }, params.group), /*#__PURE__*/React.createElement(\"ul\", {\n className: classes.groupUl\n }, params.children));\n };\n\n var renderGroup = renderGroupProp || defaultRenderGroup;\n var renderOption = renderOptionProp || getOptionLabel;\n\n var renderListOption = function renderListOption(option, index) {\n var optionProps = getOptionProps({\n option: option,\n index: index\n });\n return /*#__PURE__*/React.createElement(\"li\", _extends({}, optionProps, {\n className: classes.option\n }), renderOption(option, {\n selected: optionProps['aria-selected'],\n inputValue: inputValue\n }));\n };\n\n var hasClearIcon = !disableClearable && !disabled;\n var hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(\"div\", _extends({\n ref: ref,\n className: clsx(classes.root, className, focused && classes.focused, fullWidth && classes.fullWidth, hasClearIcon && classes.hasClearIcon, hasPopupIcon && classes.hasPopupIcon)\n }, getRootProps(other)), renderInput({\n id: id,\n disabled: disabled,\n fullWidth: true,\n size: size === 'small' ? 'small' : undefined,\n InputLabelProps: getInputLabelProps(),\n InputProps: {\n ref: setAnchorEl,\n className: classes.inputRoot,\n startAdornment: startAdornment,\n endAdornment: /*#__PURE__*/React.createElement(\"div\", {\n className: classes.endAdornment\n }, hasClearIcon ? /*#__PURE__*/React.createElement(IconButton, _extends({}, getClearProps(), {\n \"aria-label\": clearText,\n title: clearText,\n className: clsx(classes.clearIndicator, dirty && classes.clearIndicatorDirty)\n }), closeIcon) : null, hasPopupIcon ? /*#__PURE__*/React.createElement(IconButton, _extends({}, getPopupIndicatorProps(), {\n disabled: disabled,\n \"aria-label\": popupOpen ? closeText : openText,\n title: popupOpen ? closeText : openText,\n className: clsx(classes.popupIndicator, popupOpen && classes.popupIndicatorOpen)\n }), popupIcon) : null)\n },\n inputProps: _extends({\n className: clsx(classes.input, focusedTag === -1 && classes.inputFocused),\n disabled: disabled\n }, getInputProps())\n })), popupOpen && anchorEl ? /*#__PURE__*/React.createElement(PopperComponent, {\n className: clsx(classes.popper, disablePortal && classes.popperDisablePortal),\n style: {\n width: anchorEl ? anchorEl.clientWidth : null\n },\n role: \"presentation\",\n anchorEl: anchorEl,\n open: true\n }, /*#__PURE__*/React.createElement(PaperComponent, {\n className: classes.paper\n }, loading && groupedOptions.length === 0 ? /*#__PURE__*/React.createElement(\"div\", {\n className: classes.loading\n }, loadingText) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/React.createElement(\"div\", {\n className: classes.noOptions\n }, noOptionsText) : null, groupedOptions.length > 0 ? /*#__PURE__*/React.createElement(ListboxComponent, _extends({\n className: classes.listbox\n }, getListboxProps(), ListboxProps), groupedOptions.map(function (option, index) {\n if (groupBy) {\n return renderGroup({\n key: option.key,\n group: option.group,\n children: option.options.map(function (option2, index2) {\n return renderListOption(option2, option.index + index2);\n })\n });\n }\n\n return renderListOption(option, index);\n })) : null)) : null);\n});\nprocess.env.NODE_ENV !== \"production\" ? Autocomplete.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 portion of the selected suggestion that has not been typed by the user,\n * known as the completion string, appears inline after the input cursor in the textbox.\n * The inline completion string is visually highlighted and has a selected state.\n */\n autoComplete: PropTypes.bool,\n\n /**\n * If `true`, the first option is automatically highlighted.\n */\n autoHighlight: PropTypes.bool,\n\n /**\n * If `true`, the selected option becomes the value of the input\n * when the Autocomplete loses focus unless the user chooses\n * a different option or changes the character string in the input.\n */\n autoSelect: PropTypes.bool,\n\n /**\n * Control if the input should be blurred when an option is selected:\n *\n * - `false` the input is not blurred.\n * - `true` the input is always blurred.\n * - `touch` the input is blurred after a touch event.\n * - `mouse` the input is blurred after a mouse event.\n */\n blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]),\n\n /**\n * Props applied to the [`Chip`](/api/chip/) element.\n */\n ChipProps: PropTypes.object,\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 input's text will be cleared on blur if no value is selected.\n *\n * Set to `true` if you want to help the user enter a new value.\n * Set to `false` if you want to help the user resume his search.\n */\n clearOnBlur: PropTypes.bool,\n\n /**\n * If `true`, clear all values when the user presses escape and the popup is closed.\n */\n clearOnEscape: PropTypes.bool,\n\n /**\n * Override the default text for the *clear* icon button.\n *\n * For localization purposes, you can use the provided [translations](/guides/localization/).\n */\n clearText: PropTypes.string,\n\n /**\n * The icon to display in place of the default close icon.\n */\n closeIcon: PropTypes.node,\n\n /**\n * Override the default text for the *close popup* icon button.\n *\n * For localization purposes, you can use the provided [translations](/guides/localization/).\n */\n closeText: PropTypes.string,\n\n /**\n * If `true`, the popup will ignore the blur event if the input is filled.\n * You can inspect the popup markup with your browser tools.\n * Consider this option when you need to customize the component.\n */\n debug: PropTypes.bool,\n\n /**\n * The default input value. Use when the component is not controlled.\n */\n defaultValue: PropTypes.any,\n\n /**\n * If `true`, the input can't be cleared.\n */\n disableClearable: PropTypes\n /* @typescript-to-proptypes-ignore */\n .bool,\n\n /**\n * If `true`, the popup won't close when a value is selected.\n */\n disableCloseOnSelect: PropTypes.bool,\n\n /**\n * If `true`, the input will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * If `true`, will allow focus on disabled items.\n */\n disabledItemsFocusable: PropTypes.bool,\n\n /**\n * If `true`, the list box in the popup will not wrap focus.\n */\n disableListWrap: PropTypes.bool,\n\n /**\n * Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n */\n disablePortal: PropTypes.bool,\n\n /**\n * A filter function that determines the options that are eligible.\n *\n * @param {T[]} options The options to render.\n * @param {object} state The state of the component.\n * @returns {T[]}\n */\n filterOptions: PropTypes.func,\n\n /**\n * If `true`, hide the selected options from the list box.\n */\n filterSelectedOptions: PropTypes.bool,\n\n /**\n * Force the visibility display of the popup icon.\n */\n forcePopupIcon: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.bool]),\n\n /**\n * If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.\n */\n freeSolo: PropTypes\n /* @typescript-to-proptypes-ignore */\n .bool,\n\n /**\n * If `true`, the input will take up the full width of its container.\n */\n fullWidth: PropTypes.bool,\n\n /**\n * The label to display when the tags are truncated (`limitTags`).\n *\n * @param {number} more The number of truncated tags.\n * @returns {ReactNode}\n */\n getLimitTagsText: PropTypes.func,\n\n /**\n * Used to determine the disabled state for a given option.\n *\n * @param {T} option The option to test.\n * @returns {boolean}\n */\n getOptionDisabled: PropTypes.func,\n\n /**\n * Used to determine the string value for a given option.\n * It's used to fill the input (and the list box options if `renderOption` is not provided).\n *\n * @param {T} option\n * @returns {string}\n */\n getOptionLabel: PropTypes.func,\n\n /**\n * Used to determine if an option is selected, considering the current value.\n * Uses strict equality by default.\n *\n * @param {T} option The option to test.\n * @param {T} value The value to test against.\n * @returns {boolean}\n */\n getOptionSelected: PropTypes.func,\n\n /**\n * If provided, the options will be grouped under the returned string.\n * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.\n *\n * @param {T} options The options to group.\n * @returns {string}\n */\n groupBy: PropTypes.func,\n\n /**\n * If `true`, the component handles the \"Home\" and \"End\" keys when the popup is open.\n * It should move focus to the first option and last option, respectively.\n */\n handleHomeEndKeys: PropTypes.bool,\n\n /**\n * This prop is used to help implement the accessibility logic.\n * If you don't provide this prop. It falls back to a randomly generated id.\n */\n id: PropTypes.string,\n\n /**\n * If `true`, the highlight can move to the input.\n */\n includeInputInList: PropTypes.bool,\n\n /**\n * The input value.\n */\n inputValue: PropTypes.string,\n\n /**\n * The maximum number of tags that will be visible when not focused.\n * Set `-1` to disable the limit.\n */\n limitTags: PropTypes.number,\n\n /**\n * The component used to render the listbox.\n */\n ListboxComponent: PropTypes.elementType,\n\n /**\n * Props applied to the Listbox element.\n */\n ListboxProps: PropTypes.object,\n\n /**\n * If `true`, the component is in a loading state.\n */\n loading: PropTypes.bool,\n\n /**\n * Text to display when in a loading state.\n *\n * For localization purposes, you can use the provided [translations](/guides/localization/).\n */\n loadingText: PropTypes.node,\n\n /**\n * If `true`, `value` must be an array and the menu will support multiple selections.\n */\n multiple: PropTypes\n /* @typescript-to-proptypes-ignore */\n .bool,\n\n /**\n * Text to display when there are no options.\n *\n * For localization purposes, you can use the provided [translations](/guides/localization/).\n */\n noOptionsText: PropTypes.node,\n\n /**\n * Callback fired when the value changes.\n *\n * @param {object} event The event source of the callback.\n * @param {T|T[]} value The new value of the component.\n * @param {string} reason One of \"create-option\", \"select-option\", \"remove-option\", \"blur\" or \"clear\".\n */\n onChange: PropTypes.func,\n\n /**\n * Callback fired when the popup requests to be closed.\n * Use in controlled mode (see open).\n *\n * @param {object} event The event source of the callback.\n * @param {string} reason Can be: `\"toggleInput\"`, `\"escape\"`, `\"select-option\"`, `\"blur\"`.\n */\n onClose: PropTypes.func,\n\n /**\n * Callback fired when the highlight option changes.\n *\n * @param {object} event The event source of the callback.\n * @param {T} option The highlighted option.\n * @param {string} reason Can be: `\"keyboard\"`, `\"auto\"`, `\"mouse\"`.\n */\n onHighlightChange: PropTypes.func,\n\n /**\n * Callback fired when the input value changes.\n *\n * @param {object} event The event source of the callback.\n * @param {string} value The new value of the text input.\n * @param {string} reason Can be: `\"input\"` (user input), `\"reset\"` (programmatic change), `\"clear\"`.\n */\n onInputChange: PropTypes.func,\n\n /**\n * Callback fired when the popup requests to be opened.\n * Use in controlled mode (see open).\n *\n * @param {object} event The event source of the callback.\n */\n onOpen: PropTypes.func,\n\n /**\n * Control the popup` open state.\n */\n open: PropTypes.bool,\n\n /**\n * If `true`, the popup will open on input focus.\n */\n openOnFocus: PropTypes.bool,\n\n /**\n * Override the default text for the *open popup* icon button.\n *\n * For localization purposes, you can use the provided [translations](/guides/localization/).\n */\n openText: PropTypes.string,\n\n /**\n * Array of options.\n */\n options: PropTypes.array.isRequired,\n\n /**\n * The component used to render the body of the popup.\n */\n PaperComponent: PropTypes.elementType,\n\n /**\n * The component used to position the popup.\n */\n PopperComponent: PropTypes.elementType,\n\n /**\n * The icon to display in place of the default popup icon.\n */\n popupIcon: PropTypes.node,\n\n /**\n * Render the group.\n *\n * @param {any} option The group to render.\n * @returns {ReactNode}\n */\n renderGroup: PropTypes.func,\n\n /**\n * Render the input.\n *\n * @param {object} params\n * @returns {ReactNode}\n */\n renderInput: PropTypes.func.isRequired,\n\n /**\n * Render the option, use `getOptionLabel` by default.\n *\n * @param {T} option The option to render.\n * @param {object} state The state of the component.\n * @returns {ReactNode}\n */\n renderOption: PropTypes.func,\n\n /**\n * Render the selected value.\n *\n * @param {T[]} value The `value` provided to the component.\n * @param {function} getTagProps A tag props getter.\n * @returns {ReactNode}\n */\n renderTags: PropTypes.func,\n\n /**\n * If `true`, the input's text will be selected on focus.\n * It helps the user clear the selected value.\n */\n selectOnFocus: PropTypes.bool,\n\n /**\n * The size of the autocomplete.\n */\n size: PropTypes.oneOf(['medium', 'small']),\n\n /**\n * The value of the autocomplete.\n *\n * The value must have reference equality with the option in order to be selected.\n * You can customize the equality behavior with the `getOptionSelected` prop.\n */\n value: PropTypes.any\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiAutocomplete'\n})(Autocomplete);","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"\n}), 'Cancel');","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 CancelIcon from '../internal/svg-icons/Cancel';\nimport withStyles from '../styles/withStyles';\nimport { emphasize, fade } from '../styles/colorManipulator';\nimport useForkRef from '../utils/useForkRef';\nimport unsupportedProp from '../utils/unsupportedProp';\nimport capitalize from '../utils/capitalize';\nimport ButtonBase from '../ButtonBase';\nexport var styles = function styles(theme) {\n var backgroundColor = theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700];\n var deleteIconColor = fade(theme.palette.text.primary, 0.26);\n return {\n /* Styles applied to the root element. */\n root: {\n fontFamily: theme.typography.fontFamily,\n fontSize: theme.typography.pxToRem(13),\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: 32,\n color: theme.palette.getContrastText(backgroundColor),\n backgroundColor: backgroundColor,\n borderRadius: 32 / 2,\n whiteSpace: 'nowrap',\n transition: theme.transitions.create(['background-color', 'box-shadow']),\n // label will inherit this from root, then `clickable` class overrides this for both\n cursor: 'default',\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n textDecoration: 'none',\n border: 'none',\n // Remove `button` border\n padding: 0,\n // Remove `button` padding\n verticalAlign: 'middle',\n boxSizing: 'border-box',\n '&$disabled': {\n opacity: 0.5,\n pointerEvents: 'none'\n },\n '& $avatar': {\n marginLeft: 5,\n marginRight: -6,\n width: 24,\n height: 24,\n color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],\n fontSize: theme.typography.pxToRem(12)\n },\n '& $avatarColorPrimary': {\n color: theme.palette.primary.contrastText,\n backgroundColor: theme.palette.primary.dark\n },\n '& $avatarColorSecondary': {\n color: theme.palette.secondary.contrastText,\n backgroundColor: theme.palette.secondary.dark\n },\n '& $avatarSmall': {\n marginLeft: 4,\n marginRight: -4,\n width: 18,\n height: 18,\n fontSize: theme.typography.pxToRem(10)\n }\n },\n\n /* Styles applied to the root element if `size=\"small\"`. */\n sizeSmall: {\n height: 24\n },\n\n /* Styles applied to the root element if `color=\"primary\"`. */\n colorPrimary: {\n backgroundColor: theme.palette.primary.main,\n color: theme.palette.primary.contrastText\n },\n\n /* Styles applied to the root element if `color=\"secondary\"`. */\n colorSecondary: {\n backgroundColor: theme.palette.secondary.main,\n color: theme.palette.secondary.contrastText\n },\n\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\n /* Styles applied to the root element if `onClick` is defined or `clickable={true}`. */\n clickable: {\n userSelect: 'none',\n WebkitTapHighlightColor: 'transparent',\n cursor: 'pointer',\n '&:hover, &:focus': {\n backgroundColor: emphasize(backgroundColor, 0.08)\n },\n '&:active': {\n boxShadow: theme.shadows[1]\n }\n },\n\n /* Styles applied to the root element if `onClick` and `color=\"primary\"` is defined or `clickable={true}`. */\n clickableColorPrimary: {\n '&:hover, &:focus': {\n backgroundColor: emphasize(theme.palette.primary.main, 0.08)\n }\n },\n\n /* Styles applied to the root element if `onClick` and `color=\"secondary\"` is defined or `clickable={true}`. */\n clickableColorSecondary: {\n '&:hover, &:focus': {\n backgroundColor: emphasize(theme.palette.secondary.main, 0.08)\n }\n },\n\n /* Styles applied to the root element if `onDelete` is defined. */\n deletable: {\n '&:focus': {\n backgroundColor: emphasize(backgroundColor, 0.08)\n }\n },\n\n /* Styles applied to the root element if `onDelete` and `color=\"primary\"` is defined. */\n deletableColorPrimary: {\n '&:focus': {\n backgroundColor: emphasize(theme.palette.primary.main, 0.2)\n }\n },\n\n /* Styles applied to the root element if `onDelete` and `color=\"secondary\"` is defined. */\n deletableColorSecondary: {\n '&:focus': {\n backgroundColor: emphasize(theme.palette.secondary.main, 0.2)\n }\n },\n\n /* Styles applied to the root element if `variant=\"outlined\"`. */\n outlined: {\n backgroundColor: 'transparent',\n border: \"1px solid \".concat(theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'),\n '$clickable&:hover, $clickable&:focus, $deletable&:focus': {\n backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity)\n },\n '& $avatar': {\n marginLeft: 4\n },\n '& $avatarSmall': {\n marginLeft: 2\n },\n '& $icon': {\n marginLeft: 4\n },\n '& $iconSmall': {\n marginLeft: 2\n },\n '& $deleteIcon': {\n marginRight: 5\n },\n '& $deleteIconSmall': {\n marginRight: 3\n }\n },\n\n /* Styles applied to the root element if `variant=\"outlined\"` and `color=\"primary\"`. */\n outlinedPrimary: {\n color: theme.palette.primary.main,\n border: \"1px solid \".concat(theme.palette.primary.main),\n '$clickable&:hover, $clickable&:focus, $deletable&:focus': {\n backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity)\n }\n },\n\n /* Styles applied to the root element if `variant=\"outlined\"` and `color=\"secondary\"`. */\n outlinedSecondary: {\n color: theme.palette.secondary.main,\n border: \"1px solid \".concat(theme.palette.secondary.main),\n '$clickable&:hover, $clickable&:focus, $deletable&:focus': {\n backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity)\n }\n },\n // TODO v5: remove\n\n /* Styles applied to the `avatar` element. */\n avatar: {},\n\n /* Styles applied to the `avatar` element if `size=\"small\"`. */\n avatarSmall: {},\n\n /* Styles applied to the `avatar` element if `color=\"primary\"`. */\n avatarColorPrimary: {},\n\n /* Styles applied to the `avatar` element if `color=\"secondary\"`. */\n avatarColorSecondary: {},\n\n /* Styles applied to the `icon` element. */\n icon: {\n color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],\n marginLeft: 5,\n marginRight: -6\n },\n\n /* Styles applied to the `icon` element if `size=\"small\"`. */\n iconSmall: {\n width: 18,\n height: 18,\n marginLeft: 4,\n marginRight: -4\n },\n\n /* Styles applied to the `icon` element if `color=\"primary\"`. */\n iconColorPrimary: {\n color: 'inherit'\n },\n\n /* Styles applied to the `icon` element if `color=\"secondary\"`. */\n iconColorSecondary: {\n color: 'inherit'\n },\n\n /* Styles applied to the label `span` element. */\n label: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n paddingLeft: 12,\n paddingRight: 12,\n whiteSpace: 'nowrap'\n },\n\n /* Styles applied to the label `span` element if `size=\"small\"`. */\n labelSmall: {\n paddingLeft: 8,\n paddingRight: 8\n },\n\n /* Styles applied to the `deleteIcon` element. */\n deleteIcon: {\n WebkitTapHighlightColor: 'transparent',\n color: deleteIconColor,\n height: 22,\n width: 22,\n cursor: 'pointer',\n margin: '0 5px 0 -6px',\n '&:hover': {\n color: fade(deleteIconColor, 0.4)\n }\n },\n\n /* Styles applied to the `deleteIcon` element if `size=\"small\"`. */\n deleteIconSmall: {\n height: 16,\n width: 16,\n marginRight: 4,\n marginLeft: -4\n },\n\n /* Styles applied to the deleteIcon element if `color=\"primary\"` and `variant=\"default\"`. */\n deleteIconColorPrimary: {\n color: fade(theme.palette.primary.contrastText, 0.7),\n '&:hover, &:active': {\n color: theme.palette.primary.contrastText\n }\n },\n\n /* Styles applied to the deleteIcon element if `color=\"secondary\"` and `variant=\"default\"`. */\n deleteIconColorSecondary: {\n color: fade(theme.palette.secondary.contrastText, 0.7),\n '&:hover, &:active': {\n color: theme.palette.secondary.contrastText\n }\n },\n\n /* Styles applied to the deleteIcon element if `color=\"primary\"` and `variant=\"outlined\"`. */\n deleteIconOutlinedColorPrimary: {\n color: fade(theme.palette.primary.main, 0.7),\n '&:hover, &:active': {\n color: theme.palette.primary.main\n }\n },\n\n /* Styles applied to the deleteIcon element if `color=\"secondary\"` and `variant=\"outlined\"`. */\n deleteIconOutlinedColorSecondary: {\n color: fade(theme.palette.secondary.main, 0.7),\n '&:hover, &:active': {\n color: theme.palette.secondary.main\n }\n }\n };\n};\n\nfunction isDeleteKeyboardEvent(keyboardEvent) {\n return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';\n}\n/**\n * Chips represent complex entities in small blocks, such as a contact.\n */\n\n\nvar Chip = /*#__PURE__*/React.forwardRef(function Chip(props, ref) {\n var avatarProp = props.avatar,\n classes = props.classes,\n className = props.className,\n clickableProp = props.clickable,\n _props$color = props.color,\n color = _props$color === void 0 ? 'default' : _props$color,\n ComponentProp = props.component,\n deleteIconProp = props.deleteIcon,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n iconProp = props.icon,\n label = props.label,\n onClick = props.onClick,\n onDelete = props.onDelete,\n onKeyDown = props.onKeyDown,\n onKeyUp = props.onKeyUp,\n _props$size = props.size,\n size = _props$size === void 0 ? 'medium' : _props$size,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'default' : _props$variant,\n other = _objectWithoutProperties(props, [\"avatar\", \"classes\", \"className\", \"clickable\", \"color\", \"component\", \"deleteIcon\", \"disabled\", \"icon\", \"label\", \"onClick\", \"onDelete\", \"onKeyDown\", \"onKeyUp\", \"size\", \"variant\"]);\n\n var chipRef = React.useRef(null);\n var handleRef = useForkRef(chipRef, ref);\n\n var handleDeleteIconClick = function handleDeleteIconClick(event) {\n // Stop the event from bubbling up to the `Chip`\n event.stopPropagation();\n\n if (onDelete) {\n onDelete(event);\n }\n };\n\n var handleKeyDown = function handleKeyDown(event) {\n // Ignore events from children of `Chip`.\n if (event.currentTarget === event.target && isDeleteKeyboardEvent(event)) {\n // will be handled in keyUp, otherwise some browsers\n // might init navigation\n event.preventDefault();\n }\n\n if (onKeyDown) {\n onKeyDown(event);\n }\n };\n\n var handleKeyUp = function handleKeyUp(event) {\n // Ignore events from children of `Chip`.\n if (event.currentTarget === event.target) {\n if (onDelete && isDeleteKeyboardEvent(event)) {\n onDelete(event);\n } else if (event.key === 'Escape' && chipRef.current) {\n chipRef.current.blur();\n }\n }\n\n if (onKeyUp) {\n onKeyUp(event);\n }\n };\n\n var clickable = clickableProp !== false && onClick ? true : clickableProp;\n var small = size === 'small';\n var Component = ComponentProp || (clickable ? ButtonBase : 'div');\n var moreProps = Component === ButtonBase ? {\n component: 'div'\n } : {};\n var deleteIcon = null;\n\n if (onDelete) {\n var customClasses = clsx(color !== 'default' && (variant === \"default\" ? classes[\"deleteIconColor\".concat(capitalize(color))] : classes[\"deleteIconOutlinedColor\".concat(capitalize(color))]), small && classes.deleteIconSmall);\n deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? /*#__PURE__*/React.cloneElement(deleteIconProp, {\n className: clsx(deleteIconProp.props.className, classes.deleteIcon, customClasses),\n onClick: handleDeleteIconClick\n }) : /*#__PURE__*/React.createElement(CancelIcon, {\n className: clsx(classes.deleteIcon, customClasses),\n onClick: handleDeleteIconClick\n });\n }\n\n var avatar = null;\n\n if (avatarProp && /*#__PURE__*/React.isValidElement(avatarProp)) {\n avatar = /*#__PURE__*/React.cloneElement(avatarProp, {\n className: clsx(classes.avatar, avatarProp.props.className, small && classes.avatarSmall, color !== 'default' && classes[\"avatarColor\".concat(capitalize(color))])\n });\n }\n\n var icon = null;\n\n if (iconProp && /*#__PURE__*/React.isValidElement(iconProp)) {\n icon = /*#__PURE__*/React.cloneElement(iconProp, {\n className: clsx(classes.icon, iconProp.props.className, small && classes.iconSmall, color !== 'default' && classes[\"iconColor\".concat(capitalize(color))])\n });\n }\n\n if (process.env.NODE_ENV !== 'production') {\n if (avatar && icon) {\n console.error('Material-UI: The Chip component can not handle the avatar ' + 'and the icon prop at the same time. Pick one.');\n }\n }\n\n return /*#__PURE__*/React.createElement(Component, _extends({\n role: clickable || onDelete ? 'button' : undefined,\n className: clsx(classes.root, className, color !== 'default' && [classes[\"color\".concat(capitalize(color))], clickable && classes[\"clickableColor\".concat(capitalize(color))], onDelete && classes[\"deletableColor\".concat(capitalize(color))]], variant !== \"default\" && [classes.outlined, {\n 'primary': classes.outlinedPrimary,\n 'secondary': classes.outlinedSecondary\n }[color]], disabled && classes.disabled, small && classes.sizeSmall, clickable && classes.clickable, onDelete && classes.deletable),\n \"aria-disabled\": disabled ? true : undefined,\n tabIndex: clickable || onDelete ? 0 : undefined,\n onClick: onClick,\n onKeyDown: handleKeyDown,\n onKeyUp: handleKeyUp,\n ref: handleRef\n }, moreProps, other), avatar || icon, /*#__PURE__*/React.createElement(\"span\", {\n className: clsx(classes.label, small && classes.labelSmall)\n }, label), deleteIcon);\n});\nprocess.env.NODE_ENV !== \"production\" ? Chip.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 * Avatar element.\n */\n avatar: PropTypes.element,\n\n /**\n * This prop isn't supported.\n * Use the `component` prop if you need to change the children structure.\n */\n children: unsupportedProp,\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 chip will appear clickable, and will raise when pressed,\n * even if the onClick prop is not defined.\n * If false, the chip will not be clickable, even if onClick prop is defined.\n * This can be used, for example,\n * along with the component prop to indicate an anchor Chip is clickable.\n */\n clickable: PropTypes.bool,\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n */\n color: PropTypes.oneOf(['default', 'primary', 'secondary']),\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 * Override the default delete icon element. Shown only if `onDelete` is set.\n */\n deleteIcon: PropTypes.element,\n\n /**\n * If `true`, the chip should be displayed in a disabled state.\n */\n disabled: PropTypes.bool,\n\n /**\n * Icon element.\n */\n icon: PropTypes.element,\n\n /**\n * The content of the label.\n */\n label: PropTypes.node,\n\n /**\n * @ignore\n */\n onClick: PropTypes.func,\n\n /**\n * Callback function fired when the delete icon is clicked.\n * If set, the delete icon will be shown.\n */\n onDelete: PropTypes.func,\n\n /**\n * @ignore\n */\n onKeyDown: PropTypes.func,\n\n /**\n * @ignore\n */\n onKeyUp: PropTypes.func,\n\n /**\n * The size of the chip.\n */\n size: PropTypes.oneOf(['medium', 'small']),\n\n /**\n * The variant to use.\n */\n variant: PropTypes.oneOf(['default', 'outlined'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiChip'\n})(Chip);"],"sourceRoot":""}