).cancel();\n }\n\n /**\n * Remove all listeners from DOM nodes\n */\n unMount() {\n this.removeListeners();\n }\n\n /**\n * Check if mouse is within bounds\n */\n isWithinBounds(bbox: DOMRect) {\n return (\n this.mouseX >= bbox.left &&\n this.mouseX <= bbox.left + bbox.width &&\n this.mouseY >= bbox.top &&\n this.mouseY <= bbox.top + bbox.height\n );\n }\n\n /**\n * Find element children matches query\n */\n findChild(el: any, query: any) {\n const matches =\n el.matches ||\n el.webkitMatchesSelector ||\n el.mozMatchesSelector ||\n el.msMatchesSelector;\n return Array.prototype.filter.call(el.children, (child) =>\n matches.call(child, query)\n )[0];\n }\n}\n","/**\n * simplebar-react - v3.2.4\n * React component for SimpleBar\n * https://grsmto.github.io/simplebar/\n *\n * Made by Adrien Denat\n * Under MIT License\n */\n\nimport * as React from 'react';\nimport SimpleBarCore from 'simplebar-core';\n\n/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n\r\nvar __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n };\r\n return __assign.apply(this, arguments);\r\n};\r\n\r\nfunction __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\n\nvar SimpleBar = React.forwardRef(function (_a, ref) {\n var children = _a.children, _b = _a.scrollableNodeProps, scrollableNodeProps = _b === void 0 ? {} : _b, otherProps = __rest(_a, [\"children\", \"scrollableNodeProps\"]);\n var elRef = React.useRef();\n var scrollableNodeRef = React.useRef();\n var contentNodeRef = React.useRef();\n var options = {};\n var rest = {};\n Object.keys(otherProps).forEach(function (key) {\n if (Object.prototype.hasOwnProperty.call(SimpleBarCore.defaultOptions, key)) {\n options[key] = otherProps[key];\n }\n else {\n rest[key] = otherProps[key];\n }\n });\n var classNames = __assign(__assign({}, SimpleBarCore.defaultOptions.classNames), options.classNames);\n var scrollableNodeFullProps = __assign(__assign({}, scrollableNodeProps), { className: \"\".concat(classNames.contentWrapper).concat(scrollableNodeProps.className ? \" \".concat(scrollableNodeProps.className) : ''), tabIndex: 0, role: 'region', 'aria-label': options.ariaLabel || SimpleBarCore.defaultOptions.ariaLabel });\n React.useEffect(function () {\n var instance;\n scrollableNodeRef.current = scrollableNodeFullProps.ref\n ? scrollableNodeFullProps.ref.current\n : scrollableNodeRef.current;\n if (elRef.current) {\n instance = new SimpleBarCore(elRef.current, __assign(__assign(__assign({}, options), (scrollableNodeRef.current && {\n scrollableNode: scrollableNodeRef.current\n })), (contentNodeRef.current && {\n contentNode: contentNodeRef.current\n })));\n if (typeof ref === 'function') {\n ref(instance);\n }\n else if (ref) {\n ref.current = instance;\n }\n }\n return function () {\n instance === null || instance === void 0 ? void 0 : instance.unMount();\n instance = null;\n if (typeof ref === 'function') {\n ref(null);\n }\n };\n }, []);\n return (React.createElement(\"div\", __assign({ \"data-simplebar\": \"init\", ref: elRef }, rest),\n React.createElement(\"div\", { className: classNames.wrapper },\n React.createElement(\"div\", { className: classNames.heightAutoObserverWrapperEl },\n React.createElement(\"div\", { className: classNames.heightAutoObserverEl })),\n React.createElement(\"div\", { className: classNames.mask },\n React.createElement(\"div\", { className: classNames.offset }, typeof children === 'function' ? (children({\n scrollableNodeRef: scrollableNodeRef,\n scrollableNodeProps: __assign(__assign({}, scrollableNodeFullProps), { ref: scrollableNodeRef }),\n contentNodeRef: contentNodeRef,\n contentNodeProps: {\n className: classNames.contentEl,\n ref: contentNodeRef\n }\n })) : (React.createElement(\"div\", __assign({}, scrollableNodeFullProps),\n React.createElement(\"div\", { className: classNames.contentEl }, children))))),\n React.createElement(\"div\", { className: classNames.placeholder })),\n React.createElement(\"div\", { className: \"\".concat(classNames.track, \" simplebar-horizontal\") },\n React.createElement(\"div\", { className: classNames.scrollbar })),\n React.createElement(\"div\", { className: \"\".concat(classNames.track, \" simplebar-vertical\") },\n React.createElement(\"div\", { className: classNames.scrollbar }))));\n});\nSimpleBar.displayName = 'SimpleBar';\n\nexport { SimpleBar as default };\n","import SimpleBar from 'simplebar-react';\n// @mui\nimport { alpha, styled } from '@mui/material/styles';\n\n// ----------------------------------------------------------------------\n\nexport const StyledRootScrollbar = styled('div')(() => ({\n flexGrow: 1,\n height: '100%',\n overflow: 'hidden',\n}));\n\nexport const StyledScrollbar = styled(SimpleBar)(({ theme }) => ({\n maxHeight: '100%',\n '& .simplebar-scrollbar': {\n '&:before': {\n backgroundColor: alpha(theme.palette.grey[600], 0.48),\n },\n '&.simplebar-visible:before': {\n opacity: 1,\n },\n },\n '& .simplebar-mask': {\n zIndex: 'inherit',\n },\n}));\n","import PropTypes from 'prop-types';\nimport { memo, forwardRef } from 'react';\n// @mui\nimport Box from '@mui/material/Box';\n//\nimport { StyledRootScrollbar, StyledScrollbar } from './styles';\n\n// ----------------------------------------------------------------------\n\nconst Scrollbar = forwardRef(({ children, sx, ...other }, ref) => {\n const userAgent = typeof navigator === 'undefined' ? 'SSR' : navigator.userAgent;\n\n const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);\n\n if (isMobile) {\n return (\n \n {children}\n \n );\n }\n\n return (\n \n \n {children}\n \n \n );\n});\n\nScrollbar.propTypes = {\n children: PropTypes.node,\n sx: PropTypes.object,\n};\n\nexport default memo(Scrollbar);\n","import { createContext, useContext } from 'react';\n\n// ----------------------------------------------------------------------\n\nexport const SettingsContext = createContext({});\n\nexport const useSettingsContext = () => {\n const context = useContext(SettingsContext);\n\n if (!context) throw new Error('useSettingsContext must be use inside SettingsProvider');\n\n return context;\n};\n","import { useEffect, useState, useCallback } from 'react';\n\n// ----------------------------------------------------------------------\n\nexport function useLocalStorage(key, initialState) {\n const [state, setState] = useState(initialState);\n\n useEffect(() => {\n const restored = getStorage(key);\n\n if (restored) {\n setState((prevValue) => ({\n ...prevValue,\n ...restored,\n }));\n }\n }, [key]);\n\n const updateState = useCallback(\n (updateValue) => {\n setState((prevValue) => {\n setStorage(key, {\n ...prevValue,\n ...updateValue,\n });\n\n return {\n ...prevValue,\n ...updateValue,\n };\n });\n },\n [key]\n );\n\n const update = useCallback(\n (name, updateValue) => {\n updateState({\n [name]: updateValue,\n });\n },\n [updateState]\n );\n\n const reset = useCallback(() => {\n removeStorage(key);\n setState(initialState);\n }, [initialState, key]);\n\n return {\n state,\n update,\n reset,\n };\n}\n\n// ----------------------------------------------------------------------\n\nexport const getStorage = (key) => {\n let value = null;\n\n try {\n const result = window.localStorage.getItem(key);\n\n if (result) {\n value = JSON.parse(result);\n }\n } catch (error) {\n console.error(error);\n }\n\n return value;\n};\n\nexport const setStorage = (key, value) => {\n try {\n window.localStorage.setItem(key, JSON.stringify(value));\n } catch (error) {\n console.error(error);\n }\n};\n\nexport const removeStorage = (key) => {\n try {\n window.localStorage.removeItem(key);\n } catch (error) {\n console.error(error);\n }\n};\n","import PropTypes from 'prop-types';\nimport isEqual from 'lodash/isEqual';\nimport { useEffect, useMemo, useCallback, useState } from 'react';\n// hooks\nimport { useLocalStorage } from 'src/hooks/use-local-storage';\n// utils\nimport { localStorageGetItem } from 'src/utils/storage-available';\n//\nimport { SettingsContext } from './settings-context';\n\n// ----------------------------------------------------------------------\n\nconst STORAGE_KEY = 'settings';\n\nexport function SettingsProvider({ children, defaultSettings }) {\n const { state, update, reset } = useLocalStorage(STORAGE_KEY, defaultSettings);\n\n const [openDrawer, setOpenDrawer] = useState(false);\n\n const isArabic = localStorageGetItem('i18nextLng') === 'ar';\n\n useEffect(() => {\n if (isArabic) {\n onChangeDirectionByLang('ar');\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isArabic]);\n\n // Direction by lang\n const onChangeDirectionByLang = useCallback(\n (lang) => {\n update('themeDirection', lang === 'ar' ? 'rtl' : 'ltr');\n },\n [update]\n );\n\n // Drawer\n const onToggleDrawer = useCallback(() => {\n setOpenDrawer((prev) => !prev);\n }, []);\n\n const onCloseDrawer = useCallback(() => {\n setOpenDrawer(false);\n }, []);\n\n const canReset = !isEqual(state, defaultSettings);\n\n const memoizedValue = useMemo(\n () => ({\n ...state,\n onUpdate: update,\n // Direction\n onChangeDirectionByLang,\n // Reset\n canReset,\n onReset: reset,\n // Drawer\n open: openDrawer,\n onToggle: onToggleDrawer,\n onClose: onCloseDrawer,\n }),\n [\n reset,\n update,\n state,\n canReset,\n openDrawer,\n onCloseDrawer,\n onToggleDrawer,\n onChangeDirectionByLang,\n ]\n );\n\n return {children};\n}\n\nSettingsProvider.propTypes = {\n children: PropTypes.node,\n defaultSettings: PropTypes.object,\n};\n","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"absolute\", \"children\", \"className\", \"component\", \"flexItem\", \"light\", \"orientation\", \"role\", \"textAlign\", \"variant\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';\nimport { alpha } from '@mui/system';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport { getDividerUtilityClass } from './dividerClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n absolute,\n children,\n classes,\n flexItem,\n light,\n orientation,\n textAlign,\n variant\n } = ownerState;\n const slots = {\n root: ['root', absolute && 'absolute', variant, light && 'light', orientation === 'vertical' && 'vertical', flexItem && 'flexItem', children && 'withChildren', children && orientation === 'vertical' && 'withChildrenVertical', textAlign === 'right' && orientation !== 'vertical' && 'textAlignRight', textAlign === 'left' && orientation !== 'vertical' && 'textAlignLeft'],\n wrapper: ['wrapper', orientation === 'vertical' && 'wrapperVertical']\n };\n return composeClasses(slots, getDividerUtilityClass, classes);\n};\nconst DividerRoot = styled('div', {\n name: 'MuiDivider',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, ownerState.absolute && styles.absolute, styles[ownerState.variant], ownerState.light && styles.light, ownerState.orientation === 'vertical' && styles.vertical, ownerState.flexItem && styles.flexItem, ownerState.children && styles.withChildren, ownerState.children && ownerState.orientation === 'vertical' && styles.withChildrenVertical, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && styles.textAlignRight, ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && styles.textAlignLeft];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n margin: 0,\n // Reset browser default style.\n flexShrink: 0,\n borderWidth: 0,\n borderStyle: 'solid',\n borderColor: (theme.vars || theme).palette.divider,\n borderBottomWidth: 'thin'\n}, ownerState.absolute && {\n position: 'absolute',\n bottom: 0,\n left: 0,\n width: '100%'\n}, ownerState.light && {\n borderColor: theme.vars ? `rgba(${theme.vars.palette.dividerChannel} / 0.08)` : alpha(theme.palette.divider, 0.08)\n}, ownerState.variant === 'inset' && {\n marginLeft: 72\n}, ownerState.variant === 'middle' && ownerState.orientation === 'horizontal' && {\n marginLeft: theme.spacing(2),\n marginRight: theme.spacing(2)\n}, ownerState.variant === 'middle' && ownerState.orientation === 'vertical' && {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1)\n}, ownerState.orientation === 'vertical' && {\n height: '100%',\n borderBottomWidth: 0,\n borderRightWidth: 'thin'\n}, ownerState.flexItem && {\n alignSelf: 'stretch',\n height: 'auto'\n}), ({\n ownerState\n}) => _extends({}, ownerState.children && {\n display: 'flex',\n whiteSpace: 'nowrap',\n textAlign: 'center',\n border: 0,\n '&::before, &::after': {\n content: '\"\"',\n alignSelf: 'center'\n }\n}), ({\n theme,\n ownerState\n}) => _extends({}, ownerState.children && ownerState.orientation !== 'vertical' && {\n '&::before, &::after': {\n width: '100%',\n borderTop: `thin solid ${(theme.vars || theme).palette.divider}`\n }\n}), ({\n theme,\n ownerState\n}) => _extends({}, ownerState.children && ownerState.orientation === 'vertical' && {\n flexDirection: 'column',\n '&::before, &::after': {\n height: '100%',\n borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`\n }\n}), ({\n ownerState\n}) => _extends({}, ownerState.textAlign === 'right' && ownerState.orientation !== 'vertical' && {\n '&::before': {\n width: '90%'\n },\n '&::after': {\n width: '10%'\n }\n}, ownerState.textAlign === 'left' && ownerState.orientation !== 'vertical' && {\n '&::before': {\n width: '10%'\n },\n '&::after': {\n width: '90%'\n }\n}));\nconst DividerWrapper = styled('span', {\n name: 'MuiDivider',\n slot: 'Wrapper',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.wrapper, ownerState.orientation === 'vertical' && styles.wrapperVertical];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n display: 'inline-block',\n paddingLeft: `calc(${theme.spacing(1)} * 1.2)`,\n paddingRight: `calc(${theme.spacing(1)} * 1.2)`\n}, ownerState.orientation === 'vertical' && {\n paddingTop: `calc(${theme.spacing(1)} * 1.2)`,\n paddingBottom: `calc(${theme.spacing(1)} * 1.2)`\n}));\nconst Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiDivider'\n });\n const {\n absolute = false,\n children,\n className,\n component = children ? 'div' : 'hr',\n flexItem = false,\n light = false,\n orientation = 'horizontal',\n role = component !== 'hr' ? 'separator' : undefined,\n textAlign = 'center',\n variant = 'fullWidth'\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n absolute,\n component,\n flexItem,\n light,\n orientation,\n role,\n textAlign,\n variant\n });\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(DividerRoot, _extends({\n as: component,\n className: clsx(classes.root, className),\n role: role,\n ref: ref,\n ownerState: ownerState\n }, other, {\n children: children ? /*#__PURE__*/_jsx(DividerWrapper, {\n className: classes.wrapper,\n ownerState: ownerState,\n children: children\n }) : null\n }));\n});\n\n/**\n * The following flag is used to ensure that this component isn't tabbable i.e.\n * does not get highlight/focus inside of MUI List.\n */\nDivider.muiSkipListHighlight = true;\nprocess.env.NODE_ENV !== \"production\" ? Divider.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * Absolutely position the element.\n * @default false\n */\n absolute: PropTypes.bool,\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes.elementType,\n /**\n * If `true`, a vertical divider will have the correct height when used in flex container.\n * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)\n * @default false\n */\n flexItem: PropTypes.bool,\n /**\n * If `true`, the divider will have a lighter color.\n * @default false\n */\n light: PropTypes.bool,\n /**\n * The component orientation.\n * @default 'horizontal'\n */\n orientation: PropTypes.oneOf(['horizontal', 'vertical']),\n /**\n * @ignore\n */\n role: PropTypes /* @typescript-to-proptypes-ignore */.string,\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n /**\n * The text alignment.\n * @default 'center'\n */\n textAlign: PropTypes.oneOf(['center', 'left', 'right']),\n /**\n * The variant to use.\n * @default 'fullWidth'\n */\n variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['fullWidth', 'inset', 'middle']), PropTypes.string])\n} : void 0;\nexport default Divider;","import PropTypes from 'prop-types';\n// @mui\nimport { alpha } from '@mui/material/styles';\nimport Stack from '@mui/material/Stack';\nimport ButtonBase from '@mui/material/ButtonBase';\n//\nimport SvgColor from '../../svg-color';\n\n// ----------------------------------------------------------------------\n\nexport default function BaseOptions({ icons, options, value, onChange }) {\n return (\n \n {options.map((option, index) => {\n const selected = value === option;\n\n return (\n onChange(option)}\n sx={{\n width: 1,\n height: 80,\n borderRadius: 1,\n border: (theme) => `solid 1px ${alpha(theme.palette.grey[500], 0.08)}`,\n ...(selected && {\n bgcolor: 'background.paper',\n boxShadow: (theme) =>\n `-24px 8px 24px -4px ${alpha(\n theme.palette.mode === 'light'\n ? theme.palette.grey[500]\n : theme.palette.common.black,\n 0.08\n )}`,\n }),\n '& .svg-color': {\n background: (theme) =>\n `linear-gradient(135deg, ${theme.palette.grey[500]} 0%, ${theme.palette.grey[600]} 100%)`,\n ...(selected && {\n background: (theme) =>\n `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,\n }),\n },\n }}\n >\n \n \n );\n })}\n \n );\n}\n\nBaseOptions.propTypes = {\n icons: PropTypes.arrayOf(PropTypes.string),\n onChange: PropTypes.func,\n options: PropTypes.array,\n value: PropTypes.string,\n};\n","import PropTypes from 'prop-types';\n// @mui\nimport { alpha, useTheme } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport ButtonBase from '@mui/material/ButtonBase';\n\n// ----------------------------------------------------------------------\n\nexport default function LayoutOptions({ options, value, onChange }) {\n const theme = useTheme();\n\n const renderNav = (option, selected) => {\n const background = `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`;\n\n const baseStyles = {\n flexShrink: 0,\n borderRadius: 0.5,\n bgcolor: 'grey.500',\n };\n\n const circle = (\n \n );\n\n const primaryItem = (\n \n );\n\n const secondaryItem = (\n \n );\n\n return (\n \n {circle}\n {primaryItem}\n {secondaryItem}\n \n );\n };\n\n const renderContent = (selected) => (\n \n \n \n );\n\n return (\n \n {options.map((option) => {\n const selected = value === option;\n\n return (\n onChange(option)}\n sx={{\n p: 0,\n width: 1,\n height: 56,\n borderRadius: 1,\n border: `solid 1px ${alpha(theme.palette.grey[500], 0.08)}`,\n ...(selected && {\n bgcolor: 'background.paper',\n boxShadow: `-24px 8px 24px -4px ${alpha(\n theme.palette.mode === 'light'\n ? theme.palette.grey[500]\n : theme.palette.common.black,\n 0.08\n )}`,\n }),\n ...(option === 'horizontal' && {\n flexDirection: 'column',\n }),\n }}\n >\n {renderNav(option, selected)}\n {renderContent(selected)}\n \n );\n })}\n \n );\n}\n\nLayoutOptions.propTypes = {\n onChange: PropTypes.func,\n options: PropTypes.array,\n value: PropTypes.string,\n};\n","import PropTypes from 'prop-types';\n// @mui\nimport { alpha } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\n// theme\nimport { primaryPresets } from 'src/theme/options/presets';\n\n// ----------------------------------------------------------------------\n\nexport default function PresetsOptions({ value, onChange }) {\n const options = primaryPresets.map((color) => ({\n name: color.name,\n value: color.main,\n }));\n\n return (\n \n {options.map((option) => {\n const selected = value === option.name;\n\n return (\n onChange(option.name)}\n sx={{\n height: 56,\n borderRadius: 1,\n border: (theme) => `solid 1px ${alpha(theme.palette.grey[500], 0.08)}`,\n ...(selected && {\n borderColor: 'transparent',\n bgcolor: alpha(option.value, 0.08),\n }),\n }}\n >\n \n theme.transitions.create(['transform'], {\n duration: theme.transitions.duration.shorter,\n }),\n ...(selected && {\n transform: 'scale(2)',\n }),\n }}\n />\n \n );\n })}\n \n );\n}\n\nPresetsOptions.propTypes = {\n onChange: PropTypes.func,\n value: PropTypes.string,\n};\n","import PropTypes from 'prop-types'; // @mui\nimport { alpha } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport Stack from '@mui/material/Stack';\nimport ButtonBase from '@mui/material/ButtonBase';\n//\nimport Iconify from '../../iconify';\n\n// ----------------------------------------------------------------------\n\nexport default function StretchOptions({ value, onChange }) {\n return (\n `solid 1px ${alpha(theme.palette.grey[500], 0.08)}`,\n ...(value && {\n bgcolor: 'background.paper',\n color: (theme) => theme.palette.primary.main,\n boxShadow: (theme) =>\n `-24px 8px 24px -4px ${alpha(\n theme.palette.mode === 'light' ? theme.palette.grey[500] : theme.palette.common.black,\n 0.08\n )}`,\n }),\n }}\n >\n theme.transitions.create(['width']),\n ...(value && {\n width: 0.5,\n }),\n }}\n >\n \n `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,\n }}\n />\n\n \n\n \n `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,\n }}\n />\n \n \n );\n}\n\nStretchOptions.propTypes = {\n onChange: PropTypes.func,\n value: PropTypes.bool,\n};\n","import { useState, useCallback } from 'react';\n// @mui\nimport { alpha } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport ButtonBase from '@mui/material/ButtonBase';\n//\nimport SvgColor from '../../svg-color';\n\n// ----------------------------------------------------------------------\n\nexport default function FullScreenOption() {\n const [fullscreen, setFullscreen] = useState(false);\n\n const onToggleFullScreen = useCallback(() => {\n if (!document.fullscreenElement) {\n document.documentElement.requestFullscreen();\n setFullscreen(true);\n } else if (document.exitFullscreen) {\n document.exitFullscreen();\n setFullscreen(false);\n }\n }, []);\n\n return (\n \n `solid 1px ${alpha(theme.palette.grey[500], 0.08)}`,\n ...(fullscreen && {\n color: 'text.primary',\n }),\n '& .svg-color': {\n background: (theme) =>\n `linear-gradient(135deg, ${theme.palette.grey[500]} 0%, ${theme.palette.grey[600]} 100%)`,\n ...(fullscreen && {\n background: (theme) =>\n `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,\n }),\n },\n }}\n >\n \n\n {fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}\n \n \n );\n}\n","// @mui\nimport { useTheme } from '@mui/material/styles';\nimport Stack from '@mui/material/Stack';\nimport Badge from '@mui/material/Badge';\nimport Divider from '@mui/material/Divider';\nimport Tooltip from '@mui/material/Tooltip';\nimport IconButton from '@mui/material/IconButton';\nimport Typography from '@mui/material/Typography';\nimport Drawer, { drawerClasses } from '@mui/material/Drawer';\n// theme\nimport { paper } from 'src/theme/css';\n//\nimport Iconify from '../../iconify';\nimport Scrollbar from '../../scrollbar';\n//\nimport { useSettingsContext } from '../context';\nimport BaseOptions from './base-option';\nimport LayoutOptions from './layout-options';\nimport PresetsOptions from './presets-options';\nimport StretchOptions from './stretch-options';\nimport FullScreenOption from './fullscreen-option';\n\n// ----------------------------------------------------------------------\n\nexport default function SettingsDrawer() {\n const theme = useTheme();\n\n const settings = useSettingsContext();\n\n const labelStyles = {\n mb: 1.5,\n color: 'text.disabled',\n fontWeight: 'fontWeightSemiBold',\n };\n\n const renderHead = (\n \n \n Settings\n \n\n \n \n \n \n \n \n \n\n \n \n \n \n );\n\n const renderMode = (\n \n \n Mode\n \n\n settings.onUpdate('themeMode', newValue)}\n options={['light', 'dark']}\n icons={['sun', 'moon']}\n />\n
\n );\n\n const renderContrast = (\n \n \n Contrast\n \n\n settings.onUpdate('themeContrast', newValue)}\n options={['default', 'bold']}\n icons={['contrast', 'contrast_bold']}\n />\n
\n );\n\n const renderDirection = (\n \n \n Direction\n \n\n settings.onUpdate('themeDirection', newValue)}\n options={['ltr', 'rtl']}\n icons={['align_left', 'align_right']}\n />\n
\n );\n\n const renderLayout = (\n \n \n Layout\n \n\n settings.onUpdate('themeLayout', newValue)}\n options={['vertical', 'horizontal', 'mini']}\n />\n
\n );\n\n const renderStretch = (\n \n \n Stretch\n 1600px (xl)\">\n \n \n \n\n settings.onUpdate('themeStretch', !settings.themeStretch)}\n />\n
\n );\n\n const renderPresets = (\n \n
\n Presets\n \n\n
settings.onUpdate('themeColorPresets', newValue)}\n />\n \n );\n\n return (\n \n {renderHead}\n\n \n\n \n \n {renderMode}\n\n {renderContrast}\n\n {renderDirection}\n\n {renderLayout}\n\n {renderStretch}\n\n {renderPresets}\n \n \n\n \n \n );\n}\n","import PropTypes from 'prop-types';\nimport { forwardRef } from 'react';\n// @mui\nimport Box from '@mui/material/Box';\n\n// ----------------------------------------------------------------------\n\nconst SvgColor = forwardRef(({ src, sx, ...other }, ref) => (\n \n));\n\nSvgColor.propTypes = {\n src: PropTypes.string,\n sx: PropTypes.object,\n};\n\nexport default SvgColor;\n","// routes\nimport { paths } from 'src/routes/paths';\n\n// API\n// ----------------------------------------------------------------------\n\nexport const HOST_API = process.env.REACT_APP_HOST_API;\nexport const ASSETS_API = process.env.REACT_APP_ASSETS_API;\n\nexport const FIREBASE_API = {\n apiKey: process.env.REACT_APP_FIREBASE_API_KEY,\n authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,\n projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,\n storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,\n messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,\n appId: process.env.REACT_APP_FIREBASE_APPID,\n measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,\n};\n\nexport const AMPLIFY_API = {\n userPoolId: process.env.REACT_APP_AWS_AMPLIFY_USER_POOL_ID,\n userPoolWebClientId: process.env.REACT_APP_AWS_AMPLIFY_USER_POOL_WEB_CLIENT_ID,\n region: process.env.REACT_APP_AWS_AMPLIFY_REGION,\n};\n\nexport const AUTH0_API = {\n clientId: process.env.REACT_APP_AUTH0_CLIENT_ID,\n domain: process.env.REACT_APP_AUTH0_DOMAIN,\n callbackUrl: process.env.REACT_APP_AUTH0_CALLBACK_URL,\n};\n\nexport const MAPBOX_API = process.env.REACT_APP_MAPBOX_API;\n\n// ROOT PATH AFTER LOGIN SUCCESSFUL\nexport const PATH_AFTER_LOGIN = paths.dashboard.root; // as '/dashboard'\n","import { useCallback, useState } from 'react';\n\n// ----------------------------------------------------------------------\n\nexport function useBoolean(defaultValue) {\n const [value, setValue] = useState(!!defaultValue);\n\n const onTrue = useCallback(() => {\n setValue(true);\n }, []);\n\n const onFalse = useCallback(() => {\n setValue(false);\n }, []);\n\n const onToggle = useCallback(() => {\n setValue((prev) => !prev);\n }, []);\n\n return {\n value,\n onTrue,\n onFalse,\n onToggle,\n setValue,\n };\n}\n","import { resolveElements } from '../utils/resolve-element.mjs';\n\nconst resizeHandlers = new WeakMap();\nlet observer;\nfunction getElementSize(target, borderBoxSize) {\n if (borderBoxSize) {\n const { inlineSize, blockSize } = borderBoxSize[0];\n return { width: inlineSize, height: blockSize };\n }\n else if (target instanceof SVGElement && \"getBBox\" in target) {\n return target.getBBox();\n }\n else {\n return {\n width: target.offsetWidth,\n height: target.offsetHeight,\n };\n }\n}\nfunction notifyTarget({ target, contentRect, borderBoxSize, }) {\n var _a;\n (_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {\n handler({\n target,\n contentSize: contentRect,\n get size() {\n return getElementSize(target, borderBoxSize);\n },\n });\n });\n}\nfunction notifyAll(entries) {\n entries.forEach(notifyTarget);\n}\nfunction createResizeObserver() {\n if (typeof ResizeObserver === \"undefined\")\n return;\n observer = new ResizeObserver(notifyAll);\n}\nfunction resizeElement(target, handler) {\n if (!observer)\n createResizeObserver();\n const elements = resolveElements(target);\n elements.forEach((element) => {\n let elementHandlers = resizeHandlers.get(element);\n if (!elementHandlers) {\n elementHandlers = new Set();\n resizeHandlers.set(element, elementHandlers);\n }\n elementHandlers.add(handler);\n observer === null || observer === void 0 ? void 0 : observer.observe(element);\n });\n return () => {\n elements.forEach((element) => {\n const elementHandlers = resizeHandlers.get(element);\n elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.delete(handler);\n if (!(elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.size)) {\n observer === null || observer === void 0 ? void 0 : observer.unobserve(element);\n }\n });\n };\n}\n\nexport { resizeElement };\n","import { invariant } from '../../../utils/errors.mjs';\n\nfunction resolveElements(elements, scope, selectorCache) {\n var _a;\n if (typeof elements === \"string\") {\n let root = document;\n if (scope) {\n invariant(Boolean(scope.current), \"Scope provided, but no element detected.\");\n root = scope.current;\n }\n if (selectorCache) {\n (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : (selectorCache[elements] = root.querySelectorAll(elements));\n elements = selectorCache[elements];\n }\n else {\n elements = root.querySelectorAll(elements);\n }\n }\n else if (elements instanceof Element) {\n elements = [elements];\n }\n /**\n * Return an empty array\n */\n return Array.from(elements || []);\n}\n\nexport { resolveElements };\n","const windowCallbacks = new Set();\nlet windowResizeHandler;\nfunction createWindowResizeHandler() {\n windowResizeHandler = () => {\n const size = {\n width: window.innerWidth,\n height: window.innerHeight,\n };\n const info = {\n target: window,\n size,\n contentSize: size,\n };\n windowCallbacks.forEach((callback) => callback(info));\n };\n window.addEventListener(\"resize\", windowResizeHandler);\n}\nfunction resizeWindow(callback) {\n windowCallbacks.add(callback);\n if (!windowResizeHandler)\n createWindowResizeHandler();\n return () => {\n windowCallbacks.delete(callback);\n if (!windowCallbacks.size && windowResizeHandler) {\n windowResizeHandler = undefined;\n }\n };\n}\n\nexport { resizeWindow };\n","import { progress } from '../../../utils/progress.mjs';\nimport { velocityPerSecond } from '../../../utils/velocity-per-second.mjs';\n\n/**\n * A time in milliseconds, beyond which we consider the scroll velocity to be 0.\n */\nconst maxElapsed = 50;\nconst createAxisInfo = () => ({\n current: 0,\n offset: [],\n progress: 0,\n scrollLength: 0,\n targetOffset: 0,\n targetLength: 0,\n containerLength: 0,\n velocity: 0,\n});\nconst createScrollInfo = () => ({\n time: 0,\n x: createAxisInfo(),\n y: createAxisInfo(),\n});\nconst keys = {\n x: {\n length: \"Width\",\n position: \"Left\",\n },\n y: {\n length: \"Height\",\n position: \"Top\",\n },\n};\nfunction updateAxisInfo(element, axisName, info, time) {\n const axis = info[axisName];\n const { length, position } = keys[axisName];\n const prev = axis.current;\n const prevTime = info.time;\n axis.current = element[\"scroll\" + position];\n axis.scrollLength = element[\"scroll\" + length] - element[\"client\" + length];\n axis.offset.length = 0;\n axis.offset[0] = 0;\n axis.offset[1] = axis.scrollLength;\n axis.progress = progress(0, axis.scrollLength, axis.current);\n const elapsed = time - prevTime;\n axis.velocity =\n elapsed > maxElapsed\n ? 0\n : velocityPerSecond(axis.current - prev, elapsed);\n}\nfunction updateScrollInfo(element, info, time) {\n updateAxisInfo(element, \"x\", info, time);\n updateAxisInfo(element, \"y\", info, time);\n info.time = time;\n}\n\nexport { createScrollInfo, updateScrollInfo };\n","const ScrollOffset = {\n Enter: [\n [0, 1],\n [1, 1],\n ],\n Exit: [\n [0, 0],\n [1, 0],\n ],\n Any: [\n [1, 0],\n [0, 1],\n ],\n All: [\n [0, 0],\n [1, 1],\n ],\n};\n\nexport { ScrollOffset };\n","const namedEdges = {\n start: 0,\n center: 0.5,\n end: 1,\n};\nfunction resolveEdge(edge, length, inset = 0) {\n let delta = 0;\n /**\n * If we have this edge defined as a preset, replace the definition\n * with the numerical value.\n */\n if (namedEdges[edge] !== undefined) {\n edge = namedEdges[edge];\n }\n /**\n * Handle unit values\n */\n if (typeof edge === \"string\") {\n const asNumber = parseFloat(edge);\n if (edge.endsWith(\"px\")) {\n delta = asNumber;\n }\n else if (edge.endsWith(\"%\")) {\n edge = asNumber / 100;\n }\n else if (edge.endsWith(\"vw\")) {\n delta = (asNumber / 100) * document.documentElement.clientWidth;\n }\n else if (edge.endsWith(\"vh\")) {\n delta = (asNumber / 100) * document.documentElement.clientHeight;\n }\n else {\n edge = asNumber;\n }\n }\n /**\n * If the edge is defined as a number, handle as a progress value.\n */\n if (typeof edge === \"number\") {\n delta = length * edge;\n }\n return inset + delta;\n}\n\nexport { namedEdges, resolveEdge };\n","import { namedEdges, resolveEdge } from './edge.mjs';\n\nconst defaultOffset = [0, 0];\nfunction resolveOffset(offset, containerLength, targetLength, targetInset) {\n let offsetDefinition = Array.isArray(offset) ? offset : defaultOffset;\n let targetPoint = 0;\n let containerPoint = 0;\n if (typeof offset === \"number\") {\n /**\n * If we're provided offset: [0, 0.5, 1] then each number x should become\n * [x, x], so we default to the behaviour of mapping 0 => 0 of both target\n * and container etc.\n */\n offsetDefinition = [offset, offset];\n }\n else if (typeof offset === \"string\") {\n offset = offset.trim();\n if (offset.includes(\" \")) {\n offsetDefinition = offset.split(\" \");\n }\n else {\n /**\n * If we're provided a definition like \"100px\" then we want to apply\n * that only to the top of the target point, leaving the container at 0.\n * Whereas a named offset like \"end\" should be applied to both.\n */\n offsetDefinition = [offset, namedEdges[offset] ? offset : `0`];\n }\n }\n targetPoint = resolveEdge(offsetDefinition[0], targetLength, targetInset);\n containerPoint = resolveEdge(offsetDefinition[1], containerLength);\n return targetPoint - containerPoint;\n}\n\nexport { resolveOffset };\n","import { calcInset } from './inset.mjs';\nimport { ScrollOffset } from './presets.mjs';\nimport { resolveOffset } from './offset.mjs';\nimport { interpolate } from '../../../../utils/interpolate.mjs';\nimport { defaultOffset } from '../../../../utils/offsets/default.mjs';\n\nconst point = { x: 0, y: 0 };\nfunction resolveOffsets(container, info, options) {\n let { offset: offsetDefinition = ScrollOffset.All } = options;\n const { target = container, axis = \"y\" } = options;\n const lengthLabel = axis === \"y\" ? \"height\" : \"width\";\n const inset = target !== container ? calcInset(target, container) : point;\n /**\n * Measure the target and container. If they're the same thing then we\n * use the container's scrollWidth/Height as the target, from there\n * all other calculations can remain the same.\n */\n const targetSize = target === container\n ? { width: container.scrollWidth, height: container.scrollHeight }\n : { width: target.clientWidth, height: target.clientHeight };\n const containerSize = {\n width: container.clientWidth,\n height: container.clientHeight,\n };\n /**\n * Reset the length of the resolved offset array rather than creating a new one.\n * TODO: More reusable data structures for targetSize/containerSize would also be good.\n */\n info[axis].offset.length = 0;\n /**\n * Populate the offset array by resolving the user's offset definition into\n * a list of pixel scroll offets.\n */\n let hasChanged = !info[axis].interpolate;\n const numOffsets = offsetDefinition.length;\n for (let i = 0; i < numOffsets; i++) {\n const offset = resolveOffset(offsetDefinition[i], containerSize[lengthLabel], targetSize[lengthLabel], inset[axis]);\n if (!hasChanged && offset !== info[axis].interpolatorOffsets[i]) {\n hasChanged = true;\n }\n info[axis].offset[i] = offset;\n }\n /**\n * If the pixel scroll offsets have changed, create a new interpolator function\n * to map scroll value into a progress.\n */\n if (hasChanged) {\n info[axis].interpolate = interpolate(info[axis].offset, defaultOffset(offsetDefinition));\n info[axis].interpolatorOffsets = [...info[axis].offset];\n }\n info[axis].progress = info[axis].interpolate(info[axis].current);\n}\n\nexport { resolveOffsets };\n","function calcInset(element, container) {\n let inset = { x: 0, y: 0 };\n let current = element;\n while (current && current !== container) {\n if (current instanceof HTMLElement) {\n inset.x += current.offsetLeft;\n inset.y += current.offsetTop;\n current = current.offsetParent;\n }\n else if (current instanceof SVGGraphicsElement && \"getBBox\" in current) {\n const { top, left } = current.getBBox();\n inset.x += left;\n inset.y += top;\n /**\n * Assign the next parent element as the tag.\n */\n while (current && current.tagName !== \"svg\") {\n current = current.parentNode;\n }\n }\n }\n return inset;\n}\n\nexport { calcInset };\n","import { updateScrollInfo } from './info.mjs';\nimport { resolveOffsets } from './offsets/index.mjs';\n\nfunction measure(container, target = container, info) {\n /**\n * Find inset of target within scrollable container\n */\n info.x.targetOffset = 0;\n info.y.targetOffset = 0;\n if (target !== container) {\n let node = target;\n while (node && node !== container) {\n info.x.targetOffset += node.offsetLeft;\n info.y.targetOffset += node.offsetTop;\n node = node.offsetParent;\n }\n }\n info.x.targetLength =\n target === container ? target.scrollWidth : target.clientWidth;\n info.y.targetLength =\n target === container ? target.scrollHeight : target.clientHeight;\n info.x.containerLength = container.clientWidth;\n info.y.containerLength = container.clientHeight;\n}\nfunction createOnScrollHandler(element, onScroll, info, options = {}) {\n return {\n measure: () => measure(element, options.target, info),\n update: (time) => {\n updateScrollInfo(element, info, time);\n if (options.offset || options.target) {\n resolveOffsets(element, info, options);\n }\n },\n notify: () => onScroll(info),\n };\n}\n\nexport { createOnScrollHandler };\n","import { resize } from '../resize/index.mjs';\nimport { createScrollInfo } from './info.mjs';\nimport { createOnScrollHandler } from './on-scroll-handler.mjs';\nimport { frame, cancelFrame, frameData } from '../../../frameloop/frame.mjs';\n\nconst scrollListeners = new WeakMap();\nconst resizeListeners = new WeakMap();\nconst onScrollHandlers = new WeakMap();\nconst getEventTarget = (element) => element === document.documentElement ? window : element;\nfunction scrollInfo(onScroll, { container = document.documentElement, ...options } = {}) {\n let containerHandlers = onScrollHandlers.get(container);\n /**\n * Get the onScroll handlers for this container.\n * If one isn't found, create a new one.\n */\n if (!containerHandlers) {\n containerHandlers = new Set();\n onScrollHandlers.set(container, containerHandlers);\n }\n /**\n * Create a new onScroll handler for the provided callback.\n */\n const info = createScrollInfo();\n const containerHandler = createOnScrollHandler(container, onScroll, info, options);\n containerHandlers.add(containerHandler);\n /**\n * Check if there's a scroll event listener for this container.\n * If not, create one.\n */\n if (!scrollListeners.has(container)) {\n const measureAll = () => {\n for (const handler of containerHandlers)\n handler.measure();\n };\n const updateAll = () => {\n for (const handler of containerHandlers) {\n handler.update(frameData.timestamp);\n }\n };\n const notifyAll = () => {\n for (const handler of containerHandlers)\n handler.notify();\n };\n const listener = () => {\n frame.read(measureAll, false, true);\n frame.update(updateAll, false, true);\n frame.update(notifyAll, false, true);\n };\n scrollListeners.set(container, listener);\n const target = getEventTarget(container);\n window.addEventListener(\"resize\", listener, { passive: true });\n if (container !== document.documentElement) {\n resizeListeners.set(container, resize(container, listener));\n }\n target.addEventListener(\"scroll\", listener, { passive: true });\n }\n const listener = scrollListeners.get(container);\n frame.read(listener, false, true);\n return () => {\n var _a;\n cancelFrame(listener);\n /**\n * Check if we even have any handlers for this container.\n */\n const currentHandlers = onScrollHandlers.get(container);\n if (!currentHandlers)\n return;\n currentHandlers.delete(containerHandler);\n if (currentHandlers.size)\n return;\n /**\n * If no more handlers, remove the scroll listener too.\n */\n const scrollListener = scrollListeners.get(container);\n scrollListeners.delete(container);\n if (scrollListener) {\n getEventTarget(container).removeEventListener(\"scroll\", scrollListener);\n (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();\n window.removeEventListener(\"resize\", scrollListener);\n }\n };\n}\n\nexport { scrollInfo };\n","import { resizeElement } from './handle-element.mjs';\nimport { resizeWindow } from './handle-window.mjs';\n\nfunction resize(a, b) {\n return typeof a === \"function\" ? resizeWindow(a) : resizeElement(a, b);\n}\n\nexport { resize };\n","import { motionValue } from './index.mjs';\nimport { useConstant } from '../utils/use-constant.mjs';\nimport { useEffect } from 'react';\nimport { warning } from '../utils/errors.mjs';\nimport { scrollInfo } from '../render/dom/scroll/track.mjs';\nimport { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';\n\nfunction refWarning(name, ref) {\n warning(Boolean(!ref || ref.current), `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref, or setting its \\`layoutEffect: false\\` option.`);\n}\nconst createScrollMotionValues = () => ({\n scrollX: motionValue(0),\n scrollY: motionValue(0),\n scrollXProgress: motionValue(0),\n scrollYProgress: motionValue(0),\n});\nfunction useScroll({ container, target, layoutEffect = true, ...options } = {}) {\n const values = useConstant(createScrollMotionValues);\n const useLifecycleEffect = layoutEffect\n ? useIsomorphicLayoutEffect\n : useEffect;\n useLifecycleEffect(() => {\n refWarning(\"target\", target);\n refWarning(\"container\", container);\n return scrollInfo(({ x, y }) => {\n values.scrollX.set(x.current);\n values.scrollXProgress.set(x.progress);\n values.scrollY.set(y.current);\n values.scrollYProgress.set(y.progress);\n }, {\n ...options,\n container: (container === null || container === void 0 ? void 0 : container.current) || undefined,\n target: (target === null || target === void 0 ? void 0 : target.current) || undefined,\n });\n }, []);\n return values;\n}\n\nexport { useScroll };\n","import { useScroll } from 'framer-motion';\nimport { useState, useEffect, useMemo, useCallback } from 'react';\n\n// ----------------------------------------------------------------------\n\nexport function useOffSetTop(top = 0, options) {\n const { scrollY } = useScroll(options);\n\n const [value, setValue] = useState(false);\n\n const onOffSetTop = useCallback(() => {\n scrollY.on('change', (scrollHeight) => {\n if (scrollHeight > top) {\n setValue(true);\n } else {\n setValue(false);\n }\n });\n }, [scrollY, top]);\n\n useEffect(() => {\n onOffSetTop();\n }, [onOffSetTop]);\n\n const memoizedValue = useMemo(() => value, [value]);\n\n return memoizedValue;\n}\n\n// Usage\n// const offset = useOffSetTop(100);\n\n// Or\n// const offset = useOffSetTop(100, {\n// container: ref,\n// });\n","'use client';\n\nimport * as React from 'react';\nimport { getThemeProps, useThemeWithoutDefault as useTheme } from '@mui/system';\nimport useEnhancedEffect from '../utils/useEnhancedEffect';\n\n/**\n * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.\n */\n\n/**\n * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.\n */\n\n/**\n * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.\n */\n\nfunction useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {\n const [match, setMatch] = React.useState(() => {\n if (noSsr && matchMedia) {\n return matchMedia(query).matches;\n }\n if (ssrMatchMedia) {\n return ssrMatchMedia(query).matches;\n }\n\n // Once the component is mounted, we rely on the\n // event listeners to return the correct matches value.\n return defaultMatches;\n });\n useEnhancedEffect(() => {\n let active = true;\n if (!matchMedia) {\n return undefined;\n }\n const queryList = matchMedia(query);\n const updateMatch = () => {\n // Workaround Safari wrong implementation of matchMedia\n // TODO can we remove it?\n // https://github.com/mui/material-ui/pull/17315#issuecomment-528286677\n if (active) {\n setMatch(queryList.matches);\n }\n };\n updateMatch();\n // TODO: Use `addEventListener` once support for Safari < 14 is dropped\n queryList.addListener(updateMatch);\n return () => {\n active = false;\n queryList.removeListener(updateMatch);\n };\n }, [query, matchMedia]);\n return match;\n}\n\n// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814\nconst maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];\nfunction useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {\n const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);\n const getServerSnapshot = React.useMemo(() => {\n if (noSsr && matchMedia) {\n return () => matchMedia(query).matches;\n }\n if (ssrMatchMedia !== null) {\n const {\n matches\n } = ssrMatchMedia(query);\n return () => matches;\n }\n return getDefaultSnapshot;\n }, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);\n const [getSnapshot, subscribe] = React.useMemo(() => {\n if (matchMedia === null) {\n return [getDefaultSnapshot, () => () => {}];\n }\n const mediaQueryList = matchMedia(query);\n return [() => mediaQueryList.matches, notify => {\n // TODO: Use `addEventListener` once support for Safari < 14 is dropped\n mediaQueryList.addListener(notify);\n return () => {\n mediaQueryList.removeListener(notify);\n };\n }];\n }, [getDefaultSnapshot, matchMedia, query]);\n const match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n return match;\n}\nexport default function useMediaQuery(queryInput, options = {}) {\n const theme = useTheme();\n // Wait for jsdom to support the match media feature.\n // All the browsers MUI support have this built-in.\n // This defensive check is here for simplicity.\n // Most of the time, the match media logic isn't central to people tests.\n const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';\n const {\n defaultMatches = false,\n matchMedia = supportMatchMedia ? window.matchMedia : null,\n ssrMatchMedia = null,\n noSsr = false\n } = getThemeProps({\n name: 'MuiUseMediaQuery',\n props: options,\n theme\n });\n if (process.env.NODE_ENV !== 'production') {\n if (typeof queryInput === 'function' && theme === null) {\n console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\\n'));\n }\n }\n let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;\n query = query.replace(/^@media( ?)/m, '');\n\n // TODO: Drop `useMediaQueryOld` and use `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable\n const useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;\n const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useDebugValue({\n query,\n match\n });\n }\n return match;\n}","// @mui\nimport { useTheme } from '@mui/material/styles';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\n// ----------------------------------------------------------------------\n\nexport function useResponsive(query, start, end) {\n const theme = useTheme();\n\n const mediaUp = useMediaQuery(theme.breakpoints.up(start));\n\n const mediaDown = useMediaQuery(theme.breakpoints.down(start));\n\n const mediaBetween = useMediaQuery(theme.breakpoints.between(start, end));\n\n const mediaOnly = useMediaQuery(theme.breakpoints.only(start));\n\n if (query === 'up') {\n return mediaUp;\n }\n\n if (query === 'down') {\n return mediaDown;\n }\n\n if (query === 'between') {\n return mediaBetween;\n }\n\n return mediaOnly;\n}\n\n// ----------------------------------------------------------------------\n\nexport function useWidth() {\n const theme = useTheme();\n\n const keys = [...theme.breakpoints.keys].reverse();\n\n return (\n keys.reduce((output, key) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const matches = useMediaQuery(theme.breakpoints.up(key));\n\n return !output && matches ? key : output;\n }, null) || 'xs'\n );\n}\n","import { useEffect, useRef, useLayoutEffect } from 'react';\n\n// ----------------------------------------------------------------------\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport function useEventListener(eventName, handler, element, options) {\n // Create a ref that stores handler\n const savedHandler = useRef(handler);\n\n useIsomorphicLayoutEffect(() => {\n savedHandler.current = handler;\n }, [handler]);\n\n useEffect(() => {\n // Define the listening target\n const targetElement = element?.current || window;\n if (!(targetElement && targetElement.addEventListener)) {\n return;\n }\n\n // Create event listener that calls handler function stored in ref\n const eventListener = (event) => savedHandler.current(event);\n\n targetElement.addEventListener(eventName, eventListener, options);\n\n // Remove event listener on cleanup\n // eslint-disable-next-line consistent-return\n return () => {\n targetElement.removeEventListener(eventName, eventListener);\n };\n }, [eventName, element, options]);\n}\n","// @mui\nimport { alpha, styled } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\n\n// ----------------------------------------------------------------------\n\nexport const StyledLabel = styled(Box)(({ theme, ownerState }) => {\n const isLight = theme.palette.mode === 'light';\n\n const filledVariant = ownerState.variant === 'filled';\n\n const outlinedVariant = ownerState.variant === 'outlined';\n\n const softVariant = ownerState.variant === 'soft';\n\n const defaultStyle = {\n ...(ownerState.color === 'default' && {\n // FILLED\n ...(filledVariant && {\n color: isLight ? theme.palette.common.white : theme.palette.grey[800],\n backgroundColor: theme.palette.text.primary,\n }),\n // OUTLINED\n ...(outlinedVariant && {\n backgroundColor: 'transparent',\n color: theme.palette.text.primary,\n border: `2px solid ${theme.palette.text.primary}`,\n }),\n // SOFT\n ...(softVariant && {\n color: theme.palette.text.secondary,\n backgroundColor: alpha(theme.palette.grey[500], 0.16),\n }),\n }),\n };\n\n const colorStyle = {\n ...(ownerState.color !== 'default' && {\n // FILLED\n ...(filledVariant && {\n color: theme.palette[ownerState.color].contrastText,\n backgroundColor: theme.palette[ownerState.color].main,\n }),\n // OUTLINED\n ...(outlinedVariant && {\n backgroundColor: 'transparent',\n color: theme.palette[ownerState.color].main,\n border: `2px solid ${theme.palette[ownerState.color].main}`,\n }),\n // SOFT\n ...(softVariant && {\n color: theme.palette[ownerState.color][isLight ? 'dark' : 'light'],\n backgroundColor: alpha(theme.palette[ownerState.color].main, 0.16),\n }),\n }),\n };\n\n return {\n height: 24,\n minWidth: 24,\n lineHeight: 0,\n borderRadius: 6,\n cursor: 'default',\n alignItems: 'center',\n whiteSpace: 'nowrap',\n display: 'inline-flex',\n justifyContent: 'center',\n textTransform: 'capitalize',\n padding: theme.spacing(0, 0.75),\n fontSize: theme.typography.pxToRem(12),\n fontWeight: theme.typography.fontWeightBold,\n transition: theme.transitions.create('all', {\n duration: theme.transitions.duration.shorter,\n }),\n ...defaultStyle,\n ...colorStyle,\n };\n});\n","// @mui\n// import Box from '@mui/material/Box';\n// import Stack from '@mui/material/Stack';\n// import Button from '@mui/material/Button';\n// import Avatar from '@mui/material/Avatar';\n// import Typography from '@mui/material/Typography';\n// hooks\n// import { useMockedUser } from 'src/hooks/use-mocked-user';\n// routes\n// import { paths } from 'src/routes/paths';\n// locales\n// components\n// import Label from 'src/components/label';\n\n// ----------------------------------------------------------------------\n\nexport default function NavUpgrade() {\n // const { user } = useMockedUser();\n\n return (\n // eslint-disable-next-line react/jsx-no-useless-fragment\n <>>\n // \n // \n // \n // \n // \n // \n\n // \n // \n // {user?.displayName}\n // \n\n // \n // {user?.email}\n // \n // \n\n // \n // \n // \n );\n}\n","import PropTypes from 'prop-types'; // @mui\nimport Box from '@mui/material/Box';\n\n// ----------------------------------------------------------------------\n\nexport default function HeaderShadow({ sx, ...other }) {\n return (\n theme.customShadows.z8,\n ...sx,\n }}\n {...other}\n />\n );\n}\n\nHeaderShadow.propTypes = {\n sx: PropTypes.object,\n};\n","import PropTypes from 'prop-types';\nimport { m } from 'framer-motion';\n// @mui\nimport Box from '@mui/material/Box';\nimport IconButton from '@mui/material/IconButton';\nimport Badge, { badgeClasses } from '@mui/material/Badge';\n// components\nimport Iconify from 'src/components/iconify';\nimport { varHover } from 'src/components/animate';\nimport { useSettingsContext } from 'src/components/settings';\n\n// ----------------------------------------------------------------------\n\nexport default function SettingsButton({ sx }) {\n const settings = useSettingsContext();\n // console.log(settings);\n\n return (\n \n \n \n \n \n \n \n );\n // // eslint-disable-next-line react/jsx-no-useless-fragment\n // return <>>\n}\n\nSettingsButton.propTypes = {\n sx: PropTypes.object,\n};\n","// @mui\nimport { useTheme } from '@mui/material/styles';\nimport Link from '@mui/material/Link';\nimport Stack from '@mui/material/Stack';\nimport AppBar from '@mui/material/AppBar';\nimport Toolbar from '@mui/material/Toolbar';\n// theme\nimport { bgBlur } from 'src/theme/css';\n// hooks\nimport { useOffSetTop } from 'src/hooks/use-off-set-top';\n// components\nimport Logo from 'src/components/logo';\nimport { RouterLink } from 'src/routes/components';\n//\nimport { HEADER } from '../config-layout';\nimport HeaderShadow from './header-shadow';\nimport SettingsButton from './settings-button';\n\n// ----------------------------------------------------------------------\n\nexport default function HeaderSimple() {\n const theme = useTheme();\n\n const offsetTop = useOffSetTop(HEADER.H_DESKTOP);\n\n return (\n \n \n \n\n \n \n\n \n Need help?\n \n \n \n\n {offsetTop && }\n \n );\n}\n","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"autoFocus\", \"component\", \"dense\", \"divider\", \"disableGutters\", \"focusVisibleClassName\", \"role\", \"tabIndex\", \"className\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';\nimport { alpha } from '@mui/system';\nimport styled, { rootShouldForwardProp } from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport ListContext from '../List/ListContext';\nimport ButtonBase from '../ButtonBase';\nimport useEnhancedEffect from '../utils/useEnhancedEffect';\nimport useForkRef from '../utils/useForkRef';\nimport { dividerClasses } from '../Divider';\nimport { listItemIconClasses } from '../ListItemIcon';\nimport { listItemTextClasses } from '../ListItemText';\nimport menuItemClasses, { getMenuItemUtilityClass } from './menuItemClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const overridesResolver = (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, ownerState.dense && styles.dense, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];\n};\nconst useUtilityClasses = ownerState => {\n const {\n disabled,\n dense,\n divider,\n disableGutters,\n selected,\n classes\n } = ownerState;\n const slots = {\n root: ['root', dense && 'dense', disabled && 'disabled', !disableGutters && 'gutters', divider && 'divider', selected && 'selected']\n };\n const composedClasses = composeClasses(slots, getMenuItemUtilityClass, classes);\n return _extends({}, classes, composedClasses);\n};\nconst MenuItemRoot = styled(ButtonBase, {\n shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',\n name: 'MuiMenuItem',\n slot: 'Root',\n overridesResolver\n})(({\n theme,\n ownerState\n}) => _extends({}, theme.typography.body1, {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n position: 'relative',\n textDecoration: 'none',\n minHeight: 48,\n paddingTop: 6,\n paddingBottom: 6,\n boxSizing: 'border-box',\n whiteSpace: 'nowrap'\n}, !ownerState.disableGutters && {\n paddingLeft: 16,\n paddingRight: 16\n}, ownerState.divider && {\n borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,\n backgroundClip: 'padding-box'\n}, {\n '&:hover': {\n textDecoration: 'none',\n backgroundColor: (theme.vars || theme).palette.action.hover,\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n },\n [`&.${menuItemClasses.selected}`]: {\n backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),\n [`&.${menuItemClasses.focusVisible}`]: {\n backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)\n }\n },\n [`&.${menuItemClasses.selected}:hover`]: {\n backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)\n }\n },\n [`&.${menuItemClasses.focusVisible}`]: {\n backgroundColor: (theme.vars || theme).palette.action.focus\n },\n [`&.${menuItemClasses.disabled}`]: {\n opacity: (theme.vars || theme).palette.action.disabledOpacity\n },\n [`& + .${dividerClasses.root}`]: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1)\n },\n [`& + .${dividerClasses.inset}`]: {\n marginLeft: 52\n },\n [`& .${listItemTextClasses.root}`]: {\n marginTop: 0,\n marginBottom: 0\n },\n [`& .${listItemTextClasses.inset}`]: {\n paddingLeft: 36\n },\n [`& .${listItemIconClasses.root}`]: {\n minWidth: 36\n }\n}, !ownerState.dense && {\n [theme.breakpoints.up('sm')]: {\n minHeight: 'auto'\n }\n}, ownerState.dense && _extends({\n minHeight: 32,\n // https://m2.material.io/components/menus#specs > Dense\n paddingTop: 4,\n paddingBottom: 4\n}, theme.typography.body2, {\n [`& .${listItemIconClasses.root} svg`]: {\n fontSize: '1.25rem'\n }\n})));\nconst MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiMenuItem'\n });\n const {\n autoFocus = false,\n component = 'li',\n dense = false,\n divider = false,\n disableGutters = false,\n focusVisibleClassName,\n role = 'menuitem',\n tabIndex: tabIndexProp,\n className\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const context = React.useContext(ListContext);\n const childContext = React.useMemo(() => ({\n dense: dense || context.dense || false,\n disableGutters\n }), [context.dense, dense, disableGutters]);\n const menuItemRef = React.useRef(null);\n useEnhancedEffect(() => {\n if (autoFocus) {\n if (menuItemRef.current) {\n menuItemRef.current.focus();\n } else if (process.env.NODE_ENV !== 'production') {\n console.error('MUI: Unable to set focus to a MenuItem whose component has not been rendered.');\n }\n }\n }, [autoFocus]);\n const ownerState = _extends({}, props, {\n dense: childContext.dense,\n divider,\n disableGutters\n });\n const classes = useUtilityClasses(props);\n const handleRef = useForkRef(menuItemRef, ref);\n let tabIndex;\n if (!props.disabled) {\n tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;\n }\n return /*#__PURE__*/_jsx(ListContext.Provider, {\n value: childContext,\n children: /*#__PURE__*/_jsx(MenuItemRoot, _extends({\n ref: handleRef,\n role: role,\n tabIndex: tabIndex,\n component: component,\n focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),\n className: clsx(classes.root, className)\n }, other, {\n ownerState: ownerState,\n classes: classes\n }))\n });\n});\nprocess.env.NODE_ENV !== \"production\" ? MenuItem.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * If `true`, the list item is focused during the first mount.\n * Focus will also be triggered if the value changes from false to true.\n * @default false\n */\n autoFocus: PropTypes.bool,\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes.elementType,\n /**\n * If `true`, compact vertical padding designed for keyboard and mouse input is used.\n * The prop defaults to the value inherited from the parent Menu component.\n * @default false\n */\n dense: PropTypes.bool,\n /**\n * @ignore\n */\n disabled: PropTypes.bool,\n /**\n * If `true`, the left and right padding is removed.\n * @default false\n */\n disableGutters: PropTypes.bool,\n /**\n * If `true`, a 1px light border is added to the bottom of the menu item.\n * @default false\n */\n divider: PropTypes.bool,\n /**\n * This prop can help identify which element has keyboard focus.\n * The class name will be applied when the element gains the focus through keyboard interaction.\n * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).\n * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).\n * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components\n * if needed.\n */\n focusVisibleClassName: PropTypes.string,\n /**\n * @ignore\n */\n role: PropTypes /* @typescript-to-proptypes-ignore */.string,\n /**\n * If `true`, the component is selected.\n * @default false\n */\n selected: PropTypes.bool,\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n /**\n * @default 0\n */\n tabIndex: PropTypes.number\n} : void 0;\nexport default MenuItem;","// @mui\nimport { styled, alpha } from '@mui/material/styles';\n// theme\nimport { bgBlur } from 'src/theme/css';\n\n// ----------------------------------------------------------------------\n\nexport const StyledArrow = styled('span')(({ arrow, theme }) => {\n const SIZE = 14;\n\n const POSITION = -(SIZE / 2) + 0.5;\n\n const topStyle = {\n top: POSITION,\n transform: 'rotate(135deg)',\n };\n\n const bottomStyle = {\n bottom: POSITION,\n transform: 'rotate(-45deg)',\n };\n\n const leftStyle = {\n left: POSITION,\n transform: 'rotate(45deg)',\n };\n\n const rightStyle = {\n right: POSITION,\n transform: 'rotate(-135deg)',\n };\n\n return {\n width: SIZE,\n height: SIZE,\n position: 'absolute',\n borderBottomLeftRadius: SIZE / 4,\n clipPath: 'polygon(0% 0%, 100% 100%, 0% 100%)',\n border: `solid 1px ${alpha(\n theme.palette.mode === 'light' ? theme.palette.grey[500] : theme.palette.common.black,\n 0.12\n )}`,\n ...bgBlur({\n color: theme.palette.background.paper,\n }),\n // Top\n ...(arrow === 'top-left' && { ...topStyle, left: 20 }),\n ...(arrow === 'top-center' && {\n ...topStyle,\n left: 0,\n right: 0,\n margin: 'auto',\n }),\n ...(arrow === 'top-right' && { ...topStyle, right: 20 }),\n // Bottom\n ...(arrow === 'bottom-left' && { ...bottomStyle, left: 20 }),\n ...(arrow === 'bottom-center' && {\n ...bottomStyle,\n left: 0,\n right: 0,\n margin: 'auto',\n }),\n ...(arrow === 'bottom-right' && { ...bottomStyle, right: 20 }),\n // Left\n ...(arrow === 'left-top' && { ...leftStyle, top: 20 }),\n ...(arrow === 'left-center' && {\n ...leftStyle,\n top: 0,\n bottom: 0,\n margin: 'auto',\n }),\n ...(arrow === 'left-bottom' && { ...leftStyle, bottom: 20 }),\n // Right\n ...(arrow === 'right-top' && { ...rightStyle, top: 20 }),\n ...(arrow === 'right-center' && {\n ...rightStyle,\n top: 0,\n bottom: 0,\n margin: 'auto',\n }),\n ...(arrow === 'right-bottom' && { ...rightStyle, bottom: 20 }),\n };\n});\n","import PropTypes from 'prop-types'; // @mui\nimport { menuItemClasses } from '@mui/material/MenuItem';\nimport Popover from '@mui/material/Popover';\n//\nimport { getPosition } from './utils';\nimport { StyledArrow } from './styles';\n\n// ----------------------------------------------------------------------\n\nexport default function CustomPopover({\n open,\n children,\n arrow = 'top-right',\n hiddenArrow,\n sx,\n ...other\n}) {\n const { style, anchorOrigin, transformOrigin } = getPosition(arrow);\n\n return (\n \n {!hiddenArrow && }\n\n {children}\n \n );\n}\n\nCustomPopover.propTypes = {\n sx: PropTypes.object,\n open: PropTypes.object,\n children: PropTypes.node,\n hiddenArrow: PropTypes.bool,\n disabledArrow: PropTypes.bool,\n arrow: PropTypes.oneOf([\n 'top-left',\n 'top-center',\n 'top-right',\n 'bottom-left',\n 'bottom-center',\n 'bottom-right',\n 'left-top',\n 'left-center',\n 'left-bottom',\n 'right-top',\n 'right-center',\n 'right-bottom',\n ]),\n};\n","// ----------------------------------------------------------------------\n\nexport function getPosition(arrow) {\n let props;\n\n switch (arrow) {\n case 'top-left':\n props = {\n style: { ml: -0.75 },\n anchorOrigin: { vertical: 'bottom', horizontal: 'left' },\n transformOrigin: { vertical: 'top', horizontal: 'left' },\n };\n break;\n case 'top-center':\n props = {\n style: {},\n anchorOrigin: { vertical: 'bottom', horizontal: 'center' },\n transformOrigin: { vertical: 'top', horizontal: 'center' },\n };\n break;\n case 'top-right':\n props = {\n style: { ml: 0.75 },\n anchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n transformOrigin: { vertical: 'top', horizontal: 'right' },\n };\n break;\n case 'bottom-left':\n props = {\n style: { ml: -0.75 },\n anchorOrigin: { vertical: 'top', horizontal: 'left' },\n transformOrigin: { vertical: 'bottom', horizontal: 'left' },\n };\n break;\n case 'bottom-center':\n props = {\n style: {},\n anchorOrigin: { vertical: 'top', horizontal: 'center' },\n transformOrigin: { vertical: 'bottom', horizontal: 'center' },\n };\n break;\n case 'bottom-right':\n props = {\n style: { ml: 0.75 },\n anchorOrigin: { vertical: 'top', horizontal: 'right' },\n transformOrigin: { vertical: 'bottom', horizontal: 'right' },\n };\n break;\n case 'left-top':\n props = {\n style: { mt: -0.75 },\n anchorOrigin: { vertical: 'top', horizontal: 'right' },\n transformOrigin: { vertical: 'top', horizontal: 'left' },\n };\n break;\n case 'left-center':\n props = {\n anchorOrigin: { vertical: 'center', horizontal: 'right' },\n transformOrigin: { vertical: 'center', horizontal: 'left' },\n };\n break;\n case 'left-bottom':\n props = {\n style: { mt: 0.75 },\n anchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n transformOrigin: { vertical: 'bottom', horizontal: 'left' },\n };\n break;\n case 'right-top':\n props = {\n style: { mt: -0.75 },\n anchorOrigin: { vertical: 'top', horizontal: 'left' },\n transformOrigin: { vertical: 'top', horizontal: 'right' },\n };\n break;\n case 'right-center':\n props = {\n anchorOrigin: { vertical: 'center', horizontal: 'left' },\n transformOrigin: { vertical: 'center', horizontal: 'right' },\n };\n break;\n case 'right-bottom':\n props = {\n style: { mt: 0.75 },\n anchorOrigin: { vertical: 'bottom', horizontal: 'left' },\n transformOrigin: { vertical: 'bottom', horizontal: 'right' },\n };\n break;\n\n // top-right\n default:\n props = {\n style: { ml: 0.75 },\n anchorOrigin: { vertical: 'bottom', horizontal: 'right' },\n transformOrigin: { vertical: 'top', horizontal: 'right' },\n };\n }\n\n return props;\n}\n","import { m } from 'framer-motion';\n// @mui\nimport { alpha } from '@mui/material/styles';\n// import Box from '@mui/material/Box';\n// import Stack from '@mui/material/Stack';\nimport Avatar from '@mui/material/Avatar';\n// import Divider from '@mui/material/Divider';\nimport MenuItem from '@mui/material/MenuItem';\nimport IconButton from '@mui/material/IconButton';\n// import Typography from '@mui/material/Typography';\n// routes\n// import { Stack } from '@mui/material';\nimport { useRouter } from 'src/routes/hooks';\n// hooks\n// import { useMockedUser } from 'src/hooks/use-mocked-user';\n// auth\nimport { useAuthContext } from 'src/auth/hooks';\n// components\nimport { varHover } from 'src/components/animate';\nimport CustomPopover, { usePopover } from 'src/components/custom-popover';\n// import { paths } from 'src/routes/paths';\n\n// ----------------------------------------------------------------------\n\n// const OPTIONS = [\n\n// // {\n// // label: 'Profil',\n// // linkTo: paths.dashboard.profile,\n// // },\n\n// // {\n// // label: 'Şifremi Değiştir',\n// // linkTo: paths.dashboard.changePassword,\n// // },\n\n// ];\n\n// ----------------------------------------------------------------------\n\nexport default function AccountPopover() {\n const router = useRouter();\n\n // const { user } = useMockedUser();\n const { user } = useAuthContext();\n\n const { logout } = useAuthContext();\n\n const popover = usePopover();\n\n const handleLogout = async () => {\n try {\n await logout();\n popover.onClose();\n router.replace('/');\n } catch (error) {\n console.error(error);\n }\n };\n\n // const handleClickItem = (path) => {\n // popover.onClose();\n // router.push(path);\n // };\n\n // console.log(user);\n\n return (\n <>\n alpha(theme.palette.grey[500], 0.08),\n ...(popover.open && {\n background: (theme) =>\n `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,\n }),\n }}\n >\n {/* `solid 2px ${theme.palette.background.default}`,\n }}\n /> */}\n\n `solid 2px ${theme.palette.background.default}`,\n }}\n /> \n\n \n\n \n {/* \n \n {user?.NameSurname}\n \n\n */}\n\n {/* */}\n\n {/* \n {OPTIONS.map((option) => (\n \n ))}\n */}\n\n {/* */}\n\n \n \n >\n );\n}\n","import { useCallback, useState } from 'react';\n\n// ----------------------------------------------------------------------\n\nexport default function usePopover() {\n const [open, setOpen] = useState(null);\n\n const onOpen = useCallback((event) => {\n setOpen(event.currentTarget);\n }, []);\n\n const onClose = useCallback(() => {\n setOpen(null);\n }, []);\n\n return {\n open,\n onOpen,\n onClose,\n setOpen,\n };\n}\n","import PropTypes from 'prop-types'; // @mui\nimport { useTheme } from '@mui/material/styles';\nimport IconButton from '@mui/material/IconButton';\n// hooks\nimport { useResponsive } from 'src/hooks/use-responsive';\n// theme\nimport { bgBlur } from 'src/theme/css';\n// components\nimport Iconify from 'src/components/iconify';\nimport { useSettingsContext } from 'src/components/settings';\n//\nimport { NAV } from '../config-layout';\n\n// ----------------------------------------------------------------------\n\nexport default function NavToggleButton({ sx, ...other }) {\n const theme = useTheme();\n\n const settings = useSettingsContext();\n\n const lgUp = useResponsive('up', 'lg');\n\n if (!lgUp) {\n return null;\n }\n\n return (\n \n settings.onUpdate('themeLayout', settings.themeLayout === 'vertical' ? 'mini' : 'vertical')\n }\n sx={{\n p: 0.5,\n top: 32,\n position: 'fixed',\n left: NAV.W_VERTICAL - 12,\n zIndex: theme.zIndex.appBar + 1,\n border: `dashed 1px ${theme.palette.divider}`,\n ...bgBlur({ opacity: 0.48, color: theme.palette.background.default }),\n '&:hover': {\n bgcolor: 'background.default',\n },\n ...sx,\n }}\n {...other}\n >\n \n \n );\n}\n\nNavToggleButton.propTypes = {\n sx: PropTypes.object,\n};\n","import PropTypes from 'prop-types';\n// @mui\nimport Stack from '@mui/material/Stack';\nimport Container from '@mui/material/Container';\n//\nimport { HeaderSimple as Header } from '../_common';\n\n// ----------------------------------------------------------------------\n\nexport default function CompactLayout({ children }) {\n return (\n <>\n \n\n \n \n {children}\n \n \n >\n );\n}\n\nCompactLayout.propTypes = {\n children: PropTypes.node,\n};\n","// ----------------------------------------------------------------------\n\nexport const HEADER = {\n H_MOBILE: 64,\n H_DESKTOP: 80,\n H_DESKTOP_OFFSET: 80,\n};\n\nexport const NAV = {\n W_VERTICAL: 280,\n W_MINI: 88,\n};\n","import { useMemo } from 'react';\n// routes\nimport { paths } from 'src/routes/paths';\n// components\n// import SvgColor from 'src/components/svg-color';\n\n// ----------------------------------------------------------------------\n\n// const icon = (name) => (\n// \n// // OR\n// // \n// // https://icon-sets.iconify.design/solar/\n// // https://www.streamlinehq.com/icons\n// );\n\n// const ICONS = {\n// home: icon('home'),\n// games: icon('games'),\n// players: icon('players'),\n// branches: icon('branches'),\n// categories: icon('categories'),\n// news: icon('news'),\n// job: icon('ic_job'),\n// blog: icon('ic_blog'),\n// chat: icon('ic_chat'),\n// mail: icon('ic_mail'),\n// user: icon('ic_user'),\n// file: icon('ic_file'),\n// lock: icon('ic_lock'),\n// tour: icon('ic_tour'),\n// order: icon('ic_order'),\n// label: icon('ic_label'),\n// blank: icon('ic_blank'),\n// kanban: icon('ic_kanban'),\n// folder: icon('ic_folder'),\n// banking: icon('ic_banking'),\n// booking: icon('ic_booking'),\n// invoice: icon('ic_invoice'),\n// product: icon('ic_product'),\n// calendar: icon('ic_calendar'),\n// disabled: icon('ic_disabled'),\n// external: icon('ic_external'),\n// menuItem: icon('ic_menu_item'),\n// ecommerce: icon('ic_ecommerce'),\n// analytics: icon('ic_analytics'),\n// dashboard: icon('ic_dashboard'),\n// };\n\n// ----------------------------------------------------------------------\n\nexport function useNavData() {\n const data = useMemo(\n () => [\n // OVERVIEW\n // ----------------------------------------------------------------------\n {\n subheader: 'General',\n items: [\n { title: 'Etkinlikler', path: paths.dashboard.root },\n { title: 'Analizler', path: paths.dashboard.analyses },\n\n // {\n // title: 'Liderlik Tablosu',\n // path: paths.dashboard.leaderboard,\n // },\n ],\n },\n\n // {\n // subheader: 'Kullanıcılar',\n // items: [\n // {\n // title: 'Kullanıcılar',\n // path: paths.dashboard.members.root,\n // icon: ICONS.user,\n // children: [\n // { title: 'Kullanıcılar', path: paths.dashboard.members.root},\n // ],\n // },\n // ],\n // },\n\n // MANAGEMENT\n // ----------------------------------------------------------------------\n // {\n // subheader: 'management',\n // items: [\n // {\n // title: 'user',\n // path: paths.dashboard.group.root,\n // icon: ICONS.user,\n // children: [\n // { title: 'four', path: paths.dashboard.group.root },\n // { title: 'five', path: paths.dashboard.group.five },\n // { title: 'six', path: paths.dashboard.group.six },\n // ],\n // },\n // ],\n // },\n ],\n []\n );\n\n return data;\n}\n","import PropTypes from 'prop-types';\nimport { forwardRef } from 'react';\nimport { Link } from 'react-router-dom';\n\n// ----------------------------------------------------------------------\n\nconst RouterLink = forwardRef(({ href, ...other }, ref) => );\n\nRouterLink.propTypes = {\n href: PropTypes.string,\n};\n\nexport default RouterLink;\n","import { useMemo } from 'react';\nimport { useNavigate } from 'react-router-dom';\n\n// ----------------------------------------------------------------------\n\nexport function useRouter() {\n const navigate = useNavigate();\n\n const router = useMemo(\n () => ({\n back: () => navigate(-1),\n forward: () => navigate(1),\n reload: () => window.location.reload(),\n push: (href) => navigate(href),\n replace: (href) => navigate(href, { replace: true }),\n }),\n [navigate]\n );\n\n return router;\n}\n","import { useMemo } from 'react';\nimport { useLocation } from 'react-router-dom';\n\n// ----------------------------------------------------------------------\n\nexport function usePathname() {\n const { pathname } = useLocation();\n\n return useMemo(() => pathname, [pathname]);\n}\n","import { useMemo } from 'react';\nimport { useSearchParams as _useSearchParams } from 'react-router-dom';\n\n// ----------------------------------------------------------------------\n\nexport function useSearchParams() {\n const [searchParams] = _useSearchParams();\n\n return useMemo(() => searchParams, [searchParams]);\n}\n","// ----------------------------------------------------------------------\n\nconst ROOTS = {\n AUTH: '/auth',\n DASHBOARD: '/dashboard',\n};\n\n// ----------------------------------------------------------------------\n\nexport const paths = {\n minimalUI: 'https://mui.com/store/items/minimal-dashboard/',\n // AUTH\n auth: {\n jwt: {\n login: `${ROOTS.AUTH}/jwt/login`,\n register: `${ROOTS.AUTH}/jwt/register`,\n },\n },\n // DASHBOARD\n dashboard: {\n root: ROOTS.DASHBOARD,\n home: `${ROOTS.DASHBOARD}/dashboard`,\n analyses: `${ROOTS.DASHBOARD}/analyses`,\n },\n};\n","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getCheckboxUtilityClass(slot) {\n return generateUtilityClass('MuiCheckbox', slot);\n}\nconst checkboxClasses = generateUtilityClasses('MuiCheckbox', ['root', 'checked', 'disabled', 'indeterminate', 'colorPrimary', 'colorSecondary', 'sizeSmall', 'sizeMedium']);\nexport default checkboxClasses;","// @mui\nimport { alpha } from '@mui/material/styles';\nimport { dividerClasses } from '@mui/material/Divider';\nimport { checkboxClasses } from '@mui/material/Checkbox';\nimport { menuItemClasses } from '@mui/material/MenuItem';\nimport { autocompleteClasses } from '@mui/material/Autocomplete';\n\n// ----------------------------------------------------------------------\n\nexport const paper = ({ theme, bgcolor, dropdown }) => ({\n ...bgBlur({\n blur: 20,\n opacity: 0.9,\n color: theme.palette.background.paper,\n ...(!!bgcolor && {\n color: bgcolor,\n }),\n }),\n backgroundImage: 'url(/assets/cyan-blur.png), url(/assets/red-blur.png)',\n backgroundRepeat: 'no-repeat, no-repeat',\n backgroundPosition: 'top right, left bottom',\n backgroundSize: '50%, 50%',\n ...(theme.direction === 'rtl' && {\n backgroundPosition: 'top left, right bottom',\n }),\n ...(dropdown && {\n padding: theme.spacing(0.5),\n boxShadow: theme.customShadows.dropdown,\n borderRadius: theme.shape.borderRadius * 1.25,\n }),\n});\n\n// ----------------------------------------------------------------------\n\nexport const menuItem = (theme) => ({\n ...theme.typography.body2,\n padding: theme.spacing(0.75, 1),\n borderRadius: theme.shape.borderRadius * 0.75,\n '&:not(:last-of-type)': {\n marginBottom: 4,\n },\n [`&.${menuItemClasses.selected}`]: {\n fontWeight: theme.typography.fontWeightSemiBold,\n backgroundColor: theme.palette.action.selected,\n '&:hover': {\n backgroundColor: theme.palette.action.hover,\n },\n },\n [`& .${checkboxClasses.root}`]: {\n padding: theme.spacing(0.5),\n marginLeft: theme.spacing(-0.5),\n marginRight: theme.spacing(0.5),\n },\n [`&.${autocompleteClasses.option}[aria-selected=\"true\"]`]: {\n backgroundColor: theme.palette.action.selected,\n '&:hover': {\n backgroundColor: theme.palette.action.hover,\n },\n },\n [`&+.${dividerClasses.root}`]: {\n margin: theme.spacing(0.5, 0),\n },\n});\n\n// ----------------------------------------------------------------------\n\nexport function bgBlur(props) {\n const color = props?.color || '#000000';\n const blur = props?.blur || 6;\n const opacity = props?.opacity || 0.8;\n const imgUrl = props?.imgUrl;\n\n if (imgUrl) {\n return {\n position: 'relative',\n backgroundImage: `url(${imgUrl})`,\n '&:before': {\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: 9,\n content: '\"\"',\n width: '100%',\n height: '100%',\n backdropFilter: `blur(${blur}px)`,\n WebkitBackdropFilter: `blur(${blur}px)`,\n backgroundColor: alpha(color, opacity),\n },\n };\n }\n\n return {\n backdropFilter: `blur(${blur}px)`,\n WebkitBackdropFilter: `blur(${blur}px)`,\n backgroundColor: alpha(color, opacity),\n };\n}\n\n// ----------------------------------------------------------------------\n\nexport function bgGradient(props) {\n const direction = props?.direction || 'to bottom';\n const startColor = props?.startColor;\n const endColor = props?.endColor;\n const imgUrl = props?.imgUrl;\n const color = props?.color;\n\n if (imgUrl) {\n return {\n background: `linear-gradient(${direction}, ${startColor || color}, ${\n endColor || color\n }), url(${imgUrl})`,\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'center center',\n };\n }\n\n return {\n background: `linear-gradient(${direction}, ${startColor}, ${endColor})`,\n };\n}\n\n// ----------------------------------------------------------------------\n\nexport function textGradient(value) {\n return {\n background: `-webkit-linear-gradient(${value})`,\n WebkitBackgroundClip: 'text',\n WebkitTextFillColor: 'transparent',\n };\n}\n\n// ----------------------------------------------------------------------\n\nexport const hideScroll = {\n x: {\n msOverflowStyle: 'none',\n scrollbarWidth: 'none',\n overflowX: 'scroll',\n '&::-webkit-scrollbar': {\n display: 'none',\n },\n },\n y: {\n msOverflowStyle: 'none',\n scrollbarWidth: 'none',\n overflowY: 'scroll',\n '&::-webkit-scrollbar': {\n display: 'none',\n },\n },\n};\n","// @mui\nimport { alpha } from '@mui/material/styles';\n// theme\nimport { palette as themePalette } from 'src/theme/palette';\n\n// ----------------------------------------------------------------------\n\nexport function presets(presetsColor) {\n const primary = primaryPresets.find((i) => i.name === presetsColor);\n\n const theme = {\n palette: {\n primary,\n },\n customShadows: {\n primary: `0 8px 16px 0 ${alpha(`${primary?.main}`, 0.24)}`,\n },\n };\n\n return theme;\n}\n\n// ----------------------------------------------------------------------\n\nconst palette = themePalette('light');\n\nexport const primaryPresets = [\n // DEFAULT\n {\n name: 'default',\n ...palette.primary,\n },\n // CYAN\n {\n name: 'cyan',\n lighter: '#CCF4FE',\n light: '#68CDF9',\n main: '#078DEE',\n dark: '#0351AB',\n darker: '#012972',\n contrastText: '#FFFFFF',\n },\n // PURPLE\n {\n name: 'purple',\n lighter: '#EBD6FD',\n light: '#B985F4',\n main: '#7635dc',\n dark: '#431A9E',\n darker: '#200A69',\n contrastText: '#FFFFFF',\n },\n // BLUE\n {\n name: 'blue',\n lighter: '#D1E9FC',\n light: '#76B0F1',\n main: '#2065D1',\n dark: '#103996',\n darker: '#061B64',\n contrastText: '#FFFFFF',\n },\n // ORANGE\n {\n name: 'orange',\n lighter: '#FEF4D4',\n light: '#FED680',\n main: '#fda92d',\n dark: '#B66816',\n darker: '#793908',\n contrastText: palette.grey[800],\n },\n // RED\n {\n name: 'red',\n lighter: '#FFE3D5',\n light: '#FFC1AC',\n main: '#FF3030',\n dark: '#B71833',\n darker: '#7A0930',\n contrastText: '#FFFFFF',\n },\n];\n","import { alpha } from '@mui/material/styles';\n\n// ----------------------------------------------------------------------\n\n// SETUP COLORS\n\nconst GREY = {\n 0: '#FFFFFF',\n 100: '#F9FAFB',\n 200: '#F4F6F8',\n 300: '#DFE3E8',\n 400: '#C4CDD5',\n 500: '#919EAB',\n 600: '#637381',\n 700: '#454F5B',\n 800: '#212B36',\n 900: '#161C24',\n};\n\nconst PRIMARY = {\n lighter: '#C8FAD6',\n light: '#5BE49B',\n main: '#00A76F',\n dark: '#007867',\n darker: '#004B50',\n contrastText: '#FFFFFF',\n};\n\nconst SECONDARY = {\n lighter: '#EFD6FF',\n light: '#C684FF',\n main: '#8E33FF',\n dark: '#5119B7',\n darker: '#27097A',\n contrastText: '#FFFFFF',\n};\n\nconst INFO = {\n lighter: '#CAFDF5',\n light: '#61F3F3',\n main: '#00B8D9',\n dark: '#006C9C',\n darker: '#003768',\n contrastText: '#FFFFFF',\n};\n\nconst SUCCESS = {\n 500: \"linear-gradient(135deg, #5BE584 0%, #00AB55 100%)\",\n lighter: '#D3FCD2',\n light: '#77ED8B',\n main: '#22C55E',\n dark: '#118D57',\n darker: '#065E49',\n contrastText: '#ffffff',\n};\n\nconst WARNING = {\n lighter: '#FFF5CC',\n light: '#FFD666',\n main: '#FFAB00',\n dark: '#B76E00',\n darker: '#7A4100',\n contrastText: GREY[800],\n};\n\nconst ERROR = {\n lighter: '#FFE9D5',\n light: '#FFAC82',\n main: '#FF5630',\n dark: '#B71D18',\n darker: '#7A0916',\n contrastText: '#FFFFFF',\n};\n\nconst COMMON = {\n common: {\n black: '#000000',\n white: '#FFFFFF',\n },\n primary: PRIMARY,\n secondary: SECONDARY,\n info: INFO,\n success: SUCCESS,\n warning: WARNING,\n error: ERROR,\n grey: GREY,\n divider: alpha(GREY[500], 0.2),\n action: {\n hover: alpha(GREY[500], 0.08),\n selected: alpha(GREY[500], 0.16),\n disabled: alpha(GREY[500], 0.8),\n disabledBackground: alpha(GREY[500], 0.24),\n focus: alpha(GREY[500], 0.24),\n hoverOpacity: 0.08,\n disabledOpacity: 0.48,\n },\n};\n\nexport function palette(mode) {\n const light = {\n ...COMMON,\n mode: 'light',\n text: {\n primary: GREY[800],\n secondary: GREY[600],\n disabled: GREY[500],\n },\n background: {\n paper: '#FFFFFF',\n default: '#FFFFFF',\n neutral: GREY[200],\n },\n action: {\n ...COMMON.action,\n active: GREY[600],\n },\n };\n\n const dark = {\n ...COMMON,\n mode: 'dark',\n text: {\n primary: '#FFFFFF',\n secondary: GREY[500],\n disabled: GREY[600],\n },\n background: {\n paper: GREY[800],\n default: GREY[900],\n neutral: alpha(GREY[500], 0.12),\n },\n action: {\n ...COMMON.action,\n active: GREY[500],\n },\n };\n\n return mode === 'light' ? light : dark;\n}\n","import axios from 'axios';\n// config\nimport { HOST_API } from 'src/config-global';\n\n// ----------------------------------------------------------------------\n\nconst axiosInstance = axios.create({ baseURL: HOST_API });\n\naxiosInstance.interceptors.response.use(\n (res) => res,\n (error) => Promise.reject((error.response && error.response.data) || 'Something went wrong')\n);\n\nexport default axiosInstance;\n\n// ----------------------------------------------------------------------\n\nexport const fetcher = async (args) => {\n const [url, config] = Array.isArray(args) ? args : [args];\n\n const res = await axiosInstance.get(url, { ...config });\n\n return res.data;\n};\n\n","// ----------------------------------------------------------------------\n\nexport function localStorageAvailable() {\n try {\n const key = '__some_random_key_you_are_not_going_to_use__';\n window.localStorage.setItem(key, key);\n window.localStorage.removeItem(key);\n return true;\n } catch (error) {\n return false;\n }\n}\n\nexport function localStorageGetItem(key, defaultValue = '') {\n const storageAvailable = localStorageAvailable();\n\n let value;\n\n if (storageAvailable) {\n value = localStorage.getItem(key) || defaultValue;\n }\n\n return value;\n}\n","/*\n\nBased off glamor's StyleSheet, thanks Sunil ❤️\n\nhigh performance StyleSheet for css-in-js systems\n\n- uses multiple style tags behind the scenes for millions of rules\n- uses `insertRule` for appending in production for *much* faster performance\n\n// usage\n\nimport { StyleSheet } from '@emotion/sheet'\n\nlet styleSheet = new StyleSheet({ key: '', container: document.head })\n\nstyleSheet.insert('#box { border: 1px solid red; }')\n- appends a css rule into the stylesheet\n\nstyleSheet.flush()\n- empties the stylesheet of all its contents\n\n*/\n// $FlowFixMe\nfunction sheetForTag(tag) {\n if (tag.sheet) {\n // $FlowFixMe\n return tag.sheet;\n } // this weirdness brought to you by firefox\n\n /* istanbul ignore next */\n\n\n for (var i = 0; i < document.styleSheets.length; i++) {\n if (document.styleSheets[i].ownerNode === tag) {\n // $FlowFixMe\n return document.styleSheets[i];\n }\n }\n}\n\nfunction createStyleElement(options) {\n var tag = document.createElement('style');\n tag.setAttribute('data-emotion', options.key);\n\n if (options.nonce !== undefined) {\n tag.setAttribute('nonce', options.nonce);\n }\n\n tag.appendChild(document.createTextNode(''));\n tag.setAttribute('data-s', '');\n return tag;\n}\n\nvar StyleSheet = /*#__PURE__*/function () {\n // Using Node instead of HTMLElement since container may be a ShadowRoot\n function StyleSheet(options) {\n var _this = this;\n\n this._insertTag = function (tag) {\n var before;\n\n if (_this.tags.length === 0) {\n if (_this.insertionPoint) {\n before = _this.insertionPoint.nextSibling;\n } else if (_this.prepend) {\n before = _this.container.firstChild;\n } else {\n before = _this.before;\n }\n } else {\n before = _this.tags[_this.tags.length - 1].nextSibling;\n }\n\n _this.container.insertBefore(tag, before);\n\n _this.tags.push(tag);\n };\n\n this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;\n this.tags = [];\n this.ctr = 0;\n this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets\n\n this.key = options.key;\n this.container = options.container;\n this.prepend = options.prepend;\n this.insertionPoint = options.insertionPoint;\n this.before = null;\n }\n\n var _proto = StyleSheet.prototype;\n\n _proto.hydrate = function hydrate(nodes) {\n nodes.forEach(this._insertTag);\n };\n\n _proto.insert = function insert(rule) {\n // the max length is how many rules we have per style tag, it's 65000 in speedy mode\n // it's 1 in dev because we insert source maps that map a single rule to a location\n // and you can only have one source map per style tag\n if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {\n this._insertTag(createStyleElement(this));\n }\n\n var tag = this.tags[this.tags.length - 1];\n\n if (process.env.NODE_ENV !== 'production') {\n var isImportRule = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;\n\n if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {\n // this would only cause problem in speedy mode\n // but we don't want enabling speedy to affect the observable behavior\n // so we report this error at all times\n console.error(\"You're attempting to insert the following rule:\\n\" + rule + '\\n\\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.');\n }\n this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule;\n }\n\n if (this.isSpeedy) {\n var sheet = sheetForTag(tag);\n\n try {\n // this is the ultrafast version, works across browsers\n // the big drawback is that the css won't be editable in devtools\n sheet.insertRule(rule, sheet.cssRules.length);\n } catch (e) {\n if (process.env.NODE_ENV !== 'production' && !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear|-ms-expand|-ms-reveal){/.test(rule)) {\n console.error(\"There was a problem inserting the following rule: \\\"\" + rule + \"\\\"\", e);\n }\n }\n } else {\n tag.appendChild(document.createTextNode(rule));\n }\n\n this.ctr++;\n };\n\n _proto.flush = function flush() {\n // $FlowFixMe\n this.tags.forEach(function (tag) {\n return tag.parentNode && tag.parentNode.removeChild(tag);\n });\n this.tags = [];\n this.ctr = 0;\n\n if (process.env.NODE_ENV !== 'production') {\n this._alreadyInsertedOrderInsensitiveRule = false;\n }\n };\n\n return StyleSheet;\n}();\n\nexport { StyleSheet };\n","/**\n * @param {number}\n * @return {number}\n */\nexport var abs = Math.abs\n\n/**\n * @param {number}\n * @return {string}\n */\nexport var from = String.fromCharCode\n\n/**\n * @param {object}\n * @return {object}\n */\nexport var assign = Object.assign\n\n/**\n * @param {string} value\n * @param {number} length\n * @return {number}\n */\nexport function hash (value, length) {\n\treturn charat(value, 0) ^ 45 ? (((((((length << 2) ^ charat(value, 0)) << 2) ^ charat(value, 1)) << 2) ^ charat(value, 2)) << 2) ^ charat(value, 3) : 0\n}\n\n/**\n * @param {string} value\n * @return {string}\n */\nexport function trim (value) {\n\treturn value.trim()\n}\n\n/**\n * @param {string} value\n * @param {RegExp} pattern\n * @return {string?}\n */\nexport function match (value, pattern) {\n\treturn (value = pattern.exec(value)) ? value[0] : value\n}\n\n/**\n * @param {string} value\n * @param {(string|RegExp)} pattern\n * @param {string} replacement\n * @return {string}\n */\nexport function replace (value, pattern, replacement) {\n\treturn value.replace(pattern, replacement)\n}\n\n/**\n * @param {string} value\n * @param {string} search\n * @return {number}\n */\nexport function indexof (value, search) {\n\treturn value.indexOf(search)\n}\n\n/**\n * @param {string} value\n * @param {number} index\n * @return {number}\n */\nexport function charat (value, index) {\n\treturn value.charCodeAt(index) | 0\n}\n\n/**\n * @param {string} value\n * @param {number} begin\n * @param {number} end\n * @return {string}\n */\nexport function substr (value, begin, end) {\n\treturn value.slice(begin, end)\n}\n\n/**\n * @param {string} value\n * @return {number}\n */\nexport function strlen (value) {\n\treturn value.length\n}\n\n/**\n * @param {any[]} value\n * @return {number}\n */\nexport function sizeof (value) {\n\treturn value.length\n}\n\n/**\n * @param {any} value\n * @param {any[]} array\n * @return {any}\n */\nexport function append (value, array) {\n\treturn array.push(value), value\n}\n\n/**\n * @param {string[]} array\n * @param {function} callback\n * @return {string}\n */\nexport function combine (array, callback) {\n\treturn array.map(callback).join('')\n}\n","import {from, trim, charat, strlen, substr, append, assign} from './Utility.js'\n\nexport var line = 1\nexport var column = 1\nexport var length = 0\nexport var position = 0\nexport var character = 0\nexport var characters = ''\n\n/**\n * @param {string} value\n * @param {object | null} root\n * @param {object | null} parent\n * @param {string} type\n * @param {string[] | string} props\n * @param {object[] | string} children\n * @param {number} length\n */\nexport function node (value, root, parent, type, props, children, length) {\n\treturn {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''}\n}\n\n/**\n * @param {object} root\n * @param {object} props\n * @return {object}\n */\nexport function copy (root, props) {\n\treturn assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props)\n}\n\n/**\n * @return {number}\n */\nexport function char () {\n\treturn character\n}\n\n/**\n * @return {number}\n */\nexport function prev () {\n\tcharacter = position > 0 ? charat(characters, --position) : 0\n\n\tif (column--, character === 10)\n\t\tcolumn = 1, line--\n\n\treturn character\n}\n\n/**\n * @return {number}\n */\nexport function next () {\n\tcharacter = position < length ? charat(characters, position++) : 0\n\n\tif (column++, character === 10)\n\t\tcolumn = 1, line++\n\n\treturn character\n}\n\n/**\n * @return {number}\n */\nexport function peek () {\n\treturn charat(characters, position)\n}\n\n/**\n * @return {number}\n */\nexport function caret () {\n\treturn position\n}\n\n/**\n * @param {number} begin\n * @param {number} end\n * @return {string}\n */\nexport function slice (begin, end) {\n\treturn substr(characters, begin, end)\n}\n\n/**\n * @param {number} type\n * @return {number}\n */\nexport function token (type) {\n\tswitch (type) {\n\t\t// \\0 \\t \\n \\r \\s whitespace token\n\t\tcase 0: case 9: case 10: case 13: case 32:\n\t\t\treturn 5\n\t\t// ! + , / > @ ~ isolate token\n\t\tcase 33: case 43: case 44: case 47: case 62: case 64: case 126:\n\t\t// ; { } breakpoint token\n\t\tcase 59: case 123: case 125:\n\t\t\treturn 4\n\t\t// : accompanied token\n\t\tcase 58:\n\t\t\treturn 3\n\t\t// \" ' ( [ opening delimit token\n\t\tcase 34: case 39: case 40: case 91:\n\t\t\treturn 2\n\t\t// ) ] closing delimit token\n\t\tcase 41: case 93:\n\t\t\treturn 1\n\t}\n\n\treturn 0\n}\n\n/**\n * @param {string} value\n * @return {any[]}\n */\nexport function alloc (value) {\n\treturn line = column = 1, length = strlen(characters = value), position = 0, []\n}\n\n/**\n * @param {any} value\n * @return {any}\n */\nexport function dealloc (value) {\n\treturn characters = '', value\n}\n\n/**\n * @param {number} type\n * @return {string}\n */\nexport function delimit (type) {\n\treturn trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))\n}\n\n/**\n * @param {string} value\n * @return {string[]}\n */\nexport function tokenize (value) {\n\treturn dealloc(tokenizer(alloc(value)))\n}\n\n/**\n * @param {number} type\n * @return {string}\n */\nexport function whitespace (type) {\n\twhile (character = peek())\n\t\tif (character < 33)\n\t\t\tnext()\n\t\telse\n\t\t\tbreak\n\n\treturn token(type) > 2 || token(character) > 3 ? '' : ' '\n}\n\n/**\n * @param {string[]} children\n * @return {string[]}\n */\nexport function tokenizer (children) {\n\twhile (next())\n\t\tswitch (token(character)) {\n\t\t\tcase 0: append(identifier(position - 1), children)\n\t\t\t\tbreak\n\t\t\tcase 2: append(delimit(character), children)\n\t\t\t\tbreak\n\t\t\tdefault: append(from(character), children)\n\t\t}\n\n\treturn children\n}\n\n/**\n * @param {number} index\n * @param {number} count\n * @return {string}\n */\nexport function escaping (index, count) {\n\twhile (--count && next())\n\t\t// not 0-9 A-F a-f\n\t\tif (character < 48 || character > 102 || (character > 57 && character < 65) || (character > 70 && character < 97))\n\t\t\tbreak\n\n\treturn slice(index, caret() + (count < 6 && peek() == 32 && next() == 32))\n}\n\n/**\n * @param {number} type\n * @return {number}\n */\nexport function delimiter (type) {\n\twhile (next())\n\t\tswitch (character) {\n\t\t\t// ] ) \" '\n\t\t\tcase type:\n\t\t\t\treturn position\n\t\t\t// \" '\n\t\t\tcase 34: case 39:\n\t\t\t\tif (type !== 34 && type !== 39)\n\t\t\t\t\tdelimiter(character)\n\t\t\t\tbreak\n\t\t\t// (\n\t\t\tcase 40:\n\t\t\t\tif (type === 41)\n\t\t\t\t\tdelimiter(type)\n\t\t\t\tbreak\n\t\t\t// \\\n\t\t\tcase 92:\n\t\t\t\tnext()\n\t\t\t\tbreak\n\t\t}\n\n\treturn position\n}\n\n/**\n * @param {number} type\n * @param {number} index\n * @return {number}\n */\nexport function commenter (type, index) {\n\twhile (next())\n\t\t// //\n\t\tif (type + character === 47 + 10)\n\t\t\tbreak\n\t\t// /*\n\t\telse if (type + character === 42 + 42 && peek() === 47)\n\t\t\tbreak\n\n\treturn '/*' + slice(index, position - 1) + '*' + from(type === 47 ? type : next())\n}\n\n/**\n * @param {number} index\n * @return {string}\n */\nexport function identifier (index) {\n\twhile (!token(peek()))\n\t\tnext()\n\n\treturn slice(index, position)\n}\n","export var MS = '-ms-'\nexport var MOZ = '-moz-'\nexport var WEBKIT = '-webkit-'\n\nexport var COMMENT = 'comm'\nexport var RULESET = 'rule'\nexport var DECLARATION = 'decl'\n\nexport var PAGE = '@page'\nexport var MEDIA = '@media'\nexport var IMPORT = '@import'\nexport var CHARSET = '@charset'\nexport var VIEWPORT = '@viewport'\nexport var SUPPORTS = '@supports'\nexport var DOCUMENT = '@document'\nexport var NAMESPACE = '@namespace'\nexport var KEYFRAMES = '@keyframes'\nexport var FONT_FACE = '@font-face'\nexport var COUNTER_STYLE = '@counter-style'\nexport var FONT_FEATURE_VALUES = '@font-feature-values'\nexport var LAYER = '@layer'\n","import {IMPORT, LAYER, COMMENT, RULESET, DECLARATION, KEYFRAMES} from './Enum.js'\nimport {strlen, sizeof} from './Utility.js'\n\n/**\n * @param {object[]} children\n * @param {function} callback\n * @return {string}\n */\nexport function serialize (children, callback) {\n\tvar output = ''\n\tvar length = sizeof(children)\n\n\tfor (var i = 0; i < length; i++)\n\t\toutput += callback(children[i], i, children, callback) || ''\n\n\treturn output\n}\n\n/**\n * @param {object} element\n * @param {number} index\n * @param {object[]} children\n * @param {function} callback\n * @return {string}\n */\nexport function stringify (element, index, children, callback) {\n\tswitch (element.type) {\n\t\tcase LAYER: if (element.children.length) break\n\t\tcase IMPORT: case DECLARATION: return element.return = element.return || element.value\n\t\tcase COMMENT: return ''\n\t\tcase KEYFRAMES: return element.return = element.value + '{' + serialize(element.children, callback) + '}'\n\t\tcase RULESET: element.value = element.props.join(',')\n\t}\n\n\treturn strlen(children = serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : ''\n}\n","import {COMMENT, RULESET, DECLARATION} from './Enum.js'\nimport {abs, charat, trim, from, sizeof, strlen, substr, append, replace, indexof} from './Utility.js'\nimport {node, char, prev, next, peek, caret, alloc, dealloc, delimit, whitespace, escaping, identifier, commenter} from './Tokenizer.js'\n\n/**\n * @param {string} value\n * @return {object[]}\n */\nexport function compile (value) {\n\treturn dealloc(parse('', null, null, null, [''], value = alloc(value), 0, [0], value))\n}\n\n/**\n * @param {string} value\n * @param {object} root\n * @param {object?} parent\n * @param {string[]} rule\n * @param {string[]} rules\n * @param {string[]} rulesets\n * @param {number[]} pseudo\n * @param {number[]} points\n * @param {string[]} declarations\n * @return {object}\n */\nexport function parse (value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {\n\tvar index = 0\n\tvar offset = 0\n\tvar length = pseudo\n\tvar atrule = 0\n\tvar property = 0\n\tvar previous = 0\n\tvar variable = 1\n\tvar scanning = 1\n\tvar ampersand = 1\n\tvar character = 0\n\tvar type = ''\n\tvar props = rules\n\tvar children = rulesets\n\tvar reference = rule\n\tvar characters = type\n\n\twhile (scanning)\n\t\tswitch (previous = character, character = next()) {\n\t\t\t// (\n\t\t\tcase 40:\n\t\t\t\tif (previous != 108 && charat(characters, length - 1) == 58) {\n\t\t\t\t\tif (indexof(characters += replace(delimit(character), '&', '&\\f'), '&\\f') != -1)\n\t\t\t\t\t\tampersand = -1\n\t\t\t\t\tbreak\n\t\t\t\t}\n\t\t\t// \" ' [\n\t\t\tcase 34: case 39: case 91:\n\t\t\t\tcharacters += delimit(character)\n\t\t\t\tbreak\n\t\t\t// \\t \\n \\r \\s\n\t\t\tcase 9: case 10: case 13: case 32:\n\t\t\t\tcharacters += whitespace(previous)\n\t\t\t\tbreak\n\t\t\t// \\\n\t\t\tcase 92:\n\t\t\t\tcharacters += escaping(caret() - 1, 7)\n\t\t\t\tcontinue\n\t\t\t// /\n\t\t\tcase 47:\n\t\t\t\tswitch (peek()) {\n\t\t\t\t\tcase 42: case 47:\n\t\t\t\t\t\tappend(comment(commenter(next(), caret()), root, parent), declarations)\n\t\t\t\t\t\tbreak\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tcharacters += '/'\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t// {\n\t\t\tcase 123 * variable:\n\t\t\t\tpoints[index++] = strlen(characters) * ampersand\n\t\t\t// } ; \\0\n\t\t\tcase 125 * variable: case 59: case 0:\n\t\t\t\tswitch (character) {\n\t\t\t\t\t// \\0 }\n\t\t\t\t\tcase 0: case 125: scanning = 0\n\t\t\t\t\t// ;\n\t\t\t\t\tcase 59 + offset: if (ampersand == -1) characters = replace(characters, /\\f/g, '')\n\t\t\t\t\t\tif (property > 0 && (strlen(characters) - length))\n\t\t\t\t\t\t\tappend(property > 32 ? declaration(characters + ';', rule, parent, length - 1) : declaration(replace(characters, ' ', '') + ';', rule, parent, length - 2), declarations)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// @ ;\n\t\t\t\t\tcase 59: characters += ';'\n\t\t\t\t\t// { rule/at-rule\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tappend(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), rulesets)\n\n\t\t\t\t\t\tif (character === 123)\n\t\t\t\t\t\t\tif (offset === 0)\n\t\t\t\t\t\t\t\tparse(characters, root, reference, reference, props, rulesets, length, points, children)\n\t\t\t\t\t\t\telse\n\t\t\t\t\t\t\t\tswitch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {\n\t\t\t\t\t\t\t\t\t// d l m s\n\t\t\t\t\t\t\t\t\tcase 100: case 108: case 109: case 115:\n\t\t\t\t\t\t\t\t\t\tparse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children)\n\t\t\t\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\t\tparse(characters, reference, reference, reference, [''], children, 0, points, children)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tindex = offset = property = 0, variable = ampersand = 1, type = characters = '', length = pseudo\n\t\t\t\tbreak\n\t\t\t// :\n\t\t\tcase 58:\n\t\t\t\tlength = 1 + strlen(characters), property = previous\n\t\t\tdefault:\n\t\t\t\tif (variable < 1)\n\t\t\t\t\tif (character == 123)\n\t\t\t\t\t\t--variable\n\t\t\t\t\telse if (character == 125 && variable++ == 0 && prev() == 125)\n\t\t\t\t\t\tcontinue\n\n\t\t\t\tswitch (characters += from(character), character * variable) {\n\t\t\t\t\t// &\n\t\t\t\t\tcase 38:\n\t\t\t\t\t\tampersand = offset > 0 ? 1 : (characters += '\\f', -1)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// ,\n\t\t\t\t\tcase 44:\n\t\t\t\t\t\tpoints[index++] = (strlen(characters) - 1) * ampersand, ampersand = 1\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// @\n\t\t\t\t\tcase 64:\n\t\t\t\t\t\t// -\n\t\t\t\t\t\tif (peek() === 45)\n\t\t\t\t\t\t\tcharacters += delimit(next())\n\n\t\t\t\t\t\tatrule = peek(), offset = length = strlen(type = characters += identifier(caret())), character++\n\t\t\t\t\t\tbreak\n\t\t\t\t\t// -\n\t\t\t\t\tcase 45:\n\t\t\t\t\t\tif (previous === 45 && strlen(characters) == 2)\n\t\t\t\t\t\t\tvariable = 0\n\t\t\t\t}\n\t\t}\n\n\treturn rulesets\n}\n\n/**\n * @param {string} value\n * @param {object} root\n * @param {object?} parent\n * @param {number} index\n * @param {number} offset\n * @param {string[]} rules\n * @param {number[]} points\n * @param {string} type\n * @param {string[]} props\n * @param {string[]} children\n * @param {number} length\n * @return {object}\n */\nexport function ruleset (value, root, parent, index, offset, rules, points, type, props, children, length) {\n\tvar post = offset - 1\n\tvar rule = offset === 0 ? rules : ['']\n\tvar size = sizeof(rule)\n\n\tfor (var i = 0, j = 0, k = 0; i < index; ++i)\n\t\tfor (var x = 0, y = substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x)\n\t\t\tif (z = trim(j > 0 ? rule[x] + ' ' + y : replace(y, /&\\f/g, rule[x])))\n\t\t\t\tprops[k++] = z\n\n\treturn node(value, root, parent, offset === 0 ? RULESET : type, props, children, length)\n}\n\n/**\n * @param {number} value\n * @param {object} root\n * @param {object?} parent\n * @return {object}\n */\nexport function comment (value, root, parent) {\n\treturn node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0)\n}\n\n/**\n * @param {string} value\n * @param {object} root\n * @param {object?} parent\n * @param {number} length\n * @return {object}\n */\nexport function declaration (value, root, parent, length) {\n\treturn node(value, root, parent, DECLARATION, substr(value, 0, length), substr(value, length + 1, -1), length)\n}\n","import { StyleSheet } from '@emotion/sheet';\nimport { dealloc, alloc, next, token, from, peek, delimit, slice, position, RULESET, combine, match, serialize, copy, replace, WEBKIT, MOZ, MS, KEYFRAMES, DECLARATION, hash, charat, strlen, indexof, stringify, COMMENT, rulesheet, middleware, compile } from 'stylis';\nimport '@emotion/weak-memoize';\nimport '@emotion/memoize';\n\nvar identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {\n var previous = 0;\n var character = 0;\n\n while (true) {\n previous = character;\n character = peek(); // &\\f\n\n if (previous === 38 && character === 12) {\n points[index] = 1;\n }\n\n if (token(character)) {\n break;\n }\n\n next();\n }\n\n return slice(begin, position);\n};\n\nvar toRules = function toRules(parsed, points) {\n // pretend we've started with a comma\n var index = -1;\n var character = 44;\n\n do {\n switch (token(character)) {\n case 0:\n // &\\f\n if (character === 38 && peek() === 12) {\n // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings\n // stylis inserts \\f after & to know when & where it should replace this sequence with the context selector\n // and when it should just concatenate the outer and inner selectors\n // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here\n points[index] = 1;\n }\n\n parsed[index] += identifierWithPointTracking(position - 1, points, index);\n break;\n\n case 2:\n parsed[index] += delimit(character);\n break;\n\n case 4:\n // comma\n if (character === 44) {\n // colon\n parsed[++index] = peek() === 58 ? '&\\f' : '';\n points[index] = parsed[index].length;\n break;\n }\n\n // fallthrough\n\n default:\n parsed[index] += from(character);\n }\n } while (character = next());\n\n return parsed;\n};\n\nvar getRules = function getRules(value, points) {\n return dealloc(toRules(alloc(value), points));\n}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11\n\n\nvar fixedElements = /* #__PURE__ */new WeakMap();\nvar compat = function compat(element) {\n if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo\n // negative .length indicates that this rule has been already prefixed\n element.length < 1) {\n return;\n }\n\n var value = element.value,\n parent = element.parent;\n var isImplicitRule = element.column === parent.column && element.line === parent.line;\n\n while (parent.type !== 'rule') {\n parent = parent.parent;\n if (!parent) return;\n } // short-circuit for the simplest case\n\n\n if (element.props.length === 1 && value.charCodeAt(0) !== 58\n /* colon */\n && !fixedElements.get(parent)) {\n return;\n } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)\n // then the props has already been manipulated beforehand as they that array is shared between it and its \"rule parent\"\n\n\n if (isImplicitRule) {\n return;\n }\n\n fixedElements.set(element, true);\n var points = [];\n var rules = getRules(value, points);\n var parentRules = parent.props;\n\n for (var i = 0, k = 0; i < rules.length; i++) {\n for (var j = 0; j < parentRules.length; j++, k++) {\n element.props[k] = points[i] ? rules[i].replace(/&\\f/g, parentRules[j]) : parentRules[j] + \" \" + rules[i];\n }\n }\n};\nvar removeLabel = function removeLabel(element) {\n if (element.type === 'decl') {\n var value = element.value;\n\n if ( // charcode for l\n value.charCodeAt(0) === 108 && // charcode for b\n value.charCodeAt(2) === 98) {\n // this ignores label\n element[\"return\"] = '';\n element.value = '';\n }\n }\n};\nvar ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';\n\nvar isIgnoringComment = function isIgnoringComment(element) {\n return element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;\n};\n\nvar createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) {\n return function (element, index, children) {\n if (element.type !== 'rule' || cache.compat) return;\n var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);\n\n if (unsafePseudoClasses) {\n var isNested = !!element.parent; // in nested rules comments become children of the \"auto-inserted\" rule and that's always the `element.parent`\n //\n // considering this input:\n // .a {\n // .b /* comm */ {}\n // color: hotpink;\n // }\n // we get output corresponding to this:\n // .a {\n // & {\n // /* comm */\n // color: hotpink;\n // }\n // .b {}\n // }\n\n var commentContainer = isNested ? element.parent.children : // global rule at the root level\n children;\n\n for (var i = commentContainer.length - 1; i >= 0; i--) {\n var node = commentContainer[i];\n\n if (node.line < element.line) {\n break;\n } // it is quite weird but comments are *usually* put at `column: element.column - 1`\n // so we seek *from the end* for the node that is earlier than the rule's `element` and check that\n // this will also match inputs like this:\n // .a {\n // /* comm */\n // .b {}\n // }\n //\n // but that is fine\n //\n // it would be the easiest to change the placement of the comment to be the first child of the rule:\n // .a {\n // .b { /* comm */ }\n // }\n // with such inputs we wouldn't have to search for the comment at all\n // TODO: consider changing this comment placement in the next major version\n\n\n if (node.column < element.column) {\n if (isIgnoringComment(node)) {\n return;\n }\n\n break;\n }\n }\n\n unsafePseudoClasses.forEach(function (unsafePseudoClass) {\n console.error(\"The pseudo class \\\"\" + unsafePseudoClass + \"\\\" is potentially unsafe when doing server-side rendering. Try changing it to \\\"\" + unsafePseudoClass.split('-child')[0] + \"-of-type\\\".\");\n });\n }\n };\n};\n\nvar isImportRule = function isImportRule(element) {\n return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64;\n};\n\nvar isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) {\n for (var i = index - 1; i >= 0; i--) {\n if (!isImportRule(children[i])) {\n return true;\n }\n }\n\n return false;\n}; // use this to remove incorrect elements from further processing\n// so they don't get handed to the `sheet` (or anything else)\n// as that could potentially lead to additional logs which in turn could be overhelming to the user\n\n\nvar nullifyElement = function nullifyElement(element) {\n element.type = '';\n element.value = '';\n element[\"return\"] = '';\n element.children = '';\n element.props = '';\n};\n\nvar incorrectImportAlarm = function incorrectImportAlarm(element, index, children) {\n if (!isImportRule(element)) {\n return;\n }\n\n if (element.parent) {\n console.error(\"`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles.\");\n nullifyElement(element);\n } else if (isPrependedWithRegularRules(index, children)) {\n console.error(\"`@import` rules can't be after other rules. Please put your `@import` rules before your other rules.\");\n nullifyElement(element);\n }\n};\n\n/* eslint-disable no-fallthrough */\n\nfunction prefix(value, length) {\n switch (hash(value, length)) {\n // color-adjust\n case 5103:\n return WEBKIT + 'print-' + value + value;\n // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)\n\n case 5737:\n case 4201:\n case 3177:\n case 3433:\n case 1641:\n case 4457:\n case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break\n\n case 5572:\n case 6356:\n case 5844:\n case 3191:\n case 6645:\n case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,\n\n case 6391:\n case 5879:\n case 5623:\n case 6135:\n case 4599:\n case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)\n\n case 4215:\n case 6389:\n case 5109:\n case 5365:\n case 5621:\n case 3829:\n return WEBKIT + value + value;\n // appearance, user-select, transform, hyphens, text-size-adjust\n\n case 5349:\n case 4246:\n case 4810:\n case 6968:\n case 2756:\n return WEBKIT + value + MOZ + value + MS + value + value;\n // flex, flex-direction\n\n case 6828:\n case 4268:\n return WEBKIT + value + MS + value + value;\n // order\n\n case 6165:\n return WEBKIT + value + MS + 'flex-' + value + value;\n // align-items\n\n case 5187:\n return WEBKIT + value + replace(value, /(\\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value;\n // align-self\n\n case 5443:\n return WEBKIT + value + MS + 'flex-item-' + replace(value, /flex-|-self/, '') + value;\n // align-content\n\n case 4675:\n return WEBKIT + value + MS + 'flex-line-pack' + replace(value, /align-content|flex-|-self/, '') + value;\n // flex-shrink\n\n case 5548:\n return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value;\n // flex-basis\n\n case 5292:\n return WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value;\n // flex-grow\n\n case 6060:\n return WEBKIT + 'box-' + replace(value, '-grow', '') + WEBKIT + value + MS + replace(value, 'grow', 'positive') + value;\n // transition\n\n case 4554:\n return WEBKIT + replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value;\n // cursor\n\n case 6187:\n return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value;\n // background, background-image\n\n case 5495:\n case 3959:\n return replace(value, /(image-set\\([^]*)/, WEBKIT + '$1' + '$`$1');\n // justify-content\n\n case 4968:\n return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value;\n // (margin|padding)-inline-(start|end)\n\n case 4095:\n case 3583:\n case 4068:\n case 2532:\n return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value;\n // (min|max)?(width|height|inline-size|block-size)\n\n case 8116:\n case 7059:\n case 5753:\n case 5535:\n case 5445:\n case 5701:\n case 4933:\n case 4677:\n case 5533:\n case 5789:\n case 5021:\n case 4765:\n // stretch, max-content, min-content, fill-available\n if (strlen(value) - 1 - length > 6) switch (charat(value, length + 1)) {\n // (m)ax-content, (m)in-content\n case 109:\n // -\n if (charat(value, length + 4) !== 45) break;\n // (f)ill-available, (f)it-content\n\n case 102:\n return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;\n // (s)tretch\n\n case 115:\n return ~indexof(value, 'stretch') ? prefix(replace(value, 'stretch', 'fill-available'), length) + value : value;\n }\n break;\n // position: sticky\n\n case 4949:\n // (s)ticky?\n if (charat(value, length + 1) !== 115) break;\n // display: (flex|inline-flex)\n\n case 6444:\n switch (charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))) {\n // stic(k)y\n case 107:\n return replace(value, ':', ':' + WEBKIT) + value;\n // (inline-)?fl(e)x\n\n case 101:\n return replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value;\n }\n\n break;\n // writing-mode\n\n case 5936:\n switch (charat(value, length + 11)) {\n // vertical-l(r)\n case 114:\n return WEBKIT + value + MS + replace(value, /[svh]\\w+-[tblr]{2}/, 'tb') + value;\n // vertical-r(l)\n\n case 108:\n return WEBKIT + value + MS + replace(value, /[svh]\\w+-[tblr]{2}/, 'tb-rl') + value;\n // horizontal(-)tb\n\n case 45:\n return WEBKIT + value + MS + replace(value, /[svh]\\w+-[tblr]{2}/, 'lr') + value;\n }\n\n return WEBKIT + value + MS + value + value;\n }\n\n return value;\n}\n\nvar prefixer = function prefixer(element, index, children, callback) {\n if (element.length > -1) if (!element[\"return\"]) switch (element.type) {\n case DECLARATION:\n element[\"return\"] = prefix(element.value, element.length);\n break;\n\n case KEYFRAMES:\n return serialize([copy(element, {\n value: replace(element.value, '@', '@' + WEBKIT)\n })], callback);\n\n case RULESET:\n if (element.length) return combine(element.props, function (value) {\n switch (match(value, /(::plac\\w+|:read-\\w+)/)) {\n // :read-(only|write)\n case ':read-only':\n case ':read-write':\n return serialize([copy(element, {\n props: [replace(value, /:(read-\\w+)/, ':' + MOZ + '$1')]\n })], callback);\n // :placeholder\n\n case '::placeholder':\n return serialize([copy(element, {\n props: [replace(value, /:(plac\\w+)/, ':' + WEBKIT + 'input-$1')]\n }), copy(element, {\n props: [replace(value, /:(plac\\w+)/, ':' + MOZ + '$1')]\n }), copy(element, {\n props: [replace(value, /:(plac\\w+)/, MS + 'input-$1')]\n })], callback);\n }\n\n return '';\n });\n }\n};\n\nvar defaultStylisPlugins = [prefixer];\n\nvar createCache = function createCache(options) {\n var key = options.key;\n\n if (process.env.NODE_ENV !== 'production' && !key) {\n throw new Error(\"You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\\n\" + \"If multiple caches share the same key they might \\\"fight\\\" for each other's style elements.\");\n }\n\n if (key === 'css') {\n var ssrStyles = document.querySelectorAll(\"style[data-emotion]:not([data-s])\"); // get SSRed styles out of the way of React's hydration\n // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)\n // note this very very intentionally targets all style elements regardless of the key to ensure\n // that creating a cache works inside of render of a React component\n\n Array.prototype.forEach.call(ssrStyles, function (node) {\n // we want to only move elements which have a space in the data-emotion attribute value\n // because that indicates that it is an Emotion 11 server-side rendered style elements\n // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector\n // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)\n // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles\n // will not result in the Emotion 10 styles being destroyed\n var dataEmotionAttribute = node.getAttribute('data-emotion');\n\n if (dataEmotionAttribute.indexOf(' ') === -1) {\n return;\n }\n document.head.appendChild(node);\n node.setAttribute('data-s', '');\n });\n }\n\n var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;\n\n if (process.env.NODE_ENV !== 'production') {\n // $FlowFixMe\n if (/[^a-z-]/.test(key)) {\n throw new Error(\"Emotion key must only contain lower case alphabetical characters and - but \\\"\" + key + \"\\\" was passed\");\n }\n }\n\n var inserted = {};\n var container;\n var nodesToHydrate = [];\n\n {\n container = options.container || document.head;\n Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which\n // means that the style elements we're looking at are only Emotion 11 server-rendered style elements\n document.querySelectorAll(\"style[data-emotion^=\\\"\" + key + \" \\\"]\"), function (node) {\n var attrib = node.getAttribute(\"data-emotion\").split(' '); // $FlowFixMe\n\n for (var i = 1; i < attrib.length; i++) {\n inserted[attrib[i]] = true;\n }\n\n nodesToHydrate.push(node);\n });\n }\n\n var _insert;\n\n var omnipresentPlugins = [compat, removeLabel];\n\n if (process.env.NODE_ENV !== 'production') {\n omnipresentPlugins.push(createUnsafeSelectorsAlarm({\n get compat() {\n return cache.compat;\n }\n\n }), incorrectImportAlarm);\n }\n\n {\n var currentSheet;\n var finalizingPlugins = [stringify, process.env.NODE_ENV !== 'production' ? function (element) {\n if (!element.root) {\n if (element[\"return\"]) {\n currentSheet.insert(element[\"return\"]);\n } else if (element.value && element.type !== COMMENT) {\n // insert empty rule in non-production environments\n // so @emotion/jest can grab `key` from the (JS)DOM for caches without any rules inserted yet\n currentSheet.insert(element.value + \"{}\");\n }\n }\n } : rulesheet(function (rule) {\n currentSheet.insert(rule);\n })];\n var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));\n\n var stylis = function stylis(styles) {\n return serialize(compile(styles), serializer);\n };\n\n _insert = function insert(selector, serialized, sheet, shouldCache) {\n currentSheet = sheet;\n\n if (process.env.NODE_ENV !== 'production' && serialized.map !== undefined) {\n currentSheet = {\n insert: function insert(rule) {\n sheet.insert(rule + serialized.map);\n }\n };\n }\n\n stylis(selector ? selector + \"{\" + serialized.styles + \"}\" : serialized.styles);\n\n if (shouldCache) {\n cache.inserted[serialized.name] = true;\n }\n };\n }\n\n var cache = {\n key: key,\n sheet: new StyleSheet({\n key: key,\n container: container,\n nonce: options.nonce,\n speedy: options.speedy,\n prepend: options.prepend,\n insertionPoint: options.insertionPoint\n }),\n nonce: options.nonce,\n inserted: inserted,\n registered: {},\n insert: _insert\n };\n cache.sheet.hydrate(nodesToHydrate);\n return cache;\n};\n\nexport { createCache as default };\n","import {MS, MOZ, WEBKIT, RULESET, KEYFRAMES, DECLARATION} from './Enum.js'\nimport {match, charat, substr, strlen, sizeof, replace, combine} from './Utility.js'\nimport {copy, tokenize} from './Tokenizer.js'\nimport {serialize} from './Serializer.js'\nimport {prefix} from './Prefixer.js'\n\n/**\n * @param {function[]} collection\n * @return {function}\n */\nexport function middleware (collection) {\n\tvar length = sizeof(collection)\n\n\treturn function (element, index, children, callback) {\n\t\tvar output = ''\n\n\t\tfor (var i = 0; i < length; i++)\n\t\t\toutput += collection[i](element, index, children, callback) || ''\n\n\t\treturn output\n\t}\n}\n\n/**\n * @param {function} callback\n * @return {function}\n */\nexport function rulesheet (callback) {\n\treturn function (element) {\n\t\tif (!element.root)\n\t\t\tif (element = element.return)\n\t\t\t\tcallback(element)\n\t}\n}\n\n/**\n * @param {object} element\n * @param {number} index\n * @param {object[]} children\n * @param {function} callback\n */\nexport function prefixer (element, index, children, callback) {\n\tif (element.length > -1)\n\t\tif (!element.return)\n\t\t\tswitch (element.type) {\n\t\t\t\tcase DECLARATION: element.return = prefix(element.value, element.length, children)\n\t\t\t\t\treturn\n\t\t\t\tcase KEYFRAMES:\n\t\t\t\t\treturn serialize([copy(element, {value: replace(element.value, '@', '@' + WEBKIT)})], callback)\n\t\t\t\tcase RULESET:\n\t\t\t\t\tif (element.length)\n\t\t\t\t\t\treturn combine(element.props, function (value) {\n\t\t\t\t\t\t\tswitch (match(value, /(::plac\\w+|:read-\\w+)/)) {\n\t\t\t\t\t\t\t\t// :read-(only|write)\n\t\t\t\t\t\t\t\tcase ':read-only': case ':read-write':\n\t\t\t\t\t\t\t\t\treturn serialize([copy(element, {props: [replace(value, /:(read-\\w+)/, ':' + MOZ + '$1')]})], callback)\n\t\t\t\t\t\t\t\t// :placeholder\n\t\t\t\t\t\t\t\tcase '::placeholder':\n\t\t\t\t\t\t\t\t\treturn serialize([\n\t\t\t\t\t\t\t\t\t\tcopy(element, {props: [replace(value, /:(plac\\w+)/, ':' + WEBKIT + 'input-$1')]}),\n\t\t\t\t\t\t\t\t\t\tcopy(element, {props: [replace(value, /:(plac\\w+)/, ':' + MOZ + '$1')]}),\n\t\t\t\t\t\t\t\t\t\tcopy(element, {props: [replace(value, /:(plac\\w+)/, MS + 'input-$1')]})\n\t\t\t\t\t\t\t\t\t], callback)\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn ''\n\t\t\t\t\t\t})\n\t\t\t}\n}\n\n/**\n * @param {object} element\n * @param {number} index\n * @param {object[]} children\n */\nexport function namespace (element) {\n\tswitch (element.type) {\n\t\tcase RULESET:\n\t\t\telement.props = element.props.map(function (value) {\n\t\t\t\treturn combine(tokenize(value), function (value, index, children) {\n\t\t\t\t\tswitch (charat(value, 0)) {\n\t\t\t\t\t\t// \\f\n\t\t\t\t\t\tcase 12:\n\t\t\t\t\t\t\treturn substr(value, 1, strlen(value))\n\t\t\t\t\t\t// \\0 ( + > ~\n\t\t\t\t\t\tcase 0: case 40: case 43: case 62: case 126:\n\t\t\t\t\t\t\treturn value\n\t\t\t\t\t\t// :\n\t\t\t\t\t\tcase 58:\n\t\t\t\t\t\t\tif (children[++index] === 'global')\n\t\t\t\t\t\t\t\tchildren[index] = '', children[++index] = '\\f' + substr(children[index], index = 1, -1)\n\t\t\t\t\t\t// \\s\n\t\t\t\t\t\tcase 32:\n\t\t\t\t\t\t\treturn index === 1 ? '' : value\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\tswitch (index) {\n\t\t\t\t\t\t\t\tcase 0: element = value\n\t\t\t\t\t\t\t\t\treturn sizeof(children) > 1 ? '' : value\n\t\t\t\t\t\t\t\tcase index = sizeof(children) - 1: case 2:\n\t\t\t\t\t\t\t\t\treturn index === 2 ? value + element + element : value + element\n\t\t\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\t\t\treturn value\n\t\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t})\n\t}\n}\n","function memoize(fn) {\n var cache = Object.create(null);\n return function (arg) {\n if (cache[arg] === undefined) cache[arg] = fn(arg);\n return cache[arg];\n };\n}\n\nexport { memoize as default };\n","import * as React from 'react';\nimport { useContext, forwardRef } from 'react';\nimport createCache from '@emotion/cache';\nimport _extends from '@babel/runtime/helpers/esm/extends';\nimport weakMemoize from '@emotion/weak-memoize';\nimport hoistNonReactStatics from '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport { getRegisteredStyles, registerStyles, insertStyles } from '@emotion/utils';\nimport { serializeStyles } from '@emotion/serialize';\nimport { useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\n\nvar isBrowser = \"object\" !== 'undefined';\nvar hasOwnProperty = {}.hasOwnProperty;\n\nvar EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case\n// because this module is primarily intended for the browser and node\n// but it's also required in react native and similar environments sometimes\n// and we could have a special build just for that\n// but this is much easier and the native packages\n// might use a different theme context in the future anyway\ntypeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({\n key: 'css'\n}) : null);\n\nif (process.env.NODE_ENV !== 'production') {\n EmotionCacheContext.displayName = 'EmotionCacheContext';\n}\n\nvar CacheProvider = EmotionCacheContext.Provider;\nvar __unsafe_useEmotionCache = function useEmotionCache() {\n return useContext(EmotionCacheContext);\n};\n\nvar withEmotionCache = function withEmotionCache(func) {\n // $FlowFixMe\n return /*#__PURE__*/forwardRef(function (props, ref) {\n // the cache will never be null in the browser\n var cache = useContext(EmotionCacheContext);\n return func(props, cache, ref);\n });\n};\n\nif (!isBrowser) {\n withEmotionCache = function withEmotionCache(func) {\n return function (props) {\n var cache = useContext(EmotionCacheContext);\n\n if (cache === null) {\n // yes, we're potentially creating this on every render\n // it doesn't actually matter though since it's only on the server\n // so there will only every be a single render\n // that could change in the future because of suspense and etc. but for now,\n // this works and i don't want to optimise for a future thing that we aren't sure about\n cache = createCache({\n key: 'css'\n });\n return /*#__PURE__*/React.createElement(EmotionCacheContext.Provider, {\n value: cache\n }, func(props, cache));\n } else {\n return func(props, cache);\n }\n };\n };\n}\n\nvar ThemeContext = /* #__PURE__ */React.createContext({});\n\nif (process.env.NODE_ENV !== 'production') {\n ThemeContext.displayName = 'EmotionThemeContext';\n}\n\nvar useTheme = function useTheme() {\n return React.useContext(ThemeContext);\n};\n\nvar getTheme = function getTheme(outerTheme, theme) {\n if (typeof theme === 'function') {\n var mergedTheme = theme(outerTheme);\n\n if (process.env.NODE_ENV !== 'production' && (mergedTheme == null || typeof mergedTheme !== 'object' || Array.isArray(mergedTheme))) {\n throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');\n }\n\n return mergedTheme;\n }\n\n if (process.env.NODE_ENV !== 'production' && (theme == null || typeof theme !== 'object' || Array.isArray(theme))) {\n throw new Error('[ThemeProvider] Please make your theme prop a plain object');\n }\n\n return _extends({}, outerTheme, theme);\n};\n\nvar createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {\n return weakMemoize(function (theme) {\n return getTheme(outerTheme, theme);\n });\n});\nvar ThemeProvider = function ThemeProvider(props) {\n var theme = React.useContext(ThemeContext);\n\n if (props.theme !== theme) {\n theme = createCacheWithTheme(theme)(props.theme);\n }\n\n return /*#__PURE__*/React.createElement(ThemeContext.Provider, {\n value: theme\n }, props.children);\n};\nfunction withTheme(Component) {\n var componentName = Component.displayName || Component.name || 'Component';\n\n var render = function render(props, ref) {\n var theme = React.useContext(ThemeContext);\n return /*#__PURE__*/React.createElement(Component, _extends({\n theme: theme,\n ref: ref\n }, props));\n }; // $FlowFixMe\n\n\n var WithTheme = /*#__PURE__*/React.forwardRef(render);\n WithTheme.displayName = \"WithTheme(\" + componentName + \")\";\n return hoistNonReactStatics(WithTheme, Component);\n}\n\nvar getLastPart = function getLastPart(functionName) {\n // The match may be something like 'Object.createEmotionProps' or\n // 'Loader.prototype.render'\n var parts = functionName.split('.');\n return parts[parts.length - 1];\n};\n\nvar getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {\n // V8\n var match = /^\\s+at\\s+([A-Za-z0-9$.]+)\\s/.exec(line);\n if (match) return getLastPart(match[1]); // Safari / Firefox\n\n match = /^([A-Za-z0-9$.]+)@/.exec(line);\n if (match) return getLastPart(match[1]);\n return undefined;\n};\n\nvar internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS\n// identifiers, thus we only need to replace what is a valid character for JS,\n// but not for CSS.\n\nvar sanitizeIdentifier = function sanitizeIdentifier(identifier) {\n return identifier.replace(/\\$/g, '-');\n};\n\nvar getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {\n if (!stackTrace) return undefined;\n var lines = stackTrace.split('\\n');\n\n for (var i = 0; i < lines.length; i++) {\n var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just \"Error\"\n\n if (!functionName) continue; // If we reach one of these, we have gone too far and should quit\n\n if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an\n // uppercase letter\n\n if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName);\n }\n\n return undefined;\n};\n\nvar typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';\nvar labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';\nvar createEmotionProps = function createEmotionProps(type, props) {\n if (process.env.NODE_ENV !== 'production' && typeof props.css === 'string' && // check if there is a css declaration\n props.css.indexOf(':') !== -1) {\n throw new Error(\"Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`\" + props.css + \"`\");\n }\n\n var newProps = {};\n\n for (var key in props) {\n if (hasOwnProperty.call(props, key)) {\n newProps[key] = props[key];\n }\n }\n\n newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when\n // the label hasn't already been computed\n\n if (process.env.NODE_ENV !== 'production' && !!props.css && (typeof props.css !== 'object' || typeof props.css.name !== 'string' || props.css.name.indexOf('-') === -1)) {\n var label = getLabelFromStackTrace(new Error().stack);\n if (label) newProps[labelPropName] = label;\n }\n\n return newProps;\n};\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serialized = _ref.serialized,\n isStringTag = _ref.isStringTag;\n registerStyles(cache, serialized, isStringTag);\n useInsertionEffectAlwaysWithSyncFallback(function () {\n return insertStyles(cache, serialized, isStringTag);\n });\n\n return null;\n};\n\nvar Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {\n var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works\n // not passing the registered cache to serializeStyles because it would\n // make certain babel optimisations not possible\n\n if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {\n cssProp = cache.registered[cssProp];\n }\n\n var WrappedComponent = props[typePropName];\n var registeredStyles = [cssProp];\n var className = '';\n\n if (typeof props.className === 'string') {\n className = getRegisteredStyles(cache.registered, registeredStyles, props.className);\n } else if (props.className != null) {\n className = props.className + \" \";\n }\n\n var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));\n\n if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {\n var labelFromStack = props[labelPropName];\n\n if (labelFromStack) {\n serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);\n }\n }\n\n className += cache.key + \"-\" + serialized.name;\n var newProps = {};\n\n for (var key in props) {\n if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {\n newProps[key] = props[key];\n }\n }\n\n newProps.ref = ref;\n newProps.className = className;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serialized: serialized,\n isStringTag: typeof WrappedComponent === 'string'\n }), /*#__PURE__*/React.createElement(WrappedComponent, newProps));\n});\n\nif (process.env.NODE_ENV !== 'production') {\n Emotion.displayName = 'EmotionCssPropInternal';\n}\n\nvar Emotion$1 = Emotion;\n\nexport { CacheProvider as C, Emotion$1 as E, ThemeContext as T, __unsafe_useEmotionCache as _, ThemeProvider as a, withTheme as b, createEmotionProps as c, hasOwnProperty as h, isBrowser as i, useTheme as u, withEmotionCache as w };\n","import { h as hasOwnProperty, E as Emotion, c as createEmotionProps, w as withEmotionCache, T as ThemeContext, i as isBrowser$1 } from './emotion-element-c39617d8.browser.esm.js';\nexport { C as CacheProvider, T as ThemeContext, a as ThemeProvider, _ as __unsafe_useEmotionCache, u as useTheme, w as withEmotionCache, b as withTheme } from './emotion-element-c39617d8.browser.esm.js';\nimport * as React from 'react';\nimport { insertStyles, registerStyles, getRegisteredStyles } from '@emotion/utils';\nimport { useInsertionEffectWithLayoutFallback, useInsertionEffectAlwaysWithSyncFallback } from '@emotion/use-insertion-effect-with-fallbacks';\nimport { serializeStyles } from '@emotion/serialize';\nimport '@emotion/cache';\nimport '@babel/runtime/helpers/extends';\nimport '@emotion/weak-memoize';\nimport '../_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js';\nimport 'hoist-non-react-statics';\n\nvar pkg = {\n\tname: \"@emotion/react\",\n\tversion: \"11.11.1\",\n\tmain: \"dist/emotion-react.cjs.js\",\n\tmodule: \"dist/emotion-react.esm.js\",\n\tbrowser: {\n\t\t\"./dist/emotion-react.esm.js\": \"./dist/emotion-react.browser.esm.js\"\n\t},\n\texports: {\n\t\t\".\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./dist/emotion-react.worker.esm.js\",\n\t\t\t\tbrowser: \"./dist/emotion-react.browser.esm.js\",\n\t\t\t\t\"default\": \"./dist/emotion-react.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./dist/emotion-react.cjs.mjs\",\n\t\t\t\"default\": \"./dist/emotion-react.cjs.js\"\n\t\t},\n\t\t\"./jsx-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-runtime/dist/emotion-react-jsx-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.mjs\",\n\t\t\t\"default\": \"./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js\"\n\t\t},\n\t\t\"./_isolated-hnrs\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.worker.esm.js\",\n\t\t\t\tbrowser: \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js\",\n\t\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.mjs\",\n\t\t\t\"default\": \"./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js\"\n\t\t},\n\t\t\"./jsx-dev-runtime\": {\n\t\t\tmodule: {\n\t\t\t\tworker: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.worker.esm.js\",\n\t\t\t\tbrowser: \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js\",\n\t\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.esm.js\"\n\t\t\t},\n\t\t\t\"import\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.mjs\",\n\t\t\t\"default\": \"./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js\"\n\t\t},\n\t\t\"./package.json\": \"./package.json\",\n\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\"./macro\": {\n\t\t\ttypes: {\n\t\t\t\t\"import\": \"./macro.d.mts\",\n\t\t\t\t\"default\": \"./macro.d.ts\"\n\t\t\t},\n\t\t\t\"default\": \"./macro.js\"\n\t\t}\n\t},\n\ttypes: \"types/index.d.ts\",\n\tfiles: [\n\t\t\"src\",\n\t\t\"dist\",\n\t\t\"jsx-runtime\",\n\t\t\"jsx-dev-runtime\",\n\t\t\"_isolated-hnrs\",\n\t\t\"types/*.d.ts\",\n\t\t\"macro.*\"\n\t],\n\tsideEffects: false,\n\tauthor: \"Emotion Contributors\",\n\tlicense: \"MIT\",\n\tscripts: {\n\t\t\"test:typescript\": \"dtslint types\"\n\t},\n\tdependencies: {\n\t\t\"@babel/runtime\": \"^7.18.3\",\n\t\t\"@emotion/babel-plugin\": \"^11.11.0\",\n\t\t\"@emotion/cache\": \"^11.11.0\",\n\t\t\"@emotion/serialize\": \"^1.1.2\",\n\t\t\"@emotion/use-insertion-effect-with-fallbacks\": \"^1.0.1\",\n\t\t\"@emotion/utils\": \"^1.2.1\",\n\t\t\"@emotion/weak-memoize\": \"^0.3.1\",\n\t\t\"hoist-non-react-statics\": \"^3.3.1\"\n\t},\n\tpeerDependencies: {\n\t\treact: \">=16.8.0\"\n\t},\n\tpeerDependenciesMeta: {\n\t\t\"@types/react\": {\n\t\t\toptional: true\n\t\t}\n\t},\n\tdevDependencies: {\n\t\t\"@definitelytyped/dtslint\": \"0.0.112\",\n\t\t\"@emotion/css\": \"11.11.0\",\n\t\t\"@emotion/css-prettifier\": \"1.1.3\",\n\t\t\"@emotion/server\": \"11.11.0\",\n\t\t\"@emotion/styled\": \"11.11.0\",\n\t\t\"html-tag-names\": \"^1.1.2\",\n\t\treact: \"16.14.0\",\n\t\t\"svg-tag-names\": \"^1.1.1\",\n\t\ttypescript: \"^4.5.5\"\n\t},\n\trepository: \"https://github.com/emotion-js/emotion/tree/main/packages/react\",\n\tpublishConfig: {\n\t\taccess: \"public\"\n\t},\n\t\"umd:main\": \"dist/emotion-react.umd.min.js\",\n\tpreconstruct: {\n\t\tentrypoints: [\n\t\t\t\"./index.js\",\n\t\t\t\"./jsx-runtime.js\",\n\t\t\t\"./jsx-dev-runtime.js\",\n\t\t\t\"./_isolated-hnrs.js\"\n\t\t],\n\t\tumdName: \"emotionReact\",\n\t\texports: {\n\t\t\tenvConditions: [\n\t\t\t\t\"browser\",\n\t\t\t\t\"worker\"\n\t\t\t],\n\t\t\textra: {\n\t\t\t\t\"./types/css-prop\": \"./types/css-prop.d.ts\",\n\t\t\t\t\"./macro\": {\n\t\t\t\t\ttypes: {\n\t\t\t\t\t\t\"import\": \"./macro.d.mts\",\n\t\t\t\t\t\t\"default\": \"./macro.d.ts\"\n\t\t\t\t\t},\n\t\t\t\t\t\"default\": \"./macro.js\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n};\n\nvar jsx = function jsx(type, props) {\n var args = arguments;\n\n if (props == null || !hasOwnProperty.call(props, 'css')) {\n // $FlowFixMe\n return React.createElement.apply(undefined, args);\n }\n\n var argsLength = args.length;\n var createElementArgArray = new Array(argsLength);\n createElementArgArray[0] = Emotion;\n createElementArgArray[1] = createEmotionProps(type, props);\n\n for (var i = 2; i < argsLength; i++) {\n createElementArgArray[i] = args[i];\n } // $FlowFixMe\n\n\n return React.createElement.apply(null, createElementArgArray);\n};\n\nvar warnedAboutCssPropForGlobal = false; // maintain place over rerenders.\n// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild\n// initial client-side render from SSR, use place of hydrating tag\n\nvar Global = /* #__PURE__ */withEmotionCache(function (props, cache) {\n if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is\n // probably using the custom createElement which\n // means it will be turned into a className prop\n // $FlowFixMe I don't really want to add it to the type since it shouldn't be used\n props.className || props.css)) {\n console.error(\"It looks like you're using the css prop on Global, did you mean to use the styles prop instead?\");\n warnedAboutCssPropForGlobal = true;\n }\n\n var styles = props.styles;\n var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));\n\n if (!isBrowser$1) {\n var _ref;\n\n var serializedNames = serialized.name;\n var serializedStyles = serialized.styles;\n var next = serialized.next;\n\n while (next !== undefined) {\n serializedNames += ' ' + next.name;\n serializedStyles += next.styles;\n next = next.next;\n }\n\n var shouldCache = cache.compat === true;\n var rules = cache.insert(\"\", {\n name: serializedNames,\n styles: serializedStyles\n }, cache.sheet, shouldCache);\n\n if (shouldCache) {\n return null;\n }\n\n return /*#__PURE__*/React.createElement(\"style\", (_ref = {}, _ref[\"data-emotion\"] = cache.key + \"-global \" + serializedNames, _ref.dangerouslySetInnerHTML = {\n __html: rules\n }, _ref.nonce = cache.sheet.nonce, _ref));\n } // yes, i know these hooks are used conditionally\n // but it is based on a constant that will never change at runtime\n // it's effectively like having two implementations and switching them out\n // so it's not actually breaking anything\n\n\n var sheetRef = React.useRef();\n useInsertionEffectWithLayoutFallback(function () {\n var key = cache.key + \"-global\"; // use case of https://github.com/emotion-js/emotion/issues/2675\n\n var sheet = new cache.sheet.constructor({\n key: key,\n nonce: cache.sheet.nonce,\n container: cache.sheet.container,\n speedy: cache.sheet.isSpeedy\n });\n var rehydrating = false; // $FlowFixMe\n\n var node = document.querySelector(\"style[data-emotion=\\\"\" + key + \" \" + serialized.name + \"\\\"]\");\n\n if (cache.sheet.tags.length) {\n sheet.before = cache.sheet.tags[0];\n }\n\n if (node !== null) {\n rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other s\n\n node.setAttribute('data-emotion', key);\n sheet.hydrate([node]);\n }\n\n sheetRef.current = [sheet, rehydrating];\n return function () {\n sheet.flush();\n };\n }, [cache]);\n useInsertionEffectWithLayoutFallback(function () {\n var sheetRefCurrent = sheetRef.current;\n var sheet = sheetRefCurrent[0],\n rehydrating = sheetRefCurrent[1];\n\n if (rehydrating) {\n sheetRefCurrent[1] = false;\n return;\n }\n\n if (serialized.next !== undefined) {\n // insert keyframes\n insertStyles(cache, serialized.next, true);\n }\n\n if (sheet.tags.length) {\n // if this doesn't exist then it will be null so the style element will be appended\n var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;\n sheet.before = element;\n sheet.flush();\n }\n\n cache.insert(\"\", serialized, sheet, false);\n }, [cache, serialized.name]);\n return null;\n});\n\nif (process.env.NODE_ENV !== 'production') {\n Global.displayName = 'EmotionGlobal';\n}\n\nfunction css() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return serializeStyles(args);\n}\n\nvar keyframes = function keyframes() {\n var insertable = css.apply(void 0, arguments);\n var name = \"animation-\" + insertable.name; // $FlowFixMe\n\n return {\n name: name,\n styles: \"@keyframes \" + name + \"{\" + insertable.styles + \"}\",\n anim: 1,\n toString: function toString() {\n return \"_EMO_\" + this.name + \"_\" + this.styles + \"_EMO_\";\n }\n };\n};\n\nvar classnames = function classnames(args) {\n var len = args.length;\n var i = 0;\n var cls = '';\n\n for (; i < len; i++) {\n var arg = args[i];\n if (arg == null) continue;\n var toAdd = void 0;\n\n switch (typeof arg) {\n case 'boolean':\n break;\n\n case 'object':\n {\n if (Array.isArray(arg)) {\n toAdd = classnames(arg);\n } else {\n if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) {\n console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from component.');\n }\n\n toAdd = '';\n\n for (var k in arg) {\n if (arg[k] && k) {\n toAdd && (toAdd += ' ');\n toAdd += k;\n }\n }\n }\n\n break;\n }\n\n default:\n {\n toAdd = arg;\n }\n }\n\n if (toAdd) {\n cls && (cls += ' ');\n cls += toAdd;\n }\n }\n\n return cls;\n};\n\nfunction merge(registered, css, className) {\n var registeredStyles = [];\n var rawClassName = getRegisteredStyles(registered, registeredStyles, className);\n\n if (registeredStyles.length < 2) {\n return className;\n }\n\n return rawClassName + css(registeredStyles);\n}\n\nvar Insertion = function Insertion(_ref) {\n var cache = _ref.cache,\n serializedArr = _ref.serializedArr;\n useInsertionEffectAlwaysWithSyncFallback(function () {\n\n for (var i = 0; i < serializedArr.length; i++) {\n insertStyles(cache, serializedArr[i], false);\n }\n });\n\n return null;\n};\n\nvar ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {\n var hasRendered = false;\n var serializedArr = [];\n\n var css = function css() {\n if (hasRendered && process.env.NODE_ENV !== 'production') {\n throw new Error('css can only be used during render');\n }\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n var serialized = serializeStyles(args, cache.registered);\n serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx`\n\n registerStyles(cache, serialized, false);\n return cache.key + \"-\" + serialized.name;\n };\n\n var cx = function cx() {\n if (hasRendered && process.env.NODE_ENV !== 'production') {\n throw new Error('cx can only be used during render');\n }\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n return merge(cache.registered, css, classnames(args));\n };\n\n var content = {\n css: css,\n cx: cx,\n theme: React.useContext(ThemeContext)\n };\n var ele = props.children(content);\n hasRendered = true;\n return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {\n cache: cache,\n serializedArr: serializedArr\n }), ele);\n});\n\nif (process.env.NODE_ENV !== 'production') {\n ClassNames.displayName = 'EmotionClassNames';\n}\n\nif (process.env.NODE_ENV !== 'production') {\n var isBrowser = \"object\" !== 'undefined'; // #1727, #2905 for some reason Jest and Vitest evaluate modules twice if some consuming module gets mocked\n\n var isTestEnv = typeof jest !== 'undefined' || typeof vi !== 'undefined';\n\n if (isBrowser && !isTestEnv) {\n // globalThis has wide browser support - https://caniuse.com/?search=globalThis, Node.js 12 and later\n var globalContext = // $FlowIgnore\n typeof globalThis !== 'undefined' ? globalThis // eslint-disable-line no-undef\n : isBrowser ? window : global;\n var globalKey = \"__EMOTION_REACT_\" + pkg.version.split('.')[0] + \"__\";\n\n if (globalContext[globalKey]) {\n console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.');\n }\n\n globalContext[globalKey] = true;\n }\n}\n\nexport { ClassNames, Global, jsx as createElement, css, jsx, keyframes };\n","var unitlessKeys = {\n animationIterationCount: 1,\n aspectRatio: 1,\n borderImageOutset: 1,\n borderImageSlice: 1,\n borderImageWidth: 1,\n boxFlex: 1,\n boxFlexGroup: 1,\n boxOrdinalGroup: 1,\n columnCount: 1,\n columns: 1,\n flex: 1,\n flexGrow: 1,\n flexPositive: 1,\n flexShrink: 1,\n flexNegative: 1,\n flexOrder: 1,\n gridRow: 1,\n gridRowEnd: 1,\n gridRowSpan: 1,\n gridRowStart: 1,\n gridColumn: 1,\n gridColumnEnd: 1,\n gridColumnSpan: 1,\n gridColumnStart: 1,\n msGridRow: 1,\n msGridRowSpan: 1,\n msGridColumn: 1,\n msGridColumnSpan: 1,\n fontWeight: 1,\n lineHeight: 1,\n opacity: 1,\n order: 1,\n orphans: 1,\n tabSize: 1,\n widows: 1,\n zIndex: 1,\n zoom: 1,\n WebkitLineClamp: 1,\n // SVG-related properties\n fillOpacity: 1,\n floodOpacity: 1,\n stopOpacity: 1,\n strokeDasharray: 1,\n strokeDashoffset: 1,\n strokeMiterlimit: 1,\n strokeOpacity: 1,\n strokeWidth: 1\n};\n\nexport { unitlessKeys as default };\n","import hashString from '@emotion/hash';\nimport unitless from '@emotion/unitless';\nimport memoize from '@emotion/memoize';\n\nvar ILLEGAL_ESCAPE_SEQUENCE_ERROR = \"You have illegal escape sequence in your template literal, most likely inside content's property value.\\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \\\"content: '\\\\00d7';\\\" should become \\\"content: '\\\\\\\\00d7';\\\".\\nYou can read more about this here:\\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences\";\nvar UNDEFINED_AS_OBJECT_KEY_ERROR = \"You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).\";\nvar hyphenateRegex = /[A-Z]|^ms/g;\nvar animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;\n\nvar isCustomProperty = function isCustomProperty(property) {\n return property.charCodeAt(1) === 45;\n};\n\nvar isProcessableValue = function isProcessableValue(value) {\n return value != null && typeof value !== 'boolean';\n};\n\nvar processStyleName = /* #__PURE__ */memoize(function (styleName) {\n return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();\n});\n\nvar processStyleValue = function processStyleValue(key, value) {\n switch (key) {\n case 'animation':\n case 'animationName':\n {\n if (typeof value === 'string') {\n return value.replace(animationRegex, function (match, p1, p2) {\n cursor = {\n name: p1,\n styles: p2,\n next: cursor\n };\n return p1;\n });\n }\n }\n }\n\n if (unitless[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {\n return value + 'px';\n }\n\n return value;\n};\n\nif (process.env.NODE_ENV !== 'production') {\n var contentValuePattern = /(var|attr|counters?|url|element|(((repeating-)?(linear|radial))|conic)-gradient)\\(|(no-)?(open|close)-quote/;\n var contentValues = ['normal', 'none', 'initial', 'inherit', 'unset'];\n var oldProcessStyleValue = processStyleValue;\n var msPattern = /^-ms-/;\n var hyphenPattern = /-(.)/g;\n var hyphenatedCache = {};\n\n processStyleValue = function processStyleValue(key, value) {\n if (key === 'content') {\n if (typeof value !== 'string' || contentValues.indexOf(value) === -1 && !contentValuePattern.test(value) && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== '\"' && value.charAt(0) !== \"'\")) {\n throw new Error(\"You seem to be using a value for 'content' without quotes, try replacing it with `content: '\\\"\" + value + \"\\\"'`\");\n }\n }\n\n var processed = oldProcessStyleValue(key, value);\n\n if (processed !== '' && !isCustomProperty(key) && key.indexOf('-') !== -1 && hyphenatedCache[key] === undefined) {\n hyphenatedCache[key] = true;\n console.error(\"Using kebab-case for css properties in objects is not supported. Did you mean \" + key.replace(msPattern, 'ms-').replace(hyphenPattern, function (str, _char) {\n return _char.toUpperCase();\n }) + \"?\");\n }\n\n return processed;\n };\n}\n\nvar noComponentSelectorMessage = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.';\n\nfunction handleInterpolation(mergedProps, registered, interpolation) {\n if (interpolation == null) {\n return '';\n }\n\n if (interpolation.__emotion_styles !== undefined) {\n if (process.env.NODE_ENV !== 'production' && interpolation.toString() === 'NO_COMPONENT_SELECTOR') {\n throw new Error(noComponentSelectorMessage);\n }\n\n return interpolation;\n }\n\n switch (typeof interpolation) {\n case 'boolean':\n {\n return '';\n }\n\n case 'object':\n {\n if (interpolation.anim === 1) {\n cursor = {\n name: interpolation.name,\n styles: interpolation.styles,\n next: cursor\n };\n return interpolation.name;\n }\n\n if (interpolation.styles !== undefined) {\n var next = interpolation.next;\n\n if (next !== undefined) {\n // not the most efficient thing ever but this is a pretty rare case\n // and there will be very few iterations of this generally\n while (next !== undefined) {\n cursor = {\n name: next.name,\n styles: next.styles,\n next: cursor\n };\n next = next.next;\n }\n }\n\n var styles = interpolation.styles + \";\";\n\n if (process.env.NODE_ENV !== 'production' && interpolation.map !== undefined) {\n styles += interpolation.map;\n }\n\n return styles;\n }\n\n return createStringFromObject(mergedProps, registered, interpolation);\n }\n\n case 'function':\n {\n if (mergedProps !== undefined) {\n var previousCursor = cursor;\n var result = interpolation(mergedProps);\n cursor = previousCursor;\n return handleInterpolation(mergedProps, registered, result);\n } else if (process.env.NODE_ENV !== 'production') {\n console.error('Functions that are interpolated in css calls will be stringified.\\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\\n' + 'let dynamicStyle = (props) => css`color: ${props.color}`\\n' + 'It can be called directly with props or interpolated in a styled call like this\\n' + \"let SomeComponent = styled('div')`${dynamicStyle}`\");\n }\n\n break;\n }\n\n case 'string':\n if (process.env.NODE_ENV !== 'production') {\n var matched = [];\n var replaced = interpolation.replace(animationRegex, function (match, p1, p2) {\n var fakeVarName = \"animation\" + matched.length;\n matched.push(\"const \" + fakeVarName + \" = keyframes`\" + p2.replace(/^@keyframes animation-\\w+/, '') + \"`\");\n return \"${\" + fakeVarName + \"}\";\n });\n\n if (matched.length) {\n console.error('`keyframes` output got interpolated into plain string, please wrap it with `css`.\\n\\n' + 'Instead of doing this:\\n\\n' + [].concat(matched, [\"`\" + replaced + \"`\"]).join('\\n') + '\\n\\nYou should wrap it with `css` like this:\\n\\n' + (\"css`\" + replaced + \"`\"));\n }\n }\n\n break;\n } // finalize string values (regular strings and functions interpolated into css calls)\n\n\n if (registered == null) {\n return interpolation;\n }\n\n var cached = registered[interpolation];\n return cached !== undefined ? cached : interpolation;\n}\n\nfunction createStringFromObject(mergedProps, registered, obj) {\n var string = '';\n\n if (Array.isArray(obj)) {\n for (var i = 0; i < obj.length; i++) {\n string += handleInterpolation(mergedProps, registered, obj[i]) + \";\";\n }\n } else {\n for (var _key in obj) {\n var value = obj[_key];\n\n if (typeof value !== 'object') {\n if (registered != null && registered[value] !== undefined) {\n string += _key + \"{\" + registered[value] + \"}\";\n } else if (isProcessableValue(value)) {\n string += processStyleName(_key) + \":\" + processStyleValue(_key, value) + \";\";\n }\n } else {\n if (_key === 'NO_COMPONENT_SELECTOR' && process.env.NODE_ENV !== 'production') {\n throw new Error(noComponentSelectorMessage);\n }\n\n if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {\n for (var _i = 0; _i < value.length; _i++) {\n if (isProcessableValue(value[_i])) {\n string += processStyleName(_key) + \":\" + processStyleValue(_key, value[_i]) + \";\";\n }\n }\n } else {\n var interpolated = handleInterpolation(mergedProps, registered, value);\n\n switch (_key) {\n case 'animation':\n case 'animationName':\n {\n string += processStyleName(_key) + \":\" + interpolated + \";\";\n break;\n }\n\n default:\n {\n if (process.env.NODE_ENV !== 'production' && _key === 'undefined') {\n console.error(UNDEFINED_AS_OBJECT_KEY_ERROR);\n }\n\n string += _key + \"{\" + interpolated + \"}\";\n }\n }\n }\n }\n }\n }\n\n return string;\n}\n\nvar labelPattern = /label:\\s*([^\\s;\\n{]+)\\s*(;|$)/g;\nvar sourceMapPattern;\n\nif (process.env.NODE_ENV !== 'production') {\n sourceMapPattern = /\\/\\*#\\ssourceMappingURL=data:application\\/json;\\S+\\s+\\*\\//g;\n} // this is the cursor for keyframes\n// keyframes are stored on the SerializedStyles object as a linked list\n\n\nvar cursor;\nvar serializeStyles = function serializeStyles(args, registered, mergedProps) {\n if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {\n return args[0];\n }\n\n var stringMode = true;\n var styles = '';\n cursor = undefined;\n var strings = args[0];\n\n if (strings == null || strings.raw === undefined) {\n stringMode = false;\n styles += handleInterpolation(mergedProps, registered, strings);\n } else {\n if (process.env.NODE_ENV !== 'production' && strings[0] === undefined) {\n console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);\n }\n\n styles += strings[0];\n } // we start at 1 since we've already handled the first arg\n\n\n for (var i = 1; i < args.length; i++) {\n styles += handleInterpolation(mergedProps, registered, args[i]);\n\n if (stringMode) {\n if (process.env.NODE_ENV !== 'production' && strings[i] === undefined) {\n console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR);\n }\n\n styles += strings[i];\n }\n }\n\n var sourceMap;\n\n if (process.env.NODE_ENV !== 'production') {\n styles = styles.replace(sourceMapPattern, function (match) {\n sourceMap = match;\n return '';\n });\n } // using a global regex with .exec is stateful so lastIndex has to be reset each time\n\n\n labelPattern.lastIndex = 0;\n var identifierName = '';\n var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5\n\n while ((match = labelPattern.exec(styles)) !== null) {\n identifierName += '-' + // $FlowFixMe we know it's not null\n match[1];\n }\n\n var name = hashString(styles) + identifierName;\n\n if (process.env.NODE_ENV !== 'production') {\n // $FlowFixMe SerializedStyles type doesn't have toString property (and we don't want to add it)\n return {\n name: name,\n styles: styles,\n map: sourceMap,\n next: cursor,\n toString: function toString() {\n return \"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).\";\n }\n };\n }\n\n return {\n name: name,\n styles: styles,\n next: cursor\n };\n};\n\nexport { serializeStyles };\n","/* eslint-disable */\n// Inspired by https://github.com/garycourt/murmurhash-js\n// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86\nfunction murmur2(str) {\n // 'm' and 'r' are mixing constants generated offline.\n // They're not really 'magic', they just happen to work well.\n // const m = 0x5bd1e995;\n // const r = 24;\n // Initialize the hash\n var h = 0; // Mix 4 bytes at a time into the hash\n\n var k,\n i = 0,\n len = str.length;\n\n for (; len >= 4; ++i, len -= 4) {\n k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;\n k =\n /* Math.imul(k, m): */\n (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);\n k ^=\n /* k >>> r: */\n k >>> 24;\n h =\n /* Math.imul(k, m): */\n (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^\n /* Math.imul(h, m): */\n (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);\n } // Handle the last few bytes of the input array\n\n\n switch (len) {\n case 3:\n h ^= (str.charCodeAt(i + 2) & 0xff) << 16;\n\n case 2:\n h ^= (str.charCodeAt(i + 1) & 0xff) << 8;\n\n case 1:\n h ^= str.charCodeAt(i) & 0xff;\n h =\n /* Math.imul(h, m): */\n (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);\n } // Do a few final mixes of the hash to ensure the last few\n // bytes are well-incorporated.\n\n\n h ^= h >>> 13;\n h =\n /* Math.imul(h, m): */\n (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);\n return ((h ^ h >>> 15) >>> 0).toString(36);\n}\n\nexport { murmur2 as default };\n","import * as React from 'react';\n\nvar syncFallback = function syncFallback(create) {\n return create();\n};\n\nvar useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : false;\nvar useInsertionEffectAlwaysWithSyncFallback = useInsertionEffect || syncFallback;\nvar useInsertionEffectWithLayoutFallback = useInsertionEffect || React.useLayoutEffect;\n\nexport { useInsertionEffectAlwaysWithSyncFallback, useInsertionEffectWithLayoutFallback };\n","var isBrowser = \"object\" !== 'undefined';\nfunction getRegisteredStyles(registered, registeredStyles, classNames) {\n var rawClassName = '';\n classNames.split(' ').forEach(function (className) {\n if (registered[className] !== undefined) {\n registeredStyles.push(registered[className] + \";\");\n } else {\n rawClassName += className + \" \";\n }\n });\n return rawClassName;\n}\nvar registerStyles = function registerStyles(cache, serialized, isStringTag) {\n var className = cache.key + \"-\" + serialized.name;\n\n if ( // we only need to add the styles to the registered cache if the\n // class name could be used further down\n // the tree but if it's a string tag, we know it won't\n // so we don't have to add it to registered cache.\n // this improves memory usage since we can avoid storing the whole style string\n (isStringTag === false || // we need to always store it if we're in compat mode and\n // in node since emotion-server relies on whether a style is in\n // the registered cache to know whether a style is global or not\n // also, note that this check will be dead code eliminated in the browser\n isBrowser === false ) && cache.registered[className] === undefined) {\n cache.registered[className] = serialized.styles;\n }\n};\nvar insertStyles = function insertStyles(cache, serialized, isStringTag) {\n registerStyles(cache, serialized, isStringTag);\n var className = cache.key + \"-\" + serialized.name;\n\n if (cache.inserted[serialized.name] === undefined) {\n var current = serialized;\n\n do {\n cache.insert(serialized === current ? \".\" + className : '', current, cache.sheet, true);\n\n current = current.next;\n } while (current !== undefined);\n }\n};\n\nexport { getRegisteredStyles, insertStyles, registerStyles };\n","'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { exactProp, HTMLElementType, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useForkRef as useForkRef, unstable_setRef as setRef } from '@mui/utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction getContainer(container) {\n return typeof container === 'function' ? container() : container;\n}\n\n/**\n * Portals provide a first-class way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n *\n * Demos:\n *\n * - [Portal](https://mui.com/base-ui/react-portal/)\n *\n * API:\n *\n * - [Portal API](https://mui.com/base-ui/react-portal/components-api/#portal)\n */\nconst Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef) {\n const {\n children,\n container,\n disablePortal = false\n } = props;\n const [mountNode, setMountNode] = React.useState(null);\n // @ts-expect-error TODO upstream fix\n const handleRef = useForkRef( /*#__PURE__*/React.isValidElement(children) ? children.ref : null, forwardedRef);\n useEnhancedEffect(() => {\n if (!disablePortal) {\n setMountNode(getContainer(container) || document.body);\n }\n }, [container, disablePortal]);\n useEnhancedEffect(() => {\n if (mountNode && !disablePortal) {\n setRef(forwardedRef, mountNode);\n return () => {\n setRef(forwardedRef, null);\n };\n }\n return undefined;\n }, [forwardedRef, mountNode, disablePortal]);\n if (disablePortal) {\n if ( /*#__PURE__*/React.isValidElement(children)) {\n const newProps = {\n ref: handleRef\n };\n return /*#__PURE__*/React.cloneElement(children, newProps);\n }\n return /*#__PURE__*/_jsx(React.Fragment, {\n children: children\n });\n }\n return /*#__PURE__*/_jsx(React.Fragment, {\n children: mountNode ? /*#__PURE__*/ReactDOM.createPortal(children, mountNode) : mountNode\n });\n});\nprocess.env.NODE_ENV !== \"production\" ? Portal.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit TypeScript types and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * The children to render into the `container`.\n */\n children: PropTypes.node,\n /**\n * An HTML element or function that returns one.\n * The `container` will have the portal children appended to it.\n *\n * By default, it uses the body of the top-level document object,\n * so it's simply `document.body` most of the time.\n */\n container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),\n /**\n * The `children` will be under the DOM hierarchy of the parent component.\n * @default false\n */\n disablePortal: PropTypes.bool\n} : void 0;\nif (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line\n Portal['propTypes' + ''] = exactProp(Portal.propTypes);\n}\nexport { Portal };","'use client';\n\nimport * as React from 'react';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst defaultContextValue = {\n disableDefaultClasses: false\n};\nconst ClassNameConfiguratorContext = /*#__PURE__*/React.createContext(defaultContextValue);\n/**\n * @ignore - internal hook.\n *\n * Wraps the `generateUtilityClass` function and controls how the classes are generated.\n * Currently it only affects whether the classes are applied or not.\n *\n * @returns Function to be called with the `generateUtilityClass` function specific to a component to generate the classes.\n */\nexport function useClassNamesOverride(generateUtilityClass) {\n const {\n disableDefaultClasses\n } = React.useContext(ClassNameConfiguratorContext);\n return slot => {\n if (disableDefaultClasses) {\n return '';\n }\n return generateUtilityClass(slot);\n };\n}\n\n/**\n * Allows to configure the components within to not apply any built-in classes.\n */\nexport function ClassNameConfigurator(props) {\n const {\n disableDefaultClasses,\n children\n } = props;\n const contextValue = React.useMemo(() => ({\n disableDefaultClasses: disableDefaultClasses != null ? disableDefaultClasses : false\n }), [disableDefaultClasses]);\n return /*#__PURE__*/_jsx(ClassNameConfiguratorContext.Provider, {\n value: contextValue,\n children: children\n });\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport { isHostComponent } from './isHostComponent';\n\n/**\n * Type of the ownerState based on the type of an element it applies to.\n * This resolves to the provided OwnerState for React components and `undefined` for host components.\n * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.\n */\n\n/**\n * Appends the ownerState object to the props, merging with the existing one if necessary.\n *\n * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node or undefined, `ownerState` is not applied.\n * @param otherProps Props of the element.\n * @param ownerState\n */\nexport function appendOwnerState(elementType, otherProps, ownerState) {\n if (elementType === undefined || isHostComponent(elementType)) {\n return otherProps;\n }\n return _extends({}, otherProps, {\n ownerState: _extends({}, otherProps.ownerState, ownerState)\n });\n}","/**\n * Determines if a given element is a DOM element name (i.e. not a React component).\n */\nexport function isHostComponent(element) {\n return typeof element === 'string';\n}","/**\n * If `componentProps` is a function, calls it with the provided `ownerState`.\n * Otherwise, just returns `componentProps`.\n */\nexport function resolveComponentProps(componentProps, ownerState, slotState) {\n if (typeof componentProps === 'function') {\n return componentProps(ownerState, slotState);\n }\n return componentProps;\n}","/**\n * Removes event handlers from the given object.\n * A field is considered an event handler if it is a function with a name beginning with `on`.\n *\n * @param object Object to remove event handlers from.\n * @returns Object with event handlers removed.\n */\nexport function omitEventHandlers(object) {\n if (object === undefined) {\n return {};\n }\n const result = {};\n Object.keys(object).filter(prop => !(prop.match(/^on[A-Z]/) && typeof object[prop] === 'function')).forEach(prop => {\n result[prop] = object[prop];\n });\n return result;\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport clsx from 'clsx';\nimport { extractEventHandlers } from './extractEventHandlers';\nimport { omitEventHandlers } from './omitEventHandlers';\n/**\n * Merges the slot component internal props (usually coming from a hook)\n * with the externally provided ones.\n *\n * The merge order is (the latter overrides the former):\n * 1. The internal props (specified as a getter function to work with get*Props hook result)\n * 2. Additional props (specified internally on a Base UI component)\n * 3. External props specified on the owner component. These should only be used on a root slot.\n * 4. External props specified in the `slotProps.*` prop.\n * 5. The `className` prop - combined from all the above.\n * @param parameters\n * @returns\n */\nexport function mergeSlotProps(parameters) {\n const {\n getSlotProps,\n additionalProps,\n externalSlotProps,\n externalForwardedProps,\n className\n } = parameters;\n if (!getSlotProps) {\n // The simpler case - getSlotProps is not defined, so no internal event handlers are defined,\n // so we can simply merge all the props without having to worry about extracting event handlers.\n const joinedClasses = clsx(externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className, className, additionalProps == null ? void 0 : additionalProps.className);\n const mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);\n const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);\n if (joinedClasses.length > 0) {\n props.className = joinedClasses;\n }\n if (Object.keys(mergedStyle).length > 0) {\n props.style = mergedStyle;\n }\n return {\n props,\n internalRef: undefined\n };\n }\n\n // In this case, getSlotProps is responsible for calling the external event handlers.\n // We don't need to include them in the merged props because of this.\n\n const eventHandlers = extractEventHandlers(_extends({}, externalForwardedProps, externalSlotProps));\n const componentsPropsWithoutEventHandlers = omitEventHandlers(externalSlotProps);\n const otherPropsWithoutEventHandlers = omitEventHandlers(externalForwardedProps);\n const internalSlotProps = getSlotProps(eventHandlers);\n\n // The order of classes is important here.\n // Emotion (that we use in libraries consuming Base UI) depends on this order\n // to properly override style. It requires the most important classes to be last\n // (see https://github.com/mui/material-ui/pull/33205) for the related discussion.\n const joinedClasses = clsx(internalSlotProps == null ? void 0 : internalSlotProps.className, additionalProps == null ? void 0 : additionalProps.className, className, externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className);\n const mergedStyle = _extends({}, internalSlotProps == null ? void 0 : internalSlotProps.style, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);\n const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);\n if (joinedClasses.length > 0) {\n props.className = joinedClasses;\n }\n if (Object.keys(mergedStyle).length > 0) {\n props.style = mergedStyle;\n }\n return {\n props,\n internalRef: internalSlotProps.ref\n };\n}","/**\n * Extracts event handlers from a given object.\n * A prop is considered an event handler if it is a function and its name starts with `on`.\n *\n * @param object An object to extract event handlers from.\n * @param excludeKeys An array of keys to exclude from the returned object.\n */\nexport function extractEventHandlers(object, excludeKeys = []) {\n if (object === undefined) {\n return {};\n }\n const result = {};\n Object.keys(object).filter(prop => prop.match(/^on[A-Z]/) && typeof object[prop] === 'function' && !excludeKeys.includes(prop)).forEach(prop => {\n result[prop] = object[prop];\n });\n return result;\n}","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"elementType\", \"externalSlotProps\", \"ownerState\", \"skipResolvingSlotProps\"];\nimport { unstable_useForkRef as useForkRef } from '@mui/utils';\nimport { appendOwnerState } from './appendOwnerState';\nimport { mergeSlotProps } from './mergeSlotProps';\nimport { resolveComponentProps } from './resolveComponentProps';\n/**\n * @ignore - do not document.\n * Builds the props to be passed into the slot of an unstyled component.\n * It merges the internal props of the component with the ones supplied by the user, allowing to customize the behavior.\n * If the slot component is not a host component, it also merges in the `ownerState`.\n *\n * @param parameters.getSlotProps - A function that returns the props to be passed to the slot component.\n */\nexport function useSlotProps(parameters) {\n var _parameters$additiona;\n const {\n elementType,\n externalSlotProps,\n ownerState,\n skipResolvingSlotProps = false\n } = parameters,\n rest = _objectWithoutPropertiesLoose(parameters, _excluded);\n const resolvedComponentsProps = skipResolvingSlotProps ? {} : resolveComponentProps(externalSlotProps, ownerState);\n const {\n props: mergedProps,\n internalRef\n } = mergeSlotProps(_extends({}, rest, {\n externalSlotProps: resolvedComponentsProps\n }));\n const ref = useForkRef(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, (_parameters$additiona = parameters.additionalProps) == null ? void 0 : _parameters$additiona.ref);\n const props = appendOwnerState(elementType, _extends({}, mergedProps, {\n ref\n }), ownerState);\n return props;\n}","import generateUtilityClass from '@mui/material/generateUtilityClass';\nimport generateUtilityClasses from '@mui/material/generateUtilityClasses';\nexport function getLoadingButtonUtilityClass(slot) {\n return generateUtilityClass('MuiLoadingButton', slot);\n}\nconst loadingButtonClasses = generateUtilityClasses('MuiLoadingButton', ['root', 'loading', 'loadingIndicator', 'loadingIndicatorCenter', 'loadingIndicatorStart', 'loadingIndicatorEnd', 'endIconLoadingEnd', 'startIconLoadingStart']);\nexport default loadingButtonClasses;","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getAlertUtilityClass(slot) {\n return generateUtilityClass('MuiAlert', slot);\n}\nconst alertClasses = generateUtilityClasses('MuiAlert', ['root', 'action', 'icon', 'message', 'filled', 'filledSuccess', 'filledInfo', 'filledWarning', 'filledError', 'outlined', 'outlinedSuccess', 'outlinedInfo', 'outlinedWarning', 'outlinedError', 'standard', 'standardSuccess', 'standardInfo', 'standardWarning', 'standardError']);\nexport default alertClasses;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"className\", \"color\", \"enableColorOnDark\", \"position\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport capitalize from '../utils/capitalize';\nimport Paper from '../Paper';\nimport { getAppBarUtilityClass } from './appBarClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n color,\n position,\n classes\n } = ownerState;\n const slots = {\n root: ['root', `color${capitalize(color)}`, `position${capitalize(position)}`]\n };\n return composeClasses(slots, getAppBarUtilityClass, classes);\n};\n\n// var2 is the fallback.\n// Ex. var1: 'var(--a)', var2: 'var(--b)'; return: 'var(--a, var(--b))'\nconst joinVars = (var1, var2) => var1 ? `${var1 == null ? void 0 : var1.replace(')', '')}, ${var2})` : var2;\nconst AppBarRoot = styled(Paper, {\n name: 'MuiAppBar',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, styles[`position${capitalize(ownerState.position)}`], styles[`color${capitalize(ownerState.color)}`]];\n }\n})(({\n theme,\n ownerState\n}) => {\n const backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];\n return _extends({\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n boxSizing: 'border-box',\n // Prevent padding issue with the Modal and fixed positioned AppBar.\n flexShrink: 0\n }, ownerState.position === 'fixed' && {\n position: 'fixed',\n zIndex: (theme.vars || theme).zIndex.appBar,\n top: 0,\n left: 'auto',\n right: 0,\n '@media print': {\n // Prevent the app bar to be visible on each printed page.\n position: 'absolute'\n }\n }, ownerState.position === 'absolute' && {\n position: 'absolute',\n zIndex: (theme.vars || theme).zIndex.appBar,\n top: 0,\n left: 'auto',\n right: 0\n }, ownerState.position === 'sticky' && {\n // ⚠️ sticky is not supported by IE11.\n position: 'sticky',\n zIndex: (theme.vars || theme).zIndex.appBar,\n top: 0,\n left: 'auto',\n right: 0\n }, ownerState.position === 'static' && {\n position: 'static'\n }, ownerState.position === 'relative' && {\n position: 'relative'\n }, !theme.vars && _extends({}, ownerState.color === 'default' && {\n backgroundColor: backgroundColorDefault,\n color: theme.palette.getContrastText(backgroundColorDefault)\n }, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {\n backgroundColor: theme.palette[ownerState.color].main,\n color: theme.palette[ownerState.color].contrastText\n }, ownerState.color === 'inherit' && {\n color: 'inherit'\n }, theme.palette.mode === 'dark' && !ownerState.enableColorOnDark && {\n backgroundColor: null,\n color: null\n }, ownerState.color === 'transparent' && _extends({\n backgroundColor: 'transparent',\n color: 'inherit'\n }, theme.palette.mode === 'dark' && {\n backgroundImage: 'none'\n })), theme.vars && _extends({}, ownerState.color === 'default' && {\n '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette.AppBar.defaultBg : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg),\n '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette.text.primary : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary)\n }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {\n '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),\n '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)\n }, {\n backgroundColor: 'var(--AppBar-background)',\n color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'\n }, ownerState.color === 'transparent' && {\n backgroundImage: 'none',\n backgroundColor: 'transparent',\n color: 'inherit'\n }));\n});\nconst AppBar = /*#__PURE__*/React.forwardRef(function AppBar(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiAppBar'\n });\n const {\n className,\n color = 'primary',\n enableColorOnDark = false,\n position = 'fixed'\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n color,\n position,\n enableColorOnDark\n });\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(AppBarRoot, _extends({\n square: true,\n component: \"header\",\n ownerState: ownerState,\n elevation: 4,\n className: clsx(classes.root, className, position === 'fixed' && 'mui-fixed'),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? AppBar.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The color of the component.\n * It supports both default and custom theme colors, which can be added as shown in the\n * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).\n * @default 'primary'\n */\n color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']), PropTypes.string]),\n /**\n * If true, the `color` prop is applied in dark mode.\n * @default false\n */\n enableColorOnDark: PropTypes.bool,\n /**\n * The positioning type. The behavior of the different options is described\n * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).\n * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.\n * @default 'fixed'\n */\n position: PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky']),\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\nexport default AppBar;","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getAppBarUtilityClass(slot) {\n return generateUtilityClass('MuiAppBar', slot);\n}\nconst appBarClasses = generateUtilityClasses('MuiAppBar', ['root', 'positionFixed', 'positionAbsolute', 'positionSticky', 'positionStatic', 'positionRelative', 'colorDefault', 'colorPrimary', 'colorSecondary', 'colorInherit', 'colorTransparent']);\nexport default appBarClasses;","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getAutocompleteUtilityClass(slot) {\n return generateUtilityClass('MuiAutocomplete', slot);\n}\nconst autocompleteClasses = generateUtilityClasses('MuiAutocomplete', ['root', 'expanded', 'fullWidth', 'focused', 'focusVisible', 'tag', 'tagSizeSmall', 'tagSizeMedium', 'hasPopupIcon', 'hasClearIcon', 'inputRoot', 'input', 'inputFocused', 'endAdornment', 'clearIndicator', 'popupIndicator', 'popupIndicatorOpen', 'popper', 'popperDisablePortal', 'paper', 'listbox', 'loading', 'noOptions', 'option', 'groupLabel', 'groupUl']);\nexport default autocompleteClasses;","'use client';\n\nimport * as React from 'react';\nimport createSvgIcon from '../../utils/createSvgIcon';\n\n/**\n * @ignore - internal component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default createSvgIcon( /*#__PURE__*/_jsx(\"path\", {\n d: \"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\n}), 'Person');","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getAvatarUtilityClass(slot) {\n return generateUtilityClass('MuiAvatar', slot);\n}\nconst avatarClasses = generateUtilityClasses('MuiAvatar', ['root', 'colorDefault', 'circular', 'rounded', 'square', 'img', 'fallback']);\nexport default avatarClasses;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"alt\", \"children\", \"className\", \"component\", \"imgProps\", \"sizes\", \"src\", \"srcSet\", \"variant\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport Person from '../internal/svg-icons/Person';\nimport { getAvatarUtilityClass } from './avatarClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n variant,\n colorDefault\n } = ownerState;\n const slots = {\n root: ['root', variant, colorDefault && 'colorDefault'],\n img: ['img'],\n fallback: ['fallback']\n };\n return composeClasses(slots, getAvatarUtilityClass, classes);\n};\nconst AvatarRoot = styled('div', {\n name: 'MuiAvatar',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, styles[ownerState.variant], ownerState.colorDefault && styles.colorDefault];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n width: 40,\n height: 40,\n fontFamily: theme.typography.fontFamily,\n fontSize: theme.typography.pxToRem(20),\n lineHeight: 1,\n borderRadius: '50%',\n overflow: 'hidden',\n userSelect: 'none'\n}, ownerState.variant === 'rounded' && {\n borderRadius: (theme.vars || theme).shape.borderRadius\n}, ownerState.variant === 'square' && {\n borderRadius: 0\n}, ownerState.colorDefault && _extends({\n color: (theme.vars || theme).palette.background.default\n}, theme.vars ? {\n backgroundColor: theme.vars.palette.Avatar.defaultBg\n} : {\n backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]\n})));\nconst AvatarImg = styled('img', {\n name: 'MuiAvatar',\n slot: 'Img',\n overridesResolver: (props, styles) => styles.img\n})({\n width: '100%',\n height: '100%',\n textAlign: 'center',\n // Handle non-square image. The property isn't supported by IE11.\n objectFit: 'cover',\n // Hide alt text.\n color: 'transparent',\n // Hide the image broken icon, only works on Chrome.\n textIndent: 10000\n});\nconst AvatarFallback = styled(Person, {\n name: 'MuiAvatar',\n slot: 'Fallback',\n overridesResolver: (props, styles) => styles.fallback\n})({\n width: '75%',\n height: '75%'\n});\nfunction useLoaded({\n crossOrigin,\n referrerPolicy,\n src,\n srcSet\n}) {\n const [loaded, setLoaded] = React.useState(false);\n React.useEffect(() => {\n if (!src && !srcSet) {\n return undefined;\n }\n setLoaded(false);\n let active = true;\n const image = new Image();\n image.onload = () => {\n if (!active) {\n return;\n }\n setLoaded('loaded');\n };\n image.onerror = () => {\n if (!active) {\n return;\n }\n setLoaded('error');\n };\n image.crossOrigin = crossOrigin;\n image.referrerPolicy = referrerPolicy;\n image.src = src;\n if (srcSet) {\n image.srcset = srcSet;\n }\n return () => {\n active = false;\n };\n }, [crossOrigin, referrerPolicy, src, srcSet]);\n return loaded;\n}\nconst Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiAvatar'\n });\n const {\n alt,\n children: childrenProp,\n className,\n component = 'div',\n imgProps,\n sizes,\n src,\n srcSet,\n variant = 'circular'\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n let children = null;\n\n // Use a hook instead of onError on the img element to support server-side rendering.\n const loaded = useLoaded(_extends({}, imgProps, {\n src,\n srcSet\n }));\n const hasImg = src || srcSet;\n const hasImgNotFailing = hasImg && loaded !== 'error';\n const ownerState = _extends({}, props, {\n colorDefault: !hasImgNotFailing,\n component,\n variant\n });\n const classes = useUtilityClasses(ownerState);\n if (hasImgNotFailing) {\n children = /*#__PURE__*/_jsx(AvatarImg, _extends({\n alt: alt,\n src: src,\n srcSet: srcSet,\n sizes: sizes,\n ownerState: ownerState,\n className: classes.img\n }, imgProps));\n } else if (childrenProp != null) {\n children = childrenProp;\n } else if (hasImg && alt) {\n children = alt[0];\n } else {\n children = /*#__PURE__*/_jsx(AvatarFallback, {\n ownerState: ownerState,\n className: classes.fallback\n });\n }\n return /*#__PURE__*/_jsx(AvatarRoot, _extends({\n as: component,\n ownerState: ownerState,\n className: clsx(classes.root, className),\n ref: ref\n }, other, {\n children: children\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Avatar.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * Used in combination with `src` or `srcSet` to\n * provide an alt attribute for the rendered `img` element.\n */\n alt: PropTypes.string,\n /**\n * Used to render icon or text elements inside the Avatar if `src` is not set.\n * This can be an element, or just a string.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes.elementType,\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.\n * It can be used to listen for the loading error event.\n */\n imgProps: PropTypes.object,\n /**\n * The `sizes` attribute for the `img` element.\n */\n sizes: PropTypes.string,\n /**\n * The `src` attribute for the `img` element.\n */\n src: PropTypes.string,\n /**\n * The `srcSet` attribute for the `img` element.\n * Use this attribute for responsive image display.\n */\n srcSet: PropTypes.string,\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n /**\n * The shape of the avatar.\n * @default 'circular'\n */\n variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['circular', 'rounded', 'square']), PropTypes.string])\n} : void 0;\nexport default Avatar;","'use client';\n\nimport * as React from 'react';\nconst usePreviousProps = value => {\n const ref = React.useRef({});\n React.useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n};\nexport default usePreviousProps;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"anchorOrigin\", \"className\", \"classes\", \"component\", \"components\", \"componentsProps\", \"children\", \"overlap\", \"color\", \"invisible\", \"max\", \"badgeContent\", \"slots\", \"slotProps\", \"showZero\", \"variant\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { usePreviousProps } from '@mui/utils';\nimport { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';\nimport { useBadge } from '@mui/base/useBadge';\nimport { useSlotProps } from '@mui/base';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport capitalize from '../utils/capitalize';\nimport badgeClasses, { getBadgeUtilityClass } from './badgeClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst RADIUS_STANDARD = 10;\nconst RADIUS_DOT = 4;\nconst useUtilityClasses = ownerState => {\n const {\n color,\n anchorOrigin,\n invisible,\n overlap,\n variant,\n classes = {}\n } = ownerState;\n const slots = {\n root: ['root'],\n badge: ['badge', variant, invisible && 'invisible', `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`, `overlap${capitalize(overlap)}`, color !== 'default' && `color${capitalize(color)}`]\n };\n return composeClasses(slots, getBadgeUtilityClass, classes);\n};\nconst BadgeRoot = styled('span', {\n name: 'MuiBadge',\n slot: 'Root',\n overridesResolver: (props, styles) => styles.root\n})({\n position: 'relative',\n display: 'inline-flex',\n // For correct alignment with the text.\n verticalAlign: 'middle',\n flexShrink: 0\n});\nconst BadgeBadge = styled('span', {\n name: 'MuiBadge',\n slot: 'Badge',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.badge, styles[ownerState.variant], styles[`anchorOrigin${capitalize(ownerState.anchorOrigin.vertical)}${capitalize(ownerState.anchorOrigin.horizontal)}${capitalize(ownerState.overlap)}`], ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.invisible && styles.invisible];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n justifyContent: 'center',\n alignContent: 'center',\n alignItems: 'center',\n position: 'absolute',\n boxSizing: 'border-box',\n fontFamily: theme.typography.fontFamily,\n fontWeight: theme.typography.fontWeightMedium,\n fontSize: theme.typography.pxToRem(12),\n minWidth: RADIUS_STANDARD * 2,\n lineHeight: 1,\n padding: '0 6px',\n height: RADIUS_STANDARD * 2,\n borderRadius: RADIUS_STANDARD,\n zIndex: 1,\n // Render the badge on top of potential ripples.\n transition: theme.transitions.create('transform', {\n easing: theme.transitions.easing.easeInOut,\n duration: theme.transitions.duration.enteringScreen\n })\n}, ownerState.color !== 'default' && {\n backgroundColor: (theme.vars || theme).palette[ownerState.color].main,\n color: (theme.vars || theme).palette[ownerState.color].contrastText\n}, ownerState.variant === 'dot' && {\n borderRadius: RADIUS_DOT,\n height: RADIUS_DOT * 2,\n minWidth: RADIUS_DOT * 2,\n padding: 0\n}, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular' && {\n top: 0,\n right: 0,\n transform: 'scale(1) translate(50%, -50%)',\n transformOrigin: '100% 0%',\n [`&.${badgeClasses.invisible}`]: {\n transform: 'scale(0) translate(50%, -50%)'\n }\n}, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'rectangular' && {\n bottom: 0,\n right: 0,\n transform: 'scale(1) translate(50%, 50%)',\n transformOrigin: '100% 100%',\n [`&.${badgeClasses.invisible}`]: {\n transform: 'scale(0) translate(50%, 50%)'\n }\n}, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {\n top: 0,\n left: 0,\n transform: 'scale(1) translate(-50%, -50%)',\n transformOrigin: '0% 0%',\n [`&.${badgeClasses.invisible}`]: {\n transform: 'scale(0) translate(-50%, -50%)'\n }\n}, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'rectangular' && {\n bottom: 0,\n left: 0,\n transform: 'scale(1) translate(-50%, 50%)',\n transformOrigin: '0% 100%',\n [`&.${badgeClasses.invisible}`]: {\n transform: 'scale(0) translate(-50%, 50%)'\n }\n}, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {\n top: '14%',\n right: '14%',\n transform: 'scale(1) translate(50%, -50%)',\n transformOrigin: '100% 0%',\n [`&.${badgeClasses.invisible}`]: {\n transform: 'scale(0) translate(50%, -50%)'\n }\n}, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'right' && ownerState.overlap === 'circular' && {\n bottom: '14%',\n right: '14%',\n transform: 'scale(1) translate(50%, 50%)',\n transformOrigin: '100% 100%',\n [`&.${badgeClasses.invisible}`]: {\n transform: 'scale(0) translate(50%, 50%)'\n }\n}, ownerState.anchorOrigin.vertical === 'top' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {\n top: '14%',\n left: '14%',\n transform: 'scale(1) translate(-50%, -50%)',\n transformOrigin: '0% 0%',\n [`&.${badgeClasses.invisible}`]: {\n transform: 'scale(0) translate(-50%, -50%)'\n }\n}, ownerState.anchorOrigin.vertical === 'bottom' && ownerState.anchorOrigin.horizontal === 'left' && ownerState.overlap === 'circular' && {\n bottom: '14%',\n left: '14%',\n transform: 'scale(1) translate(-50%, 50%)',\n transformOrigin: '0% 100%',\n [`&.${badgeClasses.invisible}`]: {\n transform: 'scale(0) translate(-50%, 50%)'\n }\n}, ownerState.invisible && {\n transition: theme.transitions.create('transform', {\n easing: theme.transitions.easing.easeInOut,\n duration: theme.transitions.duration.leavingScreen\n })\n}));\nconst Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {\n var _ref, _slots$root, _ref2, _slots$badge, _slotProps$root, _slotProps$badge;\n const props = useThemeProps({\n props: inProps,\n name: 'MuiBadge'\n });\n const {\n anchorOrigin: anchorOriginProp = {\n vertical: 'top',\n horizontal: 'right'\n },\n className,\n component,\n components = {},\n componentsProps = {},\n children,\n overlap: overlapProp = 'rectangular',\n color: colorProp = 'default',\n invisible: invisibleProp = false,\n max: maxProp = 99,\n badgeContent: badgeContentProp,\n slots,\n slotProps,\n showZero = false,\n variant: variantProp = 'standard'\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const {\n badgeContent,\n invisible: invisibleFromHook,\n max,\n displayValue: displayValueFromHook\n } = useBadge({\n max: maxProp,\n invisible: invisibleProp,\n badgeContent: badgeContentProp,\n showZero\n });\n const prevProps = usePreviousProps({\n anchorOrigin: anchorOriginProp,\n color: colorProp,\n overlap: overlapProp,\n variant: variantProp,\n badgeContent: badgeContentProp\n });\n const invisible = invisibleFromHook || badgeContent == null && variantProp !== 'dot';\n const {\n color = colorProp,\n overlap = overlapProp,\n anchorOrigin = anchorOriginProp,\n variant = variantProp\n } = invisible ? prevProps : props;\n const displayValue = variant !== 'dot' ? displayValueFromHook : undefined;\n const ownerState = _extends({}, props, {\n badgeContent,\n invisible,\n max,\n displayValue,\n showZero,\n anchorOrigin,\n color,\n overlap,\n variant\n });\n const classes = useUtilityClasses(ownerState);\n\n // support both `slots` and `components` for backward compatibility\n const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : BadgeRoot;\n const BadgeSlot = (_ref2 = (_slots$badge = slots == null ? void 0 : slots.badge) != null ? _slots$badge : components.Badge) != null ? _ref2 : BadgeBadge;\n const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;\n const badgeSlotProps = (_slotProps$badge = slotProps == null ? void 0 : slotProps.badge) != null ? _slotProps$badge : componentsProps.badge;\n const rootProps = useSlotProps({\n elementType: RootSlot,\n externalSlotProps: rootSlotProps,\n externalForwardedProps: other,\n additionalProps: {\n ref,\n as: component\n },\n ownerState,\n className: clsx(rootSlotProps == null ? void 0 : rootSlotProps.className, classes.root, className)\n });\n const badgeProps = useSlotProps({\n elementType: BadgeSlot,\n externalSlotProps: badgeSlotProps,\n ownerState,\n className: clsx(classes.badge, badgeSlotProps == null ? void 0 : badgeSlotProps.className)\n });\n return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {\n children: [children, /*#__PURE__*/_jsx(BadgeSlot, _extends({}, badgeProps, {\n children: displayValue\n }))]\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Badge.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * The anchor of the badge.\n * @default {\n * vertical: 'top',\n * horizontal: 'right',\n * }\n */\n anchorOrigin: PropTypes.shape({\n horizontal: PropTypes.oneOf(['left', 'right']).isRequired,\n vertical: PropTypes.oneOf(['bottom', 'top']).isRequired\n }),\n /**\n * The content rendered within the badge.\n */\n badgeContent: PropTypes.node,\n /**\n * The badge will be added relative to this node.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The color of the component.\n * It supports both default and custom theme colors, which can be added as shown in the\n * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).\n * @default 'default'\n */\n color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes.elementType,\n /**\n * The components used for each slot inside.\n *\n * This prop is an alias for the `slots` prop.\n * It's recommended to use the `slots` prop instead.\n *\n * @default {}\n */\n components: PropTypes.shape({\n Badge: PropTypes.elementType,\n Root: PropTypes.elementType\n }),\n /**\n * The extra props for the slot components.\n * You can override the existing props or add new ones.\n *\n * This prop is an alias for the `slotProps` prop.\n * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.\n *\n * @default {}\n */\n componentsProps: PropTypes.shape({\n badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])\n }),\n /**\n * If `true`, the badge is invisible.\n * @default false\n */\n invisible: PropTypes.bool,\n /**\n * Max count to show.\n * @default 99\n */\n max: PropTypes.number,\n /**\n * Wrapped shape the badge should overlap.\n * @default 'rectangular'\n */\n overlap: PropTypes.oneOf(['circular', 'rectangular']),\n /**\n * Controls whether the badge is hidden when `badgeContent` is zero.\n * @default false\n */\n showZero: PropTypes.bool,\n /**\n * The props used for each slot inside the Badge.\n * @default {}\n */\n slotProps: PropTypes.shape({\n badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])\n }),\n /**\n * The components used for each slot inside the Badge.\n * Either a string to use a HTML element or a component.\n * @default {}\n */\n slots: PropTypes.shape({\n badge: PropTypes.elementType,\n root: PropTypes.elementType\n }),\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n /**\n * The variant to use.\n * @default 'standard'\n */\n variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['dot', 'standard']), PropTypes.string])\n} : void 0;\nexport default Badge;","'use client';\n\nimport { usePreviousProps } from '@mui/utils';\n/**\n *\n * Demos:\n *\n * - [Badge](https://mui.com/base-ui/react-badge/#hook)\n *\n * API:\n *\n * - [useBadge API](https://mui.com/base-ui/react-badge/hooks-api/#use-badge)\n */\nexport function useBadge(parameters) {\n const {\n badgeContent: badgeContentProp,\n invisible: invisibleProp = false,\n max: maxProp = 99,\n showZero = false\n } = parameters;\n const prevProps = usePreviousProps({\n badgeContent: badgeContentProp,\n max: maxProp\n });\n let invisible = invisibleProp;\n if (invisibleProp === false && badgeContentProp === 0 && !showZero) {\n invisible = true;\n }\n const {\n badgeContent,\n max = maxProp\n } = invisible ? prevProps : parameters;\n const displayValue = badgeContent && Number(badgeContent) > max ? `${max}+` : badgeContent;\n return {\n badgeContent,\n invisible,\n max,\n displayValue\n };\n}","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getBadgeUtilityClass(slot) {\n return generateUtilityClass('MuiBadge', slot);\n}\nconst badgeClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular',\n// TODO: v6 remove the overlap value from these class keys\n'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);\nexport default badgeClasses;","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"className\", \"component\"];\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport styled from '@mui/styled-engine';\nimport styleFunctionSx, { extendSxProp } from './styleFunctionSx';\nimport useTheme from './useTheme';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport default function createBox(options = {}) {\n const {\n themeId,\n defaultTheme,\n defaultClassName = 'MuiBox-root',\n generateClassName\n } = options;\n const BoxRoot = styled('div', {\n shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'\n })(styleFunctionSx);\n const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {\n const theme = useTheme(defaultTheme);\n const _extendSxProp = extendSxProp(inProps),\n {\n className,\n component = 'div'\n } = _extendSxProp,\n other = _objectWithoutPropertiesLoose(_extendSxProp, _excluded);\n return /*#__PURE__*/_jsx(BoxRoot, _extends({\n as: component,\n ref: ref,\n className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),\n theme: themeId ? theme[themeId] || theme : theme\n }, other));\n });\n return Box;\n}","'use client';\n\nimport { createBox } from '@mui/system';\nimport PropTypes from 'prop-types';\nimport { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';\nimport { createTheme } from '../styles';\nimport THEME_ID from '../styles/identifier';\nconst defaultTheme = createTheme();\nconst Box = createBox({\n themeId: THEME_ID,\n defaultTheme,\n defaultClassName: 'MuiBox-root',\n generateClassName: ClassNameGenerator.generate\n});\nprocess.env.NODE_ENV !== \"production\" ? Box.propTypes /* remove-proptypes */ = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n /**\n * @ignore\n */\n children: PropTypes.node,\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes.elementType,\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\nexport default Box;","import { Children, cloneElement, isValidElement } from 'react';\n/**\n * Given `this.props.children`, return an object mapping key to child.\n *\n * @param {*} children `this.props.children`\n * @return {object} Mapping of key to child\n */\n\nexport function getChildMapping(children, mapFn) {\n var mapper = function mapper(child) {\n return mapFn && isValidElement(child) ? mapFn(child) : child;\n };\n\n var result = Object.create(null);\n if (children) Children.map(children, function (c) {\n return c;\n }).forEach(function (child) {\n // run the map function here instead so that the key is the computed one\n result[child.key] = mapper(child);\n });\n return result;\n}\n/**\n * When you're adding or removing children some may be added or removed in the\n * same render pass. We want to show *both* since we want to simultaneously\n * animate elements in and out. This function takes a previous set of keys\n * and a new set of keys and merges them with its best guess of the correct\n * ordering. In the future we may expose some of the utilities in\n * ReactMultiChild to make this easy, but for now React itself does not\n * directly have this concept of the union of prevChildren and nextChildren\n * so we implement it here.\n *\n * @param {object} prev prev children as returned from\n * `ReactTransitionChildMapping.getChildMapping()`.\n * @param {object} next next children as returned from\n * `ReactTransitionChildMapping.getChildMapping()`.\n * @return {object} a key set that contains all keys in `prev` and all keys\n * in `next` in a reasonable order.\n */\n\nexport function mergeChildMappings(prev, next) {\n prev = prev || {};\n next = next || {};\n\n function getValueForKey(key) {\n return key in next ? next[key] : prev[key];\n } // For each key of `next`, the list of keys to insert before that key in\n // the combined list\n\n\n var nextKeysPending = Object.create(null);\n var pendingKeys = [];\n\n for (var prevKey in prev) {\n if (prevKey in next) {\n if (pendingKeys.length) {\n nextKeysPending[prevKey] = pendingKeys;\n pendingKeys = [];\n }\n } else {\n pendingKeys.push(prevKey);\n }\n }\n\n var i;\n var childMapping = {};\n\n for (var nextKey in next) {\n if (nextKeysPending[nextKey]) {\n for (i = 0; i < nextKeysPending[nextKey].length; i++) {\n var pendingNextKey = nextKeysPending[nextKey][i];\n childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);\n }\n }\n\n childMapping[nextKey] = getValueForKey(nextKey);\n } // Finally, add the keys which didn't appear before any key in `next`\n\n\n for (i = 0; i < pendingKeys.length; i++) {\n childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);\n }\n\n return childMapping;\n}\n\nfunction getProp(child, prop, props) {\n return props[prop] != null ? props[prop] : child.props[prop];\n}\n\nexport function getInitialChildMapping(props, onExited) {\n return getChildMapping(props.children, function (child) {\n return cloneElement(child, {\n onExited: onExited.bind(null, child),\n in: true,\n appear: getProp(child, 'appear', props),\n enter: getProp(child, 'enter', props),\n exit: getProp(child, 'exit', props)\n });\n });\n}\nexport function getNextChildMapping(nextProps, prevChildMapping, onExited) {\n var nextChildMapping = getChildMapping(nextProps.children);\n var children = mergeChildMappings(prevChildMapping, nextChildMapping);\n Object.keys(children).forEach(function (key) {\n var child = children[key];\n if (!isValidElement(child)) return;\n var hasPrev = (key in prevChildMapping);\n var hasNext = (key in nextChildMapping);\n var prevChild = prevChildMapping[key];\n var isLeaving = isValidElement(prevChild) && !prevChild.props.in; // item is new (entering)\n\n if (hasNext && (!hasPrev || isLeaving)) {\n // console.log('entering', key)\n children[key] = cloneElement(child, {\n onExited: onExited.bind(null, child),\n in: true,\n exit: getProp(child, 'exit', nextProps),\n enter: getProp(child, 'enter', nextProps)\n });\n } else if (!hasNext && hasPrev && !isLeaving) {\n // item is old (exiting)\n // console.log('leaving', key)\n children[key] = cloneElement(child, {\n in: false\n });\n } else if (hasNext && hasPrev && isValidElement(prevChild)) {\n // item hasn't changed transition states\n // copy over the last transition props;\n // console.log('unchanged', key)\n children[key] = cloneElement(child, {\n onExited: onExited.bind(null, child),\n in: prevChild.props.in,\n exit: getProp(child, 'exit', nextProps),\n enter: getProp(child, 'enter', nextProps)\n });\n }\n });\n return children;\n}","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _assertThisInitialized from \"@babel/runtime/helpers/esm/assertThisInitialized\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport TransitionGroupContext from './TransitionGroupContext';\nimport { getChildMapping, getInitialChildMapping, getNextChildMapping } from './utils/ChildMapping';\n\nvar values = Object.values || function (obj) {\n return Object.keys(obj).map(function (k) {\n return obj[k];\n });\n};\n\nvar defaultProps = {\n component: 'div',\n childFactory: function childFactory(child) {\n return child;\n }\n};\n/**\n * The `` component manages a set of transition components\n * (`` and ``) in a list. Like with the transition\n * components, `` is a state machine for managing the mounting\n * and unmounting of components over time.\n *\n * Consider the example below. As items are removed or added to the TodoList the\n * `in` prop is toggled automatically by the ``.\n *\n * Note that `` does not define any animation behavior!\n * Exactly _how_ a list item animates is up to the individual transition\n * component. This means you can mix and match animations across different list\n * items.\n */\n\nvar TransitionGroup = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(TransitionGroup, _React$Component);\n\n function TransitionGroup(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n\n var handleExited = _this.handleExited.bind(_assertThisInitialized(_this)); // Initial children should all be entering, dependent on appear\n\n\n _this.state = {\n contextValue: {\n isMounting: true\n },\n handleExited: handleExited,\n firstRender: true\n };\n return _this;\n }\n\n var _proto = TransitionGroup.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.mounted = true;\n this.setState({\n contextValue: {\n isMounting: false\n }\n });\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.mounted = false;\n };\n\n TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {\n var prevChildMapping = _ref.children,\n handleExited = _ref.handleExited,\n firstRender = _ref.firstRender;\n return {\n children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),\n firstRender: false\n };\n } // node is `undefined` when user provided `nodeRef` prop\n ;\n\n _proto.handleExited = function handleExited(child, node) {\n var currentChildMapping = getChildMapping(this.props.children);\n if (child.key in currentChildMapping) return;\n\n if (child.props.onExited) {\n child.props.onExited(node);\n }\n\n if (this.mounted) {\n this.setState(function (state) {\n var children = _extends({}, state.children);\n\n delete children[child.key];\n return {\n children: children\n };\n });\n }\n };\n\n _proto.render = function render() {\n var _this$props = this.props,\n Component = _this$props.component,\n childFactory = _this$props.childFactory,\n props = _objectWithoutPropertiesLoose(_this$props, [\"component\", \"childFactory\"]);\n\n var contextValue = this.state.contextValue;\n var children = values(this.state.children).map(childFactory);\n delete props.appear;\n delete props.enter;\n delete props.exit;\n\n if (Component === null) {\n return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, {\n value: contextValue\n }, children);\n }\n\n return /*#__PURE__*/React.createElement(TransitionGroupContext.Provider, {\n value: contextValue\n }, /*#__PURE__*/React.createElement(Component, props, children));\n };\n\n return TransitionGroup;\n}(React.Component);\n\nTransitionGroup.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * `` renders a `` by default. You can change this\n * behavior by providing a `component` prop.\n * If you use React v16+ and would like to avoid a wrapping `
` element\n * you can pass in `component={null}`. This is useful if the wrapping div\n * borks your css styles.\n */\n component: PropTypes.any,\n\n /**\n * A set of `
` components, that are toggled `in` and out as they\n * leave. the `` will inject specific transition props, so\n * remember to spread them through if you are wrapping the `` as\n * with our `` example.\n *\n * While this component is meant for multiple `Transition` or `CSSTransition`\n * children, sometimes you may want to have a single transition child with\n * content that you want to be transitioned out and in when you change it\n * (e.g. routes, images etc.) In that case you can change the `key` prop of\n * the transition child as you change its content, this will cause\n * `TransitionGroup` to transition the child out and back in.\n */\n children: PropTypes.node,\n\n /**\n * A convenience prop that enables or disables appear animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n appear: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables enter animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables exit animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * You may need to apply reactive updates to a child as it is exiting.\n * This is generally done by using `cloneElement` however in the case of an exiting\n * child the element has already been removed and not accessible to the consumer.\n *\n * If you do need to update a child as it leaves you can provide a `childFactory`\n * to wrap every child, even the ones that are leaving.\n *\n * @type Function(child: ReactElement) -> ReactElement\n */\n childFactory: PropTypes.func\n} : {};\nTransitionGroup.defaultProps = defaultProps;\nexport default TransitionGroup;","'use client';\n\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\n/**\n * @ignore - internal component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction Ripple(props) {\n const {\n className,\n classes,\n pulsate = false,\n rippleX,\n rippleY,\n rippleSize,\n in: inProp,\n onExited,\n timeout\n } = props;\n const [leaving, setLeaving] = React.useState(false);\n const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);\n const rippleStyles = {\n width: rippleSize,\n height: rippleSize,\n top: -(rippleSize / 2) + rippleY,\n left: -(rippleSize / 2) + rippleX\n };\n const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);\n if (!inProp && !leaving) {\n setLeaving(true);\n }\n React.useEffect(() => {\n if (!inProp && onExited != null) {\n // react-transition-group#onExited\n const timeoutId = setTimeout(onExited, timeout);\n return () => {\n clearTimeout(timeoutId);\n };\n }\n return undefined;\n }, [onExited, inProp, timeout]);\n return /*#__PURE__*/_jsx(\"span\", {\n className: rippleClassName,\n style: rippleStyles,\n children: /*#__PURE__*/_jsx(\"span\", {\n className: childClassName\n })\n });\n}\nprocess.env.NODE_ENV !== \"production\" ? Ripple.propTypes = {\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n /**\n * @ignore - injected from TransitionGroup\n */\n in: PropTypes.bool,\n /**\n * @ignore - injected from TransitionGroup\n */\n onExited: PropTypes.func,\n /**\n * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.\n */\n pulsate: PropTypes.bool,\n /**\n * Diameter of the ripple.\n */\n rippleSize: PropTypes.number,\n /**\n * Horizontal position of the ripple center.\n */\n rippleX: PropTypes.number,\n /**\n * Vertical position of the ripple center.\n */\n rippleY: PropTypes.number,\n /**\n * exit delay\n */\n timeout: PropTypes.number.isRequired\n} : void 0;\nexport default Ripple;","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getTouchRippleUtilityClass(slot) {\n return generateUtilityClass('MuiTouchRipple', slot);\n}\nconst touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);\nexport default touchRippleClasses;","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"center\", \"classes\", \"className\"];\nlet _ = t => t,\n _t,\n _t2,\n _t3,\n _t4;\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\nimport { keyframes } from '@mui/system';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport Ripple from './Ripple';\nimport touchRippleClasses from './touchRippleClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DURATION = 550;\nexport const DELAY_RIPPLE = 80;\nconst enterKeyframe = keyframes(_t || (_t = _`\n 0% {\n transform: scale(0);\n opacity: 0.1;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0.3;\n }\n`));\nconst exitKeyframe = keyframes(_t2 || (_t2 = _`\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n`));\nconst pulsateKeyframe = keyframes(_t3 || (_t3 = _`\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.92);\n }\n\n 100% {\n transform: scale(1);\n }\n`));\nexport const TouchRippleRoot = styled('span', {\n name: 'MuiTouchRipple',\n slot: 'Root'\n})({\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 0,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: 'inherit'\n});\n\n// This `styled()` function invokes keyframes. `styled-components` only supports keyframes\n// in string templates. Do not convert these styles in JS object as it will break.\nexport const TouchRippleRipple = styled(Ripple, {\n name: 'MuiTouchRipple',\n slot: 'Ripple'\n})(_t4 || (_t4 = _`\n opacity: 0;\n position: absolute;\n\n &.${0} {\n opacity: 0.3;\n transform: scale(1);\n animation-name: ${0};\n animation-duration: ${0}ms;\n animation-timing-function: ${0};\n }\n\n &.${0} {\n animation-duration: ${0}ms;\n }\n\n & .${0} {\n opacity: 1;\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: currentColor;\n }\n\n & .${0} {\n opacity: 0;\n animation-name: ${0};\n animation-duration: ${0}ms;\n animation-timing-function: ${0};\n }\n\n & .${0} {\n position: absolute;\n /* @noflip */\n left: 0px;\n top: 0;\n animation-name: ${0};\n animation-duration: 2500ms;\n animation-timing-function: ${0};\n animation-iteration-count: infinite;\n animation-delay: 200ms;\n }\n`), touchRippleClasses.rippleVisible, enterKeyframe, DURATION, ({\n theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.ripplePulsate, ({\n theme\n}) => theme.transitions.duration.shorter, touchRippleClasses.child, touchRippleClasses.childLeaving, exitKeyframe, DURATION, ({\n theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.childPulsate, pulsateKeyframe, ({\n theme\n}) => theme.transitions.easing.easeInOut);\n\n/**\n * @ignore - internal component.\n *\n * TODO v5: Make private\n */\nconst TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiTouchRipple'\n });\n const {\n center: centerProp = false,\n classes = {},\n className\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const [ripples, setRipples] = React.useState([]);\n const nextKey = React.useRef(0);\n const rippleCallback = React.useRef(null);\n React.useEffect(() => {\n if (rippleCallback.current) {\n rippleCallback.current();\n rippleCallback.current = null;\n }\n }, [ripples]);\n\n // Used to filter out mouse emulated events on mobile.\n const ignoringMouseDown = React.useRef(false);\n // We use a timer in order to only show the ripples for touch \"click\" like events.\n // We don't want to display the ripple for touch scroll events.\n const startTimer = React.useRef(0);\n\n // This is the hook called once the previous timeout is ready.\n const startTimerCommit = React.useRef(null);\n const container = React.useRef(null);\n React.useEffect(() => {\n return () => {\n if (startTimer.current) {\n clearTimeout(startTimer.current);\n }\n };\n }, []);\n const startCommit = React.useCallback(params => {\n const {\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n } = params;\n setRipples(oldRipples => [...oldRipples, /*#__PURE__*/_jsx(TouchRippleRipple, {\n classes: {\n ripple: clsx(classes.ripple, touchRippleClasses.ripple),\n rippleVisible: clsx(classes.rippleVisible, touchRippleClasses.rippleVisible),\n ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses.ripplePulsate),\n child: clsx(classes.child, touchRippleClasses.child),\n childLeaving: clsx(classes.childLeaving, touchRippleClasses.childLeaving),\n childPulsate: clsx(classes.childPulsate, touchRippleClasses.childPulsate)\n },\n timeout: DURATION,\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize\n }, nextKey.current)]);\n nextKey.current += 1;\n rippleCallback.current = cb;\n }, [classes]);\n const start = React.useCallback((event = {}, options = {}, cb = () => {}) => {\n const {\n pulsate = false,\n center = centerProp || options.pulsate,\n fakeElement = false // For test purposes\n } = options;\n if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {\n ignoringMouseDown.current = false;\n return;\n }\n if ((event == null ? void 0 : event.type) === 'touchstart') {\n ignoringMouseDown.current = true;\n }\n const element = fakeElement ? null : container.current;\n const rect = element ? element.getBoundingClientRect() : {\n width: 0,\n height: 0,\n left: 0,\n top: 0\n };\n\n // Get the size of the ripple\n let rippleX;\n let rippleY;\n let rippleSize;\n if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {\n rippleX = Math.round(rect.width / 2);\n rippleY = Math.round(rect.height / 2);\n } else {\n const {\n clientX,\n clientY\n } = event.touches && event.touches.length > 0 ? event.touches[0] : event;\n rippleX = Math.round(clientX - rect.left);\n rippleY = Math.round(clientY - rect.top);\n }\n if (center) {\n rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);\n\n // For some reason the animation is broken on Mobile Chrome if the size is even.\n if (rippleSize % 2 === 0) {\n rippleSize += 1;\n }\n } else {\n const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;\n const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;\n rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);\n }\n\n // Touche devices\n if (event != null && event.touches) {\n // check that this isn't another touchstart due to multitouch\n // otherwise we will only clear a single timer when unmounting while two\n // are running\n if (startTimerCommit.current === null) {\n // Prepare the ripple effect.\n startTimerCommit.current = () => {\n startCommit({\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n });\n };\n // Delay the execution of the ripple effect.\n startTimer.current = setTimeout(() => {\n if (startTimerCommit.current) {\n startTimerCommit.current();\n startTimerCommit.current = null;\n }\n }, DELAY_RIPPLE); // We have to make a tradeoff with this value.\n }\n } else {\n startCommit({\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n });\n }\n }, [centerProp, startCommit]);\n const pulsate = React.useCallback(() => {\n start({}, {\n pulsate: true\n });\n }, [start]);\n const stop = React.useCallback((event, cb) => {\n clearTimeout(startTimer.current);\n\n // The touch interaction occurs too quickly.\n // We still want to show ripple effect.\n if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {\n startTimerCommit.current();\n startTimerCommit.current = null;\n startTimer.current = setTimeout(() => {\n stop(event, cb);\n });\n return;\n }\n startTimerCommit.current = null;\n setRipples(oldRipples => {\n if (oldRipples.length > 0) {\n return oldRipples.slice(1);\n }\n return oldRipples;\n });\n rippleCallback.current = cb;\n }, []);\n React.useImperativeHandle(ref, () => ({\n pulsate,\n start,\n stop\n }), [pulsate, start, stop]);\n return /*#__PURE__*/_jsx(TouchRippleRoot, _extends({\n className: clsx(touchRippleClasses.root, classes.root, className),\n ref: container\n }, other, {\n children: /*#__PURE__*/_jsx(TransitionGroup, {\n component: null,\n exit: true,\n children: ripples\n })\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? TouchRipple.propTypes = {\n /**\n * If `true`, the ripple starts at the center of the component\n * rather than at the point of interaction.\n */\n center: PropTypes.bool,\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string\n} : void 0;\nexport default TouchRipple;","import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';\nimport generateUtilityClass from '../generateUtilityClass';\nexport function getButtonBaseUtilityClass(slot) {\n return generateUtilityClass('MuiButtonBase', slot);\n}\nconst buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);\nexport default buttonBaseClasses;","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"action\", \"centerRipple\", \"children\", \"className\", \"component\", \"disabled\", \"disableRipple\", \"disableTouchRipple\", \"focusRipple\", \"focusVisibleClassName\", \"LinkComponent\", \"onBlur\", \"onClick\", \"onContextMenu\", \"onDragLeave\", \"onFocus\", \"onFocusVisible\", \"onKeyDown\", \"onKeyUp\", \"onMouseDown\", \"onMouseLeave\", \"onMouseUp\", \"onTouchEnd\", \"onTouchMove\", \"onTouchStart\", \"tabIndex\", \"TouchRippleProps\", \"touchRippleRef\", \"type\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { elementTypeAcceptingRef, refType } from '@mui/utils';\nimport { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport useForkRef from '../utils/useForkRef';\nimport useEventCallback from '../utils/useEventCallback';\nimport useIsFocusVisible from '../utils/useIsFocusVisible';\nimport TouchRipple from './TouchRipple';\nimport buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n disabled,\n focusVisible,\n focusVisibleClassName,\n classes\n } = ownerState;\n const slots = {\n root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']\n };\n const composedClasses = composeClasses(slots, getButtonBaseUtilityClass, classes);\n if (focusVisible && focusVisibleClassName) {\n composedClasses.root += ` ${focusVisibleClassName}`;\n }\n return composedClasses;\n};\nexport const ButtonBaseRoot = styled('button', {\n name: 'MuiButtonBase',\n slot: 'Root',\n overridesResolver: (props, styles) => styles.root\n})({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n WebkitTapHighlightColor: 'transparent',\n backgroundColor: 'transparent',\n // Reset default value\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n border: 0,\n margin: 0,\n // Remove the margin in Safari\n borderRadius: 0,\n padding: 0,\n // Remove the padding in Firefox\n cursor: 'pointer',\n userSelect: 'none',\n verticalAlign: 'middle',\n MozAppearance: 'none',\n // Reset\n WebkitAppearance: 'none',\n // Reset\n textDecoration: 'none',\n // So we take precedent over the style of a native element.\n color: 'inherit',\n '&::-moz-focus-inner': {\n borderStyle: 'none' // Remove Firefox dotted outline.\n },\n\n [`&.${buttonBaseClasses.disabled}`]: {\n pointerEvents: 'none',\n // Disable link interactions\n cursor: 'default'\n },\n '@media print': {\n colorAdjust: 'exact'\n }\n});\n\n/**\n * `ButtonBase` contains as few styles as possible.\n * It aims to be a simple building block for creating a button.\n * It contains a load of style reset and some focus/ripple logic.\n */\nconst ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiButtonBase'\n });\n const {\n action,\n centerRipple = false,\n children,\n className,\n component = 'button',\n disabled = false,\n disableRipple = false,\n disableTouchRipple = false,\n focusRipple = false,\n LinkComponent = 'a',\n onBlur,\n onClick,\n onContextMenu,\n onDragLeave,\n onFocus,\n onFocusVisible,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseLeave,\n onMouseUp,\n onTouchEnd,\n onTouchMove,\n onTouchStart,\n tabIndex = 0,\n TouchRippleProps,\n touchRippleRef,\n type\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const buttonRef = React.useRef(null);\n const rippleRef = React.useRef(null);\n const handleRippleRef = useForkRef(rippleRef, touchRippleRef);\n const {\n isFocusVisibleRef,\n onFocus: handleFocusVisible,\n onBlur: handleBlurVisible,\n ref: focusVisibleRef\n } = useIsFocusVisible();\n const [focusVisible, setFocusVisible] = React.useState(false);\n if (disabled && focusVisible) {\n setFocusVisible(false);\n }\n React.useImperativeHandle(action, () => ({\n focusVisible: () => {\n setFocusVisible(true);\n buttonRef.current.focus();\n }\n }), []);\n const [mountedState, setMountedState] = React.useState(false);\n React.useEffect(() => {\n setMountedState(true);\n }, []);\n const enableTouchRipple = mountedState && !disableRipple && !disabled;\n React.useEffect(() => {\n if (focusVisible && focusRipple && !disableRipple && mountedState) {\n rippleRef.current.pulsate();\n }\n }, [disableRipple, focusRipple, focusVisible, mountedState]);\n function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {\n return useEventCallback(event => {\n if (eventCallback) {\n eventCallback(event);\n }\n const ignore = skipRippleAction;\n if (!ignore && rippleRef.current) {\n rippleRef.current[rippleAction](event);\n }\n return true;\n });\n }\n const handleMouseDown = useRippleHandler('start', onMouseDown);\n const handleContextMenu = useRippleHandler('stop', onContextMenu);\n const handleDragLeave = useRippleHandler('stop', onDragLeave);\n const handleMouseUp = useRippleHandler('stop', onMouseUp);\n const handleMouseLeave = useRippleHandler('stop', event => {\n if (focusVisible) {\n event.preventDefault();\n }\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n });\n const handleTouchStart = useRippleHandler('start', onTouchStart);\n const handleTouchEnd = useRippleHandler('stop', onTouchEnd);\n const handleTouchMove = useRippleHandler('stop', onTouchMove);\n const handleBlur = useRippleHandler('stop', event => {\n handleBlurVisible(event);\n if (isFocusVisibleRef.current === false) {\n setFocusVisible(false);\n }\n if (onBlur) {\n onBlur(event);\n }\n }, false);\n const handleFocus = useEventCallback(event => {\n // Fix for https://github.com/facebook/react/issues/7769\n if (!buttonRef.current) {\n buttonRef.current = event.currentTarget;\n }\n handleFocusVisible(event);\n if (isFocusVisibleRef.current === true) {\n setFocusVisible(true);\n if (onFocusVisible) {\n onFocusVisible(event);\n }\n }\n if (onFocus) {\n onFocus(event);\n }\n });\n const isNonNativeButton = () => {\n const button = buttonRef.current;\n return component && component !== 'button' && !(button.tagName === 'A' && button.href);\n };\n\n /**\n * IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat\n */\n const keydownRef = React.useRef(false);\n const handleKeyDown = useEventCallback(event => {\n // Check if key is already down to avoid repeats being counted as multiple activations\n if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {\n keydownRef.current = true;\n rippleRef.current.stop(event, () => {\n rippleRef.current.start(event);\n });\n }\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {\n event.preventDefault();\n }\n if (onKeyDown) {\n onKeyDown(event);\n }\n\n // Keyboard accessibility for non interactive elements\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {\n event.preventDefault();\n if (onClick) {\n onClick(event);\n }\n }\n });\n const handleKeyUp = useEventCallback(event => {\n // calling preventDefault in keyUp on a