;\n}\n\nexport const withUtils = () => (Component: React.ComponentType
) => {\n const WithUtils: React.SFC> = props => {\n const utils = useUtils();\n return ;\n };\n\n WithUtils.displayName = `WithUtils(${Component.displayName || Component.name})`;\n return WithUtils;\n};\n","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport Day from './Day';\nimport DayWrapper from './DayWrapper';\nimport CalendarHeader from './CalendarHeader';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport SlideTransition, { SlideDirection } from './SlideTransition';\nimport { Theme } from '@material-ui/core/styles';\nimport { VariantContext } from '../../wrappers/Wrapper';\nimport { MaterialUiPickersDate } from '../../typings/date';\nimport { runKeyHandler } from '../../_shared/hooks/useKeyDown';\nimport { IconButtonProps } from '@material-ui/core/IconButton';\nimport { withStyles, WithStyles } from '@material-ui/core/styles';\nimport { findClosestEnabledDate } from '../../_helpers/date-utils';\nimport { withUtils, WithUtilsProps } from '../../_shared/WithUtils';\n\nexport interface OutterCalendarProps {\n /** Left arrow icon */\n leftArrowIcon?: React.ReactNode;\n /** Right arrow icon */\n rightArrowIcon?: React.ReactNode;\n /** Custom renderer for day @DateIOType */\n renderDay?: (\n day: MaterialUiPickersDate,\n selectedDate: MaterialUiPickersDate,\n dayInCurrentMonth: boolean,\n dayComponent: JSX.Element\n ) => JSX.Element;\n /**\n * Enables keyboard listener for moving between days in calendar\n * @default true\n */\n allowKeyboardControl?: boolean;\n /**\n * Props to pass to left arrow button\n * @type {Partial}\n */\n leftArrowButtonProps?: Partial;\n /**\n * Props to pass to right arrow button\n * @type {Partial}\n */\n rightArrowButtonProps?: Partial;\n /** Disable specific date @DateIOType */\n shouldDisableDate?: (day: MaterialUiPickersDate) => boolean;\n /** Callback firing on month change. Return promise to render spinner till it will not be resolved @DateIOType */\n onMonthChange?: (date: MaterialUiPickersDate) => void | Promise;\n /** Custom loading indicator */\n loadingIndicator?: JSX.Element;\n}\n\nexport interface CalendarProps\n extends OutterCalendarProps,\n WithUtilsProps,\n WithStyles {\n /** Calendar Date @DateIOType */\n date: MaterialUiPickersDate;\n /** Calendar onChange */\n onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;\n /** Min date @DateIOType */\n minDate?: MaterialUiPickersDate;\n /** Max date @DateIOType */\n maxDate?: MaterialUiPickersDate;\n /** Disable past dates */\n disablePast?: boolean;\n /** Disable future dates */\n disableFuture?: boolean;\n}\n\nexport interface CalendarState {\n slideDirection: SlideDirection;\n currentMonth: MaterialUiPickersDate;\n lastDate?: MaterialUiPickersDate;\n loadingQueue: number;\n}\n\nconst KeyDownListener = ({ onKeyDown }: { onKeyDown: (e: KeyboardEvent) => void }) => {\n React.useEffect(() => {\n window.addEventListener('keydown', onKeyDown);\n return () => {\n window.removeEventListener('keydown', onKeyDown);\n };\n }, [onKeyDown]);\n\n return null;\n};\n\nexport class Calendar extends React.Component {\n static contextType = VariantContext;\n static propTypes: any = {\n renderDay: PropTypes.func,\n shouldDisableDate: PropTypes.func,\n allowKeyboardControl: PropTypes.bool,\n };\n\n static defaultProps: Partial = {\n minDate: new Date('1900-01-01'),\n maxDate: new Date('2100-01-01'),\n disablePast: false,\n disableFuture: false,\n allowKeyboardControl: true,\n };\n\n static getDerivedStateFromProps(nextProps: CalendarProps, state: CalendarState) {\n const { utils, date: nextDate } = nextProps;\n\n if (!utils.isEqual(nextDate, state.lastDate)) {\n const nextMonth = utils.getMonth(nextDate);\n const lastDate = state.lastDate || nextDate;\n const lastMonth = utils.getMonth(lastDate);\n\n return {\n lastDate: nextDate,\n currentMonth: nextProps.utils.startOfMonth(nextDate),\n // prettier-ignore\n slideDirection: nextMonth === lastMonth\n ? state.slideDirection\n : utils.isAfterDay(nextDate, lastDate)\n ? 'left'\n : 'right'\n };\n }\n\n return null;\n }\n\n state: CalendarState = {\n slideDirection: 'left',\n currentMonth: this.props.utils.startOfMonth(this.props.date),\n loadingQueue: 0,\n };\n\n componentDidMount() {\n const { date, minDate, maxDate, utils, disablePast, disableFuture } = this.props;\n\n if (this.shouldDisableDate(date)) {\n const closestEnabledDate = findClosestEnabledDate({\n date,\n utils,\n minDate: utils.date(minDate),\n maxDate: utils.date(maxDate),\n disablePast: Boolean(disablePast),\n disableFuture: Boolean(disableFuture),\n shouldDisableDate: this.shouldDisableDate,\n });\n\n this.handleDaySelect(closestEnabledDate, false);\n }\n }\n\n private pushToLoadingQueue = () => {\n const loadingQueue = this.state.loadingQueue + 1;\n this.setState({ loadingQueue });\n };\n\n private popFromLoadingQueue = () => {\n let loadingQueue = this.state.loadingQueue;\n loadingQueue = loadingQueue <= 0 ? 0 : loadingQueue - 1;\n this.setState({ loadingQueue });\n };\n\n handleChangeMonth = (newMonth: MaterialUiPickersDate, slideDirection: SlideDirection) => {\n this.setState({ currentMonth: newMonth, slideDirection });\n\n if (this.props.onMonthChange) {\n const returnVal = this.props.onMonthChange(newMonth);\n if (returnVal) {\n this.pushToLoadingQueue();\n returnVal.then(() => {\n this.popFromLoadingQueue();\n });\n }\n }\n };\n\n validateMinMaxDate = (day: MaterialUiPickersDate) => {\n const { minDate, maxDate, utils, disableFuture, disablePast } = this.props;\n const now = utils.date();\n\n return Boolean(\n (disableFuture && utils.isAfterDay(day, now)) ||\n (disablePast && utils.isBeforeDay(day, now)) ||\n (minDate && utils.isBeforeDay(day, utils.date(minDate))) ||\n (maxDate && utils.isAfterDay(day, utils.date(maxDate)))\n );\n };\n\n shouldDisablePrevMonth = () => {\n const { utils, disablePast, minDate } = this.props;\n\n const now = utils.date();\n const firstEnabledMonth = utils.startOfMonth(\n disablePast && utils.isAfter(now, utils.date(minDate)) ? now : utils.date(minDate)\n );\n\n return !utils.isBefore(firstEnabledMonth, this.state.currentMonth);\n };\n\n shouldDisableNextMonth = () => {\n const { utils, disableFuture, maxDate } = this.props;\n\n const now = utils.date();\n const lastEnabledMonth = utils.startOfMonth(\n disableFuture && utils.isBefore(now, utils.date(maxDate)) ? now : utils.date(maxDate)\n );\n\n return !utils.isAfter(lastEnabledMonth, this.state.currentMonth);\n };\n\n shouldDisableDate = (day: MaterialUiPickersDate) => {\n const { shouldDisableDate } = this.props;\n\n return this.validateMinMaxDate(day) || Boolean(shouldDisableDate && shouldDisableDate(day));\n };\n\n handleDaySelect = (day: MaterialUiPickersDate, isFinish = true) => {\n const { date, utils } = this.props;\n\n this.props.onChange(utils.mergeDateAndTime(day, date), isFinish);\n };\n\n moveToDay = (day: MaterialUiPickersDate) => {\n const { utils } = this.props;\n\n if (day && !this.shouldDisableDate(day)) {\n if (utils.getMonth(day) !== utils.getMonth(this.state.currentMonth)) {\n this.handleChangeMonth(utils.startOfMonth(day), 'left');\n }\n\n this.handleDaySelect(day, false);\n }\n };\n\n handleKeyDown = (event: KeyboardEvent) => {\n const { theme, date, utils } = this.props;\n\n runKeyHandler(event, {\n ArrowUp: () => this.moveToDay(utils.addDays(date, -7)),\n ArrowDown: () => this.moveToDay(utils.addDays(date, 7)),\n ArrowLeft: () => this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? -1 : 1)),\n ArrowRight: () => this.moveToDay(utils.addDays(date, theme.direction === 'ltr' ? 1 : -1)),\n });\n };\n\n private renderWeeks = () => {\n const { utils, classes } = this.props;\n const weeks = utils.getWeekArray(this.state.currentMonth);\n\n return weeks.map(week => (\n \n {this.renderDays(week)}\n
\n ));\n };\n\n private renderDays = (week: MaterialUiPickersDate[]) => {\n const { date, renderDay, utils } = this.props;\n\n const now = utils.date();\n const selectedDate = utils.startOfDay(date);\n const currentMonthNumber = utils.getMonth(this.state.currentMonth);\n\n return week.map(day => {\n const disabled = this.shouldDisableDate(day);\n const isDayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;\n\n let dayComponent = (\n \n {utils.getDayText(day)}\n \n );\n\n if (renderDay) {\n dayComponent = renderDay(day, selectedDate, isDayInCurrentMonth, dayComponent);\n }\n\n return (\n \n {dayComponent}\n \n );\n });\n };\n\n render() {\n const { currentMonth, slideDirection } = this.state;\n const {\n classes,\n allowKeyboardControl,\n leftArrowButtonProps,\n leftArrowIcon,\n rightArrowButtonProps,\n rightArrowIcon,\n loadingIndicator,\n } = this.props;\n const loadingElement = loadingIndicator ? loadingIndicator : ;\n\n return (\n \n {allowKeyboardControl && this.context !== 'static' && (\n \n )}\n\n \n\n \n <>\n {(this.state.loadingQueue > 0 && (\n {loadingElement}
\n )) || {this.renderWeeks()}
}\n \n \n \n );\n }\n}\n\nexport const styles = (theme: Theme) => ({\n transitionContainer: {\n minHeight: 36 * 6,\n marginTop: theme.spacing(1.5),\n },\n progressContainer: {\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n },\n week: {\n display: 'flex',\n justifyContent: 'center',\n },\n});\n\nexport default withStyles(styles, {\n name: 'MuiPickersCalendar',\n withTheme: true,\n})(withUtils()(Calendar));\n","enum ClockType {\n HOURS = 'hours',\n\n MINUTES = 'minutes',\n\n SECONDS = 'seconds',\n}\n\nexport type ClockViewType = 'hours' | 'minutes' | 'seconds';\n\nexport default ClockType;\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport ClockType, { ClockViewType } from '../../constants/ClockType';\nimport { Theme } from '@material-ui/core/styles';\nimport { withStyles, createStyles, WithStyles } from '@material-ui/core/styles';\n\nexport interface ClockPointerProps extends WithStyles {\n value: number;\n hasSelected: boolean;\n isInner: boolean;\n type: ClockViewType;\n}\n\nexport class ClockPointer extends React.Component {\n public static getDerivedStateFromProps = (\n nextProps: ClockPointerProps,\n state: ClockPointer['state']\n ) => {\n if (nextProps.type !== state.previousType) {\n return {\n toAnimateTransform: true,\n previousType: nextProps.type,\n };\n }\n\n return {\n toAnimateTransform: false,\n previousType: nextProps.type,\n };\n };\n\n public state = {\n toAnimateTransform: false,\n previousType: undefined,\n };\n\n public getAngleStyle = () => {\n const { value, isInner, type } = this.props;\n\n const max = type === ClockType.HOURS ? 12 : 60;\n let angle = (360 / max) * value;\n\n if (type === ClockType.HOURS && value > 12) {\n angle -= 360; // round up angle to max 360 degrees\n }\n\n return {\n height: isInner ? '26%' : '40%',\n transform: `rotateZ(${angle}deg)`,\n };\n };\n\n public render() {\n const { classes, hasSelected } = this.props;\n\n return (\n \n \n \n );\n }\n}\n\nexport const styles = (theme: Theme) =>\n createStyles({\n pointer: {\n width: 2,\n backgroundColor: theme.palette.primary.main,\n position: 'absolute',\n left: 'calc(50% - 1px)',\n bottom: '50%',\n transformOrigin: 'center bottom 0px',\n },\n animateTransform: {\n transition: theme.transitions.create(['transform', 'height']),\n },\n thumb: {\n width: 4,\n height: 4,\n backgroundColor: theme.palette.primary.contrastText,\n borderRadius: '100%',\n position: 'absolute',\n top: -21,\n left: -15,\n border: `14px solid ${theme.palette.primary.main}`,\n boxSizing: 'content-box',\n },\n noPoint: {\n backgroundColor: theme.palette.primary.main,\n },\n });\n\nexport default withStyles(styles, {\n name: 'MuiPickersClockPointer',\n})(ClockPointer as React.ComponentType);\n","import { IUtils } from '@date-io/core/IUtils';\nimport { MaterialUiPickersDate } from '../typings/date';\n\nconst center = {\n x: 260 / 2,\n y: 260 / 2,\n};\n\nconst basePoint = {\n x: center.x,\n y: 0,\n};\n\nconst cx = basePoint.x - center.x;\nconst cy = basePoint.y - center.y;\n\nconst rad2deg = (rad: number) => rad * 57.29577951308232;\n\nconst getAngleValue = (step: number, offsetX: number, offsetY: number) => {\n const x = offsetX - center.x;\n const y = offsetY - center.y;\n\n const atan = Math.atan2(cx, cy) - Math.atan2(x, y);\n\n let deg = rad2deg(atan);\n deg = Math.round(deg / step) * step;\n deg %= 360;\n\n const value = Math.floor(deg / step) || 0;\n const delta = Math.pow(x, 2) + Math.pow(y, 2);\n const distance = Math.sqrt(delta);\n\n return { value, distance };\n};\n\nexport const getHours = (offsetX: number, offsetY: number, ampm: boolean) => {\n let { value, distance } = getAngleValue(30, offsetX, offsetY);\n value = value || 12;\n\n if (!ampm) {\n if (distance < 90) {\n value += 12;\n value %= 24;\n }\n } else {\n value %= 12;\n }\n\n return value;\n};\n\nexport const getMinutes = (offsetX: number, offsetY: number, step = 1) => {\n const angleStep = step * 6;\n let { value } = getAngleValue(angleStep, offsetX, offsetY);\n value = (value * step) % 60;\n\n return value;\n};\n\nexport const getMeridiem = (\n date: MaterialUiPickersDate,\n utils: IUtils\n): 'am' | 'pm' => {\n return utils.getHours(date) >= 12 ? 'pm' : 'am';\n};\n\nexport const convertToMeridiem = (\n time: MaterialUiPickersDate,\n meridiem: 'am' | 'pm',\n ampm: boolean,\n utils: IUtils\n) => {\n if (ampm) {\n const currentMeridiem = utils.getHours(time) >= 12 ? 'pm' : 'am';\n if (currentMeridiem !== meridiem) {\n const hours = meridiem === 'am' ? utils.getHours(time) - 12 : utils.getHours(time) + 12;\n\n return utils.setHours(time, hours);\n }\n }\n\n return time;\n};\n","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport ClockPointer from './ClockPointer';\nimport ClockType, { ClockViewType } from '../../constants/ClockType';\nimport { getHours, getMinutes } from '../../_helpers/time-utils';\nimport { withStyles, createStyles, WithStyles, Theme } from '@material-ui/core/styles';\n\nexport interface ClockProps extends WithStyles {\n type: ClockViewType;\n value: number;\n onChange: (value: number, isFinish?: boolean) => void;\n ampm?: boolean;\n minutesStep?: number;\n children: React.ReactElement[];\n}\n\nexport class Clock extends React.Component {\n public static propTypes: any = {\n type: PropTypes.oneOf(\n Object.keys(ClockType).map(key => ClockType[key as keyof typeof ClockType])\n ).isRequired,\n value: PropTypes.number.isRequired,\n onChange: PropTypes.func.isRequired,\n children: PropTypes.arrayOf(PropTypes.node).isRequired,\n ampm: PropTypes.bool,\n minutesStep: PropTypes.number,\n innerRef: PropTypes.any,\n };\n\n public static defaultProps = {\n ampm: false,\n minutesStep: 1,\n };\n\n public isMoving = false;\n\n public setTime(e: any, isFinish = false) {\n let { offsetX, offsetY } = e;\n\n if (typeof offsetX === 'undefined') {\n const rect = e.target.getBoundingClientRect();\n\n offsetX = e.changedTouches[0].clientX - rect.left;\n offsetY = e.changedTouches[0].clientY - rect.top;\n }\n\n const value =\n this.props.type === ClockType.SECONDS || this.props.type === ClockType.MINUTES\n ? getMinutes(offsetX, offsetY, this.props.minutesStep)\n : getHours(offsetX, offsetY, Boolean(this.props.ampm));\n\n this.props.onChange(value, isFinish);\n }\n\n public handleTouchMove = (e: React.TouchEvent) => {\n this.isMoving = true;\n this.setTime(e);\n };\n\n public handleTouchEnd = (e: React.TouchEvent) => {\n if (this.isMoving) {\n this.setTime(e, true);\n this.isMoving = false;\n }\n };\n\n public handleMove = (e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n // MouseEvent.which is deprecated, but MouseEvent.buttons is not supported in Safari\n const isButtonPressed =\n typeof e.buttons === 'undefined' ? e.nativeEvent.which === 1 : e.buttons === 1;\n\n if (isButtonPressed) {\n this.setTime(e.nativeEvent, false);\n }\n };\n\n public handleMouseUp = (e: React.MouseEvent) => {\n if (this.isMoving) {\n this.isMoving = false;\n }\n\n this.setTime(e.nativeEvent, true);\n };\n\n public hasSelected = () => {\n const { type, value } = this.props;\n\n if (type === ClockType.HOURS) {\n return true;\n }\n\n return value % 5 === 0;\n };\n\n public render() {\n const { classes, value, children, type, ampm } = this.props;\n\n const isPointerInner = !ampm && type === ClockType.HOURS && (value < 1 || value > 12);\n\n return (\n \n
\n
\n\n
\n\n
\n\n {children}\n
\n
\n {utils.getYearRange(minDate, maxDate).map(year => {\n const yearNumber = utils.getYear(year);\n const selected = yearNumber === currentYear;\n\n return (\n \n {utils.getYearText(year)}\n \n );\n })}\n
\n );\n};\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\n\nexport interface MonthProps {\n children: React.ReactNode;\n disabled?: boolean;\n onSelect: (value: any) => void;\n selected?: boolean;\n value: any;\n}\n\nexport const useStyles = makeStyles(\n theme => ({\n root: {\n flex: '1 0 33.33%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'pointer',\n outline: 'none',\n height: 75,\n transition: theme.transitions.create('font-size', { duration: '100ms' }),\n '&:focus': {\n color: theme.palette.primary.main,\n fontWeight: theme.typography.fontWeightMedium,\n },\n },\n monthSelected: {\n color: theme.palette.primary.main,\n fontWeight: theme.typography.fontWeightMedium,\n },\n monthDisabled: {\n pointerEvents: 'none',\n color: theme.palette.text.hint,\n },\n }),\n { name: 'MuiPickersMonth' }\n);\n\nexport const Month: React.FC = ({\n selected,\n onSelect,\n disabled,\n value,\n children,\n ...other\n}) => {\n const classes = useStyles();\n const handleSelection = React.useCallback(() => {\n onSelect(value);\n }, [onSelect, value]);\n\n return (\n \n );\n};\n\nMonth.displayName = 'Month';\n\nexport default Month;\n","import * as React from 'react';\nimport Month from './Month';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { useUtils } from '../../_shared/hooks/useUtils';\nimport { ParsableDate } from '../../constants/prop-types';\nimport { MaterialUiPickersDate } from '../../typings/date';\n\nexport interface MonthSelectionProps {\n date: MaterialUiPickersDate;\n minDate?: ParsableDate;\n maxDate?: ParsableDate;\n onChange: (date: MaterialUiPickersDate, isFinish: boolean) => void;\n disablePast?: boolean | null | undefined;\n disableFuture?: boolean | null | undefined;\n onMonthChange?: (date: MaterialUiPickersDate) => void | Promise;\n}\n\nexport const useStyles = makeStyles(\n {\n container: {\n width: 310,\n display: 'flex',\n flexWrap: 'wrap',\n alignContent: 'stretch',\n },\n },\n { name: 'MuiPickersMonthSelection' }\n);\n\nexport const MonthSelection: React.FC = ({\n disablePast,\n disableFuture,\n minDate,\n maxDate,\n date,\n onMonthChange,\n onChange,\n}) => {\n const utils = useUtils();\n const classes = useStyles();\n const currentMonth = utils.getMonth(date);\n\n const shouldDisableMonth = (month: MaterialUiPickersDate) => {\n const now = utils.date();\n const utilMinDate = utils.date(minDate);\n const utilMaxDate = utils.date(maxDate);\n\n const firstEnabledMonth = utils.startOfMonth(\n disablePast && utils.isAfter(now, utilMinDate) ? now : utilMinDate\n );\n\n const lastEnabledMonth = utils.startOfMonth(\n disableFuture && utils.isBefore(now, utilMaxDate) ? now : utilMaxDate\n );\n\n const isBeforeFirstEnabled = utils.isBefore(month, firstEnabledMonth);\n const isAfterLastEnabled = utils.isAfter(month, lastEnabledMonth);\n\n return isBeforeFirstEnabled || isAfterLastEnabled;\n };\n\n const onMonthSelect = React.useCallback(\n (month: number) => {\n const newDate = utils.setMonth(date, month);\n\n onChange(newDate, true);\n if (onMonthChange) {\n onMonthChange(newDate);\n }\n },\n [date, onChange, onMonthChange, utils]\n );\n\n return (\n \n {utils.getMonthArray(date).map(month => {\n const monthNumber = utils.getMonth(month);\n const monthText = utils.format(month, 'MMM');\n\n return (\n \n {monthText}\n \n );\n })}\n
\n );\n};\n","import * as React from 'react';\nimport { useIsomorphicEffect } from './useKeyDown';\nimport { BasePickerProps } from '../../typings/BasePicker';\n\nconst getOrientation = () => {\n if (typeof window === 'undefined') {\n return 'portrait';\n }\n\n if (window.screen && window.screen.orientation && window.screen.orientation.angle) {\n return Math.abs(window.screen.orientation.angle) === 90 ? 'landscape' : 'portrait';\n }\n\n // Support IOS safari\n if (window.orientation) {\n return Math.abs(Number(window.orientation)) === 90 ? 'landscape' : 'portrait';\n }\n\n return 'portrait';\n};\n\nexport function useIsLandscape(customOrientation?: BasePickerProps['orientation']) {\n const [orientation, setOrientation] = React.useState(\n getOrientation()\n );\n\n const eventHandler = React.useCallback(() => setOrientation(getOrientation()), []);\n\n useIsomorphicEffect(() => {\n window.addEventListener('orientationchange', eventHandler);\n return () => window.removeEventListener('orientationchange', eventHandler);\n }, [eventHandler]);\n\n const orientationToUse = customOrientation || orientation;\n return orientationToUse === 'landscape';\n}\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport Calendar from '../views/Calendar/Calendar';\nimport { useUtils } from '../_shared/hooks/useUtils';\nimport { useViews } from '../_shared/hooks/useViews';\nimport { ClockView } from '../views/Clock/ClockView';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { YearSelection } from '../views/Year/YearView';\nimport { BasePickerProps } from '../typings/BasePicker';\nimport { MaterialUiPickersDate } from '../typings/date';\nimport { MonthSelection } from '../views/Month/MonthView';\nimport { BaseTimePickerProps } from '../TimePicker/TimePicker';\nimport { BaseDatePickerProps } from '../DatePicker/DatePicker';\nimport { useIsLandscape } from '../_shared/hooks/useIsLandscape';\nimport { datePickerDefaultProps } from '../constants/prop-types';\nimport { DIALOG_WIDTH_WIDER, DIALOG_WIDTH, VIEW_HEIGHT } from '../constants/dimensions';\n\nconst viewsMap = {\n year: YearSelection,\n month: MonthSelection,\n date: Calendar,\n hours: ClockView,\n minutes: ClockView,\n seconds: ClockView,\n};\n\nexport type PickerView = keyof typeof viewsMap;\n\nexport type ToolbarComponentProps = BaseDatePickerProps &\n BaseTimePickerProps & {\n views: PickerView[];\n openView: PickerView;\n date: MaterialUiPickersDate;\n setOpenView: (view: PickerView) => void;\n onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;\n // TODO move out, cause it is DateTimePickerOnly\n hideTabs?: boolean;\n dateRangeIcon?: React.ReactNode;\n timeIcon?: React.ReactNode;\n isLandscape: boolean;\n };\n\nexport interface PickerViewProps extends BaseDatePickerProps, BaseTimePickerProps {\n views: PickerView[];\n openTo: PickerView;\n disableToolbar?: boolean;\n ToolbarComponent: React.ComponentType;\n // TODO move out, cause it is DateTimePickerOnly\n hideTabs?: boolean;\n dateRangeIcon?: React.ReactNode;\n timeIcon?: React.ReactNode;\n}\n\ninterface PickerProps extends PickerViewProps {\n date: MaterialUiPickersDate;\n orientation?: BasePickerProps['orientation'];\n onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;\n}\n\nconst useStyles = makeStyles(\n {\n container: {\n display: 'flex',\n flexDirection: 'column',\n },\n containerLandscape: {\n flexDirection: 'row',\n },\n pickerView: {\n overflowX: 'hidden',\n minHeight: VIEW_HEIGHT,\n minWidth: DIALOG_WIDTH,\n maxWidth: DIALOG_WIDTH_WIDER,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n },\n pickerViewLandscape: {\n padding: '0 8px',\n },\n },\n { name: 'MuiPickersBasePicker' }\n);\n\nexport const Picker: React.FunctionComponent = ({\n date,\n views,\n disableToolbar,\n onChange,\n openTo,\n minDate: unparsedMinDate,\n maxDate: unparsedMaxDate,\n ToolbarComponent,\n orientation,\n ...rest\n}) => {\n const utils = useUtils();\n const classes = useStyles();\n const isLandscape = useIsLandscape(orientation);\n const { openView, setOpenView, handleChangeAndOpenNext } = useViews(views, openTo, onChange);\n\n const minDate = React.useMemo(() => utils.date(unparsedMinDate)!, [unparsedMinDate, utils]);\n const maxDate = React.useMemo(() => utils.date(unparsedMaxDate)!, [unparsedMaxDate, utils]);\n\n return (\n \n {!disableToolbar && (\n \n )}\n\n \n {openView === 'year' && (\n \n )}\n\n {openView === 'month' && (\n \n )}\n\n {openView === 'date' && (\n \n )}\n\n {(openView === 'hours' || openView === 'minutes' || openView === 'seconds') && (\n \n )}\n
\n \n );\n};\n\nPicker.defaultProps = {\n ...datePickerDefaultProps,\n views: Object.keys(viewsMap),\n} as any;\n","import * as React from 'react';\nimport { PickerView } from '../../Picker/Picker';\nimport { arrayIncludes } from '../../_helpers/utils';\nimport { MaterialUiPickersDate } from '../../typings/date';\n\nexport function useViews(\n views: PickerView[],\n openTo: PickerView,\n onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void\n) {\n const [openView, setOpenView] = React.useState(\n openTo && arrayIncludes(views, openTo) ? openTo : views[0]\n );\n\n const handleChangeAndOpenNext = React.useCallback(\n (date: MaterialUiPickersDate, isFinish?: boolean) => {\n const nextViewToOpen = views[views.indexOf(openView!) + 1];\n if (isFinish && nextViewToOpen) {\n // do not close picker if needs to show next view\n onChange(date, false);\n setOpenView(nextViewToOpen);\n return;\n }\n\n onChange(date, Boolean(isFinish));\n },\n [onChange, openView, views]\n );\n\n return { handleChangeAndOpenNext, openView, setOpenView };\n}\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport Typography, { TypographyProps } from '@material-ui/core/Typography';\nimport { ExtendMui } from '../typings/extendMui';\nimport { makeStyles, fade } from '@material-ui/core/styles';\n\nexport interface ToolbarTextProps extends ExtendMui {\n selected?: boolean;\n label: string;\n}\n\nexport const useStyles = makeStyles(\n theme => {\n const textColor =\n theme.palette.type === 'light'\n ? theme.palette.primary.contrastText\n : theme.palette.getContrastText(theme.palette.background.default);\n\n return {\n toolbarTxt: {\n color: fade(textColor, 0.54),\n },\n toolbarBtnSelected: {\n color: textColor,\n },\n };\n },\n { name: 'MuiPickersToolbarText' }\n);\n\nconst ToolbarText: React.FunctionComponent = ({\n selected,\n label,\n className = null,\n ...other\n}) => {\n const classes = useStyles();\n return (\n \n );\n};\n\nexport default ToolbarText;\n","import * as React from 'react';\nimport * as PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport ToolbarText from './ToolbarText';\nimport Button, { ButtonProps } from '@material-ui/core/Button';\nimport { ExtendMui } from '../typings/extendMui';\nimport { TypographyProps } from '@material-ui/core/Typography';\nimport { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';\n\nexport interface ToolbarButtonProps\n extends ExtendMui,\n WithStyles {\n variant: TypographyProps['variant'];\n selected: boolean;\n label: string;\n align?: TypographyProps['align'];\n typographyClassName?: string;\n}\n\nconst ToolbarButton: React.FunctionComponent = ({\n classes,\n className = null,\n label,\n selected,\n variant,\n align,\n typographyClassName,\n ...other\n}) => {\n return (\n \n );\n};\n\n(ToolbarButton as any).propTypes = {\n selected: PropTypes.bool.isRequired,\n label: PropTypes.string.isRequired,\n classes: PropTypes.any.isRequired,\n className: PropTypes.string,\n innerRef: PropTypes.any,\n};\n\nToolbarButton.defaultProps = {\n className: '',\n};\n\nexport const styles = createStyles({\n toolbarBtn: {\n padding: 0,\n minWidth: '16px',\n textTransform: 'none',\n },\n});\n\nexport default withStyles(styles, { name: 'MuiPickersToolbarButton' })(ToolbarButton);\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport Toolbar, { ToolbarProps } from '@material-ui/core/Toolbar';\nimport { ExtendMui } from '../typings/extendMui';\nimport { makeStyles } from '@material-ui/core/styles';\n\nexport const useStyles = makeStyles(\n theme => ({\n toolbar: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n height: 100,\n backgroundColor:\n theme.palette.type === 'light'\n ? theme.palette.primary.main\n : theme.palette.background.default,\n },\n toolbarLandscape: {\n height: 'auto',\n maxWidth: 150,\n padding: 8,\n justifyContent: 'flex-start',\n },\n }),\n { name: 'MuiPickersToolbar' }\n);\n\ninterface PickerToolbarProps extends ExtendMui {\n isLandscape: boolean;\n}\n\nconst PickerToolbar: React.SFC = ({\n children,\n isLandscape,\n className = null,\n ...other\n}) => {\n const classes = useStyles();\n\n return (\n \n {children}\n \n );\n};\n\nexport default PickerToolbar;\n","import * as React from 'react';\nimport TextField, { BaseTextFieldProps, TextFieldProps } from '@material-ui/core/TextField';\nimport { ExtendMui } from '../typings/extendMui';\n\nexport type NotOverridableProps =\n | 'openPicker'\n | 'inputValue'\n | 'onChange'\n | 'format'\n | 'validationError'\n | 'format'\n | 'forwardedRef';\n\nexport interface PureDateInputProps\n extends ExtendMui {\n /** Pass material-ui text field variant down, bypass internal variant prop */\n inputVariant?: TextFieldProps['variant'];\n /** Override input component */\n TextFieldComponent?: React.ComponentType;\n InputProps?: TextFieldProps['InputProps'];\n inputProps?: TextFieldProps['inputProps'];\n onBlur?: TextFieldProps['onBlur'];\n onFocus?: TextFieldProps['onFocus'];\n inputValue: string;\n validationError?: React.ReactNode;\n openPicker: () => void;\n}\n\nexport const PureDateInput: React.FC = ({\n inputValue,\n inputVariant,\n validationError,\n InputProps,\n openPicker: onOpen,\n TextFieldComponent = TextField,\n ...other\n}) => {\n const PureDateInputProps = React.useMemo(\n () => ({\n ...InputProps,\n readOnly: true,\n }),\n [InputProps]\n );\n\n return (\n {\n // space\n if (e.keyCode === 32) {\n e.stopPropagation();\n onOpen();\n }\n }}\n />\n );\n};\n\nPureDateInput.displayName = 'PureDateInput';\n","import React from 'react';\nimport SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';\n\nexport const KeyboardIcon: React.SFC = props => {\n return (\n \n \n \n \n );\n};\n","import { Omit } from './utils';\nimport { DatePickerProps } from '..';\nimport { IUtils } from '@date-io/core/IUtils';\nimport { ParsableDate } from '../constants/prop-types';\nimport { BasePickerProps } from '../typings/BasePicker';\n\nexport const getDisplayDate = (\n value: ParsableDate,\n format: string,\n utils: IUtils,\n isEmpty: boolean,\n { invalidLabel, emptyLabel, labelFunc }: Omit\n) => {\n const date = utils.date(value);\n if (labelFunc) {\n return labelFunc(isEmpty ? null : date, invalidLabel!);\n }\n\n if (isEmpty) {\n return emptyLabel || '';\n }\n\n return utils.isValid(date) ? utils.format(date, format) : invalidLabel!;\n};\n\nexport interface BaseValidationProps {\n /**\n * Message, appearing when date cannot be parsed\n * @default 'Invalid Date Format'\n */\n invalidDateMessage?: React.ReactNode;\n}\n\nexport interface DateValidationProps extends BaseValidationProps {\n /**\n * Error message, shown if date is less then minimal date\n * @default 'Date should not be before minimal date'\n */\n minDateMessage?: React.ReactNode;\n /**\n * Error message, shown if date is more then maximal date\n * @default 'Date should not be after maximal date'\n */\n maxDateMessage?: React.ReactNode;\n}\n\nconst getComparisonMaxDate = (utils: IUtils, strictCompareDates: boolean, date: Date) => {\n if (strictCompareDates) {\n return date;\n }\n\n return utils.endOfDay(date);\n};\n\nconst getComparisonMinDate = (utils: IUtils, strictCompareDates: boolean, date: Date) => {\n if (strictCompareDates) {\n return date;\n }\n\n return utils.startOfDay(date);\n};\n\nexport const validate = (\n value: ParsableDate,\n utils: IUtils,\n {\n maxDate,\n minDate,\n disablePast,\n disableFuture,\n maxDateMessage,\n minDateMessage,\n invalidDateMessage,\n strictCompareDates,\n }: Omit // DateTimePicker doesn't support\n): React.ReactNode => {\n const parsedValue = utils.date(value);\n\n // if null - do not show error\n if (value === null) {\n return '';\n }\n\n if (!utils.isValid(value)) {\n return invalidDateMessage;\n }\n\n if (\n maxDate &&\n utils.isAfter(\n parsedValue,\n getComparisonMaxDate(utils, !!strictCompareDates, utils.date(maxDate))\n )\n ) {\n return maxDateMessage;\n }\n\n if (\n disableFuture &&\n utils.isAfter(parsedValue, getComparisonMaxDate(utils, !!strictCompareDates, utils.date()))\n ) {\n return maxDateMessage;\n }\n\n if (\n minDate &&\n utils.isBefore(\n parsedValue,\n getComparisonMinDate(utils, !!strictCompareDates, utils.date(minDate))\n )\n ) {\n return minDateMessage;\n }\n if (\n disablePast &&\n utils.isBefore(parsedValue, getComparisonMinDate(utils, !!strictCompareDates, utils.date()))\n ) {\n return minDateMessage;\n }\n\n return '';\n};\n\nexport function pick12hOr24hFormat(\n userFormat: string | undefined,\n ampm: boolean | undefined = true,\n formats: { '12h': string; '24h': string }\n) {\n if (userFormat) {\n return userFormat;\n }\n\n return ampm ? formats['12h'] : formats['24h'];\n}\n\nexport function makeMaskFromFormat(format: string, numberMaskChar: string) {\n return format.replace(/[a-z]/gi, numberMaskChar);\n}\n\nexport const maskedDateFormatter = (mask: string, numberMaskChar: string, refuse: RegExp) => (\n value: string\n) => {\n let result = '';\n const parsed = value.replace(refuse, '');\n\n if (parsed === '') {\n return parsed;\n }\n\n let i = 0;\n let n = 0;\n while (i < mask.length) {\n const maskChar = mask[i];\n if (maskChar === numberMaskChar && n < parsed.length) {\n const parsedChar = parsed[n];\n result += parsedChar;\n n += 1;\n } else {\n result += maskChar;\n }\n i += 1;\n }\n\n return result;\n};\n","import * as React from 'react';\nimport IconButton, { IconButtonProps } from '@material-ui/core/IconButton';\nimport InputAdornment, { InputAdornmentProps } from '@material-ui/core/InputAdornment';\nimport TextField, { BaseTextFieldProps, TextFieldProps } from '@material-ui/core/TextField';\nimport { Rifm } from 'rifm';\nimport { ExtendMui } from '../typings/extendMui';\nimport { KeyboardIcon } from './icons/KeyboardIcon';\nimport { makeMaskFromFormat, maskedDateFormatter } from '../_helpers/text-field-helper';\n\nexport interface KeyboardDateInputProps\n extends ExtendMui {\n format: string;\n onChange: (value: string | null) => void;\n openPicker: () => void;\n validationError?: React.ReactNode;\n inputValue: string;\n inputProps?: TextFieldProps['inputProps'];\n InputProps?: TextFieldProps['InputProps'];\n onBlur?: TextFieldProps['onBlur'];\n onFocus?: TextFieldProps['onFocus'];\n /** Override input component */\n TextFieldComponent?: React.ComponentType;\n /** Icon displaying for open picker button */\n keyboardIcon?: React.ReactNode;\n /** Pass material-ui text field variant down, bypass internal variant prop */\n inputVariant?: TextFieldProps['variant'];\n /**\n * Custom mask. Can be used to override generate from format. (e.g. __/__/____ __:__)\n */\n mask?: string;\n /**\n * Char string that will be replaced with number (for \"_\" mask will be \"__/__/____\")\n * @default '_'\n */\n maskChar?: string;\n /**\n * Refuse values regexp\n * @default /[^\\d]+/gi\n */\n refuse?: RegExp;\n /**\n * Props to pass to keyboard input adornment\n * @type {Partial}\n */\n InputAdornmentProps?: Partial;\n /**\n * Props to pass to keyboard adornment button\n * @type {Partial}\n */\n KeyboardButtonProps?: Partial;\n /** Custom formatter to be passed into Rifm component */\n rifmFormatter?: (str: string) => string;\n}\n\nexport const KeyboardDateInput: React.FunctionComponent = ({\n inputValue,\n inputVariant,\n validationError,\n KeyboardButtonProps,\n InputAdornmentProps,\n openPicker: onOpen,\n onChange,\n InputProps,\n mask,\n maskChar = '_',\n refuse = /[^\\d]+/gi,\n format,\n keyboardIcon,\n disabled,\n rifmFormatter,\n TextFieldComponent = TextField,\n ...other\n}) => {\n const inputMask = mask || makeMaskFromFormat(format, maskChar);\n // prettier-ignore\n const formatter = React.useMemo(\n () => maskedDateFormatter(inputMask, maskChar, refuse),\n [inputMask, maskChar, refuse]\n );\n\n const position =\n InputAdornmentProps && InputAdornmentProps.position ? InputAdornmentProps.position : 'end';\n\n const handleChange = (text: string) => {\n const finalString = text === '' || text === inputMask ? null : text;\n onChange(finalString);\n };\n\n return (\n \n {({ onChange, value }) => (\n \n \n {keyboardIcon}\n \n \n ),\n }}\n />\n )}\n \n );\n};\n\nKeyboardDateInput.defaultProps = {\n keyboardIcon: ,\n};\n\nexport default KeyboardDateInput;\n","import { useUtils } from './useUtils';\nimport { IUtils } from '@date-io/core/IUtils';\nimport { useOpenState } from './useOpenState';\nimport { MaterialUiPickersDate } from '../../typings/date';\nimport { BasePickerProps } from '../../typings/BasePicker';\nimport { getDisplayDate, validate } from '../../_helpers/text-field-helper';\nimport { useCallback, useDebugValue, useEffect, useMemo, useState, useRef } from 'react';\n\nexport interface StateHookOptions {\n getDefaultFormat: () => string;\n}\n\nconst useValueToDate = (\n utils: IUtils,\n { value, initialFocusedDate }: BasePickerProps\n) => {\n const nowRef = useRef(utils.date());\n const date = utils.date(value || initialFocusedDate || nowRef.current);\n\n return date && utils.isValid(date) ? date : nowRef.current;\n};\n\nfunction useDateValues(props: BasePickerProps, options: StateHookOptions) {\n const utils = useUtils();\n const date = useValueToDate(utils, props);\n const format = props.format || options.getDefaultFormat();\n\n return { date, format };\n}\n\nexport function usePickerState(props: BasePickerProps, options: StateHookOptions) {\n const { autoOk, disabled, readOnly, onAccept, onChange, onError, value, variant } = props;\n\n const utils = useUtils();\n const { isOpen, setIsOpen } = useOpenState(props);\n const { date, format } = useDateValues(props, options);\n const [pickerDate, setPickerDate] = useState(date);\n\n useEffect(() => {\n // if value was changed in closed state - treat it as accepted\n if (!isOpen && !utils.isEqual(pickerDate, date)) {\n setPickerDate(date);\n }\n }, [date, isOpen, pickerDate, utils]);\n\n const acceptDate = useCallback(\n (acceptedDate: MaterialUiPickersDate) => {\n onChange(acceptedDate);\n if (onAccept) {\n onAccept(acceptedDate);\n }\n\n setIsOpen(false);\n },\n [onAccept, onChange, setIsOpen]\n );\n\n const wrapperProps = useMemo(\n () => ({\n format,\n open: isOpen,\n onClear: () => acceptDate(null),\n onAccept: () => acceptDate(pickerDate),\n onSetToday: () => setPickerDate(utils.date()),\n onDismiss: () => {\n setIsOpen(false);\n },\n }),\n [acceptDate, format, isOpen, pickerDate, setIsOpen, utils]\n );\n\n const pickerProps = useMemo(\n () => ({\n date: pickerDate,\n onChange: (newDate: MaterialUiPickersDate, isFinish = true) => {\n setPickerDate(newDate);\n\n if (isFinish && autoOk) {\n acceptDate(newDate);\n return;\n }\n\n // simulate autoOk, but do not close the modal\n if (variant === 'inline' || variant === 'static') {\n onChange(newDate);\n onAccept && onAccept(newDate);\n }\n },\n }),\n [acceptDate, autoOk, onAccept, onChange, pickerDate, variant]\n );\n\n const validationError = validate(value, utils, props);\n useEffect(() => {\n if (onError) {\n onError(validationError, value);\n }\n }, [onError, validationError, value]);\n\n const inputValue = getDisplayDate(date, format, utils, value === null, props);\n const inputProps = useMemo(\n () => ({\n inputValue,\n validationError,\n openPicker: () => !readOnly && !disabled && setIsOpen(true),\n }),\n [disabled, inputValue, readOnly, setIsOpen, validationError]\n );\n\n const pickerState = { pickerProps, inputProps, wrapperProps };\n\n useDebugValue(pickerState);\n return pickerState;\n}\n","/* eslint-disable react-hooks/rules-of-hooks */\nimport { BasePickerProps } from '../../typings/BasePicker';\nimport { useCallback, useState, Dispatch, SetStateAction } from 'react';\n\nexport function useOpenState({ open, onOpen, onClose }: BasePickerProps) {\n let setIsOpenState: null | Dispatch> = null;\n if (open === undefined || open === null) {\n // The component is uncontrolled, so we need to give it its own state.\n [open, setIsOpenState] = useState(false);\n }\n\n // prettier-ignore\n const setIsOpen = useCallback((newIsOpen: boolean) => {\n setIsOpenState && setIsOpenState(newIsOpen);\n\n return newIsOpen\n ? onOpen && onOpen()\n : onClose && onClose();\n }, [onOpen, onClose, setIsOpenState]);\n\n return { isOpen: open, setIsOpen };\n}\n","import { useUtils } from './useUtils';\nimport { Omit } from '../../_helpers/utils';\nimport { IUtils } from '@date-io/core/IUtils';\nimport { BasePickerProps } from '../../typings/BasePicker';\nimport { MaterialUiPickersDate } from '../../typings/date';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport { getDisplayDate } from '../../_helpers/text-field-helper';\nimport { StateHookOptions, usePickerState } from './usePickerState';\n\nexport interface BaseKeyboardPickerProps extends Omit {\n /** String value for controlling value with pure input string. Overrides value prop */\n inputValue?: string;\n /** Keyboard onChange callback @DateIOType */\n onChange: (date: MaterialUiPickersDate | null, value?: string | null) => void;\n}\n\nfunction parseInputString(value: string, utils: IUtils, format: string) {\n try {\n return utils.parse(value, format);\n } catch {\n return null;\n }\n}\n\nexport function useKeyboardPickerState(props: BaseKeyboardPickerProps, options: StateHookOptions) {\n const { format = options.getDefaultFormat(), inputValue, onChange, value } = props;\n const utils = useUtils();\n\n const displayDate = getDisplayDate(value, format, utils, value === null, props);\n const [innerInputValue, setInnerInputValue] = useState(displayDate);\n const dateValue = inputValue ? parseInputString(inputValue, utils, format) : value;\n\n useEffect(() => {\n if (value === null || utils.isValid(value)) {\n setInnerInputValue(displayDate);\n }\n }, [displayDate, setInnerInputValue, utils, value]);\n\n const handleKeyboardChange = useCallback(\n (date: MaterialUiPickersDate) => {\n onChange(date, date === null ? null : utils.format(date, format));\n },\n [format, onChange, utils]\n );\n\n const { inputProps: innerInputProps, wrapperProps, pickerProps } = usePickerState(\n // Extend props interface\n { ...props, value: dateValue, onChange: handleKeyboardChange },\n options\n );\n\n const inputProps = useMemo(\n () => ({\n ...innerInputProps, // reuse validation and open/close logic\n format: wrapperProps.format,\n inputValue: inputValue || innerInputValue,\n onChange: (value: string | null) => {\n setInnerInputValue(value || '');\n const date = value === null ? null : utils.parse(value, wrapperProps.format);\n\n onChange(date, value);\n },\n }),\n [innerInputProps, innerInputValue, inputValue, onChange, utils, wrapperProps.format]\n );\n\n return {\n inputProps,\n wrapperProps,\n pickerProps,\n };\n}\n","import * as React from 'react';\nimport { BasePickerProps } from '../typings/BasePicker';\nimport { Picker, ToolbarComponentProps } from './Picker';\nimport { ExtendWrapper, Wrapper } from '../wrappers/Wrapper';\nimport { PureDateInputProps } from '../_shared/PureDateInput';\nimport { DateValidationProps } from '../_helpers/text-field-helper';\nimport { KeyboardDateInputProps } from '../_shared/KeyboardDateInput';\nimport { StateHookOptions, usePickerState } from '../_shared/hooks/usePickerState';\nimport {\n BaseKeyboardPickerProps,\n useKeyboardPickerState,\n} from '../_shared/hooks/useKeyboardPickerState';\n\nexport type WithKeyboardInputProps = DateValidationProps &\n BaseKeyboardPickerProps &\n ExtendWrapper;\n\nexport type WithPureInputProps = DateValidationProps &\n BasePickerProps &\n ExtendWrapper;\n\nexport interface MakePickerOptions {\n Input: any;\n useState: typeof usePickerState | typeof useKeyboardPickerState;\n useOptions: (props: any) => StateHookOptions;\n getCustomProps?: (props: T) => Partial;\n DefaultToolbarComponent: React.ComponentType;\n}\n\nexport function makePickerWithState({\n Input,\n useState,\n useOptions,\n getCustomProps,\n DefaultToolbarComponent,\n}: MakePickerOptions): React.FC {\n function PickerWithState(props: T) {\n const {\n allowKeyboardControl,\n ampm,\n animateYearScrolling,\n autoOk,\n dateRangeIcon,\n disableFuture,\n disablePast,\n disableToolbar,\n emptyLabel,\n format,\n forwardedRef,\n hideTabs,\n initialFocusedDate,\n invalidDateMessage,\n invalidLabel,\n labelFunc,\n leftArrowButtonProps,\n leftArrowIcon,\n loadingIndicator,\n maxDate,\n maxDateMessage,\n minDate,\n minDateMessage,\n minutesStep,\n onAccept,\n onChange,\n onClose,\n onMonthChange,\n onOpen,\n onYearChange,\n openTo,\n orientation,\n renderDay,\n rightArrowButtonProps,\n rightArrowIcon,\n shouldDisableDate,\n strictCompareDates,\n timeIcon,\n ToolbarComponent = DefaultToolbarComponent,\n value,\n variant,\n views,\n ...other\n } = props;\n\n const injectedProps = getCustomProps ? getCustomProps(props) : {};\n\n const options = useOptions(props);\n const { pickerProps, inputProps, wrapperProps } = useState(props as any, options);\n\n return (\n \n \n \n );\n }\n\n return PickerWithState;\n}\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport ToolbarButton from '../_shared/ToolbarButton';\nimport PickerToolbar from '../_shared/PickerToolbar';\nimport { useUtils } from '../_shared/hooks/useUtils';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { ToolbarComponentProps } from '../Picker/Picker';\nimport { isYearAndMonthViews, isYearOnlyView } from '../_helpers/date-utils';\n\nexport const useStyles = makeStyles(\n {\n toolbar: {\n flexDirection: 'column',\n alignItems: 'flex-start',\n },\n toolbarLandscape: {\n padding: 16,\n },\n dateLandscape: {\n marginRight: 16,\n },\n },\n { name: 'MuiPickersDatePickerRoot' }\n);\n\nexport const DatePickerToolbar: React.FC = ({\n date,\n views,\n setOpenView,\n isLandscape,\n openView,\n}) => {\n const utils = useUtils();\n const classes = useStyles();\n\n const isYearOnly = React.useMemo(() => isYearOnlyView(views as any), [views]);\n const isYearAndMonth = React.useMemo(() => isYearAndMonthViews(views as any), [views]);\n\n return (\n \n setOpenView('year')}\n selected={openView === 'year'}\n label={utils.getYearText(date)}\n />\n\n {!isYearOnly && !isYearAndMonth && (\n setOpenView('date')}\n align={isLandscape ? 'left' : 'center'}\n label={utils.getDatePickerHeaderText(date)}\n className={clsx({ [classes.dateLandscape]: isLandscape })}\n />\n )}\n\n {isYearAndMonth && (\n setOpenView('month')}\n selected={openView === 'month'}\n label={utils.getMonthText(date)}\n />\n )}\n \n );\n};\n","import { useUtils } from '../_shared/hooks/useUtils';\nimport { MaterialUiPickersDate } from '../typings/date';\nimport { DatePickerToolbar } from './DatePickerToolbar';\nimport { PureDateInput } from '../_shared/PureDateInput';\nimport { getFormatByViews } from '../_helpers/date-utils';\nimport { KeyboardDateInput } from '../_shared/KeyboardDateInput';\nimport { OutterCalendarProps } from '../views/Calendar/Calendar';\nimport { usePickerState } from '../_shared/hooks/usePickerState';\nimport { datePickerDefaultProps, ParsableDate } from '../constants/prop-types';\nimport { useKeyboardPickerState } from '../_shared/hooks/useKeyboardPickerState';\nimport {\n WithKeyboardInputProps,\n WithPureInputProps,\n makePickerWithState,\n} from '../Picker/makePickerWithState';\n\nexport type DatePickerView = 'year' | 'date' | 'month';\n\nexport interface BaseDatePickerProps extends OutterCalendarProps {\n /**\n * Min selectable date\n * @default Date(1900-01-01)\n */\n minDate?: ParsableDate;\n /**\n * Max selectable date\n * @default Date(2100-01-01)\n */\n maxDate?: ParsableDate;\n\n /**\n * Compare dates by the exact timestamp, instead of start/end of date\n * @default false\n */\n strictCompareDates?: boolean;\n\n /**\n * Disable past dates\n * @default false\n */\n disablePast?: boolean;\n /**\n * Disable future dates\n * @default false\n */\n disableFuture?: boolean;\n /**\n * To animate scrolling to current year (using scrollIntoView)\n * @default false\n */\n animateYearScrolling?: boolean;\n /** Callback firing on year change @DateIOType */\n onYearChange?: (date: MaterialUiPickersDate) => void;\n}\n\nexport interface DatePickerViewsProps extends BaseDatePickerProps {\n /**\n * Array of views to show\n * @type {Array<\"year\" | \"date\" | \"month\">}\n */\n views?: DatePickerView[];\n /** First view to show in DatePicker */\n openTo?: DatePickerView;\n}\n\nexport type DatePickerProps = WithPureInputProps & DatePickerViewsProps;\n\nexport type KeyboardDatePickerProps = WithKeyboardInputProps & DatePickerViewsProps;\n\nconst defaultProps = {\n ...datePickerDefaultProps,\n openTo: 'date' as DatePickerView,\n views: ['year', 'date'] as DatePickerView[],\n};\n\nfunction useOptions(props: DatePickerViewsProps) {\n const utils = useUtils();\n\n return {\n getDefaultFormat: () => getFormatByViews(props.views!, utils),\n };\n}\n\nexport const DatePicker = makePickerWithState({\n useOptions,\n Input: PureDateInput,\n useState: usePickerState,\n DefaultToolbarComponent: DatePickerToolbar,\n});\n\nexport const KeyboardDatePicker = makePickerWithState({\n useOptions,\n Input: KeyboardDateInput,\n useState: useKeyboardPickerState,\n DefaultToolbarComponent: DatePickerToolbar,\n});\n\nDatePicker.defaultProps = defaultProps;\n\nKeyboardDatePicker.defaultProps = defaultProps;\n","import * as React from 'react';\nimport clsx from 'clsx';\nimport ClockType from '../constants/ClockType';\nimport ToolbarText from '../_shared/ToolbarText';\nimport ToolbarButton from '../_shared/ToolbarButton';\nimport PickerToolbar from '../_shared/PickerToolbar';\nimport { arrayIncludes } from '../_helpers/utils';\nimport { useUtils } from '../_shared/hooks/useUtils';\nimport { MaterialUiPickersDate } from '../typings/date';\nimport { ToolbarComponentProps } from '../Picker/Picker';\nimport { useTheme, makeStyles } from '@material-ui/core/styles';\nimport { convertToMeridiem, getMeridiem } from '../_helpers/time-utils';\n\nexport const useStyles = makeStyles(\n {\n toolbarLandscape: {\n flexWrap: 'wrap',\n },\n toolbarAmpmLeftPadding: {\n paddingLeft: 50,\n },\n separator: {\n margin: '0 4px 0 2px',\n cursor: 'default',\n },\n hourMinuteLabel: {\n display: 'flex',\n justifyContent: 'flex-end',\n alignItems: 'flex-end',\n },\n hourMinuteLabelAmpmLandscape: {\n marginTop: 'auto',\n },\n hourMinuteLabelReverse: {\n flexDirection: 'row-reverse',\n },\n ampmSelection: {\n marginLeft: 20,\n marginRight: -20,\n display: 'flex',\n flexDirection: 'column',\n },\n ampmLandscape: {\n margin: '4px 0 auto',\n flexDirection: 'row',\n justifyContent: 'space-around',\n flexBasis: '100%',\n },\n ampmSelectionWithSeconds: {\n marginLeft: 15,\n marginRight: 10,\n },\n ampmLabel: {\n fontSize: 18,\n },\n },\n { name: 'MuiPickersTimePickerToolbar' }\n);\n\nexport function useMeridiemMode(\n date: MaterialUiPickersDate,\n ampm: boolean | undefined,\n onChange: (date: MaterialUiPickersDate, isFinished?: boolean | undefined) => void\n) {\n const utils = useUtils();\n const meridiemMode = getMeridiem(date, utils);\n\n const handleMeridiemChange = React.useCallback(\n (mode: 'am' | 'pm') => {\n const timeWithMeridiem = convertToMeridiem(date, mode, Boolean(ampm), utils);\n onChange(timeWithMeridiem, false);\n },\n [ampm, date, onChange, utils]\n );\n\n return { meridiemMode, handleMeridiemChange };\n}\n\nexport const TimePickerToolbar: React.FC = ({\n date,\n views,\n ampm,\n openView,\n onChange,\n isLandscape,\n setOpenView,\n}) => {\n const utils = useUtils();\n const theme = useTheme();\n const classes = useStyles();\n const { meridiemMode, handleMeridiemChange } = useMeridiemMode(date, ampm, onChange);\n\n const clockTypographyVariant = isLandscape ? 'h3' : 'h2';\n\n return (\n \n \n {arrayIncludes(views, 'hours') && (\n setOpenView(ClockType.HOURS)}\n selected={openView === ClockType.HOURS}\n label={utils.getHourText(date, Boolean(ampm))}\n />\n )}\n\n {arrayIncludes(views, ['hours', 'minutes']) && (\n \n )}\n\n {arrayIncludes(views, 'minutes') && (\n setOpenView(ClockType.MINUTES)}\n selected={openView === ClockType.MINUTES}\n label={utils.getMinuteText(date)}\n />\n )}\n\n {arrayIncludes(views, ['minutes', 'seconds']) && (\n \n )}\n\n {arrayIncludes(views, 'seconds') && (\n setOpenView(ClockType.SECONDS)}\n selected={openView === ClockType.SECONDS}\n label={utils.getSecondText(date)}\n />\n )}\n \n\n {ampm && (\n \n handleMeridiemChange('am')}\n />\n\n handleMeridiemChange('pm')}\n />\n \n )}\n \n );\n};\n\nexport default TimePickerToolbar;\n","import { useUtils } from '../_shared/hooks/useUtils';\nimport { TimePickerToolbar } from './TimePickerToolbar';\nimport { PureDateInput } from '../_shared/PureDateInput';\nimport { KeyboardDateInput } from '../_shared/KeyboardDateInput';\nimport { timePickerDefaultProps } from '../constants/prop-types';\nimport { usePickerState } from '../_shared/hooks/usePickerState';\nimport { pick12hOr24hFormat } from '../_helpers/text-field-helper';\nimport { useKeyboardPickerState } from '../_shared/hooks/useKeyboardPickerState';\nimport {\n WithKeyboardInputProps,\n makePickerWithState,\n WithPureInputProps,\n} from '../Picker/makePickerWithState';\n\ntype TimePickerView = 'hours' | 'minutes' | 'seconds';\n\nexport interface BaseTimePickerProps {\n /**\n * 12h/24h view for hour selection clock\n * @default true\n */\n ampm?: boolean;\n /**\n * Step over minutes\n * @default 1\n */\n minutesStep?: number;\n}\n\nexport interface TimePickerViewsProps extends BaseTimePickerProps {\n /** Array of views to show */\n views?: ('hours' | 'minutes' | 'seconds')[];\n /** First view to show in timepicker */\n openTo?: 'hours' | 'minutes' | 'seconds';\n}\n\nexport type TimePickerProps = WithPureInputProps & TimePickerViewsProps;\n\nexport type KeyboardTimePickerProps = WithKeyboardInputProps & TimePickerViewsProps;\n\nconst defaultProps = {\n ...timePickerDefaultProps,\n openTo: 'hours' as TimePickerView,\n views: ['hours', 'minutes'] as TimePickerView[],\n};\n\nfunction useOptions(props: TimePickerProps | KeyboardTimePickerProps) {\n const utils = useUtils();\n\n return {\n getDefaultFormat: () =>\n pick12hOr24hFormat(props.format, props.ampm, {\n '12h': utils.time12hFormat,\n '24h': utils.time24hFormat,\n }),\n };\n}\n\nexport const TimePicker = makePickerWithState({\n useOptions,\n Input: PureDateInput,\n useState: usePickerState,\n DefaultToolbarComponent: TimePickerToolbar,\n});\n\nexport const KeyboardTimePicker = makePickerWithState({\n useOptions,\n Input: KeyboardDateInput,\n useState: useKeyboardPickerState,\n DefaultToolbarComponent: TimePickerToolbar,\n getCustomProps: props => ({\n refuse: props.ampm ? /[^\\dap]+/gi : /[^\\d]+/gi,\n }),\n});\n\nTimePicker.defaultProps = defaultProps;\n\nKeyboardTimePicker.defaultProps = defaultProps;\n","import * as React from 'react';\nimport Tab from '@material-ui/core/Tab';\nimport Tabs from '@material-ui/core/Tabs';\nimport Paper from '@material-ui/core/Paper';\nimport { TimeIcon } from '../_shared/icons/TimeIcon';\nimport { DateTimePickerView } from './DateTimePicker';\nimport { DateRangeIcon } from '../_shared/icons/DateRangeIcon';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\n\nconst viewToTabIndex = (openView: DateTimePickerView) => {\n if (openView === 'date' || openView === 'year') {\n return 'date';\n }\n\n return 'time';\n};\n\nconst tabIndexToView = (tab: DateTimePickerView) => {\n if (tab === 'date') {\n return 'date';\n }\n\n return 'hours';\n};\n\nexport interface DateTimePickerTabsProps {\n view: DateTimePickerView;\n onChange: (view: DateTimePickerView) => void;\n dateRangeIcon?: React.ReactNode;\n timeIcon?: React.ReactNode;\n}\n\nexport const useStyles = makeStyles(\n theme => {\n // prettier-ignore\n const tabsBackground = theme.palette.type === 'light'\n ? theme.palette.primary.main\n : theme.palette.background.default;\n\n return {\n tabs: {\n color: theme.palette.getContrastText(tabsBackground),\n backgroundColor: tabsBackground,\n },\n };\n },\n { name: 'MuiPickerDTTabs' }\n);\n\nexport const DateTimePickerTabs: React.SFC = ({\n view,\n onChange,\n dateRangeIcon,\n timeIcon,\n}) => {\n const classes = useStyles();\n const theme = useTheme();\n const indicatorColor = theme.palette.type === 'light' ? 'secondary' : 'primary';\n const handleChange = (e: React.ChangeEvent<{}>, value: DateTimePickerView) => {\n if (value !== viewToTabIndex(view)) {\n onChange(tabIndexToView(value));\n }\n };\n\n return (\n \n \n {dateRangeIcon}} />\n {timeIcon}} />\n \n \n );\n};\n\nDateTimePickerTabs.defaultProps = {\n dateRangeIcon: ,\n timeIcon: ,\n};\n\nexport default DateTimePickerTabs;\n","import React from 'react';\nimport SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';\n\nexport const DateRangeIcon: React.SFC = props => {\n return (\n \n \n \n \n );\n};\n","import React from 'react';\nimport SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';\n\nexport const TimeIcon: React.SFC = props => {\n return (\n \n \n \n \n \n );\n};\n","import * as React from 'react';\nimport Grid from '@material-ui/core/Grid';\nimport ToolbarText from '../_shared/ToolbarText';\nimport PickerToolbar from '../_shared/PickerToolbar';\nimport ToolbarButton from '../_shared/ToolbarButton';\nimport DateTimePickerTabs from './DateTimePickerTabs';\nimport { useUtils } from '../_shared/hooks/useUtils';\nimport { DateTimePickerView } from './DateTimePicker';\nimport { ToolbarComponentProps } from '../Picker/Picker';\nimport { makeStyles, useTheme } from '@material-ui/core/styles';\nimport { useMeridiemMode } from '../TimePicker/TimePickerToolbar';\n\nexport const useStyles = makeStyles(\n _ => ({\n toolbar: {\n paddingLeft: 16,\n paddingRight: 16,\n justifyContent: 'space-around',\n },\n separator: {\n margin: '0 4px 0 2px',\n cursor: 'default',\n },\n }),\n { name: 'MuiPickerDTToolbar' }\n);\n\nexport const DateTimePickerToolbar: React.FC = ({\n date,\n openView,\n setOpenView,\n ampm,\n hideTabs,\n dateRangeIcon,\n timeIcon,\n onChange,\n}) => {\n const utils = useUtils();\n const classes = useStyles();\n const showTabs = !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667;\n const { meridiemMode, handleMeridiemChange } = useMeridiemMode(date, ampm, onChange);\n const theme = useTheme();\n const rtl = theme.direction === 'rtl';\n\n return (\n <>\n \n \n \n \n setOpenView('year')}\n selected={openView === 'year'}\n label={utils.getYearText(date)}\n />\n
\n \n setOpenView('date')}\n selected={openView === 'date'}\n label={utils.getDateTimePickerHeaderText(date)}\n />\n
\n \n\n \n setOpenView('hours')}\n selected={openView === 'hours'}\n label={utils.getHourText(date, ampm!)}\n />\n\n \n\n setOpenView('minutes')}\n selected={openView === 'minutes'}\n label={utils.getMinuteText(date)}\n />\n \n\n {ampm && (\n \n handleMeridiemChange('am')}\n />\n\n handleMeridiemChange('pm')}\n />\n \n )}\n \n \n\n {showTabs && (\n \n )}\n \n );\n};\n","import { useUtils } from '../_shared/hooks/useUtils';\nimport { PureDateInput } from '../_shared/PureDateInput';\nimport { BaseTimePickerProps } from '../TimePicker/TimePicker';\nimport { BaseDatePickerProps } from '../DatePicker/DatePicker';\nimport { DateTimePickerToolbar } from './DateTimePickerToolbar';\nimport { KeyboardDateInput } from '../_shared/KeyboardDateInput';\nimport { usePickerState } from '../_shared/hooks/usePickerState';\nimport { pick12hOr24hFormat } from '../_helpers/text-field-helper';\nimport { dateTimePickerDefaultProps } from '../constants/prop-types';\nimport { useKeyboardPickerState } from '../_shared/hooks/useKeyboardPickerState';\nimport {\n WithKeyboardInputProps,\n makePickerWithState,\n WithPureInputProps,\n} from '../Picker/makePickerWithState';\n\nexport type DateTimePickerView = 'year' | 'date' | 'month' | 'hours' | 'minutes';\n\nexport type BaseDateTimePickerProps = BaseTimePickerProps & BaseDatePickerProps;\n\nexport interface DateTimePickerViewsProps extends BaseDateTimePickerProps {\n /** Array of views to show */\n views?: ('year' | 'date' | 'month' | 'hours' | 'minutes')[];\n /** First view to show in DatePicker */\n openTo?: 'year' | 'date' | 'month' | 'hours' | 'minutes';\n /** To show tabs */\n hideTabs?: boolean;\n /** Date tab icon */\n dateRangeIcon?: React.ReactNode;\n /** Time tab icon */\n timeIcon?: React.ReactNode;\n}\n\nexport type DateTimePickerProps = WithPureInputProps & DateTimePickerViewsProps;\n\nexport type KeyboardDateTimePickerProps = WithKeyboardInputProps & DateTimePickerViewsProps;\n\nconst defaultProps = {\n ...dateTimePickerDefaultProps,\n wider: true,\n orientation: 'portrait' as const,\n openTo: 'date' as DateTimePickerView,\n views: ['year', 'date', 'hours', 'minutes'] as DateTimePickerView[],\n};\n\nfunction useOptions(props: DateTimePickerProps | KeyboardDateTimePickerProps) {\n const utils = useUtils();\n\n if (props.orientation !== 'portrait') {\n throw new Error('We are not supporting custom orientation for DateTimePicker yet :(');\n }\n\n return {\n getDefaultFormat: () =>\n pick12hOr24hFormat(props.format, props.ampm, {\n '12h': utils.dateTime12hFormat,\n '24h': utils.dateTime24hFormat,\n }),\n };\n}\n\nexport const DateTimePicker = makePickerWithState({\n useOptions,\n Input: PureDateInput,\n useState: usePickerState,\n DefaultToolbarComponent: DateTimePickerToolbar,\n});\n\nexport const KeyboardDateTimePicker = makePickerWithState({\n useOptions,\n Input: KeyboardDateInput,\n useState: useKeyboardPickerState,\n DefaultToolbarComponent: DateTimePickerToolbar,\n getCustomProps: props => ({\n refuse: props.ampm ? /[^\\dap]+/gi : /[^\\d]+/gi,\n }),\n});\n\nDateTimePicker.defaultProps = defaultProps;\n\nKeyboardDateTimePicker.defaultProps = defaultProps;\n","import { usePickerState } from './usePickerState';\nimport { ParsableDate } from '../../constants/prop-types';\nimport { MaterialUiPickersDate } from '../../typings/date';\nimport { BaseDatePickerProps } from '../../DatePicker/DatePicker';\n\ninterface StaticStateOpts extends BaseDatePickerProps {\n value: ParsableDate;\n onChange: (date: MaterialUiPickersDate) => void;\n autoOk?: boolean;\n defaultFormat?: string;\n}\n\nexport function useStaticState({ value, autoOk = true, onChange, defaultFormat }: StaticStateOpts) {\n const { pickerProps, wrapperProps, inputProps } = usePickerState(\n { value, onChange, autoOk },\n {\n // just a random format, mostly always not needed for users\n getDefaultFormat: () => defaultFormat || 'MM/dd/yyyy',\n }\n );\n\n return { pickerProps, wrapperProps, inputProps };\n}\n","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { exactProp } from '@material-ui/utils';\nimport createGenerateClassName from '../createGenerateClassName';\nimport { create } from 'jss';\nimport jssPreset from '../jssPreset'; // Default JSS instance.\n\nvar jss = create(jssPreset()); // Use a singleton or the provided one by the context.\n//\n// The counter-based approach doesn't tolerate any mistake.\n// It's much safer to use the same counter everywhere.\n\nvar generateClassName = createGenerateClassName(); // Exported for test purposes\n\nexport var sheetsManager = new Map();\nvar defaultOptions = {\n disableGeneration: false,\n generateClassName: generateClassName,\n jss: jss,\n sheetsCache: null,\n sheetsManager: sheetsManager,\n sheetsRegistry: null\n};\nexport var StylesContext = React.createContext(defaultOptions);\n\nif (process.env.NODE_ENV !== 'production') {\n StylesContext.displayName = 'StylesContext';\n}\n\nvar injectFirstNode;\nexport default function StylesProvider(props) {\n var children = props.children,\n _props$injectFirst = props.injectFirst,\n injectFirst = _props$injectFirst === void 0 ? false : _props$injectFirst,\n _props$disableGenerat = props.disableGeneration,\n disableGeneration = _props$disableGenerat === void 0 ? false : _props$disableGenerat,\n localOptions = _objectWithoutProperties(props, [\"children\", \"injectFirst\", \"disableGeneration\"]);\n\n var outerOptions = React.useContext(StylesContext);\n\n var context = _extends({}, outerOptions, {\n disableGeneration: disableGeneration\n }, localOptions);\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof window === 'undefined' && !context.sheetsManager) {\n console.error('Material-UI: You need to use the ServerStyleSheets API when rendering on the server.');\n }\n }\n\n if (process.env.NODE_ENV !== 'production') {\n if (context.jss.options.insertionPoint && injectFirst) {\n console.error('Material-UI: You cannot use a custom insertionPoint and at the same time.');\n }\n }\n\n if (process.env.NODE_ENV !== 'production') {\n if (injectFirst && localOptions.jss) {\n console.error('Material-UI: You cannot use the jss and injectFirst props at the same time.');\n }\n }\n\n if (!context.jss.options.insertionPoint && injectFirst && typeof window !== 'undefined') {\n if (!injectFirstNode) {\n var head = document.head;\n injectFirstNode = document.createComment('mui-inject-first');\n head.insertBefore(injectFirstNode, head.firstChild);\n }\n\n context.jss = create({\n plugins: jssPreset().plugins,\n insertionPoint: injectFirstNode\n });\n }\n\n return /*#__PURE__*/React.createElement(StylesContext.Provider, {\n value: context\n }, children);\n}\nprocess.env.NODE_ENV !== \"production\" ? StylesProvider.propTypes = {\n /**\n * Your component tree.\n */\n children: PropTypes.node.isRequired,\n\n /**\n * You can disable the generation of the styles with this option.\n * It can be useful when traversing the React tree outside of the HTML\n * rendering step on the server.\n * Let's say you are using react-apollo to extract all\n * the queries made by the interface server-side - you can significantly speed up the traversal with this prop.\n */\n disableGeneration: PropTypes.bool,\n\n /**\n * JSS's class name generator.\n */\n generateClassName: PropTypes.func,\n\n /**\n * By default, the styles are injected last in the element of the page.\n * As a result, they gain more specificity than any other style sheet.\n * If you want to override Material-UI's styles, set this prop.\n */\n injectFirst: PropTypes.bool,\n\n /**\n * JSS's instance.\n */\n jss: PropTypes.object,\n\n /**\n * @ignore\n */\n serverGenerateClassName: PropTypes.func,\n\n /**\n * @ignore\n *\n * Beta feature.\n *\n * Cache for the sheets.\n */\n sheetsCache: PropTypes.object,\n\n /**\n * @ignore\n *\n * The sheetsManager is used to deduplicate style sheet injection in the page.\n * It's deduplicating using the (theme, styles) couple.\n * On the server, you should provide a new instance for each request.\n */\n sheetsManager: PropTypes.object,\n\n /**\n * @ignore\n *\n * Collect the sheets.\n */\n sheetsRegistry: PropTypes.object\n} : void 0;\n\nif (process.env.NODE_ENV !== 'production') {\n process.env.NODE_ENV !== \"production\" ? StylesProvider.propTypes = exactProp(StylesProvider.propTypes) : void 0;\n}","var hasSymbol = typeof Symbol === 'function' && Symbol.for;\nexport default hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';","import nested from '../ThemeProvider/nested';\n/**\n * This is the list of the style rule name we use as drop in replacement for the built-in\n * pseudo classes (:checked, :disabled, :focused, etc.).\n *\n * Why do they exist in the first place?\n * These classes are used at a specificity of 2.\n * It allows them to override previously definied styles as well as\n * being untouched by simple user overrides.\n */\n\nvar pseudoClasses = ['checked', 'disabled', 'error', 'focused', 'focusVisible', 'required', 'expanded', 'selected']; // Returns a function which generates unique class names based on counters.\n// When new generator function is created, rule counter is reset.\n// We need to reset the rule counter for SSR for each request.\n//\n// It's inspired by\n// https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js\n\nexport default function createGenerateClassName() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var _options$disableGloba = options.disableGlobal,\n disableGlobal = _options$disableGloba === void 0 ? false : _options$disableGloba,\n _options$productionPr = options.productionPrefix,\n productionPrefix = _options$productionPr === void 0 ? 'jss' : _options$productionPr,\n _options$seed = options.seed,\n seed = _options$seed === void 0 ? '' : _options$seed;\n var seedPrefix = seed === '' ? '' : \"\".concat(seed, \"-\");\n var ruleCounter = 0;\n\n var getNextCounterId = function getNextCounterId() {\n ruleCounter += 1;\n\n if (process.env.NODE_ENV !== 'production') {\n if (ruleCounter >= 1e10) {\n console.warn(['Material-UI: You might have a memory leak.', 'The ruleCounter is not supposed to grow that much.'].join(''));\n }\n }\n\n return ruleCounter;\n };\n\n return function (rule, styleSheet) {\n var name = styleSheet.options.name; // Is a global static MUI style?\n\n if (name && name.indexOf('Mui') === 0 && !styleSheet.options.link && !disableGlobal) {\n // We can use a shorthand class name, we never use the keys to style the components.\n if (pseudoClasses.indexOf(rule.key) !== -1) {\n return \"Mui-\".concat(rule.key);\n }\n\n var prefix = \"\".concat(seedPrefix).concat(name, \"-\").concat(rule.key);\n\n if (!styleSheet.options.theme[nested] || seed !== '') {\n return prefix;\n }\n\n return \"\".concat(prefix, \"-\").concat(getNextCounterId());\n }\n\n if (process.env.NODE_ENV === 'production') {\n return \"\".concat(seedPrefix).concat(productionPrefix).concat(getNextCounterId());\n }\n\n var suffix = \"\".concat(rule.key, \"-\").concat(getNextCounterId()); // Help with debuggability.\n\n if (styleSheet.options.classNamePrefix) {\n return \"\".concat(seedPrefix).concat(styleSheet.options.classNamePrefix, \"-\").concat(suffix);\n }\n\n return \"\".concat(seedPrefix).concat(suffix);\n };\n}","/* eslint-disable no-restricted-syntax */\nexport default function getThemeProps(params) {\n var theme = params.theme,\n name = params.name,\n props = params.props;\n\n if (!theme || !theme.props || !theme.props[name]) {\n return props;\n } // Resolve default props, code borrow from React source.\n // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221\n\n\n var defaultProps = theme.props[name];\n var propName;\n\n for (propName in defaultProps) {\n if (props[propName] === undefined) {\n props[propName] = defaultProps[propName];\n }\n }\n\n return props;\n}","import warning from 'tiny-warning';\nimport { createRule } from 'jss';\n\nvar now = Date.now();\nvar fnValuesNs = \"fnValues\" + now;\nvar fnRuleNs = \"fnStyle\" + ++now;\n\nvar functionPlugin = function functionPlugin() {\n return {\n onCreateRule: function onCreateRule(name, decl, options) {\n if (typeof decl !== 'function') return null;\n var rule = createRule(name, {}, options);\n rule[fnRuleNs] = decl;\n return rule;\n },\n onProcessStyle: function onProcessStyle(style, rule) {\n // We need to extract function values from the declaration, so that we can keep core unaware of them.\n // We need to do that only once.\n // We don't need to extract functions on each style update, since this can happen only once.\n // We don't support function values inside of function rules.\n if (fnValuesNs in rule || fnRuleNs in rule) return style;\n var fnValues = {};\n\n for (var prop in style) {\n var value = style[prop];\n if (typeof value !== 'function') continue;\n delete style[prop];\n fnValues[prop] = value;\n }\n\n rule[fnValuesNs] = fnValues;\n return style;\n },\n onUpdate: function onUpdate(data, rule, sheet, options) {\n var styleRule = rule;\n var fnRule = styleRule[fnRuleNs]; // If we have a style function, the entire rule is dynamic and style object\n // will be returned from that function.\n\n if (fnRule) {\n // Empty object will remove all currently defined props\n // in case function rule returns a falsy value.\n styleRule.style = fnRule(data) || {};\n\n if (process.env.NODE_ENV === 'development') {\n for (var prop in styleRule.style) {\n if (typeof styleRule.style[prop] === 'function') {\n process.env.NODE_ENV !== \"production\" ? warning(false, '[JSS] Function values inside function rules are not supported.') : void 0;\n break;\n }\n }\n }\n }\n\n var fnValues = styleRule[fnValuesNs]; // If we have a fn values map, it is a rule with function values.\n\n if (fnValues) {\n for (var _prop in fnValues) {\n styleRule.prop(_prop, fnValues[_prop](data), options);\n }\n }\n }\n };\n};\n\nexport default functionPlugin;\n","import _extends from '@babel/runtime/helpers/esm/extends';\nimport { RuleList } from 'jss';\n\nvar at = '@global';\nvar atPrefix = '@global ';\n\nvar GlobalContainerRule =\n/*#__PURE__*/\nfunction () {\n function GlobalContainerRule(key, styles, options) {\n this.type = 'global';\n this.at = at;\n this.isProcessed = false;\n this.key = key;\n this.options = options;\n this.rules = new RuleList(_extends({}, options, {\n parent: this\n }));\n\n for (var selector in styles) {\n this.rules.add(selector, styles[selector]);\n }\n\n this.rules.process();\n }\n /**\n * Get a rule.\n */\n\n\n var _proto = GlobalContainerRule.prototype;\n\n _proto.getRule = function getRule(name) {\n return this.rules.get(name);\n }\n /**\n * Create and register rule, run plugins.\n */\n ;\n\n _proto.addRule = function addRule(name, style, options) {\n var rule = this.rules.add(name, style, options);\n if (rule) this.options.jss.plugins.onProcessRule(rule);\n return rule;\n }\n /**\n * Replace rule, run plugins.\n */\n ;\n\n _proto.replaceRule = function replaceRule(name, style, options) {\n var newRule = this.rules.replace(name, style, options);\n if (newRule) this.options.jss.plugins.onProcessRule(newRule);\n return newRule;\n }\n /**\n * Get index of a rule.\n */\n ;\n\n _proto.indexOf = function indexOf(rule) {\n return this.rules.indexOf(rule);\n }\n /**\n * Generates a CSS string.\n */\n ;\n\n _proto.toString = function toString(options) {\n return this.rules.toString(options);\n };\n\n return GlobalContainerRule;\n}();\n\nvar GlobalPrefixedRule =\n/*#__PURE__*/\nfunction () {\n function GlobalPrefixedRule(key, style, options) {\n this.type = 'global';\n this.at = at;\n this.isProcessed = false;\n this.key = key;\n this.options = options;\n var selector = key.substr(atPrefix.length);\n this.rule = options.jss.createRule(selector, style, _extends({}, options, {\n parent: this\n }));\n }\n\n var _proto2 = GlobalPrefixedRule.prototype;\n\n _proto2.toString = function toString(options) {\n return this.rule ? this.rule.toString(options) : '';\n };\n\n return GlobalPrefixedRule;\n}();\n\nvar separatorRegExp = /\\s*,\\s*/g;\n\nfunction addScope(selector, scope) {\n var parts = selector.split(separatorRegExp);\n var scoped = '';\n\n for (var i = 0; i < parts.length; i++) {\n scoped += scope + \" \" + parts[i].trim();\n if (parts[i + 1]) scoped += ', ';\n }\n\n return scoped;\n}\n\nfunction handleNestedGlobalContainerRule(rule, sheet) {\n var options = rule.options,\n style = rule.style;\n var rules = style ? style[at] : null;\n if (!rules) return;\n\n for (var name in rules) {\n sheet.addRule(name, rules[name], _extends({}, options, {\n selector: addScope(name, rule.selector)\n }));\n }\n\n delete style[at];\n}\n\nfunction handlePrefixedGlobalRule(rule, sheet) {\n var options = rule.options,\n style = rule.style;\n\n for (var prop in style) {\n if (prop[0] !== '@' || prop.substr(0, at.length) !== at) continue;\n var selector = addScope(prop.substr(at.length), rule.selector);\n sheet.addRule(selector, style[prop], _extends({}, options, {\n selector: selector\n }));\n delete style[prop];\n }\n}\n/**\n * Convert nested rules to separate, remove them from original styles.\n */\n\n\nfunction jssGlobal() {\n function onCreateRule(name, styles, options) {\n if (!name) return null;\n\n if (name === at) {\n return new GlobalContainerRule(name, styles, options);\n }\n\n if (name[0] === '@' && name.substr(0, atPrefix.length) === atPrefix) {\n return new GlobalPrefixedRule(name, styles, options);\n }\n\n var parent = options.parent;\n\n if (parent) {\n if (parent.type === 'global' || parent.options.parent && parent.options.parent.type === 'global') {\n options.scoped = false;\n }\n }\n\n if (!options.selector && options.scoped === false) {\n options.selector = name;\n }\n\n return null;\n }\n\n function onProcessRule(rule, sheet) {\n if (rule.type !== 'style' || !sheet) return;\n handleNestedGlobalContainerRule(rule, sheet);\n handlePrefixedGlobalRule(rule, sheet);\n }\n\n return {\n onCreateRule: onCreateRule,\n onProcessRule: onProcessRule\n };\n}\n\nexport default jssGlobal;\n","import _extends from '@babel/runtime/helpers/esm/extends';\nimport warning from 'tiny-warning';\n\nvar separatorRegExp = /\\s*,\\s*/g;\nvar parentRegExp = /&/g;\nvar refRegExp = /\\$([\\w-]+)/g;\n/**\n * Convert nested rules to separate, remove them from original styles.\n */\n\nfunction jssNested() {\n // Get a function to be used for $ref replacement.\n function getReplaceRef(container, sheet) {\n return function (match, key) {\n var rule = container.getRule(key) || sheet && sheet.getRule(key);\n\n if (rule) {\n return rule.selector;\n }\n\n process.env.NODE_ENV !== \"production\" ? warning(false, \"[JSS] Could not find the referenced rule \\\"\" + key + \"\\\" in \\\"\" + (container.options.meta || container.toString()) + \"\\\".\") : void 0;\n return key;\n };\n }\n\n function replaceParentRefs(nestedProp, parentProp) {\n var parentSelectors = parentProp.split(separatorRegExp);\n var nestedSelectors = nestedProp.split(separatorRegExp);\n var result = '';\n\n for (var i = 0; i < parentSelectors.length; i++) {\n var parent = parentSelectors[i];\n\n for (var j = 0; j < nestedSelectors.length; j++) {\n var nested = nestedSelectors[j];\n if (result) result += ', '; // Replace all & by the parent or prefix & with the parent.\n\n result += nested.indexOf('&') !== -1 ? nested.replace(parentRegExp, parent) : parent + \" \" + nested;\n }\n }\n\n return result;\n }\n\n function getOptions(rule, container, prevOptions) {\n // Options has been already created, now we only increase index.\n if (prevOptions) return _extends({}, prevOptions, {\n index: prevOptions.index + 1\n });\n var nestingLevel = rule.options.nestingLevel;\n nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;\n\n var options = _extends({}, rule.options, {\n nestingLevel: nestingLevel,\n index: container.indexOf(rule) + 1 // We don't need the parent name to be set options for chlid.\n\n });\n\n delete options.name;\n return options;\n }\n\n function onProcessStyle(style, rule, sheet) {\n if (rule.type !== 'style') return style;\n var styleRule = rule;\n var container = styleRule.options.parent;\n var options;\n var replaceRef;\n\n for (var prop in style) {\n var isNested = prop.indexOf('&') !== -1;\n var isNestedConditional = prop[0] === '@';\n if (!isNested && !isNestedConditional) continue;\n options = getOptions(styleRule, container, options);\n\n if (isNested) {\n var selector = replaceParentRefs(prop, styleRule.selector); // Lazily create the ref replacer function just once for\n // all nested rules within the sheet.\n\n if (!replaceRef) replaceRef = getReplaceRef(container, sheet); // Replace all $refs.\n\n selector = selector.replace(refRegExp, replaceRef);\n var name = styleRule.key + \"-\" + prop;\n\n if ('replaceRule' in container) {\n // for backward compatibility\n container.replaceRule(name, style[prop], _extends({}, options, {\n selector: selector\n }));\n } else {\n container.addRule(name, style[prop], _extends({}, options, {\n selector: selector\n }));\n }\n } else if (isNestedConditional) {\n // Place conditional right after the parent rule to ensure right ordering.\n container.addRule(prop, {}, options).addRule(styleRule.key, style[prop], {\n selector: styleRule.selector\n });\n }\n\n delete style[prop];\n }\n\n return style;\n }\n\n return {\n onProcessStyle: onProcessStyle\n };\n}\n\nexport default jssNested;\n","/* eslint-disable no-var, prefer-template */\nvar uppercasePattern = /[A-Z]/g\nvar msPattern = /^ms-/\nvar cache = {}\n\nfunction toHyphenLower(match) {\n return '-' + match.toLowerCase()\n}\n\nfunction hyphenateStyleName(name) {\n if (cache.hasOwnProperty(name)) {\n return cache[name]\n }\n\n var hName = name.replace(uppercasePattern, toHyphenLower)\n return (cache[name] = msPattern.test(hName) ? '-' + hName : hName)\n}\n\nexport default hyphenateStyleName\n","import hyphenate from 'hyphenate-style-name';\n\n/**\n * Convert camel cased property names to dash separated.\n */\n\nfunction convertCase(style) {\n var converted = {};\n\n for (var prop in style) {\n var key = prop.indexOf('--') === 0 ? prop : hyphenate(prop);\n converted[key] = style[prop];\n }\n\n if (style.fallbacks) {\n if (Array.isArray(style.fallbacks)) converted.fallbacks = style.fallbacks.map(convertCase);else converted.fallbacks = convertCase(style.fallbacks);\n }\n\n return converted;\n}\n/**\n * Allow camel cased property names by converting them back to dasherized.\n */\n\n\nfunction camelCase() {\n function onProcessStyle(style) {\n if (Array.isArray(style)) {\n // Handle rules like @font-face, which can have multiple styles in an array\n for (var index = 0; index < style.length; index++) {\n style[index] = convertCase(style[index]);\n }\n\n return style;\n }\n\n return convertCase(style);\n }\n\n function onChangeValue(value, prop, rule) {\n if (prop.indexOf('--') === 0) {\n return value;\n }\n\n var hyphenatedProp = hyphenate(prop); // There was no camel case in place\n\n if (prop === hyphenatedProp) return value;\n rule.prop(hyphenatedProp, value); // Core will ignore that property value we set the proper one above.\n\n return null;\n }\n\n return {\n onProcessStyle: onProcessStyle,\n onChangeValue: onChangeValue\n };\n}\n\nexport default camelCase;\n","import { hasCSSTOMSupport } from 'jss';\n\nvar px = hasCSSTOMSupport && CSS ? CSS.px : 'px';\nvar ms = hasCSSTOMSupport && CSS ? CSS.ms : 'ms';\nvar percent = hasCSSTOMSupport && CSS ? CSS.percent : '%';\n/**\n * Generated jss-plugin-default-unit CSS property units\n */\n\nvar defaultUnits = {\n // Animation properties\n 'animation-delay': ms,\n 'animation-duration': ms,\n // Background properties\n 'background-position': px,\n 'background-position-x': px,\n 'background-position-y': px,\n 'background-size': px,\n // Border Properties\n border: px,\n 'border-bottom': px,\n 'border-bottom-left-radius': px,\n 'border-bottom-right-radius': px,\n 'border-bottom-width': px,\n 'border-left': px,\n 'border-left-width': px,\n 'border-radius': px,\n 'border-right': px,\n 'border-right-width': px,\n 'border-top': px,\n 'border-top-left-radius': px,\n 'border-top-right-radius': px,\n 'border-top-width': px,\n 'border-width': px,\n 'border-block': px,\n 'border-block-end': px,\n 'border-block-end-width': px,\n 'border-block-start': px,\n 'border-block-start-width': px,\n 'border-block-width': px,\n 'border-inline': px,\n 'border-inline-end': px,\n 'border-inline-end-width': px,\n 'border-inline-start': px,\n 'border-inline-start-width': px,\n 'border-inline-width': px,\n 'border-start-start-radius': px,\n 'border-start-end-radius': px,\n 'border-end-start-radius': px,\n 'border-end-end-radius': px,\n // Margin properties\n margin: px,\n 'margin-bottom': px,\n 'margin-left': px,\n 'margin-right': px,\n 'margin-top': px,\n 'margin-block': px,\n 'margin-block-end': px,\n 'margin-block-start': px,\n 'margin-inline': px,\n 'margin-inline-end': px,\n 'margin-inline-start': px,\n // Padding properties\n padding: px,\n 'padding-bottom': px,\n 'padding-left': px,\n 'padding-right': px,\n 'padding-top': px,\n 'padding-block': px,\n 'padding-block-end': px,\n 'padding-block-start': px,\n 'padding-inline': px,\n 'padding-inline-end': px,\n 'padding-inline-start': px,\n // Mask properties\n 'mask-position-x': px,\n 'mask-position-y': px,\n 'mask-size': px,\n // Width and height properties\n height: px,\n width: px,\n 'min-height': px,\n 'max-height': px,\n 'min-width': px,\n 'max-width': px,\n // Position properties\n bottom: px,\n left: px,\n top: px,\n right: px,\n inset: px,\n 'inset-block': px,\n 'inset-block-end': px,\n 'inset-block-start': px,\n 'inset-inline': px,\n 'inset-inline-end': px,\n 'inset-inline-start': px,\n // Shadow properties\n 'box-shadow': px,\n 'text-shadow': px,\n // Column properties\n 'column-gap': px,\n 'column-rule': px,\n 'column-rule-width': px,\n 'column-width': px,\n // Font and text properties\n 'font-size': px,\n 'font-size-delta': px,\n 'letter-spacing': px,\n 'text-decoration-thickness': px,\n 'text-indent': px,\n 'text-stroke': px,\n 'text-stroke-width': px,\n 'word-spacing': px,\n // Motion properties\n motion: px,\n 'motion-offset': px,\n // Outline properties\n outline: px,\n 'outline-offset': px,\n 'outline-width': px,\n // Perspective properties\n perspective: px,\n 'perspective-origin-x': percent,\n 'perspective-origin-y': percent,\n // Transform properties\n 'transform-origin': percent,\n 'transform-origin-x': percent,\n 'transform-origin-y': percent,\n 'transform-origin-z': percent,\n // Transition properties\n 'transition-delay': ms,\n 'transition-duration': ms,\n // Alignment properties\n 'vertical-align': px,\n 'flex-basis': px,\n // Some random properties\n 'shape-margin': px,\n size: px,\n gap: px,\n // Grid properties\n grid: px,\n 'grid-gap': px,\n 'row-gap': px,\n 'grid-row-gap': px,\n 'grid-column-gap': px,\n 'grid-template-rows': px,\n 'grid-template-columns': px,\n 'grid-auto-rows': px,\n 'grid-auto-columns': px,\n // Not existing properties.\n // Used to avoid issues with jss-plugin-expand integration.\n 'box-shadow-x': px,\n 'box-shadow-y': px,\n 'box-shadow-blur': px,\n 'box-shadow-spread': px,\n 'font-line-height': px,\n 'text-shadow-x': px,\n 'text-shadow-y': px,\n 'text-shadow-blur': px\n};\n\n/**\n * Clones the object and adds a camel cased property version.\n */\n\nfunction addCamelCasedVersion(obj) {\n var regExp = /(-[a-z])/g;\n\n var replace = function replace(str) {\n return str[1].toUpperCase();\n };\n\n var newObj = {};\n\n for (var key in obj) {\n newObj[key] = obj[key];\n newObj[key.replace(regExp, replace)] = obj[key];\n }\n\n return newObj;\n}\n\nvar units = addCamelCasedVersion(defaultUnits);\n/**\n * Recursive deep style passing function\n */\n\nfunction iterate(prop, value, options) {\n if (value == null) return value;\n\n if (Array.isArray(value)) {\n for (var i = 0; i < value.length; i++) {\n value[i] = iterate(prop, value[i], options);\n }\n } else if (typeof value === 'object') {\n if (prop === 'fallbacks') {\n for (var innerProp in value) {\n value[innerProp] = iterate(innerProp, value[innerProp], options);\n }\n } else {\n for (var _innerProp in value) {\n value[_innerProp] = iterate(prop + \"-\" + _innerProp, value[_innerProp], options);\n }\n } // eslint-disable-next-line no-restricted-globals\n\n } else if (typeof value === 'number' && isNaN(value) === false) {\n var unit = options[prop] || units[prop]; // Add the unit if available, except for the special case of 0px.\n\n if (unit && !(value === 0 && unit === px)) {\n return typeof unit === 'function' ? unit(value).toString() : \"\" + value + unit;\n }\n\n return value.toString();\n }\n\n return value;\n}\n/**\n * Add unit to numeric values.\n */\n\n\nfunction defaultUnit(options) {\n if (options === void 0) {\n options = {};\n }\n\n var camelCasedOptions = addCamelCasedVersion(options);\n\n function onProcessStyle(style, rule) {\n if (rule.type !== 'style') return style;\n\n for (var prop in style) {\n style[prop] = iterate(prop, style[prop], camelCasedOptions);\n }\n\n return style;\n }\n\n function onChangeValue(value, prop) {\n return iterate(prop, value, camelCasedOptions);\n }\n\n return {\n onProcessStyle: onProcessStyle,\n onChangeValue: onChangeValue\n };\n}\n\nexport default defaultUnit;\n","import isInBrowser from 'is-in-browser';\nimport _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';\n\n// Export javascript style and css style vendor prefixes.\nvar js = '';\nvar css = '';\nvar vendor = '';\nvar browser = '';\nvar isTouch = isInBrowser && 'ontouchstart' in document.documentElement; // We should not do anything if required serverside.\n\nif (isInBrowser) {\n // Order matters. We need to check Webkit the last one because\n // other vendors use to add Webkit prefixes to some properties\n var jsCssMap = {\n Moz: '-moz-',\n ms: '-ms-',\n O: '-o-',\n Webkit: '-webkit-'\n };\n\n var _document$createEleme = document.createElement('p'),\n style = _document$createEleme.style;\n\n var testProp = 'Transform';\n\n for (var key in jsCssMap) {\n if (key + testProp in style) {\n js = key;\n css = jsCssMap[key];\n break;\n }\n } // Correctly detect the Edge browser.\n\n\n if (js === 'Webkit' && 'msHyphens' in style) {\n js = 'ms';\n css = jsCssMap.ms;\n browser = 'edge';\n } // Correctly detect the Safari browser.\n\n\n if (js === 'Webkit' && '-apple-trailing-word' in style) {\n vendor = 'apple';\n }\n}\n/**\n * Vendor prefix string for the current browser.\n *\n * @type {{js: String, css: String, vendor: String, browser: String}}\n * @api public\n */\n\n\nvar prefix = {\n js: js,\n css: css,\n vendor: vendor,\n browser: browser,\n isTouch: isTouch\n};\n\n/**\n * Test if a keyframe at-rule should be prefixed or not\n *\n * @param {String} vendor prefix string for the current browser.\n * @return {String}\n * @api public\n */\n\nfunction supportedKeyframes(key) {\n // Keyframes is already prefixed. e.g. key = '@-webkit-keyframes a'\n if (key[1] === '-') return key; // No need to prefix IE/Edge. Older browsers will ignore unsupported rules.\n // https://caniuse.com/#search=keyframes\n\n if (prefix.js === 'ms') return key;\n return \"@\" + prefix.css + \"keyframes\" + key.substr(10);\n}\n\n// https://caniuse.com/#search=appearance\n\nvar appearence = {\n noPrefill: ['appearance'],\n supportedProperty: function supportedProperty(prop) {\n if (prop !== 'appearance') return false;\n if (prefix.js === 'ms') return \"-webkit-\" + prop;\n return prefix.css + prop;\n }\n};\n\n// https://caniuse.com/#search=color-adjust\n\nvar colorAdjust = {\n noPrefill: ['color-adjust'],\n supportedProperty: function supportedProperty(prop) {\n if (prop !== 'color-adjust') return false;\n if (prefix.js === 'Webkit') return prefix.css + \"print-\" + prop;\n return prop;\n }\n};\n\nvar regExp = /[-\\s]+(.)?/g;\n/**\n * Replaces the letter with the capital letter\n *\n * @param {String} match\n * @param {String} c\n * @return {String}\n * @api private\n */\n\nfunction toUpper(match, c) {\n return c ? c.toUpperCase() : '';\n}\n/**\n * Convert dash separated strings to camel-cased.\n *\n * @param {String} str\n * @return {String}\n * @api private\n */\n\n\nfunction camelize(str) {\n return str.replace(regExp, toUpper);\n}\n\n/**\n * Convert dash separated strings to pascal cased.\n *\n * @param {String} str\n * @return {String}\n * @api private\n */\n\nfunction pascalize(str) {\n return camelize(\"-\" + str);\n}\n\n// but we can use a longhand property instead.\n// https://caniuse.com/#search=mask\n\nvar mask = {\n noPrefill: ['mask'],\n supportedProperty: function supportedProperty(prop, style) {\n if (!/^mask/.test(prop)) return false;\n\n if (prefix.js === 'Webkit') {\n var longhand = 'mask-image';\n\n if (camelize(longhand) in style) {\n return prop;\n }\n\n if (prefix.js + pascalize(longhand) in style) {\n return prefix.css + prop;\n }\n }\n\n return prop;\n }\n};\n\n// https://caniuse.com/#search=text-orientation\n\nvar textOrientation = {\n noPrefill: ['text-orientation'],\n supportedProperty: function supportedProperty(prop) {\n if (prop !== 'text-orientation') return false;\n\n if (prefix.vendor === 'apple' && !prefix.isTouch) {\n return prefix.css + prop;\n }\n\n return prop;\n }\n};\n\n// https://caniuse.com/#search=transform\n\nvar transform = {\n noPrefill: ['transform'],\n supportedProperty: function supportedProperty(prop, style, options) {\n if (prop !== 'transform') return false;\n\n if (options.transform) {\n return prop;\n }\n\n return prefix.css + prop;\n }\n};\n\n// https://caniuse.com/#search=transition\n\nvar transition = {\n noPrefill: ['transition'],\n supportedProperty: function supportedProperty(prop, style, options) {\n if (prop !== 'transition') return false;\n\n if (options.transition) {\n return prop;\n }\n\n return prefix.css + prop;\n }\n};\n\n// https://caniuse.com/#search=writing-mode\n\nvar writingMode = {\n noPrefill: ['writing-mode'],\n supportedProperty: function supportedProperty(prop) {\n if (prop !== 'writing-mode') return false;\n\n if (prefix.js === 'Webkit' || prefix.js === 'ms' && prefix.browser !== 'edge') {\n return prefix.css + prop;\n }\n\n return prop;\n }\n};\n\n// https://caniuse.com/#search=user-select\n\nvar userSelect = {\n noPrefill: ['user-select'],\n supportedProperty: function supportedProperty(prop) {\n if (prop !== 'user-select') return false;\n\n if (prefix.js === 'Moz' || prefix.js === 'ms' || prefix.vendor === 'apple') {\n return prefix.css + prop;\n }\n\n return prop;\n }\n};\n\n// https://caniuse.com/#search=multicolumn\n// https://github.com/postcss/autoprefixer/issues/491\n// https://github.com/postcss/autoprefixer/issues/177\n\nvar breakPropsOld = {\n supportedProperty: function supportedProperty(prop, style) {\n if (!/^break-/.test(prop)) return false;\n\n if (prefix.js === 'Webkit') {\n var jsProp = \"WebkitColumn\" + pascalize(prop);\n return jsProp in style ? prefix.css + \"column-\" + prop : false;\n }\n\n if (prefix.js === 'Moz') {\n var _jsProp = \"page\" + pascalize(prop);\n\n return _jsProp in style ? \"page-\" + prop : false;\n }\n\n return false;\n }\n};\n\n// See https://github.com/postcss/autoprefixer/issues/324.\n\nvar inlineLogicalOld = {\n supportedProperty: function supportedProperty(prop, style) {\n if (!/^(border|margin|padding)-inline/.test(prop)) return false;\n if (prefix.js === 'Moz') return prop;\n var newProp = prop.replace('-inline', '');\n return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;\n }\n};\n\n// Camelization is required because we can't test using.\n// CSS syntax for e.g. in FF.\n\nvar unprefixed = {\n supportedProperty: function supportedProperty(prop, style) {\n return camelize(prop) in style ? prop : false;\n }\n};\n\nvar prefixed = {\n supportedProperty: function supportedProperty(prop, style) {\n var pascalized = pascalize(prop); // Return custom CSS variable without prefixing.\n\n if (prop[0] === '-') return prop; // Return already prefixed value without prefixing.\n\n if (prop[0] === '-' && prop[1] === '-') return prop;\n if (prefix.js + pascalized in style) return prefix.css + prop; // Try webkit fallback.\n\n if (prefix.js !== 'Webkit' && \"Webkit\" + pascalized in style) return \"-webkit-\" + prop;\n return false;\n }\n};\n\n// https://caniuse.com/#search=scroll-snap\n\nvar scrollSnap = {\n supportedProperty: function supportedProperty(prop) {\n if (prop.substring(0, 11) !== 'scroll-snap') return false;\n\n if (prefix.js === 'ms') {\n return \"\" + prefix.css + prop;\n }\n\n return prop;\n }\n};\n\n// https://caniuse.com/#search=overscroll-behavior\n\nvar overscrollBehavior = {\n supportedProperty: function supportedProperty(prop) {\n if (prop !== 'overscroll-behavior') return false;\n\n if (prefix.js === 'ms') {\n return prefix.css + \"scroll-chaining\";\n }\n\n return prop;\n }\n};\n\nvar propMap = {\n 'flex-grow': 'flex-positive',\n 'flex-shrink': 'flex-negative',\n 'flex-basis': 'flex-preferred-size',\n 'justify-content': 'flex-pack',\n order: 'flex-order',\n 'align-items': 'flex-align',\n 'align-content': 'flex-line-pack' // 'align-self' is handled by 'align-self' plugin.\n\n}; // Support old flex spec from 2012.\n\nvar flex2012 = {\n supportedProperty: function supportedProperty(prop, style) {\n var newProp = propMap[prop];\n if (!newProp) return false;\n return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;\n }\n};\n\nvar propMap$1 = {\n flex: 'box-flex',\n 'flex-grow': 'box-flex',\n 'flex-direction': ['box-orient', 'box-direction'],\n order: 'box-ordinal-group',\n 'align-items': 'box-align',\n 'flex-flow': ['box-orient', 'box-direction'],\n 'justify-content': 'box-pack'\n};\nvar propKeys = Object.keys(propMap$1);\n\nvar prefixCss = function prefixCss(p) {\n return prefix.css + p;\n}; // Support old flex spec from 2009.\n\n\nvar flex2009 = {\n supportedProperty: function supportedProperty(prop, style, _ref) {\n var multiple = _ref.multiple;\n\n if (propKeys.indexOf(prop) > -1) {\n var newProp = propMap$1[prop];\n\n if (!Array.isArray(newProp)) {\n return prefix.js + pascalize(newProp) in style ? prefix.css + newProp : false;\n }\n\n if (!multiple) return false;\n\n for (var i = 0; i < newProp.length; i++) {\n if (!(prefix.js + pascalize(newProp[0]) in style)) {\n return false;\n }\n }\n\n return newProp.map(prefixCss);\n }\n\n return false;\n }\n};\n\n// plugins = [\n// ...plugins,\n// breakPropsOld,\n// inlineLogicalOld,\n// unprefixed,\n// prefixed,\n// scrollSnap,\n// flex2012,\n// flex2009\n// ]\n// Plugins without 'noPrefill' value, going last.\n// 'flex-*' plugins should be at the bottom.\n// 'flex2009' going after 'flex2012'.\n// 'prefixed' going after 'unprefixed'\n\nvar plugins = [appearence, colorAdjust, mask, textOrientation, transform, transition, writingMode, userSelect, breakPropsOld, inlineLogicalOld, unprefixed, prefixed, scrollSnap, overscrollBehavior, flex2012, flex2009];\nvar propertyDetectors = plugins.filter(function (p) {\n return p.supportedProperty;\n}).map(function (p) {\n return p.supportedProperty;\n});\nvar noPrefill = plugins.filter(function (p) {\n return p.noPrefill;\n}).reduce(function (a, p) {\n a.push.apply(a, _toConsumableArray(p.noPrefill));\n return a;\n}, []);\n\nvar el;\nvar cache = {};\n\nif (isInBrowser) {\n el = document.createElement('p'); // We test every property on vendor prefix requirement.\n // Once tested, result is cached. It gives us up to 70% perf boost.\n // http://jsperf.com/element-style-object-access-vs-plain-object\n //\n // Prefill cache with known css properties to reduce amount of\n // properties we need to feature test at runtime.\n // http://davidwalsh.name/vendor-prefix\n\n var computed = window.getComputedStyle(document.documentElement, '');\n\n for (var key$1 in computed) {\n // eslint-disable-next-line no-restricted-globals\n if (!isNaN(key$1)) cache[computed[key$1]] = computed[key$1];\n } // Properties that cannot be correctly detected using the\n // cache prefill method.\n\n\n noPrefill.forEach(function (x) {\n return delete cache[x];\n });\n}\n/**\n * Test if a property is supported, returns supported property with vendor\n * prefix if required. Returns `false` if not supported.\n *\n * @param {String} prop dash separated\n * @param {Object} [options]\n * @return {String|Boolean}\n * @api public\n */\n\n\nfunction supportedProperty(prop, options) {\n if (options === void 0) {\n options = {};\n }\n\n // For server-side rendering.\n if (!el) return prop; // Remove cache for benchmark tests or return property from the cache.\n\n if (process.env.NODE_ENV !== 'benchmark' && cache[prop] != null) {\n return cache[prop];\n } // Check if 'transition' or 'transform' natively supported in browser.\n\n\n if (prop === 'transition' || prop === 'transform') {\n options[prop] = prop in el.style;\n } // Find a plugin for current prefix property.\n\n\n for (var i = 0; i < propertyDetectors.length; i++) {\n cache[prop] = propertyDetectors[i](prop, el.style, options); // Break loop, if value found.\n\n if (cache[prop]) break;\n } // Reset styles for current property.\n // Firefox can even throw an error for invalid properties, e.g., \"0\".\n\n\n try {\n el.style[prop] = '';\n } catch (err) {\n return false;\n }\n\n return cache[prop];\n}\n\nvar cache$1 = {};\nvar transitionProperties = {\n transition: 1,\n 'transition-property': 1,\n '-webkit-transition': 1,\n '-webkit-transition-property': 1\n};\nvar transPropsRegExp = /(^\\s*[\\w-]+)|, (\\s*[\\w-]+)(?![^()]*\\))/g;\nvar el$1;\n/**\n * Returns prefixed value transition/transform if needed.\n *\n * @param {String} match\n * @param {String} p1\n * @param {String} p2\n * @return {String}\n * @api private\n */\n\nfunction prefixTransitionCallback(match, p1, p2) {\n if (p1 === 'var') return 'var';\n if (p1 === 'all') return 'all';\n if (p2 === 'all') return ', all';\n var prefixedValue = p1 ? supportedProperty(p1) : \", \" + supportedProperty(p2);\n if (!prefixedValue) return p1 || p2;\n return prefixedValue;\n}\n\nif (isInBrowser) el$1 = document.createElement('p');\n/**\n * Returns prefixed value if needed. Returns `false` if value is not supported.\n *\n * @param {String} property\n * @param {String} value\n * @return {String|Boolean}\n * @api public\n */\n\nfunction supportedValue(property, value) {\n // For server-side rendering.\n var prefixedValue = value;\n if (!el$1 || property === 'content') return value; // It is a string or a number as a string like '1'.\n // We want only prefixable values here.\n // eslint-disable-next-line no-restricted-globals\n\n if (typeof prefixedValue !== 'string' || !isNaN(parseInt(prefixedValue, 10))) {\n return prefixedValue;\n } // Create cache key for current value.\n\n\n var cacheKey = property + prefixedValue; // Remove cache for benchmark tests or return value from cache.\n\n if (process.env.NODE_ENV !== 'benchmark' && cache$1[cacheKey] != null) {\n return cache$1[cacheKey];\n } // IE can even throw an error in some cases, for e.g. style.content = 'bar'.\n\n\n try {\n // Test value as it is.\n el$1.style[property] = prefixedValue;\n } catch (err) {\n // Return false if value not supported.\n cache$1[cacheKey] = false;\n return false;\n } // If 'transition' or 'transition-property' property.\n\n\n if (transitionProperties[property]) {\n prefixedValue = prefixedValue.replace(transPropsRegExp, prefixTransitionCallback);\n } else if (el$1.style[property] === '') {\n // Value with a vendor prefix.\n prefixedValue = prefix.css + prefixedValue; // Hardcode test to convert \"flex\" to \"-ms-flexbox\" for IE10.\n\n if (prefixedValue === '-ms-flex') el$1.style[property] = '-ms-flexbox'; // Test prefixed value.\n\n el$1.style[property] = prefixedValue; // Return false if value not supported.\n\n if (el$1.style[property] === '') {\n cache$1[cacheKey] = false;\n return false;\n }\n } // Reset styles for current property.\n\n\n el$1.style[property] = ''; // Write current value to cache.\n\n cache$1[cacheKey] = prefixedValue;\n return cache$1[cacheKey];\n}\n\nexport { prefix, supportedKeyframes, supportedProperty, supportedValue };\n","import { supportedKeyframes, supportedValue, supportedProperty } from 'css-vendor';\nimport { toCssValue } from 'jss';\n\n/**\n * Add vendor prefix to a property name when needed.\n */\n\nfunction jssVendorPrefixer() {\n function onProcessRule(rule) {\n if (rule.type === 'keyframes') {\n var atRule = rule;\n atRule.at = supportedKeyframes(atRule.at);\n }\n }\n\n function prefixStyle(style) {\n for (var prop in style) {\n var value = style[prop];\n\n if (prop === 'fallbacks' && Array.isArray(value)) {\n style[prop] = value.map(prefixStyle);\n continue;\n }\n\n var changeProp = false;\n var supportedProp = supportedProperty(prop);\n if (supportedProp && supportedProp !== prop) changeProp = true;\n var changeValue = false;\n var supportedValue$1 = supportedValue(supportedProp, toCssValue(value));\n if (supportedValue$1 && supportedValue$1 !== value) changeValue = true;\n\n if (changeProp || changeValue) {\n if (changeProp) delete style[prop];\n style[supportedProp || prop] = supportedValue$1 || value;\n }\n }\n\n return style;\n }\n\n function onProcessStyle(style, rule) {\n if (rule.type !== 'style') return style;\n return prefixStyle(style);\n }\n\n function onChangeValue(value, prop) {\n return supportedValue(prop, toCssValue(value)) || value;\n }\n\n return {\n onProcessRule: onProcessRule,\n onProcessStyle: onProcessStyle,\n onChangeValue: onChangeValue\n };\n}\n\nexport default jssVendorPrefixer;\n","/**\n * Sort props by length.\n */\nfunction jssPropsSort() {\n var sort = function sort(prop0, prop1) {\n if (prop0.length === prop1.length) {\n return prop0 > prop1 ? 1 : -1;\n }\n\n return prop0.length - prop1.length;\n };\n\n return {\n onProcessStyle: function onProcessStyle(style, rule) {\n if (rule.type !== 'style') return style;\n var newStyle = {};\n var props = Object.keys(style).sort(sort);\n\n for (var i = 0; i < props.length; i++) {\n newStyle[props[i]] = style[props[i]];\n }\n\n return newStyle;\n }\n };\n}\n\nexport default jssPropsSort;\n","import functions from 'jss-plugin-rule-value-function';\nimport global from 'jss-plugin-global';\nimport nested from 'jss-plugin-nested';\nimport camelCase from 'jss-plugin-camel-case';\nimport defaultUnit from 'jss-plugin-default-unit';\nimport vendorPrefixer from 'jss-plugin-vendor-prefixer';\nimport propsSort from 'jss-plugin-props-sort'; // Subset of jss-preset-default with only the plugins the Material-UI components are using.\n\nexport default function jssPreset() {\n return {\n plugins: [functions(), global(), nested(), camelCase(), defaultUnit(), // Disable the vendor prefixer server-side, it does nothing.\n // This way, we can get a performance boost.\n // In the documentation, we are using `autoprefixer` to solve this problem.\n typeof window === 'undefined' ? null : vendorPrefixer(), propsSort()]\n };\n}","// Used https://github.com/thinkloop/multi-key-cache as inspiration\nvar multiKeyStore = {\n set: function set(cache, key1, key2, value) {\n var subCache = cache.get(key1);\n\n if (!subCache) {\n subCache = new Map();\n cache.set(key1, subCache);\n }\n\n subCache.set(key2, value);\n },\n get: function get(cache, key1, key2) {\n var subCache = cache.get(key1);\n return subCache ? subCache.get(key2) : undefined;\n },\n delete: function _delete(cache, key1, key2) {\n var subCache = cache.get(key1);\n subCache.delete(key2);\n }\n};\nexport default multiKeyStore;","/* eslint-disable import/prefer-default-export */\n// Global index counter to preserve source order.\n// We create the style sheet during the creation of the component,\n// children are handled after the parents, so the order of style elements would be parent->child.\n// It is a problem though when a parent passes a className\n// which needs to override any child's styles.\n// StyleSheet of the child has a higher specificity, because of the source order.\n// So our solution is to render sheets them in the reverse order child->sheet, so\n// that parent has a higher specificity.\nvar indexCounter = -1e9;\nexport function increment() {\n indexCounter += 1;\n\n if (process.env.NODE_ENV !== 'production') {\n if (indexCounter >= 0) {\n console.warn(['Material-UI: You might have a memory leak.', 'The indexCounter is not supposed to grow that much.'].join('\\n'));\n }\n }\n\n return indexCounter;\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport { deepmerge } from '@material-ui/utils';\nimport noopTheme from './noopTheme';\nexport default function getStylesCreator(stylesOrCreator) {\n var themingEnabled = typeof stylesOrCreator === 'function';\n\n if (process.env.NODE_ENV !== 'production') {\n if (_typeof(stylesOrCreator) !== 'object' && !themingEnabled) {\n console.error(['Material-UI: The `styles` argument provided is invalid.', 'You need to provide a function generating the styles or a styles object.'].join('\\n'));\n }\n }\n\n return {\n create: function create(theme, name) {\n var styles;\n\n try {\n styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;\n } catch (err) {\n if (process.env.NODE_ENV !== 'production') {\n if (themingEnabled === true && theme === noopTheme) {\n // TODO: prepend error message/name instead\n console.error(['Material-UI: The `styles` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\\n'));\n }\n }\n\n throw err;\n }\n\n if (!name || !theme.overrides || !theme.overrides[name]) {\n return styles;\n }\n\n var overrides = theme.overrides[name];\n\n var stylesWithOverrides = _extends({}, styles);\n\n Object.keys(overrides).forEach(function (key) {\n if (process.env.NODE_ENV !== 'production') {\n if (!stylesWithOverrides[key]) {\n console.warn(['Material-UI: You are trying to override a style that does not exist.', \"Fix the `\".concat(key, \"` key of `theme.overrides.\").concat(name, \"`.\")].join('\\n'));\n }\n }\n\n stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key]);\n });\n return stylesWithOverrides;\n },\n options: {}\n };\n}","// We use the same empty object to ref count the styles that don't need a theme object.\nvar noopTheme = {};\nexport default noopTheme;","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport React from 'react';\nimport { getDynamicStyles } from 'jss';\nimport mergeClasses from '../mergeClasses';\nimport multiKeyStore from './multiKeyStore';\nimport useTheme from '../useTheme';\nimport { StylesContext } from '../StylesProvider';\nimport { increment } from './indexCounter';\nimport getStylesCreator from '../getStylesCreator';\nimport noopTheme from '../getStylesCreator/noopTheme';\n\nfunction getClasses(_ref, classes, Component) {\n var state = _ref.state,\n stylesOptions = _ref.stylesOptions;\n\n if (stylesOptions.disableGeneration) {\n return classes || {};\n }\n\n if (!state.cacheClasses) {\n state.cacheClasses = {\n // Cache for the finalized classes value.\n value: null,\n // Cache for the last used classes prop pointer.\n lastProp: null,\n // Cache for the last used rendered classes pointer.\n lastJSS: {}\n };\n } // Tracks if either the rendered classes or classes prop has changed,\n // requiring the generation of a new finalized classes object.\n\n\n var generate = false;\n\n if (state.classes !== state.cacheClasses.lastJSS) {\n state.cacheClasses.lastJSS = state.classes;\n generate = true;\n }\n\n if (classes !== state.cacheClasses.lastProp) {\n state.cacheClasses.lastProp = classes;\n generate = true;\n }\n\n if (generate) {\n state.cacheClasses.value = mergeClasses({\n baseClasses: state.cacheClasses.lastJSS,\n newClasses: classes,\n Component: Component\n });\n }\n\n return state.cacheClasses.value;\n}\n\nfunction attach(_ref2, props) {\n var state = _ref2.state,\n theme = _ref2.theme,\n stylesOptions = _ref2.stylesOptions,\n stylesCreator = _ref2.stylesCreator,\n name = _ref2.name;\n\n if (stylesOptions.disableGeneration) {\n return;\n }\n\n var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);\n\n if (!sheetManager) {\n sheetManager = {\n refs: 0,\n staticSheet: null,\n dynamicStyles: null\n };\n multiKeyStore.set(stylesOptions.sheetsManager, stylesCreator, theme, sheetManager);\n }\n\n var options = _extends({}, stylesCreator.options, stylesOptions, {\n theme: theme,\n flip: typeof stylesOptions.flip === 'boolean' ? stylesOptions.flip : theme.direction === 'rtl'\n });\n\n options.generateId = options.serverGenerateClassName || options.generateClassName;\n var sheetsRegistry = stylesOptions.sheetsRegistry;\n\n if (sheetManager.refs === 0) {\n var staticSheet;\n\n if (stylesOptions.sheetsCache) {\n staticSheet = multiKeyStore.get(stylesOptions.sheetsCache, stylesCreator, theme);\n }\n\n var styles = stylesCreator.create(theme, name);\n\n if (!staticSheet) {\n staticSheet = stylesOptions.jss.createStyleSheet(styles, _extends({\n link: false\n }, options));\n staticSheet.attach();\n\n if (stylesOptions.sheetsCache) {\n multiKeyStore.set(stylesOptions.sheetsCache, stylesCreator, theme, staticSheet);\n }\n }\n\n if (sheetsRegistry) {\n sheetsRegistry.add(staticSheet);\n }\n\n sheetManager.staticSheet = staticSheet;\n sheetManager.dynamicStyles = getDynamicStyles(styles);\n }\n\n if (sheetManager.dynamicStyles) {\n var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends({\n link: true\n }, options));\n dynamicSheet.update(props);\n dynamicSheet.attach();\n state.dynamicSheet = dynamicSheet;\n state.classes = mergeClasses({\n baseClasses: sheetManager.staticSheet.classes,\n newClasses: dynamicSheet.classes\n });\n\n if (sheetsRegistry) {\n sheetsRegistry.add(dynamicSheet);\n }\n } else {\n state.classes = sheetManager.staticSheet.classes;\n }\n\n sheetManager.refs += 1;\n}\n\nfunction update(_ref3, props) {\n var state = _ref3.state;\n\n if (state.dynamicSheet) {\n state.dynamicSheet.update(props);\n }\n}\n\nfunction detach(_ref4) {\n var state = _ref4.state,\n theme = _ref4.theme,\n stylesOptions = _ref4.stylesOptions,\n stylesCreator = _ref4.stylesCreator;\n\n if (stylesOptions.disableGeneration) {\n return;\n }\n\n var sheetManager = multiKeyStore.get(stylesOptions.sheetsManager, stylesCreator, theme);\n sheetManager.refs -= 1;\n var sheetsRegistry = stylesOptions.sheetsRegistry;\n\n if (sheetManager.refs === 0) {\n multiKeyStore.delete(stylesOptions.sheetsManager, stylesCreator, theme);\n stylesOptions.jss.removeStyleSheet(sheetManager.staticSheet);\n\n if (sheetsRegistry) {\n sheetsRegistry.remove(sheetManager.staticSheet);\n }\n }\n\n if (state.dynamicSheet) {\n stylesOptions.jss.removeStyleSheet(state.dynamicSheet);\n\n if (sheetsRegistry) {\n sheetsRegistry.remove(state.dynamicSheet);\n }\n }\n}\n\nfunction useSynchronousEffect(func, values) {\n var key = React.useRef([]);\n var output; // Store \"generation\" key. Just returns a new object every time\n\n var currentKey = React.useMemo(function () {\n return {};\n }, values); // eslint-disable-line react-hooks/exhaustive-deps\n // \"the first render\", or \"memo dropped the value\"\n\n if (key.current !== currentKey) {\n key.current = currentKey;\n output = func();\n }\n\n React.useEffect(function () {\n return function () {\n if (output) {\n output();\n }\n };\n }, [currentKey] // eslint-disable-line react-hooks/exhaustive-deps\n );\n}\n\nexport default function makeStyles(stylesOrCreator) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n var name = options.name,\n classNamePrefixOption = options.classNamePrefix,\n Component = options.Component,\n _options$defaultTheme = options.defaultTheme,\n defaultTheme = _options$defaultTheme === void 0 ? noopTheme : _options$defaultTheme,\n stylesOptions2 = _objectWithoutProperties(options, [\"name\", \"classNamePrefix\", \"Component\", \"defaultTheme\"]);\n\n var stylesCreator = getStylesCreator(stylesOrCreator);\n var classNamePrefix = name || classNamePrefixOption || 'makeStyles';\n stylesCreator.options = {\n index: increment(),\n name: name,\n meta: classNamePrefix,\n classNamePrefix: classNamePrefix\n };\n\n var useStyles = function useStyles() {\n var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var theme = useTheme() || defaultTheme;\n\n var stylesOptions = _extends({}, React.useContext(StylesContext), stylesOptions2);\n\n var instance = React.useRef();\n var shouldUpdate = React.useRef();\n useSynchronousEffect(function () {\n var current = {\n name: name,\n state: {},\n stylesCreator: stylesCreator,\n stylesOptions: stylesOptions,\n theme: theme\n };\n attach(current, props);\n shouldUpdate.current = false;\n instance.current = current;\n return function () {\n detach(current);\n };\n }, [theme, stylesCreator]);\n React.useEffect(function () {\n if (shouldUpdate.current) {\n update(instance.current, props);\n }\n\n shouldUpdate.current = true;\n });\n var classes = getClasses(instance.current, props.classes, Component);\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useDebugValue(classes);\n }\n\n return classes;\n };\n\n return useStyles;\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport { getDisplayName } from '@material-ui/utils';\nexport default function mergeClasses() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var baseClasses = options.baseClasses,\n newClasses = options.newClasses,\n Component = options.Component;\n\n if (!newClasses) {\n return baseClasses;\n }\n\n var nextClasses = _extends({}, baseClasses);\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof newClasses === 'string') {\n console.error([\"Material-UI: The value `\".concat(newClasses, \"` \") + \"provided to the classes prop of \".concat(getDisplayName(Component), \" is incorrect.\"), 'You might want to use the className prop instead.'].join('\\n'));\n return baseClasses;\n }\n }\n\n Object.keys(newClasses).forEach(function (key) {\n if (process.env.NODE_ENV !== 'production') {\n if (!baseClasses[key] && newClasses[key]) {\n console.error([\"Material-UI: The key `\".concat(key, \"` \") + \"provided to the classes prop is not implemented in \".concat(getDisplayName(Component), \".\"), \"You can only override one of the following: \".concat(Object.keys(baseClasses).join(','), \".\")].join('\\n'));\n }\n\n if (newClasses[key] && typeof newClasses[key] !== 'string') {\n console.error([\"Material-UI: The key `\".concat(key, \"` \") + \"provided to the classes prop is not valid for \".concat(getDisplayName(Component), \".\"), \"You need to provide a non empty string instead of: \".concat(newClasses[key], \".\")].join('\\n'));\n }\n }\n\n if (newClasses[key]) {\n nextClasses[key] = \"\".concat(baseClasses[key], \" \").concat(newClasses[key]);\n }\n });\n return nextClasses;\n}","import React from 'react';\nvar ThemeContext = React.createContext(null);\n\nif (process.env.NODE_ENV !== 'production') {\n ThemeContext.displayName = 'ThemeContext';\n}\n\nexport default ThemeContext;","import React from 'react';\nimport ThemeContext from './ThemeContext';\nexport default function useTheme() {\n var theme = React.useContext(ThemeContext);\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}","import _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _typeof from \"@babel/runtime/helpers/esm/typeof\";\nimport PropTypes from 'prop-types';\nimport merge from './merge'; // The breakpoint **start** at this value.\n// For instance with the first breakpoint xs: [xs, sm[.\n\nvar values = {\n xs: 0,\n sm: 600,\n md: 960,\n lg: 1280,\n xl: 1920\n};\nvar defaultBreakpoints = {\n // Sorted ASC by size. That's important.\n // It can't be configured as it's used statically for propTypes.\n keys: ['xs', 'sm', 'md', 'lg', 'xl'],\n up: function up(key) {\n return \"@media (min-width:\".concat(values[key], \"px)\");\n }\n};\nexport function handleBreakpoints(props, propValue, styleFromPropValue) {\n if (process.env.NODE_ENV !== 'production') {\n if (!props.theme) {\n console.error('Material-UI: You are calling a style function without a theme value.');\n }\n }\n\n if (Array.isArray(propValue)) {\n var themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;\n return propValue.reduce(function (acc, item, index) {\n acc[themeBreakpoints.up(themeBreakpoints.keys[index])] = styleFromPropValue(propValue[index]);\n return acc;\n }, {});\n }\n\n if (_typeof(propValue) === 'object') {\n var _themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;\n\n return Object.keys(propValue).reduce(function (acc, breakpoint) {\n acc[_themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]);\n return acc;\n }, {});\n }\n\n var output = styleFromPropValue(propValue);\n return output;\n}\n\nfunction breakpoints(styleFunction) {\n var newStyleFunction = function newStyleFunction(props) {\n var base = styleFunction(props);\n var themeBreakpoints = props.theme.breakpoints || defaultBreakpoints;\n var extended = themeBreakpoints.keys.reduce(function (acc, key) {\n if (props[key]) {\n acc = acc || {};\n acc[themeBreakpoints.up(key)] = styleFunction(_extends({\n theme: props.theme\n }, props[key]));\n }\n\n return acc;\n }, null);\n return merge(base, extended);\n };\n\n newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {\n xs: PropTypes.object,\n sm: PropTypes.object,\n md: PropTypes.object,\n lg: PropTypes.object,\n xl: PropTypes.object\n }) : {};\n newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl'].concat(_toConsumableArray(styleFunction.filterProps));\n return newStyleFunction;\n}\n\nexport default breakpoints;","import { deepmerge } from '@material-ui/utils';\n\nfunction merge(acc, item) {\n if (!item) {\n return acc;\n }\n\n return deepmerge(acc, item, {\n clone: false // No need to clone deep, it's way faster.\n\n });\n}\n\nexport default merge;","import _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport responsivePropType from './responsivePropType';\nimport { handleBreakpoints } from './breakpoints';\nimport merge from './merge';\nimport memoize from './memoize';\nvar properties = {\n m: 'margin',\n p: 'padding'\n};\nvar directions = {\n t: 'Top',\n r: 'Right',\n b: 'Bottom',\n l: 'Left',\n x: ['Left', 'Right'],\n y: ['Top', 'Bottom']\n};\nvar aliases = {\n marginX: 'mx',\n marginY: 'my',\n paddingX: 'px',\n paddingY: 'py'\n}; // memoize() impact:\n// From 300,000 ops/sec\n// To 350,000 ops/sec\n\nvar getCssProperties = memoize(function (prop) {\n // It's not a shorthand notation.\n if (prop.length > 2) {\n if (aliases[prop]) {\n prop = aliases[prop];\n } else {\n return [prop];\n }\n }\n\n var _prop$split = prop.split(''),\n _prop$split2 = _slicedToArray(_prop$split, 2),\n a = _prop$split2[0],\n b = _prop$split2[1];\n\n var property = properties[a];\n var direction = directions[b] || '';\n return Array.isArray(direction) ? direction.map(function (dir) {\n return property + dir;\n }) : [property + direction];\n});\nvar spacingKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY'];\nexport function createUnarySpacing(theme) {\n var themeSpacing = theme.spacing || 8;\n\n if (typeof themeSpacing === 'number') {\n return function (abs) {\n if (process.env.NODE_ENV !== 'production') {\n if (typeof abs !== 'number') {\n console.error(\"Material-UI: Expected spacing argument to be a number, got \".concat(abs, \".\"));\n }\n }\n\n return themeSpacing * abs;\n };\n }\n\n if (Array.isArray(themeSpacing)) {\n return function (abs) {\n if (process.env.NODE_ENV !== 'production') {\n if (abs > themeSpacing.length - 1) {\n console.error([\"Material-UI: The value provided (\".concat(abs, \") overflows.\"), \"The supported values are: \".concat(JSON.stringify(themeSpacing), \".\"), \"\".concat(abs, \" > \").concat(themeSpacing.length - 1, \", you need to add the missing values.\")].join('\\n'));\n }\n }\n\n return themeSpacing[abs];\n };\n }\n\n if (typeof themeSpacing === 'function') {\n return themeSpacing;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n console.error([\"Material-UI: The `theme.spacing` value (\".concat(themeSpacing, \") is invalid.\"), 'It should be a number, an array or a function.'].join('\\n'));\n }\n\n return function () {\n return undefined;\n };\n}\n\nfunction getValue(transformer, propValue) {\n if (typeof propValue === 'string' || propValue == null) {\n return propValue;\n }\n\n var abs = Math.abs(propValue);\n var transformed = transformer(abs);\n\n if (propValue >= 0) {\n return transformed;\n }\n\n if (typeof transformed === 'number') {\n return -transformed;\n }\n\n return \"-\".concat(transformed);\n}\n\nfunction getStyleFromPropValue(cssProperties, transformer) {\n return function (propValue) {\n return cssProperties.reduce(function (acc, cssProperty) {\n acc[cssProperty] = getValue(transformer, propValue);\n return acc;\n }, {});\n };\n}\n\nfunction spacing(props) {\n var theme = props.theme;\n var transformer = createUnarySpacing(theme);\n return Object.keys(props).map(function (prop) {\n // Using a hash computation over an array iteration could be faster, but with only 28 items,\n // it's doesn't worth the bundle size.\n if (spacingKeys.indexOf(prop) === -1) {\n return null;\n }\n\n var cssProperties = getCssProperties(prop);\n var styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);\n var propValue = props[prop];\n return handleBreakpoints(props, propValue, styleFromPropValue);\n }).reduce(merge, {});\n}\n\nspacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce(function (obj, key) {\n obj[key] = responsivePropType;\n return obj;\n}, {}) : {};\nspacing.filterProps = spacingKeys;\nexport default spacing;","export default function memoize(fn) {\n var cache = {};\n return function (arg) {\n if (cache[arg] === undefined) {\n cache[arg] = fn(arg);\n }\n\n return cache[arg];\n };\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _typeof from \"@babel/runtime/helpers/esm/typeof\";\nexport function isPlainObject(item) {\n return item && _typeof(item) === 'object' && item.constructor === Object;\n}\nexport default function deepmerge(target, source) {\n var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {\n clone: true\n };\n var output = options.clone ? _extends({}, target) : target;\n\n if (isPlainObject(target) && isPlainObject(source)) {\n Object.keys(source).forEach(function (key) {\n // Avoid prototype pollution\n if (key === '__proto__') {\n return;\n }\n\n if (isPlainObject(source[key]) && key in target) {\n output[key] = deepmerge(target[key], source[key], options);\n } else {\n output[key] = source[key];\n }\n });\n }\n\n return output;\n}","/**\n * WARNING: Don't import this directly.\n * Use `MuiError` from `@material-ui/utils/macros/MuiError.macro` instead.\n * @param {number} code\n */\nexport default function formatMuiErrorMessage(code) {\n // Apply babel-plugin-transform-template-literals in loose mode\n // loose mode is safe iff we're concatenating primitives\n // see https://babeljs.io/docs/en/babel-plugin-transform-template-literals#loose\n\n /* eslint-disable prefer-template */\n var url = 'https://mui.com/production-error/?code=' + code;\n\n for (var i = 1; i < arguments.length; i += 1) {\n // rest params over-transpile for this case\n // eslint-disable-next-line prefer-rest-params\n url += '&args[]=' + encodeURIComponent(arguments[i]);\n }\n\n return 'Minified Material-UI error #' + code + '; visit ' + url + ' for the full message.';\n /* eslint-enable prefer-template */\n}","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _createSvgIcon = _interopRequireDefault(require(\"./utils/createSvgIcon\"));\nvar _jsxRuntime = require(\"react/jsx-runtime\");\nvar _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)(\"circle\", {\n cx: \"12\",\n cy: \"12\",\n r: \"8\"\n}), 'FiberManualRecord');\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _createSvgIcon = _interopRequireDefault(require(\"./utils/createSvgIcon\"));\nvar _jsxRuntime = require(\"react/jsx-runtime\");\nvar _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)(\"path\", {\n d: \"M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\n}), 'NavigateBefore');\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar _createSvgIcon = _interopRequireDefault(require(\"./utils/createSvgIcon\"));\nvar _jsxRuntime = require(\"react/jsx-runtime\");\nvar _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)(\"path\", {\n d: \"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\n}), 'NavigateNext');\nexports.default = _default;","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nObject.defineProperty(exports, \"default\", {\n enumerable: true,\n get: function () {\n return _utils.createSvgIcon;\n }\n});\nvar _utils = require(\"@mui/material/utils\");","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"children\", \"className\", \"color\", \"component\", \"fontSize\", \"htmlColor\", \"inheritViewBox\", \"titleAccess\", \"viewBox\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { unstable_composeClasses as composeClasses } from '@mui/base';\nimport capitalize from '../utils/capitalize';\nimport useThemeProps from '../styles/useThemeProps';\nimport styled from '../styles/styled';\nimport { getSvgIconUtilityClass } from './svgIconClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n color,\n fontSize,\n classes\n } = ownerState;\n const slots = {\n root: ['root', color !== 'inherit' && `color${capitalize(color)}`, `fontSize${capitalize(fontSize)}`]\n };\n return composeClasses(slots, getSvgIconUtilityClass, classes);\n};\nconst SvgIconRoot = styled('svg', {\n name: 'MuiSvgIcon',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, ownerState.color !== 'inherit' && styles[`color${capitalize(ownerState.color)}`], styles[`fontSize${capitalize(ownerState.fontSize)}`]];\n }\n})(({\n theme,\n ownerState\n}) => {\n var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _palette$ownerState$c, _palette, _palette$ownerState$c2, _palette2, _palette2$action, _palette3, _palette3$action;\n return {\n userSelect: 'none',\n width: '1em',\n height: '1em',\n display: 'inline-block',\n fill: 'currentColor',\n flexShrink: 0,\n transition: (_theme$transitions = theme.transitions) == null ? void 0 : (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {\n duration: (_theme$transitions2 = theme.transitions) == null ? void 0 : (_theme$transitions2$d = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2$d.shorter\n }),\n fontSize: {\n inherit: 'inherit',\n small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',\n medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',\n large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'\n }[ownerState.fontSize],\n // TODO v5 deprecate, v6 remove for sx\n color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null ? void 0 : (_palette$ownerState$c2 = _palette[ownerState.color]) == null ? void 0 : _palette$ownerState$c2.main) != null ? _palette$ownerState$c : {\n action: (_palette2 = (theme.vars || theme).palette) == null ? void 0 : (_palette2$action = _palette2.action) == null ? void 0 : _palette2$action.active,\n disabled: (_palette3 = (theme.vars || theme).palette) == null ? void 0 : (_palette3$action = _palette3.action) == null ? void 0 : _palette3$action.disabled,\n inherit: undefined\n }[ownerState.color]\n };\n});\nconst SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiSvgIcon'\n });\n const {\n children,\n className,\n color = 'inherit',\n component = 'svg',\n fontSize = 'medium',\n htmlColor,\n inheritViewBox = false,\n titleAccess,\n viewBox = '0 0 24 24'\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n color,\n component,\n fontSize,\n instanceFontSize: inProps.fontSize,\n inheritViewBox,\n viewBox\n });\n const more = {};\n if (!inheritViewBox) {\n more.viewBox = viewBox;\n }\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsxs(SvgIconRoot, _extends({\n as: component,\n className: clsx(classes.root, className),\n focusable: \"false\",\n color: htmlColor,\n \"aria-hidden\": titleAccess ? undefined : true,\n role: titleAccess ? 'img' : undefined,\n ref: ref\n }, more, other, {\n ownerState: ownerState,\n children: [children, titleAccess ? /*#__PURE__*/_jsx(\"title\", {\n children: titleAccess\n }) : null]\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? SvgIcon.propTypes /* remove-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 * Node passed into the SVG element.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The color of the component.\n * It supports both default and custom theme colors, which can be added as shown in the\n * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).\n * You can use the `htmlColor` prop to apply a color attribute to the SVG element.\n * @default 'inherit'\n */\n color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'action', 'disabled', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),\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 * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.\n * @default 'medium'\n */\n fontSize: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'large', 'medium', 'small']), PropTypes.string]),\n /**\n * Applies a color attribute to the SVG element.\n */\n htmlColor: PropTypes.string,\n /**\n * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`\n * prop will be ignored.\n * Useful when you want to reference a custom `component` and have `SvgIcon` pass that\n * `component`'s viewBox to the root node.\n * @default false\n */\n inheritViewBox: PropTypes.bool,\n /**\n * The shape-rendering attribute. The behavior of the different options is described on the\n * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).\n * If you are having issues with blurry icons you should investigate this prop.\n */\n shapeRendering: PropTypes.string,\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 * Provides a human-readable title for the element that contains it.\n * https://www.w3.org/TR/SVG-access/#Equivalent\n */\n titleAccess: PropTypes.string,\n /**\n * Allows you to redefine what the coordinates without units mean inside an SVG element.\n * For example, if the SVG element is 500 (width) by 200 (height),\n * and you pass viewBox=\"0 0 50 20\",\n * this means that the coordinates inside the SVG will go from the top left corner (0,0)\n * to bottom right (50,20) and each unit will be worth 10px.\n * @default '0 0 24 24'\n */\n viewBox: PropTypes.string\n} : void 0;\nSvgIcon.muiName = 'SvgIcon';\nexport default SvgIcon;","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getSvgIconUtilityClass(slot) {\n return generateUtilityClass('MuiSvgIcon', slot);\n}\nconst svgIconClasses = generateUtilityClasses('MuiSvgIcon', ['root', 'colorPrimary', 'colorSecondary', 'colorAction', 'colorError', 'colorDisabled', 'fontSizeInherit', 'fontSizeSmall', 'fontSizeMedium', 'fontSizeLarge']);\nexport default svgIconClasses;","const blue = {\n 50: '#e3f2fd',\n 100: '#bbdefb',\n 200: '#90caf9',\n 300: '#64b5f6',\n 400: '#42a5f5',\n 500: '#2196f3',\n 600: '#1e88e5',\n 700: '#1976d2',\n 800: '#1565c0',\n 900: '#0d47a1',\n A100: '#82b1ff',\n A200: '#448aff',\n A400: '#2979ff',\n A700: '#2962ff'\n};\nexport default blue;","const common = {\n black: '#000',\n white: '#fff'\n};\nexport default common;","const green = {\n 50: '#e8f5e9',\n 100: '#c8e6c9',\n 200: '#a5d6a7',\n 300: '#81c784',\n 400: '#66bb6a',\n 500: '#4caf50',\n 600: '#43a047',\n 700: '#388e3c',\n 800: '#2e7d32',\n 900: '#1b5e20',\n A100: '#b9f6ca',\n A200: '#69f0ae',\n A400: '#00e676',\n A700: '#00c853'\n};\nexport default green;","const grey = {\n 50: '#fafafa',\n 100: '#f5f5f5',\n 200: '#eeeeee',\n 300: '#e0e0e0',\n 400: '#bdbdbd',\n 500: '#9e9e9e',\n 600: '#757575',\n 700: '#616161',\n 800: '#424242',\n 900: '#212121',\n A100: '#f5f5f5',\n A200: '#eeeeee',\n A400: '#bdbdbd',\n A700: '#616161'\n};\nexport default grey;","const lightBlue = {\n 50: '#e1f5fe',\n 100: '#b3e5fc',\n 200: '#81d4fa',\n 300: '#4fc3f7',\n 400: '#29b6f6',\n 500: '#03a9f4',\n 600: '#039be5',\n 700: '#0288d1',\n 800: '#0277bd',\n 900: '#01579b',\n A100: '#80d8ff',\n A200: '#40c4ff',\n A400: '#00b0ff',\n A700: '#0091ea'\n};\nexport default lightBlue;","const orange = {\n 50: '#fff3e0',\n 100: '#ffe0b2',\n 200: '#ffcc80',\n 300: '#ffb74d',\n 400: '#ffa726',\n 500: '#ff9800',\n 600: '#fb8c00',\n 700: '#f57c00',\n 800: '#ef6c00',\n 900: '#e65100',\n A100: '#ffd180',\n A200: '#ffab40',\n A400: '#ff9100',\n A700: '#ff6d00'\n};\nexport default orange;","const purple = {\n 50: '#f3e5f5',\n 100: '#e1bee7',\n 200: '#ce93d8',\n 300: '#ba68c8',\n 400: '#ab47bc',\n 500: '#9c27b0',\n 600: '#8e24aa',\n 700: '#7b1fa2',\n 800: '#6a1b9a',\n 900: '#4a148c',\n A100: '#ea80fc',\n A200: '#e040fb',\n A400: '#d500f9',\n A700: '#aa00ff'\n};\nexport default purple;","const red = {\n 50: '#ffebee',\n 100: '#ffcdd2',\n 200: '#ef9a9a',\n 300: '#e57373',\n 400: '#ef5350',\n 500: '#f44336',\n 600: '#e53935',\n 700: '#d32f2f',\n 800: '#c62828',\n 900: '#b71c1c',\n A100: '#ff8a80',\n A200: '#ff5252',\n A400: '#ff1744',\n A700: '#d50000'\n};\nexport default red;","const pink = {\n 50: '#fce4ec',\n 100: '#f8bbd0',\n 200: '#f48fb1',\n 300: '#f06292',\n 400: '#ec407a',\n 500: '#e91e63',\n 600: '#d81b60',\n 700: '#c2185b',\n 800: '#ad1457',\n 900: '#880e4f',\n A100: '#ff80ab',\n A200: '#ff4081',\n A400: '#f50057',\n A700: '#c51162'\n};\nexport default pink;","const deepPurple = {\n 50: '#ede7f6',\n 100: '#d1c4e9',\n 200: '#b39ddb',\n 300: '#9575cd',\n 400: '#7e57c2',\n 500: '#673ab7',\n 600: '#5e35b1',\n 700: '#512da8',\n 800: '#4527a0',\n 900: '#311b92',\n A100: '#b388ff',\n A200: '#7c4dff',\n A400: '#651fff',\n A700: '#6200ea'\n};\nexport default deepPurple;","const indigo = {\n 50: '#e8eaf6',\n 100: '#c5cae9',\n 200: '#9fa8da',\n 300: '#7986cb',\n 400: '#5c6bc0',\n 500: '#3f51b5',\n 600: '#3949ab',\n 700: '#303f9f',\n 800: '#283593',\n 900: '#1a237e',\n A100: '#8c9eff',\n A200: '#536dfe',\n A400: '#3d5afe',\n A700: '#304ffe'\n};\nexport default indigo;","const cyan = {\n 50: '#e0f7fa',\n 100: '#b2ebf2',\n 200: '#80deea',\n 300: '#4dd0e1',\n 400: '#26c6da',\n 500: '#00bcd4',\n 600: '#00acc1',\n 700: '#0097a7',\n 800: '#00838f',\n 900: '#006064',\n A100: '#84ffff',\n A200: '#18ffff',\n A400: '#00e5ff',\n A700: '#00b8d4'\n};\nexport default cyan;","const teal = {\n 50: '#e0f2f1',\n 100: '#b2dfdb',\n 200: '#80cbc4',\n 300: '#4db6ac',\n 400: '#26a69a',\n 500: '#009688',\n 600: '#00897b',\n 700: '#00796b',\n 800: '#00695c',\n 900: '#004d40',\n A100: '#a7ffeb',\n A200: '#64ffda',\n A400: '#1de9b6',\n A700: '#00bfa5'\n};\nexport default teal;","const lightGreen = {\n 50: '#f1f8e9',\n 100: '#dcedc8',\n 200: '#c5e1a5',\n 300: '#aed581',\n 400: '#9ccc65',\n 500: '#8bc34a',\n 600: '#7cb342',\n 700: '#689f38',\n 800: '#558b2f',\n 900: '#33691e',\n A100: '#ccff90',\n A200: '#b2ff59',\n A400: '#76ff03',\n A700: '#64dd17'\n};\nexport default lightGreen;","const lime = {\n 50: '#f9fbe7',\n 100: '#f0f4c3',\n 200: '#e6ee9c',\n 300: '#dce775',\n 400: '#d4e157',\n 500: '#cddc39',\n 600: '#c0ca33',\n 700: '#afb42b',\n 800: '#9e9d24',\n 900: '#827717',\n A100: '#f4ff81',\n A200: '#eeff41',\n A400: '#c6ff00',\n A700: '#aeea00'\n};\nexport default lime;","const yellow = {\n 50: '#fffde7',\n 100: '#fff9c4',\n 200: '#fff59d',\n 300: '#fff176',\n 400: '#ffee58',\n 500: '#ffeb3b',\n 600: '#fdd835',\n 700: '#fbc02d',\n 800: '#f9a825',\n 900: '#f57f17',\n A100: '#ffff8d',\n A200: '#ffff00',\n A400: '#ffea00',\n A700: '#ffd600'\n};\nexport default yellow;","const amber = {\n 50: '#fff8e1',\n 100: '#ffecb3',\n 200: '#ffe082',\n 300: '#ffd54f',\n 400: '#ffca28',\n 500: '#ffc107',\n 600: '#ffb300',\n 700: '#ffa000',\n 800: '#ff8f00',\n 900: '#ff6f00',\n A100: '#ffe57f',\n A200: '#ffd740',\n A400: '#ffc400',\n A700: '#ffab00'\n};\nexport default amber;","const deepOrange = {\n 50: '#fbe9e7',\n 100: '#ffccbc',\n 200: '#ffab91',\n 300: '#ff8a65',\n 400: '#ff7043',\n 500: '#ff5722',\n 600: '#f4511e',\n 700: '#e64a19',\n 800: '#d84315',\n 900: '#bf360c',\n A100: '#ff9e80',\n A200: '#ff6e40',\n A400: '#ff3d00',\n A700: '#dd2c00'\n};\nexport default deepOrange;","const brown = {\n 50: '#efebe9',\n 100: '#d7ccc8',\n 200: '#bcaaa4',\n 300: '#a1887f',\n 400: '#8d6e63',\n 500: '#795548',\n 600: '#6d4c41',\n 700: '#5d4037',\n 800: '#4e342e',\n 900: '#3e2723',\n A100: '#d7ccc8',\n A200: '#bcaaa4',\n A400: '#8d6e63',\n A700: '#5d4037'\n};\nexport default brown;","const blueGrey = {\n 50: '#eceff1',\n 100: '#cfd8dc',\n 200: '#b0bec5',\n 300: '#90a4ae',\n 400: '#78909c',\n 500: '#607d8b',\n 600: '#546e7a',\n 700: '#455a64',\n 800: '#37474f',\n 900: '#263238',\n A100: '#cfd8dc',\n A200: '#b0bec5',\n A400: '#78909c',\n A700: '#455a64'\n};\nexport default blueGrey;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"defaultProps\", \"mixins\", \"overrides\", \"palette\", \"props\", \"styleOverrides\"],\n _excluded2 = [\"type\", \"mode\"];\nimport { createBreakpoints, createSpacing } from '@mui/system';\nexport default function adaptV4Theme(inputTheme) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\\n'));\n }\n const {\n defaultProps = {},\n mixins = {},\n overrides = {},\n palette = {},\n props = {},\n styleOverrides = {}\n } = inputTheme,\n other = _objectWithoutPropertiesLoose(inputTheme, _excluded);\n const theme = _extends({}, other, {\n components: {}\n });\n\n // default props\n Object.keys(defaultProps).forEach(component => {\n const componentValue = theme.components[component] || {};\n componentValue.defaultProps = defaultProps[component];\n theme.components[component] = componentValue;\n });\n Object.keys(props).forEach(component => {\n const componentValue = theme.components[component] || {};\n componentValue.defaultProps = props[component];\n theme.components[component] = componentValue;\n });\n\n // CSS overrides\n Object.keys(styleOverrides).forEach(component => {\n const componentValue = theme.components[component] || {};\n componentValue.styleOverrides = styleOverrides[component];\n theme.components[component] = componentValue;\n });\n Object.keys(overrides).forEach(component => {\n const componentValue = theme.components[component] || {};\n componentValue.styleOverrides = overrides[component];\n theme.components[component] = componentValue;\n });\n\n // theme.spacing\n theme.spacing = createSpacing(inputTheme.spacing);\n\n // theme.mixins.gutters\n const breakpoints = createBreakpoints(inputTheme.breakpoints || {});\n const spacing = theme.spacing;\n theme.mixins = _extends({\n gutters: (styles = {}) => {\n return _extends({\n paddingLeft: spacing(2),\n paddingRight: spacing(2)\n }, styles, {\n [breakpoints.up('sm')]: _extends({\n paddingLeft: spacing(3),\n paddingRight: spacing(3)\n }, styles[breakpoints.up('sm')])\n });\n }\n }, mixins);\n const {\n type: typeInput,\n mode: modeInput\n } = palette,\n paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2);\n const finalMode = modeInput || typeInput || 'light';\n theme.palette = _extends({\n // theme.palette.text.hint\n text: {\n hint: finalMode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)'\n },\n mode: finalMode,\n type: finalMode\n }, paletteRest);\n return theme;\n}","import { createElement, useContext, useRef, Fragment } from 'react';\nimport '@emotion/cache';\nimport { h as hasOwnProperty, E as Emotion, c as createEmotionProps, w as withEmotionCache, T as ThemeContext } from './emotion-element-6a883da9.browser.esm.js';\nexport { C as CacheProvider, T as ThemeContext, a as ThemeProvider, _ as __unsafe_useEmotionCache, u as useTheme, w as withEmotionCache, b as withTheme } from './emotion-element-6a883da9.browser.esm.js';\nimport '@babel/runtime/helpers/extends';\nimport '@emotion/weak-memoize';\nimport 'hoist-non-react-statics';\nimport '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport { insertStyles, registerStyles, getRegisteredStyles } from '@emotion/utils';\nimport { serializeStyles } from '@emotion/serialize';\nimport { useInsertionEffectWithLayoutFallback, useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\n\nvar pkg = {\n\tname: \"@emotion/react\",\n\tversion: \"11.10.5\",\n\tmain: \"dist/emotion-react.cjs.js\",\n\tmodule: \"dist/emotion-react.esm.js\",\n\tbrowser: {\n\t\t\"./dist/emotion-react.esm.js\": \"./dist/emotion-react.browser.esm.js\"\n\t},\n\texports: {\n\t\t\".\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./dist/emotion-react.worker.esm.js\",\n\t\t\t\tbrowser: \"./dist/emotion-react.browser.esm.js\",\n\t\t\t\t\"default\": \"./dist/emotion-react.esm.js\"\n\t\t\t},\n\t\t\t\"default\": \"./dist/emotion-react.cjs.js\"\n\t\t},\n\t\t\"./jsx-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-runtime/dist/emotion-react-jsx-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js\"\n\t\t},\n\t\t\"./_isolated-hnrs\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.worker.esm.js\",\n\t\t\t\tbrowser: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js\",\n\t\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js\"\n\t\t\t},\n\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js\"\n\t\t},\n\t\t\"./jsx-dev-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js\"\n\t\t},\n\t\t\"./package.json\": \"./package.json\",\n\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\"./macro\": \"./macro.js\"\n\t},\n\ttypes: \"types/index.d.ts\",\n\tfiles: [\n\t\t\"src\",\n\t\t\"dist\",\n\t\t\"jsx-runtime\",\n\t\t\"jsx-dev-runtime\",\n\t\t\"_isolated-hnrs\",\n\t\t\"types/*.d.ts\",\n\t\t\"macro.js\",\n\t\t\"macro.d.ts\",\n\t\t\"macro.js.flow\"\n\t],\n\tsideEffects: false,\n\tauthor: \"Emotion Contributors\",\n\tlicense: \"MIT\",\n\tscripts: {\n\t\t\"test:typescript\": \"dtslint types\"\n\t},\n\tdependencies: {\n\t\t\"@babel/runtime\": \"^7.18.3\",\n\t\t\"@emotion/babel-plugin\": \"^11.10.5\",\n\t\t\"@emotion/cache\": \"^11.10.5\",\n\t\t\"@emotion/serialize\": \"^1.1.1\",\n\t\t\"@emotion/use-insertion-effect-with-fallbacks\": \"^1.0.0\",\n\t\t\"@emotion/utils\": \"^1.2.0\",\n\t\t\"@emotion/weak-memoize\": \"^0.3.0\",\n\t\t\"hoist-non-react-statics\": \"^3.3.1\"\n\t},\n\tpeerDependencies: {\n\t\t\"@babel/core\": \"^7.0.0\",\n\t\treact: \">=16.8.0\"\n\t},\n\tpeerDependenciesMeta: {\n\t\t\"@babel/core\": {\n\t\t\toptional: true\n\t\t},\n\t\t\"@types/react\": {\n\t\t\toptional: true\n\t\t}\n\t},\n\tdevDependencies: {\n\t\t\"@babel/core\": \"^7.18.5\",\n\t\t\"@definitelytyped/dtslint\": \"0.0.112\",\n\t\t\"@emotion/css\": \"11.10.5\",\n\t\t\"@emotion/css-prettifier\": \"1.1.1\",\n\t\t\"@emotion/server\": \"11.10.0\",\n\t\t\"@emotion/styled\": \"11.10.5\",\n\t\t\"html-tag-names\": \"^1.1.2\",\n\t\treact: \"16.14.0\",\n\t\t\"svg-tag-names\": \"^1.1.1\",\n\t\ttypescript: \"^4.5.5\"\n\t},\n\trepository: \"https://github.com/emotion-js/emotion/tree/main/packages/react\",\n\tpublishConfig: {\n\t\taccess: \"public\"\n\t},\n\t\"umd:main\": \"dist/emotion-react.umd.min.js\",\n\tpreconstruct: {\n\t\tentrypoints: [\n\t\t\t\"./index.js\",\n\t\t\t\"./jsx-runtime.js\",\n\t\t\t\"./jsx-dev-runtime.js\",\n\t\t\t\"./_isolated-hnrs.js\"\n\t\t],\n\t\tumdName: \"emotionReact\",\n\t\texports: {\n\t\t\tenvConditions: [\n\t\t\t\t\"browser\",\n\t\t\t\t\"worker\"\n\t\t\t],\n\t\t\textra: {\n\t\t\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\t\t\"./macro\": \"./macro.js\"\n\t\t\t}\n\t\t}\n\t}\n};\n\nvar jsx = function jsx(type, props) {\n var args = arguments;\n\n if (props == null || !hasOwnProperty.call(props, 'css')) {\n // $FlowFixMe\n return createElement.apply(undefined, args);\n }\n\n var argsLength = args.length;\n var createElementArgArray = new Array(argsLength);\n createElementArgArray[0] = Emotion;\n createElementArgArray[1] = createEmotionProps(type, props);\n\n for (var i = 2; i < argsLength; i++) {\n createElementArgArray[i] = args[i];\n } // $FlowFixMe\n\n\n return createElement.apply(null, createElementArgArray);\n};\n\nvar warnedAboutCssPropForGlobal = false; // maintain place over rerenders.\n// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild\n// initial client-side render from SSR, use place of hydrating tag\n\nvar Global = /* #__PURE__ */withEmotionCache(function (props, cache) {\n if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is\n // probably using the custom createElement which\n // means it will be turned into a className prop\n // $FlowFixMe I don't really want to add it to the type since it shouldn't be used\n props.className || props.css)) {\n console.error(\"It looks like you're using the css prop on Global, did you mean to use the styles prop instead?\");\n warnedAboutCssPropForGlobal = true;\n }\n\n var styles = props.styles;\n var serialized = serializeStyles([styles], undefined, useContext(ThemeContext));\n // but it is based on a constant that will never change at runtime\n // it's effectively like having two implementations and switching them out\n // so it's not actually breaking anything\n\n\n var sheetRef = useRef();\n useInsertionEffectWithLayoutFallback(function () {\n var key = cache.key + \"-global\"; // use case of https://github.com/emotion-js/emotion/issues/2675\n\n var sheet = new cache.sheet.constructor({\n key: key,\n nonce: cache.sheet.nonce,\n container: cache.sheet.container,\n speedy: cache.sheet.isSpeedy\n });\n var rehydrating = false; // $FlowFixMe\n\n var node = document.querySelector(\"style[data-emotion=\\\"\" + key + \" \" + serialized.name + \"\\\"]\");\n\n if (cache.sheet.tags.length) {\n sheet.before = cache.sheet.tags[0];\n }\n\n if (node !== null) {\n rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other s\n\n node.setAttribute('data-emotion', key);\n sheet.hydrate([node]);\n }\n\n sheetRef.current = [sheet, rehydrating];\n return function () {\n sheet.flush();\n };\n }, [cache]);\n useInsertionEffectWithLayoutFallback(function () {\n var sheetRefCurrent = sheetRef.current;\n var sheet = sheetRefCurrent[0],\n rehydrating = sheetRefCurrent[1];\n\n if (rehydrating) {\n sheetRefCurrent[1] = false;\n return;\n }\n\n if (serialized.next !== undefined) {\n // insert keyframes\n insertStyles(cache, serialized.next, true);\n }\n\n if (sheet.tags.length) {\n // if this doesn't exist then it will be null so the style element will be appended\n var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;\n sheet.before = element;\n sheet.flush();\n }\n\n cache.insert(\"\", serialized, sheet, false);\n }, [cache, serialized.name]);\n return null;\n});\n\nif (process.env.NODE_ENV !== 'production') {\n Global.displayName = 'EmotionGlobal';\n}\n\nfunction css() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return serializeStyles(args);\n}\n\nvar keyframes = function keyframes() {\n var insertable = css.apply(void 0, arguments);\n var name = \"animation-\" + insertable.name; // $FlowFixMe\n\n return {\n name: name,\n styles: \"@keyframes \" + name + \"{\" + insertable.styles + \"}\",\n anim: 1,\n toString: function toString() {\n return \"_EMO_\" + this.name + \"_\" + this.styles + \"_EMO_\";\n }\n };\n};\n\nvar classnames = function classnames(args) {\n var len = args.length;\n var i = 0;\n var cls = '';\n\n for (; i < len; i++) {\n var arg = args[i];\n if (arg == null) continue;\n var toAdd = void 0;\n\n switch (typeof arg) {\n case 'boolean':\n break;\n\n case 'object':\n {\n if (Array.isArray(arg)) {\n toAdd = classnames(arg);\n } else {\n if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) {\n console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from component.');\n }\n\n toAdd = '';\n\n for (var k in arg) {\n if (arg[k] && k) {\n toAdd && (toAdd += ' ');\n toAdd += k;\n }\n }\n }\n\n break;\n }\n\n default:\n {\n toAdd = arg;\n }\n }\n\n if (toAdd) {\n cls && (cls += ' ');\n cls += toAdd;\n }\n }\n\n return cls;\n};\n\nfunction merge(registered, css, className) {\n var registeredStyles = [];\n var rawClassName = getRegisteredStyles(registered, registeredStyles, className);\n\n if (registeredStyles.length < 2) {\n return className;\n }\n\n return rawClassName + css(registeredStyles);\n}\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serializedArr = _ref.serializedArr;\n var rules = useInsertionEffectAlwaysWithSyncFallback(function () {\n\n for (var i = 0; i < serializedArr.length; i++) {\n var res = insertStyles(cache, serializedArr[i], false);\n }\n });\n\n return null;\n};\n\nvar ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {\n var hasRendered = false;\n var serializedArr = [];\n\n var css = function css() {\n if (hasRendered && process.env.NODE_ENV !== 'production') {\n throw new Error('css can only be used during render');\n }\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n var serialized = serializeStyles(args, cache.registered);\n serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx`\n\n registerStyles(cache, serialized, false);\n return cache.key + \"-\" + serialized.name;\n };\n\n var cx = function cx() {\n if (hasRendered && process.env.NODE_ENV !== 'production') {\n throw new Error('cx can only be used during render');\n }\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n return merge(cache.registered, css, classnames(args));\n };\n\n var content = {\n css: css,\n cx: cx,\n theme: useContext(ThemeContext)\n };\n var ele = props.children(content);\n hasRendered = true;\n return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion, {\n cache: cache,\n serializedArr: serializedArr\n }), ele);\n});\n\nif (process.env.NODE_ENV !== 'production') {\n ClassNames.displayName = 'EmotionClassNames';\n}\n\nif (process.env.NODE_ENV !== 'production') {\n var isBrowser = \"object\" !== 'undefined'; // #1727, #2905 for some reason Jest and Vitest evaluate modules twice if some consuming module gets mocked\n\n var isTestEnv = typeof jest !== 'undefined' || typeof vi !== 'undefined';\n\n if (isBrowser && !isTestEnv) {\n // globalThis has wide browser support - https://caniuse.com/?search=globalThis, Node.js 12 and later\n var globalContext = // $FlowIgnore\n typeof globalThis !== 'undefined' ? globalThis // eslint-disable-line no-undef\n : isBrowser ? window : global;\n var globalKey = \"__EMOTION_REACT_\" + pkg.version.split('.')[0] + \"__\";\n\n if (globalContext[globalKey]) {\n console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.');\n }\n\n globalContext[globalKey] = true;\n }\n}\n\nexport { ClassNames, Global, jsx as createElement, css, jsx, keyframes };\n","import styleFunctionSx from '../styleFunctionSx';\nfunction sx(styles) {\n return ({\n theme\n }) => styleFunctionSx({\n sx: styles,\n theme\n });\n}\nexport default sx;","import { deepmerge } from '@mui/utils';\nimport createTheme from './createTheme';\nexport default function createMuiStrictModeTheme(options, ...args) {\n return createTheme(deepmerge({\n unstable_strictMode: true\n }, options), ...args);\n}","let warnedOnce = false;\n\n// To remove in v6\nexport default function createStyles(styles) {\n if (!warnedOnce) {\n console.warn(['MUI: createStyles from @mui/material/styles is deprecated.', 'Please use @mui/styles/createStyles'].join('\\n'));\n warnedOnce = true;\n }\n return styles;\n}","export function isUnitless(value) {\n return String(parseFloat(value)).length === String(value).length;\n}\n\n// Ported from Compass\n// https://github.com/Compass/compass/blob/master/core/stylesheets/compass/typography/_units.scss\n// Emulate the sass function \"unit\"\nexport function getUnit(input) {\n return String(input).match(/[\\d.\\-+]*\\s*(.*)/)[1] || '';\n}\n\n// Emulate the sass function \"unitless\"\nexport function toUnitless(length) {\n return parseFloat(length);\n}\n\n// Convert any CSS or value to any another.\n// From https://github.com/KyleAMathews/convert-css-length\nexport function convertLength(baseFontSize) {\n return (length, toUnit) => {\n const fromUnit = getUnit(length);\n\n // Optimize for cases where `from` and `to` units are accidentally the same.\n if (fromUnit === toUnit) {\n return length;\n }\n\n // Convert input length to pixels.\n let pxLength = toUnitless(length);\n if (fromUnit !== 'px') {\n if (fromUnit === 'em') {\n pxLength = toUnitless(length) * toUnitless(baseFontSize);\n } else if (fromUnit === 'rem') {\n pxLength = toUnitless(length) * toUnitless(baseFontSize);\n }\n }\n\n // Convert length in pixels to the output unit\n let outputLength = pxLength;\n if (toUnit !== 'px') {\n if (toUnit === 'em') {\n outputLength = pxLength / toUnitless(baseFontSize);\n } else if (toUnit === 'rem') {\n outputLength = pxLength / toUnitless(baseFontSize);\n } else {\n return length;\n }\n }\n return parseFloat(outputLength.toFixed(5)) + toUnit;\n };\n}\nexport function alignProperty({\n size,\n grid\n}) {\n const sizeBelow = size - size % grid;\n const sizeAbove = sizeBelow + grid;\n return size - sizeBelow < sizeAbove - size ? sizeBelow : sizeAbove;\n}\n\n// fontGrid finds a minimal grid (in rem) for the fontSize values so that the\n// lineHeight falls under a x pixels grid, 4px in the case of Material Design,\n// without changing the relative line height\nexport function fontGrid({\n lineHeight,\n pixels,\n htmlFontSize\n}) {\n return pixels / (lineHeight * htmlFontSize);\n}\n\n/**\n * generate a responsive version of a given CSS property\n * @example\n * responsiveProperty({\n * cssProperty: 'fontSize',\n * min: 15,\n * max: 20,\n * unit: 'px',\n * breakpoints: [300, 600],\n * })\n *\n * // this returns\n *\n * {\n * fontSize: '15px',\n * '@media (min-width:300px)': {\n * fontSize: '17.5px',\n * },\n * '@media (min-width:600px)': {\n * fontSize: '20px',\n * },\n * }\n * @param {Object} params\n * @param {string} params.cssProperty - The CSS property to be made responsive\n * @param {number} params.min - The smallest value of the CSS property\n * @param {number} params.max - The largest value of the CSS property\n * @param {string} [params.unit] - The unit to be used for the CSS property\n * @param {Array.number} [params.breakpoints] - An array of breakpoints\n * @param {number} [params.alignStep] - Round scaled value to fall under this grid\n * @returns {Object} responsive styles for {params.cssProperty}\n */\nexport function responsiveProperty({\n cssProperty,\n min,\n max,\n unit = 'rem',\n breakpoints = [600, 900, 1200],\n transform = null\n}) {\n const output = {\n [cssProperty]: `${min}${unit}`\n };\n const factor = (max - min) / breakpoints[breakpoints.length - 1];\n breakpoints.forEach(breakpoint => {\n let value = min + factor * breakpoint;\n if (transform !== null) {\n value = transform(value);\n }\n output[`@media (min-width:${breakpoint}px)`] = {\n [cssProperty]: `${Math.round(value * 10000) / 10000}${unit}`\n };\n });\n return output;\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport { formatMuiErrorMessage as _formatMuiErrorMessage } from \"@mui/utils\";\nimport { isUnitless, convertLength, responsiveProperty, alignProperty, fontGrid } from './cssUtils';\nexport default function responsiveFontSizes(themeInput, options = {}) {\n const {\n breakpoints = ['sm', 'md', 'lg'],\n disableAlign = false,\n factor = 2,\n variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']\n } = options;\n const theme = _extends({}, themeInput);\n theme.typography = _extends({}, theme.typography);\n const typography = theme.typography;\n\n // Convert between CSS lengths e.g. em->px or px->rem\n // Set the baseFontSize for your project. Defaults to 16px (also the browser default).\n const convert = convertLength(typography.htmlFontSize);\n const breakpointValues = breakpoints.map(x => theme.breakpoints.values[x]);\n variants.forEach(variant => {\n const style = typography[variant];\n const remFontSize = parseFloat(convert(style.fontSize, 'rem'));\n if (remFontSize <= 1) {\n return;\n }\n const maxFontSize = remFontSize;\n const minFontSize = 1 + (maxFontSize - 1) / factor;\n let {\n lineHeight\n } = style;\n if (!isUnitless(lineHeight) && !disableAlign) {\n throw new Error(process.env.NODE_ENV !== \"production\" ? `MUI: Unsupported non-unitless line height with grid alignment.\nUse unitless line heights instead.` : _formatMuiErrorMessage(6));\n }\n if (!isUnitless(lineHeight)) {\n // make it unitless\n lineHeight = parseFloat(convert(lineHeight, 'rem')) / parseFloat(remFontSize);\n }\n let transform = null;\n if (!disableAlign) {\n transform = value => alignProperty({\n size: value,\n grid: fontGrid({\n pixels: 4,\n lineHeight,\n htmlFontSize: typography.htmlFontSize\n })\n });\n }\n typography[variant] = _extends({}, style, responsiveProperty({\n cssProperty: 'fontSize',\n min: minFontSize,\n max: maxFontSize,\n unit: 'rem',\n breakpoints: breakpointValues,\n transform\n }));\n });\n return theme;\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 if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useDebugValue(theme);\n }\n return theme;\n}","export default function _extends() {\n _extends = Object.assign ? Object.assign.bind() : function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}","const hasSymbol = typeof Symbol === 'function' && Symbol.for;\nexport default hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { exactProp } from '@mui/utils';\nimport ThemeContext from '../useTheme/ThemeContext';\nimport useTheme from '../useTheme';\nimport nested from './nested';\n\n// To support composition of theme.\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction mergeOuterLocalTheme(outerTheme, localTheme) {\n if (typeof localTheme === 'function') {\n const mergedTheme = localTheme(outerTheme);\n if (process.env.NODE_ENV !== 'production') {\n if (!mergedTheme) {\n console.error(['MUI: You should return an object from your theme function, i.e.', ' ({})} />'].join('\\n'));\n }\n }\n return mergedTheme;\n }\n return _extends({}, outerTheme, localTheme);\n}\n\n/**\n * This component takes a `theme` prop.\n * It makes the `theme` available down the React tree thanks to React context.\n * This component should preferably be used at **the root of your component tree**.\n */\nfunction ThemeProvider(props) {\n const {\n children,\n theme: localTheme\n } = props;\n const outerTheme = useTheme();\n if (process.env.NODE_ENV !== 'production') {\n if (outerTheme === null && typeof localTheme === 'function') {\n console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', ' outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\\n'));\n }\n }\n const theme = React.useMemo(() => {\n const output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme);\n if (output != null) {\n output[nested] = outerTheme !== null;\n }\n return output;\n }, [localTheme, outerTheme]);\n return /*#__PURE__*/_jsx(ThemeContext.Provider, {\n value: theme,\n children: children\n });\n}\nprocess.env.NODE_ENV !== \"production\" ? ThemeProvider.propTypes = {\n /**\n * Your component tree.\n */\n children: PropTypes.node,\n /**\n * A theme object. You can provide a function to extend the outer theme.\n */\n theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired\n} : void 0;\nif (process.env.NODE_ENV !== 'production') {\n process.env.NODE_ENV !== \"production\" ? ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) : void 0;\n}\nexport default ThemeProvider;","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { ThemeProvider as MuiThemeProvider } from '@mui/private-theming';\nimport { exactProp } from '@mui/utils';\nimport { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';\nimport useTheme from '../useTheme';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst EMPTY_THEME = {};\nfunction InnerThemeProvider(props) {\n const theme = useTheme();\n return /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {\n value: typeof theme === 'object' ? theme : EMPTY_THEME,\n children: props.children\n });\n}\nprocess.env.NODE_ENV !== \"production\" ? InnerThemeProvider.propTypes = {\n /**\n * Your component tree.\n */\n children: PropTypes.node\n} : void 0;\n\n/**\n * This component makes the `theme` available down the React tree.\n * It should preferably be used at **the root of your component tree**.\n */\nfunction ThemeProvider(props) {\n const {\n children,\n theme: localTheme\n } = props;\n return /*#__PURE__*/_jsx(MuiThemeProvider, {\n theme: localTheme,\n children: /*#__PURE__*/_jsx(InnerThemeProvider, {\n children: children\n })\n });\n}\nprocess.env.NODE_ENV !== \"production\" ? ThemeProvider.propTypes /* remove-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 * Your component tree.\n */\n children: PropTypes.node,\n /**\n * A theme object. You can provide a function to extend the outer theme.\n */\n theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired\n} : void 0;\nif (process.env.NODE_ENV !== 'production') {\n process.env.NODE_ENV !== \"production\" ? ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) : void 0;\n}\nexport default ThemeProvider;","import { formatMuiErrorMessage as _formatMuiErrorMessage } from \"@mui/utils\";\nexport default function makeStyles() {\n throw new Error(process.env.NODE_ENV !== \"production\" ? `MUI: makeStyles is no longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details.` : _formatMuiErrorMessage(14));\n}","import { formatMuiErrorMessage as _formatMuiErrorMessage } from \"@mui/utils\";\nexport default function withStyles() {\n throw new Error(process.env.NODE_ENV !== \"production\" ? `MUI: withStyles is no longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details.` : _formatMuiErrorMessage(15));\n}","import { formatMuiErrorMessage as _formatMuiErrorMessage } from \"@mui/utils\";\nexport default function withTheme() {\n throw new Error(process.env.NODE_ENV !== \"production\" ? `MUI: withTheme is no longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details.` : _formatMuiErrorMessage(16));\n}","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { Global } from '@emotion/react';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction isEmpty(obj) {\n return obj === undefined || obj === null || Object.keys(obj).length === 0;\n}\nexport default function GlobalStyles(props) {\n const {\n styles,\n defaultTheme = {}\n } = props;\n const globalStyles = typeof styles === 'function' ? themeInput => styles(isEmpty(themeInput) ? defaultTheme : themeInput) : styles;\n return /*#__PURE__*/_jsx(Global, {\n styles: globalStyles\n });\n}\nprocess.env.NODE_ENV !== \"production\" ? GlobalStyles.propTypes = {\n defaultTheme: PropTypes.object,\n styles: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func])\n} : void 0;","/**\n * This function create an object from keys, value and then assign to target\n *\n * @param {Object} obj : the target object to be assigned\n * @param {string[]} keys\n * @param {string | number} value\n *\n * @example\n * const source = {}\n * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')\n * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }\n *\n * @example\n * const source = { palette: { primary: 'var(--palette-primary)' } }\n * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')\n * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }\n */\nexport const assignNestedKeys = (obj, keys, value, arrayKeys = []) => {\n let temp = obj;\n keys.forEach((k, index) => {\n if (index === keys.length - 1) {\n if (Array.isArray(temp)) {\n temp[Number(k)] = value;\n } else if (temp && typeof temp === 'object') {\n temp[k] = value;\n }\n } else if (temp && typeof temp === 'object') {\n if (!temp[k]) {\n temp[k] = arrayKeys.includes(k) ? [] : {};\n }\n temp = temp[k];\n }\n });\n};\n\n/**\n *\n * @param {Object} obj : source object\n * @param {Function} callback : a function that will be called when\n * - the deepest key in source object is reached\n * - the value of the deepest key is NOT `undefined` | `null`\n *\n * @example\n * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)\n * // ['palette', 'primary', 'main'] '#000000'\n */\nexport const walkObjectDeep = (obj, callback, shouldSkipPaths) => {\n function recurse(object, parentKeys = [], arrayKeys = []) {\n Object.entries(object).forEach(([key, value]) => {\n if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {\n if (value !== undefined && value !== null) {\n if (typeof value === 'object' && Object.keys(value).length > 0) {\n recurse(value, [...parentKeys, key], Array.isArray(value) ? [...arrayKeys, key] : arrayKeys);\n } else {\n callback([...parentKeys, key], value, arrayKeys);\n }\n }\n }\n });\n }\n recurse(obj);\n};\nconst getCssValue = (keys, value) => {\n if (typeof value === 'number') {\n if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {\n // CSS property that are unitless\n return value;\n }\n const lastKey = keys[keys.length - 1];\n if (lastKey.toLowerCase().indexOf('opacity') >= 0) {\n // opacity values are unitless\n return value;\n }\n return `${value}px`;\n }\n return value;\n};\n\n/**\n * a function that parse theme and return { css, vars }\n *\n * @param {Object} theme\n * @param {{\n * prefix?: string,\n * shouldSkipGeneratingVar?: (objectPathKeys: Array, value: string | number) => boolean\n * }} options.\n * `prefix`: The prefix of the generated CSS variables. This function does not change the value.\n *\n * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).\n *\n * @example\n * const { css, vars } = parser({\n * fontSize: 12,\n * lineHeight: 1.2,\n * palette: { primary: { 500: 'var(--color)' } }\n * }, { prefix: 'foo' })\n *\n * console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }\n * console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }\n */\nexport default function cssVarsParser(theme, options) {\n const {\n prefix,\n shouldSkipGeneratingVar\n } = options || {};\n const css = {};\n const vars = {};\n walkObjectDeep(theme, (keys, value, arrayKeys) => {\n if (typeof value === 'string' || typeof value === 'number') {\n if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {\n // only create css & var if `shouldSkipGeneratingVar` return false\n const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;\n Object.assign(css, {\n [cssVar]: getCssValue(keys, value)\n });\n assignNestedKeys(vars, keys, `var(${cssVar})`, arrayKeys);\n }\n }\n }, keys => keys[0] === 'vars' // skip 'vars/*' paths\n );\n\n return {\n css,\n vars\n };\n}","import * as React from 'react';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const DEFAULT_MODE_STORAGE_KEY = 'mode';\nexport const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';\nexport const DEFAULT_ATTRIBUTE = 'data-color-scheme';\nexport default function getInitColorSchemeScript(options) {\n const {\n defaultMode = 'light',\n defaultLightColorScheme = 'light',\n defaultDarkColorScheme = 'dark',\n modeStorageKey = DEFAULT_MODE_STORAGE_KEY,\n colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,\n attribute = DEFAULT_ATTRIBUTE,\n colorSchemeNode = 'document.documentElement'\n } = options || {};\n return /*#__PURE__*/_jsx(\"script\", {\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML: {\n __html: `(function() { try {\n var mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';\n var cssColorScheme = mode;\n var colorScheme = '';\n if (mode === 'system') {\n // handle system mode\n var mql = window.matchMedia('(prefers-color-scheme: dark)');\n if (mql.matches) {\n cssColorScheme = 'dark';\n colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';\n } else {\n cssColorScheme = 'light';\n colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';\n }\n }\n if (mode === 'light') {\n colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';\n }\n if (mode === 'dark') {\n colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';\n }\n if (colorScheme) {\n ${colorSchemeNode}.setAttribute('${attribute}', colorScheme);\n }\n } catch (e) {} })();`\n }\n }, \"mui-color-scheme-init\");\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from './getInitColorSchemeScript';\nexport function getSystemMode(mode) {\n if (typeof window !== 'undefined' && mode === 'system') {\n const mql = window.matchMedia('(prefers-color-scheme: dark)');\n if (mql.matches) {\n return 'dark';\n }\n return 'light';\n }\n return undefined;\n}\nfunction processState(state, callback) {\n if (state.mode === 'light' || state.mode === 'system' && state.systemMode === 'light') {\n return callback('light');\n }\n if (state.mode === 'dark' || state.mode === 'system' && state.systemMode === 'dark') {\n return callback('dark');\n }\n return undefined;\n}\nexport function getColorScheme(state) {\n return processState(state, mode => {\n if (mode === 'light') {\n return state.lightColorScheme;\n }\n if (mode === 'dark') {\n return state.darkColorScheme;\n }\n return undefined;\n });\n}\nfunction initializeValue(key, defaultValue) {\n if (typeof window === 'undefined') {\n return undefined;\n }\n let value;\n try {\n value = localStorage.getItem(key) || undefined;\n if (!value) {\n // the first time that user enters the site.\n localStorage.setItem(key, defaultValue);\n }\n } catch (e) {\n // Unsupported\n }\n return value || defaultValue;\n}\nexport default function useCurrentColorScheme(options) {\n const {\n defaultMode = 'light',\n defaultLightColorScheme,\n defaultDarkColorScheme,\n supportedColorSchemes = [],\n modeStorageKey = DEFAULT_MODE_STORAGE_KEY,\n colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,\n storageWindow = typeof window === 'undefined' ? undefined : window\n } = options;\n const joinedColorSchemes = supportedColorSchemes.join(',');\n const [state, setState] = React.useState(() => {\n const initialMode = initializeValue(modeStorageKey, defaultMode);\n const lightColorScheme = initializeValue(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);\n const darkColorScheme = initializeValue(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);\n return {\n mode: initialMode,\n systemMode: getSystemMode(initialMode),\n lightColorScheme,\n darkColorScheme\n };\n });\n const colorScheme = getColorScheme(state);\n const setMode = React.useCallback(mode => {\n setState(currentState => {\n if (mode === currentState.mode) {\n // do nothing if mode does not change\n return currentState;\n }\n const newMode = !mode ? defaultMode : mode;\n try {\n localStorage.setItem(modeStorageKey, newMode);\n } catch (e) {\n // Unsupported\n }\n return _extends({}, currentState, {\n mode: newMode,\n systemMode: getSystemMode(newMode)\n });\n });\n }, [modeStorageKey, defaultMode]);\n const setColorScheme = React.useCallback(value => {\n if (!value) {\n setState(currentState => {\n try {\n localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);\n localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);\n } catch (e) {\n // Unsupported\n }\n return _extends({}, currentState, {\n lightColorScheme: defaultLightColorScheme,\n darkColorScheme: defaultDarkColorScheme\n });\n });\n } else if (typeof value === 'string') {\n if (value && !joinedColorSchemes.includes(value)) {\n console.error(`\\`${value}\\` does not exist in \\`theme.colorSchemes\\`.`);\n } else {\n setState(currentState => {\n const newState = _extends({}, currentState);\n processState(currentState, mode => {\n try {\n localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);\n } catch (e) {\n // Unsupported\n }\n if (mode === 'light') {\n newState.lightColorScheme = value;\n }\n if (mode === 'dark') {\n newState.darkColorScheme = value;\n }\n });\n return newState;\n });\n }\n } else {\n setState(currentState => {\n const newState = _extends({}, currentState);\n const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;\n const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;\n if (newLightColorScheme) {\n if (!joinedColorSchemes.includes(newLightColorScheme)) {\n console.error(`\\`${newLightColorScheme}\\` does not exist in \\`theme.colorSchemes\\`.`);\n } else {\n newState.lightColorScheme = newLightColorScheme;\n try {\n localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);\n } catch (error) {\n // Unsupported\n }\n }\n }\n if (newDarkColorScheme) {\n if (!joinedColorSchemes.includes(newDarkColorScheme)) {\n console.error(`\\`${newDarkColorScheme}\\` does not exist in \\`theme.colorSchemes\\`.`);\n } else {\n newState.darkColorScheme = newDarkColorScheme;\n try {\n localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);\n } catch (error) {\n // Unsupported\n }\n }\n }\n return newState;\n });\n }\n }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);\n const handleMediaQuery = React.useCallback(e => {\n if (state.mode === 'system') {\n setState(currentState => _extends({}, currentState, {\n systemMode: e != null && e.matches ? 'dark' : 'light'\n }));\n }\n }, [state.mode]);\n\n // Ref hack to avoid adding handleMediaQuery as a dep\n const mediaListener = React.useRef(handleMediaQuery);\n mediaListener.current = handleMediaQuery;\n React.useEffect(() => {\n const handler = (...args) => mediaListener.current(...args);\n\n // Always listen to System preference\n const media = window.matchMedia('(prefers-color-scheme: dark)');\n\n // Intentionally use deprecated listener methods to support iOS & old browsers\n media.addListener(handler);\n handler(media);\n return () => media.removeListener(handler);\n }, []);\n\n // Handle when localStorage has changed\n React.useEffect(() => {\n const handleStorage = event => {\n const value = event.newValue;\n if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {\n // If the key is deleted, value will be null then reset color scheme to the default one.\n if (event.key.endsWith('light')) {\n setColorScheme({\n light: value\n });\n }\n if (event.key.endsWith('dark')) {\n setColorScheme({\n dark: value\n });\n }\n }\n if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {\n setMode(value || defaultMode);\n }\n };\n if (storageWindow) {\n // For syncing color-scheme changes between iframes\n storageWindow.addEventListener('storage', handleStorage);\n return () => storageWindow.removeEventListener('storage', handleStorage);\n }\n return undefined;\n }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);\n return _extends({}, state, {\n colorScheme,\n setMode,\n setColorScheme\n });\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport { formatMuiErrorMessage as _formatMuiErrorMessage } from \"@mui/utils\";\nconst _excluded = [\"colorSchemes\", \"components\", \"cssVarPrefix\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { deepmerge } from '@mui/utils';\nimport { GlobalStyles } from '@mui/styled-engine';\nimport { useTheme as muiUseTheme } from '@mui/private-theming';\nimport cssVarsParser from './cssVarsParser';\nimport ThemeProvider from '../ThemeProvider';\nimport systemGetInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';\nimport useCurrentColorScheme from './useCurrentColorScheme';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';\nexport default function createCssVarsProvider(options) {\n const {\n theme: defaultTheme = {},\n attribute: defaultAttribute = DEFAULT_ATTRIBUTE,\n modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY,\n colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,\n defaultMode: designSystemMode = 'light',\n defaultColorScheme: designSystemColorScheme,\n disableTransitionOnChange: designSystemTransitionOnChange = false,\n shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,\n resolveTheme,\n excludeVariablesFromRoot\n } = options;\n if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {\n console.error(`MUI: \\`${designSystemColorScheme}\\` does not exist in \\`theme.colorSchemes\\`.`);\n }\n const ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);\n const useColorScheme = () => {\n const value = React.useContext(ColorSchemeContext);\n if (!value) {\n throw new Error(process.env.NODE_ENV !== \"production\" ? `MUI: \\`useColorScheme\\` must be called under ` : _formatMuiErrorMessage(19));\n }\n return value;\n };\n function CssVarsProvider({\n children,\n theme: themeProp = defaultTheme,\n modeStorageKey = defaultModeStorageKey,\n colorSchemeStorageKey = defaultColorSchemeStorageKey,\n attribute = defaultAttribute,\n defaultMode = designSystemMode,\n defaultColorScheme = designSystemColorScheme,\n disableTransitionOnChange = designSystemTransitionOnChange,\n storageWindow = typeof window === 'undefined' ? undefined : window,\n documentNode = typeof document === 'undefined' ? undefined : document,\n colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,\n colorSchemeSelector = ':root',\n shouldSkipGeneratingVar = designSystemShouldSkipGeneratingVar,\n disableNestedContext = false,\n disableStyleSheetGeneration = false\n }) {\n const hasMounted = React.useRef(false);\n const upperTheme = muiUseTheme();\n const ctx = React.useContext(ColorSchemeContext);\n const nested = !!ctx && !disableNestedContext;\n const {\n colorSchemes = {},\n components = {},\n cssVarPrefix\n } = themeProp,\n restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded);\n const allColorSchemes = Object.keys(colorSchemes);\n const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;\n const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;\n\n // 1. Get the data about the `mode`, `colorScheme`, and setter functions.\n const {\n mode: stateMode,\n setMode,\n systemMode,\n lightColorScheme,\n darkColorScheme,\n colorScheme: stateColorScheme,\n setColorScheme\n } = useCurrentColorScheme({\n supportedColorSchemes: allColorSchemes,\n defaultLightColorScheme,\n defaultDarkColorScheme,\n modeStorageKey,\n colorSchemeStorageKey,\n defaultMode,\n storageWindow\n });\n let mode = stateMode;\n let colorScheme = stateColorScheme;\n if (nested) {\n mode = ctx.mode;\n colorScheme = ctx.colorScheme;\n }\n const calculatedMode = (() => {\n if (!mode) {\n // This scope occurs on the server\n if (defaultMode === 'system') {\n return designSystemMode;\n }\n return defaultMode;\n }\n return mode;\n })();\n const calculatedColorScheme = (() => {\n if (!colorScheme) {\n // This scope occurs on the server\n if (calculatedMode === 'dark') {\n return defaultDarkColorScheme;\n }\n // use light color scheme, if default mode is 'light' | 'system'\n return defaultLightColorScheme;\n }\n return colorScheme;\n })();\n\n // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)\n const {\n css: rootCss,\n vars: rootVars\n } = cssVarsParser(restThemeProp, {\n prefix: cssVarPrefix,\n shouldSkipGeneratingVar\n });\n\n // 3. Start composing the theme object\n const theme = _extends({}, restThemeProp, {\n components,\n colorSchemes,\n cssVarPrefix,\n vars: rootVars,\n getColorSchemeSelector: targetColorScheme => `[${attribute}=\"${targetColorScheme}\"] &`\n });\n\n // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)\n // The default color scheme stylesheet is constructed to have the least CSS specificity.\n // The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.\n const defaultColorSchemeStyleSheet = {};\n const otherColorSchemesStyleSheet = {};\n Object.entries(colorSchemes).forEach(([key, scheme]) => {\n const {\n css,\n vars\n } = cssVarsParser(scheme, {\n prefix: cssVarPrefix,\n shouldSkipGeneratingVar\n });\n theme.vars = deepmerge(theme.vars, vars);\n if (key === calculatedColorScheme) {\n // 4.1 Merge the selected color scheme to the theme\n Object.keys(scheme).forEach(schemeKey => {\n if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {\n // shallow merge the 1st level structure of the theme.\n theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);\n } else {\n theme[schemeKey] = scheme[schemeKey];\n }\n });\n if (theme.palette) {\n theme.palette.colorScheme = key;\n }\n }\n const resolvedDefaultColorScheme = (() => {\n if (typeof defaultColorScheme === 'string') {\n return defaultColorScheme;\n }\n if (defaultMode === 'dark') {\n return defaultColorScheme.dark;\n }\n return defaultColorScheme.light;\n })();\n if (key === resolvedDefaultColorScheme) {\n if (excludeVariablesFromRoot) {\n const excludedVariables = {};\n excludeVariablesFromRoot(cssVarPrefix).forEach(cssVar => {\n excludedVariables[cssVar] = css[cssVar];\n delete css[cssVar];\n });\n defaultColorSchemeStyleSheet[`[${attribute}=\"${key}\"]`] = excludedVariables;\n }\n defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}=\"${key}\"]`] = css;\n } else {\n otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}=\"${key}\"]`] = css;\n }\n });\n\n // 5. Declaring effects\n // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.\n React.useEffect(() => {\n if (colorScheme && colorSchemeNode) {\n // attaches attribute to because the css variables are attached to :root (html)\n colorSchemeNode.setAttribute(attribute, colorScheme);\n }\n }, [colorScheme, attribute, colorSchemeNode]);\n\n // 5.2 Remove the CSS transition when color scheme changes to create instant experience.\n // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313\n React.useEffect(() => {\n let timer;\n if (disableTransitionOnChange && hasMounted.current && documentNode) {\n const css = documentNode.createElement('style');\n css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));\n documentNode.head.appendChild(css);\n\n // Force browser repaint\n (() => window.getComputedStyle(documentNode.body))();\n timer = setTimeout(() => {\n documentNode.head.removeChild(css);\n }, 1);\n }\n return () => {\n clearTimeout(timer);\n };\n }, [colorScheme, disableTransitionOnChange, documentNode]);\n React.useEffect(() => {\n hasMounted.current = true;\n return () => {\n hasMounted.current = false;\n };\n }, []);\n const contextValue = React.useMemo(() => ({\n mode,\n systemMode,\n setMode,\n lightColorScheme,\n darkColorScheme,\n colorScheme,\n setColorScheme,\n allColorSchemes\n }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);\n let shouldGenerateStyleSheet = true;\n if (disableStyleSheetGeneration || nested && (upperTheme == null ? void 0 : upperTheme.cssVarPrefix) === cssVarPrefix) {\n shouldGenerateStyleSheet = false;\n }\n const element = /*#__PURE__*/_jsxs(React.Fragment, {\n children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsxs(React.Fragment, {\n children: [/*#__PURE__*/_jsx(GlobalStyles, {\n styles: {\n [colorSchemeSelector]: rootCss\n }\n }), /*#__PURE__*/_jsx(GlobalStyles, {\n styles: defaultColorSchemeStyleSheet\n }), /*#__PURE__*/_jsx(GlobalStyles, {\n styles: otherColorSchemesStyleSheet\n })]\n }), /*#__PURE__*/_jsx(ThemeProvider, {\n theme: resolveTheme ? resolveTheme(theme) : theme,\n children: children\n })]\n });\n if (nested) {\n return element;\n }\n return /*#__PURE__*/_jsx(ColorSchemeContext.Provider, {\n value: contextValue,\n children: element\n });\n }\n process.env.NODE_ENV !== \"production\" ? CssVarsProvider.propTypes = {\n /**\n * The body attribute name to attach colorScheme.\n */\n attribute: PropTypes.string,\n /**\n * The component tree.\n */\n children: PropTypes.node,\n /**\n * The node used to attach the color-scheme attribute\n */\n colorSchemeNode: PropTypes.any,\n /**\n * The CSS selector for attaching the generated custom properties\n */\n colorSchemeSelector: PropTypes.string,\n /**\n * localStorage key used to store `colorScheme`\n */\n colorSchemeStorageKey: PropTypes.string,\n /**\n * The initial color scheme used.\n */\n defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n /**\n * The initial mode used.\n */\n defaultMode: PropTypes.string,\n /**\n * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.\n */\n disableNestedContext: PropTypes.bool,\n /**\n * If `true`, the style sheet won't be generated.\n *\n * This is useful for controlling nested CssVarsProvider behavior.\n */\n disableStyleSheetGeneration: PropTypes.bool,\n /**\n * Disable CSS transitions when switching between modes or color schemes\n */\n disableTransitionOnChange: PropTypes.bool,\n /**\n * The document to attach the attribute to\n */\n documentNode: PropTypes.any,\n /**\n * The key in the local storage used to store current color scheme.\n */\n modeStorageKey: PropTypes.string,\n /**\n * A function to determine if the key, value should be attached as CSS Variable\n */\n shouldSkipGeneratingVar: PropTypes.func,\n /**\n * The window that attaches the 'storage' event listener\n * @default window\n */\n storageWindow: PropTypes.any,\n /**\n * The calculated theme object that will be passed through context.\n */\n theme: PropTypes.object\n } : void 0;\n const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;\n const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;\n const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({\n attribute: defaultAttribute,\n colorSchemeStorageKey: defaultColorSchemeStorageKey,\n defaultMode: designSystemMode,\n defaultLightColorScheme,\n defaultDarkColorScheme,\n modeStorageKey: defaultModeStorageKey\n }, params));\n return {\n CssVarsProvider,\n useColorScheme,\n getInitColorSchemeScript\n };\n}","/**\n * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable\n * and they does not need to remember the prefix (defined once).\n */\nexport default function createGetCssVar(prefix = '') {\n function appendVar(...vars) {\n if (!vars.length) {\n return '';\n }\n const value = vars[0];\n if (typeof value === 'string' && !value.match(/(#|\\(|\\)|(-?(\\d*\\.)?\\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {\n return `, var(--${prefix ? `${prefix}-` : ''}${value}${appendVar(...vars.slice(1))})`;\n }\n return `, ${value}`;\n }\n\n // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.\n const getCssVar = (field, ...fallbacks) => {\n return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...fallbacks)})`;\n };\n return getCssVar;\n}","// Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61\nconst getOverlayAlpha = elevation => {\n let alphaValue;\n if (elevation < 1) {\n alphaValue = 5.11916 * elevation ** 2;\n } else {\n alphaValue = 4.5 * Math.log(elevation + 1) + 2;\n }\n return (alphaValue / 100).toFixed(2);\n};\nexport default getOverlayAlpha;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"colorSchemes\", \"cssVarPrefix\"],\n _excluded2 = [\"palette\"];\nimport { deepmerge } from '@mui/utils';\nimport { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, unstable_createGetCssVar as systemCreateGetCssVar } from '@mui/system';\nimport createThemeWithoutVars from './createTheme';\nimport getOverlayAlpha from './getOverlayAlpha';\nconst defaultDarkOverlays = [...Array(25)].map((_, index) => {\n if (index === 0) {\n return undefined;\n }\n const overlay = getOverlayAlpha(index);\n return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;\n});\nfunction assignNode(obj, keys) {\n keys.forEach(k => {\n if (!obj[k]) {\n obj[k] = {};\n }\n });\n}\nfunction setColor(obj, key, defaultValue) {\n if (!obj[key] && defaultValue) {\n obj[key] = defaultValue;\n }\n}\nconst silent = fn => {\n try {\n return fn();\n } catch (error) {\n // ignore error\n }\n return undefined;\n};\nexport const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);\nexport default function extendTheme(options = {}, ...args) {\n var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;\n const {\n colorSchemes: colorSchemesInput = {},\n cssVarPrefix = 'mui'\n } = options,\n input = _objectWithoutPropertiesLoose(options, _excluded);\n const getCssVar = createGetCssVar(cssVarPrefix);\n const _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {\n palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette\n })),\n {\n palette: lightPalette\n } = _createThemeWithoutVa,\n muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);\n const {\n palette: darkPalette\n } = createThemeWithoutVars({\n palette: _extends({\n mode: 'dark'\n }, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)\n });\n let theme = _extends({}, muiTheme, {\n cssVarPrefix,\n getCssVar,\n colorSchemes: _extends({}, colorSchemesInput, {\n light: _extends({}, colorSchemesInput.light, {\n palette: lightPalette,\n opacity: _extends({\n inputPlaceholder: 0.42,\n inputUnderline: 0.42,\n switchTrackDisabled: 0.12,\n switchTrack: 0.38\n }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),\n overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []\n }),\n dark: _extends({}, colorSchemesInput.dark, {\n palette: darkPalette,\n opacity: _extends({\n inputPlaceholder: 0.5,\n inputUnderline: 0.7,\n switchTrackDisabled: 0.2,\n switchTrack: 0.3\n }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),\n overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays\n })\n })\n });\n Object.keys(theme.colorSchemes).forEach(key => {\n const palette = theme.colorSchemes[key].palette;\n\n // attach black & white channels to common node\n if (key === 'light') {\n setColor(palette.common, 'background', '#fff');\n setColor(palette.common, 'onBackground', '#000');\n } else {\n setColor(palette.common, 'background', '#000');\n setColor(palette.common, 'onBackground', '#fff');\n }\n\n // assign component variables\n assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);\n if (key === 'light') {\n setColor(palette.Alert, 'errorColor', safeDarken(palette.error.light, 0.6));\n setColor(palette.Alert, 'infoColor', safeDarken(palette.info.light, 0.6));\n setColor(palette.Alert, 'successColor', safeDarken(palette.success.light, 0.6));\n setColor(palette.Alert, 'warningColor', safeDarken(palette.warning.light, 0.6));\n setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-main'));\n setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));\n setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));\n setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-main'));\n setColor(palette.Alert, 'errorFilledColor', silent(() => lightPalette.getContrastText(palette.error.main)));\n setColor(palette.Alert, 'infoFilledColor', silent(() => lightPalette.getContrastText(palette.info.main)));\n setColor(palette.Alert, 'successFilledColor', silent(() => lightPalette.getContrastText(palette.success.main)));\n setColor(palette.Alert, 'warningFilledColor', silent(() => lightPalette.getContrastText(palette.warning.main)));\n setColor(palette.Alert, 'errorStandardBg', safeLighten(palette.error.light, 0.9));\n setColor(palette.Alert, 'infoStandardBg', safeLighten(palette.info.light, 0.9));\n setColor(palette.Alert, 'successStandardBg', safeLighten(palette.success.light, 0.9));\n setColor(palette.Alert, 'warningStandardBg', safeLighten(palette.warning.light, 0.9));\n setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-light'));\n setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));\n setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));\n setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-light'));\n setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-100'));\n setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));\n setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));\n setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-700'));\n setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-700'));\n setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');\n setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');\n setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');\n setColor(palette.LinearProgress, 'primaryBg', safeLighten(palette.primary.main, 0.62));\n setColor(palette.LinearProgress, 'secondaryBg', safeLighten(palette.secondary.main, 0.62));\n setColor(palette.LinearProgress, 'errorBg', safeLighten(palette.error.main, 0.62));\n setColor(palette.LinearProgress, 'infoBg', safeLighten(palette.info.main, 0.62));\n setColor(palette.LinearProgress, 'successBg', safeLighten(palette.success.main, 0.62));\n setColor(palette.LinearProgress, 'warningBg', safeLighten(palette.warning.main, 0.62));\n setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.11)`);\n setColor(palette.Slider, 'primaryTrack', safeLighten(palette.primary.main, 0.62));\n setColor(palette.Slider, 'secondaryTrack', safeLighten(palette.secondary.main, 0.62));\n setColor(palette.Slider, 'errorTrack', safeLighten(palette.error.main, 0.62));\n setColor(palette.Slider, 'infoTrack', safeLighten(palette.info.main, 0.62));\n setColor(palette.Slider, 'successTrack', safeLighten(palette.success.main, 0.62));\n setColor(palette.Slider, 'warningTrack', safeLighten(palette.warning.main, 0.62));\n const snackbarContentBackground = safeEmphasize(palette.background.default, 0.8);\n setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);\n setColor(palette.SnackbarContent, 'color', silent(() => lightPalette.getContrastText(snackbarContentBackground)));\n setColor(palette.SpeedDialAction, 'fabHoverBg', safeEmphasize(palette.background.paper, 0.15));\n setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));\n setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));\n setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));\n setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-100'));\n setColor(palette.Switch, 'primaryDisabledColor', safeLighten(palette.primary.main, 0.62));\n setColor(palette.Switch, 'secondaryDisabledColor', safeLighten(palette.secondary.main, 0.62));\n setColor(palette.Switch, 'errorDisabledColor', safeLighten(palette.error.main, 0.62));\n setColor(palette.Switch, 'infoDisabledColor', safeLighten(palette.info.main, 0.62));\n setColor(palette.Switch, 'successDisabledColor', safeLighten(palette.success.main, 0.62));\n setColor(palette.Switch, 'warningDisabledColor', safeLighten(palette.warning.main, 0.62));\n setColor(palette.TableCell, 'border', safeLighten(safeAlpha(palette.divider, 1), 0.88));\n setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));\n } else {\n setColor(palette.Alert, 'errorColor', safeLighten(palette.error.light, 0.6));\n setColor(palette.Alert, 'infoColor', safeLighten(palette.info.light, 0.6));\n setColor(palette.Alert, 'successColor', safeLighten(palette.success.light, 0.6));\n setColor(palette.Alert, 'warningColor', safeLighten(palette.warning.light, 0.6));\n setColor(palette.Alert, 'errorFilledBg', getCssVar('palette-error-dark'));\n setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));\n setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));\n setColor(palette.Alert, 'warningFilledBg', getCssVar('palette-warning-dark'));\n setColor(palette.Alert, 'errorFilledColor', silent(() => darkPalette.getContrastText(palette.error.dark)));\n setColor(palette.Alert, 'infoFilledColor', silent(() => darkPalette.getContrastText(palette.info.dark)));\n setColor(palette.Alert, 'successFilledColor', silent(() => darkPalette.getContrastText(palette.success.dark)));\n setColor(palette.Alert, 'warningFilledColor', silent(() => darkPalette.getContrastText(palette.warning.dark)));\n setColor(palette.Alert, 'errorStandardBg', safeDarken(palette.error.light, 0.9));\n setColor(palette.Alert, 'infoStandardBg', safeDarken(palette.info.light, 0.9));\n setColor(palette.Alert, 'successStandardBg', safeDarken(palette.success.light, 0.9));\n setColor(palette.Alert, 'warningStandardBg', safeDarken(palette.warning.light, 0.9));\n setColor(palette.Alert, 'errorIconColor', getCssVar('palette-error-main'));\n setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));\n setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));\n setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));\n setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-900'));\n setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode\n setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode\n setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));\n setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));\n setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));\n setColor(palette.Chip, 'defaultIconColor', getCssVar('palette-grey-300'));\n setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');\n setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');\n setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');\n setColor(palette.LinearProgress, 'primaryBg', safeDarken(palette.primary.main, 0.5));\n setColor(palette.LinearProgress, 'secondaryBg', safeDarken(palette.secondary.main, 0.5));\n setColor(palette.LinearProgress, 'errorBg', safeDarken(palette.error.main, 0.5));\n setColor(palette.LinearProgress, 'infoBg', safeDarken(palette.info.main, 0.5));\n setColor(palette.LinearProgress, 'successBg', safeDarken(palette.success.main, 0.5));\n setColor(palette.LinearProgress, 'warningBg', safeDarken(palette.warning.main, 0.5));\n setColor(palette.Skeleton, 'bg', `rgba(${getCssVar('palette-text-primaryChannel')} / 0.13)`);\n setColor(palette.Slider, 'primaryTrack', safeDarken(palette.primary.main, 0.5));\n setColor(palette.Slider, 'secondaryTrack', safeDarken(palette.secondary.main, 0.5));\n setColor(palette.Slider, 'errorTrack', safeDarken(palette.error.main, 0.5));\n setColor(palette.Slider, 'infoTrack', safeDarken(palette.info.main, 0.5));\n setColor(palette.Slider, 'successTrack', safeDarken(palette.success.main, 0.5));\n setColor(palette.Slider, 'warningTrack', safeDarken(palette.warning.main, 0.5));\n const snackbarContentBackground = safeEmphasize(palette.background.default, 0.98);\n setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);\n setColor(palette.SnackbarContent, 'color', silent(() => darkPalette.getContrastText(snackbarContentBackground)));\n setColor(palette.SpeedDialAction, 'fabHoverBg', safeEmphasize(palette.background.paper, 0.15));\n setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));\n setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));\n setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));\n setColor(palette.Switch, 'defaultDisabledColor', getCssVar('palette-grey-600'));\n setColor(palette.Switch, 'primaryDisabledColor', safeDarken(palette.primary.main, 0.55));\n setColor(palette.Switch, 'secondaryDisabledColor', safeDarken(palette.secondary.main, 0.55));\n setColor(palette.Switch, 'errorDisabledColor', safeDarken(palette.error.main, 0.55));\n setColor(palette.Switch, 'infoDisabledColor', safeDarken(palette.info.main, 0.55));\n setColor(palette.Switch, 'successDisabledColor', safeDarken(palette.success.main, 0.55));\n setColor(palette.Switch, 'warningDisabledColor', safeDarken(palette.warning.main, 0.55));\n setColor(palette.TableCell, 'border', safeDarken(safeAlpha(palette.divider, 1), 0.68));\n setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));\n }\n setColor(palette.background, 'defaultChannel', safeColorChannel(palette.background.default, 'MUI: The value of `palette.background.default` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().')); // MUI X - DataGrid needs this token.\n\n setColor(palette.common, 'backgroundChannel', safeColorChannel(palette.common.background, 'MUI: The value of `palette.common.background` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));\n setColor(palette.common, 'onBackgroundChannel', safeColorChannel(palette.common.onBackground, 'MUI: The value of `palette.common.onBackground` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));\n setColor(palette, 'dividerChannel', safeColorChannel(palette.divider, 'MUI: The value of `palette.divider` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));\n Object.keys(palette).forEach(color => {\n const colors = palette[color];\n\n // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.\n\n if (colors && typeof colors === 'object') {\n // Silent the error for custom palettes.\n if (colors.main) {\n setColor(palette[color], 'mainChannel', safeColorChannel(colors.main));\n }\n if (colors.light) {\n setColor(palette[color], 'lightChannel', safeColorChannel(colors.light));\n }\n if (colors.dark) {\n setColor(palette[color], 'darkChannel', safeColorChannel(colors.dark));\n }\n if (colors.contrastText) {\n setColor(palette[color], 'contrastTextChannel', safeColorChannel(colors.contrastText));\n }\n if (color === 'text') {\n // Text colors: text.primary, text.secondary\n setColor(palette[color], 'primaryChannel', safeColorChannel(colors.primary, 'MUI: The value of `palette.text.primary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));\n setColor(palette[color], 'secondaryChannel', safeColorChannel(colors.secondary, 'MUI: The value of `palette.text.secondary` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));\n }\n if (color === 'action') {\n // Action colors: action.active, action.selected\n if (colors.active) {\n setColor(palette[color], 'activeChannel', safeColorChannel(colors.active, 'MUI: The value of `palette.action.active` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));\n }\n if (colors.selected) {\n setColor(palette[color], 'selectedChannel', safeColorChannel(colors.selected, 'MUI: The value of `palette.action.selected` should be one of these formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().'));\n }\n }\n }\n });\n });\n theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);\n return theme;\n}","/**\n * @internal These variables should not appear in the :root stylesheet when the `defaultMode=\"dark\"`\n */\nconst excludeVariablesFromRoot = cssVarPrefix => [...[...Array(24)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index + 1}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];\nexport default excludeVariablesFromRoot;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';\nimport experimental_extendTheme from './experimental_extendTheme';\nimport createTypography from './createTypography';\nimport excludeVariablesFromRoot from './excludeVariablesFromRoot';\nconst shouldSkipGeneratingVar = keys => {\n var _keys$;\n return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));\n};\nconst defaultTheme = experimental_extendTheme();\nconst {\n CssVarsProvider,\n useColorScheme,\n getInitColorSchemeScript\n} = createCssVarsProvider({\n theme: defaultTheme,\n attribute: 'data-mui-color-scheme',\n modeStorageKey: 'mui-mode',\n colorSchemeStorageKey: 'mui-color-scheme',\n defaultColorScheme: {\n light: 'light',\n dark: 'dark'\n },\n resolveTheme: theme => {\n const newTheme = _extends({}, theme, {\n typography: createTypography(theme.palette, theme.typography)\n });\n return newTheme;\n },\n shouldSkipGeneratingVar,\n excludeVariablesFromRoot\n});\nexport { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider };","export const reflow = node => node.scrollTop;\nexport function getTransitionProps(props, options) {\n var _style$transitionDura, _style$transitionTimi;\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 { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getCollapseUtilityClass(slot) {\n return generateUtilityClass('MuiCollapse', slot);\n}\nconst collapseClasses = generateUtilityClasses('MuiCollapse', ['root', 'horizontal', 'vertical', 'entered', 'hidden', 'wrapper', 'wrapperInner']);\nexport default collapseClasses;","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"addEndListener\", \"children\", \"className\", \"collapsedSize\", \"component\", \"easing\", \"in\", \"onEnter\", \"onEntered\", \"onEntering\", \"onExit\", \"onExited\", \"onExiting\", \"orientation\", \"style\", \"timeout\", \"TransitionComponent\"];\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { Transition } from 'react-transition-group';\nimport { elementTypeAcceptingRef } from '@mui/utils';\nimport { unstable_composeClasses as composeClasses } from '@mui/base';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport { duration } from '../styles/createTransitions';\nimport { getTransitionProps } from '../transitions/utils';\nimport useTheme from '../styles/useTheme';\nimport { useForkRef } from '../utils';\nimport { getCollapseUtilityClass } from './collapseClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n orientation,\n classes\n } = ownerState;\n const slots = {\n root: ['root', `${orientation}`],\n entered: ['entered'],\n hidden: ['hidden'],\n wrapper: ['wrapper', `${orientation}`],\n wrapperInner: ['wrapperInner', `${orientation}`]\n };\n return composeClasses(slots, getCollapseUtilityClass, classes);\n};\nconst CollapseRoot = styled('div', {\n name: 'MuiCollapse',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, styles[ownerState.orientation], ownerState.state === 'entered' && styles.entered, ownerState.state === 'exited' && !ownerState.in && ownerState.collapsedSize === '0px' && styles.hidden];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n height: 0,\n overflow: 'hidden',\n transition: theme.transitions.create('height')\n}, ownerState.orientation === 'horizontal' && {\n height: 'auto',\n width: 0,\n transition: theme.transitions.create('width')\n}, ownerState.state === 'entered' && _extends({\n height: 'auto',\n overflow: 'visible'\n}, ownerState.orientation === 'horizontal' && {\n width: 'auto'\n}), ownerState.state === 'exited' && !ownerState.in && ownerState.collapsedSize === '0px' && {\n visibility: 'hidden'\n}));\nconst CollapseWrapper = styled('div', {\n name: 'MuiCollapse',\n slot: 'Wrapper',\n overridesResolver: (props, styles) => styles.wrapper\n})(({\n ownerState\n}) => _extends({\n // Hack to get children with a negative margin to not falsify the height computation.\n display: 'flex',\n width: '100%'\n}, ownerState.orientation === 'horizontal' && {\n width: 'auto',\n height: '100%'\n}));\nconst CollapseWrapperInner = styled('div', {\n name: 'MuiCollapse',\n slot: 'WrapperInner',\n overridesResolver: (props, styles) => styles.wrapperInner\n})(({\n ownerState\n}) => _extends({\n width: '100%'\n}, ownerState.orientation === 'horizontal' && {\n width: 'auto',\n height: '100%'\n}));\n\n/**\n * The Collapse transition is used by the\n * [Vertical Stepper](/material-ui/react-stepper/#vertical-stepper) StepContent component.\n * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.\n */\nconst Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiCollapse'\n });\n const {\n addEndListener,\n children,\n className,\n collapsedSize: collapsedSizeProp = '0px',\n component,\n easing,\n in: inProp,\n onEnter,\n onEntered,\n onEntering,\n onExit,\n onExited,\n onExiting,\n orientation = 'vertical',\n style,\n timeout = duration.standard,\n // eslint-disable-next-line react/prop-types\n TransitionComponent = Transition\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n orientation,\n collapsedSize: collapsedSizeProp\n });\n const classes = useUtilityClasses(ownerState);\n const theme = useTheme();\n const timer = React.useRef();\n const wrapperRef = React.useRef(null);\n const autoTransitionDuration = React.useRef();\n const collapsedSize = typeof collapsedSizeProp === 'number' ? `${collapsedSizeProp}px` : collapsedSizeProp;\n const isHorizontal = orientation === 'horizontal';\n const size = isHorizontal ? 'width' : 'height';\n React.useEffect(() => {\n return () => {\n clearTimeout(timer.current);\n };\n }, []);\n const nodeRef = React.useRef(null);\n const handleRef = useForkRef(ref, nodeRef);\n const normalizedTransitionCallback = callback => maybeIsAppearing => {\n if (callback) {\n const node = nodeRef.current;\n\n // onEnterXxx and onExitXxx callbacks have a different arguments.length value.\n if (maybeIsAppearing === undefined) {\n callback(node);\n } else {\n callback(node, maybeIsAppearing);\n }\n }\n };\n const getWrapperSize = () => wrapperRef.current ? wrapperRef.current[isHorizontal ? 'clientWidth' : 'clientHeight'] : 0;\n const handleEnter = normalizedTransitionCallback((node, isAppearing) => {\n if (wrapperRef.current && isHorizontal) {\n // Set absolute position to get the size of collapsed content\n wrapperRef.current.style.position = 'absolute';\n }\n node.style[size] = collapsedSize;\n if (onEnter) {\n onEnter(node, isAppearing);\n }\n });\n const handleEntering = normalizedTransitionCallback((node, isAppearing) => {\n const wrapperSize = getWrapperSize();\n if (wrapperRef.current && isHorizontal) {\n // After the size is read reset the position back to default\n wrapperRef.current.style.position = '';\n }\n const {\n duration: transitionDuration,\n easing: transitionTimingFunction\n } = getTransitionProps({\n style,\n timeout,\n easing\n }, {\n mode: 'enter'\n });\n if (timeout === 'auto') {\n const duration2 = theme.transitions.getAutoHeightDuration(wrapperSize);\n node.style.transitionDuration = `${duration2}ms`;\n autoTransitionDuration.current = duration2;\n } else {\n node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;\n }\n node.style[size] = `${wrapperSize}px`;\n node.style.transitionTimingFunction = transitionTimingFunction;\n if (onEntering) {\n onEntering(node, isAppearing);\n }\n });\n const handleEntered = normalizedTransitionCallback((node, isAppearing) => {\n node.style[size] = 'auto';\n if (onEntered) {\n onEntered(node, isAppearing);\n }\n });\n const handleExit = normalizedTransitionCallback(node => {\n node.style[size] = `${getWrapperSize()}px`;\n if (onExit) {\n onExit(node);\n }\n });\n const handleExited = normalizedTransitionCallback(onExited);\n const handleExiting = normalizedTransitionCallback(node => {\n const wrapperSize = getWrapperSize();\n const {\n duration: transitionDuration,\n easing: transitionTimingFunction\n } = getTransitionProps({\n style,\n timeout,\n easing\n }, {\n mode: 'exit'\n });\n if (timeout === 'auto') {\n // TODO: rename getAutoHeightDuration to something more generic (width support)\n // Actually it just calculates animation duration based on size\n const duration2 = theme.transitions.getAutoHeightDuration(wrapperSize);\n node.style.transitionDuration = `${duration2}ms`;\n autoTransitionDuration.current = duration2;\n } else {\n node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;\n }\n node.style[size] = collapsedSize;\n node.style.transitionTimingFunction = transitionTimingFunction;\n if (onExiting) {\n onExiting(node);\n }\n });\n const handleAddEndListener = next => {\n if (timeout === 'auto') {\n timer.current = setTimeout(next, autoTransitionDuration.current || 0);\n }\n if (addEndListener) {\n // Old call signature before `react-transition-group` implemented `nodeRef`\n addEndListener(nodeRef.current, next);\n }\n };\n return /*#__PURE__*/_jsx(TransitionComponent, _extends({\n in: inProp,\n onEnter: handleEnter,\n onEntered: handleEntered,\n onEntering: handleEntering,\n onExit: handleExit,\n onExited: handleExited,\n onExiting: handleExiting,\n addEndListener: handleAddEndListener,\n nodeRef: nodeRef,\n timeout: timeout === 'auto' ? null : timeout\n }, other, {\n children: (state, childProps) => /*#__PURE__*/_jsx(CollapseRoot, _extends({\n as: component,\n className: clsx(classes.root, className, {\n 'entered': classes.entered,\n 'exited': !inProp && collapsedSize === '0px' && classes.hidden\n }[state]),\n style: _extends({\n [isHorizontal ? 'minWidth' : 'minHeight']: collapsedSize\n }, style),\n ownerState: _extends({}, ownerState, {\n state\n }),\n ref: handleRef\n }, childProps, {\n children: /*#__PURE__*/_jsx(CollapseWrapper, {\n ownerState: _extends({}, ownerState, {\n state\n }),\n className: classes.wrapper,\n ref: wrapperRef,\n children: /*#__PURE__*/_jsx(CollapseWrapperInner, {\n ownerState: _extends({}, ownerState, {\n state\n }),\n className: classes.wrapperInner,\n children: children\n })\n })\n }))\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Collapse.propTypes /* remove-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 * 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 * The content node to be collapsed.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The width (horizontal) or height (vertical) of the container when collapsed.\n * @default '0px'\n */\n collapsedSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: elementTypeAcceptingRef,\n /**\n * 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 * If `true`, the component will transition in.\n */\n in: PropTypes.bool,\n /**\n * @ignore\n */\n onEnter: PropTypes.func,\n /**\n * @ignore\n */\n onEntered: PropTypes.func,\n /**\n * @ignore\n */\n onEntering: PropTypes.func,\n /**\n * @ignore\n */\n onExit: PropTypes.func,\n /**\n * @ignore\n */\n onExited: PropTypes.func,\n /**\n * @ignore\n */\n onExiting: PropTypes.func,\n /**\n * The transition orientation.\n * @default 'vertical'\n */\n orientation: PropTypes.oneOf(['horizontal', 'vertical']),\n /**\n * @ignore\n */\n style: PropTypes.object,\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 * The duration for the transition, in milliseconds.\n * You may specify a single timeout for all transitions, or individually with an object.\n *\n * Set to 'auto' to automatically calculate transition time based on height.\n * @default duration.standard\n */\n timeout: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.shape({\n appear: PropTypes.number,\n enter: PropTypes.number,\n exit: PropTypes.number\n })])\n} : void 0;\nCollapse.muiSupportAuto = true;\nexport default Collapse;","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\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 getOverlayAlpha from '../styles/getOverlayAlpha';\nimport useThemeProps from '../styles/useThemeProps';\nimport useTheme from '../styles/useTheme';\nimport { getPaperUtilityClass } from './paperClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\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};\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}) => {\n var _theme$vars$overlays;\n return _extends({\n backgroundColor: (theme.vars || theme).palette.background.paper,\n color: (theme.vars || 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.vars || theme).palette.divider}`\n }, ownerState.variant === 'elevation' && _extends({\n boxShadow: (theme.vars || theme).shadows[ownerState.elevation]\n }, !theme.vars && theme.palette.mode === 'dark' && {\n backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(ownerState.elevation))}, ${alpha('#fff', getOverlayAlpha(ownerState.elevation))})`\n }, theme.vars && {\n backgroundImage: (_theme$vars$overlays = theme.vars.overlays) == null ? void 0 : _theme$vars$overlays[ownerState.elevation]\n }));\n});\nconst Paper = /*#__PURE__*/React.forwardRef(function Paper(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiPaper'\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 const ownerState = _extends({}, props, {\n component,\n elevation,\n square,\n variant\n });\n const classes = useUtilityClasses(ownerState);\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const theme = useTheme();\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 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 /* remove-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 * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\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 * 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 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 return null;\n }),\n /**\n * If `true`, rounded corners are disabled.\n * @default false\n */\n square: PropTypes.bool,\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 * The variant to use.\n * @default 'elevation'\n */\n variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['elevation', 'outlined']), PropTypes.string])\n} : void 0;\nexport default Paper;","import * as React from 'react';\n\n/**\n * @ignore - internal component.\n * @type {React.Context<{} | {expanded: boolean, disabled: boolean, toggle: () => void}>}\n */\nconst AccordionContext = /*#__PURE__*/React.createContext({});\nif (process.env.NODE_ENV !== 'production') {\n AccordionContext.displayName = 'AccordionContext';\n}\nexport default AccordionContext;","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getAccordionUtilityClass(slot) {\n return generateUtilityClass('MuiAccordion', slot);\n}\nconst accordionClasses = generateUtilityClasses('MuiAccordion', ['root', 'rounded', 'expanded', 'disabled', 'gutters', 'region']);\nexport default accordionClasses;","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"children\", \"className\", \"defaultExpanded\", \"disabled\", \"disableGutters\", \"expanded\", \"onChange\", \"square\", \"TransitionComponent\", \"TransitionProps\"];\nimport * as React from 'react';\nimport { isFragment } from 'react-is';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { chainPropTypes } from '@mui/utils';\nimport { unstable_composeClasses as composeClasses } from '@mui/base';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport Collapse from '../Collapse';\nimport Paper from '../Paper';\nimport AccordionContext from './AccordionContext';\nimport useControlled from '../utils/useControlled';\nimport accordionClasses, { getAccordionUtilityClass } from './accordionClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n square,\n expanded,\n disabled,\n disableGutters\n } = ownerState;\n const slots = {\n root: ['root', !square && 'rounded', expanded && 'expanded', disabled && 'disabled', !disableGutters && 'gutters'],\n region: ['region']\n };\n return composeClasses(slots, getAccordionUtilityClass, classes);\n};\nconst AccordionRoot = styled(Paper, {\n name: 'MuiAccordion',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [{\n [`& .${accordionClasses.region}`]: styles.region\n }, styles.root, !ownerState.square && styles.rounded, !ownerState.disableGutters && styles.gutters];\n }\n})(({\n theme\n}) => {\n const transition = {\n duration: theme.transitions.duration.shortest\n };\n return {\n position: 'relative',\n transition: theme.transitions.create(['margin'], transition),\n overflowAnchor: 'none',\n // Keep the same scrolling position\n '&:before': {\n position: 'absolute',\n left: 0,\n top: -1,\n right: 0,\n height: 1,\n content: '\"\"',\n opacity: 1,\n backgroundColor: (theme.vars || theme).palette.divider,\n transition: theme.transitions.create(['opacity', 'background-color'], transition)\n },\n '&:first-of-type': {\n '&:before': {\n display: 'none'\n }\n },\n [`&.${accordionClasses.expanded}`]: {\n '&:before': {\n opacity: 0\n },\n '&:first-of-type': {\n marginTop: 0\n },\n '&:last-of-type': {\n marginBottom: 0\n },\n '& + &': {\n '&:before': {\n display: 'none'\n }\n }\n },\n [`&.${accordionClasses.disabled}`]: {\n backgroundColor: (theme.vars || theme).palette.action.disabledBackground\n }\n };\n}, ({\n theme,\n ownerState\n}) => _extends({}, !ownerState.square && {\n borderRadius: 0,\n '&:first-of-type': {\n borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,\n borderTopRightRadius: (theme.vars || theme).shape.borderRadius\n },\n '&:last-of-type': {\n borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,\n borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,\n // Fix a rendering issue on Edge\n '@supports (-ms-ime-align: auto)': {\n borderBottomLeftRadius: 0,\n borderBottomRightRadius: 0\n }\n }\n}, !ownerState.disableGutters && {\n [`&.${accordionClasses.expanded}`]: {\n margin: '16px 0'\n }\n}));\nconst Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiAccordion'\n });\n const {\n children: childrenProp,\n className,\n defaultExpanded = false,\n disabled = false,\n disableGutters = false,\n expanded: expandedProp,\n onChange,\n square = false,\n TransitionComponent = Collapse,\n TransitionProps\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const [expanded, setExpandedState] = useControlled({\n controlled: expandedProp,\n default: defaultExpanded,\n name: 'Accordion',\n state: 'expanded'\n });\n const handleChange = React.useCallback(event => {\n setExpandedState(!expanded);\n if (onChange) {\n onChange(event, !expanded);\n }\n }, [expanded, onChange, setExpandedState]);\n const [summary, ...children] = React.Children.toArray(childrenProp);\n const contextValue = React.useMemo(() => ({\n expanded,\n disabled,\n disableGutters,\n toggle: handleChange\n }), [expanded, disabled, disableGutters, handleChange]);\n const ownerState = _extends({}, props, {\n square,\n disabled,\n disableGutters,\n expanded\n });\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsxs(AccordionRoot, _extends({\n className: clsx(classes.root, className),\n ref: ref,\n ownerState: ownerState,\n square: square\n }, other, {\n children: [/*#__PURE__*/_jsx(AccordionContext.Provider, {\n value: contextValue,\n children: summary\n }), /*#__PURE__*/_jsx(TransitionComponent, _extends({\n in: expanded,\n timeout: \"auto\"\n }, TransitionProps, {\n children: /*#__PURE__*/_jsx(\"div\", {\n \"aria-labelledby\": summary.props.id,\n id: summary.props['aria-controls'],\n role: \"region\",\n className: classes.region,\n children: children\n })\n }))]\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Accordion.propTypes /* remove-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 * The content of the component.\n */\n children: chainPropTypes(PropTypes.node.isRequired, props => {\n const summary = React.Children.toArray(props.children)[0];\n if (isFragment(summary)) {\n return new Error(\"MUI: The Accordion doesn't accept a Fragment as a child. \" + 'Consider providing an array instead.');\n }\n if (! /*#__PURE__*/React.isValidElement(summary)) {\n return new Error('MUI: Expected the first child of Accordion to be a valid element.');\n }\n return null;\n }),\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * If `true`, expands the accordion by default.\n * @default false\n */\n defaultExpanded: PropTypes.bool,\n /**\n * If `true`, the component is disabled.\n * @default false\n */\n disabled: PropTypes.bool,\n /**\n * If `true`, it removes the margin between two expanded accordion items and the increase of height.\n * @default false\n */\n disableGutters: PropTypes.bool,\n /**\n * If `true`, expands the accordion, otherwise collapse it.\n * Setting this prop enables control over the accordion.\n */\n expanded: PropTypes.bool,\n /**\n * Callback fired when the expand/collapse state is changed.\n *\n * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.\n * @param {boolean} expanded The `expanded` state of the accordion.\n */\n onChange: PropTypes.func,\n /**\n * If `true`, rounded corners are disabled.\n * @default false\n */\n square: PropTypes.bool,\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 * 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 Collapse\n */\n TransitionComponent: PropTypes.elementType,\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 Accordion;","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getAccordionActionsUtilityClass(slot) {\n return generateUtilityClass('MuiAccordionActions', slot);\n}\nconst accordionActionsClasses = generateUtilityClasses('MuiAccordionActions', ['root', 'spacing']);\nexport default accordionActionsClasses;","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"className\", \"disableSpacing\"];\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 { getAccordionActionsUtilityClass } from './accordionActionsClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n disableSpacing\n } = ownerState;\n const slots = {\n root: ['root', !disableSpacing && 'spacing']\n };\n return composeClasses(slots, getAccordionActionsUtilityClass, classes);\n};\nconst AccordionActionsRoot = styled('div', {\n name: 'MuiAccordionActions',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, !ownerState.disableSpacing && styles.spacing];\n }\n})(({\n ownerState\n}) => _extends({\n display: 'flex',\n alignItems: 'center',\n padding: 8,\n justifyContent: 'flex-end'\n}, !ownerState.disableSpacing && {\n '& > :not(:first-of-type)': {\n marginLeft: 8\n }\n}));\nconst AccordionActions = /*#__PURE__*/React.forwardRef(function AccordionActions(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiAccordionActions'\n });\n const {\n className,\n disableSpacing = false\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n disableSpacing\n });\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(AccordionActionsRoot, _extends({\n className: clsx(classes.root, className),\n ref: ref,\n ownerState: ownerState\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? AccordionActions.propTypes /* remove-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 * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * If `true`, the actions do not have additional margin.\n * @default false\n */\n disableSpacing: PropTypes.bool,\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 AccordionActions;","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getAccordionDetailsUtilityClass(slot) {\n return generateUtilityClass('MuiAccordionDetails', slot);\n}\nconst accordionDetailsClasses = generateUtilityClasses('MuiAccordionDetails', ['root']);\nexport default accordionDetailsClasses;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"className\"];\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 { getAccordionDetailsUtilityClass } from './accordionDetailsClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n classes\n } = ownerState;\n const slots = {\n root: ['root']\n };\n return composeClasses(slots, getAccordionDetailsUtilityClass, classes);\n};\nconst AccordionDetailsRoot = styled('div', {\n name: 'MuiAccordionDetails',\n slot: 'Root',\n overridesResolver: (props, styles) => styles.root\n})(({\n theme\n}) => ({\n padding: theme.spacing(1, 2, 2)\n}));\nconst AccordionDetails = /*#__PURE__*/React.forwardRef(function AccordionDetails(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiAccordionDetails'\n });\n const {\n className\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = props;\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(AccordionDetailsRoot, _extends({\n className: clsx(classes.root, className),\n ref: ref,\n ownerState: ownerState\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? AccordionDetails.propTypes /* remove-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 * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\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 AccordionDetails;","export default function _taggedTemplateLiteral(strings, raw) {\n if (!raw) {\n raw = strings.slice(0);\n }\n\n return Object.freeze(Object.defineProperties(strings, {\n raw: {\n value: Object.freeze(raw)\n }\n }));\n}","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\n/**\n * @ignore - internal component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction Ripple(props) {\n const {\n className,\n classes,\n pulsate = false,\n rippleX,\n rippleY,\n rippleSize,\n in: inProp,\n onExited,\n timeout\n } = props;\n const [leaving, setLeaving] = React.useState(false);\n const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);\n const rippleStyles = {\n width: rippleSize,\n height: rippleSize,\n top: -(rippleSize / 2) + rippleY,\n left: -(rippleSize / 2) + rippleX\n };\n const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);\n if (!inProp && !leaving) {\n setLeaving(true);\n }\n React.useEffect(() => {\n if (!inProp && onExited != null) {\n // react-transition-group#onExited\n const timeoutId = setTimeout(onExited, timeout);\n return () => {\n clearTimeout(timeoutId);\n };\n }\n return undefined;\n }, [onExited, inProp, timeout]);\n return /*#__PURE__*/_jsx(\"span\", {\n className: rippleClassName,\n style: rippleStyles,\n children: /*#__PURE__*/_jsx(\"span\", {\n className: childClassName\n })\n });\n}\nprocess.env.NODE_ENV !== \"production\" ? Ripple.propTypes = {\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 className: PropTypes.string,\n /**\n * @ignore - injected from TransitionGroup\n */\n in: PropTypes.bool,\n /**\n * @ignore - injected from TransitionGroup\n */\n onExited: PropTypes.func,\n /**\n * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.\n */\n pulsate: PropTypes.bool,\n /**\n * Diameter of the ripple.\n */\n rippleSize: PropTypes.number,\n /**\n * Horizontal position of the ripple center.\n */\n rippleX: PropTypes.number,\n /**\n * Vertical position of the ripple center.\n */\n rippleY: PropTypes.number,\n /**\n * exit delay\n */\n timeout: PropTypes.number.isRequired\n} : void 0;\nexport default Ripple;","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getTouchRippleUtilityClass(slot) {\n return generateUtilityClass('MuiTouchRipple', slot);\n}\nconst touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);\nexport default touchRippleClasses;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"center\", \"classes\", \"className\"];\nlet _ = t => t,\n _t,\n _t2,\n _t3,\n _t4;\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\nimport { keyframes } from '@mui/system';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport Ripple from './Ripple';\nimport touchRippleClasses from './touchRippleClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DURATION = 550;\nexport const DELAY_RIPPLE = 80;\nconst enterKeyframe = keyframes(_t || (_t = _`\n 0% {\n transform: scale(0);\n opacity: 0.1;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0.3;\n }\n`));\nconst exitKeyframe = keyframes(_t2 || (_t2 = _`\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n`));\nconst pulsateKeyframe = keyframes(_t3 || (_t3 = _`\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.92);\n }\n\n 100% {\n transform: scale(1);\n }\n`));\nexport const TouchRippleRoot = styled('span', {\n name: 'MuiTouchRipple',\n slot: 'Root'\n})({\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 0,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: 'inherit'\n});\n\n// This `styled()` function invokes keyframes. `styled-components` only supports keyframes\n// in string templates. Do not convert these styles in JS object as it will break.\nexport const TouchRippleRipple = styled(Ripple, {\n name: 'MuiTouchRipple',\n slot: 'Ripple'\n})(_t4 || (_t4 = _`\n opacity: 0;\n position: absolute;\n\n &.${0} {\n opacity: 0.3;\n transform: scale(1);\n animation-name: ${0};\n animation-duration: ${0}ms;\n animation-timing-function: ${0};\n }\n\n &.${0} {\n animation-duration: ${0}ms;\n }\n\n & .${0} {\n opacity: 1;\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: currentColor;\n }\n\n & .${0} {\n opacity: 0;\n animation-name: ${0};\n animation-duration: ${0}ms;\n animation-timing-function: ${0};\n }\n\n & .${0} {\n position: absolute;\n /* @noflip */\n left: 0px;\n top: 0;\n animation-name: ${0};\n animation-duration: 2500ms;\n animation-timing-function: ${0};\n animation-iteration-count: infinite;\n animation-delay: 200ms;\n }\n`), touchRippleClasses.rippleVisible, enterKeyframe, DURATION, ({\n theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.ripplePulsate, ({\n theme\n}) => theme.transitions.duration.shorter, touchRippleClasses.child, touchRippleClasses.childLeaving, exitKeyframe, DURATION, ({\n theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.childPulsate, pulsateKeyframe, ({\n theme\n}) => theme.transitions.easing.easeInOut);\n\n/**\n * @ignore - internal component.\n *\n * TODO v5: Make private\n */\nconst TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiTouchRipple'\n });\n const {\n center: centerProp = false,\n classes = {},\n className\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const [ripples, setRipples] = React.useState([]);\n const nextKey = React.useRef(0);\n const rippleCallback = React.useRef(null);\n React.useEffect(() => {\n if (rippleCallback.current) {\n rippleCallback.current();\n rippleCallback.current = null;\n }\n }, [ripples]);\n\n // Used to filter out mouse emulated events on mobile.\n const ignoringMouseDown = React.useRef(false);\n // We use a timer in order to only show the ripples for touch \"click\" like events.\n // We don't want to display the ripple for touch scroll events.\n const startTimer = React.useRef(null);\n\n // This is the hook called once the previous timeout is ready.\n const startTimerCommit = React.useRef(null);\n const container = React.useRef(null);\n React.useEffect(() => {\n return () => {\n clearTimeout(startTimer.current);\n };\n }, []);\n const startCommit = React.useCallback(params => {\n const {\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n } = params;\n setRipples(oldRipples => [...oldRipples, /*#__PURE__*/_jsx(TouchRippleRipple, {\n classes: {\n ripple: clsx(classes.ripple, touchRippleClasses.ripple),\n rippleVisible: clsx(classes.rippleVisible, touchRippleClasses.rippleVisible),\n ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses.ripplePulsate),\n child: clsx(classes.child, touchRippleClasses.child),\n childLeaving: clsx(classes.childLeaving, touchRippleClasses.childLeaving),\n childPulsate: clsx(classes.childPulsate, touchRippleClasses.childPulsate)\n },\n timeout: DURATION,\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize\n }, nextKey.current)]);\n nextKey.current += 1;\n rippleCallback.current = cb;\n }, [classes]);\n const start = React.useCallback((event = {}, options = {}, cb = () => {}) => {\n const {\n pulsate = false,\n center = centerProp || options.pulsate,\n fakeElement = false // For test purposes\n } = options;\n if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {\n ignoringMouseDown.current = false;\n return;\n }\n if ((event == null ? void 0 : event.type) === 'touchstart') {\n ignoringMouseDown.current = true;\n }\n const element = fakeElement ? null : container.current;\n const rect = element ? element.getBoundingClientRect() : {\n width: 0,\n height: 0,\n left: 0,\n top: 0\n };\n\n // Get the size of the ripple\n let rippleX;\n let rippleY;\n let rippleSize;\n if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {\n rippleX = Math.round(rect.width / 2);\n rippleY = Math.round(rect.height / 2);\n } else {\n const {\n clientX,\n clientY\n } = event.touches && event.touches.length > 0 ? event.touches[0] : event;\n rippleX = Math.round(clientX - rect.left);\n rippleY = Math.round(clientY - rect.top);\n }\n if (center) {\n rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);\n\n // For some reason the animation is broken on Mobile Chrome if the size is even.\n if (rippleSize % 2 === 0) {\n rippleSize += 1;\n }\n } else {\n const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;\n const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;\n rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);\n }\n\n // Touche devices\n if (event != null && event.touches) {\n // check that this isn't another touchstart due to multitouch\n // otherwise we will only clear a single timer when unmounting while two\n // are running\n if (startTimerCommit.current === null) {\n // Prepare the ripple effect.\n startTimerCommit.current = () => {\n startCommit({\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n });\n };\n // Delay the execution of the ripple effect.\n startTimer.current = setTimeout(() => {\n if (startTimerCommit.current) {\n startTimerCommit.current();\n startTimerCommit.current = null;\n }\n }, DELAY_RIPPLE); // We have to make a tradeoff with this value.\n }\n } else {\n startCommit({\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n });\n }\n }, [centerProp, startCommit]);\n const pulsate = React.useCallback(() => {\n start({}, {\n pulsate: true\n });\n }, [start]);\n const stop = React.useCallback((event, cb) => {\n clearTimeout(startTimer.current);\n\n // The touch interaction occurs too quickly.\n // We still want to show ripple effect.\n if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {\n startTimerCommit.current();\n startTimerCommit.current = null;\n startTimer.current = setTimeout(() => {\n stop(event, cb);\n });\n return;\n }\n startTimerCommit.current = null;\n setRipples(oldRipples => {\n if (oldRipples.length > 0) {\n return oldRipples.slice(1);\n }\n return oldRipples;\n });\n rippleCallback.current = cb;\n }, []);\n React.useImperativeHandle(ref, () => ({\n pulsate,\n start,\n stop\n }), [pulsate, start, stop]);\n return /*#__PURE__*/_jsx(TouchRippleRoot, _extends({\n className: clsx(touchRippleClasses.root, classes.root, className),\n ref: container\n }, other, {\n children: /*#__PURE__*/_jsx(TransitionGroup, {\n component: null,\n exit: true,\n children: ripples\n })\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? TouchRipple.propTypes = {\n /**\n * If `true`, the ripple starts at the center of the component\n * rather than at the point of interaction.\n */\n center: PropTypes.bool,\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 * @ignore\n */\n className: PropTypes.string\n} : void 0;\nexport default TouchRipple;","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getButtonBaseUtilityClass(slot) {\n return generateUtilityClass('MuiButtonBase', slot);\n}\nconst buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);\nexport default buttonBaseClasses;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"action\", \"centerRipple\", \"children\", \"className\", \"component\", \"disabled\", \"disableRipple\", \"disableTouchRipple\", \"focusRipple\", \"focusVisibleClassName\", \"LinkComponent\", \"onBlur\", \"onClick\", \"onContextMenu\", \"onDragLeave\", \"onFocus\", \"onFocusVisible\", \"onKeyDown\", \"onKeyUp\", \"onMouseDown\", \"onMouseLeave\", \"onMouseUp\", \"onTouchEnd\", \"onTouchMove\", \"onTouchStart\", \"tabIndex\", \"TouchRippleProps\", \"touchRippleRef\", \"type\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { elementTypeAcceptingRef, refType } from '@mui/utils';\nimport composeClasses from '@mui/base/composeClasses';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport useForkRef from '../utils/useForkRef';\nimport useEventCallback from '../utils/useEventCallback';\nimport useIsFocusVisible from '../utils/useIsFocusVisible';\nimport TouchRipple from './TouchRipple';\nimport buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n disabled,\n focusVisible,\n focusVisibleClassName,\n classes\n } = ownerState;\n const slots = {\n root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']\n };\n const composedClasses = composeClasses(slots, getButtonBaseUtilityClass, classes);\n if (focusVisible && focusVisibleClassName) {\n composedClasses.root += ` ${focusVisibleClassName}`;\n }\n return composedClasses;\n};\nexport const ButtonBaseRoot = styled('button', {\n name: 'MuiButtonBase',\n slot: 'Root',\n overridesResolver: (props, styles) => styles.root\n})({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n WebkitTapHighlightColor: 'transparent',\n backgroundColor: 'transparent',\n // Reset default value\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n border: 0,\n margin: 0,\n // Remove the margin in Safari\n borderRadius: 0,\n padding: 0,\n // Remove the padding in Firefox\n cursor: 'pointer',\n userSelect: 'none',\n verticalAlign: 'middle',\n MozAppearance: 'none',\n // Reset\n WebkitAppearance: 'none',\n // Reset\n textDecoration: 'none',\n // So we take precedent over the style of a native element.\n color: 'inherit',\n '&::-moz-focus-inner': {\n borderStyle: 'none' // Remove Firefox dotted outline.\n },\n\n [`&.${buttonBaseClasses.disabled}`]: {\n pointerEvents: 'none',\n // Disable link interactions\n cursor: 'default'\n },\n '@media print': {\n colorAdjust: 'exact'\n }\n});\n\n/**\n * `ButtonBase` contains as few styles as possible.\n * It aims to be a simple building block for creating a button.\n * It contains a load of style reset and some focus/ripple logic.\n */\nconst ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiButtonBase'\n });\n const {\n action,\n centerRipple = false,\n children,\n className,\n component = 'button',\n disabled = false,\n disableRipple = false,\n disableTouchRipple = false,\n focusRipple = false,\n LinkComponent = 'a',\n onBlur,\n onClick,\n onContextMenu,\n onDragLeave,\n onFocus,\n onFocusVisible,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseLeave,\n onMouseUp,\n onTouchEnd,\n onTouchMove,\n onTouchStart,\n tabIndex = 0,\n TouchRippleProps,\n touchRippleRef,\n type\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const buttonRef = React.useRef(null);\n const rippleRef = React.useRef(null);\n const handleRippleRef = useForkRef(rippleRef, touchRippleRef);\n const {\n isFocusVisibleRef,\n onFocus: handleFocusVisible,\n onBlur: handleBlurVisible,\n ref: focusVisibleRef\n } = useIsFocusVisible();\n const [focusVisible, setFocusVisible] = React.useState(false);\n if (disabled && focusVisible) {\n setFocusVisible(false);\n }\n React.useImperativeHandle(action, () => ({\n focusVisible: () => {\n setFocusVisible(true);\n buttonRef.current.focus();\n }\n }), []);\n const [mountedState, setMountedState] = React.useState(false);\n React.useEffect(() => {\n setMountedState(true);\n }, []);\n const enableTouchRipple = mountedState && !disableRipple && !disabled;\n React.useEffect(() => {\n if (focusVisible && focusRipple && !disableRipple && mountedState) {\n rippleRef.current.pulsate();\n }\n }, [disableRipple, focusRipple, focusVisible, mountedState]);\n function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {\n return useEventCallback(event => {\n if (eventCallback) {\n eventCallback(event);\n }\n const ignore = skipRippleAction;\n if (!ignore && rippleRef.current) {\n rippleRef.current[rippleAction](event);\n }\n return true;\n });\n }\n const handleMouseDown = useRippleHandler('start', onMouseDown);\n const handleContextMenu = useRippleHandler('stop', onContextMenu);\n const handleDragLeave = useRippleHandler('stop', onDragLeave);\n const handleMouseUp = useRippleHandler('stop', onMouseUp);\n const handleMouseLeave = useRippleHandler('stop', event => {\n if (focusVisible) {\n event.preventDefault();\n }\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n });\n const handleTouchStart = useRippleHandler('start', onTouchStart);\n const handleTouchEnd = useRippleHandler('stop', onTouchEnd);\n const handleTouchMove = useRippleHandler('stop', onTouchMove);\n const handleBlur = useRippleHandler('stop', event => {\n handleBlurVisible(event);\n if (isFocusVisibleRef.current === false) {\n setFocusVisible(false);\n }\n if (onBlur) {\n onBlur(event);\n }\n }, false);\n const handleFocus = useEventCallback(event => {\n // Fix for https://github.com/facebook/react/issues/7769\n if (!buttonRef.current) {\n buttonRef.current = event.currentTarget;\n }\n handleFocusVisible(event);\n if (isFocusVisibleRef.current === true) {\n setFocusVisible(true);\n if (onFocusVisible) {\n onFocusVisible(event);\n }\n }\n if (onFocus) {\n onFocus(event);\n }\n });\n const isNonNativeButton = () => {\n const button = buttonRef.current;\n return component && component !== 'button' && !(button.tagName === 'A' && button.href);\n };\n\n /**\n * IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat\n */\n const keydownRef = React.useRef(false);\n const handleKeyDown = useEventCallback(event => {\n // Check if key is already down to avoid repeats being counted as multiple activations\n if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {\n keydownRef.current = true;\n rippleRef.current.stop(event, () => {\n rippleRef.current.start(event);\n });\n }\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {\n event.preventDefault();\n }\n if (onKeyDown) {\n onKeyDown(event);\n }\n\n // Keyboard accessibility for non interactive elements\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {\n event.preventDefault();\n if (onClick) {\n onClick(event);\n }\n }\n });\n const handleKeyUp = useEventCallback(event => {\n // calling preventDefault in keyUp on a