;\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 * 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 { 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 { createSvgIcon } from '@material-ui/core/utils';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z\"\n}), 'SuccessOutlined');","import * as React from 'react';\nimport { createSvgIcon } from '@material-ui/core/utils';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z\"\n}), 'ReportProblemOutlined');","import * as React from 'react';\nimport { createSvgIcon } from '@material-ui/core/utils';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"\n}), 'ErrorOutline');","import * as React from 'react';\nimport { createSvgIcon } from '@material-ui/core/utils';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z\"\n}), 'InfoOutlined');","import * as React from 'react';\nimport { createSvgIcon } from '@material-ui/core/utils';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n}), 'Close');","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { withStyles, lighten, darken } from '@material-ui/core/styles';\nimport Paper from '@material-ui/core/Paper';\nimport SuccessOutlinedIcon from '../internal/svg-icons/SuccessOutlined';\nimport ReportProblemOutlinedIcon from '../internal/svg-icons/ReportProblemOutlined';\nimport ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline';\nimport InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined';\nimport CloseIcon from '../internal/svg-icons/Close';\nimport IconButton from '@material-ui/core/IconButton';\nimport { capitalize } from '@material-ui/core/utils';\nexport var styles = function styles(theme) {\n var getColor = theme.palette.type === 'light' ? darken : lighten;\n var getBackgroundColor = theme.palette.type === 'light' ? lighten : darken;\n return {\n /* Styles applied to the root element. */\n root: _extends({}, theme.typography.body2, {\n borderRadius: theme.shape.borderRadius,\n backgroundColor: 'transparent',\n display: 'flex',\n padding: '6px 16px'\n }),\n\n /* Styles applied to the root element if `variant=\"standard\"` and `color=\"success\"`. */\n standardSuccess: {\n color: getColor(theme.palette.success.main, 0.6),\n backgroundColor: getBackgroundColor(theme.palette.success.main, 0.9),\n '& $icon': {\n color: theme.palette.success.main\n }\n },\n\n /* Styles applied to the root element if `variant=\"standard\"` and `color=\"info\"`. */\n standardInfo: {\n color: getColor(theme.palette.info.main, 0.6),\n backgroundColor: getBackgroundColor(theme.palette.info.main, 0.9),\n '& $icon': {\n color: theme.palette.info.main\n }\n },\n\n /* Styles applied to the root element if `variant=\"standard\"` and `color=\"warning\"`. */\n standardWarning: {\n color: getColor(theme.palette.warning.main, 0.6),\n backgroundColor: getBackgroundColor(theme.palette.warning.main, 0.9),\n '& $icon': {\n color: theme.palette.warning.main\n }\n },\n\n /* Styles applied to the root element if `variant=\"standard\"` and `color=\"error\"`. */\n standardError: {\n color: getColor(theme.palette.error.main, 0.6),\n backgroundColor: getBackgroundColor(theme.palette.error.main, 0.9),\n '& $icon': {\n color: theme.palette.error.main\n }\n },\n\n /* Styles applied to the root element if `variant=\"outlined\"` and `color=\"success\"`. */\n outlinedSuccess: {\n color: getColor(theme.palette.success.main, 0.6),\n border: \"1px solid \".concat(theme.palette.success.main),\n '& $icon': {\n color: theme.palette.success.main\n }\n },\n\n /* Styles applied to the root element if `variant=\"outlined\"` and `color=\"info\"`. */\n outlinedInfo: {\n color: getColor(theme.palette.info.main, 0.6),\n border: \"1px solid \".concat(theme.palette.info.main),\n '& $icon': {\n color: theme.palette.info.main\n }\n },\n\n /* Styles applied to the root element if `variant=\"outlined\"` and `color=\"warning\"`. */\n outlinedWarning: {\n color: getColor(theme.palette.warning.main, 0.6),\n border: \"1px solid \".concat(theme.palette.warning.main),\n '& $icon': {\n color: theme.palette.warning.main\n }\n },\n\n /* Styles applied to the root element if `variant=\"outlined\"` and `color=\"error\"`. */\n outlinedError: {\n color: getColor(theme.palette.error.main, 0.6),\n border: \"1px solid \".concat(theme.palette.error.main),\n '& $icon': {\n color: theme.palette.error.main\n }\n },\n\n /* Styles applied to the root element if `variant=\"filled\"` and `color=\"success\"`. */\n filledSuccess: {\n color: '#fff',\n fontWeight: theme.typography.fontWeightMedium,\n backgroundColor: theme.palette.success.main\n },\n\n /* Styles applied to the root element if `variant=\"filled\"` and `color=\"info\"`. */\n filledInfo: {\n color: '#fff',\n fontWeight: theme.typography.fontWeightMedium,\n backgroundColor: theme.palette.info.main\n },\n\n /* Styles applied to the root element if `variant=\"filled\"` and `color=\"warning\"`. */\n filledWarning: {\n color: '#fff',\n fontWeight: theme.typography.fontWeightMedium,\n backgroundColor: theme.palette.warning.main\n },\n\n /* Styles applied to the root element if `variant=\"filled\"` and `color=\"error\"`. */\n filledError: {\n color: '#fff',\n fontWeight: theme.typography.fontWeightMedium,\n backgroundColor: theme.palette.error.main\n },\n\n /* Styles applied to the icon wrapper element. */\n icon: {\n marginRight: 12,\n padding: '7px 0',\n display: 'flex',\n fontSize: 22,\n opacity: 0.9\n },\n\n /* Styles applied to the message wrapper element. */\n message: {\n padding: '8px 0'\n },\n\n /* Styles applied to the action wrapper element if `action` is provided. */\n action: {\n display: 'flex',\n alignItems: 'center',\n marginLeft: 'auto',\n paddingLeft: 16,\n marginRight: -8\n }\n };\n};\nvar defaultIconMapping = {\n success: /*#__PURE__*/React.createElement(SuccessOutlinedIcon, {\n fontSize: \"inherit\"\n }),\n warning: /*#__PURE__*/React.createElement(ReportProblemOutlinedIcon, {\n fontSize: \"inherit\"\n }),\n error: /*#__PURE__*/React.createElement(ErrorOutlineIcon, {\n fontSize: \"inherit\"\n }),\n info: /*#__PURE__*/React.createElement(InfoOutlinedIcon, {\n fontSize: \"inherit\"\n })\n};\n\nvar _ref = /*#__PURE__*/React.createElement(CloseIcon, {\n fontSize: \"small\"\n});\n\nvar Alert = /*#__PURE__*/React.forwardRef(function Alert(props, ref) {\n var action = props.action,\n children = props.children,\n classes = props.classes,\n className = props.className,\n _props$closeText = props.closeText,\n closeText = _props$closeText === void 0 ? 'Close' : _props$closeText,\n color = props.color,\n icon = props.icon,\n _props$iconMapping = props.iconMapping,\n iconMapping = _props$iconMapping === void 0 ? defaultIconMapping : _props$iconMapping,\n onClose = props.onClose,\n _props$role = props.role,\n role = _props$role === void 0 ? 'alert' : _props$role,\n _props$severity = props.severity,\n severity = _props$severity === void 0 ? 'success' : _props$severity,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'standard' : _props$variant,\n other = _objectWithoutProperties(props, [\"action\", \"children\", \"classes\", \"className\", \"closeText\", \"color\", \"icon\", \"iconMapping\", \"onClose\", \"role\", \"severity\", \"variant\"]);\n\n return /*#__PURE__*/React.createElement(Paper, _extends({\n role: role,\n square: true,\n elevation: 0,\n className: clsx(classes.root, classes[\"\".concat(variant).concat(capitalize(color || severity))], className),\n ref: ref\n }, other), icon !== false ? /*#__PURE__*/React.createElement(\"div\", {\n className: classes.icon\n }, icon || iconMapping[severity] || defaultIconMapping[severity]) : null, /*#__PURE__*/React.createElement(\"div\", {\n className: classes.message\n }, children), action != null ? /*#__PURE__*/React.createElement(\"div\", {\n className: classes.action\n }, action) : null, action == null && onClose ? /*#__PURE__*/React.createElement(\"div\", {\n className: classes.action\n }, /*#__PURE__*/React.createElement(IconButton, {\n size: \"small\",\n \"aria-label\": closeText,\n title: closeText,\n color: \"inherit\",\n onClick: onClose\n }, _ref)) : null);\n});\nprocess.env.NODE_ENV !== \"production\" ? Alert.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The action to display. It renders after the message, at the end of the alert.\n */\n action: PropTypes.node,\n\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * Override the default label for the *close popup* icon button.\n *\n * For localization purposes, you can use the provided [translations](/guides/localization/).\n */\n closeText: PropTypes.string,\n\n /**\n * The main color for the alert. Unless provided, the value is taken from the `severity` prop.\n */\n color: PropTypes.oneOf(['error', 'info', 'success', 'warning']),\n\n /**\n * Override the icon displayed before the children.\n * Unless provided, the icon is mapped to the value of the `severity` prop.\n */\n icon: PropTypes.node,\n\n /**\n * The component maps the `severity` prop to a range of different icons,\n * for instance success to ``.\n * If you wish to change this mapping, you can provide your own.\n * Alternatively, you can use the `icon` prop to override the icon displayed.\n */\n iconMapping: PropTypes.shape({\n error: PropTypes.node,\n info: PropTypes.node,\n success: PropTypes.node,\n warning: PropTypes.node\n }),\n\n /**\n * Callback fired when the component requests to be closed.\n * When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.\n *\n * @param {object} event The event source of the callback.\n */\n onClose: PropTypes.func,\n\n /**\n * The ARIA role attribute of the element.\n */\n role: PropTypes.string,\n\n /**\n * The severity of the alert. This defines the color and icon used.\n */\n severity: PropTypes.oneOf(['error', 'info', 'success', 'warning']),\n\n /**\n * The variant to use.\n */\n variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiAlert'\n})(Alert);","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"\n}), 'RadioButtonUnchecked');","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z\"\n}), 'RadioButtonChecked');","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';\nimport RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';\nimport withStyles from '../styles/withStyles';\nexport var styles = function styles(theme) {\n return {\n root: {\n position: 'relative',\n display: 'flex',\n '&$checked $layer': {\n transform: 'scale(1)',\n transition: theme.transitions.create('transform', {\n easing: theme.transitions.easing.easeOut,\n duration: theme.transitions.duration.shortest\n })\n }\n },\n layer: {\n left: 0,\n position: 'absolute',\n transform: 'scale(0)',\n transition: theme.transitions.create('transform', {\n easing: theme.transitions.easing.easeIn,\n duration: theme.transitions.duration.shortest\n })\n },\n checked: {}\n };\n};\n/**\n * @ignore - internal component.\n */\n\nfunction RadioButtonIcon(props) {\n var checked = props.checked,\n classes = props.classes,\n fontSize = props.fontSize;\n return /*#__PURE__*/React.createElement(\"div\", {\n className: clsx(classes.root, checked && classes.checked)\n }, /*#__PURE__*/React.createElement(RadioButtonUncheckedIcon, {\n fontSize: fontSize\n }), /*#__PURE__*/React.createElement(RadioButtonCheckedIcon, {\n fontSize: fontSize,\n className: classes.layer\n }));\n}\n\nprocess.env.NODE_ENV !== \"production\" ? RadioButtonIcon.propTypes = {\n /**\n * If `true`, the component is checked.\n */\n checked: PropTypes.bool,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * The size of the radio.\n * `small` is equivalent to the dense radio styling.\n */\n fontSize: PropTypes.oneOf(['small', 'default'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'PrivateRadioButtonIcon'\n})(RadioButtonIcon);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { refType } from '@material-ui/utils';\nimport SwitchBase from '../internal/SwitchBase';\nimport RadioButtonIcon from './RadioButtonIcon';\nimport { fade } from '../styles/colorManipulator';\nimport capitalize from '../utils/capitalize';\nimport createChainedFunction from '../utils/createChainedFunction';\nimport withStyles from '../styles/withStyles';\nimport useRadioGroup from '../RadioGroup/useRadioGroup';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n color: theme.palette.text.secondary\n },\n\n /* Pseudo-class applied to the root element if `checked={true}`. */\n checked: {},\n\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\n /* Styles applied to the root element if `color=\"primary\"`. */\n colorPrimary: {\n '&$checked': {\n color: theme.palette.primary.main,\n '&:hover': {\n backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n }\n },\n '&$disabled': {\n color: theme.palette.action.disabled\n }\n },\n\n /* Styles applied to the root element if `color=\"secondary\"`. */\n colorSecondary: {\n '&$checked': {\n color: theme.palette.secondary.main,\n '&:hover': {\n backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n }\n },\n '&$disabled': {\n color: theme.palette.action.disabled\n }\n }\n };\n};\nvar defaultCheckedIcon = /*#__PURE__*/React.createElement(RadioButtonIcon, {\n checked: true\n});\nvar defaultIcon = /*#__PURE__*/React.createElement(RadioButtonIcon, null);\nvar Radio = /*#__PURE__*/React.forwardRef(function Radio(props, ref) {\n var checkedProp = props.checked,\n classes = props.classes,\n _props$color = props.color,\n color = _props$color === void 0 ? 'secondary' : _props$color,\n nameProp = props.name,\n onChangeProp = props.onChange,\n _props$size = props.size,\n size = _props$size === void 0 ? 'medium' : _props$size,\n other = _objectWithoutProperties(props, [\"checked\", \"classes\", \"color\", \"name\", \"onChange\", \"size\"]);\n\n var radioGroup = useRadioGroup();\n var checked = checkedProp;\n var onChange = createChainedFunction(onChangeProp, radioGroup && radioGroup.onChange);\n var name = nameProp;\n\n if (radioGroup) {\n if (typeof checked === 'undefined') {\n checked = radioGroup.value === props.value;\n }\n\n if (typeof name === 'undefined') {\n name = radioGroup.name;\n }\n }\n\n return /*#__PURE__*/React.createElement(SwitchBase, _extends({\n color: color,\n type: \"radio\",\n icon: /*#__PURE__*/React.cloneElement(defaultIcon, {\n fontSize: size === 'small' ? 'small' : 'default'\n }),\n checkedIcon: /*#__PURE__*/React.cloneElement(defaultCheckedIcon, {\n fontSize: size === 'small' ? 'small' : 'default'\n }),\n classes: {\n root: clsx(classes.root, classes[\"color\".concat(capitalize(color))]),\n checked: classes.checked,\n disabled: classes.disabled\n },\n name: name,\n checked: checked,\n onChange: onChange,\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? Radio.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * If `true`, the component is checked.\n */\n checked: PropTypes.bool,\n\n /**\n * The icon to display when the component is checked.\n */\n checkedIcon: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n */\n color: PropTypes.oneOf(['default', 'primary', 'secondary']),\n\n /**\n * If `true`, the radio will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * If `true`, the ripple effect will be disabled.\n */\n disableRipple: PropTypes.bool,\n\n /**\n * The icon to display when the component is unchecked.\n */\n icon: PropTypes.node,\n\n /**\n * The id of the `input` element.\n */\n id: PropTypes.string,\n\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps: PropTypes.object,\n\n /**\n * Pass a ref to the `input` element.\n */\n inputRef: refType,\n\n /**\n * Name attribute of the `input` element.\n */\n name: PropTypes.string,\n\n /**\n * Callback fired when the state is changed.\n *\n * @param {object} event The event source of the callback.\n * You can pull out the new value by accessing `event.target.value` (string).\n * You can pull out the new checked state by accessing `event.target.checked` (boolean).\n */\n onChange: PropTypes.func,\n\n /**\n * If `true`, the `input` element will be required.\n */\n required: PropTypes.bool,\n\n /**\n * The size of the radio.\n * `small` is equivalent to the dense radio styling.\n */\n size: PropTypes.oneOf(['medium', 'small']),\n\n /**\n * The value of the component. The DOM API casts this to a string.\n */\n value: PropTypes.any\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiRadio'\n})(Radio);","import * as React from 'react';\nimport RadioGroupContext from './RadioGroupContext';\nexport default function useRadioGroup() {\n return React.useContext(RadioGroupContext);\n}","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"\n}), 'CheckBoxOutlineBlank');","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\n}), 'CheckBox');","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z\"\n}), 'IndeterminateCheckBox');","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { refType } from '@material-ui/utils';\nimport SwitchBase from '../internal/SwitchBase';\nimport CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank';\nimport CheckBoxIcon from '../internal/svg-icons/CheckBox';\nimport { fade } from '../styles/colorManipulator';\nimport IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox';\nimport capitalize from '../utils/capitalize';\nimport withStyles from '../styles/withStyles';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n color: theme.palette.text.secondary\n },\n\n /* Pseudo-class applied to the root element if `checked={true}`. */\n checked: {},\n\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\n /* Pseudo-class applied to the root element if `indeterminate={true}`. */\n indeterminate: {},\n\n /* Styles applied to the root element if `color=\"primary\"`. */\n colorPrimary: {\n '&$checked': {\n color: theme.palette.primary.main,\n '&:hover': {\n backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n }\n },\n '&$disabled': {\n color: theme.palette.action.disabled\n }\n },\n\n /* Styles applied to the root element if `color=\"secondary\"`. */\n colorSecondary: {\n '&$checked': {\n color: theme.palette.secondary.main,\n '&:hover': {\n backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n }\n },\n '&$disabled': {\n color: theme.palette.action.disabled\n }\n }\n };\n};\nvar defaultCheckedIcon = /*#__PURE__*/React.createElement(CheckBoxIcon, null);\nvar defaultIcon = /*#__PURE__*/React.createElement(CheckBoxOutlineBlankIcon, null);\nvar defaultIndeterminateIcon = /*#__PURE__*/React.createElement(IndeterminateCheckBoxIcon, null);\nvar Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {\n var _props$checkedIcon = props.checkedIcon,\n checkedIcon = _props$checkedIcon === void 0 ? defaultCheckedIcon : _props$checkedIcon,\n classes = props.classes,\n _props$color = props.color,\n color = _props$color === void 0 ? 'secondary' : _props$color,\n _props$icon = props.icon,\n iconProp = _props$icon === void 0 ? defaultIcon : _props$icon,\n _props$indeterminate = props.indeterminate,\n indeterminate = _props$indeterminate === void 0 ? false : _props$indeterminate,\n _props$indeterminateI = props.indeterminateIcon,\n indeterminateIconProp = _props$indeterminateI === void 0 ? defaultIndeterminateIcon : _props$indeterminateI,\n inputProps = props.inputProps,\n _props$size = props.size,\n size = _props$size === void 0 ? 'medium' : _props$size,\n other = _objectWithoutProperties(props, [\"checkedIcon\", \"classes\", \"color\", \"icon\", \"indeterminate\", \"indeterminateIcon\", \"inputProps\", \"size\"]);\n\n var icon = indeterminate ? indeterminateIconProp : iconProp;\n var indeterminateIcon = indeterminate ? indeterminateIconProp : checkedIcon;\n return /*#__PURE__*/React.createElement(SwitchBase, _extends({\n type: \"checkbox\",\n classes: {\n root: clsx(classes.root, classes[\"color\".concat(capitalize(color))], indeterminate && classes.indeterminate),\n checked: classes.checked,\n disabled: classes.disabled\n },\n color: color,\n inputProps: _extends({\n 'data-indeterminate': indeterminate\n }, inputProps),\n icon: /*#__PURE__*/React.cloneElement(icon, {\n fontSize: icon.props.fontSize === undefined && size === \"small\" ? size : icon.props.fontSize\n }),\n checkedIcon: /*#__PURE__*/React.cloneElement(indeterminateIcon, {\n fontSize: indeterminateIcon.props.fontSize === undefined && size === \"small\" ? size : indeterminateIcon.props.fontSize\n }),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? Checkbox.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * If `true`, the component is checked.\n */\n checked: PropTypes.bool,\n\n /**\n * The icon to display when the component is checked.\n */\n checkedIcon: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n */\n color: PropTypes.oneOf(['default', 'primary', 'secondary']),\n\n /**\n * If `true`, the checkbox will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * If `true`, the ripple effect will be disabled.\n */\n disableRipple: PropTypes.bool,\n\n /**\n * The icon to display when the component is unchecked.\n */\n icon: PropTypes.node,\n\n /**\n * The id of the `input` element.\n */\n id: PropTypes.string,\n\n /**\n * If `true`, the component appears indeterminate.\n * This does not set the native input element to indeterminate due\n * to inconsistent behavior across browsers.\n * However, we set a `data-indeterminate` attribute on the input.\n */\n indeterminate: PropTypes.bool,\n\n /**\n * The icon to display when the component is indeterminate.\n */\n indeterminateIcon: PropTypes.node,\n\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps: PropTypes.object,\n\n /**\n * Pass a ref to the `input` element.\n */\n inputRef: refType,\n\n /**\n * Callback fired when the state is changed.\n *\n * @param {object} event The event source of the callback.\n * You can pull out the new checked state by accessing `event.target.checked` (boolean).\n */\n onChange: PropTypes.func,\n\n /**\n * If `true`, the `input` element will be required.\n */\n required: PropTypes.bool,\n\n /**\n * The size of the checkbox.\n * `small` is equivalent to the dense checkbox styling.\n */\n size: PropTypes.oneOf(['medium', 'small']),\n\n /**\n * The value of the component. The DOM API casts this to a string.\n * The browser uses \"on\" as the default value.\n */\n value: PropTypes.any\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiCheckbox'\n})(Checkbox);","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-2 17l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z\"\n}), 'CheckCircle');","import * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n/**\n * @ignore - internal component.\n */\n\nexport default createSvgIcon( /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"\n}), 'Warning');","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport CheckCircle from '../internal/svg-icons/CheckCircle';\nimport Warning from '../internal/svg-icons/Warning';\nimport withStyles from '../styles/withStyles';\nimport SvgIcon from '../SvgIcon';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n display: 'block',\n color: theme.palette.text.disabled,\n '&$completed': {\n color: theme.palette.primary.main\n },\n '&$active': {\n color: theme.palette.primary.main\n },\n '&$error': {\n color: theme.palette.error.main\n }\n },\n\n /* Styles applied to the SVG text element. */\n text: {\n fill: theme.palette.primary.contrastText,\n fontSize: theme.typography.caption.fontSize,\n fontFamily: theme.typography.fontFamily\n },\n\n /* Pseudo-class applied to the root element if `active={true}`. */\n active: {},\n\n /* Pseudo-class applied to the root element if `completed={true}`. */\n completed: {},\n\n /* Pseudo-class applied to the root element if `error={true}`. */\n error: {}\n };\n};\n\nvar _ref = /*#__PURE__*/React.createElement(\"circle\", {\n cx: \"12\",\n cy: \"12\",\n r: \"12\"\n});\n\nvar StepIcon = /*#__PURE__*/React.forwardRef(function StepIcon(props, ref) {\n var _props$completed = props.completed,\n completed = _props$completed === void 0 ? false : _props$completed,\n icon = props.icon,\n _props$active = props.active,\n active = _props$active === void 0 ? false : _props$active,\n _props$error = props.error,\n error = _props$error === void 0 ? false : _props$error,\n classes = props.classes;\n\n if (typeof icon === 'number' || typeof icon === 'string') {\n var className = clsx(classes.root, active && classes.active, error && classes.error, completed && classes.completed);\n\n if (error) {\n return /*#__PURE__*/React.createElement(Warning, {\n className: className,\n ref: ref\n });\n }\n\n if (completed) {\n return /*#__PURE__*/React.createElement(CheckCircle, {\n className: className,\n ref: ref\n });\n }\n\n return /*#__PURE__*/React.createElement(SvgIcon, {\n className: className,\n ref: ref\n }, _ref, /*#__PURE__*/React.createElement(\"text\", {\n className: classes.text,\n x: \"12\",\n y: \"16\",\n textAnchor: \"middle\"\n }, icon));\n }\n\n return icon;\n});\nprocess.env.NODE_ENV !== \"production\" ? StepIcon.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * Whether this step is active.\n */\n active: PropTypes.bool,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * Mark the step as completed. Is passed to child components.\n */\n completed: PropTypes.bool,\n\n /**\n * Mark the step as failed.\n */\n error: PropTypes.bool,\n\n /**\n * The label displayed in the step icon.\n */\n icon: PropTypes.node\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiStepIcon'\n})(StepIcon);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport Typography from '../Typography';\nimport StepIcon from '../StepIcon';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n display: 'flex',\n alignItems: 'center',\n '&$alternativeLabel': {\n flexDirection: 'column'\n },\n '&$disabled': {\n cursor: 'default'\n }\n },\n\n /* Styles applied to the root element if `orientation=\"horizontal\"`. */\n horizontal: {},\n\n /* Styles applied to the root element if `orientation=\"vertical\"`. */\n vertical: {},\n\n /* Styles applied to the `Typography` component which wraps `children`. */\n label: {\n color: theme.palette.text.secondary,\n '&$active': {\n color: theme.palette.text.primary,\n fontWeight: 500\n },\n '&$completed': {\n color: theme.palette.text.primary,\n fontWeight: 500\n },\n '&$alternativeLabel': {\n textAlign: 'center',\n marginTop: 16\n },\n '&$error': {\n color: theme.palette.error.main\n }\n },\n\n /* Pseudo-class applied to the `Typography` component if `active={true}`. */\n active: {},\n\n /* Pseudo-class applied to the `Typography` component if `completed={true}`. */\n completed: {},\n\n /* Pseudo-class applied to the root element and `Typography` component if `error={true}`. */\n error: {},\n\n /* Pseudo-class applied to the root element and `Typography` component if `disabled={true}`. */\n disabled: {},\n\n /* Styles applied to the `icon` container element. */\n iconContainer: {\n flexShrink: 0,\n // Fix IE 11 issue\n display: 'flex',\n paddingRight: 8,\n '&$alternativeLabel': {\n paddingRight: 0\n }\n },\n\n /* Pseudo-class applied to the root and icon container and `Typography` if `alternativeLabel={true}`. */\n alternativeLabel: {},\n\n /* Styles applied to the container element which wraps `Typography` and `optional`. */\n labelContainer: {\n width: '100%'\n }\n };\n};\nvar StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(props, ref) {\n var _props$active = props.active,\n active = _props$active === void 0 ? false : _props$active,\n _props$alternativeLab = props.alternativeLabel,\n alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,\n children = props.children,\n classes = props.classes,\n className = props.className,\n _props$completed = props.completed,\n completed = _props$completed === void 0 ? false : _props$completed,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n _props$error = props.error,\n error = _props$error === void 0 ? false : _props$error,\n expanded = props.expanded,\n icon = props.icon,\n last = props.last,\n optional = props.optional,\n _props$orientation = props.orientation,\n orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,\n StepIconComponentProp = props.StepIconComponent,\n StepIconProps = props.StepIconProps,\n other = _objectWithoutProperties(props, [\"active\", \"alternativeLabel\", \"children\", \"classes\", \"className\", \"completed\", \"disabled\", \"error\", \"expanded\", \"icon\", \"last\", \"optional\", \"orientation\", \"StepIconComponent\", \"StepIconProps\"]);\n\n var StepIconComponent = StepIconComponentProp;\n\n if (icon && !StepIconComponent) {\n StepIconComponent = StepIcon;\n }\n\n return /*#__PURE__*/React.createElement(\"span\", _extends({\n className: clsx(classes.root, classes[orientation], className, disabled && classes.disabled, alternativeLabel && classes.alternativeLabel, error && classes.error),\n ref: ref\n }, other), icon || StepIconComponent ? /*#__PURE__*/React.createElement(\"span\", {\n className: clsx(classes.iconContainer, alternativeLabel && classes.alternativeLabel)\n }, /*#__PURE__*/React.createElement(StepIconComponent, _extends({\n completed: completed,\n active: active,\n error: error,\n icon: icon\n }, StepIconProps))) : null, /*#__PURE__*/React.createElement(\"span\", {\n className: classes.labelContainer\n }, children ? /*#__PURE__*/React.createElement(Typography, {\n variant: \"body2\",\n component: \"span\",\n display: \"block\",\n className: clsx(classes.label, alternativeLabel && classes.alternativeLabel, completed && classes.completed, active && classes.active, error && classes.error)\n }, children) : null, optional));\n});\nprocess.env.NODE_ENV !== \"production\" ? StepLabel.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * In most cases will simply be a string containing a title for the label.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * Mark the step as disabled, will also disable the button if\n * `StepLabelButton` is a child of `StepLabel`. Is passed to child components.\n */\n disabled: PropTypes.bool,\n\n /**\n * Mark the step as failed.\n */\n error: PropTypes.bool,\n\n /**\n * Override the default label of the step icon.\n */\n icon: PropTypes.node,\n\n /**\n * The optional node to display.\n */\n optional: PropTypes.node,\n\n /**\n * The component to render in place of the [`StepIcon`](/api/step-icon/).\n */\n StepIconComponent: PropTypes.elementType,\n\n /**\n * Props applied to the [`StepIcon`](/api/step-icon/) element.\n */\n StepIconProps: PropTypes.object\n} : void 0;\nStepLabel.muiName = 'StepLabel';\nexport default withStyles(styles, {\n name: 'MuiStepLabel'\n})(StepLabel);","import { createStyles as createStylesOriginal } from '@material-ui/styles'; // let warnOnce = false;\n// To remove in v5\n\nexport default function createStyles(styles) {\n // warning(\n // warnOnce,\n // [\n // 'Material-UI: createStyles from @material-ui/core/styles is deprecated.',\n // 'Please use @material-ui/styles/createStyles',\n // ].join('\\n'),\n // );\n // warnOnce = true;\n return createStylesOriginal(styles);\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport ListContext from './ListContext';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n listStyle: 'none',\n margin: 0,\n padding: 0,\n position: 'relative'\n },\n\n /* Styles applied to the root element if `disablePadding={false}`. */\n padding: {\n paddingTop: 8,\n paddingBottom: 8\n },\n\n /* Styles applied to the root element if dense. */\n dense: {},\n\n /* Styles applied to the root element if a `subheader` is provided. */\n subheader: {\n paddingTop: 0\n }\n};\nvar List = /*#__PURE__*/React.forwardRef(function List(props, ref) {\n var children = props.children,\n classes = props.classes,\n className = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'ul' : _props$component,\n _props$dense = props.dense,\n dense = _props$dense === void 0 ? false : _props$dense,\n _props$disablePadding = props.disablePadding,\n disablePadding = _props$disablePadding === void 0 ? false : _props$disablePadding,\n subheader = props.subheader,\n other = _objectWithoutProperties(props, [\"children\", \"classes\", \"className\", \"component\", \"dense\", \"disablePadding\", \"subheader\"]);\n\n var context = React.useMemo(function () {\n return {\n dense: dense\n };\n }, [dense]);\n return /*#__PURE__*/React.createElement(ListContext.Provider, {\n value: context\n }, /*#__PURE__*/React.createElement(Component, _extends({\n className: clsx(classes.root, className, dense && classes.dense, !disablePadding && classes.padding, subheader && classes.subheader),\n ref: ref\n }, other), subheader, children));\n});\nprocess.env.NODE_ENV !== \"production\" ? List.propTypes = {\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType,\n\n /**\n * If `true`, compact vertical padding designed for keyboard and mouse input will be used for\n * the list and list items.\n * The prop is available to descendant components as the `dense` context.\n */\n dense: PropTypes.bool,\n\n /**\n * If `true`, vertical padding will be removed from the list.\n */\n disablePadding: PropTypes.bool,\n\n /**\n * The content of the subheader, normally `ListSubheader`.\n */\n subheader: PropTypes.node\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiList'\n})(List);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport { isFragment } from 'react-is';\nimport PropTypes from 'prop-types';\nimport * as ReactDOM from 'react-dom';\nimport ownerDocument from '../utils/ownerDocument';\nimport List from '../List';\nimport getScrollbarSize from '../utils/getScrollbarSize';\nimport useForkRef from '../utils/useForkRef';\n\nfunction nextItem(list, item, disableListWrap) {\n if (list === item) {\n return list.firstChild;\n }\n\n if (item && item.nextElementSibling) {\n return item.nextElementSibling;\n }\n\n return disableListWrap ? null : list.firstChild;\n}\n\nfunction previousItem(list, item, disableListWrap) {\n if (list === item) {\n return disableListWrap ? list.firstChild : list.lastChild;\n }\n\n if (item && item.previousElementSibling) {\n return item.previousElementSibling;\n }\n\n return disableListWrap ? null : list.lastChild;\n}\n\nfunction textCriteriaMatches(nextFocus, textCriteria) {\n if (textCriteria === undefined) {\n return true;\n }\n\n var text = nextFocus.innerText;\n\n if (text === undefined) {\n // jsdom doesn't support innerText\n text = nextFocus.textContent;\n }\n\n text = text.trim().toLowerCase();\n\n if (text.length === 0) {\n return false;\n }\n\n if (textCriteria.repeating) {\n return text[0] === textCriteria.keys[0];\n }\n\n return text.indexOf(textCriteria.keys.join('')) === 0;\n}\n\nfunction moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, traversalFunction, textCriteria) {\n var wrappedOnce = false;\n var nextFocus = traversalFunction(list, currentFocus, currentFocus ? disableListWrap : false);\n\n while (nextFocus) {\n // Prevent infinite loop.\n if (nextFocus === list.firstChild) {\n if (wrappedOnce) {\n return;\n }\n\n wrappedOnce = true;\n } // Same logic as useAutocomplete.js\n\n\n var nextFocusDisabled = disabledItemsFocusable ? false : nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';\n\n if (!nextFocus.hasAttribute('tabindex') || !textCriteriaMatches(nextFocus, textCriteria) || nextFocusDisabled) {\n // Move to the next element.\n nextFocus = traversalFunction(list, nextFocus, disableListWrap);\n } else {\n nextFocus.focus();\n return;\n }\n }\n}\n\nvar useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;\n/**\n * A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton.\n * It's exposed to help customization of the [`Menu`](/api/menu/) component. If you\n * use it separately you need to move focus into the component manually. Once\n * the focus is placed inside the component it is fully keyboard accessible.\n */\n\nvar MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {\n var actions = props.actions,\n _props$autoFocus = props.autoFocus,\n autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,\n _props$autoFocusItem = props.autoFocusItem,\n autoFocusItem = _props$autoFocusItem === void 0 ? false : _props$autoFocusItem,\n children = props.children,\n className = props.className,\n _props$disabledItemsF = props.disabledItemsFocusable,\n disabledItemsFocusable = _props$disabledItemsF === void 0 ? false : _props$disabledItemsF,\n _props$disableListWra = props.disableListWrap,\n disableListWrap = _props$disableListWra === void 0 ? false : _props$disableListWra,\n onKeyDown = props.onKeyDown,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'selectedMenu' : _props$variant,\n other = _objectWithoutProperties(props, [\"actions\", \"autoFocus\", \"autoFocusItem\", \"children\", \"className\", \"disabledItemsFocusable\", \"disableListWrap\", \"onKeyDown\", \"variant\"]);\n\n var listRef = React.useRef(null);\n var textCriteriaRef = React.useRef({\n keys: [],\n repeating: true,\n previousKeyMatched: true,\n lastTime: null\n });\n useEnhancedEffect(function () {\n if (autoFocus) {\n listRef.current.focus();\n }\n }, [autoFocus]);\n React.useImperativeHandle(actions, function () {\n return {\n adjustStyleForScrollbar: function adjustStyleForScrollbar(containerElement, theme) {\n // Let's ignore that piece of logic if users are already overriding the width\n // of the menu.\n var noExplicitWidth = !listRef.current.style.width;\n\n if (containerElement.clientHeight < listRef.current.clientHeight && noExplicitWidth) {\n var scrollbarSize = \"\".concat(getScrollbarSize(true), \"px\");\n listRef.current.style[theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;\n listRef.current.style.width = \"calc(100% + \".concat(scrollbarSize, \")\");\n }\n\n return listRef.current;\n }\n };\n }, []);\n\n var handleKeyDown = function handleKeyDown(event) {\n var list = listRef.current;\n var key = event.key;\n /**\n * @type {Element} - will always be defined since we are in a keydown handler\n * attached to an element. A keydown event is either dispatched to the activeElement\n * or document.body or document.documentElement. Only the first case will\n * trigger this specific handler.\n */\n\n var currentFocus = ownerDocument(list).activeElement;\n\n if (key === 'ArrowDown') {\n // Prevent scroll of the page\n event.preventDefault();\n moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, nextItem);\n } else if (key === 'ArrowUp') {\n event.preventDefault();\n moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, previousItem);\n } else if (key === 'Home') {\n event.preventDefault();\n moveFocus(list, null, disableListWrap, disabledItemsFocusable, nextItem);\n } else if (key === 'End') {\n event.preventDefault();\n moveFocus(list, null, disableListWrap, disabledItemsFocusable, previousItem);\n } else if (key.length === 1) {\n var criteria = textCriteriaRef.current;\n var lowerKey = key.toLowerCase();\n var currTime = performance.now();\n\n if (criteria.keys.length > 0) {\n // Reset\n if (currTime - criteria.lastTime > 500) {\n criteria.keys = [];\n criteria.repeating = true;\n criteria.previousKeyMatched = true;\n } else if (criteria.repeating && lowerKey !== criteria.keys[0]) {\n criteria.repeating = false;\n }\n }\n\n criteria.lastTime = currTime;\n criteria.keys.push(lowerKey);\n var keepFocusOnCurrent = currentFocus && !criteria.repeating && textCriteriaMatches(currentFocus, criteria);\n\n if (criteria.previousKeyMatched && (keepFocusOnCurrent || moveFocus(list, currentFocus, false, disabledItemsFocusable, nextItem, criteria))) {\n event.preventDefault();\n } else {\n criteria.previousKeyMatched = false;\n }\n }\n\n if (onKeyDown) {\n onKeyDown(event);\n }\n };\n\n var handleOwnRef = React.useCallback(function (instance) {\n // #StrictMode ready\n listRef.current = ReactDOM.findDOMNode(instance);\n }, []);\n var handleRef = useForkRef(handleOwnRef, ref);\n /**\n * the index of the item should receive focus\n * in a `variant=\"selectedMenu\"` it's the first `selected` item\n * otherwise it's the very first item.\n */\n\n var activeItemIndex = -1; // since we inject focus related props into children we have to do a lookahead\n // to check if there is a `selected` item. We're looking for the last `selected`\n // item and use the first valid item as a fallback\n\n React.Children.forEach(children, function (child, index) {\n if (! /*#__PURE__*/React.isValidElement(child)) {\n return;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n if (isFragment(child)) {\n console.error([\"Material-UI: The Menu component doesn't accept a Fragment as a child.\", 'Consider providing an array instead.'].join('\\n'));\n }\n }\n\n if (!child.props.disabled) {\n if (variant === 'selectedMenu' && child.props.selected) {\n activeItemIndex = index;\n } else if (activeItemIndex === -1) {\n activeItemIndex = index;\n }\n }\n });\n var items = React.Children.map(children, function (child, index) {\n if (index === activeItemIndex) {\n var newChildProps = {};\n\n if (autoFocusItem) {\n newChildProps.autoFocus = true;\n }\n\n if (child.props.tabIndex === undefined && variant === 'selectedMenu') {\n newChildProps.tabIndex = 0;\n }\n\n return /*#__PURE__*/React.cloneElement(child, newChildProps);\n }\n\n return child;\n });\n return /*#__PURE__*/React.createElement(List, _extends({\n role: \"menu\",\n ref: handleRef,\n className: className,\n onKeyDown: handleKeyDown,\n tabIndex: autoFocus ? 0 : -1\n }, other), items);\n});\nprocess.env.NODE_ENV !== \"production\" ? MenuList.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * If `true`, will focus the `[role=\"menu\"]` container and move into tab order.\n */\n autoFocus: PropTypes.bool,\n\n /**\n * If `true`, will focus the first menuitem if `variant=\"menu\"` or selected item\n * if `variant=\"selectedMenu\"`.\n */\n autoFocusItem: PropTypes.bool,\n\n /**\n * MenuList contents, normally `MenuItem`s.\n */\n children: PropTypes.node,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * If `true`, will allow focus on disabled items.\n */\n disabledItemsFocusable: PropTypes.bool,\n\n /**\n * If `true`, the menu items will not wrap focus.\n */\n disableListWrap: PropTypes.bool,\n\n /**\n * @ignore\n */\n onKeyDown: PropTypes.func,\n\n /**\n * The variant to use. Use `menu` to prevent selected items from impacting the initial focus\n * and the vertical alignment relative to the anchor element.\n */\n variant: PropTypes.oneOf(['menu', 'selectedMenu'])\n} : void 0;\nexport default MenuList;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { chainPropTypes } from '@material-ui/utils';\nimport withStyles from '../styles/withStyles';\nimport ButtonBase from '../ButtonBase';\nimport isMuiElement from '../utils/isMuiElement';\nimport useForkRef from '../utils/useForkRef';\nimport ListContext from '../List/ListContext';\nimport * as ReactDOM from 'react-dom';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */\n root: {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n position: 'relative',\n textDecoration: 'none',\n width: '100%',\n boxSizing: 'border-box',\n textAlign: 'left',\n paddingTop: 8,\n paddingBottom: 8,\n '&$focusVisible': {\n backgroundColor: theme.palette.action.selected\n },\n '&$selected, &$selected:hover': {\n backgroundColor: theme.palette.action.selected\n },\n '&$disabled': {\n opacity: 0.5\n }\n },\n\n /* Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`. */\n container: {\n position: 'relative'\n },\n\n /* Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */\n focusVisible: {},\n\n /* Styles applied to the `component` element if dense. */\n dense: {\n paddingTop: 4,\n paddingBottom: 4\n },\n\n /* Styles applied to the `component` element if `alignItems=\"flex-start\"`. */\n alignItemsFlexStart: {\n alignItems: 'flex-start'\n },\n\n /* Pseudo-class applied to the inner `component` element if `disabled={true}`. */\n disabled: {},\n\n /* Styles applied to the inner `component` element if `divider={true}`. */\n divider: {\n borderBottom: \"1px solid \".concat(theme.palette.divider),\n backgroundClip: 'padding-box'\n },\n\n /* Styles applied to the inner `component` element if `disableGutters={false}`. */\n gutters: {\n paddingLeft: 16,\n paddingRight: 16\n },\n\n /* Styles applied to the inner `component` element if `button={true}`. */\n button: {\n transition: theme.transitions.create('background-color', {\n duration: theme.transitions.duration.shortest\n }),\n '&:hover': {\n textDecoration: 'none',\n backgroundColor: theme.palette.action.hover,\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n }\n },\n\n /* Styles applied to the `component` element if `children` includes `ListItemSecondaryAction`. */\n secondaryAction: {\n // Add some space to avoid collision as `ListItemSecondaryAction`\n // is absolutely positioned.\n paddingRight: 48\n },\n\n /* Pseudo-class applied to the root element if `selected={true}`. */\n selected: {}\n };\n};\nvar useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;\n/**\n * Uses an additional container component if `ListItemSecondaryAction` is the last child.\n */\n\nvar ListItem = /*#__PURE__*/React.forwardRef(function ListItem(props, ref) {\n var _props$alignItems = props.alignItems,\n alignItems = _props$alignItems === void 0 ? 'center' : _props$alignItems,\n _props$autoFocus = props.autoFocus,\n autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,\n _props$button = props.button,\n button = _props$button === void 0 ? false : _props$button,\n childrenProp = props.children,\n classes = props.classes,\n className = props.className,\n componentProp = props.component,\n _props$ContainerCompo = props.ContainerComponent,\n ContainerComponent = _props$ContainerCompo === void 0 ? 'li' : _props$ContainerCompo,\n _props$ContainerProps = props.ContainerProps;\n _props$ContainerProps = _props$ContainerProps === void 0 ? {} : _props$ContainerProps;\n\n var ContainerClassName = _props$ContainerProps.className,\n ContainerProps = _objectWithoutProperties(_props$ContainerProps, [\"className\"]),\n _props$dense = props.dense,\n dense = _props$dense === void 0 ? false : _props$dense,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n _props$disableGutters = props.disableGutters,\n disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,\n _props$divider = props.divider,\n divider = _props$divider === void 0 ? false : _props$divider,\n focusVisibleClassName = props.focusVisibleClassName,\n _props$selected = props.selected,\n selected = _props$selected === void 0 ? false : _props$selected,\n other = _objectWithoutProperties(props, [\"alignItems\", \"autoFocus\", \"button\", \"children\", \"classes\", \"className\", \"component\", \"ContainerComponent\", \"ContainerProps\", \"dense\", \"disabled\", \"disableGutters\", \"divider\", \"focusVisibleClassName\", \"selected\"]);\n\n var context = React.useContext(ListContext);\n var childContext = {\n dense: dense || context.dense || false,\n alignItems: alignItems\n };\n var listItemRef = React.useRef(null);\n useEnhancedEffect(function () {\n if (autoFocus) {\n if (listItemRef.current) {\n listItemRef.current.focus();\n } else if (process.env.NODE_ENV !== 'production') {\n console.error('Material-UI: Unable to set focus to a ListItem whose component has not been rendered.');\n }\n }\n }, [autoFocus]);\n var children = React.Children.toArray(childrenProp);\n var hasSecondaryAction = children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);\n var handleOwnRef = React.useCallback(function (instance) {\n // #StrictMode ready\n listItemRef.current = ReactDOM.findDOMNode(instance);\n }, []);\n var handleRef = useForkRef(handleOwnRef, ref);\n\n var componentProps = _extends({\n className: clsx(classes.root, className, childContext.dense && classes.dense, !disableGutters && classes.gutters, divider && classes.divider, disabled && classes.disabled, button && classes.button, alignItems !== \"center\" && classes.alignItemsFlexStart, hasSecondaryAction && classes.secondaryAction, selected && classes.selected),\n disabled: disabled\n }, other);\n\n var Component = componentProp || 'li';\n\n if (button) {\n componentProps.component = componentProp || 'div';\n componentProps.focusVisibleClassName = clsx(classes.focusVisible, focusVisibleClassName);\n Component = ButtonBase;\n }\n\n if (hasSecondaryAction) {\n // Use div by default.\n Component = !componentProps.component && !componentProp ? 'div' : Component; // Avoid nesting of li > li.\n\n if (ContainerComponent === 'li') {\n if (Component === 'li') {\n Component = 'div';\n } else if (componentProps.component === 'li') {\n componentProps.component = 'div';\n }\n }\n\n return /*#__PURE__*/React.createElement(ListContext.Provider, {\n value: childContext\n }, /*#__PURE__*/React.createElement(ContainerComponent, _extends({\n className: clsx(classes.container, ContainerClassName),\n ref: handleRef\n }, ContainerProps), /*#__PURE__*/React.createElement(Component, componentProps, children), children.pop()));\n }\n\n return /*#__PURE__*/React.createElement(ListContext.Provider, {\n value: childContext\n }, /*#__PURE__*/React.createElement(Component, _extends({\n ref: handleRef\n }, componentProps), children));\n});\nprocess.env.NODE_ENV !== \"production\" ? ListItem.propTypes = {\n /**\n * Defines the `align-items` style property.\n */\n alignItems: PropTypes.oneOf(['flex-start', 'center']),\n\n /**\n * If `true`, the list item will be focused during the first mount.\n * Focus will also be triggered if the value changes from false to true.\n */\n autoFocus: PropTypes.bool,\n\n /**\n * If `true`, the list item will be a button (using `ButtonBase`). Props intended\n * for `ButtonBase` can then be applied to `ListItem`.\n */\n button: PropTypes.bool,\n\n /**\n * The content of the component. If a `ListItemSecondaryAction` is used it must\n * be the last child.\n */\n children: chainPropTypes(PropTypes.node, function (props) {\n var children = React.Children.toArray(props.children); // React.Children.toArray(props.children).findLastIndex(isListItemSecondaryAction)\n\n var secondaryActionIndex = -1;\n\n for (var i = children.length - 1; i >= 0; i -= 1) {\n var child = children[i];\n\n if (isMuiElement(child, ['ListItemSecondaryAction'])) {\n secondaryActionIndex = i;\n break;\n }\n } // is ListItemSecondaryAction the last child of ListItem\n\n\n if (secondaryActionIndex !== -1 && secondaryActionIndex !== children.length - 1) {\n return new Error('Material-UI: You used an element after ListItemSecondaryAction. ' + 'For ListItem to detect that it has a secondary action ' + 'you must pass it as the last child to ListItem.');\n }\n\n return null;\n }),\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n * By default, it's a `li` when `button` is `false` and a `div` when `button` is `true`.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType,\n\n /**\n * The container component used when a `ListItemSecondaryAction` is the last child.\n */\n ContainerComponent: PropTypes.elementType,\n\n /**\n * Props applied to the container component if used.\n */\n ContainerProps: PropTypes.object,\n\n /**\n * If `true`, compact vertical padding designed for keyboard and mouse input will be used.\n */\n dense: PropTypes.bool,\n\n /**\n * If `true`, the list item will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * If `true`, the left and right padding is removed.\n */\n disableGutters: PropTypes.bool,\n\n /**\n * If `true`, a 1px light border is added to the bottom of the list item.\n */\n divider: PropTypes.bool,\n\n /**\n * @ignore\n */\n focusVisibleClassName: PropTypes.string,\n\n /**\n * Use to apply selected styling.\n */\n selected: PropTypes.bool\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiListItem'\n})(ListItem);","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport ListItem from '../ListItem';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: _extends({}, theme.typography.body1, _defineProperty({\n minHeight: 48,\n paddingTop: 6,\n paddingBottom: 6,\n boxSizing: 'border-box',\n width: 'auto',\n overflow: 'hidden',\n whiteSpace: 'nowrap'\n }, theme.breakpoints.up('sm'), {\n minHeight: 'auto'\n })),\n // TODO v5: remove\n\n /* Styles applied to the root element if `disableGutters={false}`. */\n gutters: {},\n\n /* Styles applied to the root element if `selected={true}`. */\n selected: {},\n\n /* Styles applied to the root element if dense. */\n dense: _extends({}, theme.typography.body2, {\n minHeight: 'auto'\n })\n };\n};\nvar MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$component = props.component,\n component = _props$component === void 0 ? 'li' : _props$component,\n _props$disableGutters = props.disableGutters,\n disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,\n ListItemClasses = props.ListItemClasses,\n _props$role = props.role,\n role = _props$role === void 0 ? 'menuitem' : _props$role,\n selected = props.selected,\n tabIndexProp = props.tabIndex,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"component\", \"disableGutters\", \"ListItemClasses\", \"role\", \"selected\", \"tabIndex\"]);\n\n var tabIndex;\n\n if (!props.disabled) {\n tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;\n }\n\n return /*#__PURE__*/React.createElement(ListItem, _extends({\n button: true,\n role: role,\n tabIndex: tabIndex,\n component: component,\n selected: selected,\n disableGutters: disableGutters,\n classes: _extends({\n dense: classes.dense\n }, ListItemClasses),\n className: clsx(classes.root, className, selected && classes.selected, !disableGutters && classes.gutters),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? MenuItem.propTypes = {\n /**\n * Menu item contents.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType,\n\n /**\n * If `true`, compact vertical padding designed for keyboard and mouse input will be used.\n */\n dense: PropTypes.bool,\n\n /**\n * @ignore\n */\n disabled: PropTypes.bool,\n\n /**\n * If `true`, the left and right padding is removed.\n */\n disableGutters: PropTypes.bool,\n\n /**\n * `classes` prop applied to the [`ListItem`](/api/list-item/) element.\n */\n ListItemClasses: PropTypes.object,\n\n /**\n * @ignore\n */\n role: PropTypes.string,\n\n /**\n * @ignore\n */\n selected: PropTypes.bool,\n\n /**\n * @ignore\n */\n tabIndex: PropTypes.number\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiMenuItem'\n})(MenuItem);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n display: 'flex',\n flexDirection: 'column',\n flexWrap: 'wrap'\n },\n\n /* Styles applied to the root element if `row={true}`. */\n row: {\n flexDirection: 'row'\n }\n};\n/**\n * `FormGroup` wraps controls such as `Checkbox` and `Switch`.\n * It provides compact row layout.\n * For the `Radio`, you should be using the `RadioGroup` component instead of this one.\n */\n\nvar FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$row = props.row,\n row = _props$row === void 0 ? false : _props$row,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"row\"]);\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n className: clsx(classes.root, className, row && classes.row),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? FormGroup.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * Display group of elements in a compact row.\n */\n row: PropTypes.bool\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiFormGroup'\n})(FormGroup);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport FormGroup from '../FormGroup';\nimport useForkRef from '../utils/useForkRef';\nimport useControlled from '../utils/useControlled';\nimport RadioGroupContext from './RadioGroupContext';\nimport useId from '../utils/unstable_useId';\nvar RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {\n var actions = props.actions,\n children = props.children,\n nameProp = props.name,\n valueProp = props.value,\n onChange = props.onChange,\n other = _objectWithoutProperties(props, [\"actions\", \"children\", \"name\", \"value\", \"onChange\"]);\n\n var rootRef = React.useRef(null);\n\n var _useControlled = useControlled({\n controlled: valueProp,\n default: props.defaultValue,\n name: 'RadioGroup'\n }),\n _useControlled2 = _slicedToArray(_useControlled, 2),\n value = _useControlled2[0],\n setValue = _useControlled2[1];\n\n React.useImperativeHandle(actions, function () {\n return {\n focus: function focus() {\n var input = rootRef.current.querySelector('input:not(:disabled):checked');\n\n if (!input) {\n input = rootRef.current.querySelector('input:not(:disabled)');\n }\n\n if (input) {\n input.focus();\n }\n }\n };\n }, []);\n var handleRef = useForkRef(ref, rootRef);\n\n var handleChange = function handleChange(event) {\n setValue(event.target.value);\n\n if (onChange) {\n onChange(event, event.target.value);\n }\n };\n\n var name = useId(nameProp);\n return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {\n value: {\n name: name,\n onChange: handleChange,\n value: value\n }\n }, /*#__PURE__*/React.createElement(FormGroup, _extends({\n role: \"radiogroup\",\n ref: handleRef\n }, other), children));\n});\nprocess.env.NODE_ENV !== \"production\" ? RadioGroup.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * The default `input` element value. Use when the component is not controlled.\n */\n defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string]),\n\n /**\n * The name used to reference the value of the control.\n * If you don't provide this prop, it falls back to a randomly generated name.\n */\n name: PropTypes.string,\n\n /**\n * Callback fired when a radio button is selected.\n *\n * @param {object} event The event source of the callback.\n * You can pull out the new value by accessing `event.target.value` (string).\n */\n onChange: PropTypes.func,\n\n /**\n * Value of the selected radio button. The DOM API casts this to a string.\n */\n value: PropTypes.any\n} : void 0;\nexport default RadioGroup;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n flex: '1 1 auto'\n },\n\n /* Styles applied to the root element if `orientation=\"horizontal\"`. */\n horizontal: {},\n\n /* Styles applied to the root element if `orientation=\"vertical\"`. */\n vertical: {\n marginLeft: 12,\n // half icon\n padding: '0 0 8px'\n },\n\n /* Styles applied to the root element if `alternativeLabel={true}`. */\n alternativeLabel: {\n position: 'absolute',\n top: 8 + 4,\n left: 'calc(-50% + 20px)',\n right: 'calc(50% + 20px)'\n },\n\n /* Pseudo-class applied to the root element if `active={true}`. */\n active: {},\n\n /* Pseudo-class applied to the root element if `completed={true}`. */\n completed: {},\n\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\n /* Styles applied to the line element. */\n line: {\n display: 'block',\n borderColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]\n },\n\n /* Styles applied to the root element if `orientation=\"horizontal\"`. */\n lineHorizontal: {\n borderTopStyle: 'solid',\n borderTopWidth: 1\n },\n\n /* Styles applied to the root element if `orientation=\"vertical\"`. */\n lineVertical: {\n borderLeftStyle: 'solid',\n borderLeftWidth: 1,\n minHeight: 24\n }\n };\n};\nvar StepConnector = /*#__PURE__*/React.forwardRef(function StepConnector(props, ref) {\n var active = props.active,\n _props$alternativeLab = props.alternativeLabel,\n alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,\n classes = props.classes,\n className = props.className,\n completed = props.completed,\n disabled = props.disabled,\n index = props.index,\n _props$orientation = props.orientation,\n orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,\n other = _objectWithoutProperties(props, [\"active\", \"alternativeLabel\", \"classes\", \"className\", \"completed\", \"disabled\", \"index\", \"orientation\"]);\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n className: clsx(classes.root, classes[orientation], className, alternativeLabel && classes.alternativeLabel, active && classes.active, completed && classes.completed, disabled && classes.disabled),\n ref: ref\n }, other), /*#__PURE__*/React.createElement(\"span\", {\n className: clsx(classes.line, {\n 'horizontal': classes.lineHorizontal,\n 'vertical': classes.lineVertical\n }[orientation])\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? StepConnector.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiStepConnector'\n})(StepConnector);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport Paper from '../Paper';\nimport StepConnector from '../StepConnector';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n display: 'flex',\n padding: 24\n },\n\n /* Styles applied to the root element if `orientation=\"horizontal\"`. */\n horizontal: {\n flexDirection: 'row',\n alignItems: 'center'\n },\n\n /* Styles applied to the root element if `orientation=\"vertical\"`. */\n vertical: {\n flexDirection: 'column'\n },\n\n /* Styles applied to the root element if `alternativeLabel={true}`. */\n alternativeLabel: {\n alignItems: 'flex-start'\n }\n};\nvar defaultConnector = /*#__PURE__*/React.createElement(StepConnector, null);\nvar Stepper = /*#__PURE__*/React.forwardRef(function Stepper(props, ref) {\n var _props$activeStep = props.activeStep,\n activeStep = _props$activeStep === void 0 ? 0 : _props$activeStep,\n _props$alternativeLab = props.alternativeLabel,\n alternativeLabel = _props$alternativeLab === void 0 ? false : _props$alternativeLab,\n children = props.children,\n classes = props.classes,\n className = props.className,\n _props$connector = props.connector,\n connectorProp = _props$connector === void 0 ? defaultConnector : _props$connector,\n _props$nonLinear = props.nonLinear,\n nonLinear = _props$nonLinear === void 0 ? false : _props$nonLinear,\n _props$orientation = props.orientation,\n orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,\n other = _objectWithoutProperties(props, [\"activeStep\", \"alternativeLabel\", \"children\", \"classes\", \"className\", \"connector\", \"nonLinear\", \"orientation\"]);\n\n var connector = /*#__PURE__*/React.isValidElement(connectorProp) ? /*#__PURE__*/React.cloneElement(connectorProp, {\n orientation: orientation\n }) : null;\n var childrenArray = React.Children.toArray(children);\n var steps = childrenArray.map(function (step, index) {\n var state = {\n index: index,\n active: false,\n completed: false,\n disabled: false\n };\n\n if (activeStep === index) {\n state.active = true;\n } else if (!nonLinear && activeStep > index) {\n state.completed = true;\n } else if (!nonLinear && activeStep < index) {\n state.disabled = true;\n }\n\n return /*#__PURE__*/React.cloneElement(step, _extends({\n alternativeLabel: alternativeLabel,\n connector: connector,\n last: index + 1 === childrenArray.length,\n orientation: orientation\n }, state, step.props));\n });\n return /*#__PURE__*/React.createElement(Paper, _extends({\n square: true,\n elevation: 0,\n className: clsx(classes.root, classes[orientation], className, alternativeLabel && classes.alternativeLabel),\n ref: ref\n }, other), steps);\n});\nprocess.env.NODE_ENV !== \"production\" ? Stepper.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * Set the active step (zero based index).\n * Set to -1 to disable all the steps.\n */\n activeStep: PropTypes.number,\n\n /**\n * If set to 'true' and orientation is horizontal,\n * then the step label will be positioned under the icon.\n */\n alternativeLabel: PropTypes.bool,\n\n /**\n * Two or more `` components.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * An element to be placed between each step.\n */\n connector: PropTypes.element,\n\n /**\n * If set the `Stepper` will not assist in controlling steps for linear flow.\n */\n nonLinear: PropTypes.bool,\n\n /**\n * The stepper orientation (layout flow direction).\n */\n orientation: PropTypes.oneOf(['horizontal', 'vertical'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiStepper'\n})(Stepper);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport PropTypes from 'prop-types';\nimport { Transition } from 'react-transition-group';\nimport withStyles from '../styles/withStyles';\nimport { duration } from '../styles/transitions';\nimport { getTransitionProps } from '../transitions/utils';\nimport useTheme from '../styles/useTheme';\nimport { useForkRef } from '../utils';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the container element. */\n container: {\n height: 0,\n overflow: 'hidden',\n transition: theme.transitions.create('height')\n },\n\n /* Styles applied to the container element when the transition has entered. */\n entered: {\n height: 'auto',\n overflow: 'visible'\n },\n\n /* Styles applied to the container element when the transition has exited and `collapsedHeight` != 0px. */\n hidden: {\n visibility: 'hidden'\n },\n\n /* Styles applied to the outer wrapper element. */\n wrapper: {\n // Hack to get children with a negative margin to not falsify the height computation.\n display: 'flex'\n },\n\n /* Styles applied to the inner wrapper element. */\n wrapperInner: {\n width: '100%'\n }\n };\n};\n/**\n * The Collapse transition is used by the\n * [Vertical Stepper](/components/steppers/#vertical-stepper) StepContent component.\n * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.\n */\n\nvar Collapse = /*#__PURE__*/React.forwardRef(function Collapse(props, ref) {\n var children = props.children,\n classes = props.classes,\n className = props.className,\n _props$collapsedHeigh = props.collapsedHeight,\n collapsedHeightProp = _props$collapsedHeigh === void 0 ? '0px' : _props$collapsedHeigh,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'div' : _props$component,\n _props$disableStrictM = props.disableStrictModeCompat,\n disableStrictModeCompat = _props$disableStrictM === void 0 ? false : _props$disableStrictM,\n inProp = props.in,\n onEnter = props.onEnter,\n onEntered = props.onEntered,\n onEntering = props.onEntering,\n onExit = props.onExit,\n onExited = props.onExited,\n onExiting = props.onExiting,\n style = props.style,\n _props$timeout = props.timeout,\n timeout = _props$timeout === void 0 ? duration.standard : _props$timeout,\n _props$TransitionComp = props.TransitionComponent,\n TransitionComponent = _props$TransitionComp === void 0 ? Transition : _props$TransitionComp,\n other = _objectWithoutProperties(props, [\"children\", \"classes\", \"className\", \"collapsedHeight\", \"component\", \"disableStrictModeCompat\", \"in\", \"onEnter\", \"onEntered\", \"onEntering\", \"onExit\", \"onExited\", \"onExiting\", \"style\", \"timeout\", \"TransitionComponent\"]);\n\n var theme = useTheme();\n var timer = React.useRef();\n var wrapperRef = React.useRef(null);\n var autoTransitionDuration = React.useRef();\n var collapsedHeight = typeof collapsedHeightProp === 'number' ? \"\".concat(collapsedHeightProp, \"px\") : collapsedHeightProp;\n React.useEffect(function () {\n return function () {\n clearTimeout(timer.current);\n };\n }, []);\n var enableStrictModeCompat = theme.unstable_strictMode && !disableStrictModeCompat;\n var nodeRef = React.useRef(null);\n var handleRef = useForkRef(ref, enableStrictModeCompat ? nodeRef : undefined);\n\n var normalizedTransitionCallback = function normalizedTransitionCallback(callback) {\n return function (nodeOrAppearing, maybeAppearing) {\n if (callback) {\n var _ref = enableStrictModeCompat ? [nodeRef.current, nodeOrAppearing] : [nodeOrAppearing, maybeAppearing],\n _ref2 = _slicedToArray(_ref, 2),\n node = _ref2[0],\n isAppearing = _ref2[1]; // onEnterXxx and onExitXxx callbacks have a different arguments.length value.\n\n\n if (isAppearing === undefined) {\n callback(node);\n } else {\n callback(node, isAppearing);\n }\n }\n };\n };\n\n var handleEnter = normalizedTransitionCallback(function (node, isAppearing) {\n node.style.height = collapsedHeight;\n\n if (onEnter) {\n onEnter(node, isAppearing);\n }\n });\n var handleEntering = normalizedTransitionCallback(function (node, isAppearing) {\n var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;\n\n var _getTransitionProps = getTransitionProps({\n style: style,\n timeout: timeout\n }, {\n mode: 'enter'\n }),\n transitionDuration = _getTransitionProps.duration;\n\n if (timeout === 'auto') {\n var duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);\n node.style.transitionDuration = \"\".concat(duration2, \"ms\");\n autoTransitionDuration.current = duration2;\n } else {\n node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : \"\".concat(transitionDuration, \"ms\");\n }\n\n node.style.height = \"\".concat(wrapperHeight, \"px\");\n\n if (onEntering) {\n onEntering(node, isAppearing);\n }\n });\n var handleEntered = normalizedTransitionCallback(function (node, isAppearing) {\n node.style.height = 'auto';\n\n if (onEntered) {\n onEntered(node, isAppearing);\n }\n });\n var handleExit = normalizedTransitionCallback(function (node) {\n var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;\n node.style.height = \"\".concat(wrapperHeight, \"px\");\n\n if (onExit) {\n onExit(node);\n }\n });\n var handleExited = normalizedTransitionCallback(onExited);\n var handleExiting = normalizedTransitionCallback(function (node) {\n var wrapperHeight = wrapperRef.current ? wrapperRef.current.clientHeight : 0;\n\n var _getTransitionProps2 = getTransitionProps({\n style: style,\n timeout: timeout\n }, {\n mode: 'exit'\n }),\n transitionDuration = _getTransitionProps2.duration;\n\n if (timeout === 'auto') {\n var duration2 = theme.transitions.getAutoHeightDuration(wrapperHeight);\n node.style.transitionDuration = \"\".concat(duration2, \"ms\");\n autoTransitionDuration.current = duration2;\n } else {\n node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : \"\".concat(transitionDuration, \"ms\");\n }\n\n node.style.height = collapsedHeight;\n\n if (onExiting) {\n onExiting(node);\n }\n });\n\n var addEndListener = function addEndListener(nodeOrNext, maybeNext) {\n var next = enableStrictModeCompat ? nodeOrNext : maybeNext;\n\n if (timeout === 'auto') {\n timer.current = setTimeout(next, autoTransitionDuration.current || 0);\n }\n };\n\n return /*#__PURE__*/React.createElement(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: addEndListener,\n nodeRef: enableStrictModeCompat ? nodeRef : undefined,\n timeout: timeout === 'auto' ? null : timeout\n }, other), function (state, childProps) {\n return /*#__PURE__*/React.createElement(Component, _extends({\n className: clsx(classes.container, className, {\n 'entered': classes.entered,\n 'exited': !inProp && collapsedHeight === '0px' && classes.hidden\n }[state]),\n style: _extends({\n minHeight: collapsedHeight\n }, style),\n ref: handleRef\n }, childProps), /*#__PURE__*/React.createElement(\"div\", {\n className: classes.wrapper,\n ref: wrapperRef\n }, /*#__PURE__*/React.createElement(\"div\", {\n className: classes.wrapperInner\n }, children)));\n });\n});\nprocess.env.NODE_ENV !== \"production\" ? Collapse.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The content node to be collapsed.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The height of the container when collapsed.\n */\n collapsedHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType,\n\n /**\n * Enable this prop if you encounter 'Function components cannot be given refs',\n * use `unstable_createStrictModeTheme`,\n * and can't forward the ref in the passed `Component`.\n */\n disableStrictModeCompat: PropTypes.bool,\n\n /**\n * If `true`, the component will transition in.\n */\n in: PropTypes.bool,\n\n /**\n * @ignore\n */\n onEnter: PropTypes.func,\n\n /**\n * @ignore\n */\n onEntered: PropTypes.func,\n\n /**\n * @ignore\n */\n onEntering: PropTypes.func,\n\n /**\n * @ignore\n */\n onExit: PropTypes.func,\n\n /**\n * @ignore\n */\n onExited: PropTypes.func,\n\n /**\n * @ignore\n */\n onExiting: PropTypes.func,\n\n /**\n * @ignore\n */\n style: PropTypes.object,\n\n /**\n * The duration for the transition, in milliseconds.\n * You may specify a single timeout for all transitions, or individually with an object.\n *\n * Set to 'auto' to automatically calculate transition time based on height.\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 withStyles(styles, {\n name: 'MuiCollapse'\n})(Collapse);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _toArray from \"@babel/runtime/helpers/esm/toArray\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport { isFragment } from 'react-is';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { chainPropTypes } from '@material-ui/utils';\nimport Collapse from '../Collapse';\nimport Paper from '../Paper';\nimport withStyles from '../styles/withStyles';\nimport AccordionContext from './AccordionContext';\nimport useControlled from '../utils/useControlled';\nexport var styles = function styles(theme) {\n var transition = {\n duration: theme.transitions.duration.shortest\n };\n return {\n /* Styles applied to the root element. */\n root: {\n position: 'relative',\n transition: theme.transitions.create(['margin'], transition),\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.palette.divider,\n transition: theme.transitions.create(['opacity', 'background-color'], transition)\n },\n '&:first-child': {\n '&:before': {\n display: 'none'\n }\n },\n '&$expanded': {\n margin: '16px 0',\n '&:first-child': {\n marginTop: 0\n },\n '&:last-child': {\n marginBottom: 0\n },\n '&:before': {\n opacity: 0\n }\n },\n '&$expanded + &': {\n '&:before': {\n display: 'none'\n }\n },\n '&$disabled': {\n backgroundColor: theme.palette.action.disabledBackground\n }\n },\n\n /* Styles applied to the root element if `square={false}`. */\n rounded: {\n borderRadius: 0,\n '&:first-child': {\n borderTopLeftRadius: theme.shape.borderRadius,\n borderTopRightRadius: theme.shape.borderRadius\n },\n '&:last-child': {\n borderBottomLeftRadius: theme.shape.borderRadius,\n borderBottomRightRadius: 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 },\n\n /* Styles applied to the root element if `expanded={true}`. */\n expanded: {},\n\n /* Styles applied to the root element if `disabled={true}`. */\n disabled: {}\n };\n};\nvar Accordion = /*#__PURE__*/React.forwardRef(function Accordion(props, ref) {\n var childrenProp = props.children,\n classes = props.classes,\n className = props.className,\n _props$defaultExpande = props.defaultExpanded,\n defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n expandedProp = props.expanded,\n onChange = props.onChange,\n _props$square = props.square,\n square = _props$square === void 0 ? false : _props$square,\n _props$TransitionComp = props.TransitionComponent,\n TransitionComponent = _props$TransitionComp === void 0 ? Collapse : _props$TransitionComp,\n TransitionProps = props.TransitionProps,\n other = _objectWithoutProperties(props, [\"children\", \"classes\", \"className\", \"defaultExpanded\", \"disabled\", \"expanded\", \"onChange\", \"square\", \"TransitionComponent\", \"TransitionProps\"]);\n\n var _useControlled = useControlled({\n controlled: expandedProp,\n default: defaultExpanded,\n name: 'Accordion',\n state: 'expanded'\n }),\n _useControlled2 = _slicedToArray(_useControlled, 2),\n expanded = _useControlled2[0],\n setExpandedState = _useControlled2[1];\n\n var handleChange = React.useCallback(function (event) {\n setExpandedState(!expanded);\n\n if (onChange) {\n onChange(event, !expanded);\n }\n }, [expanded, onChange, setExpandedState]);\n\n var _React$Children$toArr = React.Children.toArray(childrenProp),\n _React$Children$toArr2 = _toArray(_React$Children$toArr),\n summary = _React$Children$toArr2[0],\n children = _React$Children$toArr2.slice(1);\n\n var contextValue = React.useMemo(function () {\n return {\n expanded: expanded,\n disabled: disabled,\n toggle: handleChange\n };\n }, [expanded, disabled, handleChange]);\n return /*#__PURE__*/React.createElement(Paper, _extends({\n className: clsx(classes.root, className, expanded && classes.expanded, disabled && classes.disabled, !square && classes.rounded),\n ref: ref,\n square: square\n }, other), /*#__PURE__*/React.createElement(AccordionContext.Provider, {\n value: contextValue\n }, summary), /*#__PURE__*/React.createElement(TransitionComponent, _extends({\n in: expanded,\n timeout: \"auto\"\n }, TransitionProps), /*#__PURE__*/React.createElement(\"div\", {\n \"aria-labelledby\": summary.props.id,\n id: summary.props['aria-controls'],\n role: \"region\"\n }, children)));\n});\nprocess.env.NODE_ENV !== \"production\" ? Accordion.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The content of the accordion.\n */\n children: chainPropTypes(PropTypes.node.isRequired, function (props) {\n var summary = React.Children.toArray(props.children)[0];\n\n if (isFragment(summary)) {\n return new Error(\"Material-UI: The Accordion doesn't accept a Fragment as a child. \" + 'Consider providing an array instead.');\n }\n\n if (! /*#__PURE__*/React.isValidElement(summary)) {\n return new Error('Material-UI: Expected the first child of Accordion to be a valid element.');\n }\n\n return null;\n }),\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * If `true`, expands the accordion by default.\n */\n defaultExpanded: PropTypes.bool,\n\n /**\n * If `true`, the accordion will be displayed in a disabled state.\n */\n disabled: PropTypes.bool,\n\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 /**\n * Callback fired when the expand/collapse state is changed.\n *\n * @param {object} event The event source of the callback.\n * @param {boolean} expanded The `expanded` state of the accordion.\n */\n onChange: PropTypes.func,\n\n /**\n * If `true`, rounded corners are disabled.\n */\n square: PropTypes.bool,\n\n /**\n * The component used for the collapse effect.\n * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.\n */\n TransitionComponent: PropTypes.elementType,\n\n /**\n * Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.\n */\n TransitionProps: PropTypes.object\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiAccordion'\n})(Accordion);","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}","// Determine if the toggle button value matches, or is contained in, the\n// candidate group value.\nexport default function isValueSelected(value, candidate) {\n if (candidate === undefined || value === undefined) {\n return false;\n }\n\n if (Array.isArray(candidate)) {\n return candidate.indexOf(value) >= 0;\n }\n\n return value === candidate;\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport { isFragment } from 'react-is';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport isValueSelected from './isValueSelected';\nimport { withStyles } from '@material-ui/core/styles';\nimport { capitalize } from '@material-ui/core/utils';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n display: 'inline-flex',\n borderRadius: theme.shape.borderRadius\n },\n\n /* Styles applied to the root element if `orientation=\"vertical\"`. */\n vertical: {\n flexDirection: 'column'\n },\n\n /* Styles applied to the children. */\n grouped: {},\n\n /* Styles applied to the children if `orientation=\"horizontal\"`. */\n groupedHorizontal: {\n '&:not(:first-child)': {\n marginLeft: -1,\n borderLeft: '1px solid transparent',\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0\n },\n '&:not(:last-child)': {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0\n }\n },\n\n /* Styles applied to the children if `orientation=\"vertical\"`. */\n groupedVertical: {\n '&:not(:first-child)': {\n marginTop: -1,\n borderTop: '1px solid transparent',\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0\n },\n '&:not(:last-child)': {\n borderBottomLeftRadius: 0,\n borderBottomRightRadius: 0\n }\n }\n };\n};\nvar ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButton(props, ref) {\n var children = props.children,\n classes = props.classes,\n className = props.className,\n _props$exclusive = props.exclusive,\n exclusive = _props$exclusive === void 0 ? false : _props$exclusive,\n onChange = props.onChange,\n _props$orientation = props.orientation,\n orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,\n _props$size = props.size,\n size = _props$size === void 0 ? 'medium' : _props$size,\n value = props.value,\n other = _objectWithoutProperties(props, [\"children\", \"classes\", \"className\", \"exclusive\", \"onChange\", \"orientation\", \"size\", \"value\"]);\n\n var handleChange = function handleChange(event, buttonValue) {\n if (!onChange) {\n return;\n }\n\n var index = value && value.indexOf(buttonValue);\n var newValue;\n\n if (value && index >= 0) {\n newValue = value.slice();\n newValue.splice(index, 1);\n } else {\n newValue = value ? value.concat(buttonValue) : [buttonValue];\n }\n\n onChange(event, newValue);\n };\n\n var handleExclusiveChange = function handleExclusiveChange(event, buttonValue) {\n if (!onChange) {\n return;\n }\n\n onChange(event, value === buttonValue ? null : buttonValue);\n };\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n role: \"group\",\n className: clsx(classes.root, className, orientation === 'vertical' && classes.vertical),\n ref: ref\n }, other), React.Children.map(children, function (child) {\n if (! /*#__PURE__*/React.isValidElement(child)) {\n return null;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n if (isFragment(child)) {\n console.error([\"Material-UI: The ToggleButtonGroup component doesn't accept a Fragment as a child.\", 'Consider providing an array instead.'].join('\\n'));\n }\n }\n\n return /*#__PURE__*/React.cloneElement(child, {\n className: clsx(classes.grouped, classes[\"grouped\".concat(capitalize(orientation))], child.props.className),\n onChange: exclusive ? handleExclusiveChange : handleChange,\n selected: child.props.selected === undefined ? isValueSelected(child.props.value, value) : child.props.selected,\n size: child.props.size || size\n });\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? ToggleButtonGroup.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The content of the button.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * If `true`, only allow one of the child ToggleButton values to be selected.\n */\n exclusive: PropTypes.bool,\n\n /**\n * Callback fired when the value changes.\n *\n * @param {object} event The event source of the callback.\n * @param {any} value of the selected buttons. When `exclusive` is true\n * this is a single value; when false an array of selected values. If no value\n * is selected and `exclusive` is true the value is null; when false an empty array.\n */\n onChange: PropTypes.func,\n\n /**\n * The group orientation (layout flow direction).\n */\n orientation: PropTypes.oneOf(['horizontal', 'vertical']),\n\n /**\n * The size of the buttons.\n */\n size: PropTypes.oneOf(['large', 'medium', 'small']),\n\n /**\n * The currently selected value within the group or an array of selected\n * values when `exclusive` is false.\n *\n * The value must have reference equality with the option in order to be selected.\n */\n value: PropTypes.any\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiToggleButtonGroup'\n})(ToggleButtonGroup);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport capitalize from '../utils/capitalize';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n margin: 0\n },\n\n /* Styles applied to the root element if `variant=\"body2\"`. */\n body2: theme.typography.body2,\n\n /* Styles applied to the root element if `variant=\"body1\"`. */\n body1: theme.typography.body1,\n\n /* Styles applied to the root element if `variant=\"caption\"`. */\n caption: theme.typography.caption,\n\n /* Styles applied to the root element if `variant=\"button\"`. */\n button: theme.typography.button,\n\n /* Styles applied to the root element if `variant=\"h1\"`. */\n h1: theme.typography.h1,\n\n /* Styles applied to the root element if `variant=\"h2\"`. */\n h2: theme.typography.h2,\n\n /* Styles applied to the root element if `variant=\"h3\"`. */\n h3: theme.typography.h3,\n\n /* Styles applied to the root element if `variant=\"h4\"`. */\n h4: theme.typography.h4,\n\n /* Styles applied to the root element if `variant=\"h5\"`. */\n h5: theme.typography.h5,\n\n /* Styles applied to the root element if `variant=\"h6\"`. */\n h6: theme.typography.h6,\n\n /* Styles applied to the root element if `variant=\"subtitle1\"`. */\n subtitle1: theme.typography.subtitle1,\n\n /* Styles applied to the root element if `variant=\"subtitle2\"`. */\n subtitle2: theme.typography.subtitle2,\n\n /* Styles applied to the root element if `variant=\"overline\"`. */\n overline: theme.typography.overline,\n\n /* Styles applied to the root element if `variant=\"srOnly\"`. Only accessible to screen readers. */\n srOnly: {\n position: 'absolute',\n height: 1,\n width: 1,\n overflow: 'hidden'\n },\n\n /* Styles applied to the root element if `align=\"left\"`. */\n alignLeft: {\n textAlign: 'left'\n },\n\n /* Styles applied to the root element if `align=\"center\"`. */\n alignCenter: {\n textAlign: 'center'\n },\n\n /* Styles applied to the root element if `align=\"right\"`. */\n alignRight: {\n textAlign: 'right'\n },\n\n /* Styles applied to the root element if `align=\"justify\"`. */\n alignJustify: {\n textAlign: 'justify'\n },\n\n /* Styles applied to the root element if `nowrap={true}`. */\n noWrap: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap'\n },\n\n /* Styles applied to the root element if `gutterBottom={true}`. */\n gutterBottom: {\n marginBottom: '0.35em'\n },\n\n /* Styles applied to the root element if `paragraph={true}`. */\n paragraph: {\n marginBottom: 16\n },\n\n /* Styles applied to the root element if `color=\"inherit\"`. */\n colorInherit: {\n color: 'inherit'\n },\n\n /* Styles applied to the root element if `color=\"primary\"`. */\n colorPrimary: {\n color: theme.palette.primary.main\n },\n\n /* Styles applied to the root element if `color=\"secondary\"`. */\n colorSecondary: {\n color: theme.palette.secondary.main\n },\n\n /* Styles applied to the root element if `color=\"textPrimary\"`. */\n colorTextPrimary: {\n color: theme.palette.text.primary\n },\n\n /* Styles applied to the root element if `color=\"textSecondary\"`. */\n colorTextSecondary: {\n color: theme.palette.text.secondary\n },\n\n /* Styles applied to the root element if `color=\"error\"`. */\n colorError: {\n color: theme.palette.error.main\n },\n\n /* Styles applied to the root element if `display=\"inline\"`. */\n displayInline: {\n display: 'inline'\n },\n\n /* Styles applied to the root element if `display=\"block\"`. */\n displayBlock: {\n display: 'block'\n }\n };\n};\nvar defaultVariantMapping = {\n h1: 'h1',\n h2: 'h2',\n h3: 'h3',\n h4: 'h4',\n h5: 'h5',\n h6: 'h6',\n subtitle1: 'h6',\n subtitle2: 'h6',\n body1: 'p',\n body2: 'p'\n};\nvar Typography = /*#__PURE__*/React.forwardRef(function Typography(props, ref) {\n var _props$align = props.align,\n align = _props$align === void 0 ? 'inherit' : _props$align,\n classes = props.classes,\n className = props.className,\n _props$color = props.color,\n color = _props$color === void 0 ? 'initial' : _props$color,\n component = props.component,\n _props$display = props.display,\n display = _props$display === void 0 ? 'initial' : _props$display,\n _props$gutterBottom = props.gutterBottom,\n gutterBottom = _props$gutterBottom === void 0 ? false : _props$gutterBottom,\n _props$noWrap = props.noWrap,\n noWrap = _props$noWrap === void 0 ? false : _props$noWrap,\n _props$paragraph = props.paragraph,\n paragraph = _props$paragraph === void 0 ? false : _props$paragraph,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'body1' : _props$variant,\n _props$variantMapping = props.variantMapping,\n variantMapping = _props$variantMapping === void 0 ? defaultVariantMapping : _props$variantMapping,\n other = _objectWithoutProperties(props, [\"align\", \"classes\", \"className\", \"color\", \"component\", \"display\", \"gutterBottom\", \"noWrap\", \"paragraph\", \"variant\", \"variantMapping\"]);\n\n var Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';\n return /*#__PURE__*/React.createElement(Component, _extends({\n className: clsx(classes.root, className, variant !== 'inherit' && classes[variant], color !== 'initial' && classes[\"color\".concat(capitalize(color))], noWrap && classes.noWrap, gutterBottom && classes.gutterBottom, paragraph && classes.paragraph, align !== 'inherit' && classes[\"align\".concat(capitalize(align))], display !== 'initial' && classes[\"display\".concat(capitalize(display))]),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? Typography.propTypes = {\n /**\n * Set the text-align on the component.\n */\n align: PropTypes.oneOf(['inherit', 'left', 'center', 'right', 'justify']),\n\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n */\n color: PropTypes.oneOf(['initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error']),\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n * Overrides the behavior of the `variantMapping` prop.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType,\n\n /**\n * Controls the display type\n */\n display: PropTypes.oneOf(['initial', 'block', 'inline']),\n\n /**\n * If `true`, the text will have a bottom margin.\n */\n gutterBottom: PropTypes.bool,\n\n /**\n * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n *\n * Note that text overflow can only happen with block or inline-block level elements\n * (the element needs to have a width in order to overflow).\n */\n noWrap: PropTypes.bool,\n\n /**\n * If `true`, the text will have a bottom margin.\n */\n paragraph: PropTypes.bool,\n\n /**\n * Applies the theme typography styles.\n */\n variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit']),\n\n /**\n * The component maps the variant prop to a range of different HTML element types.\n * For instance, subtitle1 to ``.\n * If you wish to change that mapping, you can provide your own.\n * Alternatively, you can use the `component` prop.\n */\n variantMapping: PropTypes.object\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiTypography'\n})(Typography);","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport { withStyles as withStylesWithoutDefault } from '@material-ui/styles';\nimport defaultTheme from './defaultTheme';\n\nfunction withStyles(stylesOrCreator, options) {\n return withStylesWithoutDefault(stylesOrCreator, _extends({\n defaultTheme: defaultTheme\n }, options));\n}\n\nexport default withStyles;","import createMuiTheme from './createMuiTheme';\nvar defaultTheme = createMuiTheme();\nexport default defaultTheme;","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 * as React from 'react';\nexport default function isMuiElement(element, muiNames) {\n return /*#__PURE__*/React.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;\n}","// Supports determination of isControlled().\n// Controlled input accepts its current value as a prop.\n//\n// @see https://facebook.github.io/react/docs/forms.html#controlled-components\n// @param value\n// @returns {boolean} true if string (including '') or number (including zero)\nexport function hasValue(value) {\n return value != null && !(Array.isArray(value) && value.length === 0);\n} // Determine if field is empty or filled.\n// Response determines if label is presented above field or as placeholder.\n//\n// @param obj\n// @param SSR\n// @returns {boolean} False when not present or empty string.\n// True when any number or string with length.\n\nexport function isFilled(obj) {\n var SSR = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');\n} // Determine if an Input is adorned on start.\n// It's corresponding to the left with LTR.\n//\n// @param obj\n// @returns {boolean} False when no adornments.\n// True when adorned at the start.\n\nexport function isAdornedStart(obj) {\n return obj.startAdornment;\n}","import ownerDocument from './ownerDocument';\nexport default function ownerWindow(node) {\n var doc = ownerDocument(node);\n return doc.defaultView || window;\n}","// Corresponds to 10 frames at 60 Hz.\n// A few bytes payload overhead when lodash/debounce is ~3 kB and debounce ~300 B.\nexport default function debounce(func) {\n var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 166;\n var timeout;\n\n function debounced() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n // eslint-disable-next-line consistent-this\n var that = this;\n\n var later = function later() {\n func.apply(that, args);\n };\n\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n }\n\n debounced.clear = function () {\n clearTimeout(timeout);\n };\n\n return debounced;\n}","import * as React from 'react';\n/**\n * @ignore - internal component.\n */\n\nvar ListContext = React.createContext({});\n\nif (process.env.NODE_ENV !== 'production') {\n ListContext.displayName = 'ListContext';\n}\n\nexport default ListContext;","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 { formatMuiErrorMessage as _formatMuiErrorMessage } from \"@material-ui/utils\";\n// It should to be noted that this function isn't equivalent to `text-transform: capitalize`.\n//\n// A strict capitalization should uppercase the first letter of each word a the sentence.\n// We only handle the first word.\nexport default function capitalize(string) {\n if (typeof string !== 'string') {\n throw new Error(process.env.NODE_ENV !== \"production\" ? \"Material-UI: capitalize(string) expects a string argument.\" : _formatMuiErrorMessage(7));\n }\n\n return string.charAt(0).toUpperCase() + string.slice(1);\n}","// based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nvar hadKeyboardEvent = true;\nvar hadFocusVisibleRecently = false;\nvar hadFocusVisibleRecentlyTimeout = null;\nvar inputTypesWhitelist = {\n text: true,\n search: true,\n url: true,\n tel: true,\n email: true,\n password: true,\n number: true,\n date: true,\n month: true,\n week: true,\n time: true,\n datetime: true,\n 'datetime-local': true\n};\n/**\n * Computes whether the given element should automatically trigger the\n * `focus-visible` class being added, i.e. whether it should always match\n * `:focus-visible` when focused.\n * @param {Element} node\n * @return {boolean}\n */\n\nfunction focusTriggersKeyboardModality(node) {\n var type = node.type,\n tagName = node.tagName;\n\n if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {\n return true;\n }\n\n if (tagName === 'TEXTAREA' && !node.readOnly) {\n return true;\n }\n\n if (node.isContentEditable) {\n return true;\n }\n\n return false;\n}\n/**\n * Keep track of our keyboard modality state with `hadKeyboardEvent`.\n * If the most recent user interaction was via the keyboard;\n * and the key press did not include a meta, alt/option, or control key;\n * then the modality is keyboard. Otherwise, the modality is not keyboard.\n * @param {KeyboardEvent} event\n */\n\n\nfunction handleKeyDown(event) {\n if (event.metaKey || event.altKey || event.ctrlKey) {\n return;\n }\n\n hadKeyboardEvent = true;\n}\n/**\n * If at any point a user clicks with a pointing device, ensure that we change\n * the modality away from keyboard.\n * This avoids the situation where a user presses a key on an already focused\n * element, and then clicks on a different element, focusing it with a\n * pointing device, while we still think we're in keyboard modality.\n */\n\n\nfunction handlePointerDown() {\n hadKeyboardEvent = false;\n}\n\nfunction handleVisibilityChange() {\n if (this.visibilityState === 'hidden') {\n // If the tab becomes active again, the browser will handle calling focus\n // on the element (Safari actually calls it twice).\n // If this tab change caused a blur on an element with focus-visible,\n // re-apply the class when the user switches back to the tab.\n if (hadFocusVisibleRecently) {\n hadKeyboardEvent = true;\n }\n }\n}\n\nfunction prepare(doc) {\n doc.addEventListener('keydown', handleKeyDown, true);\n doc.addEventListener('mousedown', handlePointerDown, true);\n doc.addEventListener('pointerdown', handlePointerDown, true);\n doc.addEventListener('touchstart', handlePointerDown, true);\n doc.addEventListener('visibilitychange', handleVisibilityChange, true);\n}\n\nexport function teardown(doc) {\n doc.removeEventListener('keydown', handleKeyDown, true);\n doc.removeEventListener('mousedown', handlePointerDown, true);\n doc.removeEventListener('pointerdown', handlePointerDown, true);\n doc.removeEventListener('touchstart', handlePointerDown, true);\n doc.removeEventListener('visibilitychange', handleVisibilityChange, true);\n}\n\nfunction isFocusVisible(event) {\n var target = event.target;\n\n try {\n return target.matches(':focus-visible');\n } catch (error) {} // browsers not implementing :focus-visible will throw a SyntaxError\n // we use our own heuristic for those browsers\n // rethrow might be better if it's not the expected error but do we really\n // want to crash if focus-visible malfunctioned?\n // no need for validFocusTarget check. the user does that by attaching it to\n // focusable events only\n\n\n return hadKeyboardEvent || focusTriggersKeyboardModality(target);\n}\n/**\n * Should be called if a blur event is fired on a focus-visible element\n */\n\n\nfunction handleBlurVisible() {\n // To detect a tab/window switch, we look for a blur event followed\n // rapidly by a visibility change.\n // If we don't see a visibility change within 100ms, it's probably a\n // regular focus change.\n hadFocusVisibleRecently = true;\n window.clearTimeout(hadFocusVisibleRecentlyTimeout);\n hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {\n hadFocusVisibleRecently = false;\n }, 100);\n}\n\nexport default function useIsFocusVisible() {\n var ref = React.useCallback(function (instance) {\n var node = ReactDOM.findDOMNode(instance);\n\n if (node != null) {\n prepare(node.ownerDocument);\n }\n }, []);\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useDebugValue(isFocusVisible);\n }\n\n return {\n isFocusVisible: isFocusVisible,\n onBlurVisible: handleBlurVisible,\n ref: ref\n };\n}","import * as React from 'react';\n/**\n * Private module reserved for @material-ui/x packages.\n */\n\nexport default function useId(idOverride) {\n var _React$useState = React.useState(idOverride),\n defaultId = _React$useState[0],\n setDefaultId = _React$useState[1];\n\n var id = idOverride || defaultId;\n React.useEffect(function () {\n if (defaultId == null) {\n // Fallback to this default id when possible.\n // Use the random value for client-side rendering only.\n // We can't use it server-side.\n setDefaultId(\"mui-\".concat(Math.round(Math.random() * 1e5)));\n }\n }, [defaultId]);\n return id;\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;","var hasSymbol = typeof Symbol === 'function' && Symbol.for;\nexport default hasSymbol ? Symbol.for('mui.nested') : '__THEME_NESTED__';","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;","// We need to centralize the zIndex definitions as they work\n// like global values in the browser.\nvar zIndex = {\n mobileStepper: 1000,\n speedDial: 1050,\n appBar: 1100,\n drawer: 1200,\n modal: 1300,\n snackbar: 1400,\n tooltip: 1500\n};\nexport default zIndex;","'use strict';\n\nvar reactIs = require('react-is');\n\n/**\n * Copyright 2015, Yahoo! Inc.\n * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.\n */\nvar REACT_STATICS = {\n childContextTypes: true,\n contextType: true,\n contextTypes: true,\n defaultProps: true,\n displayName: true,\n getDefaultProps: true,\n getDerivedStateFromError: true,\n getDerivedStateFromProps: true,\n mixins: true,\n propTypes: true,\n type: true\n};\nvar KNOWN_STATICS = {\n name: true,\n length: true,\n prototype: true,\n caller: true,\n callee: true,\n arguments: true,\n arity: true\n};\nvar FORWARD_REF_STATICS = {\n '$$typeof': true,\n render: true,\n defaultProps: true,\n displayName: true,\n propTypes: true\n};\nvar MEMO_STATICS = {\n '$$typeof': true,\n compare: true,\n defaultProps: true,\n displayName: true,\n propTypes: true,\n type: true\n};\nvar TYPE_STATICS = {};\nTYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;\nTYPE_STATICS[reactIs.Memo] = MEMO_STATICS;\n\nfunction getStatics(component) {\n // React v16.11 and below\n if (reactIs.isMemo(component)) {\n return MEMO_STATICS;\n } // React v16.12 and above\n\n\n return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;\n}\n\nvar defineProperty = Object.defineProperty;\nvar getOwnPropertyNames = Object.getOwnPropertyNames;\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;\nvar getPrototypeOf = Object.getPrototypeOf;\nvar objectPrototype = Object.prototype;\nfunction hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {\n if (typeof sourceComponent !== 'string') {\n // don't hoist over string (html) components\n if (objectPrototype) {\n var inheritedComponent = getPrototypeOf(sourceComponent);\n\n if (inheritedComponent && inheritedComponent !== objectPrototype) {\n hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);\n }\n }\n\n var keys = getOwnPropertyNames(sourceComponent);\n\n if (getOwnPropertySymbols) {\n keys = keys.concat(getOwnPropertySymbols(sourceComponent));\n }\n\n var targetStatics = getStatics(targetComponent);\n var sourceStatics = getStatics(sourceComponent);\n\n for (var i = 0; i < keys.length; ++i) {\n var key = keys[i];\n\n if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {\n var descriptor = getOwnPropertyDescriptor(sourceComponent, key);\n\n try {\n // Avoid failures from read-only properties\n defineProperty(targetComponent, key, descriptor);\n } catch (e) {}\n }\n }\n }\n\n return targetComponent;\n}\n\nmodule.exports = hoistNonReactStatics;\n","import * as React from 'react';\nimport setRef from './setRef';\nexport default function useForkRef(refA, refB) {\n /**\n * This will create a new function if the ref props change and are defined.\n * This means react will call the old forkRef with `null` and the new forkRef\n * with the ref. Cleanup naturally emerges from this behavior\n */\n return React.useMemo(function () {\n if (refA == null && refB == null) {\n return null;\n }\n\n return function (refValue) {\n setRef(refA, refValue);\n setRef(refB, refValue);\n };\n }, [refA, refB]);\n}","// A change of the browser zoom change the scrollbar size.\n// Credit https://github.com/twbs/bootstrap/blob/3ffe3a5d82f6f561b82ff78d82b32a7d14aed558/js/src/modal.js#L512-L519\nexport default function getScrollbarSize() {\n var scrollDiv = document.createElement('div');\n scrollDiv.style.width = '99px';\n scrollDiv.style.height = '99px';\n scrollDiv.style.position = 'absolute';\n scrollDiv.style.top = '-9999px';\n scrollDiv.style.overflow = 'scroll';\n document.body.appendChild(scrollDiv);\n var scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;\n document.body.removeChild(scrollDiv);\n return scrollbarSize;\n}","import * as React from 'react';\n/**\n * @ignore - internal component.\n */\n\nvar RadioGroupContext = React.createContext();\n\nif (process.env.NODE_ENV !== 'production') {\n RadioGroupContext.displayName = 'RadioGroupContext';\n}\n\nexport default RadioGroupContext;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { refType } from '@material-ui/utils';\nimport useControlled from '../utils/useControlled';\nimport useFormControl from '../FormControl/useFormControl';\nimport withStyles from '../styles/withStyles';\nimport IconButton from '../IconButton';\nexport var styles = {\n root: {\n padding: 9\n },\n checked: {},\n disabled: {},\n input: {\n cursor: 'inherit',\n position: 'absolute',\n opacity: 0,\n width: '100%',\n height: '100%',\n top: 0,\n left: 0,\n margin: 0,\n padding: 0,\n zIndex: 1\n }\n};\n/**\n * @ignore - internal component.\n */\n\nvar SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref) {\n var autoFocus = props.autoFocus,\n checkedProp = props.checked,\n checkedIcon = props.checkedIcon,\n classes = props.classes,\n className = props.className,\n defaultChecked = props.defaultChecked,\n disabledProp = props.disabled,\n icon = props.icon,\n id = props.id,\n inputProps = props.inputProps,\n inputRef = props.inputRef,\n name = props.name,\n onBlur = props.onBlur,\n onChange = props.onChange,\n onFocus = props.onFocus,\n readOnly = props.readOnly,\n required = props.required,\n tabIndex = props.tabIndex,\n type = props.type,\n value = props.value,\n other = _objectWithoutProperties(props, [\"autoFocus\", \"checked\", \"checkedIcon\", \"classes\", \"className\", \"defaultChecked\", \"disabled\", \"icon\", \"id\", \"inputProps\", \"inputRef\", \"name\", \"onBlur\", \"onChange\", \"onFocus\", \"readOnly\", \"required\", \"tabIndex\", \"type\", \"value\"]);\n\n var _useControlled = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: 'SwitchBase',\n state: 'checked'\n }),\n _useControlled2 = _slicedToArray(_useControlled, 2),\n checked = _useControlled2[0],\n setCheckedState = _useControlled2[1];\n\n var muiFormControl = useFormControl();\n\n var handleFocus = function handleFocus(event) {\n if (onFocus) {\n onFocus(event);\n }\n\n if (muiFormControl && muiFormControl.onFocus) {\n muiFormControl.onFocus(event);\n }\n };\n\n var handleBlur = function handleBlur(event) {\n if (onBlur) {\n onBlur(event);\n }\n\n if (muiFormControl && muiFormControl.onBlur) {\n muiFormControl.onBlur(event);\n }\n };\n\n var handleInputChange = function handleInputChange(event) {\n var newChecked = event.target.checked;\n setCheckedState(newChecked);\n\n if (onChange) {\n // TODO v5: remove the second argument.\n onChange(event, newChecked);\n }\n };\n\n var disabled = disabledProp;\n\n if (muiFormControl) {\n if (typeof disabled === 'undefined') {\n disabled = muiFormControl.disabled;\n }\n }\n\n var hasLabelFor = type === 'checkbox' || type === 'radio';\n return /*#__PURE__*/React.createElement(IconButton, _extends({\n component: \"span\",\n className: clsx(classes.root, className, checked && classes.checked, disabled && classes.disabled),\n disabled: disabled,\n tabIndex: null,\n role: undefined,\n onFocus: handleFocus,\n onBlur: handleBlur,\n ref: ref\n }, other), /*#__PURE__*/React.createElement(\"input\", _extends({\n autoFocus: autoFocus,\n checked: checkedProp,\n defaultChecked: defaultChecked,\n className: classes.input,\n disabled: disabled,\n id: hasLabelFor && id,\n name: name,\n onChange: handleInputChange,\n readOnly: readOnly,\n ref: inputRef,\n required: required,\n tabIndex: tabIndex,\n type: type,\n value: value\n }, inputProps)), checked ? checkedIcon : icon);\n}); // NB: If changed, please update Checkbox, Switch and Radio\n// so that the API documentation is updated.\n\nprocess.env.NODE_ENV !== \"production\" ? SwitchBase.propTypes = {\n /**\n * If `true`, the `input` element will be focused during the first mount.\n */\n autoFocus: PropTypes.bool,\n\n /**\n * If `true`, the component is checked.\n */\n checked: PropTypes.bool,\n\n /**\n * The icon to display when the component is checked.\n */\n checkedIcon: PropTypes.node.isRequired,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * @ignore\n */\n defaultChecked: PropTypes.bool,\n\n /**\n * If `true`, the switch will be disabled.\n */\n disabled: PropTypes.bool,\n\n /**\n * The icon to display when the component is unchecked.\n */\n icon: PropTypes.node.isRequired,\n\n /**\n * The id of the `input` element.\n */\n id: PropTypes.string,\n\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps: PropTypes.object,\n\n /**\n * Pass a ref to the `input` element.\n */\n inputRef: refType,\n\n /*\n * @ignore\n */\n name: PropTypes.string,\n\n /**\n * @ignore\n */\n onBlur: PropTypes.func,\n\n /**\n * Callback fired when the state is changed.\n *\n * @param {object} event The event source of the callback.\n * You can pull out the new checked state by accessing `event.target.checked` (boolean).\n */\n onChange: PropTypes.func,\n\n /**\n * @ignore\n */\n onFocus: PropTypes.func,\n\n /**\n * It prevents the user from changing the value of the field\n * (not from interacting with the field).\n */\n readOnly: PropTypes.bool,\n\n /**\n * If `true`, the `input` element will be required.\n */\n required: PropTypes.bool,\n\n /**\n * @ignore\n */\n tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n\n /**\n * The input component prop `type`.\n */\n type: PropTypes.string.isRequired,\n\n /**\n * The value of the component.\n */\n value: PropTypes.any\n} : void 0;\nexport default withStyles(styles, {\n name: 'PrivateSwitchBase'\n})(SwitchBase);","import * as React from 'react';\n/**\n * @ignore - internal component.\n * @type {React.Context<{} | {expanded: boolean, disabled: boolean, toggle: () => void}>}\n */\n\nvar AccordionContext = React.createContext({});\n\nif (process.env.NODE_ENV !== 'production') {\n AccordionContext.displayName = 'AccordionContext';\n}\n\nexport default AccordionContext;","var 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;","import _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { chainPropTypes } from '@material-ui/utils';\nimport withStyles from '../styles/withStyles';\nexport var styles = function styles(theme) {\n var elevations = {};\n theme.shadows.forEach(function (shadow, index) {\n elevations[\"elevation\".concat(index)] = {\n boxShadow: shadow\n };\n });\n return _extends({\n /* Styles applied to the root element. */\n root: {\n backgroundColor: theme.palette.background.paper,\n color: theme.palette.text.primary,\n transition: theme.transitions.create('box-shadow')\n },\n\n /* Styles applied to the root element if `square={false}`. */\n rounded: {\n borderRadius: theme.shape.borderRadius\n },\n\n /* Styles applied to the root element if `variant=\"outlined\"`. */\n outlined: {\n border: \"1px solid \".concat(theme.palette.divider)\n }\n }, elevations);\n};\nvar Paper = /*#__PURE__*/React.forwardRef(function Paper(props, ref) {\n var classes = props.classes,\n className = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'div' : _props$component,\n _props$square = props.square,\n square = _props$square === void 0 ? false : _props$square,\n _props$elevation = props.elevation,\n elevation = _props$elevation === void 0 ? 1 : _props$elevation,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'elevation' : _props$variant,\n other = _objectWithoutProperties(props, [\"classes\", \"className\", \"component\", \"square\", \"elevation\", \"variant\"]);\n\n return /*#__PURE__*/React.createElement(Component, _extends({\n className: clsx(classes.root, className, variant === 'outlined' ? classes.outlined : classes[\"elevation\".concat(elevation)], !square && classes.rounded),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? Paper.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType,\n\n /**\n * Shadow depth, corresponds to `dp` in the spec.\n * It accepts values between 0 and 24 inclusive.\n */\n elevation: chainPropTypes(PropTypes.number, function (props) {\n var classes = props.classes,\n elevation = props.elevation; // in case `withStyles` fails to inject we don't need this warning\n\n if (classes === undefined) {\n return null;\n }\n\n if (elevation != null && classes[\"elevation\".concat(elevation)] === undefined) {\n return new Error(\"Material-UI: This elevation `\".concat(elevation, \"` is not implemented.\"));\n }\n\n return null;\n }),\n\n /**\n * If `true`, rounded corners are disabled.\n */\n square: PropTypes.bool,\n\n /**\n * The variant to use.\n */\n variant: PropTypes.oneOf(['elevation', 'outlined'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiPaper'\n})(Paper);","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport useEventCallback from '../utils/useEventCallback';\nvar useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;\n/**\n * @ignore - internal component.\n */\n\nfunction Ripple(props) {\n var classes = props.classes,\n _props$pulsate = props.pulsate,\n pulsate = _props$pulsate === void 0 ? false : _props$pulsate,\n rippleX = props.rippleX,\n rippleY = props.rippleY,\n rippleSize = props.rippleSize,\n inProp = props.in,\n _props$onExited = props.onExited,\n onExited = _props$onExited === void 0 ? function () {} : _props$onExited,\n timeout = props.timeout;\n\n var _React$useState = React.useState(false),\n leaving = _React$useState[0],\n setLeaving = _React$useState[1];\n\n var rippleClassName = clsx(classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);\n var rippleStyles = {\n width: rippleSize,\n height: rippleSize,\n top: -(rippleSize / 2) + rippleY,\n left: -(rippleSize / 2) + rippleX\n };\n var childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);\n var handleExited = useEventCallback(onExited); // Ripple is used for user feedback (e.g. click or press) so we want to apply styles with the highest priority\n\n useEnhancedEffect(function () {\n if (!inProp) {\n // react-transition-group#onExit\n setLeaving(true); // react-transition-group#onExited\n\n var timeoutId = setTimeout(handleExited, timeout);\n return function () {\n clearTimeout(timeoutId);\n };\n }\n\n return undefined;\n }, [handleExited, inProp, timeout]);\n return /*#__PURE__*/React.createElement(\"span\", {\n className: rippleClassName,\n style: rippleStyles\n }, /*#__PURE__*/React.createElement(\"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\n /**\n * @ignore - injected from TransitionGroup\n */\n in: PropTypes.bool,\n\n /**\n * @ignore - injected from TransitionGroup\n */\n onExited: PropTypes.func,\n\n /**\n * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.\n */\n pulsate: PropTypes.bool,\n\n /**\n * Diameter of the ripple.\n */\n rippleSize: PropTypes.number,\n\n /**\n * Horizontal position of the ripple center.\n */\n rippleX: PropTypes.number,\n\n /**\n * Vertical position of the ripple center.\n */\n rippleY: PropTypes.number,\n\n /**\n * exit delay\n */\n timeout: PropTypes.number.isRequired\n} : void 0;\nexport default Ripple;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport Ripple from './Ripple';\nvar DURATION = 550;\nexport var DELAY_RIPPLE = 80;\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\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 /* Styles applied to the internal `Ripple` components `ripple` class. */\n ripple: {\n opacity: 0,\n position: 'absolute'\n },\n\n /* Styles applied to the internal `Ripple` components `rippleVisible` class. */\n rippleVisible: {\n opacity: 0.3,\n transform: 'scale(1)',\n animation: \"$enter \".concat(DURATION, \"ms \").concat(theme.transitions.easing.easeInOut)\n },\n\n /* Styles applied to the internal `Ripple` components `ripplePulsate` class. */\n ripplePulsate: {\n animationDuration: \"\".concat(theme.transitions.duration.shorter, \"ms\")\n },\n\n /* Styles applied to the internal `Ripple` components `child` class. */\n child: {\n opacity: 1,\n display: 'block',\n width: '100%',\n height: '100%',\n borderRadius: '50%',\n backgroundColor: 'currentColor'\n },\n\n /* Styles applied to the internal `Ripple` components `childLeaving` class. */\n childLeaving: {\n opacity: 0,\n animation: \"$exit \".concat(DURATION, \"ms \").concat(theme.transitions.easing.easeInOut)\n },\n\n /* Styles applied to the internal `Ripple` components `childPulsate` class. */\n childPulsate: {\n position: 'absolute',\n left: 0,\n top: 0,\n animation: \"$pulsate 2500ms \".concat(theme.transitions.easing.easeInOut, \" 200ms infinite\")\n },\n '@keyframes enter': {\n '0%': {\n transform: 'scale(0)',\n opacity: 0.1\n },\n '100%': {\n transform: 'scale(1)',\n opacity: 0.3\n }\n },\n '@keyframes exit': {\n '0%': {\n opacity: 1\n },\n '100%': {\n opacity: 0\n }\n },\n '@keyframes pulsate': {\n '0%': {\n transform: 'scale(1)'\n },\n '50%': {\n transform: 'scale(0.92)'\n },\n '100%': {\n transform: 'scale(1)'\n }\n }\n };\n};\n/**\n * @ignore - internal component.\n *\n * TODO v5: Make private\n */\n\nvar TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(props, ref) {\n var _props$center = props.center,\n centerProp = _props$center === void 0 ? false : _props$center,\n classes = props.classes,\n className = props.className,\n other = _objectWithoutProperties(props, [\"center\", \"classes\", \"className\"]);\n\n var _React$useState = React.useState([]),\n ripples = _React$useState[0],\n setRipples = _React$useState[1];\n\n var nextKey = React.useRef(0);\n var rippleCallback = React.useRef(null);\n React.useEffect(function () {\n if (rippleCallback.current) {\n rippleCallback.current();\n rippleCallback.current = null;\n }\n }, [ripples]); // Used to filter out mouse emulated events on mobile.\n\n var ignoringMouseDown = React.useRef(false); // 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\n var startTimer = React.useRef(null); // This is the hook called once the previous timeout is ready.\n\n var startTimerCommit = React.useRef(null);\n var container = React.useRef(null);\n React.useEffect(function () {\n return function () {\n clearTimeout(startTimer.current);\n };\n }, []);\n var startCommit = React.useCallback(function (params) {\n var pulsate = params.pulsate,\n rippleX = params.rippleX,\n rippleY = params.rippleY,\n rippleSize = params.rippleSize,\n cb = params.cb;\n setRipples(function (oldRipples) {\n return [].concat(_toConsumableArray(oldRipples), [/*#__PURE__*/React.createElement(Ripple, {\n key: nextKey.current,\n classes: classes,\n timeout: DURATION,\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize\n })]);\n });\n nextKey.current += 1;\n rippleCallback.current = cb;\n }, [classes]);\n var start = React.useCallback(function () {\n var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n var cb = arguments.length > 2 ? arguments[2] : undefined;\n var _options$pulsate = options.pulsate,\n pulsate = _options$pulsate === void 0 ? false : _options$pulsate,\n _options$center = options.center,\n center = _options$center === void 0 ? centerProp || options.pulsate : _options$center,\n _options$fakeElement = options.fakeElement,\n fakeElement = _options$fakeElement === void 0 ? false : _options$fakeElement;\n\n if (event.type === 'mousedown' && ignoringMouseDown.current) {\n ignoringMouseDown.current = false;\n return;\n }\n\n if (event.type === 'touchstart') {\n ignoringMouseDown.current = true;\n }\n\n var element = fakeElement ? null : container.current;\n var rect = element ? element.getBoundingClientRect() : {\n width: 0,\n height: 0,\n left: 0,\n top: 0\n }; // Get the size of the ripple\n\n var rippleX;\n var rippleY;\n var rippleSize;\n\n if (center || 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 var _ref = event.touches ? event.touches[0] : event,\n clientX = _ref.clientX,\n clientY = _ref.clientY;\n\n rippleX = Math.round(clientX - rect.left);\n rippleY = Math.round(clientY - rect.top);\n }\n\n if (center) {\n rippleSize = Math.sqrt((2 * Math.pow(rect.width, 2) + Math.pow(rect.height, 2)) / 3); // For some reason the animation is broken on Mobile Chrome if the size if even.\n\n if (rippleSize % 2 === 0) {\n rippleSize += 1;\n }\n } else {\n var sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;\n var sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;\n rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2));\n } // Touche devices\n\n\n if (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 = function () {\n startCommit({\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize,\n cb: cb\n });\n }; // Delay the execution of the ripple effect.\n\n\n startTimer.current = setTimeout(function () {\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: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize,\n cb: cb\n });\n }\n }, [centerProp, startCommit]);\n var pulsate = React.useCallback(function () {\n start({}, {\n pulsate: true\n });\n }, [start]);\n var stop = React.useCallback(function (event, cb) {\n clearTimeout(startTimer.current); // The touch interaction occurs too quickly.\n // We still want to show ripple effect.\n\n if (event.type === 'touchend' && startTimerCommit.current) {\n event.persist();\n startTimerCommit.current();\n startTimerCommit.current = null;\n startTimer.current = setTimeout(function () {\n stop(event, cb);\n });\n return;\n }\n\n startTimerCommit.current = null;\n setRipples(function (oldRipples) {\n if (oldRipples.length > 0) {\n return oldRipples.slice(1);\n }\n\n return oldRipples;\n });\n rippleCallback.current = cb;\n }, []);\n React.useImperativeHandle(ref, function () {\n return {\n pulsate: pulsate,\n start: start,\n stop: stop\n };\n }, [pulsate, start, stop]);\n return /*#__PURE__*/React.createElement(\"span\", _extends({\n className: clsx(classes.root, className),\n ref: container\n }, other), /*#__PURE__*/React.createElement(TransitionGroup, {\n component: null,\n exit: true\n }, ripples));\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 /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string\n} : void 0;\nexport default withStyles(styles, {\n flip: false,\n name: 'MuiTouchRipple'\n})( /*#__PURE__*/React.memo(TouchRipple));","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport * as ReactDOM from 'react-dom';\nimport clsx from 'clsx';\nimport { elementTypeAcceptingRef, refType } from '@material-ui/utils';\nimport useForkRef from '../utils/useForkRef';\nimport useEventCallback from '../utils/useEventCallback';\nimport withStyles from '../styles/withStyles';\nimport useIsFocusVisible from '../utils/useIsFocusVisible';\nimport TouchRipple from './TouchRipple';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n WebkitTapHighlightColor: 'transparent',\n backgroundColor: 'transparent',\n // Reset default value\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n border: 0,\n margin: 0,\n // Remove the margin in Safari\n borderRadius: 0,\n padding: 0,\n // Remove the padding in Firefox\n cursor: 'pointer',\n userSelect: 'none',\n verticalAlign: 'middle',\n '-moz-appearance': 'none',\n // Reset\n '-webkit-appearance': 'none',\n // Reset\n 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 '&$disabled': {\n pointerEvents: 'none',\n // Disable link interactions\n cursor: 'default'\n },\n '@media print': {\n colorAdjust: 'exact'\n }\n },\n\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\n /* Pseudo-class applied to the root element if keyboard focused. */\n focusVisible: {}\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 */\n\nvar ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {\n var action = props.action,\n buttonRefProp = props.buttonRef,\n _props$centerRipple = props.centerRipple,\n centerRipple = _props$centerRipple === void 0 ? false : _props$centerRipple,\n children = props.children,\n classes = props.classes,\n className = props.className,\n _props$component = props.component,\n component = _props$component === void 0 ? 'button' : _props$component,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n _props$disableRipple = props.disableRipple,\n disableRipple = _props$disableRipple === void 0 ? false : _props$disableRipple,\n _props$disableTouchRi = props.disableTouchRipple,\n disableTouchRipple = _props$disableTouchRi === void 0 ? false : _props$disableTouchRi,\n _props$focusRipple = props.focusRipple,\n focusRipple = _props$focusRipple === void 0 ? false : _props$focusRipple,\n focusVisibleClassName = props.focusVisibleClassName,\n onBlur = props.onBlur,\n onClick = props.onClick,\n onFocus = props.onFocus,\n onFocusVisible = props.onFocusVisible,\n onKeyDown = props.onKeyDown,\n onKeyUp = props.onKeyUp,\n onMouseDown = props.onMouseDown,\n onMouseLeave = props.onMouseLeave,\n onMouseUp = props.onMouseUp,\n onTouchEnd = props.onTouchEnd,\n onTouchMove = props.onTouchMove,\n onTouchStart = props.onTouchStart,\n onDragLeave = props.onDragLeave,\n _props$tabIndex = props.tabIndex,\n tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,\n TouchRippleProps = props.TouchRippleProps,\n _props$type = props.type,\n type = _props$type === void 0 ? 'button' : _props$type,\n other = _objectWithoutProperties(props, [\"action\", \"buttonRef\", \"centerRipple\", \"children\", \"classes\", \"className\", \"component\", \"disabled\", \"disableRipple\", \"disableTouchRipple\", \"focusRipple\", \"focusVisibleClassName\", \"onBlur\", \"onClick\", \"onFocus\", \"onFocusVisible\", \"onKeyDown\", \"onKeyUp\", \"onMouseDown\", \"onMouseLeave\", \"onMouseUp\", \"onTouchEnd\", \"onTouchMove\", \"onTouchStart\", \"onDragLeave\", \"tabIndex\", \"TouchRippleProps\", \"type\"]);\n\n var buttonRef = React.useRef(null);\n\n function getButtonNode() {\n // #StrictMode ready\n return ReactDOM.findDOMNode(buttonRef.current);\n }\n\n var rippleRef = React.useRef(null);\n\n var _React$useState = React.useState(false),\n focusVisible = _React$useState[0],\n setFocusVisible = _React$useState[1];\n\n if (disabled && focusVisible) {\n setFocusVisible(false);\n }\n\n var _useIsFocusVisible = useIsFocusVisible(),\n isFocusVisible = _useIsFocusVisible.isFocusVisible,\n onBlurVisible = _useIsFocusVisible.onBlurVisible,\n focusVisibleRef = _useIsFocusVisible.ref;\n\n React.useImperativeHandle(action, function () {\n return {\n focusVisible: function focusVisible() {\n setFocusVisible(true);\n buttonRef.current.focus();\n }\n };\n }, []);\n React.useEffect(function () {\n if (focusVisible && focusRipple && !disableRipple) {\n rippleRef.current.pulsate();\n }\n }, [disableRipple, focusRipple, focusVisible]);\n\n function useRippleHandler(rippleAction, eventCallback) {\n var skipRippleAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : disableTouchRipple;\n return useEventCallback(function (event) {\n if (eventCallback) {\n eventCallback(event);\n }\n\n var ignore = skipRippleAction;\n\n if (!ignore && rippleRef.current) {\n rippleRef.current[rippleAction](event);\n }\n\n return true;\n });\n }\n\n var handleMouseDown = useRippleHandler('start', onMouseDown);\n var handleDragLeave = useRippleHandler('stop', onDragLeave);\n var handleMouseUp = useRippleHandler('stop', onMouseUp);\n var handleMouseLeave = useRippleHandler('stop', function (event) {\n if (focusVisible) {\n event.preventDefault();\n }\n\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n });\n var handleTouchStart = useRippleHandler('start', onTouchStart);\n var handleTouchEnd = useRippleHandler('stop', onTouchEnd);\n var handleTouchMove = useRippleHandler('stop', onTouchMove);\n var handleBlur = useRippleHandler('stop', function (event) {\n if (focusVisible) {\n onBlurVisible(event);\n setFocusVisible(false);\n }\n\n if (onBlur) {\n onBlur(event);\n }\n }, false);\n var handleFocus = useEventCallback(function (event) {\n // Fix for https://github.com/facebook/react/issues/7769\n if (!buttonRef.current) {\n buttonRef.current = event.currentTarget;\n }\n\n if (isFocusVisible(event)) {\n setFocusVisible(true);\n\n if (onFocusVisible) {\n onFocusVisible(event);\n }\n }\n\n if (onFocus) {\n onFocus(event);\n }\n });\n\n var isNonNativeButton = function isNonNativeButton() {\n var button = getButtonNode();\n return component && component !== 'button' && !(button.tagName === 'A' && button.href);\n };\n /**\n * IE 11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat\n */\n\n\n var keydownRef = React.useRef(false);\n var handleKeyDown = useEventCallback(function (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 event.persist();\n rippleRef.current.stop(event, function () {\n rippleRef.current.start(event);\n });\n }\n\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {\n event.preventDefault();\n }\n\n if (onKeyDown) {\n onKeyDown(event);\n } // Keyboard accessibility for non interactive elements\n\n\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {\n event.preventDefault();\n\n if (onClick) {\n onClick(event);\n }\n }\n });\n var handleKeyUp = useEventCallback(function (event) {\n // calling preventDefault in keyUp on a