- \n
- \n {navConfig.map((link) => (\n
})
*/}\n \n
\n \n {!isSimple && (\n \n )}\n\n {!isSimple && (\n \n )}\n\n \n
\n\n \n \n \n \n \n
\n\n {!isSimple && (\n \n \n \n
\n )}\n\n \n \n \n {!isSimple && }\n {!isSimple && }\n
\n\n {!isSimple && (\n \n \n \n
\n )}\n\n {!isSimple && (\n \n \n \n
\n )}\n\n \n \n \n
\n\n \n \n \n \n
\n\n \n {!isSimple && }\n \n
\n\n {!isSimple && (\n \n \n \n
\n )}\n \n `solid 1px ${theme.palette.error.main}`,\n }),\n ...sx,\n }}\n >\n
\n );\n}\n","import PropTypes from 'prop-types';\n// form\nimport { useFormContext, Controller } from 'react-hook-form';\n// @mui\nimport { TextField } from '@mui/material';\n\n// ----------------------------------------------------------------------\n\nRHFTextField.propTypes = {\n name: PropTypes.string,\n};\n\nexport default function RHFTextField({ name, ...other }) {\n const { control } = useFormContext();\n\n return (\n \n * \n *
\n * )}\n * Drag 'n' drop some files here, or click to select files
\n *\n * \n *
\n * )\n * }\n * ```\n *\n * @function useDropzone\n *\n * @param {object} props\n * @param {string|string[]} [props.accept] Set accepted file types.\n * See https://github.com/okonet/attr-accept for more information.\n * Keep in mind that mime type determination is not reliable across platforms. CSV files,\n * for example, are reported as text/plain under macOS but as application/vnd.ms-excel under\n * Windows. In some cases there might not be a mime type set at all.\n * See: https://github.com/react-dropzone/react-dropzone/issues/276\n * @param {boolean} [props.multiple=true] Allow drag 'n' drop (or selection from the file dialog) of multiple files\n * @param {boolean} [props.preventDropOnDocument=true] If false, allow dropped items to take over the current browser window\n * @param {boolean} [props.noClick=false] If true, disables click to open the native file selection dialog\n * @param {boolean} [props.noKeyboard=false] If true, disables SPACE/ENTER to open the native file selection dialog.\n * Note that it also stops tracking the focus state.\n * @param {boolean} [props.noDrag=false] If true, disables drag 'n' drop\n * @param {boolean} [props.noDragEventsBubbling=false] If true, stops drag event propagation to parents\n * @param {number} [props.minSize=0] Minimum file size (in bytes)\n * @param {number} [props.maxSize=Infinity] Maximum file size (in bytes)\n * @param {boolean} [props.disabled=false] Enable/disable the dropzone\n * @param {getFilesFromEvent} [props.getFilesFromEvent] Use this to provide a custom file aggregator\n * @param {Function} [props.onFileDialogCancel] Cb for when closing the file dialog with no selection\n * @param {boolean} [props.useFsAccessApi] Set to true to use the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API\n * to open the file picker instead of using an `` click event.\n * @param {Function} [props.onFileDialogOpen] Cb for when opening the file dialog\n * @param {dragCb} [props.onDragEnter] Cb for when the `dragenter` event occurs.\n * @param {dragCb} [props.onDragLeave] Cb for when the `dragleave` event occurs\n * @param {dragCb} [props.onDragOver] Cb for when the `dragover` event occurs\n * @param {dropCb} [props.onDrop] Cb for when the `drop` event occurs.\n * Note that this callback is invoked after the `getFilesFromEvent` callback is done.\n *\n * Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.\n * `accept` must be a valid [MIME type](http://www.iana.org/assignments/media-types/media-types.xhtml) according to [input element specification](https://www.w3.org/wiki/HTML/Elements/input/file) or a valid file extension.\n * If `multiple` is set to false and additional files are dropped,\n * all files besides the first will be rejected.\n * Any file which does not have a size in the [`minSize`, `maxSize`] range, will be rejected as well.\n *\n * Note that the `onDrop` callback will always be invoked regardless if the dropped files were accepted or rejected.\n * If you'd like to react to a specific scenario, use the `onDropAccepted`/`onDropRejected` props.\n *\n * `onDrop` will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.\n * For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:\n *\n * ```js\n * function onDrop(acceptedFiles) {\n * const req = request.post('/upload')\n * acceptedFiles.forEach(file => {\n * req.attach(file.name, file)\n * })\n * req.end(callback)\n * }\n * ```\n * @param {dropAcceptedCb} [props.onDropAccepted]\n * @param {dropRejectedCb} [props.onDropRejected]\n *\n * @returns {DropzoneState}\n */\n\nexport function useDropzone() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n var _defaultProps$options = _objectSpread(_objectSpread({}, defaultProps), options),\n accept = _defaultProps$options.accept,\n disabled = _defaultProps$options.disabled,\n getFilesFromEvent = _defaultProps$options.getFilesFromEvent,\n maxSize = _defaultProps$options.maxSize,\n minSize = _defaultProps$options.minSize,\n multiple = _defaultProps$options.multiple,\n maxFiles = _defaultProps$options.maxFiles,\n onDragEnter = _defaultProps$options.onDragEnter,\n onDragLeave = _defaultProps$options.onDragLeave,\n onDragOver = _defaultProps$options.onDragOver,\n onDrop = _defaultProps$options.onDrop,\n onDropAccepted = _defaultProps$options.onDropAccepted,\n onDropRejected = _defaultProps$options.onDropRejected,\n onFileDialogCancel = _defaultProps$options.onFileDialogCancel,\n onFileDialogOpen = _defaultProps$options.onFileDialogOpen,\n useFsAccessApi = _defaultProps$options.useFsAccessApi,\n preventDropOnDocument = _defaultProps$options.preventDropOnDocument,\n noClick = _defaultProps$options.noClick,\n noKeyboard = _defaultProps$options.noKeyboard,\n noDrag = _defaultProps$options.noDrag,\n noDragEventsBubbling = _defaultProps$options.noDragEventsBubbling,\n validator = _defaultProps$options.validator;\n\n var onFileDialogOpenCb = useMemo(function () {\n return typeof onFileDialogOpen === \"function\" ? onFileDialogOpen : noop;\n }, [onFileDialogOpen]);\n var onFileDialogCancelCb = useMemo(function () {\n return typeof onFileDialogCancel === \"function\" ? onFileDialogCancel : noop;\n }, [onFileDialogCancel]);\n var rootRef = useRef(null);\n var inputRef = useRef(null);\n\n var _useReducer = useReducer(reducer, initialState),\n _useReducer2 = _slicedToArray(_useReducer, 2),\n state = _useReducer2[0],\n dispatch = _useReducer2[1];\n\n var isFocused = state.isFocused,\n isFileDialogActive = state.isFileDialogActive,\n draggedFiles = state.draggedFiles;\n var fsAccessApiWorksRef = useRef(typeof window !== \"undefined\" && window.isSecureContext && useFsAccessApi && canUseFileSystemAccessAPI()); // Update file dialog active state when the window is focused on\n\n var onWindowFocus = function onWindowFocus() {\n // Execute the timeout only if the file dialog is opened in the browser\n if (!fsAccessApiWorksRef.current && isFileDialogActive) {\n setTimeout(function () {\n if (inputRef.current) {\n var files = inputRef.current.files;\n\n if (!files.length) {\n dispatch({\n type: \"closeDialog\"\n });\n onFileDialogCancelCb();\n }\n }\n }, 300);\n }\n };\n\n useEffect(function () {\n window.addEventListener(\"focus\", onWindowFocus, false);\n return function () {\n window.removeEventListener(\"focus\", onWindowFocus, false);\n };\n }, [inputRef, isFileDialogActive, onFileDialogCancelCb, fsAccessApiWorksRef]);\n var dragTargetsRef = useRef([]);\n\n var onDocumentDrop = function onDocumentDrop(event) {\n if (rootRef.current && rootRef.current.contains(event.target)) {\n // If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler\n return;\n }\n\n event.preventDefault();\n dragTargetsRef.current = [];\n };\n\n useEffect(function () {\n if (preventDropOnDocument) {\n document.addEventListener(\"dragover\", onDocumentDragOver, false);\n document.addEventListener(\"drop\", onDocumentDrop, false);\n }\n\n return function () {\n if (preventDropOnDocument) {\n document.removeEventListener(\"dragover\", onDocumentDragOver);\n document.removeEventListener(\"drop\", onDocumentDrop);\n }\n };\n }, [rootRef, preventDropOnDocument]);\n var onDragEnterCb = useCallback(function (event) {\n event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done\n\n event.persist();\n stopPropagation(event);\n dragTargetsRef.current = [].concat(_toConsumableArray(dragTargetsRef.current), [event.target]);\n\n if (isEvtWithFiles(event)) {\n Promise.resolve(getFilesFromEvent(event)).then(function (draggedFiles) {\n if (isPropagationStopped(event) && !noDragEventsBubbling) {\n return;\n }\n\n dispatch({\n draggedFiles: draggedFiles,\n isDragActive: true,\n type: \"setDraggedFiles\"\n });\n\n if (onDragEnter) {\n onDragEnter(event);\n }\n });\n }\n }, [getFilesFromEvent, onDragEnter, noDragEventsBubbling]);\n var onDragOverCb = useCallback(function (event) {\n event.preventDefault();\n event.persist();\n stopPropagation(event);\n var hasFiles = isEvtWithFiles(event);\n\n if (hasFiles && event.dataTransfer) {\n try {\n event.dataTransfer.dropEffect = \"copy\";\n } catch (_unused) {}\n /* eslint-disable-line no-empty */\n\n }\n\n if (hasFiles && onDragOver) {\n onDragOver(event);\n }\n\n return false;\n }, [onDragOver, noDragEventsBubbling]);\n var onDragLeaveCb = useCallback(function (event) {\n event.preventDefault();\n event.persist();\n stopPropagation(event); // Only deactivate once the dropzone and all children have been left\n\n var targets = dragTargetsRef.current.filter(function (target) {\n return rootRef.current && rootRef.current.contains(target);\n }); // Make sure to remove a target present multiple times only once\n // (Firefox may fire dragenter/dragleave multiple times on the same element)\n\n var targetIdx = targets.indexOf(event.target);\n\n if (targetIdx !== -1) {\n targets.splice(targetIdx, 1);\n }\n\n dragTargetsRef.current = targets;\n\n if (targets.length > 0) {\n return;\n }\n\n dispatch({\n isDragActive: false,\n type: \"setDraggedFiles\",\n draggedFiles: []\n });\n\n if (isEvtWithFiles(event) && onDragLeave) {\n onDragLeave(event);\n }\n }, [rootRef, onDragLeave, noDragEventsBubbling]);\n var setFiles = useCallback(function (files, event) {\n var acceptedFiles = [];\n var fileRejections = [];\n files.forEach(function (file) {\n var _fileAccepted = fileAccepted(file, accept),\n _fileAccepted2 = _slicedToArray(_fileAccepted, 2),\n accepted = _fileAccepted2[0],\n acceptError = _fileAccepted2[1];\n\n var _fileMatchSize = fileMatchSize(file, minSize, maxSize),\n _fileMatchSize2 = _slicedToArray(_fileMatchSize, 2),\n sizeMatch = _fileMatchSize2[0],\n sizeError = _fileMatchSize2[1];\n\n var customErrors = validator ? validator(file) : null;\n\n if (accepted && sizeMatch && !customErrors) {\n acceptedFiles.push(file);\n } else {\n var errors = [acceptError, sizeError];\n\n if (customErrors) {\n errors = errors.concat(customErrors);\n }\n\n fileRejections.push({\n file: file,\n errors: errors.filter(function (e) {\n return e;\n })\n });\n }\n });\n\n if (!multiple && acceptedFiles.length > 1 || multiple && maxFiles >= 1 && acceptedFiles.length > maxFiles) {\n // Reject everything and empty accepted files\n acceptedFiles.forEach(function (file) {\n fileRejections.push({\n file: file,\n errors: [TOO_MANY_FILES_REJECTION]\n });\n });\n acceptedFiles.splice(0);\n }\n\n dispatch({\n acceptedFiles: acceptedFiles,\n fileRejections: fileRejections,\n type: \"setFiles\"\n });\n\n if (onDrop) {\n onDrop(acceptedFiles, fileRejections, event);\n }\n\n if (fileRejections.length > 0 && onDropRejected) {\n onDropRejected(fileRejections, event);\n }\n\n if (acceptedFiles.length > 0 && onDropAccepted) {\n onDropAccepted(acceptedFiles, event);\n }\n }, [dispatch, multiple, accept, minSize, maxSize, maxFiles, onDrop, onDropAccepted, onDropRejected, validator]);\n var onDropCb = useCallback(function (event) {\n event.preventDefault(); // Persist here because we need the event later after getFilesFromEvent() is done\n\n event.persist();\n stopPropagation(event);\n dragTargetsRef.current = [];\n\n if (isEvtWithFiles(event)) {\n Promise.resolve(getFilesFromEvent(event)).then(function (files) {\n if (isPropagationStopped(event) && !noDragEventsBubbling) {\n return;\n }\n\n setFiles(files, event);\n });\n }\n\n dispatch({\n type: \"reset\"\n });\n }, [getFilesFromEvent, setFiles, noDragEventsBubbling]); // Fn for opening the file dialog programmatically\n\n var openFileDialog = useCallback(function () {\n // No point to use FS access APIs if context is not secure\n // https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts#feature_detection\n if (fsAccessApiWorksRef.current) {\n dispatch({\n type: \"openDialog\"\n });\n onFileDialogOpenCb(); // https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker\n\n var opts = {\n multiple: multiple,\n types: filePickerOptionsTypes(accept)\n };\n window.showOpenFilePicker(opts).then(function (handles) {\n return getFilesFromEvent(handles);\n }).then(function (files) {\n setFiles(files, null);\n dispatch({\n type: \"closeDialog\"\n });\n }).catch(function (e) {\n // AbortError means the user canceled\n if (isAbort(e)) {\n onFileDialogCancelCb(e);\n dispatch({\n type: \"closeDialog\"\n });\n } else if (isSecurityError(e)) {\n fsAccessApiWorksRef.current = false; // CORS, so cannot use this API\n // Try using the input\n\n if (inputRef.current) {\n inputRef.current.value = null;\n inputRef.current.click();\n }\n }\n });\n return;\n }\n\n if (inputRef.current) {\n dispatch({\n type: \"openDialog\"\n });\n onFileDialogOpenCb();\n inputRef.current.value = null;\n inputRef.current.click();\n }\n }, [dispatch, onFileDialogOpenCb, onFileDialogCancelCb, useFsAccessApi, setFiles, accept, multiple]); // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone\n\n var onKeyDownCb = useCallback(function (event) {\n // Ignore keyboard events bubbling up the DOM tree\n if (!rootRef.current || !rootRef.current.isEqualNode(event.target)) {\n return;\n }\n\n if (event.key === \" \" || event.key === \"Enter\" || event.keyCode === 32 || event.keyCode === 13) {\n event.preventDefault();\n openFileDialog();\n }\n }, [rootRef, openFileDialog]); // Update focus state for the dropzone\n\n var onFocusCb = useCallback(function () {\n dispatch({\n type: \"focus\"\n });\n }, []);\n var onBlurCb = useCallback(function () {\n dispatch({\n type: \"blur\"\n });\n }, []); // Cb to open the file dialog when click occurs on the dropzone\n\n var onClickCb = useCallback(function () {\n if (noClick) {\n return;\n } // In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()\n // to ensure React can handle state changes\n // See: https://github.com/react-dropzone/react-dropzone/issues/450\n\n\n if (isIeOrEdge()) {\n setTimeout(openFileDialog, 0);\n } else {\n openFileDialog();\n }\n }, [noClick, openFileDialog]);\n\n var composeHandler = function composeHandler(fn) {\n return disabled ? null : fn;\n };\n\n var composeKeyboardHandler = function composeKeyboardHandler(fn) {\n return noKeyboard ? null : composeHandler(fn);\n };\n\n var composeDragHandler = function composeDragHandler(fn) {\n return noDrag ? null : composeHandler(fn);\n };\n\n var stopPropagation = function stopPropagation(event) {\n if (noDragEventsBubbling) {\n event.stopPropagation();\n }\n };\n\n var getRootProps = useMemo(function () {\n return function () {\n var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref2$refKey = _ref2.refKey,\n refKey = _ref2$refKey === void 0 ? \"ref\" : _ref2$refKey,\n role = _ref2.role,\n onKeyDown = _ref2.onKeyDown,\n onFocus = _ref2.onFocus,\n onBlur = _ref2.onBlur,\n onClick = _ref2.onClick,\n onDragEnter = _ref2.onDragEnter,\n onDragOver = _ref2.onDragOver,\n onDragLeave = _ref2.onDragLeave,\n onDrop = _ref2.onDrop,\n rest = _objectWithoutProperties(_ref2, _excluded3);\n\n return _objectSpread(_objectSpread(_defineProperty({\n onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),\n onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),\n onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),\n onClick: composeHandler(composeEventHandlers(onClick, onClickCb)),\n onDragEnter: composeDragHandler(composeEventHandlers(onDragEnter, onDragEnterCb)),\n onDragOver: composeDragHandler(composeEventHandlers(onDragOver, onDragOverCb)),\n onDragLeave: composeDragHandler(composeEventHandlers(onDragLeave, onDragLeaveCb)),\n onDrop: composeDragHandler(composeEventHandlers(onDrop, onDropCb)),\n role: typeof role === \"string\" && role !== \"\" ? role : \"button\"\n }, refKey, rootRef), !disabled && !noKeyboard ? {\n tabIndex: 0\n } : {}), rest);\n };\n }, [rootRef, onKeyDownCb, onFocusCb, onBlurCb, onClickCb, onDragEnterCb, onDragOverCb, onDragLeaveCb, onDropCb, noKeyboard, noDrag, disabled]);\n var onInputElementClick = useCallback(function (event) {\n event.stopPropagation();\n }, []);\n var getInputProps = useMemo(function () {\n return function () {\n var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref3$refKey = _ref3.refKey,\n refKey = _ref3$refKey === void 0 ? \"ref\" : _ref3$refKey,\n onChange = _ref3.onChange,\n onClick = _ref3.onClick,\n rest = _objectWithoutProperties(_ref3, _excluded4);\n\n var inputProps = _defineProperty({\n accept: accept,\n multiple: multiple,\n type: \"file\",\n style: {\n display: \"none\"\n },\n onChange: composeHandler(composeEventHandlers(onChange, onDropCb)),\n onClick: composeHandler(composeEventHandlers(onClick, onInputElementClick)),\n autoComplete: \"off\",\n tabIndex: -1\n }, refKey, inputRef);\n\n return _objectSpread(_objectSpread({}, inputProps), rest);\n };\n }, [inputRef, accept, multiple, onDropCb, disabled]);\n var fileCount = draggedFiles.length;\n var isDragAccept = fileCount > 0 && allFilesAccepted({\n files: draggedFiles,\n accept: accept,\n minSize: minSize,\n maxSize: maxSize,\n multiple: multiple,\n maxFiles: maxFiles\n });\n var isDragReject = fileCount > 0 && !isDragAccept;\n return _objectSpread(_objectSpread({}, state), {}, {\n isDragAccept: isDragAccept,\n isDragReject: isDragReject,\n isFocused: isFocused && !disabled,\n getRootProps: getRootProps,\n getInputProps: getInputProps,\n rootRef: rootRef,\n inputRef: inputRef,\n open: composeHandler(openFileDialog)\n });\n}\n\nfunction reducer(state, action) {\n /* istanbul ignore next */\n switch (action.type) {\n case \"focus\":\n return _objectSpread(_objectSpread({}, state), {}, {\n isFocused: true\n });\n\n case \"blur\":\n return _objectSpread(_objectSpread({}, state), {}, {\n isFocused: false\n });\n\n case \"openDialog\":\n return _objectSpread(_objectSpread({}, initialState), {}, {\n isFileDialogActive: true\n });\n\n case \"closeDialog\":\n return _objectSpread(_objectSpread({}, state), {}, {\n isFileDialogActive: false\n });\n\n case \"setDraggedFiles\":\n /* eslint no-case-declarations: 0 */\n var isDragActive = action.isDragActive,\n draggedFiles = action.draggedFiles;\n return _objectSpread(_objectSpread({}, state), {}, {\n draggedFiles: draggedFiles,\n isDragActive: isDragActive\n });\n\n case \"setFiles\":\n return _objectSpread(_objectSpread({}, state), {}, {\n acceptedFiles: action.acceptedFiles,\n fileRejections: action.fileRejections\n });\n\n case \"reset\":\n return _objectSpread({}, initialState);\n\n default:\n return state;\n }\n}\n\nfunction noop() {}\n\nexport { ErrorCode } from \"./utils\";","import PropTypes from 'prop-types';\nimport { useDropzone } from 'react-dropzone';\n// @mui\nimport { styled } from '@mui/material/styles';\nimport { Box } from '@mui/material';\n//\nimport Image from '../Image';\nimport RejectionFiles from './RejectionFiles';\nimport BlockContent from './BlockContent';\n\n// ----------------------------------------------------------------------\n\nconst DropZoneStyle = styled('div')(({ theme }) => ({\n outline: 'none',\n overflow: 'hidden',\n position: 'relative',\n padding: theme.spacing(5, 1),\n borderRadius: theme.shape.borderRadius,\n transition: theme.transitions.create('padding'),\n backgroundColor: '#c8c8c8',\n border: `1px dashed ${theme.palette.grey[500_32]}`,\n '&:hover': { opacity: 0.72, cursor: 'pointer' },\n}));\n\n// ----------------------------------------------------------------------\n\nUploadSingleFile.propTypes = {\n error: PropTypes.bool,\n file: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n helperText: PropTypes.node,\n sx: PropTypes.object,\n};\n\nexport default function UploadSingleFile({ error = false, file, helperText, sx, ...other }) {\n const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({\n multiple: false,\n ...other,\n });\n\n return (\n Drag and drop some files here, or click to select files
\n *, and elements get a default\n // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,\n // yet they are still part of the regular tab order; in FF, they get a default\n // `tabIndex` of 0; since Chrome still puts those elements in the regular tab\n // order, consider their tab index to be 0.\n\n\n if (node.contentEditable === 'true' || (node.nodeName === 'AUDIO' || node.nodeName === 'VIDEO' || node.nodeName === 'DETAILS') && node.getAttribute('tabindex') === null) {\n return 0;\n }\n\n return node.tabIndex;\n}\n\nfunction isNonTabbableRadio(node) {\n if (node.tagName !== 'INPUT' || node.type !== 'radio') {\n return false;\n }\n\n if (!node.name) {\n return false;\n }\n\n const getRadio = selector => node.ownerDocument.querySelector(`input[type=\"radio\"]${selector}`);\n\n let roving = getRadio(`[name=\"${node.name}\"]:checked`);\n\n if (!roving) {\n roving = getRadio(`[name=\"${node.name}\"]`);\n }\n\n return roving !== node;\n}\n\nfunction isNodeMatchingSelectorFocusable(node) {\n if (node.disabled || node.tagName === 'INPUT' && node.type === 'hidden' || isNonTabbableRadio(node)) {\n return false;\n }\n\n return true;\n}\n\nfunction defaultGetTabbable(root) {\n const regularTabNodes = [];\n const orderedTabNodes = [];\n Array.from(root.querySelectorAll(candidatesSelector)).forEach((node, i) => {\n const nodeTabIndex = getTabIndex(node);\n\n if (nodeTabIndex === -1 || !isNodeMatchingSelectorFocusable(node)) {\n return;\n }\n\n if (nodeTabIndex === 0) {\n regularTabNodes.push(node);\n } else {\n orderedTabNodes.push({\n documentOrder: i,\n tabIndex: nodeTabIndex,\n node\n });\n }\n });\n return orderedTabNodes.sort((a, b) => a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex).map(a => a.node).concat(regularTabNodes);\n}\n\nfunction defaultIsEnabled() {\n return true;\n}\n/**\n * Utility component that locks focus inside the component.\n */\n\n\nfunction TrapFocus(props) {\n const {\n children,\n disableAutoFocus = false,\n disableEnforceFocus = false,\n disableRestoreFocus = false,\n getTabbable = defaultGetTabbable,\n isEnabled = defaultIsEnabled,\n open\n } = props;\n const ignoreNextEnforceFocus = React.useRef();\n const sentinelStart = React.useRef(null);\n const sentinelEnd = React.useRef(null);\n const nodeToRestore = React.useRef(null);\n const reactFocusEventTarget = React.useRef(null); // This variable is useful when disableAutoFocus is true.\n // It waits for the active element to move into the component to activate.\n\n const activated = React.useRef(false);\n const rootRef = React.useRef(null);\n const handleRef = useForkRef(children.ref, rootRef);\n const lastKeydown = React.useRef(null);\n React.useEffect(() => {\n // We might render an empty child.\n if (!open || !rootRef.current) {\n return;\n }\n\n activated.current = !disableAutoFocus;\n }, [disableAutoFocus, open]);\n React.useEffect(() => {\n // We might render an empty child.\n if (!open || !rootRef.current) {\n return;\n }\n\n const doc = ownerDocument(rootRef.current);\n\n if (!rootRef.current.contains(doc.activeElement)) {\n if (!rootRef.current.hasAttribute('tabIndex')) {\n if (process.env.NODE_ENV !== 'production') {\n console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to \"-1\".'].join('\\n'));\n }\n\n rootRef.current.setAttribute('tabIndex', -1);\n }\n\n if (activated.current) {\n rootRef.current.focus();\n }\n }\n\n return () => {\n // restoreLastFocus()\n if (!disableRestoreFocus) {\n // In IE11 it is possible for document.activeElement to be null resulting\n // in nodeToRestore.current being null.\n // Not all elements in IE11 have a focus method.\n // Once IE11 support is dropped the focus() call can be unconditional.\n if (nodeToRestore.current && nodeToRestore.current.focus) {\n ignoreNextEnforceFocus.current = true;\n nodeToRestore.current.focus();\n }\n\n nodeToRestore.current = null;\n }\n }; // Missing `disableRestoreFocus` which is fine.\n // We don't support changing that prop on an open TrapFocus\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n React.useEffect(() => {\n // We might render an empty child.\n if (!open || !rootRef.current) {\n return;\n }\n\n const doc = ownerDocument(rootRef.current);\n\n const contain = nativeEvent => {\n const {\n current: rootElement\n } = rootRef; // Cleanup functions are executed lazily in React 17.\n // Contain can be called between the component being unmounted and its cleanup function being run.\n\n if (rootElement === null) {\n return;\n }\n\n if (!doc.hasFocus() || disableEnforceFocus || !isEnabled() || ignoreNextEnforceFocus.current) {\n ignoreNextEnforceFocus.current = false;\n return;\n }\n\n if (!rootElement.contains(doc.activeElement)) {\n // if the focus event is not coming from inside the children's react tree, reset the refs\n if (nativeEvent && reactFocusEventTarget.current !== nativeEvent.target || doc.activeElement !== reactFocusEventTarget.current) {\n reactFocusEventTarget.current = null;\n } else if (reactFocusEventTarget.current !== null) {\n return;\n }\n\n if (!activated.current) {\n return;\n }\n\n let tabbable = [];\n\n if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {\n tabbable = getTabbable(rootRef.current);\n }\n\n if (tabbable.length > 0) {\n var _lastKeydown$current, _lastKeydown$current2;\n\n const isShiftTab = Boolean(((_lastKeydown$current = lastKeydown.current) == null ? void 0 : _lastKeydown$current.shiftKey) && ((_lastKeydown$current2 = lastKeydown.current) == null ? void 0 : _lastKeydown$current2.key) === 'Tab');\n const focusNext = tabbable[0];\n const focusPrevious = tabbable[tabbable.length - 1];\n\n if (isShiftTab) {\n focusPrevious.focus();\n } else {\n focusNext.focus();\n }\n } else {\n rootElement.focus();\n }\n }\n };\n\n const loopFocus = nativeEvent => {\n lastKeydown.current = nativeEvent;\n\n if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {\n return;\n } // Make sure the next tab starts from the right place.\n // doc.activeElement referes to the origin.\n\n\n if (doc.activeElement === rootRef.current && nativeEvent.shiftKey) {\n // We need to ignore the next contain as\n // it will try to move the focus back to the rootRef element.\n ignoreNextEnforceFocus.current = true;\n sentinelEnd.current.focus();\n }\n };\n\n doc.addEventListener('focusin', contain);\n doc.addEventListener('keydown', loopFocus, true); // With Edge, Safari and Firefox, no focus related events are fired when the focused area stops being a focused area.\n // e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=559561.\n // Instead, we can look if the active element was restored on the BODY element.\n //\n // The whatwg spec defines how the browser should behave but does not explicitly mention any events:\n // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.\n\n const interval = setInterval(() => {\n if (doc.activeElement.tagName === 'BODY') {\n contain();\n }\n }, 50);\n return () => {\n clearInterval(interval);\n doc.removeEventListener('focusin', contain);\n doc.removeEventListener('keydown', loopFocus, true);\n };\n }, [disableAutoFocus, disableEnforceFocus, disableRestoreFocus, isEnabled, open, getTabbable]);\n\n const onFocus = event => {\n if (nodeToRestore.current === null) {\n nodeToRestore.current = event.relatedTarget;\n }\n\n activated.current = true;\n reactFocusEventTarget.current = event.target;\n const childrenPropsHandler = children.props.onFocus;\n\n if (childrenPropsHandler) {\n childrenPropsHandler(event);\n }\n };\n\n const handleFocusSentinel = event => {\n if (nodeToRestore.current === null) {\n nodeToRestore.current = event.relatedTarget;\n }\n\n activated.current = true;\n };\n\n return /*#__PURE__*/_jsxs(React.Fragment, {\n children: [/*#__PURE__*/_jsx(\"div\", {\n tabIndex: 0,\n onFocus: handleFocusSentinel,\n ref: sentinelStart,\n \"data-test\": \"sentinelStart\"\n }), /*#__PURE__*/React.cloneElement(children, {\n ref: handleRef,\n onFocus\n }), /*#__PURE__*/_jsx(\"div\", {\n tabIndex: 0,\n onFocus: handleFocusSentinel,\n ref: sentinelEnd,\n \"data-test\": \"sentinelEnd\"\n })]\n });\n}\n\nprocess.env.NODE_ENV !== \"production\" ? TrapFocus.propTypes\n/* remove-proptypes */\n= {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * A single child content element.\n */\n children: elementAcceptingRef,\n\n /**\n * If `true`, the trap focus will not automatically shift focus to itself when it opens, and\n * replace it to the last focused element when it closes.\n * This also works correctly with any trap focus children that have the `disableAutoFocus` prop.\n *\n * Generally this should never be set to `true` as it makes the trap focus less\n * accessible to assistive technologies, like screen readers.\n * @default false\n */\n disableAutoFocus: PropTypes.bool,\n\n /**\n * If `true`, the trap focus will not prevent focus from leaving the trap focus while open.\n *\n * Generally this should never be set to `true` as it makes the trap focus less\n * accessible to assistive technologies, like screen readers.\n * @default false\n */\n disableEnforceFocus: PropTypes.bool,\n\n /**\n * If `true`, the trap focus will not restore focus to previously focused element once\n * trap focus is hidden or unmounted.\n * @default false\n */\n disableRestoreFocus: PropTypes.bool,\n\n /**\n * Returns an array of ordered tabbable nodes (i.e. in tab order) within the root.\n * For instance, you can provide the \"tabbable\" npm dependency.\n * @param {HTMLElement} root\n */\n getTabbable: PropTypes.func,\n\n /**\n * This prop extends the `open` prop.\n * It allows to toggle the open state without having to wait for a rerender when changing the `open` prop.\n * This prop should be memoized.\n * It can be used to support multiple trap focus mounted at the same time.\n * @default function defaultIsEnabled() {\n * return true;\n * }\n */\n isEnabled: PropTypes.func,\n\n /**\n * If `true`, focus is locked.\n */\n open: PropTypes.bool.isRequired\n} : void 0;\n\nif (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line\n TrapFocus['propTypes' + ''] = exactProp(TrapFocus.propTypes);\n}\n\nexport default TrapFocus;","const defaultGenerator = componentName => componentName;\n\nconst createClassNameGenerator = () => {\n let generate = defaultGenerator;\n return {\n configure(generator) {\n generate = generator;\n },\n\n generate(componentName) {\n return generate(componentName);\n },\n\n reset() {\n generate = defaultGenerator;\n }\n\n };\n};\n\nconst ClassNameGenerator = createClassNameGenerator();\nexport default ClassNameGenerator;","export default function composeClasses(slots, getUtilityClass, classes) {\n const output = {};\n Object.keys(slots).forEach( // `Objet.keys(slots)` can't be wider than `T` because we infer `T` from `slots`.\n // @ts-expect-error https://github.com/microsoft/TypeScript/pull/12253#issuecomment-263132208\n slot => {\n output[slot] = slots[slot].reduce((acc, key) => {\n if (key) {\n if (classes && classes[key]) {\n acc.push(classes[key]);\n }\n\n acc.push(getUtilityClass(key));\n }\n\n return acc;\n }, []).join(' ');\n });\n return output;\n}","import ClassNameGenerator from '../className/ClassNameGenerator';\nconst globalStateClassesMapping = {\n active: 'Mui-active',\n checked: 'Mui-checked',\n completed: 'Mui-completed',\n disabled: 'Mui-disabled',\n error: 'Mui-error',\n expanded: 'Mui-expanded',\n focused: 'Mui-focused',\n focusVisible: 'Mui-focusVisible',\n required: 'Mui-required',\n selected: 'Mui-selected'\n};\nexport default function generateUtilityClass(componentName, slot) {\n const globalStateClass = globalStateClassesMapping[slot];\n return globalStateClass || `${ClassNameGenerator.generate(componentName)}-${slot}`;\n}","import generateUtilityClass from '../generateUtilityClass';\nexport default function generateUtilityClasses(componentName, slots) {\n const result = {};\n slots.forEach(slot => {\n result[slot] = generateUtilityClass(componentName, slot);\n });\n return result;\n}","/**\n * Determines if a given element is a DOM element name (i.e. not a React component).\n */\nfunction isHostComponent(element) {\n return typeof element === 'string';\n}\n\nexport default isHostComponent;","import { generateUtilityClass, generateUtilityClasses } from '@mui/base';\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 _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"children\", \"disabled\", \"id\", \"loading\", \"loadingIndicator\", \"loadingPosition\", \"variant\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { chainPropTypes } from '@mui/utils';\nimport { capitalize, unstable_useId as useId } from '@mui/material/utils';\nimport { unstable_composeClasses as composeClasses } from '@mui/base';\nimport { styled, useThemeProps } from '@mui/material/styles';\nimport Button from '@mui/material/Button';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\n\nconst useUtilityClasses = ownerState => {\n const {\n loading,\n loadingPosition,\n classes\n } = ownerState;\n const slots = {\n root: ['root', loading && 'loading'],\n startIcon: [loading && `startIconLoading${capitalize(loadingPosition)}`],\n endIcon: [loading && `endIconLoading${capitalize(loadingPosition)}`],\n loadingIndicator: ['loadingIndicator', loading && `loadingIndicator${capitalize(loadingPosition)}`]\n };\n const composedClasses = composeClasses(slots, getLoadingButtonUtilityClass, classes);\n return _extends({}, classes, composedClasses);\n}; // TODO use `import { rootShouldForwardProp } from '../styles/styled';` once move to core\n\n\nconst rootShouldForwardProp = prop => prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as' && prop !== 'classes';\n\nconst LoadingButtonRoot = styled(Button, {\n shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',\n name: 'MuiLoadingButton',\n slot: 'Root',\n overridesResolver: (props, styles) => {\n return [styles.root, styles.startIconLoadingStart && {\n [`& .${loadingButtonClasses.startIconLoadingStart}`]: styles.startIconLoadingStart\n }, styles.endIconLoadingEnd && {\n [`& .${loadingButtonClasses.endIconLoadingEnd}`]: styles.endIconLoadingEnd\n }];\n }\n})(({\n ownerState,\n theme\n}) => _extends({\n [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {\n transition: theme.transitions.create(['opacity'], {\n duration: theme.transitions.duration.short\n }),\n opacity: 0\n }\n}, ownerState.loadingPosition === 'center' && {\n transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {\n duration: theme.transitions.duration.short\n }),\n [`&.${loadingButtonClasses.loading}`]: {\n color: 'transparent'\n }\n}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {\n [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {\n transition: theme.transitions.create(['opacity'], {\n duration: theme.transitions.duration.short\n }),\n opacity: 0,\n marginRight: -8\n }\n}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {\n [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: {\n transition: theme.transitions.create(['opacity'], {\n duration: theme.transitions.duration.short\n }),\n opacity: 0,\n marginLeft: -8\n }\n}));\nconst LoadingButtonLoadingIndicator = styled('div', {\n name: 'MuiLoadingButton',\n slot: 'LoadingIndicator',\n overridesResolver: (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.loadingIndicator, styles[`loadingIndicator${capitalize(ownerState.loadingPosition)}`]];\n }\n})(({\n theme,\n ownerState\n}) => _extends({\n position: 'absolute',\n visibility: 'visible',\n display: 'flex'\n}, ownerState.loadingPosition === 'start' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {\n left: ownerState.size === 'small' ? 10 : 14\n}, ownerState.loadingPosition === 'start' && ownerState.variant === 'text' && {\n left: 6\n}, ownerState.loadingPosition === 'center' && {\n left: '50%',\n transform: 'translate(-50%)',\n color: theme.palette.action.disabled\n}, ownerState.loadingPosition === 'end' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {\n right: ownerState.size === 'small' ? 10 : 14\n}, ownerState.loadingPosition === 'end' && ownerState.variant === 'text' && {\n right: 6\n}, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {\n position: 'relative',\n left: -10\n}, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {\n position: 'relative',\n right: -10\n}));\nconst LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps, ref) {\n const props = useThemeProps({\n props: inProps,\n name: 'MuiLoadingButton'\n });\n\n const {\n children,\n disabled = false,\n id: idProp,\n loading = false,\n loadingIndicator: loadingIndicatorProp,\n loadingPosition = 'center',\n variant = 'text'\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n\n const id = useId(idProp);\n const loadingIndicator = loadingIndicatorProp != null ? loadingIndicatorProp : /*#__PURE__*/_jsx(CircularProgress, {\n \"aria-labelledby\": id,\n color: \"inherit\",\n size: 16\n });\n\n const ownerState = _extends({}, props, {\n disabled,\n loading,\n loadingIndicator,\n loadingPosition,\n variant\n });\n\n const classes = useUtilityClasses(ownerState);\n return /*#__PURE__*/_jsx(LoadingButtonRoot, _extends({\n disabled: disabled || loading,\n id: id,\n ref: ref\n }, other, {\n variant: variant,\n classes: classes,\n ownerState: ownerState,\n children: ownerState.loadingPosition === 'end' ? /*#__PURE__*/_jsxs(React.Fragment, {\n children: [children, loading && /*#__PURE__*/_jsx(LoadingButtonLoadingIndicator, {\n className: classes.loadingIndicator,\n ownerState: ownerState,\n children: loadingIndicator\n })]\n }) : /*#__PURE__*/_jsxs(React.Fragment, {\n children: [loading && /*#__PURE__*/_jsx(LoadingButtonLoadingIndicator, {\n className: classes.loadingIndicator,\n ownerState: ownerState,\n children: loadingIndicator\n }), children]\n })\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? LoadingButton.propTypes\n/* remove-proptypes */\n= {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n\n /**\n * If `true`, the component is disabled.\n * @default false\n */\n disabled: PropTypes.bool,\n\n /**\n * @ignore\n */\n id: PropTypes.string,\n\n /**\n * If `true`, the loading indicator is shown.\n * @default false\n */\n loading: PropTypes.bool,\n\n /**\n * Element placed before the children if the button is in loading state.\n * The node should contain an element with `role=\"progressbar\"` with an accessible name.\n * By default we render a `CircularProgress` that is labelled by the button itself.\n * @default