` by default. You can change this\n * behavior by providing a `component` prop.\n * If you use React v16+ and would like to avoid a wrapping `
` element\n * you can pass in `component={null}`. This is useful if the wrapping div\n * borks your css styles.\n */\n component: PropTypes.any,\n\n /**\n * A set of `` components, that are toggled `in` and out as they\n * leave. the `` will inject specific transition props, so\n * remember to spread them through if you are wrapping the `` as\n * with our `` example.\n *\n * While this component is meant for multiple `Transition` or `CSSTransition`\n * children, sometimes you may want to have a single transition child with\n * content that you want to be transitioned out and in when you change it\n * (e.g. routes, images etc.) In that case you can change the `key` prop of\n * the transition child as you change its content, this will cause\n * `TransitionGroup` to transition the child out and back in.\n */\n children: PropTypes.node,\n\n /**\n * A convenience prop that enables or disables appear animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n appear: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables enter animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables exit animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * You may need to apply reactive updates to a child as it is exiting.\n * This is generally done by using `cloneElement` however in the case of an exiting\n * child the element has already been removed and not accessible to the consumer.\n *\n * If you do need to update a child as it leaves you can provide a `childFactory`\n * to wrap every child, even the ones that are leaving.\n *\n * @type Function(child: ReactElement) -> ReactElement\n */\n childFactory: PropTypes.func\n} : {};\nTransitionGroup.defaultProps = defaultProps;\nexport default TransitionGroup;","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 PopperJs from 'popper.js';\nimport { chainPropTypes, refType, HTMLElementType } from '@material-ui/utils';\nimport { useTheme } from '@material-ui/styles';\nimport Portal from '../Portal';\nimport createChainedFunction from '../utils/createChainedFunction';\nimport setRef from '../utils/setRef';\nimport useForkRef from '../utils/useForkRef';\n\nfunction flipPlacement(placement, theme) {\n var direction = theme && theme.direction || 'ltr';\n\n if (direction === 'ltr') {\n return placement;\n }\n\n switch (placement) {\n case 'bottom-end':\n return 'bottom-start';\n\n case 'bottom-start':\n return 'bottom-end';\n\n case 'top-end':\n return 'top-start';\n\n case 'top-start':\n return 'top-end';\n\n default:\n return placement;\n }\n}\n\nfunction getAnchorEl(anchorEl) {\n return typeof anchorEl === 'function' ? anchorEl() : anchorEl;\n}\n\nvar useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\nvar defaultPopperOptions = {};\n/**\n * Poppers rely on the 3rd party library [Popper.js](https://popper.js.org/docs/v1/) for positioning.\n */\n\nvar Popper = /*#__PURE__*/React.forwardRef(function Popper(props, ref) {\n var anchorEl = props.anchorEl,\n children = props.children,\n container = props.container,\n _props$disablePortal = props.disablePortal,\n disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,\n _props$keepMounted = props.keepMounted,\n keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,\n modifiers = props.modifiers,\n open = props.open,\n _props$placement = props.placement,\n initialPlacement = _props$placement === void 0 ? 'bottom' : _props$placement,\n _props$popperOptions = props.popperOptions,\n popperOptions = _props$popperOptions === void 0 ? defaultPopperOptions : _props$popperOptions,\n popperRefProp = props.popperRef,\n style = props.style,\n _props$transition = props.transition,\n transition = _props$transition === void 0 ? false : _props$transition,\n other = _objectWithoutProperties(props, [\"anchorEl\", \"children\", \"container\", \"disablePortal\", \"keepMounted\", \"modifiers\", \"open\", \"placement\", \"popperOptions\", \"popperRef\", \"style\", \"transition\"]);\n\n var tooltipRef = React.useRef(null);\n var ownRef = useForkRef(tooltipRef, ref);\n var popperRef = React.useRef(null);\n var handlePopperRef = useForkRef(popperRef, popperRefProp);\n var handlePopperRefRef = React.useRef(handlePopperRef);\n useEnhancedEffect(function () {\n handlePopperRefRef.current = handlePopperRef;\n }, [handlePopperRef]);\n React.useImperativeHandle(popperRefProp, function () {\n return popperRef.current;\n }, []);\n\n var _React$useState = React.useState(true),\n exited = _React$useState[0],\n setExited = _React$useState[1];\n\n var theme = useTheme();\n var rtlPlacement = flipPlacement(initialPlacement, theme);\n /**\n * placement initialized from prop but can change during lifetime if modifiers.flip.\n * modifiers.flip is essentially a flip for controlled/uncontrolled behavior\n */\n\n var _React$useState2 = React.useState(rtlPlacement),\n placement = _React$useState2[0],\n setPlacement = _React$useState2[1];\n\n React.useEffect(function () {\n if (popperRef.current) {\n popperRef.current.update();\n }\n });\n var handleOpen = React.useCallback(function () {\n if (!tooltipRef.current || !anchorEl || !open) {\n return;\n }\n\n if (popperRef.current) {\n popperRef.current.destroy();\n handlePopperRefRef.current(null);\n }\n\n var handlePopperUpdate = function handlePopperUpdate(data) {\n setPlacement(data.placement);\n };\n\n var resolvedAnchorEl = getAnchorEl(anchorEl);\n\n if (process.env.NODE_ENV !== 'production') {\n if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {\n var box = resolvedAnchorEl.getBoundingClientRect();\n\n if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {\n console.warn(['Material-UI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', \"Make sure the element is present in the document or that it's not display none.\"].join('\\n'));\n }\n }\n }\n\n var popper = new PopperJs(getAnchorEl(anchorEl), tooltipRef.current, _extends({\n placement: rtlPlacement\n }, popperOptions, {\n modifiers: _extends({}, disablePortal ? {} : {\n // It's using scrollParent by default, we can use the viewport when using a portal.\n preventOverflow: {\n boundariesElement: 'window'\n }\n }, modifiers, popperOptions.modifiers),\n // We could have been using a custom modifier like react-popper is doing.\n // But it seems this is the best public API for this use case.\n onCreate: createChainedFunction(handlePopperUpdate, popperOptions.onCreate),\n onUpdate: createChainedFunction(handlePopperUpdate, popperOptions.onUpdate)\n }));\n handlePopperRefRef.current(popper);\n }, [anchorEl, disablePortal, modifiers, open, rtlPlacement, popperOptions]);\n var handleRef = React.useCallback(function (node) {\n setRef(ownRef, node);\n handleOpen();\n }, [ownRef, handleOpen]);\n\n var handleEnter = function handleEnter() {\n setExited(false);\n };\n\n var handleClose = function handleClose() {\n if (!popperRef.current) {\n return;\n }\n\n popperRef.current.destroy();\n handlePopperRefRef.current(null);\n };\n\n var handleExited = function handleExited() {\n setExited(true);\n handleClose();\n };\n\n React.useEffect(function () {\n return function () {\n handleClose();\n };\n }, []);\n React.useEffect(function () {\n if (!open && !transition) {\n // Otherwise handleExited will call this.\n handleClose();\n }\n }, [open, transition]);\n\n if (!keepMounted && !open && (!transition || exited)) {\n return null;\n }\n\n var childProps = {\n placement: placement\n };\n\n if (transition) {\n childProps.TransitionProps = {\n in: open,\n onEnter: handleEnter,\n onExited: handleExited\n };\n }\n\n return /*#__PURE__*/React.createElement(Portal, {\n disablePortal: disablePortal,\n container: container\n }, /*#__PURE__*/React.createElement(\"div\", _extends({\n ref: handleRef,\n role: \"tooltip\"\n }, other, {\n style: _extends({\n // Prevents scroll issue, waiting for Popper.js to add this style once initiated.\n position: 'fixed',\n // Fix Popper.js display issue\n top: 0,\n left: 0,\n display: !open && keepMounted && !transition ? 'none' : null\n }, style)\n }), typeof children === 'function' ? children(childProps) : children));\n});\nprocess.env.NODE_ENV !== \"production\" ? Popper.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * A HTML element, [referenceObject](https://popper.js.org/docs/v1/#referenceObject),\n * or a function that returns either.\n * It's used to set the position of the popper.\n * The return value will passed as the reference object of the Popper instance.\n */\n anchorEl: chainPropTypes(PropTypes.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]), function (props) {\n if (props.open) {\n var resolvedAnchorEl = getAnchorEl(props.anchorEl);\n\n if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {\n var box = resolvedAnchorEl.getBoundingClientRect();\n\n if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {\n return new Error(['Material-UI: The `anchorEl` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', \"Make sure the element is present in the document or that it's not display none.\"].join('\\n'));\n }\n } else if (!resolvedAnchorEl || typeof resolvedAnchorEl.clientWidth !== 'number' || typeof resolvedAnchorEl.clientHeight !== 'number' || typeof resolvedAnchorEl.getBoundingClientRect !== 'function') {\n return new Error(['Material-UI: The `anchorEl` prop provided to the component is invalid.', 'It should be an HTML element instance or a referenceObject ', '(https://popper.js.org/docs/v1/#referenceObject).'].join('\\n'));\n }\n }\n\n return null;\n }),\n\n /**\n * Popper render function or node.\n */\n children: PropTypes\n /* @typescript-to-proptypes-ignore */\n .oneOfType([PropTypes.node, PropTypes.func]).isRequired,\n\n /**\n * A HTML element, component instance, or function that returns either.\n * The `container` will have the portal children appended to it.\n *\n * By default, it uses the body of the top-level document object,\n * so it's simply `document.body` most of the time.\n */\n container: PropTypes\n /* @typescript-to-proptypes-ignore */\n .oneOfType([HTMLElementType, PropTypes.instanceOf(React.Component), PropTypes.func]),\n\n /**\n * Disable the portal behavior.\n * The children stay within it's parent DOM hierarchy.\n */\n disablePortal: 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 Popper.\n */\n keepMounted: PropTypes.bool,\n\n /**\n * Popper.js is based on a \"plugin-like\" architecture,\n * most of its features are fully encapsulated \"modifiers\".\n *\n * A modifier is a function that is called each time Popper.js needs to\n * compute the position of the popper.\n * For this reason, modifiers should be very performant to avoid bottlenecks.\n * To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v1/#modifiers).\n */\n modifiers: PropTypes.object,\n\n /**\n * If `true`, the popper is visible.\n */\n open: PropTypes.bool.isRequired,\n\n /**\n * Popper 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 * Options provided to the [`popper.js`](https://popper.js.org/docs/v1/) instance.\n */\n popperOptions: PropTypes.object,\n\n /**\n * A ref that points to the used popper instance.\n */\n popperRef: refType,\n\n /**\n * @ignore\n */\n style: PropTypes.object,\n\n /**\n * Help supporting a react-transition-group/Transition component.\n */\n transition: PropTypes.bool\n} : void 0;\nexport default Popper;","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 _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(offsetX - rect.left, \"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(offsetY - rect.top, \"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 = /*#__PURE__*/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 onEntered = props.onEntered,\n onEntering = props.onEntering,\n onExit = props.onExit,\n onExited = props.onExited,\n onExiting = props.onExiting,\n style = props.style,\n _props$timeout = props.timeout,\n timeout = _props$timeout === void 0 ? 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\", \"onEntered\", \"onEntering\", \"onExit\", \"onExited\", \"onExiting\", \"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 normalizedTransitionCallback = function normalizedTransitionCallback(callback) {\n return function (isAppearing) {\n if (callback) {\n // onEnterXxx and onExitXxx callbacks have a different arguments.length value.\n if (isAppearing === undefined) {\n callback(childrenRef.current);\n } else {\n callback(childrenRef.current, isAppearing);\n }\n }\n };\n };\n\n var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {\n setTranslateValue(direction, node);\n reflow(node);\n\n if (onEnter) {\n onEnter(node, isAppearing);\n }\n });\n var handleEntering = normalizedTransitionCallback(function (node, isAppearing) {\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 var handleEntered = normalizedTransitionCallback(onEntered);\n var handleExiting = normalizedTransitionCallback(onExiting);\n var handleExit = normalizedTransitionCallback(function (node) {\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 var handleExited = normalizedTransitionCallback(function (node) {\n // No need for transitions when the component is hidden\n node.style.webkitTransition = '';\n node.style.transition = '';\n\n if (onExited) {\n onExited(node);\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 nodeRef: childrenRef,\n onEnter: handleEnter,\n onEntered: handleEntered,\n onEntering: handleEntering,\n onExit: handleExit,\n onExited: handleExited,\n onExiting: handleExiting,\n appear: true,\n in: inProp,\n timeout: timeout\n }, other), function (state, childProps) {\n return /*#__PURE__*/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 onEntered: PropTypes.func,\n\n /**\n * @ignore\n */\n onEntering: PropTypes.func,\n\n /**\n * @ignore\n */\n onExit: PropTypes.func,\n\n /**\n * @ignore\n */\n onExited: PropTypes.func,\n\n /**\n * @ignore\n */\n onExiting: PropTypes.func,\n\n /**\n * @ignore\n */\n style: PropTypes.object,\n\n /**\n * The duration for the transition, in milliseconds.\n * You may specify a single timeout for all transitions, or individually with an object.\n */\n 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;","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 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 = /*#__PURE__*/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 * 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: \"M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z\"\n}), 'ArrowDownward');","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 ArrowDownwardIcon from '../internal/svg-icons/ArrowDownward';\nimport withStyles from '../styles/withStyles';\nimport ButtonBase from '../ButtonBase';\nimport capitalize from '../utils/capitalize';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n cursor: 'pointer',\n display: 'inline-flex',\n justifyContent: 'flex-start',\n flexDirection: 'inherit',\n alignItems: 'center',\n '&:focus': {\n color: theme.palette.text.secondary\n },\n '&:hover': {\n color: theme.palette.text.secondary,\n '& $icon': {\n opacity: 0.5\n }\n },\n '&$active': {\n color: theme.palette.text.primary,\n // && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045\n '&& $icon': {\n opacity: 1,\n color: theme.palette.text.secondary\n }\n }\n },\n\n /* Pseudo-class applied to the root element if `active={true}`. */\n active: {},\n\n /* Styles applied to the icon component. */\n icon: {\n fontSize: 18,\n marginRight: 4,\n marginLeft: 4,\n opacity: 0,\n transition: theme.transitions.create(['opacity', 'transform'], {\n duration: theme.transitions.duration.shorter\n }),\n userSelect: 'none'\n },\n\n /* Styles applied to the icon component if `direction=\"desc\"`. */\n iconDirectionDesc: {\n transform: 'rotate(0deg)'\n },\n\n /* Styles applied to the icon component if `direction=\"asc\"`. */\n iconDirectionAsc: {\n transform: 'rotate(180deg)'\n }\n };\n};\n/**\n * A button based label for placing inside `TableCell` for column sorting.\n */\n\nvar TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabel(props, ref) {\n var _props$active = props.active,\n active = _props$active === void 0 ? false : _props$active,\n children = props.children,\n classes = props.classes,\n className = props.className,\n _props$direction = props.direction,\n direction = _props$direction === void 0 ? 'asc' : _props$direction,\n _props$hideSortIcon = props.hideSortIcon,\n hideSortIcon = _props$hideSortIcon === void 0 ? false : _props$hideSortIcon,\n _props$IconComponent = props.IconComponent,\n IconComponent = _props$IconComponent === void 0 ? ArrowDownwardIcon : _props$IconComponent,\n other = _objectWithoutProperties(props, [\"active\", \"children\", \"classes\", \"className\", \"direction\", \"hideSortIcon\", \"IconComponent\"]);\n\n return /*#__PURE__*/React.createElement(ButtonBase, _extends({\n className: clsx(classes.root, className, active && classes.active),\n component: \"span\",\n disableRipple: true,\n ref: ref\n }, other), children, hideSortIcon && !active ? null : /*#__PURE__*/React.createElement(IconComponent, {\n className: clsx(classes.icon, classes[\"iconDirection\".concat(capitalize(direction))])\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? TableSortLabel.propTypes = {\n /**\n * If `true`, the label will have the active styling (should be true for the sorted column).\n */\n active: PropTypes.bool,\n\n /**\n * Label contents, the arrow will be appended automatically.\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 current sort direction.\n */\n direction: PropTypes.oneOf(['asc', 'desc']),\n\n /**\n * Hide sort icon when active is false.\n */\n hideSortIcon: PropTypes.bool,\n\n /**\n * Sort icon to use.\n */\n IconComponent: PropTypes.elementType\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiTableSortLabel'\n})(TableSortLabel);","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 KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';\nimport KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';\nimport useTheme from '../styles/useTheme';\nimport IconButton from '../IconButton';\n/**\n * @ignore - internal component.\n */\n\nvar _ref = /*#__PURE__*/React.createElement(KeyboardArrowRight, null);\n\nvar _ref2 = /*#__PURE__*/React.createElement(KeyboardArrowLeft, null);\n\nvar _ref3 = /*#__PURE__*/React.createElement(KeyboardArrowLeft, null);\n\nvar _ref4 = /*#__PURE__*/React.createElement(KeyboardArrowRight, null);\n\nvar TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {\n var backIconButtonProps = props.backIconButtonProps,\n count = props.count,\n nextIconButtonProps = props.nextIconButtonProps,\n onChangePage = props.onChangePage,\n page = props.page,\n rowsPerPage = props.rowsPerPage,\n other = _objectWithoutProperties(props, [\"backIconButtonProps\", \"count\", \"nextIconButtonProps\", \"onChangePage\", \"page\", \"rowsPerPage\"]);\n\n var theme = useTheme();\n\n var handleBackButtonClick = function handleBackButtonClick(event) {\n onChangePage(event, page - 1);\n };\n\n var handleNextButtonClick = function handleNextButtonClick(event) {\n onChangePage(event, page + 1);\n };\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n ref: ref\n }, other), /*#__PURE__*/React.createElement(IconButton, _extends({\n onClick: handleBackButtonClick,\n disabled: page === 0,\n color: \"inherit\"\n }, backIconButtonProps), theme.direction === 'rtl' ? _ref : _ref2), /*#__PURE__*/React.createElement(IconButton, _extends({\n onClick: handleNextButtonClick,\n disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,\n color: \"inherit\"\n }, nextIconButtonProps), theme.direction === 'rtl' ? _ref3 : _ref4));\n});\nprocess.env.NODE_ENV !== \"production\" ? TablePaginationActions.propTypes = {\n /**\n * Props applied to the back arrow [`IconButton`](/api/icon-button/) element.\n */\n backIconButtonProps: PropTypes.object,\n\n /**\n * The total number of rows.\n */\n count: PropTypes.number.isRequired,\n\n /**\n * Props applied to the next arrow [`IconButton`](/api/icon-button/) element.\n */\n nextIconButtonProps: PropTypes.object,\n\n /**\n * Callback fired when the page is changed.\n *\n * @param {object} event The event source of the callback.\n * @param {number} page The page selected.\n */\n onChangePage: PropTypes.func.isRequired,\n\n /**\n * The zero-based index of the current page.\n */\n page: PropTypes.number.isRequired,\n\n /**\n * The number of rows per page.\n */\n rowsPerPage: PropTypes.number.isRequired\n} : void 0;\nexport default TablePaginationActions;","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 { chainPropTypes } from '@material-ui/utils';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport InputBase from '../InputBase';\nimport MenuItem from '../MenuItem';\nimport Select from '../Select';\nimport TableCell from '../TableCell';\nimport Toolbar from '../Toolbar';\nimport Typography from '../Typography';\nimport TablePaginationActions from './TablePaginationActions';\nimport useId from '../utils/unstable_useId';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n color: theme.palette.text.primary,\n fontSize: theme.typography.pxToRem(14),\n overflow: 'auto',\n // Increase the specificity to override TableCell.\n '&:last-child': {\n padding: 0\n }\n },\n\n /* Styles applied to the Toolbar component. */\n toolbar: {\n minHeight: 52,\n paddingRight: 2\n },\n\n /* Styles applied to the spacer element. */\n spacer: {\n flex: '1 1 100%'\n },\n\n /* Styles applied to the caption Typography components if `variant=\"caption\"`. */\n caption: {\n flexShrink: 0\n },\n // TODO v5: `.selectRoot` should be merged with `.input`\n\n /* Styles applied to the Select component root element. */\n selectRoot: {\n marginRight: 32,\n marginLeft: 8\n },\n\n /* Styles applied to the Select component `select` class. */\n select: {\n paddingLeft: 8,\n paddingRight: 24,\n textAlign: 'right',\n textAlignLast: 'right' // Align