` }} />\n }\n }\n\n return (\n checkIframeLinkMarkup()\n )\n}\n\nexport default IframeContainer","function easeInOutSin(time) {\n return (1 + Math.sin(Math.PI * time - Math.PI / 2)) / 2;\n}\nexport default function animate(property, element, to, options = {}, cb = () => {}) {\n const {\n ease = easeInOutSin,\n duration = 300 // standard\n } = options;\n let start = null;\n const from = element[property];\n let cancelled = false;\n const cancel = () => {\n cancelled = true;\n };\n const step = timestamp => {\n if (cancelled) {\n cb(new Error('Animation cancelled'));\n return;\n }\n if (start === null) {\n start = timestamp;\n }\n const time = Math.min(1, (timestamp - start) / duration);\n element[property] = ease(time) * (to - from) + from;\n if (time >= 1) {\n requestAnimationFrame(() => {\n cb(null);\n });\n return;\n }\n requestAnimationFrame(step);\n };\n if (from === to) {\n cb(new Error('Element already at target position'));\n return cancel;\n }\n requestAnimationFrame(step);\n return cancel;\n}","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"onChange\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from '../utils/debounce';\nimport { ownerWindow, unstable_useEnhancedEffect as useEnhancedEffect } from '../utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst styles = {\n width: 99,\n height: 99,\n position: 'absolute',\n top: -9999,\n overflow: 'scroll'\n};\n\n/**\n * @ignore - internal component.\n * The component originates from https://github.com/STORIS/react-scrollbar-size.\n * It has been moved into the core in order to minimize the bundle size.\n */\nexport default function ScrollbarSize(props) {\n const {\n onChange\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const scrollbarHeight = React.useRef();\n const nodeRef = React.useRef(null);\n const setMeasurements = () => {\n scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;\n };\n useEnhancedEffect(() => {\n const handleResize = debounce(() => {\n const prevHeight = scrollbarHeight.current;\n setMeasurements();\n if (prevHeight !== scrollbarHeight.current) {\n onChange(scrollbarHeight.current);\n }\n });\n const containerWindow = ownerWindow(nodeRef.current);\n containerWindow.addEventListener('resize', handleResize);\n return () => {\n handleResize.clear();\n containerWindow.removeEventListener('resize', handleResize);\n };\n }, [onChange]);\n React.useEffect(() => {\n setMeasurements();\n onChange(scrollbarHeight.current);\n }, [onChange]);\n return /*#__PURE__*/_jsx(\"div\", _extends({\n style: styles,\n ref: nodeRef\n }, other));\n}\nprocess.env.NODE_ENV !== \"production\" ? ScrollbarSize.propTypes = {\n onChange: PropTypes.func.isRequired\n} : void 0;","'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: \"M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z\"\n}), 'KeyboardArrowLeft');","'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: \"M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z\"\n}), 'KeyboardArrowRight');","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getTabScrollButtonUtilityClass(slot) {\n return generateUtilityClass('MuiTabScrollButton', slot);\n}\nconst tabScrollButtonClasses = generateUtilityClasses('MuiTabScrollButton', ['root', 'vertical', 'horizontal', 'disabled']);\nexport default tabScrollButtonClasses;","'use client';\n\n/* eslint-disable jsx-a11y/aria-role */\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"className\", \"slots\", \"slotProps\", \"direction\", \"orientation\", \"disabled\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport { useSlotProps } from '@mui/base/utils';\nimport composeClasses from '@mui/utils/composeClasses';\nimport { useRtl } from '@mui/system/RtlProvider';\nimport KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';\nimport KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';\nimport ButtonBase from '../ButtonBase';\nimport useThemeProps from '../styles/useThemeProps';\nimport styled from '../styles/styled';\nimport tabScrollButtonClasses, { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n orientation,\n disabled\n } = ownerState;\n const slots = {\n root: ['root', orientation, disabled && 'disabled']\n };\n return composeClasses(slots, getTabScrollButtonUtilityClass, classes);\n};\nconst TabScrollButtonRoot = styled(ButtonBase, {\n name: 'MuiTabScrollButton',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, ownerState.orientation && styles[ownerState.orientation]];\n }\n})(({\n ownerState\n}) => _extends({\n width: 40,\n flexShrink: 0,\n opacity: 0.8,\n [`&.${tabScrollButtonClasses.disabled}`]: {\n opacity: 0\n }\n}, ownerState.orientation === 'vertical' && {\n width: '100%',\n height: 40,\n '& svg': {\n transform: `rotate(${ownerState.isRtl ? -90 : 90}deg)`\n }\n}));\nconst TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(inProps, ref) {\n var _slots$StartScrollBut, _slots$EndScrollButto;\n const props = useThemeProps({\n props: inProps,\n name: 'MuiTabScrollButton'\n });\n const {\n className,\n slots = {},\n slotProps = {},\n direction\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const isRtl = useRtl();\n const ownerState = _extends({\n isRtl\n }, props);\n const classes = useUtilityClasses(ownerState);\n const StartButtonIcon = (_slots$StartScrollBut = slots.StartScrollButtonIcon) != null ? _slots$StartScrollBut : KeyboardArrowLeft;\n const EndButtonIcon = (_slots$EndScrollButto = slots.EndScrollButtonIcon) != null ? _slots$EndScrollButto : KeyboardArrowRight;\n const startButtonIconProps = useSlotProps({\n elementType: StartButtonIcon,\n externalSlotProps: slotProps.startScrollButtonIcon,\n additionalProps: {\n fontSize: 'small'\n },\n ownerState\n });\n const endButtonIconProps = useSlotProps({\n elementType: EndButtonIcon,\n externalSlotProps: slotProps.endScrollButtonIcon,\n additionalProps: {\n fontSize: 'small'\n },\n ownerState\n });\n return /*#__PURE__*/_jsx(TabScrollButtonRoot, _extends({\n component: \"div\",\n className: clsx(classes.root, className),\n ref: ref,\n role: null,\n ownerState: ownerState,\n tabIndex: null\n }, other, {\n children: direction === 'left' ? /*#__PURE__*/_jsx(StartButtonIcon, _extends({}, startButtonIconProps)) : /*#__PURE__*/_jsx(EndButtonIcon, _extends({}, endButtonIconProps))\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? TabScrollButton.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 `pnpm 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 direction the button should indicate.\n */\n direction: PropTypes.oneOf(['left', 'right']).isRequired,\n /**\n * If `true`, the component is disabled.\n * @default false\n */\n disabled: PropTypes.bool,\n /**\n * The component orientation (layout flow direction).\n */\n orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,\n /**\n * The extra props for the slot components.\n * You can override the existing props or add new ones.\n * @default {}\n */\n slotProps: PropTypes.shape({\n endScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n startScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])\n }),\n /**\n * The components used for each slot inside.\n * @default {}\n */\n slots: PropTypes.shape({\n EndScrollButtonIcon: PropTypes.elementType,\n StartScrollButtonIcon: 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} : void 0;\nexport default TabScrollButton;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getTabsUtilityClass(slot) {\n return generateUtilityClass('MuiTabs', slot);\n}\nconst tabsClasses = generateUtilityClasses('MuiTabs', ['root', 'vertical', 'flexContainer', 'flexContainerVertical', 'centered', 'scroller', 'fixed', 'scrollableX', 'scrollableY', 'hideScrollbar', 'scrollButtons', 'scrollButtonsHideMobile', 'indicator']);\nexport default tabsClasses;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"aria-label\", \"aria-labelledby\", \"action\", \"centered\", \"children\", \"className\", \"component\", \"allowScrollButtonsMobile\", \"indicatorColor\", \"onChange\", \"orientation\", \"ScrollButtonComponent\", \"scrollButtons\", \"selectionFollowsFocus\", \"slots\", \"slotProps\", \"TabIndicatorProps\", \"TabScrollButtonProps\", \"textColor\", \"value\", \"variant\", \"visibleScrollbar\"];\nimport * as React from 'react';\nimport { isFragment } from 'react-is';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport refType from '@mui/utils/refType';\nimport { useSlotProps } from '@mui/base/utils';\nimport composeClasses from '@mui/utils/composeClasses';\nimport { useRtl } from '@mui/system/RtlProvider';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport useTheme from '../styles/useTheme';\nimport debounce from '../utils/debounce';\nimport { getNormalizedScrollLeft, detectScrollType } from '../utils/scrollLeft';\nimport animate from '../internal/animate';\nimport ScrollbarSize from './ScrollbarSize';\nimport TabScrollButton from '../TabScrollButton';\nimport useEventCallback from '../utils/useEventCallback';\nimport tabsClasses, { getTabsUtilityClass } from './tabsClasses';\nimport ownerDocument from '../utils/ownerDocument';\nimport ownerWindow from '../utils/ownerWindow';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst nextItem = (list, item) => {\n if (list === item) {\n return list.firstChild;\n }\n if (item && item.nextElementSibling) {\n return item.nextElementSibling;\n }\n return list.firstChild;\n};\nconst previousItem = (list, item) => {\n if (list === item) {\n return list.lastChild;\n }\n if (item && item.previousElementSibling) {\n return item.previousElementSibling;\n }\n return list.lastChild;\n};\nconst moveFocus = (list, currentFocus, traversalFunction) => {\n let wrappedOnce = false;\n let nextFocus = traversalFunction(list, currentFocus);\n while (nextFocus) {\n // Prevent infinite loop.\n if (nextFocus === list.firstChild) {\n if (wrappedOnce) {\n return;\n }\n wrappedOnce = true;\n }\n\n // Same logic as useAutocomplete.js\n const nextFocusDisabled = nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';\n if (!nextFocus.hasAttribute('tabindex') || nextFocusDisabled) {\n // Move to the next element.\n nextFocus = traversalFunction(list, nextFocus);\n } else {\n nextFocus.focus();\n return;\n }\n }\n};\nconst useUtilityClasses = ownerState => {\n const {\n vertical,\n fixed,\n hideScrollbar,\n scrollableX,\n scrollableY,\n centered,\n scrollButtonsHideMobile,\n classes\n } = ownerState;\n const slots = {\n root: ['root', vertical && 'vertical'],\n scroller: ['scroller', fixed && 'fixed', hideScrollbar && 'hideScrollbar', scrollableX && 'scrollableX', scrollableY && 'scrollableY'],\n flexContainer: ['flexContainer', vertical && 'flexContainerVertical', centered && 'centered'],\n indicator: ['indicator'],\n scrollButtons: ['scrollButtons', scrollButtonsHideMobile && 'scrollButtonsHideMobile'],\n scrollableX: [scrollableX && 'scrollableX'],\n hideScrollbar: [hideScrollbar && 'hideScrollbar']\n };\n return composeClasses(slots, getTabsUtilityClass, classes);\n};\nconst TabsRoot = styled('div', {\n name: 'MuiTabs',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [{\n [`& .${tabsClasses.scrollButtons}`]: styles.scrollButtons\n }, {\n [`& .${tabsClasses.scrollButtons}`]: ownerState.scrollButtonsHideMobile && styles.scrollButtonsHideMobile\n }, styles.root, ownerState.vertical && styles.vertical];\n }\n})(({\n ownerState,\n theme\n}) => _extends({\n overflow: 'hidden',\n minHeight: 48,\n // Add iOS momentum scrolling for iOS < 13.0\n WebkitOverflowScrolling: 'touch',\n display: 'flex'\n}, ownerState.vertical && {\n flexDirection: 'column'\n}, ownerState.scrollButtonsHideMobile && {\n [`& .${tabsClasses.scrollButtons}`]: {\n [theme.breakpoints.down('sm')]: {\n display: 'none'\n }\n }\n}));\nconst TabsScroller = styled('div', {\n name: 'MuiTabs',\n slot: 'Scroller',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.scroller, ownerState.fixed && styles.fixed, ownerState.hideScrollbar && styles.hideScrollbar, ownerState.scrollableX && styles.scrollableX, ownerState.scrollableY && styles.scrollableY];\n }\n})(({\n ownerState\n}) => _extends({\n position: 'relative',\n display: 'inline-block',\n flex: '1 1 auto',\n whiteSpace: 'nowrap'\n}, ownerState.fixed && {\n overflowX: 'hidden',\n width: '100%'\n}, ownerState.hideScrollbar && {\n // Hide dimensionless scrollbar on macOS\n scrollbarWidth: 'none',\n // Firefox\n '&::-webkit-scrollbar': {\n display: 'none' // Safari + Chrome\n }\n}, ownerState.scrollableX && {\n overflowX: 'auto',\n overflowY: 'hidden'\n}, ownerState.scrollableY && {\n overflowY: 'auto',\n overflowX: 'hidden'\n}));\nconst FlexContainer = styled('div', {\n name: 'MuiTabs',\n slot: 'FlexContainer',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.flexContainer, ownerState.vertical && styles.flexContainerVertical, ownerState.centered && styles.centered];\n }\n})(({\n ownerState\n}) => _extends({\n display: 'flex'\n}, ownerState.vertical && {\n flexDirection: 'column'\n}, ownerState.centered && {\n justifyContent: 'center'\n}));\nconst TabsIndicator = styled('span', {\n name: 'MuiTabs',\n slot: 'Indicator',\n overridesResolver: (props, styles) => styles.indicator\n})(({\n ownerState,\n theme\n}) => _extends({\n position: 'absolute',\n height: 2,\n bottom: 0,\n width: '100%',\n transition: theme.transitions.create()\n}, ownerState.indicatorColor === 'primary' && {\n backgroundColor: (theme.vars || theme).palette.primary.main\n}, ownerState.indicatorColor === 'secondary' && {\n backgroundColor: (theme.vars || theme).palette.secondary.main\n}, ownerState.vertical && {\n height: '100%',\n width: 2,\n right: 0\n}));\nconst TabsScrollbarSize = styled(ScrollbarSize)({\n overflowX: 'auto',\n overflowY: 'hidden',\n // Hide dimensionless scrollbar on macOS\n scrollbarWidth: 'none',\n // Firefox\n '&::-webkit-scrollbar': {\n display: 'none' // Safari + Chrome\n }\n});\nconst defaultIndicatorStyle = {};\nlet warnedOnceTabPresent = false;\nconst Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiTabs'\n });\n const theme = useTheme();\n const isRtl = useRtl();\n const {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n action,\n centered = false,\n children: childrenProp,\n className,\n component = 'div',\n allowScrollButtonsMobile = false,\n indicatorColor = 'primary',\n onChange,\n orientation = 'horizontal',\n ScrollButtonComponent = TabScrollButton,\n scrollButtons = 'auto',\n selectionFollowsFocus,\n slots = {},\n slotProps = {},\n TabIndicatorProps = {},\n TabScrollButtonProps = {},\n textColor = 'primary',\n value,\n variant = 'standard',\n visibleScrollbar = false\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const scrollable = variant === 'scrollable';\n const vertical = orientation === 'vertical';\n const scrollStart = vertical ? 'scrollTop' : 'scrollLeft';\n const start = vertical ? 'top' : 'left';\n const end = vertical ? 'bottom' : 'right';\n const clientSize = vertical ? 'clientHeight' : 'clientWidth';\n const size = vertical ? 'height' : 'width';\n const ownerState = _extends({}, props, {\n component,\n allowScrollButtonsMobile,\n indicatorColor,\n orientation,\n vertical,\n scrollButtons,\n textColor,\n variant,\n visibleScrollbar,\n fixed: !scrollable,\n hideScrollbar: scrollable && !visibleScrollbar,\n scrollableX: scrollable && !vertical,\n scrollableY: scrollable && vertical,\n centered: centered && !scrollable,\n scrollButtonsHideMobile: !allowScrollButtonsMobile\n });\n const classes = useUtilityClasses(ownerState);\n const startScrollButtonIconProps = useSlotProps({\n elementType: slots.StartScrollButtonIcon,\n externalSlotProps: slotProps.startScrollButtonIcon,\n ownerState\n });\n const endScrollButtonIconProps = useSlotProps({\n elementType: slots.EndScrollButtonIcon,\n externalSlotProps: slotProps.endScrollButtonIcon,\n ownerState\n });\n if (process.env.NODE_ENV !== 'production') {\n if (centered && scrollable) {\n console.error('MUI: You can not use the `centered={true}` and `variant=\"scrollable\"` properties ' + 'at the same time on a `Tabs` component.');\n }\n }\n const [mounted, setMounted] = React.useState(false);\n const [indicatorStyle, setIndicatorStyle] = React.useState(defaultIndicatorStyle);\n const [displayStartScroll, setDisplayStartScroll] = React.useState(false);\n const [displayEndScroll, setDisplayEndScroll] = React.useState(false);\n const [updateScrollObserver, setUpdateScrollObserver] = React.useState(false);\n const [scrollerStyle, setScrollerStyle] = React.useState({\n overflow: 'hidden',\n scrollbarWidth: 0\n });\n const valueToIndex = new Map();\n const tabsRef = React.useRef(null);\n const tabListRef = React.useRef(null);\n const getTabsMeta = () => {\n const tabsNode = tabsRef.current;\n let tabsMeta;\n if (tabsNode) {\n const rect = tabsNode.getBoundingClientRect();\n // create a new object with ClientRect class props + scrollLeft\n tabsMeta = {\n clientWidth: tabsNode.clientWidth,\n scrollLeft: tabsNode.scrollLeft,\n scrollTop: tabsNode.scrollTop,\n scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, isRtl ? 'rtl' : 'ltr'),\n scrollWidth: tabsNode.scrollWidth,\n top: rect.top,\n bottom: rect.bottom,\n left: rect.left,\n right: rect.right\n };\n }\n let tabMeta;\n if (tabsNode && value !== false) {\n const children = tabListRef.current.children;\n if (children.length > 0) {\n const tab = children[valueToIndex.get(value)];\n if (process.env.NODE_ENV !== 'production') {\n if (!tab) {\n console.error([`MUI: The \\`value\\` provided to the Tabs component is invalid.`, `None of the Tabs' children match with \"${value}\".`, valueToIndex.keys ? `You can provide one of the following values: ${Array.from(valueToIndex.keys()).join(', ')}.` : null].join('\\n'));\n }\n }\n tabMeta = tab ? tab.getBoundingClientRect() : null;\n if (process.env.NODE_ENV !== 'production') {\n if (process.env.NODE_ENV !== 'test' && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&\n // if the whole Tabs component is hidden, don't warn\n tabsMeta.clientWidth !== 0) {\n tabsMeta = null;\n console.error(['MUI: The `value` provided to the Tabs component is invalid.', `The Tab with this \\`value\\` (\"${value}\") is not part of the document layout.`, \"Make sure the tab item is present in the document or that it's not `display: none`.\"].join('\\n'));\n warnedOnceTabPresent = true;\n }\n }\n }\n }\n return {\n tabsMeta,\n tabMeta\n };\n };\n const updateIndicatorState = useEventCallback(() => {\n const {\n tabsMeta,\n tabMeta\n } = getTabsMeta();\n let startValue = 0;\n let startIndicator;\n if (vertical) {\n startIndicator = 'top';\n if (tabMeta && tabsMeta) {\n startValue = tabMeta.top - tabsMeta.top + tabsMeta.scrollTop;\n }\n } else {\n startIndicator = isRtl ? 'right' : 'left';\n if (tabMeta && tabsMeta) {\n const correction = isRtl ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth : tabsMeta.scrollLeft;\n startValue = (isRtl ? -1 : 1) * (tabMeta[startIndicator] - tabsMeta[startIndicator] + correction);\n }\n }\n const newIndicatorStyle = {\n [startIndicator]: startValue,\n // May be wrong until the font is loaded.\n [size]: tabMeta ? tabMeta[size] : 0\n };\n\n // IE11 support, replace with Number.isNaN\n // eslint-disable-next-line no-restricted-globals\n if (isNaN(indicatorStyle[startIndicator]) || isNaN(indicatorStyle[size])) {\n setIndicatorStyle(newIndicatorStyle);\n } else {\n const dStart = Math.abs(indicatorStyle[startIndicator] - newIndicatorStyle[startIndicator]);\n const dSize = Math.abs(indicatorStyle[size] - newIndicatorStyle[size]);\n if (dStart >= 1 || dSize >= 1) {\n setIndicatorStyle(newIndicatorStyle);\n }\n }\n });\n const scroll = (scrollValue, {\n animation = true\n } = {}) => {\n if (animation) {\n animate(scrollStart, tabsRef.current, scrollValue, {\n duration: theme.transitions.duration.standard\n });\n } else {\n tabsRef.current[scrollStart] = scrollValue;\n }\n };\n const moveTabsScroll = delta => {\n let scrollValue = tabsRef.current[scrollStart];\n if (vertical) {\n scrollValue += delta;\n } else {\n scrollValue += delta * (isRtl ? -1 : 1);\n // Fix for Edge\n scrollValue *= isRtl && detectScrollType() === 'reverse' ? -1 : 1;\n }\n scroll(scrollValue);\n };\n const getScrollSize = () => {\n const containerSize = tabsRef.current[clientSize];\n let totalSize = 0;\n const children = Array.from(tabListRef.current.children);\n for (let i = 0; i < children.length; i += 1) {\n const tab = children[i];\n if (totalSize + tab[clientSize] > containerSize) {\n // If the first item is longer than the container size, then only scroll\n // by the container size.\n if (i === 0) {\n totalSize = containerSize;\n }\n break;\n }\n totalSize += tab[clientSize];\n }\n return totalSize;\n };\n const handleStartScrollClick = () => {\n moveTabsScroll(-1 * getScrollSize());\n };\n const handleEndScrollClick = () => {\n moveTabsScroll(getScrollSize());\n };\n\n // TODO Remove
as browser support for hiding the scrollbar\n // with CSS improves.\n const handleScrollbarSizeChange = React.useCallback(scrollbarWidth => {\n setScrollerStyle({\n overflow: null,\n scrollbarWidth\n });\n }, []);\n const getConditionalElements = () => {\n const conditionalElements = {};\n conditionalElements.scrollbarSizeListener = scrollable ? /*#__PURE__*/_jsx(TabsScrollbarSize, {\n onChange: handleScrollbarSizeChange,\n className: clsx(classes.scrollableX, classes.hideScrollbar)\n }) : null;\n const scrollButtonsActive = displayStartScroll || displayEndScroll;\n const showScrollButtons = scrollable && (scrollButtons === 'auto' && scrollButtonsActive || scrollButtons === true);\n conditionalElements.scrollButtonStart = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({\n slots: {\n StartScrollButtonIcon: slots.StartScrollButtonIcon\n },\n slotProps: {\n startScrollButtonIcon: startScrollButtonIconProps\n },\n orientation: orientation,\n direction: isRtl ? 'right' : 'left',\n onClick: handleStartScrollClick,\n disabled: !displayStartScroll\n }, TabScrollButtonProps, {\n className: clsx(classes.scrollButtons, TabScrollButtonProps.className)\n })) : null;\n conditionalElements.scrollButtonEnd = showScrollButtons ? /*#__PURE__*/_jsx(ScrollButtonComponent, _extends({\n slots: {\n EndScrollButtonIcon: slots.EndScrollButtonIcon\n },\n slotProps: {\n endScrollButtonIcon: endScrollButtonIconProps\n },\n orientation: orientation,\n direction: isRtl ? 'left' : 'right',\n onClick: handleEndScrollClick,\n disabled: !displayEndScroll\n }, TabScrollButtonProps, {\n className: clsx(classes.scrollButtons, TabScrollButtonProps.className)\n })) : null;\n return conditionalElements;\n };\n const scrollSelectedIntoView = useEventCallback(animation => {\n const {\n tabsMeta,\n tabMeta\n } = getTabsMeta();\n if (!tabMeta || !tabsMeta) {\n return;\n }\n if (tabMeta[start] < tabsMeta[start]) {\n // left side of button is out of view\n const nextScrollStart = tabsMeta[scrollStart] + (tabMeta[start] - tabsMeta[start]);\n scroll(nextScrollStart, {\n animation\n });\n } else if (tabMeta[end] > tabsMeta[end]) {\n // right side of button is out of view\n const nextScrollStart = tabsMeta[scrollStart] + (tabMeta[end] - tabsMeta[end]);\n scroll(nextScrollStart, {\n animation\n });\n }\n });\n const updateScrollButtonState = useEventCallback(() => {\n if (scrollable && scrollButtons !== false) {\n setUpdateScrollObserver(!updateScrollObserver);\n }\n });\n React.useEffect(() => {\n const handleResize = debounce(() => {\n // If the Tabs component is replaced by Suspense with a fallback, the last\n // ResizeObserver's handler that runs because of the change in the layout is trying to\n // access a dom node that is no longer there (as the fallback component is being shown instead).\n // See https://github.com/mui/material-ui/issues/33276\n // TODO: Add tests that will ensure the component is not failing when\n // replaced by Suspense with a fallback, once React is updated to version 18\n if (tabsRef.current) {\n updateIndicatorState();\n }\n });\n let resizeObserver;\n\n /**\n * @type {MutationCallback}\n */\n const handleMutation = records => {\n records.forEach(record => {\n record.removedNodes.forEach(item => {\n var _resizeObserver;\n (_resizeObserver = resizeObserver) == null || _resizeObserver.unobserve(item);\n });\n record.addedNodes.forEach(item => {\n var _resizeObserver2;\n (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.observe(item);\n });\n });\n handleResize();\n updateScrollButtonState();\n };\n const win = ownerWindow(tabsRef.current);\n win.addEventListener('resize', handleResize);\n let mutationObserver;\n if (typeof ResizeObserver !== 'undefined') {\n resizeObserver = new ResizeObserver(handleResize);\n Array.from(tabListRef.current.children).forEach(child => {\n resizeObserver.observe(child);\n });\n }\n if (typeof MutationObserver !== 'undefined') {\n mutationObserver = new MutationObserver(handleMutation);\n mutationObserver.observe(tabListRef.current, {\n childList: true\n });\n }\n return () => {\n var _mutationObserver, _resizeObserver3;\n handleResize.clear();\n win.removeEventListener('resize', handleResize);\n (_mutationObserver = mutationObserver) == null || _mutationObserver.disconnect();\n (_resizeObserver3 = resizeObserver) == null || _resizeObserver3.disconnect();\n };\n }, [updateIndicatorState, updateScrollButtonState]);\n\n /**\n * Toggle visibility of start and end scroll buttons\n * Using IntersectionObserver on first and last Tabs.\n */\n React.useEffect(() => {\n const tabListChildren = Array.from(tabListRef.current.children);\n const length = tabListChildren.length;\n if (typeof IntersectionObserver !== 'undefined' && length > 0 && scrollable && scrollButtons !== false) {\n const firstTab = tabListChildren[0];\n const lastTab = tabListChildren[length - 1];\n const observerOptions = {\n root: tabsRef.current,\n threshold: 0.99\n };\n const handleScrollButtonStart = entries => {\n setDisplayStartScroll(!entries[0].isIntersecting);\n };\n const firstObserver = new IntersectionObserver(handleScrollButtonStart, observerOptions);\n firstObserver.observe(firstTab);\n const handleScrollButtonEnd = entries => {\n setDisplayEndScroll(!entries[0].isIntersecting);\n };\n const lastObserver = new IntersectionObserver(handleScrollButtonEnd, observerOptions);\n lastObserver.observe(lastTab);\n return () => {\n firstObserver.disconnect();\n lastObserver.disconnect();\n };\n }\n return undefined;\n }, [scrollable, scrollButtons, updateScrollObserver, childrenProp == null ? void 0 : childrenProp.length]);\n React.useEffect(() => {\n setMounted(true);\n }, []);\n React.useEffect(() => {\n updateIndicatorState();\n });\n React.useEffect(() => {\n // Don't animate on the first render.\n scrollSelectedIntoView(defaultIndicatorStyle !== indicatorStyle);\n }, [scrollSelectedIntoView, indicatorStyle]);\n React.useImperativeHandle(action, () => ({\n updateIndicator: updateIndicatorState,\n updateScrollButtons: updateScrollButtonState\n }), [updateIndicatorState, updateScrollButtonState]);\n const indicator = /*#__PURE__*/_jsx(TabsIndicator, _extends({}, TabIndicatorProps, {\n className: clsx(classes.indicator, TabIndicatorProps.className),\n ownerState: ownerState,\n style: _extends({}, indicatorStyle, TabIndicatorProps.style)\n }));\n let childIndex = 0;\n const children = React.Children.map(childrenProp, child => {\n if (! /*#__PURE__*/React.isValidElement(child)) {\n return null;\n }\n if (process.env.NODE_ENV !== 'production') {\n if (isFragment(child)) {\n console.error([\"MUI: The Tabs component doesn't accept a Fragment as a child.\", 'Consider providing an array instead.'].join('\\n'));\n }\n }\n const childValue = child.props.value === undefined ? childIndex : child.props.value;\n valueToIndex.set(childValue, childIndex);\n const selected = childValue === value;\n childIndex += 1;\n return /*#__PURE__*/React.cloneElement(child, _extends({\n fullWidth: variant === 'fullWidth',\n indicator: selected && !mounted && indicator,\n selected,\n selectionFollowsFocus,\n onChange,\n textColor,\n value: childValue\n }, childIndex === 1 && value === false && !child.props.tabIndex ? {\n tabIndex: 0\n } : {}));\n });\n const handleKeyDown = event => {\n const list = tabListRef.current;\n const currentFocus = ownerDocument(list).activeElement;\n // Keyboard navigation assumes that [role=\"tab\"] are siblings\n // though we might warn in the future about nested, interactive elements\n // as a a11y violation\n const role = currentFocus.getAttribute('role');\n if (role !== 'tab') {\n return;\n }\n let previousItemKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';\n let nextItemKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\n if (orientation === 'horizontal' && isRtl) {\n // swap previousItemKey with nextItemKey\n previousItemKey = 'ArrowRight';\n nextItemKey = 'ArrowLeft';\n }\n switch (event.key) {\n case previousItemKey:\n event.preventDefault();\n moveFocus(list, currentFocus, previousItem);\n break;\n case nextItemKey:\n event.preventDefault();\n moveFocus(list, currentFocus, nextItem);\n break;\n case 'Home':\n event.preventDefault();\n moveFocus(list, null, nextItem);\n break;\n case 'End':\n event.preventDefault();\n moveFocus(list, null, previousItem);\n break;\n default:\n break;\n }\n };\n const conditionalElements = getConditionalElements();\n return /*#__PURE__*/_jsxs(TabsRoot, _extends({\n className: clsx(classes.root, className),\n ownerState: ownerState,\n ref: ref,\n as: component\n }, other, {\n children: [conditionalElements.scrollButtonStart, conditionalElements.scrollbarSizeListener, /*#__PURE__*/_jsxs(TabsScroller, {\n className: classes.scroller,\n ownerState: ownerState,\n style: {\n overflow: scrollerStyle.overflow,\n [vertical ? `margin${isRtl ? 'Left' : 'Right'}` : 'marginBottom']: visibleScrollbar ? undefined : -scrollerStyle.scrollbarWidth\n },\n ref: tabsRef,\n children: [/*#__PURE__*/_jsx(FlexContainer, {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-orientation\": orientation === 'vertical' ? 'vertical' : null,\n className: classes.flexContainer,\n ownerState: ownerState,\n onKeyDown: handleKeyDown,\n ref: tabListRef,\n role: \"tablist\",\n children: children\n }), mounted && indicator]\n }), conditionalElements.scrollButtonEnd]\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Tabs.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 `pnpm proptypes`. │\n // └─────────────────────────────────────────────────────────────────────┘\n /**\n * Callback fired when the component mounts.\n * This is useful when you want to trigger an action programmatically.\n * It supports two actions: `updateIndicator()` and `updateScrollButtons()`\n *\n * @param {object} actions This object contains all possible actions\n * that can be triggered programmatically.\n */\n action: refType,\n /**\n * If `true`, the scroll buttons aren't forced hidden on mobile.\n * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`.\n * @default false\n */\n allowScrollButtonsMobile: PropTypes.bool,\n /**\n * The label for the Tabs as a string.\n */\n 'aria-label': PropTypes.string,\n /**\n * An id or list of ids separated by a space that label the Tabs.\n */\n 'aria-labelledby': PropTypes.string,\n /**\n * If `true`, the tabs are centered.\n * This prop is intended for large views.\n * @default false\n */\n centered: 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 * Determines the color of the indicator.\n * @default 'primary'\n */\n indicatorColor: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['primary', 'secondary']), PropTypes.string]),\n /**\n * Callback fired when the value changes.\n *\n * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.\n * @param {any} value We default to the index of the child (number)\n */\n onChange: PropTypes.func,\n /**\n * The component orientation (layout flow direction).\n * @default 'horizontal'\n */\n orientation: PropTypes.oneOf(['horizontal', 'vertical']),\n /**\n * The component used to render the scroll buttons.\n * @default TabScrollButton\n */\n ScrollButtonComponent: PropTypes.elementType,\n /**\n * Determine behavior of scroll buttons when tabs are set to scroll:\n *\n * - `auto` will only present them when not all the items are visible.\n * - `true` will always present them.\n * - `false` will never present them.\n *\n * By default the scroll buttons are hidden on mobile.\n * This behavior can be disabled with `allowScrollButtonsMobile`.\n * @default 'auto'\n */\n scrollButtons: PropTypes /* @typescript-to-proptypes-ignore */.oneOf(['auto', false, true]),\n /**\n * If `true` the selected tab changes on focus. Otherwise it only\n * changes on activation.\n */\n selectionFollowsFocus: PropTypes.bool,\n /**\n * The extra props for the slot components.\n * You can override the existing props or add new ones.\n * @default {}\n */\n slotProps: PropTypes.shape({\n endScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n startScrollButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])\n }),\n /**\n * The components used for each slot inside.\n * @default {}\n */\n slots: PropTypes.shape({\n EndScrollButtonIcon: PropTypes.elementType,\n StartScrollButtonIcon: 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 * Props applied to the tab indicator element.\n * @default {}\n */\n TabIndicatorProps: PropTypes.object,\n /**\n * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element.\n * @default {}\n */\n TabScrollButtonProps: PropTypes.object,\n /**\n * Determines the color of the `Tab`.\n * @default 'primary'\n */\n textColor: PropTypes.oneOf(['inherit', 'primary', 'secondary']),\n /**\n * The value of the currently selected `Tab`.\n * If you don't want any selected `Tab`, you can set this prop to `false`.\n */\n value: PropTypes.any,\n /**\n * Determines additional display behavior of the tabs:\n *\n * - `scrollable` will invoke scrolling properties and allow for horizontally\n * scrolling (or swiping) of the tab bar.\n * - `fullWidth` will make the tabs grow to use all the available space,\n * which should be used for small views, like on mobile.\n * - `standard` will render the default state.\n * @default 'standard'\n */\n variant: PropTypes.oneOf(['fullWidth', 'scrollable', 'standard']),\n /**\n * If `true`, the scrollbar is visible. It can be useful when displaying\n * a long vertical list of tabs.\n * @default false\n */\n visibleScrollbar: PropTypes.bool\n} : void 0;\nexport default Tabs;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getTabUtilityClass(slot) {\n return generateUtilityClass('MuiTab', slot);\n}\nconst tabClasses = generateUtilityClasses('MuiTab', ['root', 'labelIcon', 'textColorInherit', 'textColorPrimary', 'textColorSecondary', 'selected', 'disabled', 'fullWidth', 'wrapped', 'iconWrapper']);\nexport default tabClasses;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"className\", \"disabled\", \"disableFocusRipple\", \"fullWidth\", \"icon\", \"iconPosition\", \"indicator\", \"label\", \"onChange\", \"onClick\", \"onFocus\", \"selected\", \"selectionFollowsFocus\", \"textColor\", \"value\", \"wrapped\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport composeClasses from '@mui/utils/composeClasses';\nimport ButtonBase from '../ButtonBase';\nimport capitalize from '../utils/capitalize';\nimport useThemeProps from '../styles/useThemeProps';\nimport styled from '../styles/styled';\nimport unsupportedProp from '../utils/unsupportedProp';\nimport tabClasses, { getTabUtilityClass } from './tabClasses';\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n textColor,\n fullWidth,\n wrapped,\n icon,\n label,\n selected,\n disabled\n } = ownerState;\n const slots = {\n root: ['root', icon && label && 'labelIcon', `textColor${capitalize(textColor)}`, fullWidth && 'fullWidth', wrapped && 'wrapped', selected && 'selected', disabled && 'disabled'],\n iconWrapper: ['iconWrapper']\n };\n return composeClasses(slots, getTabUtilityClass, classes);\n};\nconst TabRoot = styled(ButtonBase, {\n name: 'MuiTab',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];\n }\n})(({\n theme,\n ownerState\n}) => _extends({}, theme.typography.button, {\n maxWidth: 360,\n minWidth: 90,\n position: 'relative',\n minHeight: 48,\n flexShrink: 0,\n padding: '12px 16px',\n overflow: 'hidden',\n whiteSpace: 'normal',\n textAlign: 'center'\n}, ownerState.label && {\n flexDirection: ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom' ? 'column' : 'row'\n}, {\n lineHeight: 1.25\n}, ownerState.icon && ownerState.label && {\n minHeight: 72,\n paddingTop: 9,\n paddingBottom: 9,\n [`& > .${tabClasses.iconWrapper}`]: _extends({}, ownerState.iconPosition === 'top' && {\n marginBottom: 6\n }, ownerState.iconPosition === 'bottom' && {\n marginTop: 6\n }, ownerState.iconPosition === 'start' && {\n marginRight: theme.spacing(1)\n }, ownerState.iconPosition === 'end' && {\n marginLeft: theme.spacing(1)\n })\n}, ownerState.textColor === 'inherit' && {\n color: 'inherit',\n opacity: 0.6,\n // same opacity as theme.palette.text.secondary\n [`&.${tabClasses.selected}`]: {\n opacity: 1\n },\n [`&.${tabClasses.disabled}`]: {\n opacity: (theme.vars || theme).palette.action.disabledOpacity\n }\n}, ownerState.textColor === 'primary' && {\n color: (theme.vars || theme).palette.text.secondary,\n [`&.${tabClasses.selected}`]: {\n color: (theme.vars || theme).palette.primary.main\n },\n [`&.${tabClasses.disabled}`]: {\n color: (theme.vars || theme).palette.text.disabled\n }\n}, ownerState.textColor === 'secondary' && {\n color: (theme.vars || theme).palette.text.secondary,\n [`&.${tabClasses.selected}`]: {\n color: (theme.vars || theme).palette.secondary.main\n },\n [`&.${tabClasses.disabled}`]: {\n color: (theme.vars || theme).palette.text.disabled\n }\n}, ownerState.fullWidth && {\n flexShrink: 1,\n flexGrow: 1,\n flexBasis: 0,\n maxWidth: 'none'\n}, ownerState.wrapped && {\n fontSize: theme.typography.pxToRem(12)\n}));\nconst Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiTab'\n });\n const {\n className,\n disabled = false,\n disableFocusRipple = false,\n // eslint-disable-next-line react/prop-types\n fullWidth,\n icon: iconProp,\n iconPosition = 'top',\n // eslint-disable-next-line react/prop-types\n indicator,\n label,\n onChange,\n onClick,\n onFocus,\n // eslint-disable-next-line react/prop-types\n selected,\n // eslint-disable-next-line react/prop-types\n selectionFollowsFocus,\n // eslint-disable-next-line react/prop-types\n textColor = 'inherit',\n value,\n wrapped = false\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n disabled,\n disableFocusRipple,\n selected,\n icon: !!iconProp,\n iconPosition,\n label: !!label,\n fullWidth,\n textColor,\n wrapped\n });\n const classes = useUtilityClasses(ownerState);\n const icon = iconProp && label && /*#__PURE__*/React.isValidElement(iconProp) ? /*#__PURE__*/React.cloneElement(iconProp, {\n className: clsx(classes.iconWrapper, iconProp.props.className)\n }) : iconProp;\n const handleClick = event => {\n if (!selected && onChange) {\n onChange(event, value);\n }\n if (onClick) {\n onClick(event);\n }\n };\n const handleFocus = event => {\n if (selectionFollowsFocus && !selected && onChange) {\n onChange(event, value);\n }\n if (onFocus) {\n onFocus(event);\n }\n };\n return /*#__PURE__*/_jsxs(TabRoot, _extends({\n focusRipple: !disableFocusRipple,\n className: clsx(classes.root, className),\n ref: ref,\n role: \"tab\",\n \"aria-selected\": selected,\n disabled: disabled,\n onClick: handleClick,\n onFocus: handleFocus,\n ownerState: ownerState,\n tabIndex: selected ? 0 : -1\n }, other, {\n children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/_jsxs(React.Fragment, {\n children: [icon, label]\n }) : /*#__PURE__*/_jsxs(React.Fragment, {\n children: [label, icon]\n }), indicator]\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? Tab.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 `pnpm proptypes`. │\n // └─────────────────────────────────────────────────────────────────────┘\n /**\n * This prop isn't supported.\n * Use the `component` prop if you need to change the children structure.\n */\n children: unsupportedProp,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * If `true`, the component is disabled.\n * @default false\n */\n disabled: PropTypes.bool,\n /**\n * If `true`, the keyboard focus ripple is disabled.\n * @default false\n */\n disableFocusRipple: PropTypes.bool,\n /**\n * If `true`, the ripple effect is disabled.\n *\n * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure\n * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.\n * @default false\n */\n disableRipple: PropTypes.bool,\n /**\n * The icon to display.\n */\n icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),\n /**\n * The position of the icon relative to the label.\n * @default 'top'\n */\n iconPosition: PropTypes.oneOf(['bottom', 'end', 'start', 'top']),\n /**\n * The label element.\n */\n label: PropTypes.node,\n /**\n * @ignore\n */\n onChange: PropTypes.func,\n /**\n * @ignore\n */\n onClick: PropTypes.func,\n /**\n * @ignore\n */\n onFocus: PropTypes.func,\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 * You can provide your own value. Otherwise, we fallback to the child position index.\n */\n value: PropTypes.any,\n /**\n * Tab labels appear in a single row.\n * They can use a second line if needed.\n * @default false\n */\n wrapped: PropTypes.bool\n} : void 0;\nexport default Tab;","'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\n/* eslint-disable no-constant-condition */\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport * as React from 'react';\nimport { unstable_setRef as setRef, unstable_useEventCallback as useEventCallback, unstable_useControlled as useControlled, unstable_useId as useId, usePreviousProps } from '@mui/utils';\n\n// https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript\n// Give up on IE11 support for this feature\nfunction stripDiacritics(string) {\n return typeof string.normalize !== 'undefined' ? string.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '') : string;\n}\nexport function createFilterOptions(config = {}) {\n const {\n ignoreAccents = true,\n ignoreCase = true,\n limit,\n matchFrom = 'any',\n stringify,\n trim = false\n } = config;\n return (options, {\n inputValue,\n getOptionLabel\n }) => {\n let input = trim ? inputValue.trim() : inputValue;\n if (ignoreCase) {\n input = input.toLowerCase();\n }\n if (ignoreAccents) {\n input = stripDiacritics(input);\n }\n const filteredOptions = !input ? options : options.filter(option => {\n let candidate = (stringify || getOptionLabel)(option);\n if (ignoreCase) {\n candidate = candidate.toLowerCase();\n }\n if (ignoreAccents) {\n candidate = stripDiacritics(candidate);\n }\n return matchFrom === 'start' ? candidate.indexOf(input) === 0 : candidate.indexOf(input) > -1;\n });\n return typeof limit === 'number' ? filteredOptions.slice(0, limit) : filteredOptions;\n };\n}\n\n// To replace with .findIndex() once we stop IE11 support.\nfunction findIndex(array, comp) {\n for (let i = 0; i < array.length; i += 1) {\n if (comp(array[i])) {\n return i;\n }\n }\n return -1;\n}\nconst defaultFilterOptions = createFilterOptions();\n\n// Number of options to jump in list box when `Page Up` and `Page Down` keys are used.\nconst pageSize = 5;\nconst defaultIsActiveElementInListbox = listboxRef => {\n var _listboxRef$current$p;\n return listboxRef.current !== null && ((_listboxRef$current$p = listboxRef.current.parentElement) == null ? void 0 : _listboxRef$current$p.contains(document.activeElement));\n};\nexport function useAutocomplete(props) {\n const {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_isActiveElementInListbox = defaultIsActiveElementInListbox,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_classNamePrefix = 'Mui',\n autoComplete = false,\n autoHighlight = false,\n autoSelect = false,\n blurOnSelect = false,\n clearOnBlur = !props.freeSolo,\n clearOnEscape = false,\n componentName = 'useAutocomplete',\n defaultValue = props.multiple ? [] : null,\n disableClearable = false,\n disableCloseOnSelect = false,\n disabled: disabledProp,\n disabledItemsFocusable = false,\n disableListWrap = false,\n filterOptions = defaultFilterOptions,\n filterSelectedOptions = false,\n freeSolo = false,\n getOptionDisabled,\n getOptionKey,\n getOptionLabel: getOptionLabelProp = option => {\n var _option$label;\n return (_option$label = option.label) != null ? _option$label : option;\n },\n groupBy,\n handleHomeEndKeys = !props.freeSolo,\n id: idProp,\n includeInputInList = false,\n inputValue: inputValueProp,\n isOptionEqualToValue = (option, value) => option === value,\n multiple = false,\n onChange,\n onClose,\n onHighlightChange,\n onInputChange,\n onOpen,\n open: openProp,\n openOnFocus = false,\n options,\n readOnly = false,\n selectOnFocus = !props.freeSolo,\n value: valueProp\n } = props;\n const id = useId(idProp);\n let getOptionLabel = getOptionLabelProp;\n getOptionLabel = option => {\n const optionLabel = getOptionLabelProp(option);\n if (typeof optionLabel !== 'string') {\n if (process.env.NODE_ENV !== 'production') {\n const erroneousReturn = optionLabel === undefined ? 'undefined' : `${typeof optionLabel} (${optionLabel})`;\n console.error(`MUI: The \\`getOptionLabel\\` method of ${componentName} returned ${erroneousReturn} instead of a string for ${JSON.stringify(option)}.`);\n }\n return String(optionLabel);\n }\n return optionLabel;\n };\n const ignoreFocus = React.useRef(false);\n const firstFocus = React.useRef(true);\n const inputRef = React.useRef(null);\n const listboxRef = React.useRef(null);\n const [anchorEl, setAnchorEl] = React.useState(null);\n const [focusedTag, setFocusedTag] = React.useState(-1);\n const defaultHighlighted = autoHighlight ? 0 : -1;\n const highlightedIndexRef = React.useRef(defaultHighlighted);\n const [value, setValueState] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: componentName\n });\n const [inputValue, setInputValueState] = useControlled({\n controlled: inputValueProp,\n default: '',\n name: componentName,\n state: 'inputValue'\n });\n const [focused, setFocused] = React.useState(false);\n const resetInputValue = React.useCallback((event, newValue) => {\n // retain current `inputValue` if new option isn't selected and `clearOnBlur` is false\n // When `multiple` is enabled, `newValue` is an array of all selected items including the newly selected item\n const isOptionSelected = multiple ? value.length < newValue.length : newValue !== null;\n if (!isOptionSelected && !clearOnBlur) {\n return;\n }\n let newInputValue;\n if (multiple) {\n newInputValue = '';\n } else if (newValue == null) {\n newInputValue = '';\n } else {\n const optionLabel = getOptionLabel(newValue);\n newInputValue = typeof optionLabel === 'string' ? optionLabel : '';\n }\n if (inputValue === newInputValue) {\n return;\n }\n setInputValueState(newInputValue);\n if (onInputChange) {\n onInputChange(event, newInputValue, 'reset');\n }\n }, [getOptionLabel, inputValue, multiple, onInputChange, setInputValueState, clearOnBlur, value]);\n const [open, setOpenState] = useControlled({\n controlled: openProp,\n default: false,\n name: componentName,\n state: 'open'\n });\n const [inputPristine, setInputPristine] = React.useState(true);\n const inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value);\n const popupOpen = open && !readOnly;\n const filteredOptions = popupOpen ? filterOptions(options.filter(option => {\n if (filterSelectedOptions && (multiple ? value : [value]).some(value2 => value2 !== null && isOptionEqualToValue(option, value2))) {\n return false;\n }\n return true;\n }),\n // we use the empty string to manipulate `filterOptions` to not filter any options\n // i.e. the filter predicate always returns true\n {\n inputValue: inputValueIsSelectedValue && inputPristine ? '' : inputValue,\n getOptionLabel\n }) : [];\n const previousProps = usePreviousProps({\n filteredOptions,\n value,\n inputValue\n });\n React.useEffect(() => {\n const valueChange = value !== previousProps.value;\n if (focused && !valueChange) {\n return;\n }\n\n // Only reset the input's value when freeSolo if the component's value changes.\n if (freeSolo && !valueChange) {\n return;\n }\n resetInputValue(null, value);\n }, [value, resetInputValue, focused, previousProps.value, freeSolo]);\n const listboxAvailable = open && filteredOptions.length > 0 && !readOnly;\n if (process.env.NODE_ENV !== 'production') {\n if (value !== null && !freeSolo && options.length > 0) {\n const missingValue = (multiple ? value : [value]).filter(value2 => !options.some(option => isOptionEqualToValue(option, value2)));\n if (missingValue.length > 0) {\n console.warn([`MUI: The value provided to ${componentName} is invalid.`, `None of the options match with \\`${missingValue.length > 1 ? JSON.stringify(missingValue) : JSON.stringify(missingValue[0])}\\`.`, 'You can use the `isOptionEqualToValue` prop to customize the equality test.'].join('\\n'));\n }\n }\n }\n const focusTag = useEventCallback(tagToFocus => {\n if (tagToFocus === -1) {\n inputRef.current.focus();\n } else {\n anchorEl.querySelector(`[data-tag-index=\"${tagToFocus}\"]`).focus();\n }\n });\n\n // Ensure the focusedTag is never inconsistent\n React.useEffect(() => {\n if (multiple && focusedTag > value.length - 1) {\n setFocusedTag(-1);\n focusTag(-1);\n }\n }, [value, multiple, focusedTag, focusTag]);\n function validOptionIndex(index, direction) {\n if (!listboxRef.current || index < 0 || index >= filteredOptions.length) {\n return -1;\n }\n let nextFocus = index;\n while (true) {\n const option = listboxRef.current.querySelector(`[data-option-index=\"${nextFocus}\"]`);\n\n // Same logic as MenuList.js\n const nextFocusDisabled = disabledItemsFocusable ? false : !option || option.disabled || option.getAttribute('aria-disabled') === 'true';\n if (option && option.hasAttribute('tabindex') && !nextFocusDisabled) {\n // The next option is available\n return nextFocus;\n }\n\n // The next option is disabled, move to the next element.\n // with looped index\n if (direction === 'next') {\n nextFocus = (nextFocus + 1) % filteredOptions.length;\n } else {\n nextFocus = (nextFocus - 1 + filteredOptions.length) % filteredOptions.length;\n }\n\n // We end up with initial index, that means we don't have available options.\n // All of them are disabled\n if (nextFocus === index) {\n return -1;\n }\n }\n }\n const setHighlightedIndex = useEventCallback(({\n event,\n index,\n reason = 'auto'\n }) => {\n highlightedIndexRef.current = index;\n\n // does the index exist?\n if (index === -1) {\n inputRef.current.removeAttribute('aria-activedescendant');\n } else {\n inputRef.current.setAttribute('aria-activedescendant', `${id}-option-${index}`);\n }\n if (onHighlightChange) {\n onHighlightChange(event, index === -1 ? null : filteredOptions[index], reason);\n }\n if (!listboxRef.current) {\n return;\n }\n const prev = listboxRef.current.querySelector(`[role=\"option\"].${unstable_classNamePrefix}-focused`);\n if (prev) {\n prev.classList.remove(`${unstable_classNamePrefix}-focused`);\n prev.classList.remove(`${unstable_classNamePrefix}-focusVisible`);\n }\n let listboxNode = listboxRef.current;\n if (listboxRef.current.getAttribute('role') !== 'listbox') {\n listboxNode = listboxRef.current.parentElement.querySelector('[role=\"listbox\"]');\n }\n\n // \"No results\"\n if (!listboxNode) {\n return;\n }\n if (index === -1) {\n listboxNode.scrollTop = 0;\n return;\n }\n const option = listboxRef.current.querySelector(`[data-option-index=\"${index}\"]`);\n if (!option) {\n return;\n }\n option.classList.add(`${unstable_classNamePrefix}-focused`);\n if (reason === 'keyboard') {\n option.classList.add(`${unstable_classNamePrefix}-focusVisible`);\n }\n\n // Scroll active descendant into view.\n // Logic copied from https://www.w3.org/WAI/content-assets/wai-aria-practices/patterns/combobox/examples/js/select-only.js\n // In case of mouse clicks and touch (in mobile devices) we avoid scrolling the element and keep both behaviors same.\n // Consider this API instead once it has a better browser support:\n // .scrollIntoView({ scrollMode: 'if-needed', block: 'nearest' });\n if (listboxNode.scrollHeight > listboxNode.clientHeight && reason !== 'mouse' && reason !== 'touch') {\n const element = option;\n const scrollBottom = listboxNode.clientHeight + listboxNode.scrollTop;\n const elementBottom = element.offsetTop + element.offsetHeight;\n if (elementBottom > scrollBottom) {\n listboxNode.scrollTop = elementBottom - listboxNode.clientHeight;\n } else if (element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0) < listboxNode.scrollTop) {\n listboxNode.scrollTop = element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0);\n }\n }\n });\n const changeHighlightedIndex = useEventCallback(({\n event,\n diff,\n direction = 'next',\n reason = 'auto'\n }) => {\n if (!popupOpen) {\n return;\n }\n const getNextIndex = () => {\n const maxIndex = filteredOptions.length - 1;\n if (diff === 'reset') {\n return defaultHighlighted;\n }\n if (diff === 'start') {\n return 0;\n }\n if (diff === 'end') {\n return maxIndex;\n }\n const newIndex = highlightedIndexRef.current + diff;\n if (newIndex < 0) {\n if (newIndex === -1 && includeInputInList) {\n return -1;\n }\n if (disableListWrap && highlightedIndexRef.current !== -1 || Math.abs(diff) > 1) {\n return 0;\n }\n return maxIndex;\n }\n if (newIndex > maxIndex) {\n if (newIndex === maxIndex + 1 && includeInputInList) {\n return -1;\n }\n if (disableListWrap || Math.abs(diff) > 1) {\n return maxIndex;\n }\n return 0;\n }\n return newIndex;\n };\n const nextIndex = validOptionIndex(getNextIndex(), direction);\n setHighlightedIndex({\n index: nextIndex,\n reason,\n event\n });\n\n // Sync the content of the input with the highlighted option.\n if (autoComplete && diff !== 'reset') {\n if (nextIndex === -1) {\n inputRef.current.value = inputValue;\n } else {\n const option = getOptionLabel(filteredOptions[nextIndex]);\n inputRef.current.value = option;\n\n // The portion of the selected suggestion that has not been typed by the user,\n // a completion string, appears inline after the input cursor in the textbox.\n const index = option.toLowerCase().indexOf(inputValue.toLowerCase());\n if (index === 0 && inputValue.length > 0) {\n inputRef.current.setSelectionRange(inputValue.length, option.length);\n }\n }\n }\n });\n const getPreviousHighlightedOptionIndex = () => {\n const isSameValue = (value1, value2) => {\n const label1 = value1 ? getOptionLabel(value1) : '';\n const label2 = value2 ? getOptionLabel(value2) : '';\n return label1 === label2;\n };\n if (highlightedIndexRef.current !== -1 && previousProps.filteredOptions && previousProps.filteredOptions.length !== filteredOptions.length && previousProps.inputValue === inputValue && (multiple ? value.length === previousProps.value.length && previousProps.value.every((val, i) => getOptionLabel(value[i]) === getOptionLabel(val)) : isSameValue(previousProps.value, value))) {\n const previousHighlightedOption = previousProps.filteredOptions[highlightedIndexRef.current];\n if (previousHighlightedOption) {\n return findIndex(filteredOptions, option => {\n return getOptionLabel(option) === getOptionLabel(previousHighlightedOption);\n });\n }\n }\n return -1;\n };\n const syncHighlightedIndex = React.useCallback(() => {\n if (!popupOpen) {\n return;\n }\n\n // Check if the previously highlighted option still exists in the updated filtered options list and if the value and inputValue haven't changed\n // If it exists and the value and the inputValue haven't changed, just update its index, otherwise continue execution\n const previousHighlightedOptionIndex = getPreviousHighlightedOptionIndex();\n if (previousHighlightedOptionIndex !== -1) {\n highlightedIndexRef.current = previousHighlightedOptionIndex;\n return;\n }\n const valueItem = multiple ? value[0] : value;\n\n // The popup is empty, reset\n if (filteredOptions.length === 0 || valueItem == null) {\n changeHighlightedIndex({\n diff: 'reset'\n });\n return;\n }\n if (!listboxRef.current) {\n return;\n }\n\n // Synchronize the value with the highlighted index\n if (valueItem != null) {\n const currentOption = filteredOptions[highlightedIndexRef.current];\n\n // Keep the current highlighted index if possible\n if (multiple && currentOption && findIndex(value, val => isOptionEqualToValue(currentOption, val)) !== -1) {\n return;\n }\n const itemIndex = findIndex(filteredOptions, optionItem => isOptionEqualToValue(optionItem, valueItem));\n if (itemIndex === -1) {\n changeHighlightedIndex({\n diff: 'reset'\n });\n } else {\n setHighlightedIndex({\n index: itemIndex\n });\n }\n return;\n }\n\n // Prevent the highlighted index to leak outside the boundaries.\n if (highlightedIndexRef.current >= filteredOptions.length - 1) {\n setHighlightedIndex({\n index: filteredOptions.length - 1\n });\n return;\n }\n\n // Restore the focus to the previous index.\n setHighlightedIndex({\n index: highlightedIndexRef.current\n });\n // Ignore filteredOptions (and options, isOptionEqualToValue, getOptionLabel) not to break the scroll position\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n // Only sync the highlighted index when the option switch between empty and not\n filteredOptions.length,\n // Don't sync the highlighted index with the value when multiple\n // eslint-disable-next-line react-hooks/exhaustive-deps\n multiple ? false : value, filterSelectedOptions, changeHighlightedIndex, setHighlightedIndex, popupOpen, inputValue, multiple]);\n const handleListboxRef = useEventCallback(node => {\n setRef(listboxRef, node);\n if (!node) {\n return;\n }\n syncHighlightedIndex();\n });\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!inputRef.current || inputRef.current.nodeName !== 'INPUT') {\n if (inputRef.current && inputRef.current.nodeName === 'TEXTAREA') {\n console.warn([`A textarea element was provided to ${componentName} where input was expected.`, `This is not a supported scenario but it may work under certain conditions.`, `A textarea keyboard navigation may conflict with Autocomplete controls (for example enter and arrow keys).`, `Make sure to test keyboard navigation and add custom event handlers if necessary.`].join('\\n'));\n } else {\n console.error([`MUI: Unable to find the input element. It was resolved to ${inputRef.current} while an HTMLInputElement was expected.`, `Instead, ${componentName} expects an input element.`, '', componentName === 'useAutocomplete' ? 'Make sure you have bound getInputProps correctly and that the normal ref/effect resolutions order is guaranteed.' : 'Make sure you have customized the input component correctly.'].join('\\n'));\n }\n }\n }, [componentName]);\n }\n React.useEffect(() => {\n syncHighlightedIndex();\n }, [syncHighlightedIndex]);\n const handleOpen = event => {\n if (open) {\n return;\n }\n setOpenState(true);\n setInputPristine(true);\n if (onOpen) {\n onOpen(event);\n }\n };\n const handleClose = (event, reason) => {\n if (!open) {\n return;\n }\n setOpenState(false);\n if (onClose) {\n onClose(event, reason);\n }\n };\n const handleValue = (event, newValue, reason, details) => {\n if (multiple) {\n if (value.length === newValue.length && value.every((val, i) => val === newValue[i])) {\n return;\n }\n } else if (value === newValue) {\n return;\n }\n if (onChange) {\n onChange(event, newValue, reason, details);\n }\n setValueState(newValue);\n };\n const isTouch = React.useRef(false);\n const selectNewValue = (event, option, reasonProp = 'selectOption', origin = 'options') => {\n let reason = reasonProp;\n let newValue = option;\n if (multiple) {\n newValue = Array.isArray(value) ? value.slice() : [];\n if (process.env.NODE_ENV !== 'production') {\n const matches = newValue.filter(val => isOptionEqualToValue(option, val));\n if (matches.length > 1) {\n console.error([`MUI: The \\`isOptionEqualToValue\\` method of ${componentName} does not handle the arguments correctly.`, `The component expects a single value to match a given option but found ${matches.length} matches.`].join('\\n'));\n }\n }\n const itemIndex = findIndex(newValue, valueItem => isOptionEqualToValue(option, valueItem));\n if (itemIndex === -1) {\n newValue.push(option);\n } else if (origin !== 'freeSolo') {\n newValue.splice(itemIndex, 1);\n reason = 'removeOption';\n }\n }\n resetInputValue(event, newValue);\n handleValue(event, newValue, reason, {\n option\n });\n if (!disableCloseOnSelect && (!event || !event.ctrlKey && !event.metaKey)) {\n handleClose(event, reason);\n }\n if (blurOnSelect === true || blurOnSelect === 'touch' && isTouch.current || blurOnSelect === 'mouse' && !isTouch.current) {\n inputRef.current.blur();\n }\n };\n function validTagIndex(index, direction) {\n if (index === -1) {\n return -1;\n }\n let nextFocus = index;\n while (true) {\n // Out of range\n if (direction === 'next' && nextFocus === value.length || direction === 'previous' && nextFocus === -1) {\n return -1;\n }\n const option = anchorEl.querySelector(`[data-tag-index=\"${nextFocus}\"]`);\n\n // Same logic as MenuList.js\n if (!option || !option.hasAttribute('tabindex') || option.disabled || option.getAttribute('aria-disabled') === 'true') {\n nextFocus += direction === 'next' ? 1 : -1;\n } else {\n return nextFocus;\n }\n }\n }\n const handleFocusTag = (event, direction) => {\n if (!multiple) {\n return;\n }\n if (inputValue === '') {\n handleClose(event, 'toggleInput');\n }\n let nextTag = focusedTag;\n if (focusedTag === -1) {\n if (inputValue === '' && direction === 'previous') {\n nextTag = value.length - 1;\n }\n } else {\n nextTag += direction === 'next' ? 1 : -1;\n if (nextTag < 0) {\n nextTag = 0;\n }\n if (nextTag === value.length) {\n nextTag = -1;\n }\n }\n nextTag = validTagIndex(nextTag, direction);\n setFocusedTag(nextTag);\n focusTag(nextTag);\n };\n const handleClear = event => {\n ignoreFocus.current = true;\n setInputValueState('');\n if (onInputChange) {\n onInputChange(event, '', 'clear');\n }\n handleValue(event, multiple ? [] : null, 'clear');\n };\n const handleKeyDown = other => event => {\n if (other.onKeyDown) {\n other.onKeyDown(event);\n }\n if (event.defaultMuiPrevented) {\n return;\n }\n if (focusedTag !== -1 && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) === -1) {\n setFocusedTag(-1);\n focusTag(-1);\n }\n\n // Wait until IME is settled.\n if (event.which !== 229) {\n switch (event.key) {\n case 'Home':\n if (popupOpen && handleHomeEndKeys) {\n // Prevent scroll of the page\n event.preventDefault();\n changeHighlightedIndex({\n diff: 'start',\n direction: 'next',\n reason: 'keyboard',\n event\n });\n }\n break;\n case 'End':\n if (popupOpen && handleHomeEndKeys) {\n // Prevent scroll of the page\n event.preventDefault();\n changeHighlightedIndex({\n diff: 'end',\n direction: 'previous',\n reason: 'keyboard',\n event\n });\n }\n break;\n case 'PageUp':\n // Prevent scroll of the page\n event.preventDefault();\n changeHighlightedIndex({\n diff: -pageSize,\n direction: 'previous',\n reason: 'keyboard',\n event\n });\n handleOpen(event);\n break;\n case 'PageDown':\n // Prevent scroll of the page\n event.preventDefault();\n changeHighlightedIndex({\n diff: pageSize,\n direction: 'next',\n reason: 'keyboard',\n event\n });\n handleOpen(event);\n break;\n case 'ArrowDown':\n // Prevent cursor move\n event.preventDefault();\n changeHighlightedIndex({\n diff: 1,\n direction: 'next',\n reason: 'keyboard',\n event\n });\n handleOpen(event);\n break;\n case 'ArrowUp':\n // Prevent cursor move\n event.preventDefault();\n changeHighlightedIndex({\n diff: -1,\n direction: 'previous',\n reason: 'keyboard',\n event\n });\n handleOpen(event);\n break;\n case 'ArrowLeft':\n handleFocusTag(event, 'previous');\n break;\n case 'ArrowRight':\n handleFocusTag(event, 'next');\n break;\n case 'Enter':\n if (highlightedIndexRef.current !== -1 && popupOpen) {\n const option = filteredOptions[highlightedIndexRef.current];\n const disabled = getOptionDisabled ? getOptionDisabled(option) : false;\n\n // Avoid early form validation, let the end-users continue filling the form.\n event.preventDefault();\n if (disabled) {\n return;\n }\n selectNewValue(event, option, 'selectOption');\n\n // Move the selection to the end.\n if (autoComplete) {\n inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);\n }\n } else if (freeSolo && inputValue !== '' && inputValueIsSelectedValue === false) {\n if (multiple) {\n // Allow people to add new values before they submit the form.\n event.preventDefault();\n }\n selectNewValue(event, inputValue, 'createOption', 'freeSolo');\n }\n break;\n case 'Escape':\n if (popupOpen) {\n // Avoid Opera to exit fullscreen mode.\n event.preventDefault();\n // Avoid the Modal to handle the event.\n event.stopPropagation();\n handleClose(event, 'escape');\n } else if (clearOnEscape && (inputValue !== '' || multiple && value.length > 0)) {\n // Avoid Opera to exit fullscreen mode.\n event.preventDefault();\n // Avoid the Modal to handle the event.\n event.stopPropagation();\n handleClear(event);\n }\n break;\n case 'Backspace':\n // Remove the value on the left of the \"cursor\"\n if (multiple && !readOnly && inputValue === '' && value.length > 0) {\n const index = focusedTag === -1 ? value.length - 1 : focusedTag;\n const newValue = value.slice();\n newValue.splice(index, 1);\n handleValue(event, newValue, 'removeOption', {\n option: value[index]\n });\n }\n break;\n case 'Delete':\n // Remove the value on the right of the \"cursor\"\n if (multiple && !readOnly && inputValue === '' && value.length > 0 && focusedTag !== -1) {\n const index = focusedTag;\n const newValue = value.slice();\n newValue.splice(index, 1);\n handleValue(event, newValue, 'removeOption', {\n option: value[index]\n });\n }\n break;\n default:\n }\n }\n };\n const handleFocus = event => {\n setFocused(true);\n if (openOnFocus && !ignoreFocus.current) {\n handleOpen(event);\n }\n };\n const handleBlur = event => {\n // Ignore the event when using the scrollbar with IE11\n if (unstable_isActiveElementInListbox(listboxRef)) {\n inputRef.current.focus();\n return;\n }\n setFocused(false);\n firstFocus.current = true;\n ignoreFocus.current = false;\n if (autoSelect && highlightedIndexRef.current !== -1 && popupOpen) {\n selectNewValue(event, filteredOptions[highlightedIndexRef.current], 'blur');\n } else if (autoSelect && freeSolo && inputValue !== '') {\n selectNewValue(event, inputValue, 'blur', 'freeSolo');\n } else if (clearOnBlur) {\n resetInputValue(event, value);\n }\n handleClose(event, 'blur');\n };\n const handleInputChange = event => {\n const newValue = event.target.value;\n if (inputValue !== newValue) {\n setInputValueState(newValue);\n setInputPristine(false);\n if (onInputChange) {\n onInputChange(event, newValue, 'input');\n }\n }\n if (newValue === '') {\n if (!disableClearable && !multiple) {\n handleValue(event, null, 'clear');\n }\n } else {\n handleOpen(event);\n }\n };\n const handleOptionMouseMove = event => {\n const index = Number(event.currentTarget.getAttribute('data-option-index'));\n if (highlightedIndexRef.current !== index) {\n setHighlightedIndex({\n event,\n index,\n reason: 'mouse'\n });\n }\n };\n const handleOptionTouchStart = event => {\n setHighlightedIndex({\n event,\n index: Number(event.currentTarget.getAttribute('data-option-index')),\n reason: 'touch'\n });\n isTouch.current = true;\n };\n const handleOptionClick = event => {\n const index = Number(event.currentTarget.getAttribute('data-option-index'));\n selectNewValue(event, filteredOptions[index], 'selectOption');\n isTouch.current = false;\n };\n const handleTagDelete = index => event => {\n const newValue = value.slice();\n newValue.splice(index, 1);\n handleValue(event, newValue, 'removeOption', {\n option: value[index]\n });\n };\n const handlePopupIndicator = event => {\n if (open) {\n handleClose(event, 'toggleInput');\n } else {\n handleOpen(event);\n }\n };\n\n // Prevent input blur when interacting with the combobox\n const handleMouseDown = event => {\n // Prevent focusing the input if click is anywhere outside the Autocomplete\n if (!event.currentTarget.contains(event.target)) {\n return;\n }\n if (event.target.getAttribute('id') !== id) {\n event.preventDefault();\n }\n };\n\n // Focus the input when interacting with the combobox\n const handleClick = event => {\n // Prevent focusing the input if click is anywhere outside the Autocomplete\n if (!event.currentTarget.contains(event.target)) {\n return;\n }\n inputRef.current.focus();\n if (selectOnFocus && firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) {\n inputRef.current.select();\n }\n firstFocus.current = false;\n };\n const handleInputMouseDown = event => {\n if (!disabledProp && (inputValue === '' || !open)) {\n handlePopupIndicator(event);\n }\n };\n let dirty = freeSolo && inputValue.length > 0;\n dirty = dirty || (multiple ? value.length > 0 : value !== null);\n let groupedOptions = filteredOptions;\n if (groupBy) {\n // used to keep track of key and indexes in the result array\n const indexBy = new Map();\n let warn = false;\n groupedOptions = filteredOptions.reduce((acc, option, index) => {\n const group = groupBy(option);\n if (acc.length > 0 && acc[acc.length - 1].group === group) {\n acc[acc.length - 1].options.push(option);\n } else {\n if (process.env.NODE_ENV !== 'production') {\n if (indexBy.get(group) && !warn) {\n console.warn(`MUI: The options provided combined with the \\`groupBy\\` method of ${componentName} returns duplicated headers.`, 'You can solve the issue by sorting the options with the output of `groupBy`.');\n warn = true;\n }\n indexBy.set(group, true);\n }\n acc.push({\n key: index,\n index,\n group,\n options: [option]\n });\n }\n return acc;\n }, []);\n }\n if (disabledProp && focused) {\n handleBlur();\n }\n return {\n getRootProps: (other = {}) => _extends({\n 'aria-owns': listboxAvailable ? `${id}-listbox` : null\n }, other, {\n onKeyDown: handleKeyDown(other),\n onMouseDown: handleMouseDown,\n onClick: handleClick\n }),\n getInputLabelProps: () => ({\n id: `${id}-label`,\n htmlFor: id\n }),\n getInputProps: () => ({\n id,\n value: inputValue,\n onBlur: handleBlur,\n onFocus: handleFocus,\n onChange: handleInputChange,\n onMouseDown: handleInputMouseDown,\n // if open then this is handled imperatively so don't let react override\n // only have an opinion about this when closed\n 'aria-activedescendant': popupOpen ? '' : null,\n 'aria-autocomplete': autoComplete ? 'both' : 'list',\n 'aria-controls': listboxAvailable ? `${id}-listbox` : undefined,\n 'aria-expanded': listboxAvailable,\n // Disable browser's suggestion that might overlap with the popup.\n // Handle autocomplete but not autofill.\n autoComplete: 'off',\n ref: inputRef,\n autoCapitalize: 'none',\n spellCheck: 'false',\n role: 'combobox',\n disabled: disabledProp\n }),\n getClearProps: () => ({\n tabIndex: -1,\n type: 'button',\n onClick: handleClear\n }),\n getPopupIndicatorProps: () => ({\n tabIndex: -1,\n type: 'button',\n onClick: handlePopupIndicator\n }),\n getTagProps: ({\n index\n }) => _extends({\n key: index,\n 'data-tag-index': index,\n tabIndex: -1\n }, !readOnly && {\n onDelete: handleTagDelete(index)\n }),\n getListboxProps: () => ({\n role: 'listbox',\n id: `${id}-listbox`,\n 'aria-labelledby': `${id}-label`,\n ref: handleListboxRef,\n onMouseDown: event => {\n // Prevent blur\n event.preventDefault();\n }\n }),\n getOptionProps: ({\n index,\n option\n }) => {\n var _getOptionKey;\n const selected = (multiple ? value : [value]).some(value2 => value2 != null && isOptionEqualToValue(option, value2));\n const disabled = getOptionDisabled ? getOptionDisabled(option) : false;\n return {\n key: (_getOptionKey = getOptionKey == null ? void 0 : getOptionKey(option)) != null ? _getOptionKey : getOptionLabel(option),\n tabIndex: -1,\n role: 'option',\n id: `${id}-option-${index}`,\n onMouseMove: handleOptionMouseMove,\n onClick: handleOptionClick,\n onTouchStart: handleOptionTouchStart,\n 'data-option-index': index,\n 'aria-disabled': disabled,\n 'aria-selected': selected\n };\n },\n id,\n inputValue,\n value,\n dirty,\n expanded: popupOpen && anchorEl,\n popupOpen,\n focused: focused || focusedTag !== -1,\n anchorEl,\n setAnchorEl,\n focusedTag,\n groupedOptions\n };\n}","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getListSubheaderUtilityClass(slot) {\n return generateUtilityClass('MuiListSubheader', slot);\n}\nconst listSubheaderClasses = generateUtilityClasses('MuiListSubheader', ['root', 'colorPrimary', 'colorInherit', 'gutters', 'inset', 'sticky']);\nexport default listSubheaderClasses;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"className\", \"color\", \"component\", \"disableGutters\", \"disableSticky\", \"inset\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport composeClasses from '@mui/utils/composeClasses';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport capitalize from '../utils/capitalize';\nimport { getListSubheaderUtilityClass } from './listSubheaderClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n color,\n disableGutters,\n inset,\n disableSticky\n } = ownerState;\n const slots = {\n root: ['root', color !== 'default' && `color${capitalize(color)}`, !disableGutters && 'gutters', inset && 'inset', !disableSticky && 'sticky']\n };\n return composeClasses(slots, getListSubheaderUtilityClass, classes);\n};\nconst ListSubheaderRoot = styled('li', {\n name: 'MuiListSubheader',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], !ownerState.disableGutters && styles.gutters, ownerState.inset && styles.inset, !ownerState.disableSticky && styles.sticky];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n boxSizing: 'border-box',\n lineHeight: '48px',\n listStyle: 'none',\n color: (theme.vars || theme).palette.text.secondary,\n fontFamily: theme.typography.fontFamily,\n fontWeight: theme.typography.fontWeightMedium,\n fontSize: theme.typography.pxToRem(14)\n}, ownerState.color === 'primary' && {\n color: (theme.vars || theme).palette.primary.main\n}, ownerState.color === 'inherit' && {\n color: 'inherit'\n}, !ownerState.disableGutters && {\n paddingLeft: 16,\n paddingRight: 16\n}, ownerState.inset && {\n paddingLeft: 72\n}, !ownerState.disableSticky && {\n position: 'sticky',\n top: 0,\n zIndex: 1,\n backgroundColor: (theme.vars || theme).palette.background.paper\n}));\nconst ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiListSubheader'\n });\n const {\n className,\n color = 'default',\n component = 'li',\n disableGutters = false,\n disableSticky = false,\n inset = false\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n color,\n component,\n disableGutters,\n disableSticky,\n inset\n });\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(ListSubheaderRoot, _extends({\n as: component,\n className: clsx(classes.root, className),\n ref: ref,\n ownerState: ownerState\n }, other));\n});\nListSubheader.muiSkipListHighlight = true;\nprocess.env.NODE_ENV !== \"production\" ? ListSubheader.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 `pnpm 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. It supports those theme colors that make sense for this component.\n * @default 'default'\n */\n color: PropTypes.oneOf(['default', 'inherit', 'primary']),\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`, the List Subheader will not have gutters.\n * @default false\n */\n disableGutters: PropTypes.bool,\n /**\n * If `true`, the List Subheader will not stick to the top during scroll.\n * @default false\n */\n disableSticky: PropTypes.bool,\n /**\n * If `true`, the List Subheader is indented.\n * @default false\n */\n inset: PropTypes.bool,\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\nexport default ListSubheader;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getIconButtonUtilityClass(slot) {\n return generateUtilityClass('MuiIconButton', slot);\n}\nconst iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);\nexport default iconButtonClasses;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"edge\", \"children\", \"className\", \"color\", \"disabled\", \"disableFocusRipple\", \"size\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport chainPropTypes from '@mui/utils/chainPropTypes';\nimport composeClasses from '@mui/utils/composeClasses';\nimport { alpha } from '@mui/system/colorManipulator';\nimport styled from '../styles/styled';\nimport useThemeProps from '../styles/useThemeProps';\nimport ButtonBase from '../ButtonBase';\nimport capitalize from '../utils/capitalize';\nimport iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n classes,\n disabled,\n color,\n edge,\n size\n } = ownerState;\n const slots = {\n root: ['root', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`]\n };\n return composeClasses(slots, getIconButtonUtilityClass, classes);\n};\nconst IconButtonRoot = styled(ButtonBase, {\n name: 'MuiIconButton',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n textAlign: 'center',\n flex: '0 0 auto',\n fontSize: theme.typography.pxToRem(24),\n padding: 8,\n borderRadius: '50%',\n overflow: 'visible',\n // Explicitly set the default value to solve a bug on IE11.\n color: (theme.vars || theme).palette.action.active,\n transition: theme.transitions.create('background-color', {\n duration: theme.transitions.duration.shortest\n })\n}, !ownerState.disableRipple && {\n '&:hover': {\n backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n }\n}, ownerState.edge === 'start' && {\n marginLeft: ownerState.size === 'small' ? -3 : -12\n}, ownerState.edge === 'end' && {\n marginRight: ownerState.size === 'small' ? -3 : -12\n}), ({\n theme,\n ownerState\n}) => {\n var _palette;\n const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];\n return _extends({}, ownerState.color === 'inherit' && {\n color: 'inherit'\n }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({\n color: palette == null ? void 0 : palette.main\n }, !ownerState.disableRipple && {\n '&:hover': _extends({}, palette && {\n backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)\n }, {\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n })\n }), ownerState.size === 'small' && {\n padding: 5,\n fontSize: theme.typography.pxToRem(18)\n }, ownerState.size === 'large' && {\n padding: 12,\n fontSize: theme.typography.pxToRem(28)\n }, {\n [`&.${iconButtonClasses.disabled}`]: {\n backgroundColor: 'transparent',\n color: (theme.vars || theme).palette.action.disabled\n }\n });\n});\n\n/**\n * Refer to the [Icons](/material-ui/icons/) section of the documentation\n * regarding the available icon options.\n */\nconst IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiIconButton'\n });\n const {\n edge = false,\n children,\n className,\n color = 'default',\n disabled = false,\n disableFocusRipple = false,\n size = 'medium'\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const ownerState = _extends({}, props, {\n edge,\n color,\n disabled,\n disableFocusRipple,\n size\n });\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(IconButtonRoot, _extends({\n className: clsx(classes.root, className),\n centerRipple: true,\n focusRipple: !disableFocusRipple,\n disabled: disabled,\n ref: ref\n }, other, {\n ownerState: ownerState,\n children: children\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? IconButton.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 `pnpm proptypes`. │\n // └─────────────────────────────────────────────────────────────────────┘\n /**\n * The icon to display.\n */\n children: chainPropTypes(PropTypes.node, props => {\n const found = React.Children.toArray(props.children).some(child => /*#__PURE__*/React.isValidElement(child) && child.props.onClick);\n if (found) {\n return new Error(['MUI: You are providing an onClick event listener to a child of a button element.', 'Prefer applying it to the IconButton directly.', 'This guarantees that the whole