is not available in the theme.`, `Please make sure that \\`theme.shadows[${elevation}]\\` is defined.`].join('\\n'));\n }\n }\n\n return /*#__PURE__*/_jsx(PaperRoot, _extends({\n as: component,\n ownerState: ownerState,\n className: clsx(classes.root, className),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? Paper.propTypes\n/* remove-proptypes */\n= {\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 */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes.elementType,\n\n /**\n * Shadow depth, corresponds to `dp` in the spec.\n * It accepts values between 0 and 24 inclusive.\n * @default 1\n */\n elevation: chainPropTypes(integerPropType, props => {\n const {\n elevation,\n variant\n } = props;\n\n if (elevation > 0 && variant === 'outlined') {\n return new Error(`MUI: Combining \\`elevation={${elevation}}\\` with \\`variant=\"${variant}\"\\` has no effect. Either use \\`elevation={0}\\` or use a different \\`variant\\`.`);\n }\n\n return null;\n }),\n\n /**\n * If `true`, rounded corners are disabled.\n * @default false\n */\n square: PropTypes.bool,\n\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n\n /**\n * The variant to use.\n * @default 'elevation'\n */\n variant: PropTypes\n /* @typescript-to-proptypes-ignore */\n .oneOfType([PropTypes.oneOf(['elevation', 'outlined']), PropTypes.string])\n} : void 0;\nexport default Paper;","import { generateUtilityClass, generateUtilityClasses } from '@mui/base';\nexport function getDialogUtilityClass(slot) {\n return generateUtilityClass('MuiDialog', slot);\n}\nconst dialogClasses = generateUtilityClasses('MuiDialog', ['root', 'scrollPaper', 'scrollBody', 'container', 'paper', 'paperScrollPaper', 'paperScrollBody', 'paperWidthFalse', 'paperWidthXs', 'paperWidthSm', 'paperWidthMd', 'paperWidthLg', 'paperWidthXl', 'paperFullWidth', 'paperFullScreen']);\nexport default dialogClasses;","import { createContext } from 'react';\nconst DialogContext = /*#__PURE__*/createContext({});\n\nif (process.env.NODE_ENV !== 'production') {\n DialogContext.displayName = 'DialogContext';\n}\n\nexport default DialogContext;","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"aria-describedby\", \"aria-labelledby\", \"BackdropComponent\", \"BackdropProps\", \"children\", \"className\", \"disableEscapeKeyDown\", \"fullScreen\", \"fullWidth\", \"maxWidth\", \"onBackdropClick\", \"onClose\", \"open\", \"PaperComponent\", \"PaperProps\", \"scroll\", \"TransitionComponent\", \"transitionDuration\", \"TransitionProps\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { unstable_composeClasses as composeClasses } from '@mui/base';\nimport { unstable_useId as useId } from '@mui/utils';\nimport capitalize from '../utils/capitalize';\nimport Modal from '../Modal';\nimport Fade from '../Fade';\nimport Paper from '../Paper';\nimport useThemeProps from '../styles/useThemeProps';\nimport styled from '../styles/styled';\nimport dialogClasses, { getDialogUtilityClass } from './dialogClasses';\nimport DialogContext from './DialogContext';\nimport Backdrop from '../Backdrop';\nimport useTheme from '../styles/useTheme';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DialogBackdrop = styled(Backdrop, {\n name: 'MuiDialog',\n slot: 'Backdrop',\n overrides: (props, styles) => styles.backdrop\n})({\n // Improve scrollable dialog support.\n zIndex: -1\n});\n\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n scroll,\n maxWidth,\n fullWidth,\n fullScreen\n } = ownerState;\n const slots = {\n root: ['root'],\n container: ['container', `scroll${capitalize(scroll)}`],\n paper: ['paper', `paperScroll${capitalize(scroll)}`, `paperWidth${capitalize(String(maxWidth))}`, fullWidth && 'paperFullWidth', fullScreen && 'paperFullScreen']\n };\n return composeClasses(slots, getDialogUtilityClass, classes);\n};\n\nconst DialogRoot = styled(Modal, {\n name: 'MuiDialog',\n slot: 'Root',\n overridesResolver: (props, styles) => styles.root\n})({\n '@media print': {\n // Use !important to override the Modal inline-style.\n position: 'absolute !important'\n }\n});\nconst DialogContainer = styled('div', {\n name: 'MuiDialog',\n slot: 'Container',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.container, styles[`scroll${capitalize(ownerState.scroll)}`]];\n }\n})(({\n ownerState\n}) => _extends({\n height: '100%',\n '@media print': {\n height: 'auto'\n },\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0\n}, ownerState.scroll === 'paper' && {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center'\n}, ownerState.scroll === 'body' && {\n overflowY: 'auto',\n overflowX: 'hidden',\n textAlign: 'center',\n '&:after': {\n content: '\"\"',\n display: 'inline-block',\n verticalAlign: 'middle',\n height: '100%',\n width: '0'\n }\n}));\nconst DialogPaper = styled(Paper, {\n name: 'MuiDialog',\n slot: 'Paper',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.paper, styles[`scrollPaper${capitalize(ownerState.scroll)}`], styles[`paperWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fullWidth && styles.paperFullWidth, ownerState.fullScreen && styles.paperFullScreen];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n margin: 32,\n position: 'relative',\n overflowY: 'auto',\n // Fix IE11 issue, to remove at some point.\n '@media print': {\n overflowY: 'visible',\n boxShadow: 'none'\n }\n}, ownerState.scroll === 'paper' && {\n display: 'flex',\n flexDirection: 'column',\n maxHeight: 'calc(100% - 64px)'\n}, ownerState.scroll === 'body' && {\n display: 'inline-block',\n verticalAlign: 'middle',\n textAlign: 'left' // 'initial' doesn't work on IE11\n\n}, !ownerState.maxWidth && {\n maxWidth: 'calc(100% - 64px)'\n}, ownerState.maxWidth === 'xs' && {\n maxWidth: theme.breakpoints.unit === 'px' ? Math.max(theme.breakpoints.values.xs, 444) : `${theme.breakpoints.values.xs}${theme.breakpoints.unit}`,\n [`&.${dialogClasses.paperScrollBody}`]: {\n [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2)]: {\n maxWidth: 'calc(100% - 64px)'\n }\n }\n}, ownerState.maxWidth !== 'xs' && {\n maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`,\n [`&.${dialogClasses.paperScrollBody}`]: {\n [theme.breakpoints.down(theme.breakpoints.values[ownerState.maxWidth] + 32 * 2)]: {\n maxWidth: 'calc(100% - 64px)'\n }\n }\n}, ownerState.fullWidth && {\n width: 'calc(100% - 64px)'\n}, ownerState.fullScreen && {\n margin: 0,\n width: '100%',\n maxWidth: '100%',\n height: '100%',\n maxHeight: 'none',\n borderRadius: 0,\n [`&.${dialogClasses.paperScrollBody}`]: {\n margin: 0,\n maxWidth: '100%'\n }\n}));\n/**\n * Dialogs are overlaid modal paper based components with a backdrop.\n */\n\nconst Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiDialog'\n });\n const theme = useTheme();\n const defaultTransitionDuration = {\n enter: theme.transitions.duration.enteringScreen,\n exit: theme.transitions.duration.leavingScreen\n };\n\n const {\n 'aria-describedby': ariaDescribedby,\n 'aria-labelledby': ariaLabelledbyProp,\n BackdropComponent,\n BackdropProps,\n children,\n className,\n disableEscapeKeyDown = false,\n fullScreen = false,\n fullWidth = false,\n maxWidth = 'sm',\n onBackdropClick,\n onClose,\n open,\n PaperComponent = Paper,\n PaperProps = {},\n scroll = 'paper',\n TransitionComponent = Fade,\n transitionDuration = defaultTransitionDuration,\n TransitionProps\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n\n const ownerState = _extends({}, props, {\n disableEscapeKeyDown,\n fullScreen,\n fullWidth,\n maxWidth,\n scroll\n });\n\n const classes = useUtilityClasses(ownerState);\n const backdropClick = React.useRef();\n\n const handleMouseDown = event => {\n // We don't want to close the dialog when clicking the dialog content.\n // Make sure the event starts and ends on the same DOM element.\n backdropClick.current = event.target === event.currentTarget;\n };\n\n const handleBackdropClick = event => {\n // Ignore the events not coming from the \"backdrop\".\n if (!backdropClick.current) {\n return;\n }\n\n backdropClick.current = null;\n\n if (onBackdropClick) {\n onBackdropClick(event);\n }\n\n if (onClose) {\n onClose(event, 'backdropClick');\n }\n };\n\n const ariaLabelledby = useId(ariaLabelledbyProp);\n const dialogContextValue = React.useMemo(() => {\n return {\n titleId: ariaLabelledby\n };\n }, [ariaLabelledby]);\n return /*#__PURE__*/_jsx(DialogRoot, _extends({\n className: clsx(classes.root, className),\n BackdropProps: _extends({\n transitionDuration,\n as: BackdropComponent\n }, BackdropProps),\n closeAfterTransition: true,\n BackdropComponent: DialogBackdrop,\n disableEscapeKeyDown: disableEscapeKeyDown,\n onClose: onClose,\n open: open,\n ref: ref,\n onClick: handleBackdropClick,\n ownerState: ownerState\n }, other, {\n children: /*#__PURE__*/_jsx(TransitionComponent, _extends({\n appear: true,\n in: open,\n timeout: transitionDuration,\n role: \"presentation\"\n }, TransitionProps, {\n children: /*#__PURE__*/_jsx(DialogContainer, {\n className: clsx(classes.container),\n onMouseDown: handleMouseDown,\n ownerState: ownerState,\n children: /*#__PURE__*/_jsx(DialogPaper, _extends({\n as: PaperComponent,\n elevation: 24,\n role: \"dialog\",\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby\n }, PaperProps, {\n className: clsx(classes.paper, PaperProps.className),\n ownerState: ownerState,\n children: /*#__PURE__*/_jsx(DialogContext.Provider, {\n value: dialogContextValue,\n children: children\n })\n }))\n })\n }))\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Dialog.propTypes\n/* remove-proptypes */\n= {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The id(s) of the element(s) that describe the dialog.\n */\n 'aria-describedby': PropTypes.string,\n\n /**\n * The id(s) of the element(s) that label the dialog.\n */\n 'aria-labelledby': PropTypes.string,\n\n /**\n * A backdrop component. This prop enables custom backdrop rendering.\n * @default styled(Backdrop, {\n * name: 'MuiModal',\n * slot: 'Backdrop',\n * overridesResolver: (props, styles) => {\n * return styles.backdrop;\n * },\n * })({\n * zIndex: -1,\n * })\n */\n BackdropComponent: PropTypes.elementType,\n\n /**\n * @ignore\n */\n BackdropProps: PropTypes.object,\n\n /**\n * Dialog children, usually the included sub-components.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * If `true`, hitting escape will not fire the `onClose` callback.\n * @default false\n */\n disableEscapeKeyDown: PropTypes.bool,\n\n /**\n * If `true`, the dialog is full-screen.\n * @default false\n */\n fullScreen: PropTypes.bool,\n\n /**\n * If `true`, the dialog stretches to `maxWidth`.\n *\n * Notice that the dialog width grow is limited by the default margin.\n * @default false\n */\n fullWidth: PropTypes.bool,\n\n /**\n * Determine the max-width of the dialog.\n * The dialog width grows with the size of the screen.\n * Set to `false` to disable `maxWidth`.\n * @default 'sm'\n */\n maxWidth: PropTypes\n /* @typescript-to-proptypes-ignore */\n .oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),\n\n /**\n * Callback fired when the backdrop is clicked.\n * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.\n */\n onBackdropClick: PropTypes.func,\n\n /**\n * Callback fired when the component requests to be closed.\n *\n * @param {object} event The event source of the callback.\n * @param {string} reason Can be: `\"escapeKeyDown\"`, `\"backdropClick\"`.\n */\n onClose: PropTypes.func,\n\n /**\n * If `true`, the component is shown.\n */\n open: PropTypes.bool.isRequired,\n\n /**\n * The component used to render the body of the dialog.\n * @default Paper\n */\n PaperComponent: PropTypes.elementType,\n\n /**\n * Props applied to the [`Paper`](/material-ui/api/paper/) element.\n * @default {}\n */\n PaperProps: PropTypes.object,\n\n /**\n * Determine the container for scrolling the dialog.\n * @default 'paper'\n */\n scroll: PropTypes.oneOf(['body', 'paper']),\n\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n\n /**\n * The component used for the transition.\n * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.\n * @default Fade\n */\n TransitionComponent: PropTypes.elementType,\n\n /**\n * The duration for the transition, in milliseconds.\n * You may specify a single timeout for all transitions, or individually with an object.\n * @default {\n * enter: theme.transitions.duration.enteringScreen,\n * exit: theme.transitions.duration.leavingScreen,\n * }\n */\n transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({\n appear: PropTypes.number,\n enter: PropTypes.number,\n exit: PropTypes.number\n })]),\n\n /**\n * Props applied to the transition element.\n * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.\n */\n TransitionProps: PropTypes.object\n} : void 0;\nexport default Dialog;","import React from 'react'\r\nimport { useState } from 'react'\r\nimport MenuIcon from '@mui/icons-material/Menu';\r\nimport HelpOutlineIcon from '@mui/icons-material/HelpOutline';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport GitHubIcon from '@mui/icons-material/GitHub';\r\nimport MailOutlineIcon from '@mui/icons-material/MailOutline';\r\nimport Dialog from \"@mui/material/Dialog\";\r\n\r\nexport default function AppHeader() {\r\n\r\n\r\n const [openDialog, setOpenDialog] = useState(false);\r\n function handleClick() {\r\n // console.log('wroking')\r\n setOpenDialog(true)\r\n }\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n {mute ? : }\r\n \r\n
\r\n
setOpenSettings(a => !a)}>\r\n \r\n \r\n
\r\n\r\n
\r\n {/* onClick={() => setOpenDialog(false)} */}\r\n\r\n
\r\n
\r\n \r\n \r\n\r\n {!isPlaying || timer == 0 ? (\r\n \r\n \r\n \r\n\r\n ) : (\r\n \r\n \r\n \r\n\r\n )}\r\n \r\n \r\n \r\n \r\n {timer > 0 && (\r\n
\r\n \r\n \r\n )}\r\n \r\n setOpenDialog(true)}>\r\n handleInput(e)}>\r\n
\r\n \r\n })\r\n\r\n // onChange={handleDialog}\r\n return (\r\n \r\n {AudioOptions(audioSoundNames, volumes)}\r\n \r\n {/* */}\r\n
Coming soon...
\r\n \r\n )\r\n}\r\n\r\nexport default AudioSettings\r\n\r\n\r\n{/* \r\n handleChange(e)}>\r\n \r\n handleChange(e)}>\r\n \r\n handleChange(e)}>\r\n \r\n handleChange(e)}> */}","import React from 'react'\r\nimport { Howl, Howler } from 'howler';\r\nimport MediaPlayer from \"./MediaPlayer\"\r\nimport AudioSettings from \"./AudioSettings\"\r\nimport { useState, useEffect } from \"react\";\r\nimport { VolumeUpIcon, AdjustmentsIcon } from '@heroicons/react/outline'\r\nimport VolumeOffIcon from '@mui/icons-material/VolumeOff';\r\n\r\nimport gong from \"./components/audios/gong-start.mp3\";\r\nimport pop from \"./components/audios/pop.mp3\";\r\nimport bell from \"./components/audios/bell.mp3\";\r\nimport zenbell from \"./components/audios/zenbell.mp3\";\r\nimport soundbowl from \"./components/audios/soundbowl.mp3\";\r\nimport AmbientForest from \"./components/audios/ambient-forest.mp3\";\r\nimport AmbientRain from \"./components/audios/ambient-rain.mp3\";\r\nimport AmbientSpring from \"./components/audios/ambient-spring.mp3\";\r\n\r\nexport default function AppFooter({ timer, setTimer, setIsPlaying, isPlaying }) {\r\n \r\n const { Howl, Howler } = require('howler');\r\n const [currAmbient, setCurrAmbient] = useState(AmbientForest)\r\n const [mute, setMute] = useState(false)\r\n const [openSettings, setOpenSettings] = useState(false);\r\n const [volumes, setVolumes] = useState({\r\n startGong: 0.5,\r\n middleGong: 0.5,\r\n endGong: 0.5,\r\n ambient: 0.25\r\n })\r\n\r\n\r\n\r\n var soundAmbient = new Howl({\r\n src: currAmbient,\r\n volume: volumes.ambient,\r\n html5: true\r\n });\r\n\r\n// useEffect(() => {\r\n// console.log('curr amb', currAmbient)\r\n// var soundAmbient = new Howl({\r\n// src: currAmbient,\r\n// volume: volumes.ambient,\r\n// html5: true\r\n// });\r\n// }, [currAmbient])\r\n\r\n\r\n var soundPop = new Howl({\r\n src: pop,\r\n volume: 0.5\r\n });\r\n var endGong = new Howl({\r\n src: soundbowl,\r\n volume: volumes.endGong\r\n });\r\n \r\n var soundGong = new Howl({\r\n src: gong,\r\n volume: volumes.startGong,\r\n onend: function() {\r\n console.log('finish')\r\n \r\n },\r\n \r\n });\r\n const audios = {\r\n soundAmbient,\r\n soundGong,\r\n soundPop,\r\n endGong,\r\n currAmbient,\r\n setCurrAmbient,\r\n volumes,\r\n setVolumes\r\n }\r\n\r\n function muteAudio() {\r\n Howler.stop()\r\n setMute((prev) => !prev)\r\n }\r\n // console.log(AmbientRain)\r\n return (\r\n \r\n {openSettings && \r\n
}\r\n {/*
\r\n
\r\n {mute ? : }\r\n \r\n
setOpenSettings(a => !a)}>\r\n \r\n \r\n
*/}\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
{quote.quote}.
\r\n
—{quote.author}
\r\n
\r\n
\r\n \r\n
\r\n
Medizen
\r\n Relax to the max
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n {zPadFormat(hours) +\r\n \":\" +\r\n zPadFormat(minutes) +\r\n \":\" +\r\n zPadFormat(seconds)}\r\n
\r\n \r\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\n if (nextStatus === ENTERING) {\n this.performEnter(mounting);\n } else {\n this.performExit();\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(mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n\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(maybeNode);\n });\n return;\n }\n\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit() {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // 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(maybeNode);\n });\n return;\n }\n\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\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(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\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 var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n\n this.props.addEndListener(maybeNode, maybeNextCallback);\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 _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n\n return (\n /*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : function (propValue, key, componentName, location, propFullName, secret) {\n var value = propValue[key];\n return PropTypes.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);\n }\n }),\n\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 * By default the child component does not perform the enter transition when\n * it first mounts, regardless of the value of `in`. If you want this\n * behavior, set both `appear` and `in` to `true`.\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. Timeouts are still used as a fallback if provided.\n *\n * **Note**: when `nodeRef` prop is passed, `node` is not passed.\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 * **Note**: when `nodeRef` prop is passed, `node` is not passed.\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 * **Note**: when `nodeRef` prop is passed, `node` is not passed.\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 * **Note**: when `nodeRef` prop is passed, `node` is not passed.\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 * **Note**: when `nodeRef` prop is passed, `node` is not passed.\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 * **Note**: when `nodeRef` prop is passed, `node` is not passed.\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 * **Note**: when `nodeRef` prop is passed, `node` is not passed\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExited: PropTypes.func\n} : {}; // Name the function so it is clearer in the documentation\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 = UNMOUNTED;\nTransition.EXITED = EXITED;\nTransition.ENTERING = ENTERING;\nTransition.ENTERED = ENTERED;\nTransition.EXITING = EXITING;\nexport default Transition;","import setPrototypeOf from \"./setPrototypeOf.js\";\nexport default function _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n setPrototypeOf(subClass, superClass);\n}","import * as React from 'react';\nimport { useTheme as useThemeSystem } from '@mui/system';\nimport defaultTheme from './defaultTheme';\nexport default function useTheme() {\n const theme = useThemeSystem(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 const reflow = node => node.scrollTop;\nexport function getTransitionProps(props, options) {\n var _style$transitionDura, _style$transitionTimi;\n\n const {\n timeout,\n easing,\n style = {}\n } = props;\n return {\n duration: (_style$transitionDura = style.transitionDuration) != null ? _style$transitionDura : typeof timeout === 'number' ? timeout : timeout[options.mode] || 0,\n easing: (_style$transitionTimi = style.transitionTimingFunction) != null ? _style$transitionTimi : typeof easing === 'object' ? easing[options.mode] : easing,\n delay: style.transitionDelay\n };\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"addEndListener\", \"appear\", \"children\", \"easing\", \"in\", \"onEnter\", \"onEntered\", \"onEntering\", \"onExit\", \"onExited\", \"onExiting\", \"style\", \"timeout\", \"TransitionComponent\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { Transition } from 'react-transition-group';\nimport { elementAcceptingRef } from '@mui/utils';\nimport useTheme from '../styles/useTheme';\nimport { reflow, getTransitionProps } from '../transitions/utils';\nimport useForkRef from '../utils/useForkRef';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst styles = {\n entering: {\n opacity: 1\n },\n entered: {\n opacity: 1\n }\n};\n/**\n * The Fade transition is used by the [Modal](/material-ui/react-modal/) component.\n * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.\n */\n\nconst Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {\n const theme = useTheme();\n const defaultTimeout = {\n enter: theme.transitions.duration.enteringScreen,\n exit: theme.transitions.duration.leavingScreen\n };\n\n const {\n addEndListener,\n appear = true,\n children,\n easing,\n in: inProp,\n onEnter,\n onEntered,\n onEntering,\n onExit,\n onExited,\n onExiting,\n style,\n timeout = defaultTimeout,\n // eslint-disable-next-line react/prop-types\n TransitionComponent = Transition\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n\n const enableStrictModeCompat = true;\n const nodeRef = React.useRef(null);\n const foreignRef = useForkRef(children.ref, ref);\n const handleRef = useForkRef(nodeRef, foreignRef);\n\n const normalizedTransitionCallback = callback => maybeIsAppearing => {\n if (callback) {\n const node = nodeRef.current; // onEnterXxx and onExitXxx callbacks have a different arguments.length value.\n\n if (maybeIsAppearing === undefined) {\n callback(node);\n } else {\n callback(node, maybeIsAppearing);\n }\n }\n };\n\n const handleEntering = normalizedTransitionCallback(onEntering);\n const handleEnter = normalizedTransitionCallback((node, isAppearing) => {\n reflow(node); // So the animation always start from the start.\n\n const transitionProps = getTransitionProps({\n style,\n timeout,\n easing\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 const handleEntered = normalizedTransitionCallback(onEntered);\n const handleExiting = normalizedTransitionCallback(onExiting);\n const handleExit = normalizedTransitionCallback(node => {\n const transitionProps = getTransitionProps({\n style,\n timeout,\n easing\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 const handleExited = normalizedTransitionCallback(onExited);\n\n const handleAddEndListener = next => {\n if (addEndListener) {\n // Old call signature before `react-transition-group` implemented `nodeRef`\n addEndListener(nodeRef.current, next);\n }\n };\n\n return /*#__PURE__*/_jsx(TransitionComponent, _extends({\n appear: appear,\n in: inProp,\n nodeRef: enableStrictModeCompat ? nodeRef : undefined,\n onEnter: handleEnter,\n onEntered: handleEntered,\n onEntering: handleEntering,\n onExit: handleExit,\n onExited: handleExited,\n onExiting: handleExiting,\n addEndListener: handleAddEndListener,\n timeout: timeout\n }, other, {\n children: (state, childProps) => {\n return /*#__PURE__*/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 }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Fade.propTypes\n/* remove-proptypes */\n= {\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 * Add a custom transition end trigger. Called with the transitioning DOM\n * 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 addEndListener: PropTypes.func,\n\n /**\n * Perform the enter transition when it first mounts if `in` is also `true`.\n * Set this to `false` to disable this behavior.\n * @default true\n */\n appear: PropTypes.bool,\n\n /**\n * A single child content element.\n */\n children: elementAcceptingRef.isRequired,\n\n /**\n * The transition timing function.\n * You may specify a single easing or a object containing enter and exit values.\n */\n easing: PropTypes.oneOfType([PropTypes.shape({\n enter: PropTypes.string,\n exit: PropTypes.string\n }), PropTypes.string]),\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 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 * @default {\n * enter: theme.transitions.duration.enteringScreen,\n * exit: theme.transitions.duration.leavingScreen,\n * }\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 { generateUtilityClass, generateUtilityClasses } from '@mui/base';\nexport function getBackdropUtilityClass(slot) {\n return generateUtilityClass('MuiBackdrop', slot);\n}\nconst backdropClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);\nexport default backdropClasses;","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"children\", \"component\", \"components\", \"componentsProps\", \"className\", \"invisible\", \"open\", \"transitionDuration\", \"TransitionComponent\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { unstable_composeClasses as composeClasses } from '@mui/base';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport Fade from '../Fade';\nimport { getBackdropUtilityClass } from './backdropClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n invisible\n } = ownerState;\n const slots = {\n root: ['root', invisible && 'invisible']\n };\n return composeClasses(slots, getBackdropUtilityClass, classes);\n};\n\nconst BackdropRoot = styled('div', {\n name: 'MuiBackdrop',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, ownerState.invisible && styles.invisible];\n }\n})(({\n ownerState\n}) => _extends({\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}, ownerState.invisible && {\n backgroundColor: 'transparent'\n}));\nconst Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {\n var _components$Root, _componentsProps$root;\n\n const props = useThemeProps({\n props: inProps,\n name: 'MuiBackdrop'\n });\n\n const {\n children,\n component = 'div',\n components = {},\n componentsProps = {},\n className,\n invisible = false,\n open,\n transitionDuration,\n // eslint-disable-next-line react/prop-types\n TransitionComponent = Fade\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n\n const ownerState = _extends({}, props, {\n component,\n invisible\n });\n\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(TransitionComponent, _extends({\n in: open,\n timeout: transitionDuration\n }, other, {\n children: /*#__PURE__*/_jsx(BackdropRoot, {\n \"aria-hidden\": true,\n as: (_components$Root = components.Root) != null ? _components$Root : component,\n className: clsx(classes.root, className),\n ownerState: _extends({}, ownerState, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState),\n classes: classes,\n ref: ref,\n children: children\n })\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Backdrop.propTypes\n/* remove-proptypes */\n= {\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 */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes.elementType,\n\n /**\n * The components used for each slot inside the Backdrop.\n * Either a string to use a HTML element or a component.\n * @default {}\n */\n components: PropTypes.shape({\n Root: PropTypes.elementType\n }),\n\n /**\n * The props used for each slot inside the Backdrop.\n * @default {}\n */\n componentsProps: PropTypes.shape({\n root: PropTypes.object\n }),\n\n /**\n * If `true`, the backdrop is invisible.\n * It can be used when rendering a popover or a custom select component.\n * @default false\n */\n invisible: PropTypes.bool,\n\n /**\n * If `true`, the component is shown.\n */\n open: PropTypes.bool.isRequired,\n\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, 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} : void 0;\nexport default Backdrop;","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"BackdropComponent\", \"closeAfterTransition\", \"children\", \"components\", \"componentsProps\", \"disableAutoFocus\", \"disableEnforceFocus\", \"disableEscapeKeyDown\", \"disablePortal\", \"disableRestoreFocus\", \"disableScrollLock\", \"hideBackdrop\", \"keepMounted\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { isHostComponent } from '@mui/base';\nimport { elementAcceptingRef, HTMLElementType } from '@mui/utils';\nimport ModalUnstyled, { modalUnstyledClasses } from '@mui/base/ModalUnstyled';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport Backdrop from '../Backdrop';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const modalClasses = modalUnstyledClasses;\n\nconst extendUtilityClasses = ownerState => {\n return ownerState.classes;\n};\n\nconst ModalRoot = styled('div', {\n name: 'MuiModal',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, !ownerState.open && ownerState.exited && styles.hidden];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n position: 'fixed',\n zIndex: (theme.vars || theme).zIndex.modal,\n right: 0,\n bottom: 0,\n top: 0,\n left: 0\n}, !ownerState.open && ownerState.exited && {\n visibility: 'hidden'\n}));\nconst ModalBackdrop = styled(Backdrop, {\n name: 'MuiModal',\n slot: 'Backdrop',\n overridesResolver: (props, styles) => {\n return styles.backdrop;\n }\n})({\n zIndex: -1\n});\n/**\n * Modal is a lower-level construct that is leveraged by the following components:\n *\n * - [Dialog](/material-ui/api/dialog/)\n * - [Drawer](/material-ui/api/drawer/)\n * - [Menu](/material-ui/api/menu/)\n * - [Popover](/material-ui/api/popover/)\n *\n * If you are creating a modal dialog, you probably want to use the [Dialog](/material-ui/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\nconst Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {\n var _componentsProps$root;\n\n const props = useThemeProps({\n name: 'MuiModal',\n props: inProps\n });\n\n const {\n BackdropComponent = ModalBackdrop,\n closeAfterTransition = false,\n children,\n components = {},\n componentsProps = {},\n disableAutoFocus = false,\n disableEnforceFocus = false,\n disableEscapeKeyDown = false,\n disablePortal = false,\n disableRestoreFocus = false,\n disableScrollLock = false,\n hideBackdrop = false,\n keepMounted = false\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n\n const [exited, setExited] = React.useState(true);\n const commonProps = {\n closeAfterTransition,\n disableAutoFocus,\n disableEnforceFocus,\n disableEscapeKeyDown,\n disablePortal,\n disableRestoreFocus,\n disableScrollLock,\n hideBackdrop,\n keepMounted\n };\n\n const ownerState = _extends({}, props, commonProps, {\n exited\n });\n\n const classes = extendUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(ModalUnstyled, _extends({\n components: _extends({\n Root: ModalRoot\n }, components),\n componentsProps: {\n root: _extends({}, componentsProps.root, (!components.Root || !isHostComponent(components.Root)) && {\n ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState)\n })\n },\n BackdropComponent: BackdropComponent,\n onTransitionEnter: () => setExited(false),\n onTransitionExited: () => setExited(true),\n ref: ref\n }, other, {\n classes: classes\n }, commonProps, {\n children: children\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Modal.propTypes\n/* remove-proptypes */\n= {\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 backdrop component. This prop enables custom backdrop rendering.\n * @default styled(Backdrop, {\n * name: 'MuiModal',\n * slot: 'Backdrop',\n * overridesResolver: (props, styles) => {\n * return styles.backdrop;\n * },\n * })({\n * zIndex: -1,\n * })\n */\n BackdropComponent: PropTypes.elementType,\n\n /**\n * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.\n */\n BackdropProps: PropTypes.object,\n\n /**\n * A single child content element.\n */\n children: elementAcceptingRef.isRequired,\n\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n\n /**\n * When set to true the Modal waits until a nested Transition is completed before closing.\n * @default false\n */\n closeAfterTransition: PropTypes.bool,\n\n /**\n * The components used for each slot inside the Modal.\n * Either a string to use a HTML element or a component.\n * @default {}\n */\n components: PropTypes.shape({\n Root: PropTypes.elementType\n }),\n\n /**\n * The props used for each slot inside the Modal.\n * @default {}\n */\n componentsProps: PropTypes.shape({\n root: PropTypes.object\n }),\n\n /**\n * An HTML element or function that returns one.\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.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 * @default false\n */\n disableAutoFocus: 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 * @default false\n */\n disableEnforceFocus: PropTypes.bool,\n\n /**\n * If `true`, hitting escape will not fire the `onClose` callback.\n * @default false\n */\n disableEscapeKeyDown: PropTypes.bool,\n\n /**\n * The `children` will be under the DOM hierarchy of the parent component.\n * @default false\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 or unmounted.\n * @default false\n */\n disableRestoreFocus: PropTypes.bool,\n\n /**\n * Disable the scroll lock behavior.\n * @default false\n */\n disableScrollLock: PropTypes.bool,\n\n /**\n * If `true`, the backdrop is not rendered.\n * @default false\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 * @default false\n */\n keepMounted: PropTypes.bool,\n\n /**\n * Callback fired when the backdrop is clicked.\n * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.\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 * If `true`, the component is shown.\n */\n open: PropTypes.bool.isRequired,\n\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\nexport default Modal;","import { generateUtilityClass, generateUtilityClasses } from '@mui/base';\nexport function getPaperUtilityClass(slot) {\n return generateUtilityClass('MuiPaper', slot);\n}\nconst paperClasses = generateUtilityClasses('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);\nexport default paperClasses;","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"className\", \"component\", \"elevation\", \"square\", \"variant\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { chainPropTypes, integerPropType } from '@mui/utils';\nimport { unstable_composeClasses as composeClasses } from '@mui/base';\nimport { alpha } from '@mui/system';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport useTheme from '../styles/useTheme';\nimport { getPaperUtilityClass } from './paperClasses'; // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61\n\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n\nconst getOverlayAlpha = elevation => {\n let alphaValue;\n\n if (elevation < 1) {\n alphaValue = 5.11916 * elevation ** 2;\n } else {\n alphaValue = 4.5 * Math.log(elevation + 1) + 2;\n }\n\n return (alphaValue / 100).toFixed(2);\n};\n\nconst useUtilityClasses = ownerState => {\n const {\n square,\n elevation,\n variant,\n classes\n } = ownerState;\n const slots = {\n root: ['root', variant, !square && 'rounded', variant === 'elevation' && `elevation${elevation}`]\n };\n return composeClasses(slots, getPaperUtilityClass, classes);\n};\n\nconst PaperRoot = styled('div', {\n name: 'MuiPaper',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, styles[ownerState.variant], !ownerState.square && styles.rounded, ownerState.variant === 'elevation' && styles[`elevation${ownerState.elevation}`]];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n backgroundColor: theme.palette.background.paper,\n color: theme.palette.text.primary,\n transition: theme.transitions.create('box-shadow')\n}, !ownerState.square && {\n borderRadius: theme.shape.borderRadius\n}, ownerState.variant === 'outlined' && {\n border: `1px solid ${theme.palette.divider}`\n}, ownerState.variant === 'elevation' && _extends({\n boxShadow: theme.shadows[ownerState.elevation]\n}, theme.palette.mode === 'dark' && {\n backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`\n})));\nconst Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiPaper'\n });\n\n const {\n className,\n component = 'div',\n elevation = 1,\n square = false,\n variant = 'elevation'\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n\n const ownerState = _extends({}, props, {\n component,\n elevation,\n square,\n variant\n });\n\n const classes = useUtilityClasses(ownerState);\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const theme = useTheme();\n\n if (theme.shadows[elevation] === undefined) {\n console.error([`MUI: The elevation provided is not available in the theme.`, `Please make sure that \\`theme.shadows[${elevation}]\\` is defined.`].join('\\n'));\n }\n }\n\n return /*#__PURE__*/_jsx(PaperRoot, _extends({\n as: component,\n ownerState: ownerState,\n className: clsx(classes.root, className),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? Paper.propTypes\n/* remove-proptypes */\n= {\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 */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes.elementType,\n\n /**\n * Shadow depth, corresponds to `dp` in the spec.\n * It accepts values between 0 and 24 inclusive.\n * @default 1\n */\n elevation: chainPropTypes(integerPropType, props => {\n const {\n elevation,\n variant\n } = props;\n\n if (elevation > 0 && variant === 'outlined') {\n return new Error(`MUI: Combining \\`elevation={${elevation}}\\` with \\`variant=\"${variant}\"\\` has no effect. Either use \\`elevation={0}\\` or use a different \\`variant\\`.`);\n }\n\n return null;\n }),\n\n /**\n * If `true`, rounded corners are disabled.\n * @default false\n */\n square: PropTypes.bool,\n\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n\n /**\n * The variant to use.\n * @default 'elevation'\n */\n variant: PropTypes\n /* @typescript-to-proptypes-ignore */\n .oneOfType([PropTypes.oneOf(['elevation', 'outlined']), PropTypes.string])\n} : void 0;\nexport default Paper;","import { generateUtilityClass, generateUtilityClasses } from '@mui/base';\nexport function getDialogUtilityClass(slot) {\n return generateUtilityClass('MuiDialog', slot);\n}\nconst dialogClasses = generateUtilityClasses('MuiDialog', ['root', 'scrollPaper', 'scrollBody', 'container', 'paper', 'paperScrollPaper', 'paperScrollBody', 'paperWidthFalse', 'paperWidthXs', 'paperWidthSm', 'paperWidthMd', 'paperWidthLg', 'paperWidthXl', 'paperFullWidth', 'paperFullScreen']);\nexport default dialogClasses;","import { createContext } from 'react';\nconst DialogContext = /*#__PURE__*/createContext({});\n\nif (process.env.NODE_ENV !== 'production') {\n DialogContext.displayName = 'DialogContext';\n}\n\nexport default DialogContext;","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"aria-describedby\", \"aria-labelledby\", \"BackdropComponent\", \"BackdropProps\", \"children\", \"className\", \"disableEscapeKeyDown\", \"fullScreen\", \"fullWidth\", \"maxWidth\", \"onBackdropClick\", \"onClose\", \"open\", \"PaperComponent\", \"PaperProps\", \"scroll\", \"TransitionComponent\", \"transitionDuration\", \"TransitionProps\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { unstable_composeClasses as composeClasses } from '@mui/base';\nimport { unstable_useId as useId } from '@mui/utils';\nimport capitalize from '../utils/capitalize';\nimport Modal from '../Modal';\nimport Fade from '../Fade';\nimport Paper from '../Paper';\nimport useThemeProps from '../styles/useThemeProps';\nimport styled from '../styles/styled';\nimport dialogClasses, { getDialogUtilityClass } from './dialogClasses';\nimport DialogContext from './DialogContext';\nimport Backdrop from '../Backdrop';\nimport useTheme from '../styles/useTheme';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DialogBackdrop = styled(Backdrop, {\n name: 'MuiDialog',\n slot: 'Backdrop',\n overrides: (props, styles) => styles.backdrop\n})({\n // Improve scrollable dialog support.\n zIndex: -1\n});\n\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n scroll,\n maxWidth,\n fullWidth,\n fullScreen\n } = ownerState;\n const slots = {\n root: ['root'],\n container: ['container', `scroll${capitalize(scroll)}`],\n paper: ['paper', `paperScroll${capitalize(scroll)}`, `paperWidth${capitalize(String(maxWidth))}`, fullWidth && 'paperFullWidth', fullScreen && 'paperFullScreen']\n };\n return composeClasses(slots, getDialogUtilityClass, classes);\n};\n\nconst DialogRoot = styled(Modal, {\n name: 'MuiDialog',\n slot: 'Root',\n overridesResolver: (props, styles) => styles.root\n})({\n '@media print': {\n // Use !important to override the Modal inline-style.\n position: 'absolute !important'\n }\n});\nconst DialogContainer = styled('div', {\n name: 'MuiDialog',\n slot: 'Container',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.container, styles[`scroll${capitalize(ownerState.scroll)}`]];\n }\n})(({\n ownerState\n}) => _extends({\n height: '100%',\n '@media print': {\n height: 'auto'\n },\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0\n}, ownerState.scroll === 'paper' && {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center'\n}, ownerState.scroll === 'body' && {\n overflowY: 'auto',\n overflowX: 'hidden',\n textAlign: 'center',\n '&:after': {\n content: '\"\"',\n display: 'inline-block',\n verticalAlign: 'middle',\n height: '100%',\n width: '0'\n }\n}));\nconst DialogPaper = styled(Paper, {\n name: 'MuiDialog',\n slot: 'Paper',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.paper, styles[`scrollPaper${capitalize(ownerState.scroll)}`], styles[`paperWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fullWidth && styles.paperFullWidth, ownerState.fullScreen && styles.paperFullScreen];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n margin: 32,\n position: 'relative',\n overflowY: 'auto',\n // Fix IE11 issue, to remove at some point.\n '@media print': {\n overflowY: 'visible',\n boxShadow: 'none'\n }\n}, ownerState.scroll === 'paper' && {\n display: 'flex',\n flexDirection: 'column',\n maxHeight: 'calc(100% - 64px)'\n}, ownerState.scroll === 'body' && {\n display: 'inline-block',\n verticalAlign: 'middle',\n textAlign: 'left' // 'initial' doesn't work on IE11\n\n}, !ownerState.maxWidth && {\n maxWidth: 'calc(100% - 64px)'\n}, ownerState.maxWidth === 'xs' && {\n maxWidth: theme.breakpoints.unit === 'px' ? Math.max(theme.breakpoints.values.xs, 444) : `${theme.breakpoints.values.xs}${theme.breakpoints.unit}`,\n [`&.${dialogClasses.paperScrollBody}`]: {\n [theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2)]: {\n maxWidth: 'calc(100% - 64px)'\n }\n }\n}, ownerState.maxWidth !== 'xs' && {\n maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`,\n [`&.${dialogClasses.paperScrollBody}`]: {\n [theme.breakpoints.down(theme.breakpoints.values[ownerState.maxWidth] + 32 * 2)]: {\n maxWidth: 'calc(100% - 64px)'\n }\n }\n}, ownerState.fullWidth && {\n width: 'calc(100% - 64px)'\n}, ownerState.fullScreen && {\n margin: 0,\n width: '100%',\n maxWidth: '100%',\n height: '100%',\n maxHeight: 'none',\n borderRadius: 0,\n [`&.${dialogClasses.paperScrollBody}`]: {\n margin: 0,\n maxWidth: '100%'\n }\n}));\n/**\n * Dialogs are overlaid modal paper based components with a backdrop.\n */\n\nconst Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiDialog'\n });\n const theme = useTheme();\n const defaultTransitionDuration = {\n enter: theme.transitions.duration.enteringScreen,\n exit: theme.transitions.duration.leavingScreen\n };\n\n const {\n 'aria-describedby': ariaDescribedby,\n 'aria-labelledby': ariaLabelledbyProp,\n BackdropComponent,\n BackdropProps,\n children,\n className,\n disableEscapeKeyDown = false,\n fullScreen = false,\n fullWidth = false,\n maxWidth = 'sm',\n onBackdropClick,\n onClose,\n open,\n PaperComponent = Paper,\n PaperProps = {},\n scroll = 'paper',\n TransitionComponent = Fade,\n transitionDuration = defaultTransitionDuration,\n TransitionProps\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n\n const ownerState = _extends({}, props, {\n disableEscapeKeyDown,\n fullScreen,\n fullWidth,\n maxWidth,\n scroll\n });\n\n const classes = useUtilityClasses(ownerState);\n const backdropClick = React.useRef();\n\n const handleMouseDown = event => {\n // We don't want to close the dialog when clicking the dialog content.\n // Make sure the event starts and ends on the same DOM element.\n backdropClick.current = event.target === event.currentTarget;\n };\n\n const handleBackdropClick = event => {\n // Ignore the events not coming from the \"backdrop\".\n if (!backdropClick.current) {\n return;\n }\n\n backdropClick.current = null;\n\n if (onBackdropClick) {\n onBackdropClick(event);\n }\n\n if (onClose) {\n onClose(event, 'backdropClick');\n }\n };\n\n const ariaLabelledby = useId(ariaLabelledbyProp);\n const dialogContextValue = React.useMemo(() => {\n return {\n titleId: ariaLabelledby\n };\n }, [ariaLabelledby]);\n return /*#__PURE__*/_jsx(DialogRoot, _extends({\n className: clsx(classes.root, className),\n BackdropProps: _extends({\n transitionDuration,\n as: BackdropComponent\n }, BackdropProps),\n closeAfterTransition: true,\n BackdropComponent: DialogBackdrop,\n disableEscapeKeyDown: disableEscapeKeyDown,\n onClose: onClose,\n open: open,\n ref: ref,\n onClick: handleBackdropClick,\n ownerState: ownerState\n }, other, {\n children: /*#__PURE__*/_jsx(TransitionComponent, _extends({\n appear: true,\n in: open,\n timeout: transitionDuration,\n role: \"presentation\"\n }, TransitionProps, {\n children: /*#__PURE__*/_jsx(DialogContainer, {\n className: clsx(classes.container),\n onMouseDown: handleMouseDown,\n ownerState: ownerState,\n children: /*#__PURE__*/_jsx(DialogPaper, _extends({\n as: PaperComponent,\n elevation: 24,\n role: \"dialog\",\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby\n }, PaperProps, {\n className: clsx(classes.paper, PaperProps.className),\n ownerState: ownerState,\n children: /*#__PURE__*/_jsx(DialogContext.Provider, {\n value: dialogContextValue,\n children: children\n })\n }))\n })\n }))\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Dialog.propTypes\n/* remove-proptypes */\n= {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The id(s) of the element(s) that describe the dialog.\n */\n 'aria-describedby': PropTypes.string,\n\n /**\n * The id(s) of the element(s) that label the dialog.\n */\n 'aria-labelledby': PropTypes.string,\n\n /**\n * A backdrop component. This prop enables custom backdrop rendering.\n * @default styled(Backdrop, {\n * name: 'MuiModal',\n * slot: 'Backdrop',\n * overridesResolver: (props, styles) => {\n * return styles.backdrop;\n * },\n * })({\n * zIndex: -1,\n * })\n */\n BackdropComponent: PropTypes.elementType,\n\n /**\n * @ignore\n */\n BackdropProps: PropTypes.object,\n\n /**\n * Dialog children, usually the included sub-components.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * If `true`, hitting escape will not fire the `onClose` callback.\n * @default false\n */\n disableEscapeKeyDown: PropTypes.bool,\n\n /**\n * If `true`, the dialog is full-screen.\n * @default false\n */\n fullScreen: PropTypes.bool,\n\n /**\n * If `true`, the dialog stretches to `maxWidth`.\n *\n * Notice that the dialog width grow is limited by the default margin.\n * @default false\n */\n fullWidth: PropTypes.bool,\n\n /**\n * Determine the max-width of the dialog.\n * The dialog width grows with the size of the screen.\n * Set to `false` to disable `maxWidth`.\n * @default 'sm'\n */\n maxWidth: PropTypes\n /* @typescript-to-proptypes-ignore */\n .oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),\n\n /**\n * Callback fired when the backdrop is clicked.\n * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.\n */\n onBackdropClick: PropTypes.func,\n\n /**\n * Callback fired when the component requests to be closed.\n *\n * @param {object} event The event source of the callback.\n * @param {string} reason Can be: `\"escapeKeyDown\"`, `\"backdropClick\"`.\n */\n onClose: PropTypes.func,\n\n /**\n * If `true`, the component is shown.\n */\n open: PropTypes.bool.isRequired,\n\n /**\n * The component used to render the body of the dialog.\n * @default Paper\n */\n PaperComponent: PropTypes.elementType,\n\n /**\n * Props applied to the [`Paper`](/material-ui/api/paper/) element.\n * @default {}\n */\n PaperProps: PropTypes.object,\n\n /**\n * Determine the container for scrolling the dialog.\n * @default 'paper'\n */\n scroll: PropTypes.oneOf(['body', 'paper']),\n\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n\n /**\n * The component used for the transition.\n * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.\n * @default Fade\n */\n TransitionComponent: PropTypes.elementType,\n\n /**\n * The duration for the transition, in milliseconds.\n * You may specify a single timeout for all transitions, or individually with an object.\n * @default {\n * enter: theme.transitions.duration.enteringScreen,\n * exit: theme.transitions.duration.leavingScreen,\n * }\n */\n transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({\n appear: PropTypes.number,\n enter: PropTypes.number,\n exit: PropTypes.number\n })]),\n\n /**\n * Props applied to the transition element.\n * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.\n */\n TransitionProps: PropTypes.object\n} : void 0;\nexport default Dialog;","import React from 'react'\r\nimport { useState } from 'react'\r\nimport MenuIcon from '@mui/icons-material/Menu';\r\nimport HelpOutlineIcon from '@mui/icons-material/HelpOutline';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport GitHubIcon from '@mui/icons-material/GitHub';\r\nimport MailOutlineIcon from '@mui/icons-material/MailOutline';\r\nimport Dialog from \"@mui/material/Dialog\";\r\n\r\nexport default function AppHeader() {\r\n\r\n\r\n const [openDialog, setOpenDialog] = useState(false);\r\n function handleClick() {\r\n // console.log('wroking')\r\n setOpenDialog(true)\r\n }\r\n return (\r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n {/* onClick={() => setOpenDialog(false)} */}\r\n\r\n
\r\n
\r\n \r\n \r\n\r\n {!isPlaying || timer == 0 ? (\r\n \r\n \r\n \r\n\r\n ) : (\r\n \r\n \r\n \r\n\r\n )}\r\n \r\n \r\n \r\n \r\n {timer > 0 && (\r\n
\r\n \r\n \r\n )}\r\n \r\n setOpenDialog(true)}>\r\n handleInput(e)}>\r\n
\r\n \r\n })\r\n\r\n // onChange={handleDialog}\r\n return (\r\n \r\n {AudioOptions(audioSoundNames, volumes)}\r\n \r\n {/* */}\r\n
Coming soon...
\r\n \r\n )\r\n}\r\n\r\nexport default AudioSettings\r\n\r\n\r\n{/* \r\n handleChange(e)}>\r\n \r\n handleChange(e)}>\r\n \r\n handleChange(e)}>\r\n \r\n handleChange(e)}> */}","import * as React from \"react\";\n\nfunction AdjustmentsIcon(props, svgRef) {\n return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n xmlns: \"http://www.w3.org/2000/svg\",\n fill: \"none\",\n viewBox: \"0 0 24 24\",\n strokeWidth: 2,\n stroke: \"currentColor\",\n \"aria-hidden\": \"true\",\n ref: svgRef\n }, props), /*#__PURE__*/React.createElement(\"path\", {\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\",\n d: \"M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4\"\n }));\n}\n\nconst ForwardRef = React.forwardRef(AdjustmentsIcon);\nexport default ForwardRef;","import React from 'react'\r\nimport { Howl, Howler } from 'howler';\r\nimport MediaPlayer from \"./MediaPlayer\"\r\nimport AudioSettings from \"./AudioSettings\"\r\nimport { useState, useEffect } from \"react\";\r\nimport { VolumeUpIcon, AdjustmentsIcon } from '@heroicons/react/outline'\r\nimport VolumeOffIcon from '@mui/icons-material/VolumeOff';\r\n\r\nimport gong from \"./components/audios/gong-start.mp3\";\r\nimport pop from \"./components/audios/pop.mp3\";\r\nimport bell from \"./components/audios/bell.mp3\";\r\nimport zenbell from \"./components/audios/zenbell.mp3\";\r\nimport soundbowl from \"./components/audios/soundbowl.mp3\";\r\nimport AmbientForest from \"./components/audios/ambient-forest.mp3\";\r\nimport AmbientRain from \"./components/audios/ambient-rain.mp3\";\r\nimport AmbientSpring from \"./components/audios/ambient-spring.mp3\";\r\n\r\nexport default function AppFooter({ timer, setTimer, setIsPlaying, isPlaying }) {\r\n \r\n const { Howl, Howler } = require('howler');\r\n const [currAmbient, setCurrAmbient] = useState(AmbientForest)\r\n const [mute, setMute] = useState(false)\r\n const [openSettings, setOpenSettings] = useState(false);\r\n const [volumes, setVolumes] = useState({\r\n startGong: 0.5,\r\n middleGong: 0.5,\r\n endGong: 0.5,\r\n ambient: 0.25\r\n })\r\n\r\n\r\n\r\n var soundAmbient = new Howl({\r\n src: currAmbient,\r\n volume: volumes.ambient,\r\n html5: true\r\n });\r\n\r\n// useEffect(() => {\r\n// console.log('curr amb', currAmbient)\r\n// var soundAmbient = new Howl({\r\n// src: currAmbient,\r\n// volume: volumes.ambient,\r\n// html5: true\r\n// });\r\n// }, [currAmbient])\r\n\r\n\r\n var soundPop = new Howl({\r\n src: pop,\r\n volume: 0.5\r\n });\r\n var endGong = new Howl({\r\n src: soundbowl,\r\n volume: volumes.endGong\r\n });\r\n \r\n var soundGong = new Howl({\r\n src: gong,\r\n volume: volumes.startGong,\r\n onend: function() {\r\n console.log('finish')\r\n \r\n },\r\n \r\n });\r\n const audios = {\r\n soundAmbient,\r\n soundGong,\r\n soundPop,\r\n endGong,\r\n currAmbient,\r\n setCurrAmbient,\r\n volumes,\r\n setVolumes\r\n }\r\n\r\n function muteAudio() {\r\n Howler.stop()\r\n setMute((prev) => !prev)\r\n }\r\n // console.log(AmbientRain)\r\n return (\r\n \r\n {openSettings && \r\n
}\r\n
\r\n
\r\n {mute ? : }\r\n \r\n
setOpenSettings(a => !a)}>\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n