\n {children}\n \n );\n}\n```\n\n*/\n\nexport default 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';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n zIndex: -1,\n position: 'fixed',\n right: 0,\n bottom: 0,\n top: 0,\n left: 0,\n backgroundColor: 'rgba(0, 0, 0, 0.5)',\n WebkitTapHighlightColor: 'transparent'\n },\n\n /* Styles applied to the root element if `invisible={true}`. */\n invisible: {\n backgroundColor: 'transparent'\n }\n};\n/**\n * @ignore - internal component.\n */\n\nvar SimpleBackdrop = React.forwardRef(function SimpleBackdrop(props, ref) {\n var _props$invisible = props.invisible,\n invisible = _props$invisible === void 0 ? false : _props$invisible,\n open = props.open,\n other = _objectWithoutProperties(props, [\"invisible\", \"open\"]);\n\n return open ? /*#__PURE__*/React.createElement(\"div\", _extends({\n \"aria-hidden\": true,\n ref: ref\n }, other, {\n style: _extends({}, styles.root, {}, invisible ? styles.invisible : {}, {}, other.style)\n })) : null;\n});\nprocess.env.NODE_ENV !== \"production\" ? SimpleBackdrop.propTypes = {\n /**\n * If `true`, the backdrop is invisible.\n * It can be used when rendering a popover or a custom select component.\n */\n invisible: PropTypes.bool,\n\n /**\n * If `true`, the backdrop is open.\n */\n open: PropTypes.bool.isRequired\n} : void 0;\nexport default SimpleBackdrop;","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { getThemeProps, useTheme } from '@material-ui/styles';\nimport { elementAcceptingRef } from '@material-ui/utils';\nimport ownerDocument from '../utils/ownerDocument';\nimport Portal from '../Portal';\nimport createChainedFunction from '../utils/createChainedFunction';\nimport useForkRef from '../utils/useForkRef';\nimport useEventCallback from '../utils/useEventCallback';\nimport zIndex from '../styles/zIndex';\nimport ModalManager, { ariaHidden } from './ModalManager';\nimport TrapFocus from './TrapFocus';\nimport SimpleBackdrop from './SimpleBackdrop';\n\nfunction getContainer(container) {\n container = typeof container === 'function' ? container() : container;\n return ReactDOM.findDOMNode(container);\n}\n\nfunction getHasTransition(props) {\n return props.children ? props.children.props.hasOwnProperty('in') : false;\n} // A modal manager used to track and manage the state of open Modals.\n// Modals don't open on the server so this won't conflict with concurrent requests.\n\n\nvar defaultManager = new ModalManager();\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n position: 'fixed',\n zIndex: theme.zIndex.modal,\n right: 0,\n bottom: 0,\n top: 0,\n left: 0\n },\n\n /* Styles applied to the root element if the `Modal` has exited. */\n hidden: {\n visibility: 'hidden'\n }\n };\n};\n/**\n * Modal is a lower-level construct that is leveraged by the following components:\n *\n * - [Dialog](/api/dialog/)\n * - [Drawer](/api/drawer/)\n * - [Menu](/api/menu/)\n * - [Popover](/api/popover/)\n *\n * If you are creating a modal dialog, you probably want to use the [Dialog](/api/dialog/) component\n * rather than directly using Modal.\n *\n * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).\n */\n\nvar Modal = React.forwardRef(function Modal(inProps, ref) {\n var theme = useTheme();\n var props = getThemeProps({\n name: 'MuiModal',\n props: _extends({}, inProps),\n theme: theme\n });\n\n var _props$BackdropCompon = props.BackdropComponent,\n BackdropComponent = _props$BackdropCompon === void 0 ? SimpleBackdrop : _props$BackdropCompon,\n BackdropProps = props.BackdropProps,\n children = props.children,\n _props$closeAfterTran = props.closeAfterTransition,\n closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,\n container = props.container,\n _props$disableAutoFoc = props.disableAutoFocus,\n disableAutoFocus = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,\n _props$disableBackdro = props.disableBackdropClick,\n disableBackdropClick = _props$disableBackdro === void 0 ? false : _props$disableBackdro,\n _props$disableEnforce = props.disableEnforceFocus,\n disableEnforceFocus = _props$disableEnforce === void 0 ? false : _props$disableEnforce,\n _props$disableEscapeK = props.disableEscapeKeyDown,\n disableEscapeKeyDown = _props$disableEscapeK === void 0 ? false : _props$disableEscapeK,\n _props$disablePortal = props.disablePortal,\n disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,\n _props$disableRestore = props.disableRestoreFocus,\n disableRestoreFocus = _props$disableRestore === void 0 ? false : _props$disableRestore,\n _props$disableScrollL = props.disableScrollLock,\n disableScrollLock = _props$disableScrollL === void 0 ? false : _props$disableScrollL,\n _props$hideBackdrop = props.hideBackdrop,\n hideBackdrop = _props$hideBackdrop === void 0 ? false : _props$hideBackdrop,\n _props$keepMounted = props.keepMounted,\n keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,\n _props$manager = props.manager,\n manager = _props$manager === void 0 ? defaultManager : _props$manager,\n onBackdropClick = props.onBackdropClick,\n onClose = props.onClose,\n onEscapeKeyDown = props.onEscapeKeyDown,\n onRendered = props.onRendered,\n open = props.open,\n other = _objectWithoutProperties(props, [\"BackdropComponent\", \"BackdropProps\", \"children\", \"closeAfterTransition\", \"container\", \"disableAutoFocus\", \"disableBackdropClick\", \"disableEnforceFocus\", \"disableEscapeKeyDown\", \"disablePortal\", \"disableRestoreFocus\", \"disableScrollLock\", \"hideBackdrop\", \"keepMounted\", \"manager\", \"onBackdropClick\", \"onClose\", \"onEscapeKeyDown\", \"onRendered\", \"open\"]);\n\n var _React$useState = React.useState(true),\n exited = _React$useState[0],\n setExited = _React$useState[1];\n\n var modal = React.useRef({});\n var mountNodeRef = React.useRef(null);\n var modalRef = React.useRef(null);\n var handleRef = useForkRef(modalRef, ref);\n var hasTransition = getHasTransition(props);\n\n var getDoc = function getDoc() {\n return ownerDocument(mountNodeRef.current);\n };\n\n var getModal = function getModal() {\n modal.current.modalRef = modalRef.current;\n modal.current.mountNode = mountNodeRef.current;\n return modal.current;\n };\n\n var handleMounted = function handleMounted() {\n manager.mount(getModal(), {\n disableScrollLock: disableScrollLock\n }); // Fix a bug on Chrome where the scroll isn't initially 0.\n\n modalRef.current.scrollTop = 0;\n };\n\n var handleOpen = useEventCallback(function () {\n var resolvedContainer = getContainer(container) || getDoc().body;\n manager.add(getModal(), resolvedContainer); // The element was already mounted.\n\n if (modalRef.current) {\n handleMounted();\n }\n });\n var isTopModal = React.useCallback(function () {\n return manager.isTopModal(getModal());\n }, [manager]);\n var handlePortalRef = useEventCallback(function (node) {\n mountNodeRef.current = node;\n\n if (!node) {\n return;\n }\n\n if (onRendered) {\n onRendered();\n }\n\n if (open && isTopModal()) {\n handleMounted();\n } else {\n ariaHidden(modalRef.current, true);\n }\n });\n var handleClose = React.useCallback(function () {\n manager.remove(getModal());\n }, [manager]);\n React.useEffect(function () {\n return function () {\n handleClose();\n };\n }, [handleClose]);\n React.useEffect(function () {\n if (open) {\n handleOpen();\n } else if (!hasTransition || !closeAfterTransition) {\n handleClose();\n }\n }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);\n\n if (!keepMounted && !open && (!hasTransition || exited)) {\n return null;\n }\n\n var handleEnter = function handleEnter() {\n setExited(false);\n };\n\n var handleExited = function handleExited() {\n setExited(true);\n\n if (closeAfterTransition) {\n handleClose();\n }\n };\n\n var handleBackdropClick = function handleBackdropClick(event) {\n if (event.target !== event.currentTarget) {\n return;\n }\n\n if (onBackdropClick) {\n onBackdropClick(event);\n }\n\n if (!disableBackdropClick && onClose) {\n onClose(event, 'backdropClick');\n }\n };\n\n var handleKeyDown = function handleKeyDown(event) {\n // The handler doesn't take event.defaultPrevented into account:\n //\n // event.preventDefault() is meant to stop default behaviours like\n // clicking a checkbox to check it, hitting a button to submit a form,\n // and hitting left arrow to move the cursor in a text input etc.\n // Only special HTML elements have these default behaviors.\n if (event.key !== 'Escape' || !isTopModal()) {\n return;\n } // Swallow the event, in case someone is listening for the escape key on the body.\n\n\n event.stopPropagation();\n\n if (onEscapeKeyDown) {\n onEscapeKeyDown(event);\n }\n\n if (!disableEscapeKeyDown && onClose) {\n onClose(event, 'escapeKeyDown');\n }\n };\n\n var inlineStyle = styles(theme || {\n zIndex: zIndex\n });\n var childProps = {};\n\n if (children.props.tabIndex === undefined) {\n childProps.tabIndex = children.props.tabIndex || '-1';\n } // It's a Transition like component\n\n\n if (hasTransition) {\n childProps.onEnter = createChainedFunction(handleEnter, children.props.onEnter);\n childProps.onExited = createChainedFunction(handleExited, children.props.onExited);\n }\n\n return /*#__PURE__*/React.createElement(Portal, {\n ref: handlePortalRef,\n container: container,\n disablePortal: disablePortal\n }, /*#__PURE__*/React.createElement(\"div\", _extends({\n ref: handleRef,\n onKeyDown: handleKeyDown,\n role: \"presentation\"\n }, other, {\n style: _extends({}, inlineStyle.root, {}, !open && exited ? inlineStyle.hidden : {}, {}, other.style)\n }), hideBackdrop ? null : /*#__PURE__*/React.createElement(BackdropComponent, _extends({\n open: open,\n onClick: handleBackdropClick\n }, BackdropProps)), /*#__PURE__*/React.createElement(TrapFocus, {\n disableEnforceFocus: disableEnforceFocus,\n disableAutoFocus: disableAutoFocus,\n disableRestoreFocus: disableRestoreFocus,\n getDoc: getDoc,\n isEnabled: isTopModal,\n open: open\n }, React.cloneElement(children, childProps))));\n});\nprocess.env.NODE_ENV !== \"production\" ? Modal.propTypes = {\n /**\n * A backdrop component. This prop enables custom backdrop rendering.\n */\n BackdropComponent: PropTypes.elementType,\n\n /**\n * Props applied to the [`Backdrop`](/api/backdrop/) element.\n */\n BackdropProps: PropTypes.object,\n\n /**\n * A single child content element.\n */\n children: elementAcceptingRef.isRequired,\n\n /**\n * When set to true the Modal waits until a nested Transition is completed before closing.\n */\n closeAfterTransition: PropTypes.bool,\n\n /**\n * A node, component instance, or function that returns either.\n * The `container` will have the portal children appended to it.\n */\n container: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),\n\n /**\n * If `true`, the modal 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 modal children that have the `disableAutoFocus` prop.\n *\n * Generally this should never be set to `true` as it makes the modal less\n * accessible to assistive technologies, like screen readers.\n */\n disableAutoFocus: PropTypes.bool,\n\n /**\n * If `true`, clicking the backdrop will not fire any callback.\n */\n disableBackdropClick: PropTypes.bool,\n\n /**\n * If `true`, the modal will not prevent focus from leaving the modal while open.\n *\n * Generally this should never be set to `true` as it makes the modal less\n * accessible to assistive technologies, like screen readers.\n */\n disableEnforceFocus: PropTypes.bool,\n\n /**\n * If `true`, hitting escape will not fire any callback.\n */\n disableEscapeKeyDown: 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 * If `true`, the modal will not restore focus to previously focused element once\n * modal is hidden.\n */\n disableRestoreFocus: PropTypes.bool,\n\n /**\n * Disable the scroll lock behavior.\n */\n disableScrollLock: PropTypes.bool,\n\n /**\n * If `true`, the backdrop is not rendered.\n */\n hideBackdrop: PropTypes.bool,\n\n /**\n * Always keep the children in the DOM.\n * This prop can be useful in SEO situation or\n * when you want to maximize the responsiveness of the Modal.\n */\n keepMounted: PropTypes.bool,\n\n /**\n * @ignore\n */\n manager: PropTypes.object,\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 * The `reason` parameter can optionally be used to control the response to `onClose`.\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 when the escape key is pressed,\n * `disableEscapeKeyDown` is false and the modal is in focus.\n */\n onEscapeKeyDown: PropTypes.func,\n\n /**\n * Callback fired once the children has been mounted into the `container`.\n * It signals that the `open={true}` prop took effect.\n *\n * This prop will be deprecated and removed in v5, the ref can be used instead.\n */\n onRendered: PropTypes.func,\n\n /**\n * If `true`, the modal is open.\n */\n open: PropTypes.bool.isRequired\n} : void 0;\nexport default Modal;","export default {\n disabled: false\n};","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport config from './config';\nimport { timeoutsShape } from './utils/PropTypes';\nimport TransitionGroupContext from './TransitionGroupContext';\nexport var UNMOUNTED = 'unmounted';\nexport var EXITED = 'exited';\nexport var ENTERING = 'entering';\nexport var ENTERED = 'entered';\nexport var EXITING = 'exiting';\n/**\n * The Transition component lets you describe a transition from one component\n * state to another _over time_ with a simple declarative API. Most commonly\n * it's used to animate the mounting and unmounting of a component, but can also\n * be used to describe in-place transition states as well.\n *\n * ---\n *\n * **Note**: `Transition` is a platform-agnostic base component. If you're using\n * transitions in CSS, you'll probably want to use\n * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)\n * instead. It inherits all the features of `Transition`, but contains\n * additional features necessary to play nice with CSS transitions (hence the\n * name of the component).\n *\n * ---\n *\n * By default the `Transition` component does not alter the behavior of the\n * component it renders, it only tracks \"enter\" and \"exit\" states for the\n * components. It's up to you to give meaning and effect to those states. For\n * example we can add styles to a component when it enters or exits:\n *\n * ```jsx\n * import { Transition } from 'react-transition-group';\n *\n * const duration = 300;\n *\n * const defaultStyle = {\n * transition: `opacity ${duration}ms ease-in-out`,\n * opacity: 0,\n * }\n *\n * const transitionStyles = {\n * entering: { opacity: 1 },\n * entered: { opacity: 1 },\n * exiting: { opacity: 0 },\n * exited: { opacity: 0 },\n * };\n *\n * const Fade = ({ in: inProp }) => (\n * \n * {state => (\n * \n * I'm a fade Transition!\n *
\n * )}\n * \n * );\n * ```\n *\n * There are 4 main states a Transition can be in:\n * - `'entering'`\n * - `'entered'`\n * - `'exiting'`\n * - `'exited'`\n *\n * Transition state is toggled via the `in` prop. When `true` the component\n * begins the \"Enter\" stage. During this stage, the component will shift from\n * its current transition state, to `'entering'` for the duration of the\n * transition and then to the `'entered'` stage once it's complete. Let's take\n * the following example (we'll use the\n * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n * \n * \n * {state => (\n * // ...\n * )}\n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n\n function Transition(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n\n if (props[\"in\"]) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref[\"in\"];\n\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n\n return null;\n }; // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n\n\n var _proto = Transition.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n\n if (prevProps !== this.props) {\n var status = this.state.status;\n\n if (this.props[\"in\"]) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n\n this.updateStatus(false, nextStatus);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n var node = ReactDOM.findDOMNode(this);\n\n if (nextStatus === ENTERING) {\n this.performEnter(node, mounting);\n } else {\n this.performExit(node);\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n\n _proto.performEnter = function performEnter(node, mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(node);\n });\n return;\n }\n\n this.props.onEnter(node, appearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(node, appearing);\n\n _this2.onTransitionEnd(node, enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(node, appearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit(node) {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts(); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(node);\n });\n return;\n }\n\n this.props.onExit(node);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(node);\n\n _this3.onTransitionEnd(node, timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(node);\n });\n });\n });\n };\n\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n _proto.onTransitionEnd = function onTransitionEnd(node, timeout, handler) {\n this.setNextCallback(handler);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n\n if (this.props.addEndListener) {\n this.props.addEndListener(node, this.nextCallback);\n }\n\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n\n _proto.render = function render() {\n var status = this.state.status;\n\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _this$props = this.props,\n children = _this$props.children,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\"]); // filter props for Transtition\n\n\n delete childProps[\"in\"];\n delete childProps.mountOnEnter;\n delete childProps.unmountOnExit;\n delete childProps.appear;\n delete childProps.enter;\n delete childProps.exit;\n delete childProps.timeout;\n delete childProps.addEndListener;\n delete childProps.onEnter;\n delete childProps.onEntering;\n delete childProps.onEntered;\n delete childProps.onExit;\n delete childProps.onExiting;\n delete childProps.onExited;\n\n if (typeof children === 'function') {\n // allows for nested Transitions\n return React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, children(status, childProps));\n }\n\n var child = React.Children.only(children);\n return (// allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, React.cloneElement(child, childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n * \n * {state => (\n * \n * )}\n * \n * ```\n */\n children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,\n\n /**\n * Show the component; triggers the enter or exit states\n */\n \"in\": PropTypes.bool,\n\n /**\n * By default the child component is mounted immediately along with\n * the parent `Transition` component. If you want to \"lazy mount\" the component on the\n * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay\n * mounted, even on \"exited\", unless you also specify `unmountOnExit`.\n */\n mountOnEnter: PropTypes.bool,\n\n /**\n * By default the child component stays mounted after it reaches the `'exited'` state.\n * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit: PropTypes.bool,\n\n /**\n * Normally a component is not transitioned if it is shown when the\n * `` component mounts. If you want to transition on the first\n * mount set `appear` to `true`, and the component will transition in as soon\n * as the `` mounts.\n *\n * > **Note**: there are no special appear states like `appearing`/`appeared`, this prop\n * > only adds an additional enter transition. However, in the\n * > `` component that first enter transition does result in\n * > additional `.appear-*` classes, that way you can choose to style it\n * > differently.\n */\n appear: PropTypes.bool,\n\n /**\n * Enable or disable enter transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * Enable or disable exit transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * The duration of the transition, in milliseconds.\n * Required unless `addEndListener` is provided.\n *\n * You may specify a single timeout for all transitions:\n *\n * ```jsx\n * timeout={500}\n * ```\n *\n * or individually:\n *\n * ```jsx\n * timeout={{\n * appear: 500,\n * enter: 300,\n * exit: 500,\n * }}\n * ```\n *\n * - `appear` defaults to the value of `enter`\n * - `enter` defaults to `0`\n * - `exit` defaults to `0`\n *\n * @type {number | { enter?: number, exit?: number, appear?: number }}\n */\n timeout: function timeout(props) {\n var pt = timeoutsShape;\n if (!props.addEndListener) pt = pt.isRequired;\n\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n return pt.apply(void 0, [props].concat(args));\n },\n\n /**\n * Add a custom transition end trigger. Called with the transitioning\n * DOM node and a `done` callback. Allows for more fine grained transition end\n * logic. **Note:** Timeouts are still used as a fallback if provided.\n *\n * ```jsx\n * addEndListener={(node, done) => {\n * // use the css transitionend event to mark the finish of a transition\n * node.addEventListener('transitionend', done, false);\n * }}\n * ```\n */\n addEndListener: PropTypes.func,\n\n /**\n * Callback fired before the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEnter: PropTypes.func,\n\n /**\n * Callback fired after the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntering: PropTypes.func,\n\n /**\n * Callback fired after the \"entered\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEntered: PropTypes.func,\n\n /**\n * Callback fired before the \"exiting\" status is applied.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExit: PropTypes.func,\n\n /**\n * Callback fired after the \"exiting\" status is applied.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExiting: PropTypes.func,\n\n /**\n * Callback fired after the \"exited\" status is applied.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExited: PropTypes.func // Name the function so it is clearer in the documentation\n\n} : {};\n\nfunction noop() {}\n\nTransition.defaultProps = {\n \"in\": false,\n mountOnEnter: false,\n unmountOnExit: false,\n appear: false,\n enter: true,\n exit: true,\n onEnter: noop,\n onEntering: noop,\n onEntered: noop,\n onExit: noop,\n onExiting: noop,\n onExited: noop\n};\nTransition.UNMOUNTED = 0;\nTransition.EXITED = 1;\nTransition.ENTERING = 2;\nTransition.ENTERED = 3;\nTransition.EXITING = 4;\nexport default Transition;","import { useTheme as useThemeWithoutDefault } from '@material-ui/styles';\nimport React from 'react';\nimport defaultTheme from './defaultTheme';\nexport default function useTheme() {\n var theme = useThemeWithoutDefault() || defaultTheme;\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useDebugValue(theme);\n }\n\n return theme;\n}","export var reflow = function reflow(node) {\n return node.scrollTop;\n};\nexport function getTransitionProps(props, options) {\n var timeout = props.timeout,\n _props$style = props.style,\n style = _props$style === void 0 ? {} : _props$style;\n return {\n duration: style.transitionDuration || typeof timeout === 'number' ? timeout : timeout[options.mode] || 0,\n delay: style.transitionDelay\n };\n}","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 { Transition } from 'react-transition-group';\nimport { duration } from '../styles/transitions';\nimport useTheme from '../styles/useTheme';\nimport { reflow, getTransitionProps } from '../transitions/utils';\nimport useForkRef from '../utils/useForkRef';\nvar styles = {\n entering: {\n opacity: 1\n },\n entered: {\n opacity: 1\n }\n};\nvar defaultTimeout = {\n enter: duration.enteringScreen,\n exit: duration.leavingScreen\n};\n/**\n * The Fade transition is used by the [Modal](/components/modal/) component.\n * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.\n */\n\nvar Fade = React.forwardRef(function Fade(props, ref) {\n var children = props.children,\n inProp = props[\"in\"],\n onEnter = props.onEnter,\n onExit = props.onExit,\n style = props.style,\n _props$TransitionComp = props.TransitionComponent,\n TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,\n _props$timeout = props.timeout,\n timeout = _props$timeout === void 0 ? defaultTimeout : _props$timeout,\n other = _objectWithoutProperties(props, [\"children\", \"in\", \"onEnter\", \"onExit\", \"style\", \"TransitionComponent\", \"timeout\"]);\n\n var theme = useTheme();\n var handleRef = useForkRef(children.ref, ref);\n\n var handleEnter = function handleEnter(node, isAppearing) {\n reflow(node); // So the animation always start from the start.\n\n var transitionProps = getTransitionProps({\n style: style,\n timeout: timeout\n }, {\n mode: 'enter'\n });\n node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);\n node.style.transition = theme.transitions.create('opacity', transitionProps);\n\n if (onEnter) {\n onEnter(node, isAppearing);\n }\n };\n\n var handleExit = function handleExit(node) {\n var transitionProps = getTransitionProps({\n style: style,\n timeout: timeout\n }, {\n mode: 'exit'\n });\n node.style.webkitTransition = theme.transitions.create('opacity', transitionProps);\n node.style.transition = theme.transitions.create('opacity', transitionProps);\n\n if (onExit) {\n onExit(node);\n }\n };\n\n return /*#__PURE__*/React.createElement(TransitionComponent, _extends({\n appear: true,\n \"in\": inProp,\n onEnter: handleEnter,\n onExit: handleExit,\n timeout: timeout\n }, other), function (state, childProps) {\n return React.cloneElement(children, _extends({\n style: _extends({\n opacity: 0,\n visibility: state === 'exited' && !inProp ? 'hidden' : undefined\n }, styles[state], {}, style, {}, children.props.style),\n ref: handleRef\n }, childProps));\n });\n});\nprocess.env.NODE_ENV !== \"production\" ? Fade.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * A single child content element.\n */\n children: PropTypes.element,\n\n /**\n * If `true`, the component will transition in.\n */\n \"in\": PropTypes.bool,\n\n /**\n * @ignore\n */\n onEnter: PropTypes.func,\n\n /**\n * @ignore\n */\n onExit: PropTypes.func,\n\n /**\n * @ignore\n */\n style: PropTypes.object,\n\n /**\n * The duration for the transition, in milliseconds.\n * You may specify a single timeout for all transitions, or individually with an object.\n */\n timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({\n appear: PropTypes.number,\n enter: PropTypes.number,\n exit: PropTypes.number\n })])\n} : void 0;\nexport default Fade;","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 Fade from '../Fade';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n // Improve scrollable dialog support.\n zIndex: -1,\n position: 'fixed',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n right: 0,\n bottom: 0,\n top: 0,\n left: 0,\n backgroundColor: 'rgba(0, 0, 0, 0.5)',\n WebkitTapHighlightColor: 'transparent'\n },\n\n /* Styles applied to the root element if `invisible={true}`. */\n invisible: {\n backgroundColor: 'transparent'\n }\n};\nvar Backdrop = React.forwardRef(function Backdrop(props, ref) {\n var children = props.children,\n classes = props.classes,\n className = props.className,\n _props$invisible = props.invisible,\n invisible = _props$invisible === void 0 ? false : _props$invisible,\n open = props.open,\n transitionDuration = props.transitionDuration,\n _props$TransitionComp = props.TransitionComponent,\n TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,\n other = _objectWithoutProperties(props, [\"children\", \"classes\", \"className\", \"invisible\", \"open\", \"transitionDuration\", \"TransitionComponent\"]);\n\n return /*#__PURE__*/React.createElement(TransitionComponent, _extends({\n \"in\": open,\n timeout: transitionDuration\n }, other), /*#__PURE__*/React.createElement(\"div\", {\n className: clsx(classes.root, className, invisible && classes.invisible),\n \"aria-hidden\": true,\n ref: ref\n }, children));\n});\nprocess.env.NODE_ENV !== \"production\" ? Backdrop.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 backdrop is invisible.\n * It can be used when rendering a popover or a custom select component.\n */\n invisible: PropTypes.bool,\n\n /**\n * If `true`, the backdrop is open.\n */\n open: PropTypes.bool.isRequired,\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} : void 0;\nexport default withStyles(styles, {\n name: 'MuiBackdrop'\n})(Backdrop);","import \"core-js/modules/es6.regexp.split\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport * as ReactDOM from 'react-dom';\nimport debounce from '../utils/debounce';\nimport { Transition } from 'react-transition-group';\nimport { elementAcceptingRef } from '@material-ui/utils';\nimport useForkRef from '../utils/useForkRef';\nimport useTheme from '../styles/useTheme';\nimport { duration } from '../styles/transitions';\nimport { reflow, getTransitionProps } from '../transitions/utils'; // Translate the node so he can't be seen on the screen.\n// Later, we gonna translate back the node to his original location\n// with `none`.`\n\nfunction getTranslateValue(direction, node) {\n var rect = node.getBoundingClientRect();\n var transform;\n\n if (node.fakeTransform) {\n transform = node.fakeTransform;\n } else {\n var computedStyle = window.getComputedStyle(node);\n transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');\n }\n\n var offsetX = 0;\n var offsetY = 0;\n\n if (transform && transform !== 'none' && typeof transform === 'string') {\n var transformValues = transform.split('(')[1].split(')')[0].split(',');\n offsetX = parseInt(transformValues[4], 10);\n offsetY = parseInt(transformValues[5], 10);\n }\n\n if (direction === 'left') {\n return \"translateX(\".concat(window.innerWidth, \"px) translateX(-\").concat(rect.left - offsetX, \"px)\");\n }\n\n if (direction === 'right') {\n return \"translateX(-\".concat(rect.left + rect.width - offsetX, \"px)\");\n }\n\n if (direction === 'up') {\n return \"translateY(\".concat(window.innerHeight, \"px) translateY(-\").concat(rect.top - offsetY, \"px)\");\n } // direction === 'down'\n\n\n return \"translateY(-\".concat(rect.top + rect.height - offsetY, \"px)\");\n}\n\nexport function setTranslateValue(direction, node) {\n var transform = getTranslateValue(direction, node);\n\n if (transform) {\n node.style.webkitTransform = transform;\n node.style.transform = transform;\n }\n}\nvar defaultTimeout = {\n enter: duration.enteringScreen,\n exit: duration.leavingScreen\n};\n/**\n * The Slide transition is used by the [Drawer](/components/drawers/) component.\n * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.\n */\n\nvar Slide = React.forwardRef(function Slide(props, ref) {\n var children = props.children,\n _props$direction = props.direction,\n direction = _props$direction === void 0 ? 'down' : _props$direction,\n inProp = props[\"in\"],\n onEnter = props.onEnter,\n onEntering = props.onEntering,\n onExit = props.onExit,\n onExited = props.onExited,\n style = props.style,\n _props$timeout = props.timeout,\n timeout = _props$timeout === void 0 ? defaultTimeout : _props$timeout,\n _props$TransitionComp = props.TransitionComponent,\n TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,\n other = _objectWithoutProperties(props, [\"children\", \"direction\", \"in\", \"onEnter\", \"onEntering\", \"onExit\", \"onExited\", \"style\", \"timeout\", \"TransitionComponent\"]);\n\n var theme = useTheme();\n var childrenRef = React.useRef(null);\n /**\n * used in cloneElement(children, { ref: handleRef })\n */\n\n var handleOwnRef = React.useCallback(function (instance) {\n // #StrictMode ready\n childrenRef.current = ReactDOM.findDOMNode(instance);\n }, []);\n var handleRefIntermediary = useForkRef(children.ref, handleOwnRef);\n var handleRef = useForkRef(handleRefIntermediary, ref);\n\n var handleEnter = function handleEnter(_, isAppearing) {\n var node = childrenRef.current;\n setTranslateValue(direction, node);\n reflow(node);\n\n if (onEnter) {\n onEnter(node, isAppearing);\n }\n };\n\n var handleEntering = function handleEntering(_, isAppearing) {\n var node = childrenRef.current;\n var transitionProps = getTransitionProps({\n timeout: timeout,\n style: style\n }, {\n mode: 'enter'\n });\n node.style.webkitTransition = theme.transitions.create('-webkit-transform', _extends({}, transitionProps, {\n easing: theme.transitions.easing.easeOut\n }));\n node.style.transition = theme.transitions.create('transform', _extends({}, transitionProps, {\n easing: theme.transitions.easing.easeOut\n }));\n node.style.webkitTransform = 'none';\n node.style.transform = 'none';\n\n if (onEntering) {\n onEntering(node, isAppearing);\n }\n };\n\n var handleExit = function handleExit() {\n var node = childrenRef.current;\n var transitionProps = getTransitionProps({\n timeout: timeout,\n style: style\n }, {\n mode: 'exit'\n });\n node.style.webkitTransition = theme.transitions.create('-webkit-transform', _extends({}, transitionProps, {\n easing: theme.transitions.easing.sharp\n }));\n node.style.transition = theme.transitions.create('transform', _extends({}, transitionProps, {\n easing: theme.transitions.easing.sharp\n }));\n setTranslateValue(direction, node);\n\n if (onExit) {\n onExit(node);\n }\n };\n\n var handleExited = function handleExited() {\n var node = childrenRef.current; // No need for transitions when the component is hidden\n\n node.style.webkitTransition = '';\n node.style.transition = '';\n\n if (onExited) {\n onExited(node);\n }\n };\n\n var updatePosition = React.useCallback(function () {\n if (childrenRef.current) {\n setTranslateValue(direction, childrenRef.current);\n }\n }, [direction]);\n React.useEffect(function () {\n // Skip configuration where the position is screen size invariant.\n if (inProp || direction === 'down' || direction === 'right') {\n return undefined;\n }\n\n var handleResize = debounce(function () {\n if (childrenRef.current) {\n setTranslateValue(direction, childrenRef.current);\n }\n });\n window.addEventListener('resize', handleResize);\n return function () {\n handleResize.clear();\n window.removeEventListener('resize', handleResize);\n };\n }, [direction, inProp]);\n React.useEffect(function () {\n if (!inProp) {\n // We need to update the position of the drawer when the direction change and\n // when it's hidden.\n updatePosition();\n }\n }, [inProp, updatePosition]);\n return /*#__PURE__*/React.createElement(TransitionComponent, _extends({\n onEnter: handleEnter,\n onEntering: handleEntering,\n onExit: handleExit,\n onExited: handleExited,\n appear: true,\n \"in\": inProp,\n timeout: timeout\n }, other), function (state, childProps) {\n return React.cloneElement(children, _extends({\n ref: handleRef,\n style: _extends({\n visibility: state === 'exited' && !inProp ? 'hidden' : undefined\n }, style, {}, children.props.style)\n }, childProps));\n });\n});\nprocess.env.NODE_ENV !== \"production\" ? Slide.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: elementAcceptingRef,\n\n /**\n * Direction the child node will enter from.\n */\n direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),\n\n /**\n * If `true`, show the component; triggers the enter or exit animation.\n */\n \"in\": PropTypes.bool,\n\n /**\n * @ignore\n */\n onEnter: PropTypes.func,\n\n /**\n * @ignore\n */\n onEntering: PropTypes.func,\n\n /**\n * @ignore\n */\n onExit: PropTypes.func,\n\n /**\n * @ignore\n */\n onExited: PropTypes.func,\n\n /**\n * @ignore\n */\n style: PropTypes.object,\n\n /**\n * The duration for the transition, in milliseconds.\n * You may specify a single timeout for all transitions, or individually with an object.\n */\n timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({\n appear: PropTypes.number,\n enter: PropTypes.number,\n exit: PropTypes.number\n })])\n} : void 0;\nexport default Slide;","// Corresponds to 10 frames at 60 Hz.\n// A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.\nexport default function debounce(func) {\n var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 166;\n var timeout;\n\n function debounced() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n } // eslint-disable-next-line consistent-this\n\n\n var that = this;\n\n var later = function later() {\n func.apply(that, args);\n };\n\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n }\n\n debounced.clear = function () {\n clearTimeout(timeout);\n };\n\n return debounced;\n}","import \"core-js/modules/es6.string.anchor\";\nimport \"core-js/modules/es6.array.index-of\";\nimport _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 Modal from '../Modal';\nimport Backdrop from '../Backdrop';\nimport withStyles from '../styles/withStyles';\nimport Slide from '../Slide';\nimport Paper from '../Paper';\nimport capitalize from '../utils/capitalize';\nimport { duration } from '../styles/transitions';\nimport useTheme from '../styles/useTheme';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {},\n\n /* Styles applied to the root element if `variant=\"permanent or persistent\"`. */\n docked: {\n flex: '0 0 auto'\n },\n\n /* Styles applied to the `Paper` component. */\n paper: {\n overflowY: 'auto',\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n flex: '1 0 auto',\n zIndex: theme.zIndex.drawer,\n WebkitOverflowScrolling: 'touch',\n // Add iOS momentum scrolling.\n // temporary style\n position: 'fixed',\n top: 0,\n // We disable the focus ring for mouse, touch and keyboard users.\n // At some point, it would be better to keep it for keyboard users.\n // :focus-ring CSS pseudo-class will help.\n outline: 0\n },\n\n /* Styles applied to the `Paper` component if `anchor=\"left\"`. */\n paperAnchorLeft: {\n left: 0,\n right: 'auto'\n },\n\n /* Styles applied to the `Paper` component if `anchor=\"right\"`. */\n paperAnchorRight: {\n left: 'auto',\n right: 0\n },\n\n /* Styles applied to the `Paper` component if `anchor=\"top\"`. */\n paperAnchorTop: {\n top: 0,\n left: 0,\n bottom: 'auto',\n right: 0,\n height: 'auto',\n maxHeight: '100%'\n },\n\n /* Styles applied to the `Paper` component if `anchor=\"bottom\"`. */\n paperAnchorBottom: {\n top: 'auto',\n left: 0,\n bottom: 0,\n right: 0,\n height: 'auto',\n maxHeight: '100%'\n },\n\n /* Styles applied to the `Paper` component if `anchor=\"left\"` and `variant` is not \"temporary\". */\n paperAnchorDockedLeft: {\n borderRight: \"1px solid \".concat(theme.palette.divider)\n },\n\n /* Styles applied to the `Paper` component if `anchor=\"top\"` and `variant` is not \"temporary\". */\n paperAnchorDockedTop: {\n borderBottom: \"1px solid \".concat(theme.palette.divider)\n },\n\n /* Styles applied to the `Paper` component if `anchor=\"right\"` and `variant` is not \"temporary\". */\n paperAnchorDockedRight: {\n borderLeft: \"1px solid \".concat(theme.palette.divider)\n },\n\n /* Styles applied to the `Paper` component if `anchor=\"bottom\"` and `variant` is not \"temporary\". */\n paperAnchorDockedBottom: {\n borderTop: \"1px solid \".concat(theme.palette.divider)\n },\n\n /* Styles applied to the `Modal` component. */\n modal: {}\n };\n};\nvar oppositeDirection = {\n left: 'right',\n right: 'left',\n top: 'down',\n bottom: 'up'\n};\nexport function isHorizontal(anchor) {\n return ['left', 'right'].indexOf(anchor) !== -1;\n}\nexport function getAnchor(theme, anchor) {\n return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;\n}\nvar defaultTransitionDuration = {\n enter: duration.enteringScreen,\n exit: duration.leavingScreen\n};\n/**\n * The props of the [Modal](/api/modal/) component are available\n * when `variant=\"temporary\"` is set.\n */\n\nvar Drawer = React.forwardRef(function Drawer(props, ref) {\n var _props$anchor = props.anchor,\n anchorProp = _props$anchor === void 0 ? 'left' : _props$anchor,\n BackdropProps = props.BackdropProps,\n children = props.children,\n classes = props.classes,\n className = props.className,\n _props$elevation = props.elevation,\n elevation = _props$elevation === void 0 ? 16 : _props$elevation,\n _props$ModalProps = props.ModalProps;\n _props$ModalProps = _props$ModalProps === void 0 ? {} : _props$ModalProps;\n\n var BackdropPropsProp = _props$ModalProps.BackdropProps,\n ModalProps = _objectWithoutProperties(_props$ModalProps, [\"BackdropProps\"]),\n onClose = props.onClose,\n _props$open = props.open,\n open = _props$open === void 0 ? false : _props$open,\n _props$PaperProps = props.PaperProps,\n PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,\n SlideProps = props.SlideProps,\n _props$TransitionComp = props.TransitionComponent,\n TransitionComponent = _props$TransitionComp === void 0 ? Slide : _props$TransitionComp,\n _props$transitionDura = props.transitionDuration,\n transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration : _props$transitionDura,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'temporary' : _props$variant,\n other = _objectWithoutProperties(props, [\"anchor\", \"BackdropProps\", \"children\", \"classes\", \"className\", \"elevation\", \"ModalProps\", \"onClose\", \"open\", \"PaperProps\", \"SlideProps\", \"TransitionComponent\", \"transitionDuration\", \"variant\"]);\n\n var theme = useTheme(); // Let's assume that the Drawer will always be rendered on user space.\n // We use this state is order to skip the appear transition during the\n // initial mount of the component.\n\n var mounted = React.useRef(false);\n React.useEffect(function () {\n mounted.current = true;\n }, []);\n var anchor = getAnchor(theme, anchorProp);\n var drawer = /*#__PURE__*/React.createElement(Paper, _extends({\n elevation: variant === 'temporary' ? elevation : 0,\n square: true\n }, PaperProps, {\n className: clsx(classes.paper, classes[\"paperAnchor\".concat(capitalize(anchor))], PaperProps.className, variant !== 'temporary' && classes[\"paperAnchorDocked\".concat(capitalize(anchor))])\n }), children);\n\n if (variant === 'permanent') {\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n className: clsx(classes.root, classes.docked, className),\n ref: ref\n }, other), drawer);\n }\n\n var slidingDrawer = /*#__PURE__*/React.createElement(TransitionComponent, _extends({\n \"in\": open,\n direction: oppositeDirection[anchor],\n timeout: transitionDuration,\n appear: mounted.current\n }, SlideProps), drawer);\n\n if (variant === 'persistent') {\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n className: clsx(classes.root, classes.docked, className),\n ref: ref\n }, other), slidingDrawer);\n } // variant === temporary\n\n\n return /*#__PURE__*/React.createElement(Modal, _extends({\n BackdropProps: _extends({}, BackdropProps, {}, BackdropPropsProp, {\n transitionDuration: transitionDuration\n }),\n BackdropComponent: Backdrop,\n className: clsx(classes.root, classes.modal, className),\n open: open,\n onClose: onClose,\n ref: ref\n }, other, ModalProps), slidingDrawer);\n});\nprocess.env.NODE_ENV !== \"production\" ? Drawer.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 * Side from which the drawer will appear.\n */\n anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),\n\n /**\n * @ignore\n */\n BackdropProps: PropTypes.object,\n\n /**\n * The contents of the drawer.\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 elevation of the drawer.\n */\n elevation: PropTypes.number,\n\n /**\n * Props applied to the [`Modal`](/api/modal/) element.\n */\n ModalProps: PropTypes.object,\n\n /**\n * Callback fired when the component requests to be closed.\n *\n * @param {object} event The event source of the callback.\n */\n onClose: PropTypes.func,\n\n /**\n * If `true`, the drawer is open.\n */\n open: PropTypes.bool,\n\n /**\n * Props applied to the [`Paper`](/api/paper/) element.\n */\n PaperProps: PropTypes.object,\n\n /**\n * Props applied to the [`Slide`](/api/slide/) element.\n */\n SlideProps: PropTypes.object,\n\n /**\n * The duration for the transition, in milliseconds.\n * You may specify a single timeout for all transitions, or individually with an object.\n */\n transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({\n appear: PropTypes.number,\n enter: PropTypes.number,\n exit: PropTypes.number\n })]),\n\n /**\n * The variant to use.\n */\n variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiDrawer',\n flip: false\n})(Drawer);","import React from 'react'\nimport { navigate } from '@reach/router'\nimport {\n Typography,\n Drawer,\n Toolbar,\n Grid,\n IconButton,\n Divider,\n} from '@material-ui/core'\nimport { Link } from 'gatsby-theme-material-ui'\nimport { useContextProvider, closeMenu } from '../store/context'\nimport MenuOpenIcon from '@material-ui/icons/MenuOpen'\nconst Navigation = ({ navigation = [] }) => {\n const [isOpen, dispatch] = useContextProvider()\n const goTo = e => location => {\n navigate(location)\n dispatch(closeMenu())\n }\n\n return (\n dispatch(closeMenu())}>\n \n \n dispatch(closeMenu())} color=\"primary\">\n \n \n \n \n \n \n {navigation.map(page => (\n \n \n goTo(e)('/')}\n className={`link`}\n >\n {page.title}\n \n \n\n {page.pages && (\n \n {page.pages.map(page => (\n \n \n goTo(e)(page.slug)}\n className={`link`}\n >\n {page.title}\n \n \n\n {page.pages && (\n \n {page.pages.map(page => (\n \n \n goTo(e)(page.slug)}\n className={`link`}\n >\n {page.title}\n \n \n \n ))}\n \n )}\n \n ))}\n \n )}\n \n ))}\n \n \n )\n}\n\nexport default Navigation\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: \"M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"\n}), 'MoreHoriz');","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport React from 'react';\nimport SvgIcon from '../SvgIcon';\n/**\n * Private module reserved for @material-ui/x packages.\n */\n\nexport default function createSvgIcon(path, displayName) {\n var Component = React.memo(React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIcon, _extends({\n ref: ref\n }, props), path);\n }));\n\n if (process.env.NODE_ENV !== 'production') {\n Component.displayName = \"\".concat(displayName, \"Icon\");\n }\n\n Component.muiName = SvgIcon.muiName;\n return Component;\n}","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 withStyles from '../styles/withStyles';\nimport { emphasize } from '../styles/colorManipulator';\nimport MoreHorizIcon from '../internal/svg-icons/MoreHoriz';\nimport ButtonBase from '../ButtonBase';\n\nvar styles = function styles(theme) {\n return {\n root: {\n display: 'flex',\n marginLeft: theme.spacing(0.5),\n marginRight: theme.spacing(0.5),\n backgroundColor: theme.palette.grey[100],\n color: theme.palette.grey[700],\n borderRadius: 2,\n cursor: 'pointer',\n '&:hover, &:focus': {\n backgroundColor: theme.palette.grey[200]\n },\n '&:active': {\n boxShadow: theme.shadows[0],\n backgroundColor: emphasize(theme.palette.grey[200], 0.12)\n }\n },\n icon: {\n width: 24,\n height: 16\n }\n };\n};\n/**\n * @ignore - internal component.\n */\n\n\nfunction BreadcrumbCollapsed(props) {\n var classes = props.classes,\n other = _objectWithoutProperties(props, [\"classes\"]);\n\n return /*#__PURE__*/React.createElement(ButtonBase, _extends({\n component: \"li\",\n className: classes.root,\n focusRipple: true\n }, other), /*#__PURE__*/React.createElement(MoreHorizIcon, {\n className: classes.icon\n }));\n}\n\nprocess.env.NODE_ENV !== \"production\" ? BreadcrumbCollapsed.propTypes = {\n /**\n * @ignore\n */\n classes: PropTypes.object.isRequired\n} : void 0;\nexport default withStyles(styles, {\n name: 'PrivateBreadcrumbCollapsed'\n})(BreadcrumbCollapsed);","import \"core-js/modules/es6.array.filter\";\nimport \"core-js/modules/es6.array.map\";\nimport \"core-js/modules/es6.array.reduce\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport { isFragment } from 'react-is';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport Typography from '../Typography';\nimport BreadcrumbCollapsed from './BreadcrumbCollapsed';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {},\n\n /* Styles applied to the ol element. */\n ol: {\n display: 'flex',\n flexWrap: 'wrap',\n alignItems: 'center',\n padding: 0,\n margin: 0,\n listStyle: 'none'\n },\n\n /* Styles applied to the li element. */\n li: {},\n\n /* Styles applied to the separator element. */\n separator: {\n display: 'flex',\n userSelect: 'none',\n marginLeft: 8,\n marginRight: 8\n }\n};\n\nfunction insertSeparators(items, className, separator) {\n return items.reduce(function (acc, current, index) {\n if (index < items.length - 1) {\n acc = acc.concat(current, /*#__PURE__*/React.createElement(\"li\", {\n \"aria-hidden\": true,\n key: \"separator-\".concat(index),\n className: className\n }, separator));\n } else {\n acc.push(current);\n }\n\n return acc;\n }, []);\n}\n\nvar Breadcrumbs = React.forwardRef(function Breadcrumbs(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 ? 'nav' : _props$component,\n _props$expandText = props.expandText,\n expandText = _props$expandText === void 0 ? 'Show path' : _props$expandText,\n _props$itemsAfterColl = props.itemsAfterCollapse,\n itemsAfterCollapse = _props$itemsAfterColl === void 0 ? 1 : _props$itemsAfterColl,\n _props$itemsBeforeCol = props.itemsBeforeCollapse,\n itemsBeforeCollapse = _props$itemsBeforeCol === void 0 ? 1 : _props$itemsBeforeCol,\n _props$maxItems = props.maxItems,\n maxItems = _props$maxItems === void 0 ? 8 : _props$maxItems,\n _props$separator = props.separator,\n separator = _props$separator === void 0 ? '/' : _props$separator,\n other = _objectWithoutProperties(props, [\"children\", \"classes\", \"className\", \"component\", \"expandText\", \"itemsAfterCollapse\", \"itemsBeforeCollapse\", \"maxItems\", \"separator\"]);\n\n var _React$useState = React.useState(false),\n expanded = _React$useState[0],\n setExpanded = _React$useState[1];\n\n var renderItemsBeforeAndAfter = function renderItemsBeforeAndAfter(allItems) {\n var handleClickExpand = function handleClickExpand(event) {\n setExpanded(true); // The clicked element received the focus but gets removed from the DOM.\n // Let's keep the focus in the component after expanding.\n\n var focusable = event.currentTarget.parentNode.querySelector('a[href],button,[tabindex]');\n\n if (focusable) {\n focusable.focus();\n }\n }; // This defends against someone passing weird input, to ensure that if all\n // items would be shown anyway, we just show all items without the EllipsisItem\n\n\n if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {\n if (process.env.NODE_ENV !== 'production') {\n console.error(['Material-UI: you have provided an invalid combination of props to the Breadcrumbs.', \"itemsAfterCollapse={\".concat(itemsAfterCollapse, \"} + itemsBeforeCollapse={\").concat(itemsBeforeCollapse, \"} >= maxItems={\").concat(maxItems, \"}\")].join('\\n'));\n }\n\n return allItems;\n }\n\n return [].concat(_toConsumableArray(allItems.slice(0, itemsBeforeCollapse)), [/*#__PURE__*/React.createElement(BreadcrumbCollapsed, {\n \"aria-label\": expandText,\n key: \"ellipsis\",\n onClick: handleClickExpand\n })], _toConsumableArray(allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)));\n };\n\n var allItems = React.Children.toArray(children).filter(function (child) {\n if (process.env.NODE_ENV !== 'production') {\n if (isFragment(child)) {\n console.error([\"Material-UI: the Breadcrumbs component doesn't accept a Fragment as a child.\", 'Consider providing an array instead.'].join('\\n'));\n }\n }\n\n return React.isValidElement(child);\n }).map(function (child, index) {\n return /*#__PURE__*/React.createElement(\"li\", {\n className: classes.li,\n key: \"child-\".concat(index)\n }, child);\n });\n return /*#__PURE__*/React.createElement(Typography, _extends({\n ref: ref,\n component: Component,\n color: \"textSecondary\",\n className: clsx(classes.root, className)\n }, other), /*#__PURE__*/React.createElement(\"ol\", {\n className: classes.ol\n }, insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), classes.separator, separator)));\n});\nprocess.env.NODE_ENV !== \"production\" ? Breadcrumbs.propTypes = {\n /**\n * The breadcrumb children.\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 DOM element or a component.\n * By default, it maps the variant to a good default headline component.\n */\n component: PropTypes.elementType,\n\n /**\n * Override the default label for the expand button.\n *\n * For localization purposes, you can use the provided [translations](/guides/localization/).\n */\n expandText: PropTypes.string,\n\n /**\n * If max items is exceeded, the number of items to show after the ellipsis.\n */\n itemsAfterCollapse: PropTypes.number,\n\n /**\n * If max items is exceeded, the number of items to show before the ellipsis.\n */\n itemsBeforeCollapse: PropTypes.number,\n\n /**\n * Specifies the maximum number of breadcrumbs to display. When there are more\n * than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse`\n * will be shown, with an ellipsis in between.\n */\n maxItems: PropTypes.number,\n\n /**\n * Custom separator node.\n */\n separator: PropTypes.node\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiBreadcrumbs'\n})(Breadcrumbs);","import React from 'react'\nimport { Breadcrumbs, Typography } from '@material-ui/core'\nimport { Link } from 'gatsby-theme-material-ui'\n\nconst BreadCrumb = ({ title, breadCrumb }) => (\n \n {breadCrumb.map(page => (\n \n {page.title}\n \n ))}\n {title}\n \n)\n\nexport default BreadCrumb\n","'use strict';\n// B.2.3.2 String.prototype.anchor(name)\nrequire('./_string-html')('anchor', function (createHTML) {\n return function anchor(name) {\n return createHTML(this, 'a', 'name', name);\n };\n});\n","\"use strict\";\n\nrequire(\"core-js/modules/es6.object.define-property\");\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports[\"default\"] = void 0;\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _createSvgIcon = _interopRequireDefault(require(\"./utils/createSvgIcon\"));\n\nvar _default = (0, _createSvgIcon[\"default\"])(_react[\"default\"].createElement(\"path\", {\n d: \"M3 18h13v-2H3v2zm0-5h10v-2H3v2zm0-7v2h13V6H3zm18 9.59L17.42 12 21 8.41 19.59 7l-5 5 5 5L21 15.59z\"\n}), 'MenuOpen');\n\nexports[\"default\"] = _default;","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 { fade } from '../styles/colorManipulator';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n height: 1,\n margin: 0,\n // Reset browser default style.\n border: 'none',\n flexShrink: 0,\n backgroundColor: theme.palette.divider\n },\n\n /* Styles applied to the root element if `absolute={true}`. */\n absolute: {\n position: 'absolute',\n bottom: 0,\n left: 0,\n width: '100%'\n },\n\n /* Styles applied to the root element if `variant=\"inset\"`. */\n inset: {\n marginLeft: 72\n },\n\n /* Styles applied to the root element if `light={true}`. */\n light: {\n backgroundColor: fade(theme.palette.divider, 0.08)\n },\n\n /* Styles applied to the root element if `variant=\"middle\"`. */\n middle: {\n marginLeft: theme.spacing(2),\n marginRight: theme.spacing(2)\n },\n\n /* Styles applied to the root element if `orientation=\"vertical\"`. */\n vertical: {\n height: '100%',\n width: 1\n },\n\n /* Styles applied to the root element if `flexItem={true}`. */\n flexItem: {\n alignSelf: 'stretch',\n height: 'auto'\n }\n };\n};\nvar Divider = React.forwardRef(function Divider(props, ref) {\n var _props$absolute = props.absolute,\n absolute = _props$absolute === void 0 ? false : _props$absolute,\n classes = props.classes,\n className = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'hr' : _props$component,\n _props$flexItem = props.flexItem,\n flexItem = _props$flexItem === void 0 ? false : _props$flexItem,\n _props$light = props.light,\n light = _props$light === void 0 ? false : _props$light,\n _props$orientation = props.orientation,\n orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,\n _props$role = props.role,\n role = _props$role === void 0 ? Component !== 'hr' ? 'separator' : undefined : _props$role,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'fullWidth' : _props$variant,\n other = _objectWithoutProperties(props, [\"absolute\", \"classes\", \"className\", \"component\", \"flexItem\", \"light\", \"orientation\", \"role\", \"variant\"]);\n\n return /*#__PURE__*/React.createElement(Component, _extends({\n className: clsx(classes.root, className, variant !== 'fullWidth' && classes[variant], absolute && classes.absolute, flexItem && classes.flexItem, light && classes.light, orientation === 'vertical' && classes.vertical),\n role: role,\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? Divider.propTypes = {\n /**\n * Absolutely position the element.\n */\n absolute: PropTypes.bool,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.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 DOM element or a component.\n */\n component: PropTypes.elementType,\n\n /**\n * If `true`, a vertical divider will have the correct height when used in flex container.\n * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)\n */\n flexItem: PropTypes.bool,\n\n /**\n * If `true`, the divider will have a lighter color.\n */\n light: PropTypes.bool,\n\n /**\n * The divider orientation.\n */\n orientation: PropTypes.oneOf(['horizontal', 'vertical']),\n\n /**\n * @ignore\n */\n role: PropTypes.string,\n\n /**\n * The variant to use.\n */\n variant: PropTypes.oneOf(['fullWidth', 'inset', 'middle'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiDivider'\n})(Divider);"],"sourceRoot":""}