diff --git a/beta/package.json b/beta/package.json index 68e2f9b2326..cdab8495662 100644 --- a/beta/package.json +++ b/beta/package.json @@ -22,7 +22,7 @@ "check-all": "npm-run-all prettier lint:fix tsc" }, "dependencies": { - "@codesandbox/sandpack-react": "v0.19.8-experimental.4", + "@codesandbox/sandpack-react": "v0.19.8-experimental.6", "@docsearch/css": "3.0.0-alpha.41", "@docsearch/react": "3.0.0-alpha.41", "@headlessui/react": "^1.3.0", @@ -48,10 +48,12 @@ "@types/mdx-js__react": "^1.5.2", "@types/node": "^14.6.4", "@types/parse-numeric-range": "^0.0.1", + "@types/prettier": "^2.6.3", "@types/react": "^18.0.9", "@types/react-dom": "^18.0.5", "@typescript-eslint/eslint-plugin": "2.x", "@typescript-eslint/parser": "2.x", + "@typescript/vfs": "^1.3.5", "asyncro": "^3.0.0", "autoprefixer": "^10.4.2", "babel-eslint": "10.x", @@ -87,7 +89,7 @@ "retext-smartypants": "^4.0.0", "rss": "^1.2.2", "tailwindcss": "^3.0.22", - "typescript": "^4.0.2", + "typescript": "^4.6.4", "unist-util-visit": "^2.0.3", "webpack-bundle-analyzer": "^4.5.0" }, diff --git a/beta/src/components/MDX/Sandpack/CustomPreset.tsx b/beta/src/components/MDX/Sandpack/CustomPreset.tsx index bb0f1c67169..5410133ae83 100644 --- a/beta/src/components/MDX/Sandpack/CustomPreset.tsx +++ b/beta/src/components/MDX/Sandpack/CustomPreset.tsx @@ -3,45 +3,54 @@ */ import React from 'react'; // @ts-ignore -import {flushSync} from 'react-dom'; import { - useSandpack, - useActiveCode, SandpackCodeEditor, - SandpackThemeProvider, SandpackReactDevTools, + SandpackThemeProvider, + useActiveCode, + useSandpack, } from '@codesandbox/sandpack-react'; -import scrollIntoView from 'scroll-into-view-if-needed'; import cn from 'classnames'; +import {flushSync} from 'react-dom'; +import scrollIntoView from 'scroll-into-view-if-needed'; import {IconChevron} from 'components/Icon/IconChevron'; import {NavigationBar} from './NavigationBar'; import {Preview} from './Preview'; +import {useTypescriptExtension} from './sandpack-tsserver/useTypescriptExtension'; import {CustomTheme} from './Themes'; import {useSandpackLint} from './useSandpackLint'; - -// Workaround for https://github.com/reactjs/reactjs.org/issues/4686#issuecomment-1137402613. -const emptyArray: Array = []; +import {useTypescriptCompiler} from './sandpack-tsserver/useTypescriptCompiler'; export function CustomPreset({ isSingleFile, showDevTools, + showJsForTsxFiles, onDevToolsLoad, devToolsLoaded, }: { isSingleFile: boolean; showDevTools: boolean; + showJsForTsxFiles: boolean; devToolsLoaded: boolean; onDevToolsLoad: () => void; }) { const {lintErrors, lintExtensions} = useSandpackLint(); + const {extension: typescriptExtensions, envId: typescriptEnvId} = + useTypescriptExtension(showJsForTsxFiles ? 'visible' : 'interaction'); + const {reset: resetTsToJs} = useTypescriptCompiler( + showJsForTsxFiles, + typescriptEnvId + ); + const lineCountRef = React.useRef<{[key: string]: number}>({}); const containerRef = React.useRef(null); const {sandpack} = useSandpack(); - const {code} = useActiveCode(); const [isExpanded, setIsExpanded] = React.useState(false); const {activePath} = sandpack; + const code = sandpack.files[activePath]?.code || ''; + if (!lineCountRef.current[activePath]) { lineCountRef.current[activePath] = code.split('\n').length; } @@ -53,7 +62,7 @@ export function CustomPreset({
- +
void; +}) { const {sandpack} = useSandpack(); const [dropdownActive, setDropdownActive] = React.useState(false); const {openPaths, clients} = sandpack; @@ -42,6 +48,7 @@ export function NavigationBar({showDownload}: {showDownload: boolean}) { }, [openPaths.length, resizeHandler]); const handleReset = () => { + onReset(); sandpack.resetAllFiles(); refresh(); }; diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx index 7dd2fe813f6..08e71264fd1 100644 --- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -63,6 +63,22 @@ ul { } `.trim(); +const TSCONFIG = { + include: ['./**/*'], + compilerOptions: { + target: 'es2021', + module: 'es2020', + lib: ['es2021', 'es2020', 'dom', 'dom.iterable'], + esModuleInterop: true, + allowJs: true, + checkJs: true, + resolveJsonModule: true, + // jsx: 'react-jsx', + jsx: 'preserve', + }, +}; +const TSCONFIG_AS_JSON = JSON.stringify(TSCONFIG, null, ' '); + function SandpackRoot(props: SandpackProps) { let {children, setup, autorun = true, showDevTools = false} = props; const [devToolsLoaded, setDevToolsLoaded] = React.useState(false); @@ -70,16 +86,26 @@ function SandpackRoot(props: SandpackProps) { let isSingleFile = true; const files = createFileMap(codeSnippets); + const template = files['/App.tsx'] ? 'react-ts' : 'react'; files['/styles.css'] = { code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'), hidden: true, }; + // Always add a tsconfig that supports JS, so we can use TS superpowers like + // imports & tab completion in JS examples. + if (!files['/tsconfig.json']) { + files['/tsconfig.json'] = { + code: TSCONFIG_AS_JSON, + hidden: true, + }; + } + return (
setDevToolsLoaded(true)} diff --git a/beta/src/components/MDX/Sandpack/createFileMap.ts b/beta/src/components/MDX/Sandpack/createFileMap.ts index 67016100867..ab1524467e3 100644 --- a/beta/src/components/MDX/Sandpack/createFileMap.ts +++ b/beta/src/components/MDX/Sandpack/createFileMap.ts @@ -29,6 +29,8 @@ export const createFileMap = (codeSnippets: any) => { filePath = '/App.js'; } else if (props.className === 'language-css') { filePath = '/styles.css'; + } else if (props.className === 'language-tsx') { + filePath = '/App.tsx'; } else { throw new Error( `Code block is missing a filename: ${props.children}` diff --git a/beta/src/components/MDX/Sandpack/index.tsx b/beta/src/components/MDX/Sandpack/index.tsx index 845510ea092..f4548971a6d 100644 --- a/beta/src/components/MDX/Sandpack/index.tsx +++ b/beta/src/components/MDX/Sandpack/index.tsx @@ -49,7 +49,7 @@ export default React.memo(function SandpackWrapper(props: any): any { const codeSnippet = createFileMap(React.Children.toArray(props.children)); // To set the active file in the fallback we have to find the active file first. - // If there are no active files we fallback to App.js as default. + // If there are no active files we fallback to App.{js,tsx} as default. let activeCodeSnippet = Object.keys(codeSnippet).filter( (fileName) => codeSnippet[fileName]?.active === true && @@ -57,7 +57,8 @@ export default React.memo(function SandpackWrapper(props: any): any { ); let activeCode; if (!activeCodeSnippet.length) { - activeCode = codeSnippet['/App.js'].code; + const defaultActiveFile = codeSnippet['/App.js'] || codeSnippet['/App.tsx']; + activeCode = defaultActiveFile.code; } else { activeCode = codeSnippet[activeCodeSnippet[0]].code; } diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/ChannelBridge.ts b/beta/src/components/MDX/Sandpack/sandpack-tsserver/ChannelBridge.ts new file mode 100644 index 00000000000..55a15cf1747 --- /dev/null +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/ChannelBridge.ts @@ -0,0 +1,243 @@ +// eslint considers named arguments in interfaces and overloads unused. +// Disabling to avoid noise in this type-heavy file. +/* eslint-disable no-unused-vars */ + +/** Used for type-level retrieval */ +const ResponseTypeSymbol = Symbol('Response Type'); + +type ServerMessageMap = { + [K in keyof T]: T[K] extends (...args: infer Args) => infer Result + ? { + type: 'call'; + seq: string; + prop: K; + args: Args; + [ResponseTypeSymbol]: Result; + } + : { + type: 'get'; + seq: string; + prop: K; + args?: []; + [ResponseTypeSymbol]: T[K]; + }; +}; + +interface ReadyMessage { + type: 'ready'; +} + +interface SuccessResponse { + type: 'ok'; + seq: string; + ok: true; + value: T; +} + +interface ErrorResponse { + type: 'error'; + seq: string; + ok: false; + error: E; +} + +/** + * Something you can listen to. + */ +interface ListenablePort { + addEventListener( + event: 'message', + handler: (event: MessageEvent) => void + ): void; + removeEventListener( + event: 'message', + handler: (event: MessageEvent) => void + ): void; +} + +/** + * Something you could write to. + */ +interface WritablePort { + postMessage(message: unknown): void; +} + +type MessageType = ServerMessageMap[keyof ServerMessageMap]; +type CallOf = Extract, {type: 'call'}>['prop']; +type GetOf = Extract, {type: 'get'}>['prop']; + +/** + * RPC over channel-like interface. + * `Interface` describes the methods this client can call on the server. + * + * Makes request from a `ChannelServer` over a `postMessage`, and listens + * via `addEventListener` for `message` events. + */ +export class ChannelClient { + static createAndListen(args: { + listenPort: ListenablePort; + requestPort: WritablePort; + waitForReady: boolean; + }): [ChannelClient, () => void] { + const client = new ChannelClient( + args.requestPort, + args.waitForReady + ); + args.listenPort.addEventListener('message', client.onMessage); + return [ + client, + () => args.listenPort.removeEventListener('message', client.onMessage), + ]; + } + + constructor(private requestPort: WritablePort, waitForReady = true) { + this.ready = !waitForReady; + } + + private pending = new Map< + string, + {resolve: (value: any) => void; reject: (reason: any) => void} + >(); + private seq = 0; + private ready = false; + private buffer: Array> = []; + + public async get>( + key: K + ): Promise[K][typeof ResponseTypeSymbol]> { + return this.request({ + type: 'get', + seq: String(this.seq++), + prop: key, + } as any); + } + + /** + * Call method named `key` on the server. + */ + public async call>( + key: K, + ...args: NonNullable[K]['args']> + ): Promise[K][typeof ResponseTypeSymbol]> { + return this.request({ + type: 'call', + seq: String(this.seq++), + prop: key, + args, + } as any); + } + + private request( + request: ServerMessageMap[K] + ): Promise[K][typeof ResponseTypeSymbol]> { + return new Promise((resolve, reject) => { + this.pending.set(request.seq, {resolve, reject}); + if (this.ready) { + this.requestPort.postMessage(request); + } else { + this.buffer.push(request); + } + }); + } + + onMessage = ( + event: MessageEvent | ErrorResponse | ReadyMessage> + ) => { + const data = event.data; + if (data.type === 'ok') { + this.pending.get(data.seq)?.resolve(data.value); + this.pending.delete(data.seq); + } else if (data.type === 'error') { + this.pending.get(data.seq)?.reject(data.error); + this.pending.delete(data.seq); + } else if (data.type === 'ready') { + this.ready = true; + this.buffer.forEach((request) => this.requestPort.postMessage(request)); + this.buffer = []; + } + }; +} + +/** + * RPC server over channel-like interface. + * + * Listens for requests using `addEventListener` for `message` events. + * Responds by posting messages back to the client. + */ +export class ChannelServer { + private impl: Interface; + private responsePort: WritablePort; + + static createAndListen(args: { + expose: Interface; + listenPort: ListenablePort; + responsePort: WritablePort; + }) { + const client = new ChannelServer(args); + args.listenPort.addEventListener('message', client.onMessage); + client.sendReady(); + return [ + client, + () => args.listenPort.removeEventListener('message', client.onMessage), + ]; + } + + constructor(args: {expose: Interface; responsePort: WritablePort}) { + this.impl = args.expose; + this.responsePort = args.responsePort; + } + + private respond( + request: ServerMessageMap[K], + response: + | { + ok: true; + value: ServerMessageMap[K][typeof ResponseTypeSymbol]; + } + | {ok: false; error: unknown} + ) { + if (response.ok) { + const fullResponse: SuccessResponse< + ServerMessageMap[K][typeof ResponseTypeSymbol] + > = { + ...response, + seq: request.seq, + type: 'ok', + }; + this.responsePort.postMessage(fullResponse); + } else { + const fullResponse: ErrorResponse = { + ...response, + seq: request.seq, + type: 'error', + }; + this.responsePort.postMessage(fullResponse); + } + } + + sendReady() { + const ready: ReadyMessage = { + type: 'ready', + }; + this.responsePort.postMessage(ready); + } + + onMessage = async (event: MessageEvent>) => { + const data = event.data; + try { + if (data.type === 'call') { + const result = await Promise.resolve( + (this.impl as any)[data.prop](...data.args) + ); + this.respond(data, {ok: true, value: result}); + } else if (data.type === 'get') { + this.respond(data, { + ok: true, + value: await Promise.resolve(this.impl[data.prop]), + }); + } + } catch (error) { + this.respond(data, {ok: false, error}); + } + }; +} diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/TypescriptServerProvider.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/TypescriptServerProvider.tsx new file mode 100644 index 00000000000..d18848c74b6 --- /dev/null +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/TypescriptServerProvider.tsx @@ -0,0 +1,173 @@ +/** + * Provides a single web worker containing a shared typescript services. + * This avoids us loading 8mb per active Sandpack editor using Typescript features. + */ + +import { + createContext, + ReactNode, + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; +import {ChannelServer, ChannelClient} from './ChannelBridge'; +import {CONFIG} from './config'; +import {getLocalStorage} from './localStorageHelper'; +import type {TSServerWorker} from './tsserver.worker'; + +type TSServerContext = + | { + tsServer: TSServer; + codemirrorExtensions: typeof import('./codemirrorExtensions') | undefined; + setup?: undefined; + } + | {tsServer?: undefined; codemirrorExtensions?: undefined; setup: () => void}; + +export const TypescriptServerContext = createContext({ + setup: () => {}, +}); + +export class TSServer { + worker = new Worker(new URL('./tsserver.worker.ts', import.meta.url), { + name: 'ts-server', + }); + renderer = new TSServerRender(getLocalStorage()); + postMessage = (msg: any) => this.worker.postMessage(msg); + rendererServer = new ChannelServer({ + expose: this.renderer, + responsePort: {postMessage: this.postMessage}, + }); + workerClient = new ChannelClient( + {postMessage: this.postMessage}, + true + ); +} + +// Cache structure: +// ts-lib:${version}:list - list of all files that should be in the cache, as JSON +// ts-lib:${version}:file:${filePath} - a file in the cache +function getFileListKey(version: string) { + return `ts-lib:${version}:list`; +} +function getFileCachePrefix(version: string) { + return `ts-lib:${version}:file:`; +} +function getFileCacheKey(version: string, filePath: string) { + return getFileCachePrefix(version) + filePath; +} + +export class TSServerRender { + constructor(private storage: Storage | undefined) {} + + loadTypescriptCache(version: string) { + const storage = this.storage; + if (!storage) { + return undefined; + } + + const cache = new Map(); + const listJSON = storage.getItem(getFileListKey(version)); + if (listJSON === null) { + return undefined; + } + + const list = JSON.parse(listJSON); + for (const fileName of list) { + const item = storage.getItem(getFileCacheKey(version, fileName)); + if (item !== null) { + cache.set(fileName, item); + } else { + // Cache missing some files, can't use it. + console.warn('Typescript libraries cache missing file:', fileName); + return undefined; + } + } + + return cache; + } + + saveTypescriptCache(version: string, fsMap: Map) { + const list = Array.from(fsMap.keys()); + this.storage?.setItem(getFileListKey(version), JSON.stringify(list)); + fsMap.forEach((content, fileName) => { + const cacheKey = getFileCacheKey(version, fileName); + this.storage?.setItem(cacheKey, content); + }); + } +} + +/** + * Provide a web worker to offload Typescript language services. + */ +export function TypescriptServerProvider(props: {children: ReactNode}) { + const startedLoading = useRef(false); + const [tsServer, setTsServer] = useState(undefined); + const [codemirrorExtensions, setCodemirrorExtensions] = + useState(); + + const createTsServer = useCallback(() => { + if ( + startedLoading.current === false && + typeof Worker !== undefined && + tsServer === undefined + ) { + // Need to use a ref so we create the worker only once. + startedLoading.current = true; + import('./codemirrorExtensions').then(setCodemirrorExtensions); + const tsServer = new TSServer(); + setTsServer(tsServer); + } + }, [tsServer]); + + const context = useMemo(() => { + if (tsServer) { + return {tsServer, codemirrorExtensions}; + } else { + return {setup: createTsServer}; + } + }, [tsServer, codemirrorExtensions, createTsServer]); + + useEffect(() => { + if (!tsServer) { + return; + } + + tsServer.worker.addEventListener( + 'message', + tsServer.workerClient.onMessage + ); + tsServer.worker.addEventListener( + 'message', + tsServer.rendererServer.onMessage + ); + if (CONFIG.debugBridge) { + tsServer.worker.addEventListener('message', (e) => { + console.log('worker -> render', e.data); + }); + } + + // We can handle calls back from the worker to the renderer now that we + // added listeners. + tsServer.rendererServer.sendReady(); + + return () => { + tsServer.worker.removeEventListener( + 'message', + tsServer.workerClient.onMessage + ); + tsServer.worker.removeEventListener( + 'message', + tsServer.rendererServer.onMessage + ); + tsServer.worker.terminate(); + }; + }, [tsServer]); + + return ( + + {props.children} + + ); +} diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx new file mode 100644 index 00000000000..009e00acb80 --- /dev/null +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/codemirrorExtensions.tsx @@ -0,0 +1,760 @@ +import { + autocompletion, + completeFromList, + Completion, + CompletionContext, + CompletionResult, + pickedCompletion, +} from '@codemirror/autocomplete'; +import * as hl from '@codemirror/highlight'; +import { + closeLintPanel, + Diagnostic, + forceLinting, + linter, + openLintPanel, +} from '@codemirror/lint'; +import {EditorState} from '@codemirror/state'; +import {hoverTooltip, Tooltip} from '@codemirror/tooltip'; +import {Command, EditorView, keymap, ViewUpdate} from '@codemirror/view'; +import {ReactElement, ReactNode} from 'react'; +import {renderToStaticMarkup} from 'react-dom/server'; +import type ts from 'typescript'; +import type {SymbolDisplayPart, SymbolDisplayPartKind} from 'typescript'; +import {ChannelClient} from './ChannelBridge'; +import {TypescriptExtensionConfig} from './config'; +import {ensurePathStartsWithSlash} from './ensurePathBeginsWithSlash'; +import type {TSServerWorker} from './tsserver.worker'; + +interface ExtensionEnv { + envId: number; + client: ChannelClient; + filePath: string | undefined; + config: TypescriptExtensionConfig; +} + +export function codemirrorTypescriptExtensions(env: ExtensionEnv) { + return [ + requiredExtensions(env), + formatExtension(env), + diagnosticExtension(env), + autocompleteExtension(env), + hoverTooltipExtension(env), + ]; +} + +function requiredExtensions(env: ExtensionEnv) { + let previousFileContent: string | undefined; + return [ + EditorView.updateListener.of((update: ViewUpdate) => { + if (env.filePath) { + const newFileContent = update.state.doc.toJSON().join('\n'); + if (newFileContent !== previousFileContent) { + previousFileContent = newFileContent; + env.client.call( + 'updateFile', + env.envId, + ensurePathStartsWithSlash(env.filePath), + update.state.doc.toJSON().join('\n') + ); + } + } + }), + + // position: absolute allows us to use percent-based max-width, but the tooltip + // renders *under* the iframe. + // tooltips({ + // position: 'absolute', + // }), + + EditorView.baseTheme({ + '.cm-tooltip': { + // fighting .sp-code-editor .cm-tooltip here: + maxWidth: 'min(60ch, 33vw) !important', // set to 200px by Sandpack + border: '1px solid var(--sp-colors-fg-inactive) !important', // set to light colors always + padding: '2px', + borderRadius: '4px', + background: 'var(--sp-colors-bg-default) !important', + color: 'var(--theme-plain) !important', + }, + '.cm-tooltip-section:not(:first-child)': { + borderColor: 'var(--sp-colors-fg-inactive)', + }, + '.cm-tooltip-autocomplete ul li[aria-selected]': { + borderRadius: '2px', + }, + '.cm-tooltip.cm-completionInfo': { + margin: '0px 2px', + maxWidth: '400px !important', // sins of !important :( + }, + '.quickinfo-monospace': { + // TODO: is there a better way to get the mono font stack? + fontFamily: + '"Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', + // Some types are very long! + overflowWrap: 'break-word', + whiteSpace: 'pre-wrap', + }, + '.quickinfo-truncate': { + display: '-webkit-box', + WebkitLineClamp: '1', + WebkitBoxOrient: 'vertical', + overflow: 'hidden', + }, + '.quickinfo-small': { + fontSize: '90%', + }, + '.cm-diagnostic': { + color: 'var(--theme-plain) !important', + }, + '.cm-diagnostic .quickinfo-documentation:first-child': { + paddingTop: 0, + }, + '.quickinfo-documentation:first-child': { + marginTop: 0, + paddingTop: '3px', + }, + '.quickinfo-documentation': { + paddingTop: '6px', + marginTop: '6px', + }, + '.quickinfo-tsdoc-tag': { + margin: '3px 0', + }, + '.cm-diagnosticAction': { + backgroundColor: 'transparent', + padding: 0, + margin: '4px 0', + textDecoration: 'underline', + cursor: 'pointer', + color: 'inherit', + display: 'block', + textAlign: 'left', + }, + }), + ]; +} + +function formatExtension(env: ExtensionEnv) { + const {filePath, client, envId} = env; + + const formatCode: Command = (target) => { + if (!filePath) { + return false; + } + void (async () => { + const contents = target.state.doc.toJSON().join('\n'); + await client.call( + 'updateFile', + envId, + ensurePathStartsWithSlash(filePath), + contents + ); + const changes = await client.call( + 'formatFile', + envId, + ensurePathStartsWithSlash(filePath) + ); + if (!changes) { + return false; + } + target.dispatch({ + changes: tsTextChangesToCodemirrorChanges(target.state, changes), + }); + return true; + })(); + return true; + }; + + return [ + // Format the code when the user inserts a newline. + EditorView.updateListener.of(async (update: ViewUpdate) => { + if (!update.docChanged || !filePath) { + return; + } + + let insertedNewline = false; + update.changes.iterChanges((_, __, ___, ____, inserted) => { + if (inserted.lines >= 2) { + insertedNewline = true; + } + }); + if (!insertedNewline) { + return; + } + + const prevContents = update.startState.doc.toJSON().join('\n'); + const changeForPrevState = await client.call( + 'getFormattingEditsForSnapshot', + { + envId, + fileContents: prevContents, + filePath: ensurePathStartsWithSlash(filePath), + } + ); + if (!changeForPrevState || !changeForPrevState.length) { + return; + } + + const changes = tsTextChangesToCodemirrorChanges( + update.startState, + changeForPrevState + ).map((change) => + // Note: this is the Operational Transform "map", not Array.map + // Convert each formatting `change` so it occurs in the current + // document, not in `update.startState`. + change.map(update.changes) + ); + update.view.dispatch({changes}); + }), + // Keymaps to manually format the code. + // These fit the muscle memory of VS Code users. + keymap.of([ + // Ideally we could do something like `enter: () => {formatCode(); + // insertNewlineAndIndent() }` but doing so never gets called. + { + key: 'Shift-Alt-f', + run: formatCode, + }, + { + key: 'Mod-s', + run: formatCode, + }, + ]), + ]; +} + +function diagnosticExtension({client, envId, filePath}: ExtensionEnv) { + return [ + keymap.of([ + { + key: 'Cmd-.', + run: (editor) => openLintPanel(editor) || closeLintPanel(editor), + }, + ]), + + linter( + async (): Promise => { + if (!filePath) { + return []; + } + + const diagnostics = await client.call('lintSystem', { + envId, + filePath: ensurePathStartsWithSlash(filePath), + }); + + if (!diagnostics) { + return []; + } + + return diagnostics.map((diagnostic) => { + const {serializedActions, ...valid} = diagnostic; + return { + ...valid, + actions: serializedActions.map((action) => { + let applied = false; + return { + name: action.name, + apply: (editor) => { + if (applied) { + return; + } + applied = true; + + const changes = tsFileTextChangesToCodemirrorChanges( + editor.state, + action.data.changes, + filePath + ); + + editor.dispatch({ + changes, + }); + + if (action.data.commands) { + client.call('applyCodeAction', envId, action.data.commands); + } + + forceLinting(editor); + }, + }; + }), + }; + }); + }, + {delay: 400} + ), + ]; +} + +function autocompleteExtension({ + client, + envId, + filePath, + config, +}: ExtensionEnv) { + return autocompletion({ + activateOnTyping: true, + override: [ + throttleAsync( + 150, + async (ctx: CompletionContext): Promise => { + const {pos} = ctx; + + try { + const charBefore = ctx.matchBefore(/./)?.text; + const completions = + filePath && + (await client.call('autocompleteAtPosition', { + envId, + pos, + filePath: ensurePathStartsWithSlash(filePath), + explicit: ctx.explicit, + charBefore: !ctx.explicit ? charBefore : undefined, + })); + + if (!completions) { + console.warn('Unable to get completions', {pos}); + return null; + } + + return completeFromList( + completions.entries.map((c, i) => { + const details = c.details; + const description = details?.codeActions?.at(0)?.description; + const source = + details?.sourceDisplay?.map((token) => token.text).join('') || + c.sourceDisplayString; + const actions = details?.codeActions; + + const suggestions: Completion = { + type: c.kind, + label: c.name, + detail: source, + apply: actions + ? (view) => { + const codeActionChanges = actions.flatMap((action) => + tsFileTextChangesToCodemirrorChanges( + view.state, + action.changes, + filePath + ) + ); + + const apply = c.name; + + // TODO: currently we re-implement codemirror/autocomplete's default behavior + // because we couldn't have both a custom action and do the default. + // Upstream added a helper, but upgrading autocomplete requires a bump in many + // codemirror-related packages. + // See https://github.com/codemirror/autocomplete/blob/main/CHANGELOG.md#0202-2022-05-24 + const matchedPrefix = ctx.matchBefore(/\w+/) ?? { + from: Math.min( + ctx.pos, + view.state.selection.main.from + ), + to: view.state.selection.main.to, + }; + const baseLabelChange = { + from: matchedPrefix.from, + to: view.state.selection.main.to, + insert: apply, + }; + + view.dispatch({ + // ...insertLabelChanges, + changes: [ + // insertLabelChanges.changes, + baseLabelChange, + ...codeActionChanges, + ], + annotations: pickedCompletion.of(suggestions), + }); + } + : undefined, + info: + details || config.debugCompletions + ? function () { + const container = document.createElement('div'); + renderIntoNode( + container, + + <> + {description && ( +
+ {description} +
+ )} + {details && ( + + )} + {config.debugCompletions && ( + 
{JSON.stringify(c, null, 2)}
+ )} + + ); + return container; + } + : undefined, + // TODO: double-check ranking makes sense. + boost: 1 / Number(c.sortText), + }; + + return suggestions; + }) + )(ctx); + } catch (e) { + console.error('Unable to get completions', {pos, error: e}); + return null; + } + } + ), + ], + }); +} + +function hoverTooltipExtension({ + client, + envId, + filePath, + config, +}: ExtensionEnv) { + return hoverTooltip( + async (_: EditorView, pos: number): Promise => { + const allInfo = filePath + ? await client.call('infoAtPosition', { + envId, + pos, + filePath: ensurePathStartsWithSlash(filePath), + }) + : undefined; + + if (!allInfo) { + return null; + } + + const quickInfo = allInfo.result; + if (!quickInfo) return null; + + if ( + config.showTypes || + quickInfo.documentation?.length || + (config.showDocTags && quickInfo.tags?.length) + ) { + return { + pos, + create(view) { + const dom = document.createElement('div'); + // dom.setAttribute('class', 'cm-diagnostic cm-diagnostic-info'); + renderIntoNode( + dom, + + ); + return {dom}; + }, + }; + } else { + return null; + } + }, + {hideOnChange: true} + ); +} + +function tsFileTextChangesToCodemirrorChanges( + state: EditorState, + changes: ts.FileTextChanges[], + filePath: string +) { + return changes.flatMap((fileEdit) => { + if (fileEdit.fileName !== ensurePathStartsWithSlash(filePath)) { + console.warn('Unable to apply changes to other files', fileEdit); + return []; + } + + return tsTextChangesToCodemirrorChanges(state, fileEdit.textChanges); + }); +} + +function tsTextChangesToCodemirrorChanges( + state: EditorState, + changes: readonly ts.TextChange[] +) { + return changes.map((change) => { + return state.changes({ + from: change.span.start, + to: change.span.start + change.span.length, + insert: change.newText, + }); + }); +} + +const TS_SYMBOL_TAG_TO_CODEMIRROR_TAG: Record< + keyof typeof SymbolDisplayPartKind, + hl.Tag | undefined +> = { + moduleName: hl.tags.namespace, + localName: hl.tags.local(hl.tags.name), + functionName: hl.tags.function(hl.tags.name), + interfaceName: hl.tags.typeName, + aliasName: hl.tags.typeName, + parameterName: hl.tags.propertyName, + className: hl.tags.typeName, + enumName: hl.tags.typeName, + fieldName: hl.tags.propertyName, + keyword: hl.tags.keyword, + lineBreak: undefined, + numericLiteral: hl.tags.number, + stringLiteral: hl.tags.string, + methodName: hl.tags.function(hl.tags.name), + operator: hl.tags.operator, + propertyName: hl.tags.propertyName, + punctuation: hl.tags.punctuation, + space: undefined, + text: undefined, + typeParameterName: hl.tags.typeName, + enumMemberName: hl.tags.propertyName, + regularExpressionLiteral: hl.tags.regexp, + link: hl.tags.link, + linkName: hl.tags.name, + linkText: hl.tags.link, +}; + +const BRACKETS = { + '(': {tag: hl.tags.paren, type: 'open'}, + ')': {tag: hl.tags.paren, type: 'close'}, + '[': {tag: hl.tags.squareBracket, type: 'open'}, + ']': {tag: hl.tags.squareBracket, type: 'close'}, + '{': {tag: hl.tags.brace, type: 'open'}, + '}': {tag: hl.tags.brace, type: 'close'}, + '<': {tag: hl.tags.angleBracket, type: 'open'}, + '>': {tag: hl.tags.angleBracket, type: 'close'}, +} as const; + +const ZERO_WIDTH_SPACE = '​'; + +function highlightSymbolDisplayPart(sym: SymbolDisplayPart) { + if (sym.kind in TS_SYMBOL_TAG_TO_CODEMIRROR_TAG) { + const kind = sym.kind as keyof typeof TS_SYMBOL_TAG_TO_CODEMIRROR_TAG; + + if (kind === 'punctuation' && sym.text in BRACKETS) { + return BRACKETS[sym.text as keyof typeof BRACKETS]; + } + + const tag = + TS_SYMBOL_TAG_TO_CODEMIRROR_TAG[ + sym.kind as keyof typeof TS_SYMBOL_TAG_TO_CODEMIRROR_TAG + ]; + + if (tag) { + return {tag, type: 'other'} as const; + } + + return undefined; + } + + console.warn(`Unknown symbol kind: ${sym.kind} (in "${sym.text}")`); + return undefined; +} + +function CodeMirrorTag(props: { + state: EditorState; + tag: hl.Tag | undefined; + children: ReactNode; +}) { + const {state, tag, children} = props; + const className = (tag && hl.HighlightStyle.get(state, tag)) ?? undefined; + if (className) { + return {children}; + } + return <>{children}; +} + +function SymbolDisplayParts(props: { + state: EditorState; + parts: SymbolDisplayPart[]; +}) { + const {state, parts} = props; + const items = parts.map((sym, i) => { + const symbolInfo = highlightSymbolDisplayPart(sym); + return ( + + {/* Add zero width spaces before/after braces to assist in wrapping long symbols. */} + {symbolInfo?.type === 'close' ? ZERO_WIDTH_SPACE : ''} + {sym.text} + {symbolInfo?.type === 'open' ? ZERO_WIDTH_SPACE : ''} + + ); + }); + return <>{items}; +} + +const URL_REGEX = /(https?:\/\/[^\s]+)/; +const REFERENCE_PREFIXES = [ + // TODO: add more references. + 'https://reactjs.org/docs/hooks-reference.html#', // eg, #usestate + 'https://reactjs.org/docs/concurrent-mode-reference.html#', // eg, #usetransition + 'https://reactjs.org/docs/react-dom.html#', // eg, #render +]; +function getBetaDocsLink( + tags: ts.JSDocTagInfo[] | undefined +): string | undefined { + const seeTag = tags?.find((tag) => tag.name === 'see'); + const seeTagPlaintext = seeTag?.text?.map((it) => it.text).join(''); + if (!seeTagPlaintext) { + return undefined; + } + + const match = seeTagPlaintext.match(URL_REGEX); + if (!match) { + return undefined; + } + + const url = match[1]; + for (const prefix of REFERENCE_PREFIXES) { + if (url.startsWith(prefix)) { + return `/apis/${url.slice(prefix.length)}`; + } + } + + return undefined; +} + +function QuickInfo(props: { + state: EditorState; + truncateDisplayParts?: boolean; + info: Omit; + showBetaDocsLinks: boolean; + showTypes: boolean; + showDocTags: boolean; +}) { + const { + state, + info, + truncateDisplayParts, + showBetaDocsLinks, + showTypes, + showDocTags, + } = props; + const {displayParts, documentation, tags} = info; + const betaDocsLink = showBetaDocsLinks && getBetaDocsLink(tags); + + return ( + <> + {showTypes && displayParts && ( +
+ +
+ )} + {(documentation?.length || tags?.length || betaDocsLink) && ( +
+ {documentation && ( + + )} + {showDocTags && + tags?.map((tag, i) => ( +
+ + @{tag.name} + + {tag.text && ( + <> + : + + )} +
+ ))} + {betaDocsLink && ( + + )} +
+ )} + + ); +} + +function renderIntoNode(node: Element, reactNode: ReactElement) { + // Use renderToStaticMarkup + innerHTML because Codemirror doesn't give us a + // hook to unmount a React root when the tooltip closes. I'm not sure if that + // would leak memory. + const html = renderToStaticMarkup(reactNode); + node.innerHTML = html; +} + +interface Deferred { + promise: Promise; + resolve: (value: T) => void; + reject: (reason: unknown) => void; +} + +function deferred(): Deferred { + const deferred: Deferred = {} as any; + deferred.promise = new Promise((_resolve, _reject) => { + deferred.resolve = _resolve; + deferred.reject = _reject; + }); + return deferred; +} + +function throttleAsync( + wait: number, + fn: (...args: Args) => Promise +): (...args: Args) => Promise { + let timeout: number | undefined; + let latestArguments: Args; + let pending: Array> = []; + + const startTimeout = () => { + if (timeout === undefined) { + timeout = window.setTimeout(performFunctionCall, wait); + } + }; + + const performFunctionCall = async () => { + const toResolve = pending; + pending = []; + try { + const result = await fn(...latestArguments); + toResolve.forEach((p) => p.resolve(result)); + } catch (error) { + toResolve.forEach((p) => p.reject(error)); + } finally { + timeout = undefined; + // Handle calls that were enqueued while we were waiting for our async + // function. + if (pending.length) { + startTimeout(); + } + } + }; + + return (...args: Args) => { + latestArguments = args; + const result = deferred(); + pending.push(result); + startTimeout(); + return result.promise; + }; +} diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/config.ts b/beta/src/components/MDX/Sandpack/sandpack-tsserver/config.ts new file mode 100644 index 00000000000..81a27409366 --- /dev/null +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/config.ts @@ -0,0 +1,87 @@ +interface DiagnosticAllowList { + type: 'allow'; + codes: Set; +} + +interface DiagnosticDenyList { + type: 'deny'; + codes: Set; +} + +export type DiagnosticFilter = DiagnosticAllowList | DiagnosticDenyList; + +const OnlyImportDiagnostics: DiagnosticFilter = { + type: 'allow', + codes: new Set([ + // Module '{0}' has no exported member '{1}'." + 2305, + // File '{0}' is not a module. + 2306, + // Cannot find module '{0}' or its corresponding type declarations. + 2307, + ]), +}; + +const AllowAllDiagnostics: DiagnosticFilter = { + type: 'deny', + codes: new Set(), +}; + +/** + * Turn features on and off to change the UX. + * @todo Inline the policy decisions once we're happy with the UX. + */ +export const CONFIG = { + /** + * When true, console.log all communications sent between the worker & main + * thread + */ + debugBridge: false, + /** + * Show JSON of each completion. + */ + debugCompletions: false, + /** + * Show type information on hover or during import. Turning this on exposes + * the user directly to Typescript's type syntax. + */ + showTypes: false as boolean, + /** Show doc tags like `@version` or `@see` as written. */ + showDocTags: false, + /** Convert @see URLs to beta URLs */ + showBetaDocsLinks: true, + /** Eg, "this variable is unused, delete it?" */ + showSuggestionDiagnostics: false, + /** + * Only show semantic diagnostics related to imports: + * Many existing examples don't infer types correctly. + */ + semanticDiagnosticFilter: OnlyImportDiagnostics as DiagnosticFilter, + /** + * Show the Typescript diagnostic number when rendering diagnostics. + * Intended primarily for debugging use. + */ + showDiagnosticCodeNumber: false, + /** Show random declared globals in completions. This is a heuristic. */ + showAmbientDeclareCompletions: false, +} as const; + +export type TypescriptExtensionConfig = typeof CONFIG; + +/** + * Config customized for Typescript files. + */ +export const CONFIG_FOR_TYPESCRIPT: TypescriptExtensionConfig = { + ...CONFIG, + /** In typescript files, we are happy to show the user type errors. */ + semanticDiagnosticFilter: AllowAllDiagnostics, + /** In typescript files, we are happy to show the user type-level information. */ + showTypes: true, +}; + +export function getConfigForFilePath(filePath: string) { + if (filePath.endsWith('.ts') || filePath.endsWith('.tsx')) { + return CONFIG_FOR_TYPESCRIPT; + } + return CONFIG; +} diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/ensurePathBeginsWithSlash.ts b/beta/src/components/MDX/Sandpack/sandpack-tsserver/ensurePathBeginsWithSlash.ts new file mode 100644 index 00000000000..d17b8817de6 --- /dev/null +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/ensurePathBeginsWithSlash.ts @@ -0,0 +1,19 @@ +import type {SandpackFiles} from '@codesandbox/sandpack-react'; + +export function ensurePathStartsWithSlash(path: string): string; +export function ensurePathStartsWithSlash(path: undefined): undefined; +export function ensurePathStartsWithSlash(path?: string) { + if (path === undefined || path[0] === '/') { + return path; + } + return `/${path}`; +} + +export function ensureAllPathsStartWithSlash(fs: SandpackFiles): SandpackFiles { + return Object.fromEntries( + Object.entries(fs).map(([key, value]) => [ + ensurePathStartsWithSlash(key), + value, + ]) + ); +} diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/localStorageHelper.ts b/beta/src/components/MDX/Sandpack/sandpack-tsserver/localStorageHelper.ts new file mode 100644 index 00000000000..d7037c541d2 --- /dev/null +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/localStorageHelper.ts @@ -0,0 +1,11 @@ +/** + * Get localStorage, or undefined if not available. + */ +export function getLocalStorage(): Storage | undefined { + try { + return globalThis.localStorage; + } catch (error) { + console.warn('localStorage is not available:', error); + return undefined; + } +} diff --git a/beta/src/components/MDX/Sandpack/sandpack-tsserver/react-type-cache.json b/beta/src/components/MDX/Sandpack/sandpack-tsserver/react-type-cache.json new file mode 100644 index 00000000000..c142e9da73b --- /dev/null +++ b/beta/src/components/MDX/Sandpack/sandpack-tsserver/react-type-cache.json @@ -0,0 +1,107 @@ +{ + "/node_modules/@types/prop-types/index.d.ts": { + "module": { + "code": "// Type definitions for prop-types 15.7\n// Project: https://github.com/reactjs/prop-types, https://facebook.github.io/react\n// Definitions by: DovydasNavickas \n// Ferdy Budhidharma \n// Sebastian Silbermann \n// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped\n// TypeScript Version: 2.8\n\nexport type ReactComponentLike =\n | string\n | ((props: any, context?: any) => any)\n | (new (props: any, context?: any) => any);\n\nexport interface ReactElementLike {\n type: ReactComponentLike;\n props: any;\n key: string | number | null;\n}\n\nexport interface ReactNodeArray extends Iterable {}\n\nexport type ReactNodeLike =\n | ReactElementLike\n | ReactNodeArray\n | string\n | number\n | boolean\n | null\n | undefined;\n\nexport const nominalTypeHack: unique symbol;\n\nexport type IsOptional = undefined extends T ? true : false;\n\nexport type RequiredKeys = { [K in keyof V]-?: Exclude extends Validator ? IsOptional extends true ? never : K : never }[keyof V];\nexport type OptionalKeys = Exclude>;\nexport type InferPropsInner = { [K in keyof V]-?: InferType; };\n\nexport interface Validator {\n (props: { [key: string]: any }, propName: string, componentName: string, location: string, propFullName: string): Error | null;\n [nominalTypeHack]?: {\n type: T;\n } | undefined;\n}\n\nexport interface Requireable extends Validator {\n isRequired: Validator>;\n}\n\nexport type ValidationMap = { [K in keyof T]?: Validator };\n\nexport type InferType = V extends Validator ? T : any;\nexport type InferProps =\n & InferPropsInner>>\n & Partial>>>;\n\nexport const any: Requireable;\nexport const array: Requireable;\nexport const bool: Requireable;\nexport const func: Requireable<(...args: any[]) => any>;\nexport const number: Requireable;\nexport const object: Requireable;\nexport const string: Requireable;\nexport const node: Requireable;\nexport const element: Requireable;\nexport const symbol: Requireable;\nexport const elementType: Requireable;\nexport function instanceOf(expectedClass: new (...args: any[]) => T): Requireable;\nexport function oneOf(types: ReadonlyArray): Requireable;\nexport function oneOfType>(types: T[]): Requireable>>;\nexport function arrayOf(type: Validator): Requireable;\nexport function objectOf(type: Validator): Requireable<{ [K in keyof any]: T; }>;\nexport function shape

>(type: P): Requireable>;\nexport function exact

>(type: P): Requireable>>;\n\n/**\n * Assert that the values match with the type specs.\n * Error messages are memorized and will only be shown once.\n *\n * @param typeSpecs Map of name to a ReactPropType\n * @param values Runtime values that need to be type-checked\n * @param location e.g. \"prop\", \"context\", \"child context\"\n * @param componentName Name of the component for error messages\n * @param getStack Returns the component stack\n */\nexport function checkPropTypes(typeSpecs: any, values: any, location: string, componentName: string, getStack?: () => any): void;\n\n/**\n * Only available if NODE_ENV=production\n */\nexport function resetWarningCache(): void;\n" + } + }, + "/node_modules/@types/prop-types/package.json": { + "module": { + "code": "{\n \"name\": \"@types/prop-types\",\n \"version\": \"15.7.5\",\n \"description\": \"TypeScript definitions for prop-types\",\n \"homepage\": \"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/prop-types\",\n \"license\": \"MIT\",\n \"contributors\": [\n {\n \"name\": \"DovydasNavickas\",\n \"url\": \"https://github.com/DovydasNavickas\",\n \"githubUsername\": \"DovydasNavickas\"\n },\n {\n \"name\": \"Ferdy Budhidharma\",\n \"url\": \"https://github.com/ferdaber\",\n \"githubUsername\": \"ferdaber\"\n },\n {\n \"name\": \"Sebastian Silbermann\",\n \"url\": \"https://github.com/eps1lon\",\n \"githubUsername\": \"eps1lon\"\n }\n ],\n \"main\": \"\",\n \"types\": \"index.d.ts\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/DefinitelyTyped/DefinitelyTyped.git\",\n \"directory\": \"types/prop-types\"\n },\n \"scripts\": {},\n \"dependencies\": {},\n \"typesPublisherContentHash\": \"771faec3cc5b1aa1cefc03c5dd3668980da8a0c59785867e473d6d7baea31a8a\",\n \"typeScriptVersion\": \"3.9\"\n}" + } + }, + "/node_modules/@types/react/experimental.d.ts": { + "module": { + "code": "/**\n * These are types for things that are present in the `experimental` builds of React but not yet\n * on a stable build.\n *\n * Once they are promoted to stable they can just be moved to the main index file.\n *\n * To load the types declared here in an actual project, there are three ways. The easiest one,\n * if your `tsconfig.json` already has a `\"types\"` array in the `\"compilerOptions\"` section,\n * is to add `\"react/experimental\"` to the `\"types\"` array.\n *\n * Alternatively, a specific import syntax can to be used from a typescript file.\n * This module does not exist in reality, which is why the {} is important:\n *\n * ```ts\n * import {} from 'react/experimental'\n * ```\n *\n * It is also possible to include it through a triple-slash reference:\n *\n * ```ts\n * /// \n * ```\n *\n * Either the import or the reference only needs to appear once, anywhere in the project.\n */\n\n// See https://github.com/facebook/react/blob/master/packages/react/src/React.js to see how the exports are declared,\n// and https://github.com/facebook/react/blob/master/packages/shared/ReactFeatureFlags.js to verify which APIs are\n// flagged experimental or not. Experimental APIs will be tagged with `__EXPERIMENTAL__`.\n//\n// For the inputs of types exported as simply a fiber tag, the `beginWork` function of ReactFiberBeginWork.js\n// is a good place to start looking for details; it generally calls prop validation functions or delegates\n// all tasks done as part of the render phase (the concurrent part of the React update cycle).\n//\n// Suspense-related handling can be found in ReactFiberThrow.js.\n\nimport React = require('./next');\n\nexport {};\n\ndeclare module '.' {\n export interface SuspenseProps {\n /**\n * The presence of this prop indicates that the content is computationally expensive to render.\n * In other words, the tree is CPU bound and not I/O bound (e.g. due to fetching data).\n * @see {@link https://github.com/facebook/react/pull/19936}\n */\n unstable_expectedLoadTime?: number | undefined;\n }\n\n export type SuspenseListRevealOrder = 'forwards' | 'backwards' | 'together';\n export type SuspenseListTailMode = 'collapsed' | 'hidden';\n\n export interface SuspenseListCommonProps {\n /**\n * Note that SuspenseList require more than one child;\n * it is a runtime warning to provide only a single child.\n *\n * It does, however, allow those children to be wrapped inside a single\n * level of ``.\n */\n children: ReactElement | Iterable;\n }\n\n interface DirectionalSuspenseListProps extends SuspenseListCommonProps {\n /**\n * Defines the order in which the `SuspenseList` children should be revealed.\n */\n revealOrder: 'forwards' | 'backwards';\n /**\n * Dictates how unloaded items in a SuspenseList is shown.\n *\n * - By default, `SuspenseList` will show all fallbacks in the list.\n * - `collapsed` shows only the next fallback in the list.\n * - `hidden` doesn’t show any unloaded items.\n */\n tail?: SuspenseListTailMode | undefined;\n }\n\n interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps {\n /**\n * Defines the order in which the `SuspenseList` children should be revealed.\n */\n revealOrder?: Exclude | undefined;\n /**\n * The tail property is invalid when not using the `forwards` or `backwards` reveal orders.\n */\n tail?: never | undefined;\n }\n\n export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps;\n\n /**\n * `SuspenseList` helps coordinate many components that can suspend by orchestrating the order\n * in which these components are revealed to the user.\n *\n * When multiple components need to fetch data, this data may arrive in an unpredictable order.\n * However, if you wrap these items in a `SuspenseList`, React will not show an item in the list\n * until previous items have been displayed (this behavior is adjustable).\n *\n * @see https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist\n * @see https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist\n */\n export const SuspenseList: ExoticComponent;\n}\n" + } + }, + "/node_modules/@types/react/global.d.ts": { + "module": { + "code": "/*\nReact projects that don't include the DOM library need these interfaces to compile.\nReact Native applications use React, but there is no DOM available. The JavaScript runtime\nis ES6/ES2015 only. These definitions allow such projects to compile with only `--lib ES6`.\n\nWarning: all of these interfaces are empty. If you want type definitions for various properties\n(such as HTMLInputElement.prototype.value), you need to add `--lib DOM` (via command line or tsconfig.json).\n*/\n\ninterface Event { }\ninterface AnimationEvent extends Event { }\ninterface ClipboardEvent extends Event { }\ninterface CompositionEvent extends Event { }\ninterface DragEvent extends Event { }\ninterface FocusEvent extends Event { }\ninterface KeyboardEvent extends Event { }\ninterface MouseEvent extends Event { }\ninterface TouchEvent extends Event { }\ninterface PointerEvent extends Event { }\ninterface TransitionEvent extends Event { }\ninterface UIEvent extends Event { }\ninterface WheelEvent extends Event { }\n\ninterface EventTarget { }\ninterface Document { }\ninterface DataTransfer { }\ninterface StyleMedia { }\n\ninterface Element { }\ninterface DocumentFragment { }\n\ninterface HTMLElement extends Element { }\ninterface HTMLAnchorElement extends HTMLElement { }\ninterface HTMLAreaElement extends HTMLElement { }\ninterface HTMLAudioElement extends HTMLElement { }\ninterface HTMLBaseElement extends HTMLElement { }\ninterface HTMLBodyElement extends HTMLElement { }\ninterface HTMLBRElement extends HTMLElement { }\ninterface HTMLButtonElement extends HTMLElement { }\ninterface HTMLCanvasElement extends HTMLElement { }\ninterface HTMLDataElement extends HTMLElement { }\ninterface HTMLDataListElement extends HTMLElement { }\ninterface HTMLDetailsElement extends HTMLElement { }\ninterface HTMLDialogElement extends HTMLElement { }\ninterface HTMLDivElement extends HTMLElement { }\ninterface HTMLDListElement extends HTMLElement { }\ninterface HTMLEmbedElement extends HTMLElement { }\ninterface HTMLFieldSetElement extends HTMLElement { }\ninterface HTMLFormElement extends HTMLElement { }\ninterface HTMLHeadingElement extends HTMLElement { }\ninterface HTMLHeadElement extends HTMLElement { }\ninterface HTMLHRElement extends HTMLElement { }\ninterface HTMLHtmlElement extends HTMLElement { }\ninterface HTMLIFrameElement extends HTMLElement { }\ninterface HTMLImageElement extends HTMLElement { }\ninterface HTMLInputElement extends HTMLElement { }\ninterface HTMLModElement extends HTMLElement { }\ninterface HTMLLabelElement extends HTMLElement { }\ninterface HTMLLegendElement extends HTMLElement { }\ninterface HTMLLIElement extends HTMLElement { }\ninterface HTMLLinkElement extends HTMLElement { }\ninterface HTMLMapElement extends HTMLElement { }\ninterface HTMLMetaElement extends HTMLElement { }\ninterface HTMLMeterElement extends HTMLElement { }\ninterface HTMLObjectElement extends HTMLElement { }\ninterface HTMLOListElement extends HTMLElement { }\ninterface HTMLOptGroupElement extends HTMLElement { }\ninterface HTMLOptionElement extends HTMLElement { }\ninterface HTMLOutputElement extends HTMLElement { }\ninterface HTMLParagraphElement extends HTMLElement { }\ninterface HTMLParamElement extends HTMLElement { }\ninterface HTMLPreElement extends HTMLElement { }\ninterface HTMLProgressElement extends HTMLElement { }\ninterface HTMLQuoteElement extends HTMLElement { }\ninterface HTMLSlotElement extends HTMLElement { }\ninterface HTMLScriptElement extends HTMLElement { }\ninterface HTMLSelectElement extends HTMLElement { }\ninterface HTMLSourceElement extends HTMLElement { }\ninterface HTMLSpanElement extends HTMLElement { }\ninterface HTMLStyleElement extends HTMLElement { }\ninterface HTMLTableElement extends HTMLElement { }\ninterface HTMLTableColElement extends HTMLElement { }\ninterface HTMLTableDataCellElement extends HTMLElement { }\ninterface HTMLTableHeaderCellElement extends HTMLElement { }\ninterface HTMLTableRowElement extends HTMLElement { }\ninterface HTMLTableSectionElement extends HTMLElement { }\ninterface HTMLTemplateElement extends HTMLElement { }\ninterface HTMLTextAreaElement extends HTMLElement { }\ninterface HTMLTimeElement extends HTMLElement { }\ninterface HTMLTitleElement extends HTMLElement { }\ninterface HTMLTrackElement extends HTMLElement { }\ninterface HTMLUListElement extends HTMLElement { }\ninterface HTMLVideoElement extends HTMLElement { }\ninterface HTMLWebViewElement extends HTMLElement { }\n\ninterface SVGElement extends Element { }\ninterface SVGSVGElement extends SVGElement { }\ninterface SVGCircleElement extends SVGElement { }\ninterface SVGClipPathElement extends SVGElement { }\ninterface SVGDefsElement extends SVGElement { }\ninterface SVGDescElement extends SVGElement { }\ninterface SVGEllipseElement extends SVGElement { }\ninterface SVGFEBlendElement extends SVGElement { }\ninterface SVGFEColorMatrixElement extends SVGElement { }\ninterface SVGFEComponentTransferElement extends SVGElement { }\ninterface SVGFECompositeElement extends SVGElement { }\ninterface SVGFEConvolveMatrixElement extends SVGElement { }\ninterface SVGFEDiffuseLightingElement extends SVGElement { }\ninterface SVGFEDisplacementMapElement extends SVGElement { }\ninterface SVGFEDistantLightElement extends SVGElement { }\ninterface SVGFEDropShadowElement extends SVGElement { }\ninterface SVGFEFloodElement extends SVGElement { }\ninterface SVGFEFuncAElement extends SVGElement { }\ninterface SVGFEFuncBElement extends SVGElement { }\ninterface SVGFEFuncGElement extends SVGElement { }\ninterface SVGFEFuncRElement extends SVGElement { }\ninterface SVGFEGaussianBlurElement extends SVGElement { }\ninterface SVGFEImageElement extends SVGElement { }\ninterface SVGFEMergeElement extends SVGElement { }\ninterface SVGFEMergeNodeElement extends SVGElement { }\ninterface SVGFEMorphologyElement extends SVGElement { }\ninterface SVGFEOffsetElement extends SVGElement { }\ninterface SVGFEPointLightElement extends SVGElement { }\ninterface SVGFESpecularLightingElement extends SVGElement { }\ninterface SVGFESpotLightElement extends SVGElement { }\ninterface SVGFETileElement extends SVGElement { }\ninterface SVGFETurbulenceElement extends SVGElement { }\ninterface SVGFilterElement extends SVGElement { }\ninterface SVGForeignObjectElement extends SVGElement { }\ninterface SVGGElement extends SVGElement { }\ninterface SVGImageElement extends SVGElement { }\ninterface SVGLineElement extends SVGElement { }\ninterface SVGLinearGradientElement extends SVGElement { }\ninterface SVGMarkerElement extends SVGElement { }\ninterface SVGMaskElement extends SVGElement { }\ninterface SVGMetadataElement extends SVGElement { }\ninterface SVGPathElement extends SVGElement { }\ninterface SVGPatternElement extends SVGElement { }\ninterface SVGPolygonElement extends SVGElement { }\ninterface SVGPolylineElement extends SVGElement { }\ninterface SVGRadialGradientElement extends SVGElement { }\ninterface SVGRectElement extends SVGElement { }\ninterface SVGStopElement extends SVGElement { }\ninterface SVGSwitchElement extends SVGElement { }\ninterface SVGSymbolElement extends SVGElement { }\ninterface SVGTextElement extends SVGElement { }\ninterface SVGTextPathElement extends SVGElement { }\ninterface SVGTSpanElement extends SVGElement { }\ninterface SVGUseElement extends SVGElement { }\ninterface SVGViewElement extends SVGElement { }\n\ninterface Text { }\ninterface TouchList { }\ninterface WebGLRenderingContext { }\ninterface WebGL2RenderingContext { }\n" + } + }, + "/node_modules/@types/react/index.d.ts": { + "module": { + "code": "// Type definitions for React 18.0\n// Project: http://facebook.github.io/react/\n// Definitions by: Asana \n// AssureSign \n// Microsoft \n// John Reilly \n// Benoit Benezech \n// Patricio Zavolinsky \n// Eric Anderson \n// Dovydas Navickas \n// Josh Rutherford \n// Guilherme Hübner \n// Ferdy Budhidharma \n// Johann Rakotoharisoa \n// Olivier Pascal \n// Martin Hochel \n// Frank Li \n// Jessica Franco \n// Saransh Kataria \n// Kanitkorn Sujautra \n// Sebastian Silbermann \n// Kyle Scully \n// Cong Zhang \n// Dimitri Mitropoulos \n// JongChan Choi \n// Victor Magalhães \n// Dale Tan \n// Priyanshu Rav \n// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped\n// TypeScript Version: 2.8\n\n// NOTE: Users of the `experimental` builds of React should add a reference\n// to 'react/experimental' in their project. See experimental.d.ts's top comment\n// for reference and documentation on how exactly to do it.\n\n/// \n\nimport * as CSS from 'csstype';\nimport * as PropTypes from 'prop-types';\nimport { Interaction as SchedulerInteraction } from 'scheduler/tracing';\n\ntype NativeAnimationEvent = AnimationEvent;\ntype NativeClipboardEvent = ClipboardEvent;\ntype NativeCompositionEvent = CompositionEvent;\ntype NativeDragEvent = DragEvent;\ntype NativeFocusEvent = FocusEvent;\ntype NativeKeyboardEvent = KeyboardEvent;\ntype NativeMouseEvent = MouseEvent;\ntype NativeTouchEvent = TouchEvent;\ntype NativePointerEvent = PointerEvent;\ntype NativeTransitionEvent = TransitionEvent;\ntype NativeUIEvent = UIEvent;\ntype NativeWheelEvent = WheelEvent;\ntype Booleanish = boolean | 'true' | 'false';\n\ndeclare const UNDEFINED_VOID_ONLY: unique symbol;\n// Destructors are only allowed to return void.\ntype Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };\ntype VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };\n\n// tslint:disable-next-line:export-just-namespace\nexport = React;\nexport as namespace React;\n\ndeclare namespace React {\n //\n // React Elements\n // ----------------------------------------------------------------------\n\n type ElementType

=\n {\n [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K] ? K : never\n }[keyof JSX.IntrinsicElements] |\n ComponentType

;\n type ComponentType

= ComponentClass

| FunctionComponent

;\n\n type JSXElementConstructor

=\n | ((props: P) => ReactElement | null)\n | (new (props: P) => Component);\n\n interface RefObject {\n readonly current: T | null;\n }\n // Bivariance hack for consistent unsoundness with RefObject\n type RefCallback = { bivarianceHack(instance: T | null): void }[\"bivarianceHack\"];\n type Ref = RefCallback | RefObject | null;\n type LegacyRef = string | Ref;\n /**\n * Gets the instance type for a React element. The instance will be different for various component types:\n *\n * - React class components will be the class instance. So if you had `class Foo extends React.Component<{}> {}`\n * and used `React.ElementRef` then the type would be the instance of `Foo`.\n * - React stateless functional components do not have a backing instance and so `React.ElementRef`\n * (when `Bar` is `function Bar() {}`) will give you the `undefined` type.\n * - JSX intrinsics like `div` will give you their DOM instance. For `React.ElementRef<'div'>` that would be\n * `HTMLDivElement`. For `React.ElementRef<'input'>` that would be `HTMLInputElement`.\n * - React stateless functional components that forward a `ref` will give you the `ElementRef` of the forwarded\n * to component.\n *\n * `C` must be the type _of_ a React component so you need to use typeof as in React.ElementRef.\n *\n * @todo In Flow, this works a little different with forwarded refs and the `AbstractComponent` that\n * `React.forwardRef()` returns.\n */\n type ElementRef<\n C extends\n | ForwardRefExoticComponent\n | { new (props: any): Component }\n | ((props: any, context?: any) => ReactElement | null)\n | keyof JSX.IntrinsicElements\n > =\n // need to check first if `ref` is a valid prop for ts@3.0\n // otherwise it will infer `{}` instead of `never`\n \"ref\" extends keyof ComponentPropsWithRef\n ? NonNullable[\"ref\"]> extends Ref<\n infer Instance\n >\n ? Instance\n : never\n : never;\n\n type ComponentState = any;\n\n type Key = string | number;\n\n /**\n * @internal You shouldn't need to use this type since you never see these attributes\n * inside your component or have to validate them.\n */\n interface Attributes {\n key?: Key | null | undefined;\n }\n interface RefAttributes extends Attributes {\n ref?: Ref | undefined;\n }\n interface ClassAttributes extends Attributes {\n ref?: LegacyRef | undefined;\n }\n\n interface ReactElement

= string | JSXElementConstructor> {\n type: T;\n props: P;\n key: Key | null;\n }\n\n interface ReactComponentElement<\n T extends keyof JSX.IntrinsicElements | JSXElementConstructor,\n P = Pick, Exclude, 'key' | 'ref'>>\n > extends ReactElement> { }\n\n interface FunctionComponentElement

extends ReactElement> {\n ref?: ('ref' extends keyof P ? P extends { ref?: infer R | undefined } ? R : never : never) | undefined;\n }\n\n type CElement> = ComponentElement;\n interface ComponentElement> extends ReactElement> {\n ref?: LegacyRef | undefined;\n }\n\n type ClassicElement

= CElement>;\n\n // string fallback for custom web-components\n interface DOMElement

| SVGAttributes, T extends Element> extends ReactElement {\n ref: LegacyRef;\n }\n\n // ReactHTML for ReactHTMLElement\n interface ReactHTMLElement extends DetailedReactHTMLElement, T> { }\n\n interface DetailedReactHTMLElement

, T extends HTMLElement> extends DOMElement {\n type: keyof ReactHTML;\n }\n\n // ReactSVG for ReactSVGElement\n interface ReactSVGElement extends DOMElement, SVGElement> {\n type: keyof ReactSVG;\n }\n\n interface ReactPortal extends ReactElement {\n key: Key | null;\n children: ReactNode;\n }\n\n //\n // Factories\n // ----------------------------------------------------------------------\n\n type Factory

= (props?: Attributes & P, ...children: ReactNode[]) => ReactElement

;\n\n /**\n * @deprecated Please use `FunctionComponentFactory`\n */\n type SFCFactory

= FunctionComponentFactory

;\n\n type FunctionComponentFactory

= (props?: Attributes & P, ...children: ReactNode[]) => FunctionComponentElement

;\n\n type ComponentFactory> =\n (props?: ClassAttributes & P, ...children: ReactNode[]) => CElement;\n\n type CFactory> = ComponentFactory;\n type ClassicFactory

= CFactory>;\n\n type DOMFactory

, T extends Element> =\n (props?: ClassAttributes & P | null, ...children: ReactNode[]) => DOMElement;\n\n interface HTMLFactory extends DetailedHTMLFactory, T> {}\n\n interface DetailedHTMLFactory

, T extends HTMLElement> extends DOMFactory {\n (props?: ClassAttributes & P | null, ...children: ReactNode[]): DetailedReactHTMLElement;\n }\n\n interface SVGFactory extends DOMFactory, SVGElement> {\n (props?: ClassAttributes & SVGAttributes | null, ...children: ReactNode[]): ReactSVGElement;\n }\n\n /**\n * @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear.\n */\n type ReactText = string | number;\n /**\n * @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear.\n */\n type ReactChild = ReactElement | string | number;\n\n /**\n * @deprecated Use either `ReactNode[]` if you need an array or `Iterable` if its passed to a host component.\n */\n interface ReactNodeArray extends ReadonlyArray {}\n type ReactFragment = Iterable;\n type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined;\n\n //\n // Top Level API\n // ----------------------------------------------------------------------\n\n // DOM Elements\n function createFactory(\n type: keyof ReactHTML): HTMLFactory;\n function createFactory(\n type: keyof ReactSVG): SVGFactory;\n function createFactory

, T extends Element>(\n type: string): DOMFactory;\n\n // Custom components\n function createFactory

(type: FunctionComponent

): FunctionComponentFactory

;\n function createFactory

(\n type: ClassType, ClassicComponentClass

>): CFactory>;\n function createFactory, C extends ComponentClass

>(\n type: ClassType): CFactory;\n function createFactory

(type: ComponentClass

): Factory

;\n\n // DOM Elements\n // TODO: generalize this to everything in `keyof ReactHTML`, not just \"input\"\n function createElement(\n type: \"input\",\n props?: InputHTMLAttributes & ClassAttributes | null,\n ...children: ReactNode[]): DetailedReactHTMLElement, HTMLInputElement>;\n function createElement

, T extends HTMLElement>(\n type: keyof ReactHTML,\n props?: ClassAttributes & P | null,\n ...children: ReactNode[]): DetailedReactHTMLElement;\n function createElement

, T extends SVGElement>(\n type: keyof ReactSVG,\n props?: ClassAttributes & P | null,\n ...children: ReactNode[]): ReactSVGElement;\n function createElement

, T extends Element>(\n type: string,\n props?: ClassAttributes & P | null,\n ...children: ReactNode[]): DOMElement;\n\n // Custom components\n\n function createElement

(\n type: FunctionComponent

,\n props?: Attributes & P | null,\n ...children: ReactNode[]): FunctionComponentElement

;\n function createElement

(\n type: ClassType, ClassicComponentClass

>,\n props?: ClassAttributes> & P | null,\n ...children: ReactNode[]): CElement>;\n function createElement

, C extends ComponentClass

>(\n type: ClassType,\n props?: ClassAttributes & P | null,\n ...children: ReactNode[]): CElement;\n function createElement

(\n type: FunctionComponent

| ComponentClass

| string,\n props?: Attributes & P | null,\n ...children: ReactNode[]): ReactElement

;\n\n // DOM Elements\n // ReactHTMLElement\n function cloneElement

, T extends HTMLElement>(\n element: DetailedReactHTMLElement,\n props?: P,\n ...children: ReactNode[]): DetailedReactHTMLElement;\n // ReactHTMLElement, less specific\n function cloneElement

, T extends HTMLElement>(\n element: ReactHTMLElement,\n props?: P,\n ...children: ReactNode[]): ReactHTMLElement;\n // SVGElement\n function cloneElement

, T extends SVGElement>(\n element: ReactSVGElement,\n props?: P,\n ...children: ReactNode[]): ReactSVGElement;\n // DOM Element (has to be the last, because type checking stops at first overload that fits)\n function cloneElement

, T extends Element>(\n element: DOMElement,\n props?: DOMAttributes & P,\n ...children: ReactNode[]): DOMElement;\n\n // Custom components\n function cloneElement

(\n element: FunctionComponentElement

,\n props?: Partial

& Attributes,\n ...children: ReactNode[]): FunctionComponentElement

;\n function cloneElement>(\n element: CElement,\n props?: Partial

& ClassAttributes,\n ...children: ReactNode[]): CElement;\n function cloneElement

(\n element: ReactElement

,\n props?: Partial

& Attributes,\n ...children: ReactNode[]): ReactElement

;\n\n // Context via RenderProps\n interface ProviderProps {\n value: T;\n children?: ReactNode | undefined;\n }\n\n interface ConsumerProps {\n children: (value: T) => ReactNode;\n }\n\n // TODO: similar to how Fragment is actually a symbol, the values returned from createContext,\n // forwardRef and memo are actually objects that are treated specially by the renderer; see:\n // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/ReactContext.js#L35-L48\n // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/forwardRef.js#L42-L45\n // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/memo.js#L27-L31\n // However, we have no way of telling the JSX parser that it's a JSX element type or its props other than\n // by pretending to be a normal component.\n //\n // We don't just use ComponentType or FunctionComponent types because you are not supposed to attach statics to this\n // object, but rather to the original function.\n interface ExoticComponent

{\n /**\n * **NOTE**: Exotic components are not callable.\n */\n (props: P): (ReactElement|null);\n readonly $$typeof: symbol;\n }\n\n interface NamedExoticComponent

extends ExoticComponent

{\n displayName?: string | undefined;\n }\n\n interface ProviderExoticComponent

extends ExoticComponent

{\n propTypes?: WeakValidationMap

| undefined;\n }\n\n type ContextType> = C extends Context ? T : never;\n\n // NOTE: only the Context object itself can get a displayName\n // https://github.com/facebook/react-devtools/blob/e0b854e4c/backend/attachRendererFiber.js#L310-L325\n type Provider = ProviderExoticComponent>;\n type Consumer = ExoticComponent>;\n interface Context {\n Provider: Provider;\n Consumer: Consumer;\n displayName?: string | undefined;\n }\n function createContext(\n // If you thought this should be optional, see\n // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106\n defaultValue: T,\n ): Context;\n\n function isValidElement

(object: {} | null | undefined): object is ReactElement

;\n\n // Sync with `ReactChildren` until `ReactChildren` is removed.\n const Children: {\n map(children: C | ReadonlyArray, fn: (child: C, index: number) => T):\n C extends null | undefined ? C : Array>;\n forEach(children: C | ReadonlyArray, fn: (child: C, index: number) => void): void;\n count(children: any): number;\n only(children: C): C extends any[] ? never : C;\n toArray(children: ReactNode | ReactNode[]): Array>;\n };\n const Fragment: ExoticComponent<{ children?: ReactNode | undefined }>;\n const StrictMode: ExoticComponent<{ children?: ReactNode | undefined }>;\n\n interface SuspenseProps {\n children?: ReactNode | undefined;\n\n /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */\n fallback?: ReactNode;\n }\n\n const Suspense: ExoticComponent;\n const version: string;\n\n /**\n * {@link https://reactjs.org/docs/profiler.html#onrender-callback Profiler API}\n */\n type ProfilerOnRenderCallback = (\n id: string,\n phase: \"mount\" | \"update\",\n actualDuration: number,\n baseDuration: number,\n startTime: number,\n commitTime: number,\n interactions: Set,\n ) => void;\n interface ProfilerProps {\n children?: ReactNode | undefined;\n id: string;\n onRender: ProfilerOnRenderCallback;\n }\n\n const Profiler: ExoticComponent;\n\n //\n // Component API\n // ----------------------------------------------------------------------\n\n type ReactInstance = Component | Element;\n\n // Base component for plain JS classes\n interface Component

extends ComponentLifecycle { }\n class Component {\n // tslint won't let me format the sample code in a way that vscode likes it :(\n /**\n * If set, `this.context` will be set at runtime to the current value of the given Context.\n *\n * Usage:\n *\n * ```ts\n * type MyContext = number\n * const Ctx = React.createContext(0)\n *\n * class Foo extends React.Component {\n * static contextType = Ctx\n * context!: React.ContextType\n * render () {\n * return <>My context's value: {this.context};\n * }\n * }\n * ```\n *\n * @see https://reactjs.org/docs/context.html#classcontexttype\n */\n static contextType?: Context | undefined;\n\n /**\n * If using the new style context, re-declare this in your class to be the\n * `React.ContextType` of your `static contextType`.\n * Should be used with type annotation or static contextType.\n *\n * ```ts\n * static contextType = MyContext\n * // For TS pre-3.7:\n * context!: React.ContextType\n * // For TS 3.7 and above:\n * declare context: React.ContextType\n * ```\n *\n * @see https://reactjs.org/docs/context.html\n */\n context: unknown;\n\n constructor(props: Readonly

| P);\n /**\n * @deprecated\n * @see https://reactjs.org/docs/legacy-context.html\n */\n constructor(props: P, context: any);\n\n // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.\n // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257\n // Also, the ` | S` allows intellisense to not be dumbisense\n setState(\n state: ((prevState: Readonly, props: Readonly

) => (Pick | S | null)) | (Pick | S | null),\n callback?: () => void\n ): void;\n\n forceUpdate(callback?: () => void): void;\n render(): ReactNode;\n\n readonly props: Readonly

;\n state: Readonly;\n /**\n * @deprecated\n * https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs\n */\n refs: {\n [key: string]: ReactInstance\n };\n }\n\n class PureComponent

extends Component { }\n\n interface ClassicComponent

extends Component {\n replaceState(nextState: S, callback?: () => void): void;\n isMounted(): boolean;\n getInitialState?(): S;\n }\n\n interface ChildContextProvider {\n getChildContext(): CC;\n }\n\n //\n // Class Interfaces\n // ----------------------------------------------------------------------\n\n type FC

= FunctionComponent

;\n\n interface FunctionComponent

{\n (props: P, context?: any): ReactElement | null;\n propTypes?: WeakValidationMap

| undefined;\n contextTypes?: ValidationMap | undefined;\n defaultProps?: Partial

| undefined;\n displayName?: string | undefined;\n }\n\n /**\n * @deprecated - Equivalent with `React.FC`.\n */\n type VFC

= VoidFunctionComponent

;\n\n /**\n * @deprecated - Equivalent with `React.FunctionComponent`.\n */\n interface VoidFunctionComponent

{\n (props: P, context?: any): ReactElement | null;\n propTypes?: WeakValidationMap

| undefined;\n contextTypes?: ValidationMap | undefined;\n defaultProps?: Partial

| undefined;\n displayName?: string | undefined;\n }\n\n type ForwardedRef = ((instance: T | null) => void) | MutableRefObject | null;\n\n interface ForwardRefRenderFunction {\n (props: P, ref: ForwardedRef): ReactElement | null;\n displayName?: string | undefined;\n // explicit rejected with `never` required due to\n // https://github.com/microsoft/TypeScript/issues/36826\n /**\n * defaultProps are not supported on render functions\n */\n defaultProps?: never | undefined;\n /**\n * propTypes are not supported on render functions\n */\n propTypes?: never | undefined;\n }\n\n interface ComponentClass

extends StaticLifecycle {\n new (props: P, context?: any): Component;\n propTypes?: WeakValidationMap

| undefined;\n contextType?: Context | undefined;\n contextTypes?: ValidationMap | undefined;\n childContextTypes?: ValidationMap | undefined;\n defaultProps?: Partial

| undefined;\n displayName?: string | undefined;\n }\n\n interface ClassicComponentClass

extends ComponentClass

{\n new (props: P, context?: any): ClassicComponent;\n getDefaultProps?(): P;\n }\n\n /**\n * We use an intersection type to infer multiple type parameters from\n * a single argument, which is useful for many top-level API defs.\n * See https://github.com/Microsoft/TypeScript/issues/7234 for more info.\n */\n type ClassType, C extends ComponentClass

> =\n C &\n (new (props: P, context?: any) => T);\n\n //\n // Component Specs and Lifecycle\n // ----------------------------------------------------------------------\n\n // This should actually be something like `Lifecycle | DeprecatedLifecycle`,\n // as React will _not_ call the deprecated lifecycle methods if any of the new lifecycle\n // methods are present.\n interface ComponentLifecycle extends NewLifecycle, DeprecatedLifecycle {\n /**\n * Called immediately after a component is mounted. Setting state here will trigger re-rendering.\n */\n componentDidMount?(): void;\n /**\n * Called to determine whether the change in props and state should trigger a re-render.\n *\n * `Component` always returns true.\n * `PureComponent` implements a shallow comparison on props and state and returns true if any\n * props or states have changed.\n *\n * If false is returned, `Component#render`, `componentWillUpdate`\n * and `componentDidUpdate` will not be called.\n */\n shouldComponentUpdate?(nextProps: Readonly

, nextState: Readonly, nextContext: any): boolean;\n /**\n * Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as\n * cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`.\n */\n componentWillUnmount?(): void;\n /**\n * Catches exceptions generated in descendant components. Unhandled exceptions will cause\n * the entire component tree to unmount.\n */\n componentDidCatch?(error: Error, errorInfo: ErrorInfo): void;\n }\n\n // Unfortunately, we have no way of declaring that the component constructor must implement this\n interface StaticLifecycle {\n getDerivedStateFromProps?: GetDerivedStateFromProps | undefined;\n getDerivedStateFromError?: GetDerivedStateFromError | undefined;\n }\n\n type GetDerivedStateFromProps =\n /**\n * Returns an update to a component's state based on its new props and old state.\n *\n * Note: its presence prevents any of the deprecated lifecycle methods from being invoked\n */\n (nextProps: Readonly

, prevState: S) => Partial | null;\n\n type GetDerivedStateFromError =\n /**\n * This lifecycle is invoked after an error has been thrown by a descendant component.\n * It receives the error that was thrown as a parameter and should return a value to update state.\n *\n * Note: its presence prevents any of the deprecated lifecycle methods from being invoked\n */\n (error: any) => Partial | null;\n\n // This should be \"infer SS\" but can't use it yet\n interface NewLifecycle {\n /**\n * Runs before React applies the result of `render` to the document, and\n * returns an object to be given to componentDidUpdate. Useful for saving\n * things such as scroll position before `render` causes changes to it.\n *\n * Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated\n * lifecycle events from running.\n */\n getSnapshotBeforeUpdate?(prevProps: Readonly

, prevState: Readonly): SS | null;\n /**\n * Called immediately after updating occurs. Not called for the initial render.\n *\n * The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.\n */\n componentDidUpdate?(prevProps: Readonly

, prevState: Readonly, snapshot?: SS): void;\n }\n\n interface DeprecatedLifecycle {\n /**\n * Called immediately before mounting occurs, and before `Component#render`.\n * Avoid introducing any side-effects or subscriptions in this method.\n *\n * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps\n * prevents this from being invoked.\n *\n * @deprecated 16.3, use componentDidMount or the constructor instead; will stop working in React 17\n * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state\n * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path\n */\n componentWillMount?(): void;\n /**\n * Called immediately before mounting occurs, and before `Component#render`.\n * Avoid introducing any side-effects or subscriptions in this method.\n *\n * This method will not stop working in React 17.\n *\n * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps\n * prevents this from being invoked.\n *\n * @deprecated 16.3, use componentDidMount or the constructor instead\n * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state\n * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path\n */\n UNSAFE_componentWillMount?(): void;\n /**\n * Called when the component may be receiving new props.\n * React may call this even if props have not changed, so be sure to compare new and existing\n * props if you only want to handle changes.\n *\n * Calling `Component#setState` generally does not trigger this method.\n *\n * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps\n * prevents this from being invoked.\n *\n * @deprecated 16.3, use static getDerivedStateFromProps instead; will stop working in React 17\n * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props\n * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path\n */\n componentWillReceiveProps?(nextProps: Readonly

, nextContext: any): void;\n /**\n * Called when the component may be receiving new props.\n * React may call this even if props have not changed, so be sure to compare new and existing\n * props if you only want to handle changes.\n *\n * Calling `Component#setState` generally does not trigger this method.\n *\n * This method will not stop working in React 17.\n *\n * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps\n * prevents this from being invoked.\n *\n * @deprecated 16.3, use static getDerivedStateFromProps instead\n * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props\n * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path\n */\n UNSAFE_componentWillReceiveProps?(nextProps: Readonly

, nextContext: any): void;\n /**\n * Called immediately before rendering when new props or state is received. Not called for the initial render.\n *\n * Note: You cannot call `Component#setState` here.\n *\n * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps\n * prevents this from being invoked.\n *\n * @deprecated 16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17\n * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update\n * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path\n */\n componentWillUpdate?(nextProps: Readonly

, nextState: Readonly, nextContext: any): void;\n /**\n * Called immediately before rendering when new props or state is received. Not called for the initial render.\n *\n * Note: You cannot call `Component#setState` here.\n *\n * This method will not stop working in React 17.\n *\n * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps\n * prevents this from being invoked.\n *\n * @deprecated 16.3, use getSnapshotBeforeUpdate instead\n * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update\n * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path\n */\n UNSAFE_componentWillUpdate?(nextProps: Readonly

, nextState: Readonly, nextContext: any): void;\n }\n\n interface Mixin extends ComponentLifecycle {\n mixins?: Array> | undefined;\n statics?: {\n [key: string]: any;\n } | undefined;\n\n displayName?: string | undefined;\n propTypes?: ValidationMap | undefined;\n contextTypes?: ValidationMap | undefined;\n childContextTypes?: ValidationMap | undefined;\n\n getDefaultProps?(): P;\n getInitialState?(): S;\n }\n\n interface ComponentSpec extends Mixin {\n render(): ReactNode;\n\n [propertyName: string]: any;\n }\n\n function createRef(): RefObject;\n\n // will show `ForwardRef(${Component.displayName || Component.name})` in devtools by default,\n // but can be given its own specific name\n interface ForwardRefExoticComponent

extends NamedExoticComponent

{\n defaultProps?: Partial

| undefined;\n propTypes?: WeakValidationMap

| undefined;\n }\n\n function forwardRef(render: ForwardRefRenderFunction): ForwardRefExoticComponent & RefAttributes>;\n\n /** Ensures that the props do not include ref at all */\n type PropsWithoutRef

=\n // Pick would not be sufficient for this. We'd like to avoid unnecessary mapping and need a distributive conditional to support unions.\n // see: https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types\n // https://github.com/Microsoft/TypeScript/issues/28339\n P extends any ? ('ref' extends keyof P ? Pick> : P) : P;\n /** Ensures that the props do not include string ref, which cannot be forwarded */\n type PropsWithRef

=\n // Just \"P extends { ref?: infer R }\" looks sufficient, but R will infer as {} if P is {}.\n 'ref' extends keyof P\n ? P extends { ref?: infer R | undefined }\n ? string extends R\n ? PropsWithoutRef

& { ref?: Exclude | undefined }\n : P\n : P\n : P;\n\n type PropsWithChildren

= P & { children?: ReactNode | undefined };\n\n /**\n * NOTE: prefer ComponentPropsWithRef, if the ref is forwarded,\n * or ComponentPropsWithoutRef when refs are not supported.\n */\n type ComponentProps> =\n T extends JSXElementConstructor\n ? P\n : T extends keyof JSX.IntrinsicElements\n ? JSX.IntrinsicElements[T]\n : {};\n type ComponentPropsWithRef =\n T extends (new (props: infer P) => Component)\n ? PropsWithoutRef

& RefAttributes>\n : PropsWithRef>;\n type ComponentPropsWithoutRef =\n PropsWithoutRef>;\n\n type ComponentRef = T extends NamedExoticComponent<\n ComponentPropsWithoutRef & RefAttributes\n >\n ? Method\n : ComponentPropsWithRef extends RefAttributes\n ? Method\n : never;\n\n // will show `Memo(${Component.displayName || Component.name})` in devtools by default,\n // but can be given its own specific name\n type MemoExoticComponent> = NamedExoticComponent> & {\n readonly type: T;\n };\n\n function memo

(\n Component: FunctionComponent

,\n propsAreEqual?: (prevProps: Readonly

, nextProps: Readonly

) => boolean\n ): NamedExoticComponent

;\n function memo>(\n Component: T,\n propsAreEqual?: (prevProps: Readonly>, nextProps: Readonly>) => boolean\n ): MemoExoticComponent;\n\n type LazyExoticComponent> = ExoticComponent> & {\n readonly _result: T;\n };\n\n function lazy>(\n factory: () => Promise<{ default: T }>\n ): LazyExoticComponent;\n\n //\n // React Hooks\n // ----------------------------------------------------------------------\n\n // based on the code in https://github.com/facebook/react/pull/13968\n\n // Unlike the class component setState, the updates are not allowed to be partial\n type SetStateAction = S | ((prevState: S) => S);\n // this technically does accept a second argument, but it's already under a deprecation warning\n // and it's not even released so probably better to not define it.\n type Dispatch = (value: A) => void;\n // Since action _can_ be undefined, dispatch may be called without any parameters.\n type DispatchWithoutAction = () => void;\n // Unlike redux, the actions _can_ be anything\n type Reducer = (prevState: S, action: A) => S;\n // If useReducer accepts a reducer without action, dispatch may be called without any parameters.\n type ReducerWithoutAction = (prevState: S) => S;\n // types used to try and prevent the compiler from reducing S\n // to a supertype common with the second argument to useReducer()\n type ReducerState> = R extends Reducer ? S : never;\n type ReducerAction> = R extends Reducer ? A : never;\n // The identity check is done with the SameValue algorithm (Object.is), which is stricter than ===\n type ReducerStateWithoutAction> =\n R extends ReducerWithoutAction ? S : never;\n type DependencyList = ReadonlyArray;\n\n // NOTE: callbacks are _only_ allowed to return either void, or a destructor.\n type EffectCallback = () => (void | Destructor);\n\n interface MutableRefObject {\n current: T;\n }\n\n // This will technically work if you give a Consumer or Provider but it's deprecated and warns\n /**\n * Accepts a context object (the value returned from `React.createContext`) and returns the current\n * context value, as given by the nearest context provider for the given context.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#usecontext\n */\n function useContext(context: Context/*, (not public API) observedBits?: number|boolean */): T;\n /**\n * Returns a stateful value, and a function to update it.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#usestate\n */\n function useState(initialState: S | (() => S)): [S, Dispatch>];\n // convenience overload when first argument is omitted\n /**\n * Returns a stateful value, and a function to update it.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#usestate\n */\n function useState(): [S | undefined, Dispatch>];\n /**\n * An alternative to `useState`.\n *\n * `useReducer` is usually preferable to `useState` when you have complex state logic that involves\n * multiple sub-values. It also lets you optimize performance for components that trigger deep\n * updates because you can pass `dispatch` down instead of callbacks.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#usereducer\n */\n // overload where dispatch could accept 0 arguments.\n function useReducer, I>(\n reducer: R,\n initializerArg: I,\n initializer: (arg: I) => ReducerStateWithoutAction\n ): [ReducerStateWithoutAction, DispatchWithoutAction];\n /**\n * An alternative to `useState`.\n *\n * `useReducer` is usually preferable to `useState` when you have complex state logic that involves\n * multiple sub-values. It also lets you optimize performance for components that trigger deep\n * updates because you can pass `dispatch` down instead of callbacks.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#usereducer\n */\n // overload where dispatch could accept 0 arguments.\n function useReducer>(\n reducer: R,\n initializerArg: ReducerStateWithoutAction,\n initializer?: undefined\n ): [ReducerStateWithoutAction, DispatchWithoutAction];\n /**\n * An alternative to `useState`.\n *\n * `useReducer` is usually preferable to `useState` when you have complex state logic that involves\n * multiple sub-values. It also lets you optimize performance for components that trigger deep\n * updates because you can pass `dispatch` down instead of callbacks.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#usereducer\n */\n // overload where \"I\" may be a subset of ReducerState; used to provide autocompletion.\n // If \"I\" matches ReducerState exactly then the last overload will allow initializer to be omitted.\n // the last overload effectively behaves as if the identity function (x => x) is the initializer.\n function useReducer, I>(\n reducer: R,\n initializerArg: I & ReducerState,\n initializer: (arg: I & ReducerState) => ReducerState\n ): [ReducerState, Dispatch>];\n /**\n * An alternative to `useState`.\n *\n * `useReducer` is usually preferable to `useState` when you have complex state logic that involves\n * multiple sub-values. It also lets you optimize performance for components that trigger deep\n * updates because you can pass `dispatch` down instead of callbacks.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#usereducer\n */\n // overload for free \"I\"; all goes as long as initializer converts it into \"ReducerState\".\n function useReducer, I>(\n reducer: R,\n initializerArg: I,\n initializer: (arg: I) => ReducerState\n ): [ReducerState, Dispatch>];\n /**\n * An alternative to `useState`.\n *\n * `useReducer` is usually preferable to `useState` when you have complex state logic that involves\n * multiple sub-values. It also lets you optimize performance for components that trigger deep\n * updates because you can pass `dispatch` down instead of callbacks.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#usereducer\n */\n\n // I'm not sure if I keep this 2-ary or if I make it (2,3)-ary; it's currently (2,3)-ary.\n // The Flow types do have an overload for 3-ary invocation with undefined initializer.\n\n // NOTE: without the ReducerState indirection, TypeScript would reduce S to be the most common\n // supertype between the reducer's return type and the initialState (or the initializer's return type),\n // which would prevent autocompletion from ever working.\n\n // TODO: double-check if this weird overload logic is necessary. It is possible it's either a bug\n // in older versions, or a regression in newer versions of the typescript completion service.\n function useReducer>(\n reducer: R,\n initialState: ReducerState,\n initializer?: undefined\n ): [ReducerState, Dispatch>];\n /**\n * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument\n * (`initialValue`). The returned object will persist for the full lifetime of the component.\n *\n * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable\n * value around similar to how you’d use instance fields in classes.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#useref\n */\n function useRef(initialValue: T): MutableRefObject;\n // convenience overload for refs given as a ref prop as they typically start with a null value\n /**\n * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument\n * (`initialValue`). The returned object will persist for the full lifetime of the component.\n *\n * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable\n * value around similar to how you’d use instance fields in classes.\n *\n * Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type\n * of the generic argument.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#useref\n */\n function useRef(initialValue: T|null): RefObject;\n // convenience overload for potentially undefined initialValue / call with 0 arguments\n // has a default to stop it from defaulting to {} instead\n /**\n * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument\n * (`initialValue`). The returned object will persist for the full lifetime of the component.\n *\n * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable\n * value around similar to how you’d use instance fields in classes.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#useref\n */\n function useRef(): MutableRefObject;\n /**\n * The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations.\n * Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside\n * `useLayoutEffect` will be flushed synchronously, before the browser has a chance to paint.\n *\n * Prefer the standard `useEffect` when possible to avoid blocking visual updates.\n *\n * If you’re migrating code from a class component, `useLayoutEffect` fires in the same phase as\n * `componentDidMount` and `componentDidUpdate`.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#uselayouteffect\n */\n function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;\n /**\n * Accepts a function that contains imperative, possibly effectful code.\n *\n * @param effect Imperative function that can return a cleanup function\n * @param deps If present, effect will only activate if the values in the list change.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#useeffect\n */\n function useEffect(effect: EffectCallback, deps?: DependencyList): void;\n // NOTE: this does not accept strings, but this will have to be fixed by removing strings from type Ref\n /**\n * `useImperativeHandle` customizes the instance value that is exposed to parent components when using\n * `ref`. As always, imperative code using refs should be avoided in most cases.\n *\n * `useImperativeHandle` should be used with `React.forwardRef`.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#useimperativehandle\n */\n function useImperativeHandle(ref: Ref|undefined, init: () => R, deps?: DependencyList): void;\n // I made 'inputs' required here and in useMemo as there's no point to memoizing without the memoization key\n // useCallback(X) is identical to just using X, useMemo(() => Y) is identical to just using Y.\n /**\n * `useCallback` will return a memoized version of the callback that only changes if one of the `inputs`\n * has changed.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#usecallback\n */\n // A specific function type would not trigger implicit any.\n // See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/52873#issuecomment-845806435 for a comparison between `Function` and more specific types.\n // tslint:disable-next-line ban-types\n function useCallback(callback: T, deps: DependencyList): T;\n /**\n * `useMemo` will only recompute the memoized value when one of the `deps` has changed.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#usememo\n */\n // allow undefined, but don't make it optional as that is very likely a mistake\n function useMemo(factory: () => T, deps: DependencyList | undefined): T;\n /**\n * `useDebugValue` can be used to display a label for custom hooks in React DevTools.\n *\n * NOTE: We don’t recommend adding debug values to every custom hook.\n * It’s most valuable for custom hooks that are part of shared libraries.\n *\n * @version 16.8.0\n * @see https://reactjs.org/docs/hooks-reference.html#usedebugvalue\n */\n // the name of the custom hook is itself derived from the function name at runtime:\n // it's just the function name without the \"use\" prefix.\n function useDebugValue(value: T, format?: (value: T) => any): void;\n\n // must be synchronous\n export type TransitionFunction = () => VoidOrUndefinedOnly;\n // strange definition to allow vscode to show documentation on the invocation\n export interface TransitionStartFunction {\n /**\n * State updates caused inside the callback are allowed to be deferred.\n *\n * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**\n *\n * @param callback A _synchronous_ function which causes state updates that can be deferred.\n */\n (callback: TransitionFunction): void;\n }\n\n /**\n * Returns a deferred version of the value that may “lag behind” it for at most `timeoutMs`.\n *\n * This is commonly used to keep the interface responsive when you have something that renders immediately\n * based on user input and something that needs to wait for a data fetch.\n *\n * A good example of this is a text input.\n *\n * @param value The value that is going to be deferred\n *\n * @see https://reactjs.org/docs/concurrent-mode-reference.html#usedeferredvalue\n */\n export function useDeferredValue(value: T): T;\n\n /**\n * Allows components to avoid undesirable loading states by waiting for content to load\n * before transitioning to the next screen. It also allows components to defer slower,\n * data fetching updates until subsequent renders so that more crucial updates can be\n * rendered immediately.\n *\n * The `useTransition` hook returns two values in an array.\n *\n * The first is a boolean, React’s way of informing us whether we’re waiting for the transition to finish.\n * The second is a function that takes a callback. We can use it to tell React which state we want to defer.\n *\n * **If some state update causes a component to suspend, that state update should be wrapped in a transition.**\n *\n * @param config An optional object with `timeoutMs`\n *\n * @see https://reactjs.org/docs/concurrent-mode-reference.html#usetransition\n */\n export function useTransition(): [boolean, TransitionStartFunction];\n\n /**\n * Similar to `useTransition` but allows uses where hooks are not available.\n *\n * @param callback A _synchronous_ function which causes state updates that can be deferred.\n */\n export function startTransition(scope: TransitionFunction): void;\n\n export function useId(): string;\n\n /**\n * @param effect Imperative function that can return a cleanup function\n * @param deps If present, effect will only activate if the values in the list change.\n *\n * @see https://github.com/facebook/react/pull/21913\n */\n export function useInsertionEffect(effect: EffectCallback, deps?: DependencyList): void;\n\n /**\n * @param subscribe\n * @param getSnapshot\n *\n * @see https://github.com/reactwg/react-18/discussions/86\n */\n // keep in sync with `useSyncExternalStore` from `use-sync-external-store`\n export function useSyncExternalStore(\n subscribe: (onStoreChange: () => void) => () => void,\n getSnapshot: () => Snapshot,\n getServerSnapshot?: () => Snapshot,\n ): Snapshot;\n\n //\n // Event System\n // ----------------------------------------------------------------------\n // TODO: change any to unknown when moving to TS v3\n interface BaseSyntheticEvent {\n nativeEvent: E;\n currentTarget: C;\n target: T;\n bubbles: boolean;\n cancelable: boolean;\n defaultPrevented: boolean;\n eventPhase: number;\n isTrusted: boolean;\n preventDefault(): void;\n isDefaultPrevented(): boolean;\n stopPropagation(): void;\n isPropagationStopped(): boolean;\n persist(): void;\n timeStamp: number;\n type: string;\n }\n\n /**\n * currentTarget - a reference to the element on which the event listener is registered.\n *\n * target - a reference to the element from which the event was originally dispatched.\n * This might be a child element to the element on which the event listener is registered.\n * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682\n */\n interface SyntheticEvent extends BaseSyntheticEvent {}\n\n interface ClipboardEvent extends SyntheticEvent {\n clipboardData: DataTransfer;\n }\n\n interface CompositionEvent extends SyntheticEvent {\n data: string;\n }\n\n interface DragEvent extends MouseEvent {\n dataTransfer: DataTransfer;\n }\n\n interface PointerEvent extends MouseEvent {\n pointerId: number;\n pressure: number;\n tangentialPressure: number;\n tiltX: number;\n tiltY: number;\n twist: number;\n width: number;\n height: number;\n pointerType: 'mouse' | 'pen' | 'touch';\n isPrimary: boolean;\n }\n\n interface FocusEvent extends SyntheticEvent {\n relatedTarget: (EventTarget & RelatedTarget) | null;\n target: EventTarget & Target;\n }\n\n interface FormEvent extends SyntheticEvent {\n }\n\n interface InvalidEvent extends SyntheticEvent {\n target: EventTarget & T;\n }\n\n interface ChangeEvent extends SyntheticEvent {\n target: EventTarget & T;\n }\n\n interface KeyboardEvent extends UIEvent {\n altKey: boolean;\n /** @deprecated */\n charCode: number;\n ctrlKey: boolean;\n code: string;\n /**\n * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.\n */\n getModifierState(key: string): boolean;\n /**\n * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values\n */\n key: string;\n /** @deprecated */\n keyCode: number;\n locale: string;\n location: number;\n metaKey: boolean;\n repeat: boolean;\n shiftKey: boolean;\n /** @deprecated */\n which: number;\n }\n\n interface MouseEvent extends UIEvent {\n altKey: boolean;\n button: number;\n buttons: number;\n clientX: number;\n clientY: number;\n ctrlKey: boolean;\n /**\n * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.\n */\n getModifierState(key: string): boolean;\n metaKey: boolean;\n movementX: number;\n movementY: number;\n pageX: number;\n pageY: number;\n relatedTarget: EventTarget | null;\n screenX: number;\n screenY: number;\n shiftKey: boolean;\n }\n\n interface TouchEvent extends UIEvent {\n altKey: boolean;\n changedTouches: TouchList;\n ctrlKey: boolean;\n /**\n * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.\n */\n getModifierState(key: string): boolean;\n metaKey: boolean;\n shiftKey: boolean;\n targetTouches: TouchList;\n touches: TouchList;\n }\n\n interface UIEvent extends SyntheticEvent {\n detail: number;\n view: AbstractView;\n }\n\n interface WheelEvent extends MouseEvent {\n deltaMode: number;\n deltaX: number;\n deltaY: number;\n deltaZ: number;\n }\n\n interface AnimationEvent extends SyntheticEvent {\n animationName: string;\n elapsedTime: number;\n pseudoElement: string;\n }\n\n interface TransitionEvent extends SyntheticEvent {\n elapsedTime: number;\n propertyName: string;\n pseudoElement: string;\n }\n\n //\n // Event Handler Types\n // ----------------------------------------------------------------------\n\n type EventHandler> = { bivarianceHack(event: E): void }[\"bivarianceHack\"];\n\n type ReactEventHandler = EventHandler>;\n\n type ClipboardEventHandler = EventHandler>;\n type CompositionEventHandler = EventHandler>;\n type DragEventHandler = EventHandler>;\n type FocusEventHandler = EventHandler>;\n type FormEventHandler = EventHandler>;\n type ChangeEventHandler = EventHandler>;\n type KeyboardEventHandler = EventHandler>;\n type MouseEventHandler = EventHandler>;\n type TouchEventHandler = EventHandler>;\n type PointerEventHandler = EventHandler>;\n type UIEventHandler = EventHandler>;\n type WheelEventHandler = EventHandler>;\n type AnimationEventHandler = EventHandler>;\n type TransitionEventHandler = EventHandler>;\n\n //\n // Props / DOM Attributes\n // ----------------------------------------------------------------------\n\n interface HTMLProps extends AllHTMLAttributes, ClassAttributes {\n }\n\n type DetailedHTMLProps, T> = ClassAttributes & E;\n\n interface SVGProps extends SVGAttributes, ClassAttributes {\n }\n\n interface DOMAttributes {\n children?: ReactNode | undefined;\n dangerouslySetInnerHTML?: {\n __html: string;\n } | undefined;\n\n // Clipboard Events\n onCopy?: ClipboardEventHandler | undefined;\n onCopyCapture?: ClipboardEventHandler | undefined;\n onCut?: ClipboardEventHandler | undefined;\n onCutCapture?: ClipboardEventHandler | undefined;\n onPaste?: ClipboardEventHandler | undefined;\n onPasteCapture?: ClipboardEventHandler | undefined;\n\n // Composition Events\n onCompositionEnd?: CompositionEventHandler | undefined;\n onCompositionEndCapture?: CompositionEventHandler | undefined;\n onCompositionStart?: CompositionEventHandler | undefined;\n onCompositionStartCapture?: CompositionEventHandler | undefined;\n onCompositionUpdate?: CompositionEventHandler | undefined;\n onCompositionUpdateCapture?: CompositionEventHandler | undefined;\n\n // Focus Events\n onFocus?: FocusEventHandler | undefined;\n onFocusCapture?: FocusEventHandler | undefined;\n onBlur?: FocusEventHandler | undefined;\n onBlurCapture?: FocusEventHandler | undefined;\n\n // Form Events\n onChange?: FormEventHandler | undefined;\n onChangeCapture?: FormEventHandler | undefined;\n onBeforeInput?: FormEventHandler | undefined;\n onBeforeInputCapture?: FormEventHandler | undefined;\n onInput?: FormEventHandler | undefined;\n onInputCapture?: FormEventHandler | undefined;\n onReset?: FormEventHandler | undefined;\n onResetCapture?: FormEventHandler | undefined;\n onSubmit?: FormEventHandler | undefined;\n onSubmitCapture?: FormEventHandler | undefined;\n onInvalid?: FormEventHandler | undefined;\n onInvalidCapture?: FormEventHandler | undefined;\n\n // Image Events\n onLoad?: ReactEventHandler | undefined;\n onLoadCapture?: ReactEventHandler | undefined;\n onError?: ReactEventHandler | undefined; // also a Media Event\n onErrorCapture?: ReactEventHandler | undefined; // also a Media Event\n\n // Keyboard Events\n onKeyDown?: KeyboardEventHandler | undefined;\n onKeyDownCapture?: KeyboardEventHandler | undefined;\n /** @deprecated */\n onKeyPress?: KeyboardEventHandler | undefined;\n /** @deprecated */\n onKeyPressCapture?: KeyboardEventHandler | undefined;\n onKeyUp?: KeyboardEventHandler | undefined;\n onKeyUpCapture?: KeyboardEventHandler | undefined;\n\n // Media Events\n onAbort?: ReactEventHandler | undefined;\n onAbortCapture?: ReactEventHandler | undefined;\n onCanPlay?: ReactEventHandler | undefined;\n onCanPlayCapture?: ReactEventHandler | undefined;\n onCanPlayThrough?: ReactEventHandler | undefined;\n onCanPlayThroughCapture?: ReactEventHandler | undefined;\n onDurationChange?: ReactEventHandler | undefined;\n onDurationChangeCapture?: ReactEventHandler | undefined;\n onEmptied?: ReactEventHandler | undefined;\n onEmptiedCapture?: ReactEventHandler | undefined;\n onEncrypted?: ReactEventHandler | undefined;\n onEncryptedCapture?: ReactEventHandler | undefined;\n onEnded?: ReactEventHandler | undefined;\n onEndedCapture?: ReactEventHandler | undefined;\n onLoadedData?: ReactEventHandler | undefined;\n onLoadedDataCapture?: ReactEventHandler | undefined;\n onLoadedMetadata?: ReactEventHandler | undefined;\n onLoadedMetadataCapture?: ReactEventHandler | undefined;\n onLoadStart?: ReactEventHandler | undefined;\n onLoadStartCapture?: ReactEventHandler | undefined;\n onPause?: ReactEventHandler | undefined;\n onPauseCapture?: ReactEventHandler | undefined;\n onPlay?: ReactEventHandler | undefined;\n onPlayCapture?: ReactEventHandler | undefined;\n onPlaying?: ReactEventHandler | undefined;\n onPlayingCapture?: ReactEventHandler | undefined;\n onProgress?: ReactEventHandler | undefined;\n onProgressCapture?: ReactEventHandler | undefined;\n onRateChange?: ReactEventHandler | undefined;\n onRateChangeCapture?: ReactEventHandler | undefined;\n onSeeked?: ReactEventHandler | undefined;\n onSeekedCapture?: ReactEventHandler | undefined;\n onSeeking?: ReactEventHandler | undefined;\n onSeekingCapture?: ReactEventHandler | undefined;\n onStalled?: ReactEventHandler | undefined;\n onStalledCapture?: ReactEventHandler | undefined;\n onSuspend?: ReactEventHandler | undefined;\n onSuspendCapture?: ReactEventHandler | undefined;\n onTimeUpdate?: ReactEventHandler | undefined;\n onTimeUpdateCapture?: ReactEventHandler | undefined;\n onVolumeChange?: ReactEventHandler | undefined;\n onVolumeChangeCapture?: ReactEventHandler | undefined;\n onWaiting?: ReactEventHandler | undefined;\n onWaitingCapture?: ReactEventHandler | undefined;\n\n // MouseEvents\n onAuxClick?: MouseEventHandler | undefined;\n onAuxClickCapture?: MouseEventHandler | undefined;\n onClick?: MouseEventHandler | undefined;\n onClickCapture?: MouseEventHandler | undefined;\n onContextMenu?: MouseEventHandler | undefined;\n onContextMenuCapture?: MouseEventHandler | undefined;\n onDoubleClick?: MouseEventHandler | undefined;\n onDoubleClickCapture?: MouseEventHandler | undefined;\n onDrag?: DragEventHandler | undefined;\n onDragCapture?: DragEventHandler | undefined;\n onDragEnd?: DragEventHandler | undefined;\n onDragEndCapture?: DragEventHandler | undefined;\n onDragEnter?: DragEventHandler | undefined;\n onDragEnterCapture?: DragEventHandler | undefined;\n onDragExit?: DragEventHandler | undefined;\n onDragExitCapture?: DragEventHandler | undefined;\n onDragLeave?: DragEventHandler | undefined;\n onDragLeaveCapture?: DragEventHandler | undefined;\n onDragOver?: DragEventHandler | undefined;\n onDragOverCapture?: DragEventHandler | undefined;\n onDragStart?: DragEventHandler | undefined;\n onDragStartCapture?: DragEventHandler | undefined;\n onDrop?: DragEventHandler | undefined;\n onDropCapture?: DragEventHandler | undefined;\n onMouseDown?: MouseEventHandler | undefined;\n onMouseDownCapture?: MouseEventHandler | undefined;\n onMouseEnter?: MouseEventHandler | undefined;\n onMouseLeave?: MouseEventHandler | undefined;\n onMouseMove?: MouseEventHandler | undefined;\n onMouseMoveCapture?: MouseEventHandler | undefined;\n onMouseOut?: MouseEventHandler | undefined;\n onMouseOutCapture?: MouseEventHandler | undefined;\n onMouseOver?: MouseEventHandler | undefined;\n onMouseOverCapture?: MouseEventHandler | undefined;\n onMouseUp?: MouseEventHandler | undefined;\n onMouseUpCapture?: MouseEventHandler | undefined;\n\n // Selection Events\n onSelect?: ReactEventHandler | undefined;\n onSelectCapture?: ReactEventHandler | undefined;\n\n // Touch Events\n onTouchCancel?: TouchEventHandler | undefined;\n onTouchCancelCapture?: TouchEventHandler | undefined;\n onTouchEnd?: TouchEventHandler | undefined;\n onTouchEndCapture?: TouchEventHandler | undefined;\n onTouchMove?: TouchEventHandler | undefined;\n onTouchMoveCapture?: TouchEventHandler | undefined;\n onTouchStart?: TouchEventHandler | undefined;\n onTouchStartCapture?: TouchEventHandler | undefined;\n\n // Pointer Events\n onPointerDown?: PointerEventHandler | undefined;\n onPointerDownCapture?: PointerEventHandler | undefined;\n onPointerMove?: PointerEventHandler | undefined;\n onPointerMoveCapture?: PointerEventHandler | undefined;\n onPointerUp?: PointerEventHandler | undefined;\n onPointerUpCapture?: PointerEventHandler | undefined;\n onPointerCancel?: PointerEventHandler | undefined;\n onPointerCancelCapture?: PointerEventHandler | undefined;\n onPointerEnter?: PointerEventHandler | undefined;\n onPointerEnterCapture?: PointerEventHandler | undefined;\n onPointerLeave?: PointerEventHandler | undefined;\n onPointerLeaveCapture?: PointerEventHandler | undefined;\n onPointerOver?: PointerEventHandler | undefined;\n onPointerOverCapture?: PointerEventHandler | undefined;\n onPointerOut?: PointerEventHandler | undefined;\n onPointerOutCapture?: PointerEventHandler | undefined;\n onGotPointerCapture?: PointerEventHandler | undefined;\n onGotPointerCaptureCapture?: PointerEventHandler | undefined;\n onLostPointerCapture?: PointerEventHandler | undefined;\n onLostPointerCaptureCapture?: PointerEventHandler | undefined;\n\n // UI Events\n onScroll?: UIEventHandler | undefined;\n onScrollCapture?: UIEventHandler | undefined;\n\n // Wheel Events\n onWheel?: WheelEventHandler | undefined;\n onWheelCapture?: WheelEventHandler | undefined;\n\n // Animation Events\n onAnimationStart?: AnimationEventHandler | undefined;\n onAnimationStartCapture?: AnimationEventHandler | undefined;\n onAnimationEnd?: AnimationEventHandler | undefined;\n onAnimationEndCapture?: AnimationEventHandler | undefined;\n onAnimationIteration?: AnimationEventHandler | undefined;\n onAnimationIterationCapture?: AnimationEventHandler | undefined;\n\n // Transition Events\n onTransitionEnd?: TransitionEventHandler | undefined;\n onTransitionEndCapture?: TransitionEventHandler | undefined;\n }\n\n export interface CSSProperties extends CSS.Properties {\n /**\n * The index signature was removed to enable closed typing for style\n * using CSSType. You're able to use type assertion or module augmentation\n * to add properties or an index signature of your own.\n *\n * For examples and more information, visit:\n * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors\n */\n }\n\n // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/\n interface AriaAttributes {\n /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */\n 'aria-activedescendant'?: string | undefined;\n /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */\n 'aria-atomic'?: Booleanish | undefined;\n /**\n * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\n * presented if they are made.\n */\n 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined;\n /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */\n 'aria-busy'?: Booleanish | undefined;\n /**\n * Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n * @see aria-pressed @see aria-selected.\n */\n 'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | undefined;\n /**\n * Defines the total number of columns in a table, grid, or treegrid.\n * @see aria-colindex.\n */\n 'aria-colcount'?: number | undefined;\n /**\n * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n * @see aria-colcount @see aria-colspan.\n */\n 'aria-colindex'?: number | undefined;\n /**\n * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n * @see aria-colindex @see aria-rowspan.\n */\n 'aria-colspan'?: number | undefined;\n /**\n * Identifies the element (or elements) whose contents or presence are controlled by the current element.\n * @see aria-owns.\n */\n 'aria-controls'?: string | undefined;\n /** Indicates the element that represents the current item within a container or set of related elements. */\n 'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time' | undefined;\n /**\n * Identifies the element (or elements) that describes the object.\n * @see aria-labelledby\n */\n 'aria-describedby'?: string | undefined;\n /**\n * Identifies the element that provides a detailed, extended description for the object.\n * @see aria-describedby.\n */\n 'aria-details'?: string | undefined;\n /**\n * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n * @see aria-hidden @see aria-readonly.\n */\n 'aria-disabled'?: Booleanish | undefined;\n /**\n * Indicates what functions can be performed when a dragged object is released on the drop target.\n * @deprecated in ARIA 1.1\n */\n 'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined;\n /**\n * Identifies the element that provides an error message for the object.\n * @see aria-invalid @see aria-describedby.\n */\n 'aria-errormessage'?: string | undefined;\n /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */\n 'aria-expanded'?: Booleanish | undefined;\n /**\n * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\n * allows assistive technology to override the general default of reading in document source order.\n */\n 'aria-flowto'?: string | undefined;\n /**\n * Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n * @deprecated in ARIA 1.1\n */\n 'aria-grabbed'?: Booleanish | undefined;\n /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */\n 'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined;\n /**\n * Indicates whether the element is exposed to an accessibility API.\n * @see aria-disabled.\n */\n 'aria-hidden'?: Booleanish | undefined;\n /**\n * Indicates the entered value does not conform to the format expected by the application.\n * @see aria-errormessage.\n */\n 'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling' | undefined;\n /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */\n 'aria-keyshortcuts'?: string | undefined;\n /**\n * Defines a string value that labels the current element.\n * @see aria-labelledby.\n */\n 'aria-label'?: string | undefined;\n /**\n * Identifies the element (or elements) that labels the current element.\n * @see aria-describedby.\n */\n 'aria-labelledby'?: string | undefined;\n /** Defines the hierarchical level of an element within a structure. */\n 'aria-level'?: number | undefined;\n /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */\n 'aria-live'?: 'off' | 'assertive' | 'polite' | undefined;\n /** Indicates whether an element is modal when displayed. */\n 'aria-modal'?: Booleanish | undefined;\n /** Indicates whether a text box accepts multiple lines of input or only a single line. */\n 'aria-multiline'?: Booleanish | undefined;\n /** Indicates that the user may select more than one item from the current selectable descendants. */\n 'aria-multiselectable'?: Booleanish | undefined;\n /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */\n 'aria-orientation'?: 'horizontal' | 'vertical' | undefined;\n /**\n * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\n * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n * @see aria-controls.\n */\n 'aria-owns'?: string | undefined;\n /**\n * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\n * A hint could be a sample value or a brief description of the expected format.\n */\n 'aria-placeholder'?: string | undefined;\n /**\n * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n * @see aria-setsize.\n */\n 'aria-posinset'?: number | undefined;\n /**\n * Indicates the current \"pressed\" state of toggle buttons.\n * @see aria-checked @see aria-selected.\n */\n 'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined;\n /**\n * Indicates that the element is not editable, but is otherwise operable.\n * @see aria-disabled.\n */\n 'aria-readonly'?: Booleanish | undefined;\n /**\n * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n * @see aria-atomic.\n */\n 'aria-relevant'?: 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined;\n /** Indicates that user input is required on the element before a form may be submitted. */\n 'aria-required'?: Booleanish | undefined;\n /** Defines a human-readable, author-localized description for the role of an element. */\n 'aria-roledescription'?: string | undefined;\n /**\n * Defines the total number of rows in a table, grid, or treegrid.\n * @see aria-rowindex.\n */\n 'aria-rowcount'?: number | undefined;\n /**\n * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n * @see aria-rowcount @see aria-rowspan.\n */\n 'aria-rowindex'?: number | undefined;\n /**\n * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n * @see aria-rowindex @see aria-colspan.\n */\n 'aria-rowspan'?: number | undefined;\n /**\n * Indicates the current \"selected\" state of various widgets.\n * @see aria-checked @see aria-pressed.\n */\n 'aria-selected'?: Booleanish | undefined;\n /**\n * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n * @see aria-posinset.\n */\n 'aria-setsize'?: number | undefined;\n /** Indicates if items in a table or grid are sorted in ascending or descending order. */\n 'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined;\n /** Defines the maximum allowed value for a range widget. */\n 'aria-valuemax'?: number | undefined;\n /** Defines the minimum allowed value for a range widget. */\n 'aria-valuemin'?: number | undefined;\n /**\n * Defines the current value for a range widget.\n * @see aria-valuetext.\n */\n 'aria-valuenow'?: number | undefined;\n /** Defines the human readable text alternative of aria-valuenow for a range widget. */\n 'aria-valuetext'?: string | undefined;\n }\n\n // All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions\n type AriaRole =\n | 'alert'\n | 'alertdialog'\n | 'application'\n | 'article'\n | 'banner'\n | 'button'\n | 'cell'\n | 'checkbox'\n | 'columnheader'\n | 'combobox'\n | 'complementary'\n | 'contentinfo'\n | 'definition'\n | 'dialog'\n | 'directory'\n | 'document'\n | 'feed'\n | 'figure'\n | 'form'\n | 'grid'\n | 'gridcell'\n | 'group'\n | 'heading'\n | 'img'\n | 'link'\n | 'list'\n | 'listbox'\n | 'listitem'\n | 'log'\n | 'main'\n | 'marquee'\n | 'math'\n | 'menu'\n | 'menubar'\n | 'menuitem'\n | 'menuitemcheckbox'\n | 'menuitemradio'\n | 'navigation'\n | 'none'\n | 'note'\n | 'option'\n | 'presentation'\n | 'progressbar'\n | 'radio'\n | 'radiogroup'\n | 'region'\n | 'row'\n | 'rowgroup'\n | 'rowheader'\n | 'scrollbar'\n | 'search'\n | 'searchbox'\n | 'separator'\n | 'slider'\n | 'spinbutton'\n | 'status'\n | 'switch'\n | 'tab'\n | 'table'\n | 'tablist'\n | 'tabpanel'\n | 'term'\n | 'textbox'\n | 'timer'\n | 'toolbar'\n | 'tooltip'\n | 'tree'\n | 'treegrid'\n | 'treeitem'\n | (string & {});\n\n interface HTMLAttributes extends AriaAttributes, DOMAttributes {\n // React-specific Attributes\n defaultChecked?: boolean | undefined;\n defaultValue?: string | number | ReadonlyArray | undefined;\n suppressContentEditableWarning?: boolean | undefined;\n suppressHydrationWarning?: boolean | undefined;\n\n // Standard HTML Attributes\n accessKey?: string | undefined;\n className?: string | undefined;\n contentEditable?: Booleanish | \"inherit\" | undefined;\n contextMenu?: string | undefined;\n dir?: string | undefined;\n draggable?: Booleanish | undefined;\n hidden?: boolean | undefined;\n id?: string | undefined;\n lang?: string | undefined;\n placeholder?: string | undefined;\n slot?: string | undefined;\n spellCheck?: Booleanish | undefined;\n style?: CSSProperties | undefined;\n tabIndex?: number | undefined;\n title?: string | undefined;\n translate?: 'yes' | 'no' | undefined;\n\n // Unknown\n radioGroup?: string | undefined; // , \n\n // WAI-ARIA\n role?: AriaRole | undefined;\n\n // RDFa Attributes\n about?: string | undefined;\n datatype?: string | undefined;\n inlist?: any;\n prefix?: string | undefined;\n property?: string | undefined;\n resource?: string | undefined;\n typeof?: string | undefined;\n vocab?: string | undefined;\n\n // Non-standard Attributes\n autoCapitalize?: string | undefined;\n autoCorrect?: string | undefined;\n autoSave?: string | undefined;\n color?: string | undefined;\n itemProp?: string | undefined;\n itemScope?: boolean | undefined;\n itemType?: string | undefined;\n itemID?: string | undefined;\n itemRef?: string | undefined;\n results?: number | undefined;\n security?: string | undefined;\n unselectable?: 'on' | 'off' | undefined;\n\n // Living Standard\n /**\n * Hints at the type of data that might be entered by the user while editing the element or its contents\n * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute\n */\n inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | undefined;\n /**\n * Specify that a standard HTML element should behave like a defined custom built-in element\n * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is\n */\n is?: string | undefined;\n }\n\n interface AllHTMLAttributes extends HTMLAttributes {\n // Standard HTML Attributes\n accept?: string | undefined;\n acceptCharset?: string | undefined;\n action?: string | undefined;\n allowFullScreen?: boolean | undefined;\n allowTransparency?: boolean | undefined;\n alt?: string | undefined;\n as?: string | undefined;\n async?: boolean | undefined;\n autoComplete?: string | undefined;\n autoFocus?: boolean | undefined;\n autoPlay?: boolean | undefined;\n capture?: boolean | 'user' | 'environment' | undefined;\n cellPadding?: number | string | undefined;\n cellSpacing?: number | string | undefined;\n charSet?: string | undefined;\n challenge?: string | undefined;\n checked?: boolean | undefined;\n cite?: string | undefined;\n classID?: string | undefined;\n cols?: number | undefined;\n colSpan?: number | undefined;\n content?: string | undefined;\n controls?: boolean | undefined;\n coords?: string | undefined;\n crossOrigin?: string | undefined;\n data?: string | undefined;\n dateTime?: string | undefined;\n default?: boolean | undefined;\n defer?: boolean | undefined;\n disabled?: boolean | undefined;\n download?: any;\n encType?: string | undefined;\n form?: string | undefined;\n formAction?: string | undefined;\n formEncType?: string | undefined;\n formMethod?: string | undefined;\n formNoValidate?: boolean | undefined;\n formTarget?: string | undefined;\n frameBorder?: number | string | undefined;\n headers?: string | undefined;\n height?: number | string | undefined;\n high?: number | undefined;\n href?: string | undefined;\n hrefLang?: string | undefined;\n htmlFor?: string | undefined;\n httpEquiv?: string | undefined;\n integrity?: string | undefined;\n keyParams?: string | undefined;\n keyType?: string | undefined;\n kind?: string | undefined;\n label?: string | undefined;\n list?: string | undefined;\n loop?: boolean | undefined;\n low?: number | undefined;\n manifest?: string | undefined;\n marginHeight?: number | undefined;\n marginWidth?: number | undefined;\n max?: number | string | undefined;\n maxLength?: number | undefined;\n media?: string | undefined;\n mediaGroup?: string | undefined;\n method?: string | undefined;\n min?: number | string | undefined;\n minLength?: number | undefined;\n multiple?: boolean | undefined;\n muted?: boolean | undefined;\n name?: string | undefined;\n nonce?: string | undefined;\n noValidate?: boolean | undefined;\n open?: boolean | undefined;\n optimum?: number | undefined;\n pattern?: string | undefined;\n placeholder?: string | undefined;\n playsInline?: boolean | undefined;\n poster?: string | undefined;\n preload?: string | undefined;\n readOnly?: boolean | undefined;\n rel?: string | undefined;\n required?: boolean | undefined;\n reversed?: boolean | undefined;\n rows?: number | undefined;\n rowSpan?: number | undefined;\n sandbox?: string | undefined;\n scope?: string | undefined;\n scoped?: boolean | undefined;\n scrolling?: string | undefined;\n seamless?: boolean | undefined;\n selected?: boolean | undefined;\n shape?: string | undefined;\n size?: number | undefined;\n sizes?: string | undefined;\n span?: number | undefined;\n src?: string | undefined;\n srcDoc?: string | undefined;\n srcLang?: string | undefined;\n srcSet?: string | undefined;\n start?: number | undefined;\n step?: number | string | undefined;\n summary?: string | undefined;\n target?: string | undefined;\n type?: string | undefined;\n useMap?: string | undefined;\n value?: string | ReadonlyArray | number | undefined;\n width?: number | string | undefined;\n wmode?: string | undefined;\n wrap?: string | undefined;\n }\n\n type HTMLAttributeReferrerPolicy =\n | ''\n | 'no-referrer'\n | 'no-referrer-when-downgrade'\n | 'origin'\n | 'origin-when-cross-origin'\n | 'same-origin'\n | 'strict-origin'\n | 'strict-origin-when-cross-origin'\n | 'unsafe-url';\n\n type HTMLAttributeAnchorTarget =\n | '_self'\n | '_blank'\n | '_parent'\n | '_top'\n | (string & {});\n\n interface AnchorHTMLAttributes extends HTMLAttributes {\n download?: any;\n href?: string | undefined;\n hrefLang?: string | undefined;\n media?: string | undefined;\n ping?: string | undefined;\n rel?: string | undefined;\n target?: HTMLAttributeAnchorTarget | undefined;\n type?: string | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n }\n\n interface AudioHTMLAttributes extends MediaHTMLAttributes {}\n\n interface AreaHTMLAttributes extends HTMLAttributes {\n alt?: string | undefined;\n coords?: string | undefined;\n download?: any;\n href?: string | undefined;\n hrefLang?: string | undefined;\n media?: string | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n rel?: string | undefined;\n shape?: string | undefined;\n target?: string | undefined;\n }\n\n interface BaseHTMLAttributes extends HTMLAttributes {\n href?: string | undefined;\n target?: string | undefined;\n }\n\n interface BlockquoteHTMLAttributes extends HTMLAttributes {\n cite?: string | undefined;\n }\n\n interface ButtonHTMLAttributes extends HTMLAttributes {\n autoFocus?: boolean | undefined;\n disabled?: boolean | undefined;\n form?: string | undefined;\n formAction?: string | undefined;\n formEncType?: string | undefined;\n formMethod?: string | undefined;\n formNoValidate?: boolean | undefined;\n formTarget?: string | undefined;\n name?: string | undefined;\n type?: 'submit' | 'reset' | 'button' | undefined;\n value?: string | ReadonlyArray | number | undefined;\n }\n\n interface CanvasHTMLAttributes extends HTMLAttributes {\n height?: number | string | undefined;\n width?: number | string | undefined;\n }\n\n interface ColHTMLAttributes extends HTMLAttributes {\n span?: number | undefined;\n width?: number | string | undefined;\n }\n\n interface ColgroupHTMLAttributes extends HTMLAttributes {\n span?: number | undefined;\n }\n\n interface DataHTMLAttributes extends HTMLAttributes {\n value?: string | ReadonlyArray | number | undefined;\n }\n\n interface DetailsHTMLAttributes extends HTMLAttributes {\n open?: boolean | undefined;\n onToggle?: ReactEventHandler | undefined;\n }\n\n interface DelHTMLAttributes extends HTMLAttributes {\n cite?: string | undefined;\n dateTime?: string | undefined;\n }\n\n interface DialogHTMLAttributes extends HTMLAttributes {\n onCancel?: ReactEventHandler | undefined;\n onClose?: ReactEventHandler | undefined;\n open?: boolean | undefined;\n }\n\n interface EmbedHTMLAttributes extends HTMLAttributes {\n height?: number | string | undefined;\n src?: string | undefined;\n type?: string | undefined;\n width?: number | string | undefined;\n }\n\n interface FieldsetHTMLAttributes extends HTMLAttributes {\n disabled?: boolean | undefined;\n form?: string | undefined;\n name?: string | undefined;\n }\n\n interface FormHTMLAttributes extends HTMLAttributes {\n acceptCharset?: string | undefined;\n action?: string | undefined;\n autoComplete?: string | undefined;\n encType?: string | undefined;\n method?: string | undefined;\n name?: string | undefined;\n noValidate?: boolean | undefined;\n target?: string | undefined;\n }\n\n interface HtmlHTMLAttributes extends HTMLAttributes {\n manifest?: string | undefined;\n }\n\n interface IframeHTMLAttributes extends HTMLAttributes {\n allow?: string | undefined;\n allowFullScreen?: boolean | undefined;\n allowTransparency?: boolean | undefined;\n /** @deprecated */\n frameBorder?: number | string | undefined;\n height?: number | string | undefined;\n loading?: \"eager\" | \"lazy\" | undefined;\n /** @deprecated */\n marginHeight?: number | undefined;\n /** @deprecated */\n marginWidth?: number | undefined;\n name?: string | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n sandbox?: string | undefined;\n /** @deprecated */\n scrolling?: string | undefined;\n seamless?: boolean | undefined;\n src?: string | undefined;\n srcDoc?: string | undefined;\n width?: number | string | undefined;\n }\n\n interface ImgHTMLAttributes extends HTMLAttributes {\n alt?: string | undefined;\n crossOrigin?: \"anonymous\" | \"use-credentials\" | \"\" | undefined;\n decoding?: \"async\" | \"auto\" | \"sync\" | undefined;\n height?: number | string | undefined;\n loading?: \"eager\" | \"lazy\" | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n sizes?: string | undefined;\n src?: string | undefined;\n srcSet?: string | undefined;\n useMap?: string | undefined;\n width?: number | string | undefined;\n }\n\n interface InsHTMLAttributes extends HTMLAttributes {\n cite?: string | undefined;\n dateTime?: string | undefined;\n }\n\n type HTMLInputTypeAttribute =\n | 'button'\n | 'checkbox'\n | 'color'\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'file'\n | 'hidden'\n | 'image'\n | 'month'\n | 'number'\n | 'password'\n | 'radio'\n | 'range'\n | 'reset'\n | 'search'\n | 'submit'\n | 'tel'\n | 'text'\n | 'time'\n | 'url'\n | 'week'\n | (string & {});\n\n interface InputHTMLAttributes extends HTMLAttributes {\n accept?: string | undefined;\n alt?: string | undefined;\n autoComplete?: string | undefined;\n autoFocus?: boolean | undefined;\n capture?: boolean | 'user' | 'environment' | undefined; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute\n checked?: boolean | undefined;\n crossOrigin?: string | undefined;\n disabled?: boolean | undefined;\n enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined;\n form?: string | undefined;\n formAction?: string | undefined;\n formEncType?: string | undefined;\n formMethod?: string | undefined;\n formNoValidate?: boolean | undefined;\n formTarget?: string | undefined;\n height?: number | string | undefined;\n list?: string | undefined;\n max?: number | string | undefined;\n maxLength?: number | undefined;\n min?: number | string | undefined;\n minLength?: number | undefined;\n multiple?: boolean | undefined;\n name?: string | undefined;\n pattern?: string | undefined;\n placeholder?: string | undefined;\n readOnly?: boolean | undefined;\n required?: boolean | undefined;\n size?: number | undefined;\n src?: string | undefined;\n step?: number | string | undefined;\n type?: HTMLInputTypeAttribute | undefined;\n value?: string | ReadonlyArray | number | undefined;\n width?: number | string | undefined;\n\n onChange?: ChangeEventHandler | undefined;\n }\n\n interface KeygenHTMLAttributes extends HTMLAttributes {\n autoFocus?: boolean | undefined;\n challenge?: string | undefined;\n disabled?: boolean | undefined;\n form?: string | undefined;\n keyType?: string | undefined;\n keyParams?: string | undefined;\n name?: string | undefined;\n }\n\n interface LabelHTMLAttributes extends HTMLAttributes {\n form?: string | undefined;\n htmlFor?: string | undefined;\n }\n\n interface LiHTMLAttributes extends HTMLAttributes {\n value?: string | ReadonlyArray | number | undefined;\n }\n\n interface LinkHTMLAttributes extends HTMLAttributes {\n as?: string | undefined;\n crossOrigin?: string | undefined;\n href?: string | undefined;\n hrefLang?: string | undefined;\n integrity?: string | undefined;\n media?: string | undefined;\n imageSrcSet?: string | undefined;\n imageSizes?: string | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n rel?: string | undefined;\n sizes?: string | undefined;\n type?: string | undefined;\n charSet?: string | undefined;\n }\n\n interface MapHTMLAttributes extends HTMLAttributes {\n name?: string | undefined;\n }\n\n interface MenuHTMLAttributes extends HTMLAttributes {\n type?: string | undefined;\n }\n\n interface MediaHTMLAttributes extends HTMLAttributes {\n autoPlay?: boolean | undefined;\n controls?: boolean | undefined;\n controlsList?: string | undefined;\n crossOrigin?: string | undefined;\n loop?: boolean | undefined;\n mediaGroup?: string | undefined;\n muted?: boolean | undefined;\n playsInline?: boolean | undefined;\n preload?: string | undefined;\n src?: string | undefined;\n }\n\n interface MetaHTMLAttributes extends HTMLAttributes {\n charSet?: string | undefined;\n content?: string | undefined;\n httpEquiv?: string | undefined;\n name?: string | undefined;\n media?: string | undefined;\n }\n\n interface MeterHTMLAttributes extends HTMLAttributes {\n form?: string | undefined;\n high?: number | undefined;\n low?: number | undefined;\n max?: number | string | undefined;\n min?: number | string | undefined;\n optimum?: number | undefined;\n value?: string | ReadonlyArray | number | undefined;\n }\n\n interface QuoteHTMLAttributes extends HTMLAttributes {\n cite?: string | undefined;\n }\n\n interface ObjectHTMLAttributes extends HTMLAttributes {\n classID?: string | undefined;\n data?: string | undefined;\n form?: string | undefined;\n height?: number | string | undefined;\n name?: string | undefined;\n type?: string | undefined;\n useMap?: string | undefined;\n width?: number | string | undefined;\n wmode?: string | undefined;\n }\n\n interface OlHTMLAttributes extends HTMLAttributes {\n reversed?: boolean | undefined;\n start?: number | undefined;\n type?: '1' | 'a' | 'A' | 'i' | 'I' | undefined;\n }\n\n interface OptgroupHTMLAttributes extends HTMLAttributes {\n disabled?: boolean | undefined;\n label?: string | undefined;\n }\n\n interface OptionHTMLAttributes extends HTMLAttributes {\n disabled?: boolean | undefined;\n label?: string | undefined;\n selected?: boolean | undefined;\n value?: string | ReadonlyArray | number | undefined;\n }\n\n interface OutputHTMLAttributes extends HTMLAttributes {\n form?: string | undefined;\n htmlFor?: string | undefined;\n name?: string | undefined;\n }\n\n interface ParamHTMLAttributes extends HTMLAttributes {\n name?: string | undefined;\n value?: string | ReadonlyArray | number | undefined;\n }\n\n interface ProgressHTMLAttributes extends HTMLAttributes {\n max?: number | string | undefined;\n value?: string | ReadonlyArray | number | undefined;\n }\n\n interface SlotHTMLAttributes extends HTMLAttributes {\n name?: string | undefined;\n }\n\n interface ScriptHTMLAttributes extends HTMLAttributes {\n async?: boolean | undefined;\n /** @deprecated */\n charSet?: string | undefined;\n crossOrigin?: string | undefined;\n defer?: boolean | undefined;\n integrity?: string | undefined;\n noModule?: boolean | undefined;\n nonce?: string | undefined;\n referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;\n src?: string | undefined;\n type?: string | undefined;\n }\n\n interface SelectHTMLAttributes extends HTMLAttributes {\n autoComplete?: string | undefined;\n autoFocus?: boolean | undefined;\n disabled?: boolean | undefined;\n form?: string | undefined;\n multiple?: boolean | undefined;\n name?: string | undefined;\n required?: boolean | undefined;\n size?: number | undefined;\n value?: string | ReadonlyArray | number | undefined;\n onChange?: ChangeEventHandler | undefined;\n }\n\n interface SourceHTMLAttributes extends HTMLAttributes {\n height?: number | string | undefined;\n media?: string | undefined;\n sizes?: string | undefined;\n src?: string | undefined;\n srcSet?: string | undefined;\n type?: string | undefined;\n width?: number | string | undefined;\n }\n\n interface StyleHTMLAttributes extends HTMLAttributes {\n media?: string | undefined;\n nonce?: string | undefined;\n scoped?: boolean | undefined;\n type?: string | undefined;\n }\n\n interface TableHTMLAttributes extends HTMLAttributes {\n cellPadding?: number | string | undefined;\n cellSpacing?: number | string | undefined;\n summary?: string | undefined;\n width?: number | string | undefined;\n }\n\n interface TextareaHTMLAttributes extends HTMLAttributes {\n autoComplete?: string | undefined;\n autoFocus?: boolean | undefined;\n cols?: number | undefined;\n dirName?: string | undefined;\n disabled?: boolean | undefined;\n form?: string | undefined;\n maxLength?: number | undefined;\n minLength?: number | undefined;\n name?: string | undefined;\n placeholder?: string | undefined;\n readOnly?: boolean | undefined;\n required?: boolean | undefined;\n rows?: number | undefined;\n value?: string | ReadonlyArray | number | undefined;\n wrap?: string | undefined;\n\n onChange?: ChangeEventHandler | undefined;\n }\n\n interface TdHTMLAttributes extends HTMLAttributes {\n align?: \"left\" | \"center\" | \"right\" | \"justify\" | \"char\" | undefined;\n colSpan?: number | undefined;\n headers?: string | undefined;\n rowSpan?: number | undefined;\n scope?: string | undefined;\n abbr?: string | undefined;\n height?: number | string | undefined;\n width?: number | string | undefined;\n valign?: \"top\" | \"middle\" | \"bottom\" | \"baseline\" | undefined;\n }\n\n interface ThHTMLAttributes extends HTMLAttributes {\n align?: \"left\" | \"center\" | \"right\" | \"justify\" | \"char\" | undefined;\n colSpan?: number | undefined;\n headers?: string | undefined;\n rowSpan?: number | undefined;\n scope?: string | undefined;\n abbr?: string | undefined;\n }\n\n interface TimeHTMLAttributes extends HTMLAttributes {\n dateTime?: string | undefined;\n }\n\n interface TrackHTMLAttributes extends HTMLAttributes {\n default?: boolean | undefined;\n kind?: string | undefined;\n label?: string | undefined;\n src?: string | undefined;\n srcLang?: string | undefined;\n }\n\n interface VideoHTMLAttributes extends MediaHTMLAttributes {\n height?: number | string | undefined;\n playsInline?: boolean | undefined;\n poster?: string | undefined;\n width?: number | string | undefined;\n disablePictureInPicture?: boolean | undefined;\n disableRemotePlayback?: boolean | undefined;\n }\n\n // this list is \"complete\" in that it contains every SVG attribute\n // that React supports, but the types can be improved.\n // Full list here: https://facebook.github.io/react/docs/dom-elements.html\n //\n // The three broad type categories are (in order of restrictiveness):\n // - \"number | string\"\n // - \"string\"\n // - union of string literals\n interface SVGAttributes extends AriaAttributes, DOMAttributes {\n // Attributes which also defined in HTMLAttributes\n // See comment in SVGDOMPropertyConfig.js\n className?: string | undefined;\n color?: string | undefined;\n height?: number | string | undefined;\n id?: string | undefined;\n lang?: string | undefined;\n max?: number | string | undefined;\n media?: string | undefined;\n method?: string | undefined;\n min?: number | string | undefined;\n name?: string | undefined;\n style?: CSSProperties | undefined;\n target?: string | undefined;\n type?: string | undefined;\n width?: number | string | undefined;\n\n // Other HTML properties supported by SVG elements in browsers\n role?: AriaRole | undefined;\n tabIndex?: number | undefined;\n crossOrigin?: \"anonymous\" | \"use-credentials\" | \"\" | undefined;\n\n // SVG Specific attributes\n accentHeight?: number | string | undefined;\n accumulate?: \"none\" | \"sum\" | undefined;\n additive?: \"replace\" | \"sum\" | undefined;\n alignmentBaseline?: \"auto\" | \"baseline\" | \"before-edge\" | \"text-before-edge\" | \"middle\" | \"central\" | \"after-edge\" |\n \"text-after-edge\" | \"ideographic\" | \"alphabetic\" | \"hanging\" | \"mathematical\" | \"inherit\" | undefined;\n allowReorder?: \"no\" | \"yes\" | undefined;\n alphabetic?: number | string | undefined;\n amplitude?: number | string | undefined;\n arabicForm?: \"initial\" | \"medial\" | \"terminal\" | \"isolated\" | undefined;\n ascent?: number | string | undefined;\n attributeName?: string | undefined;\n attributeType?: string | undefined;\n autoReverse?: Booleanish | undefined;\n azimuth?: number | string | undefined;\n baseFrequency?: number | string | undefined;\n baselineShift?: number | string | undefined;\n baseProfile?: number | string | undefined;\n bbox?: number | string | undefined;\n begin?: number | string | undefined;\n bias?: number | string | undefined;\n by?: number | string | undefined;\n calcMode?: number | string | undefined;\n capHeight?: number | string | undefined;\n clip?: number | string | undefined;\n clipPath?: string | undefined;\n clipPathUnits?: number | string | undefined;\n clipRule?: number | string | undefined;\n colorInterpolation?: number | string | undefined;\n colorInterpolationFilters?: \"auto\" | \"sRGB\" | \"linearRGB\" | \"inherit\" | undefined;\n colorProfile?: number | string | undefined;\n colorRendering?: number | string | undefined;\n contentScriptType?: number | string | undefined;\n contentStyleType?: number | string | undefined;\n cursor?: number | string | undefined;\n cx?: number | string | undefined;\n cy?: number | string | undefined;\n d?: string | undefined;\n decelerate?: number | string | undefined;\n descent?: number | string | undefined;\n diffuseConstant?: number | string | undefined;\n direction?: number | string | undefined;\n display?: number | string | undefined;\n divisor?: number | string | undefined;\n dominantBaseline?: number | string | undefined;\n dur?: number | string | undefined;\n dx?: number | string | undefined;\n dy?: number | string | undefined;\n edgeMode?: number | string | undefined;\n elevation?: number | string | undefined;\n enableBackground?: number | string | undefined;\n end?: number | string | undefined;\n exponent?: number | string | undefined;\n externalResourcesRequired?: Booleanish | undefined;\n fill?: string | undefined;\n fillOpacity?: number | string | undefined;\n fillRule?: \"nonzero\" | \"evenodd\" | \"inherit\" | undefined;\n filter?: string | undefined;\n filterRes?: number | string | undefined;\n filterUnits?: number | string | undefined;\n floodColor?: number | string | undefined;\n floodOpacity?: number | string | undefined;\n focusable?: Booleanish | \"auto\" | undefined;\n fontFamily?: string | undefined;\n fontSize?: number | string | undefined;\n fontSizeAdjust?: number | string | undefined;\n fontStretch?: number | string | undefined;\n fontStyle?: number | string | undefined;\n fontVariant?: number | string | undefined;\n fontWeight?: number | string | undefined;\n format?: number | string | undefined;\n fr?: number | string | undefined;\n from?: number | string | undefined;\n fx?: number | string | undefined;\n fy?: number | string | undefined;\n g1?: number | string | undefined;\n g2?: number | string | undefined;\n glyphName?: number | string | undefined;\n glyphOrientationHorizontal?: number | string | undefined;\n glyphOrientationVertical?: number | string | undefined;\n glyphRef?: number | string | undefined;\n gradientTransform?: string | undefined;\n gradientUnits?: string | undefined;\n hanging?: number | string | undefined;\n horizAdvX?: number | string | undefined;\n horizOriginX?: number | string | undefined;\n href?: string | undefined;\n ideographic?: number | string | undefined;\n imageRendering?: number | string | undefined;\n in2?: number | string | undefined;\n in?: string | undefined;\n intercept?: number | string | undefined;\n k1?: number | string | undefined;\n k2?: number | string | undefined;\n k3?: number | string | undefined;\n k4?: number | string | undefined;\n k?: number | string | undefined;\n kernelMatrix?: number | string | undefined;\n kernelUnitLength?: number | string | undefined;\n kerning?: number | string | undefined;\n keyPoints?: number | string | undefined;\n keySplines?: number | string | undefined;\n keyTimes?: number | string | undefined;\n lengthAdjust?: number | string | undefined;\n letterSpacing?: number | string | undefined;\n lightingColor?: number | string | undefined;\n limitingConeAngle?: number | string | undefined;\n local?: number | string | undefined;\n markerEnd?: string | undefined;\n markerHeight?: number | string | undefined;\n markerMid?: string | undefined;\n markerStart?: string | undefined;\n markerUnits?: number | string | undefined;\n markerWidth?: number | string | undefined;\n mask?: string | undefined;\n maskContentUnits?: number | string | undefined;\n maskUnits?: number | string | undefined;\n mathematical?: number | string | undefined;\n mode?: number | string | undefined;\n numOctaves?: number | string | undefined;\n offset?: number | string | undefined;\n opacity?: number | string | undefined;\n operator?: number | string | undefined;\n order?: number | string | undefined;\n orient?: number | string | undefined;\n orientation?: number | string | undefined;\n origin?: number | string | undefined;\n overflow?: number | string | undefined;\n overlinePosition?: number | string | undefined;\n overlineThickness?: number | string | undefined;\n paintOrder?: number | string | undefined;\n panose1?: number | string | undefined;\n path?: string | undefined;\n pathLength?: number | string | undefined;\n patternContentUnits?: string | undefined;\n patternTransform?: number | string | undefined;\n patternUnits?: string | undefined;\n pointerEvents?: number | string | undefined;\n points?: string | undefined;\n pointsAtX?: number | string | undefined;\n pointsAtY?: number | string | undefined;\n pointsAtZ?: number | string | undefined;\n preserveAlpha?: Booleanish | undefined;\n preserveAspectRatio?: string | undefined;\n primitiveUnits?: number | string | undefined;\n r?: number | string | undefined;\n radius?: number | string | undefined;\n refX?: number | string | undefined;\n refY?: number | string | undefined;\n renderingIntent?: number | string | undefined;\n repeatCount?: number | string | undefined;\n repeatDur?: number | string | undefined;\n requiredExtensions?: number | string | undefined;\n requiredFeatures?: number | string | undefined;\n restart?: number | string | undefined;\n result?: string | undefined;\n rotate?: number | string | undefined;\n rx?: number | string | undefined;\n ry?: number | string | undefined;\n scale?: number | string | undefined;\n seed?: number | string | undefined;\n shapeRendering?: number | string | undefined;\n slope?: number | string | undefined;\n spacing?: number | string | undefined;\n specularConstant?: number | string | undefined;\n specularExponent?: number | string | undefined;\n speed?: number | string | undefined;\n spreadMethod?: string | undefined;\n startOffset?: number | string | undefined;\n stdDeviation?: number | string | undefined;\n stemh?: number | string | undefined;\n stemv?: number | string | undefined;\n stitchTiles?: number | string | undefined;\n stopColor?: string | undefined;\n stopOpacity?: number | string | undefined;\n strikethroughPosition?: number | string | undefined;\n strikethroughThickness?: number | string | undefined;\n string?: number | string | undefined;\n stroke?: string | undefined;\n strokeDasharray?: string | number | undefined;\n strokeDashoffset?: string | number | undefined;\n strokeLinecap?: \"butt\" | \"round\" | \"square\" | \"inherit\" | undefined;\n strokeLinejoin?: \"miter\" | \"round\" | \"bevel\" | \"inherit\" | undefined;\n strokeMiterlimit?: number | string | undefined;\n strokeOpacity?: number | string | undefined;\n strokeWidth?: number | string | undefined;\n surfaceScale?: number | string | undefined;\n systemLanguage?: number | string | undefined;\n tableValues?: number | string | undefined;\n targetX?: number | string | undefined;\n targetY?: number | string | undefined;\n textAnchor?: string | undefined;\n textDecoration?: number | string | undefined;\n textLength?: number | string | undefined;\n textRendering?: number | string | undefined;\n to?: number | string | undefined;\n transform?: string | undefined;\n u1?: number | string | undefined;\n u2?: number | string | undefined;\n underlinePosition?: number | string | undefined;\n underlineThickness?: number | string | undefined;\n unicode?: number | string | undefined;\n unicodeBidi?: number | string | undefined;\n unicodeRange?: number | string | undefined;\n unitsPerEm?: number | string | undefined;\n vAlphabetic?: number | string | undefined;\n values?: string | undefined;\n vectorEffect?: number | string | undefined;\n version?: string | undefined;\n vertAdvY?: number | string | undefined;\n vertOriginX?: number | string | undefined;\n vertOriginY?: number | string | undefined;\n vHanging?: number | string | undefined;\n vIdeographic?: number | string | undefined;\n viewBox?: string | undefined;\n viewTarget?: number | string | undefined;\n visibility?: number | string | undefined;\n vMathematical?: number | string | undefined;\n widths?: number | string | undefined;\n wordSpacing?: number | string | undefined;\n writingMode?: number | string | undefined;\n x1?: number | string | undefined;\n x2?: number | string | undefined;\n x?: number | string | undefined;\n xChannelSelector?: string | undefined;\n xHeight?: number | string | undefined;\n xlinkActuate?: string | undefined;\n xlinkArcrole?: string | undefined;\n xlinkHref?: string | undefined;\n xlinkRole?: string | undefined;\n xlinkShow?: string | undefined;\n xlinkTitle?: string | undefined;\n xlinkType?: string | undefined;\n xmlBase?: string | undefined;\n xmlLang?: string | undefined;\n xmlns?: string | undefined;\n xmlnsXlink?: string | undefined;\n xmlSpace?: string | undefined;\n y1?: number | string | undefined;\n y2?: number | string | undefined;\n y?: number | string | undefined;\n yChannelSelector?: string | undefined;\n z?: number | string | undefined;\n zoomAndPan?: string | undefined;\n }\n\n interface WebViewHTMLAttributes extends HTMLAttributes {\n allowFullScreen?: boolean | undefined;\n allowpopups?: boolean | undefined;\n autoFocus?: boolean | undefined;\n autosize?: boolean | undefined;\n blinkfeatures?: string | undefined;\n disableblinkfeatures?: string | undefined;\n disableguestresize?: boolean | undefined;\n disablewebsecurity?: boolean | undefined;\n guestinstance?: string | undefined;\n httpreferrer?: string | undefined;\n nodeintegration?: boolean | undefined;\n partition?: string | undefined;\n plugins?: boolean | undefined;\n preload?: string | undefined;\n src?: string | undefined;\n useragent?: string | undefined;\n webpreferences?: string | undefined;\n }\n\n //\n // React.DOM\n // ----------------------------------------------------------------------\n\n interface ReactHTML {\n a: DetailedHTMLFactory, HTMLAnchorElement>;\n abbr: DetailedHTMLFactory, HTMLElement>;\n address: DetailedHTMLFactory, HTMLElement>;\n area: DetailedHTMLFactory, HTMLAreaElement>;\n article: DetailedHTMLFactory, HTMLElement>;\n aside: DetailedHTMLFactory, HTMLElement>;\n audio: DetailedHTMLFactory, HTMLAudioElement>;\n b: DetailedHTMLFactory, HTMLElement>;\n base: DetailedHTMLFactory, HTMLBaseElement>;\n bdi: DetailedHTMLFactory, HTMLElement>;\n bdo: DetailedHTMLFactory, HTMLElement>;\n big: DetailedHTMLFactory, HTMLElement>;\n blockquote: DetailedHTMLFactory, HTMLQuoteElement>;\n body: DetailedHTMLFactory, HTMLBodyElement>;\n br: DetailedHTMLFactory, HTMLBRElement>;\n button: DetailedHTMLFactory, HTMLButtonElement>;\n canvas: DetailedHTMLFactory, HTMLCanvasElement>;\n caption: DetailedHTMLFactory, HTMLElement>;\n cite: DetailedHTMLFactory, HTMLElement>;\n code: DetailedHTMLFactory, HTMLElement>;\n col: DetailedHTMLFactory, HTMLTableColElement>;\n colgroup: DetailedHTMLFactory, HTMLTableColElement>;\n data: DetailedHTMLFactory, HTMLDataElement>;\n datalist: DetailedHTMLFactory, HTMLDataListElement>;\n dd: DetailedHTMLFactory, HTMLElement>;\n del: DetailedHTMLFactory, HTMLModElement>;\n details: DetailedHTMLFactory, HTMLDetailsElement>;\n dfn: DetailedHTMLFactory, HTMLElement>;\n dialog: DetailedHTMLFactory, HTMLDialogElement>;\n div: DetailedHTMLFactory, HTMLDivElement>;\n dl: DetailedHTMLFactory, HTMLDListElement>;\n dt: DetailedHTMLFactory, HTMLElement>;\n em: DetailedHTMLFactory, HTMLElement>;\n embed: DetailedHTMLFactory, HTMLEmbedElement>;\n fieldset: DetailedHTMLFactory, HTMLFieldSetElement>;\n figcaption: DetailedHTMLFactory, HTMLElement>;\n figure: DetailedHTMLFactory, HTMLElement>;\n footer: DetailedHTMLFactory, HTMLElement>;\n form: DetailedHTMLFactory, HTMLFormElement>;\n h1: DetailedHTMLFactory, HTMLHeadingElement>;\n h2: DetailedHTMLFactory, HTMLHeadingElement>;\n h3: DetailedHTMLFactory, HTMLHeadingElement>;\n h4: DetailedHTMLFactory, HTMLHeadingElement>;\n h5: DetailedHTMLFactory, HTMLHeadingElement>;\n h6: DetailedHTMLFactory, HTMLHeadingElement>;\n head: DetailedHTMLFactory, HTMLHeadElement>;\n header: DetailedHTMLFactory, HTMLElement>;\n hgroup: DetailedHTMLFactory, HTMLElement>;\n hr: DetailedHTMLFactory, HTMLHRElement>;\n html: DetailedHTMLFactory, HTMLHtmlElement>;\n i: DetailedHTMLFactory, HTMLElement>;\n iframe: DetailedHTMLFactory, HTMLIFrameElement>;\n img: DetailedHTMLFactory, HTMLImageElement>;\n input: DetailedHTMLFactory, HTMLInputElement>;\n ins: DetailedHTMLFactory, HTMLModElement>;\n kbd: DetailedHTMLFactory, HTMLElement>;\n keygen: DetailedHTMLFactory, HTMLElement>;\n label: DetailedHTMLFactory, HTMLLabelElement>;\n legend: DetailedHTMLFactory, HTMLLegendElement>;\n li: DetailedHTMLFactory, HTMLLIElement>;\n link: DetailedHTMLFactory, HTMLLinkElement>;\n main: DetailedHTMLFactory, HTMLElement>;\n map: DetailedHTMLFactory, HTMLMapElement>;\n mark: DetailedHTMLFactory, HTMLElement>;\n menu: DetailedHTMLFactory, HTMLElement>;\n menuitem: DetailedHTMLFactory, HTMLElement>;\n meta: DetailedHTMLFactory, HTMLMetaElement>;\n meter: DetailedHTMLFactory, HTMLMeterElement>;\n nav: DetailedHTMLFactory, HTMLElement>;\n noscript: DetailedHTMLFactory, HTMLElement>;\n object: DetailedHTMLFactory, HTMLObjectElement>;\n ol: DetailedHTMLFactory, HTMLOListElement>;\n optgroup: DetailedHTMLFactory, HTMLOptGroupElement>;\n option: DetailedHTMLFactory, HTMLOptionElement>;\n output: DetailedHTMLFactory, HTMLOutputElement>;\n p: DetailedHTMLFactory, HTMLParagraphElement>;\n param: DetailedHTMLFactory, HTMLParamElement>;\n picture: DetailedHTMLFactory, HTMLElement>;\n pre: DetailedHTMLFactory, HTMLPreElement>;\n progress: DetailedHTMLFactory, HTMLProgressElement>;\n q: DetailedHTMLFactory, HTMLQuoteElement>;\n rp: DetailedHTMLFactory, HTMLElement>;\n rt: DetailedHTMLFactory, HTMLElement>;\n ruby: DetailedHTMLFactory, HTMLElement>;\n s: DetailedHTMLFactory, HTMLElement>;\n samp: DetailedHTMLFactory, HTMLElement>;\n slot: DetailedHTMLFactory, HTMLSlotElement>;\n script: DetailedHTMLFactory, HTMLScriptElement>;\n section: DetailedHTMLFactory, HTMLElement>;\n select: DetailedHTMLFactory, HTMLSelectElement>;\n small: DetailedHTMLFactory, HTMLElement>;\n source: DetailedHTMLFactory, HTMLSourceElement>;\n span: DetailedHTMLFactory, HTMLSpanElement>;\n strong: DetailedHTMLFactory, HTMLElement>;\n style: DetailedHTMLFactory, HTMLStyleElement>;\n sub: DetailedHTMLFactory, HTMLElement>;\n summary: DetailedHTMLFactory, HTMLElement>;\n sup: DetailedHTMLFactory, HTMLElement>;\n table: DetailedHTMLFactory, HTMLTableElement>;\n template: DetailedHTMLFactory, HTMLTemplateElement>;\n tbody: DetailedHTMLFactory, HTMLTableSectionElement>;\n td: DetailedHTMLFactory, HTMLTableDataCellElement>;\n textarea: DetailedHTMLFactory, HTMLTextAreaElement>;\n tfoot: DetailedHTMLFactory, HTMLTableSectionElement>;\n th: DetailedHTMLFactory, HTMLTableHeaderCellElement>;\n thead: DetailedHTMLFactory, HTMLTableSectionElement>;\n time: DetailedHTMLFactory, HTMLTimeElement>;\n title: DetailedHTMLFactory, HTMLTitleElement>;\n tr: DetailedHTMLFactory, HTMLTableRowElement>;\n track: DetailedHTMLFactory, HTMLTrackElement>;\n u: DetailedHTMLFactory, HTMLElement>;\n ul: DetailedHTMLFactory, HTMLUListElement>;\n \"var\": DetailedHTMLFactory, HTMLElement>;\n video: DetailedHTMLFactory, HTMLVideoElement>;\n wbr: DetailedHTMLFactory, HTMLElement>;\n webview: DetailedHTMLFactory, HTMLWebViewElement>;\n }\n\n interface ReactSVG {\n animate: SVGFactory;\n circle: SVGFactory;\n clipPath: SVGFactory;\n defs: SVGFactory;\n desc: SVGFactory;\n ellipse: SVGFactory;\n feBlend: SVGFactory;\n feColorMatrix: SVGFactory;\n feComponentTransfer: SVGFactory;\n feComposite: SVGFactory;\n feConvolveMatrix: SVGFactory;\n feDiffuseLighting: SVGFactory;\n feDisplacementMap: SVGFactory;\n feDistantLight: SVGFactory;\n feDropShadow: SVGFactory;\n feFlood: SVGFactory;\n feFuncA: SVGFactory;\n feFuncB: SVGFactory;\n feFuncG: SVGFactory;\n feFuncR: SVGFactory;\n feGaussianBlur: SVGFactory;\n feImage: SVGFactory;\n feMerge: SVGFactory;\n feMergeNode: SVGFactory;\n feMorphology: SVGFactory;\n feOffset: SVGFactory;\n fePointLight: SVGFactory;\n feSpecularLighting: SVGFactory;\n feSpotLight: SVGFactory;\n feTile: SVGFactory;\n feTurbulence: SVGFactory;\n filter: SVGFactory;\n foreignObject: SVGFactory;\n g: SVGFactory;\n image: SVGFactory;\n line: SVGFactory;\n linearGradient: SVGFactory;\n marker: SVGFactory;\n mask: SVGFactory;\n metadata: SVGFactory;\n path: SVGFactory;\n pattern: SVGFactory;\n polygon: SVGFactory;\n polyline: SVGFactory;\n radialGradient: SVGFactory;\n rect: SVGFactory;\n stop: SVGFactory;\n svg: SVGFactory;\n switch: SVGFactory;\n symbol: SVGFactory;\n text: SVGFactory;\n textPath: SVGFactory;\n tspan: SVGFactory;\n use: SVGFactory;\n view: SVGFactory;\n }\n\n interface ReactDOM extends ReactHTML, ReactSVG { }\n\n //\n // React.PropTypes\n // ----------------------------------------------------------------------\n\n type Validator = PropTypes.Validator;\n\n type Requireable = PropTypes.Requireable;\n\n type ValidationMap = PropTypes.ValidationMap;\n\n type WeakValidationMap = {\n [K in keyof T]?: null extends T[K]\n ? Validator\n : undefined extends T[K]\n ? Validator\n : Validator\n };\n\n interface ReactPropTypes {\n any: typeof PropTypes.any;\n array: typeof PropTypes.array;\n bool: typeof PropTypes.bool;\n func: typeof PropTypes.func;\n number: typeof PropTypes.number;\n object: typeof PropTypes.object;\n string: typeof PropTypes.string;\n node: typeof PropTypes.node;\n element: typeof PropTypes.element;\n instanceOf: typeof PropTypes.instanceOf;\n oneOf: typeof PropTypes.oneOf;\n oneOfType: typeof PropTypes.oneOfType;\n arrayOf: typeof PropTypes.arrayOf;\n objectOf: typeof PropTypes.objectOf;\n shape: typeof PropTypes.shape;\n exact: typeof PropTypes.exact;\n }\n\n //\n // React.Children\n // ----------------------------------------------------------------------\n\n /**\n * @deprecated - Use `typeof React.Children` instead.\n */\n // Sync with type of `const Children`.\n interface ReactChildren {\n map(children: C | ReadonlyArray, fn: (child: C, index: number) => T):\n C extends null | undefined ? C : Array>;\n forEach(children: C | ReadonlyArray, fn: (child: C, index: number) => void): void;\n count(children: any): number;\n only(children: C): C extends any[] ? never : C;\n toArray(children: ReactNode | ReactNode[]): Array>;\n }\n\n //\n // Browser Interfaces\n // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts\n // ----------------------------------------------------------------------\n\n interface AbstractView {\n styleMedia: StyleMedia;\n document: Document;\n }\n\n interface Touch {\n identifier: number;\n target: EventTarget;\n screenX: number;\n screenY: number;\n clientX: number;\n clientY: number;\n pageX: number;\n pageY: number;\n }\n\n interface TouchList {\n [index: number]: Touch;\n length: number;\n item(index: number): Touch;\n identifiedTouch(identifier: number): Touch;\n }\n\n //\n // Error Interfaces\n // ----------------------------------------------------------------------\n interface ErrorInfo {\n /**\n * Captures which component contained the exception, and its ancestors.\n */\n componentStack: string;\n }\n}\n\n// naked 'any' type in a conditional type will short circuit and union both the then/else branches\n// so boolean is only resolved for T = any\ntype IsExactlyAny = boolean extends (T extends never ? true : false) ? true : false;\n\ntype ExactlyAnyPropertyKeys = { [K in keyof T]: IsExactlyAny extends true ? K : never }[keyof T];\ntype NotExactlyAnyPropertyKeys = Exclude>;\n\n// Try to resolve ill-defined props like for JS users: props can be any, or sometimes objects with properties of type any\ntype MergePropTypes =\n // Distribute over P in case it is a union type\n P extends any\n // If props is type any, use propTypes definitions\n ? IsExactlyAny

extends true ? T :\n // If declared props have indexed properties, ignore inferred props entirely as keyof gets widened\n string extends keyof P ? P :\n // Prefer declared types which are not exactly any\n & Pick>\n // For props which are exactly any, use the type inferred from propTypes if present\n & Pick>>\n // Keep leftover props not specified in propTypes\n & Pick>\n : never;\n\ntype InexactPartial = { [K in keyof T]?: T[K] | undefined };\n\n// Any prop that has a default prop becomes optional, but its type is unchanged\n// Undeclared default props are augmented into the resulting allowable attributes\n// If declared props have indexed properties, ignore default props entirely as keyof gets widened\n// Wrap in an outer-level conditional type to allow distribution over props that are unions\ntype Defaultize = P extends any\n ? string extends keyof P ? P :\n & Pick>\n & InexactPartial>>\n & InexactPartial>>\n : never;\n\ntype ReactManagedAttributes = C extends { propTypes: infer T; defaultProps: infer D; }\n ? Defaultize>, D>\n : C extends { propTypes: infer T; }\n ? MergePropTypes>\n : C extends { defaultProps: infer D; }\n ? Defaultize\n : P;\n\ndeclare global {\n namespace JSX {\n interface Element extends React.ReactElement { }\n interface ElementClass extends React.Component {\n render(): React.ReactNode;\n }\n interface ElementAttributesProperty { props: {}; }\n interface ElementChildrenAttribute { children: {}; }\n\n // We can't recurse forever because `type` can't be self-referential;\n // let's assume it's reasonable to do a single React.lazy() around a single React.memo() / vice-versa\n type LibraryManagedAttributes = C extends React.MemoExoticComponent | React.LazyExoticComponent\n ? T extends React.MemoExoticComponent | React.LazyExoticComponent\n ? ReactManagedAttributes\n : ReactManagedAttributes\n : ReactManagedAttributes;\n\n interface IntrinsicAttributes extends React.Attributes { }\n interface IntrinsicClassAttributes extends React.ClassAttributes { }\n\n interface IntrinsicElements {\n // HTML\n a: React.DetailedHTMLProps, HTMLAnchorElement>;\n abbr: React.DetailedHTMLProps, HTMLElement>;\n address: React.DetailedHTMLProps, HTMLElement>;\n area: React.DetailedHTMLProps, HTMLAreaElement>;\n article: React.DetailedHTMLProps, HTMLElement>;\n aside: React.DetailedHTMLProps, HTMLElement>;\n audio: React.DetailedHTMLProps, HTMLAudioElement>;\n b: React.DetailedHTMLProps, HTMLElement>;\n base: React.DetailedHTMLProps, HTMLBaseElement>;\n bdi: React.DetailedHTMLProps, HTMLElement>;\n bdo: React.DetailedHTMLProps, HTMLElement>;\n big: React.DetailedHTMLProps, HTMLElement>;\n blockquote: React.DetailedHTMLProps, HTMLQuoteElement>;\n body: React.DetailedHTMLProps, HTMLBodyElement>;\n br: React.DetailedHTMLProps, HTMLBRElement>;\n button: React.DetailedHTMLProps, HTMLButtonElement>;\n canvas: React.DetailedHTMLProps, HTMLCanvasElement>;\n caption: React.DetailedHTMLProps, HTMLElement>;\n cite: React.DetailedHTMLProps, HTMLElement>;\n code: React.DetailedHTMLProps, HTMLElement>;\n col: React.DetailedHTMLProps, HTMLTableColElement>;\n colgroup: React.DetailedHTMLProps, HTMLTableColElement>;\n data: React.DetailedHTMLProps, HTMLDataElement>;\n datalist: React.DetailedHTMLProps, HTMLDataListElement>;\n dd: React.DetailedHTMLProps, HTMLElement>;\n del: React.DetailedHTMLProps, HTMLModElement>;\n details: React.DetailedHTMLProps, HTMLDetailsElement>;\n dfn: React.DetailedHTMLProps, HTMLElement>;\n dialog: React.DetailedHTMLProps, HTMLDialogElement>;\n div: React.DetailedHTMLProps, HTMLDivElement>;\n dl: React.DetailedHTMLProps, HTMLDListElement>;\n dt: React.DetailedHTMLProps, HTMLElement>;\n em: React.DetailedHTMLProps, HTMLElement>;\n embed: React.DetailedHTMLProps, HTMLEmbedElement>;\n fieldset: React.DetailedHTMLProps, HTMLFieldSetElement>;\n figcaption: React.DetailedHTMLProps, HTMLElement>;\n figure: React.DetailedHTMLProps, HTMLElement>;\n footer: React.DetailedHTMLProps, HTMLElement>;\n form: React.DetailedHTMLProps, HTMLFormElement>;\n h1: React.DetailedHTMLProps, HTMLHeadingElement>;\n h2: React.DetailedHTMLProps, HTMLHeadingElement>;\n h3: React.DetailedHTMLProps, HTMLHeadingElement>;\n h4: React.DetailedHTMLProps, HTMLHeadingElement>;\n h5: React.DetailedHTMLProps, HTMLHeadingElement>;\n h6: React.DetailedHTMLProps, HTMLHeadingElement>;\n head: React.DetailedHTMLProps, HTMLHeadElement>;\n header: React.DetailedHTMLProps, HTMLElement>;\n hgroup: React.DetailedHTMLProps, HTMLElement>;\n hr: React.DetailedHTMLProps, HTMLHRElement>;\n html: React.DetailedHTMLProps, HTMLHtmlElement>;\n i: React.DetailedHTMLProps, HTMLElement>;\n iframe: React.DetailedHTMLProps, HTMLIFrameElement>;\n img: React.DetailedHTMLProps, HTMLImageElement>;\n input: React.DetailedHTMLProps, HTMLInputElement>;\n ins: React.DetailedHTMLProps, HTMLModElement>;\n kbd: React.DetailedHTMLProps, HTMLElement>;\n keygen: React.DetailedHTMLProps, HTMLElement>;\n label: React.DetailedHTMLProps, HTMLLabelElement>;\n legend: React.DetailedHTMLProps, HTMLLegendElement>;\n li: React.DetailedHTMLProps, HTMLLIElement>;\n link: React.DetailedHTMLProps, HTMLLinkElement>;\n main: React.DetailedHTMLProps, HTMLElement>;\n map: React.DetailedHTMLProps, HTMLMapElement>;\n mark: React.DetailedHTMLProps, HTMLElement>;\n menu: React.DetailedHTMLProps, HTMLElement>;\n menuitem: React.DetailedHTMLProps, HTMLElement>;\n meta: React.DetailedHTMLProps, HTMLMetaElement>;\n meter: React.DetailedHTMLProps, HTMLMeterElement>;\n nav: React.DetailedHTMLProps, HTMLElement>;\n noindex: React.DetailedHTMLProps, HTMLElement>;\n noscript: React.DetailedHTMLProps, HTMLElement>;\n object: React.DetailedHTMLProps, HTMLObjectElement>;\n ol: React.DetailedHTMLProps, HTMLOListElement>;\n optgroup: React.DetailedHTMLProps, HTMLOptGroupElement>;\n option: React.DetailedHTMLProps, HTMLOptionElement>;\n output: React.DetailedHTMLProps, HTMLOutputElement>;\n p: React.DetailedHTMLProps, HTMLParagraphElement>;\n param: React.DetailedHTMLProps, HTMLParamElement>;\n picture: React.DetailedHTMLProps, HTMLElement>;\n pre: React.DetailedHTMLProps, HTMLPreElement>;\n progress: React.DetailedHTMLProps, HTMLProgressElement>;\n q: React.DetailedHTMLProps, HTMLQuoteElement>;\n rp: React.DetailedHTMLProps, HTMLElement>;\n rt: React.DetailedHTMLProps, HTMLElement>;\n ruby: React.DetailedHTMLProps, HTMLElement>;\n s: React.DetailedHTMLProps, HTMLElement>;\n samp: React.DetailedHTMLProps, HTMLElement>;\n slot: React.DetailedHTMLProps, HTMLSlotElement>;\n script: React.DetailedHTMLProps, HTMLScriptElement>;\n section: React.DetailedHTMLProps, HTMLElement>;\n select: React.DetailedHTMLProps, HTMLSelectElement>;\n small: React.DetailedHTMLProps, HTMLElement>;\n source: React.DetailedHTMLProps, HTMLSourceElement>;\n span: React.DetailedHTMLProps, HTMLSpanElement>;\n strong: React.DetailedHTMLProps, HTMLElement>;\n style: React.DetailedHTMLProps, HTMLStyleElement>;\n sub: React.DetailedHTMLProps, HTMLElement>;\n summary: React.DetailedHTMLProps, HTMLElement>;\n sup: React.DetailedHTMLProps, HTMLElement>;\n table: React.DetailedHTMLProps, HTMLTableElement>;\n template: React.DetailedHTMLProps, HTMLTemplateElement>;\n tbody: React.DetailedHTMLProps, HTMLTableSectionElement>;\n td: React.DetailedHTMLProps, HTMLTableDataCellElement>;\n textarea: React.DetailedHTMLProps, HTMLTextAreaElement>;\n tfoot: React.DetailedHTMLProps, HTMLTableSectionElement>;\n th: React.DetailedHTMLProps, HTMLTableHeaderCellElement>;\n thead: React.DetailedHTMLProps, HTMLTableSectionElement>;\n time: React.DetailedHTMLProps, HTMLTimeElement>;\n title: React.DetailedHTMLProps, HTMLTitleElement>;\n tr: React.DetailedHTMLProps, HTMLTableRowElement>;\n track: React.DetailedHTMLProps, HTMLTrackElement>;\n u: React.DetailedHTMLProps, HTMLElement>;\n ul: React.DetailedHTMLProps, HTMLUListElement>;\n \"var\": React.DetailedHTMLProps, HTMLElement>;\n video: React.DetailedHTMLProps, HTMLVideoElement>;\n wbr: React.DetailedHTMLProps, HTMLElement>;\n webview: React.DetailedHTMLProps, HTMLWebViewElement>;\n\n // SVG\n svg: React.SVGProps;\n\n animate: React.SVGProps; // TODO: It is SVGAnimateElement but is not in TypeScript's lib.dom.d.ts for now.\n animateMotion: React.SVGProps;\n animateTransform: React.SVGProps; // TODO: It is SVGAnimateTransformElement but is not in TypeScript's lib.dom.d.ts for now.\n circle: React.SVGProps;\n clipPath: React.SVGProps;\n defs: React.SVGProps;\n desc: React.SVGProps;\n ellipse: React.SVGProps;\n feBlend: React.SVGProps;\n feColorMatrix: React.SVGProps;\n feComponentTransfer: React.SVGProps;\n feComposite: React.SVGProps;\n feConvolveMatrix: React.SVGProps;\n feDiffuseLighting: React.SVGProps;\n feDisplacementMap: React.SVGProps;\n feDistantLight: React.SVGProps;\n feDropShadow: React.SVGProps;\n feFlood: React.SVGProps;\n feFuncA: React.SVGProps;\n feFuncB: React.SVGProps;\n feFuncG: React.SVGProps;\n feFuncR: React.SVGProps;\n feGaussianBlur: React.SVGProps;\n feImage: React.SVGProps;\n feMerge: React.SVGProps;\n feMergeNode: React.SVGProps;\n feMorphology: React.SVGProps;\n feOffset: React.SVGProps;\n fePointLight: React.SVGProps;\n feSpecularLighting: React.SVGProps;\n feSpotLight: React.SVGProps;\n feTile: React.SVGProps;\n feTurbulence: React.SVGProps;\n filter: React.SVGProps;\n foreignObject: React.SVGProps;\n g: React.SVGProps;\n image: React.SVGProps;\n line: React.SVGProps;\n linearGradient: React.SVGProps;\n marker: React.SVGProps;\n mask: React.SVGProps;\n metadata: React.SVGProps;\n mpath: React.SVGProps;\n path: React.SVGProps;\n pattern: React.SVGProps;\n polygon: React.SVGProps;\n polyline: React.SVGProps;\n radialGradient: React.SVGProps;\n rect: React.SVGProps;\n stop: React.SVGProps;\n switch: React.SVGProps;\n symbol: React.SVGProps;\n text: React.SVGProps;\n textPath: React.SVGProps;\n tspan: React.SVGProps;\n use: React.SVGProps;\n view: React.SVGProps;\n }\n }\n}\n" + } + }, + "/node_modules/@types/react/jsx-dev-runtime.d.ts": { + "module": { + "code": "// Expose `JSX` namespace in `global` namespace\nimport './';\n" + } + }, + "/node_modules/@types/react/jsx-runtime.d.ts": { + "module": { + "code": "// Expose `JSX` namespace in `global` namespace\nimport './';\n" + } + }, + "/node_modules/@types/react/next.d.ts": { + "module": { + "code": "/**\n * These are types for things that are present in the React `next` release channel.\n *\n * To load the types declared here in an actual project, there are three ways. The easiest one,\n * if your `tsconfig.json` already has a `\"types\"` array in the `\"compilerOptions\"` section,\n * is to add `\"react/next\"` to the `\"types\"` array.\n *\n * Alternatively, a specific import syntax can to be used from a typescript file.\n * This module does not exist in reality, which is why the {} is important:\n *\n * ```ts\n * import {} from 'react/next'\n * ```\n *\n * It is also possible to include it through a triple-slash reference:\n *\n * ```ts\n * /// \n * ```\n *\n * Either the import or the reference only needs to appear once, anywhere in the project.\n */\n\n// See https://github.com/facebook/react/blob/main/packages/react/src/React.js to see how the exports are declared,\n\nimport React = require('.');\n\nexport {};\n\ndeclare module '.' {}\n" + } + }, + "/node_modules/@types/react/package.json": { + "module": { + "code": "{\n \"name\": \"@types/react\",\n \"version\": \"18.0.9\",\n \"description\": \"TypeScript definitions for React\",\n \"homepage\": \"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react\",\n \"license\": \"MIT\",\n \"contributors\": [\n {\n \"name\": \"Asana\",\n \"url\": \"https://asana.com\"\n },\n {\n \"name\": \"AssureSign\",\n \"url\": \"http://www.assuresign.com\"\n },\n {\n \"name\": \"Microsoft\",\n \"url\": \"https://microsoft.com\"\n },\n {\n \"name\": \"John Reilly\",\n \"url\": \"https://github.com/johnnyreilly\",\n \"githubUsername\": \"johnnyreilly\"\n },\n {\n \"name\": \"Benoit Benezech\",\n \"url\": \"https://github.com/bbenezech\",\n \"githubUsername\": \"bbenezech\"\n },\n {\n \"name\": \"Patricio Zavolinsky\",\n \"url\": \"https://github.com/pzavolinsky\",\n \"githubUsername\": \"pzavolinsky\"\n },\n {\n \"name\": \"Eric Anderson\",\n \"url\": \"https://github.com/ericanderson\",\n \"githubUsername\": \"ericanderson\"\n },\n {\n \"name\": \"Dovydas Navickas\",\n \"url\": \"https://github.com/DovydasNavickas\",\n \"githubUsername\": \"DovydasNavickas\"\n },\n {\n \"name\": \"Josh Rutherford\",\n \"url\": \"https://github.com/theruther4d\",\n \"githubUsername\": \"theruther4d\"\n },\n {\n \"name\": \"Guilherme Hübner\",\n \"url\": \"https://github.com/guilhermehubner\",\n \"githubUsername\": \"guilhermehubner\"\n },\n {\n \"name\": \"Ferdy Budhidharma\",\n \"url\": \"https://github.com/ferdaber\",\n \"githubUsername\": \"ferdaber\"\n },\n {\n \"name\": \"Johann Rakotoharisoa\",\n \"url\": \"https://github.com/jrakotoharisoa\",\n \"githubUsername\": \"jrakotoharisoa\"\n },\n {\n \"name\": \"Olivier Pascal\",\n \"url\": \"https://github.com/pascaloliv\",\n \"githubUsername\": \"pascaloliv\"\n },\n {\n \"name\": \"Martin Hochel\",\n \"url\": \"https://github.com/hotell\",\n \"githubUsername\": \"hotell\"\n },\n {\n \"name\": \"Frank Li\",\n \"url\": \"https://github.com/franklixuefei\",\n \"githubUsername\": \"franklixuefei\"\n },\n {\n \"name\": \"Jessica Franco\",\n \"url\": \"https://github.com/Jessidhia\",\n \"githubUsername\": \"Jessidhia\"\n },\n {\n \"name\": \"Saransh Kataria\",\n \"url\": \"https://github.com/saranshkataria\",\n \"githubUsername\": \"saranshkataria\"\n },\n {\n \"name\": \"Kanitkorn Sujautra\",\n \"url\": \"https://github.com/lukyth\",\n \"githubUsername\": \"lukyth\"\n },\n {\n \"name\": \"Sebastian Silbermann\",\n \"url\": \"https://github.com/eps1lon\",\n \"githubUsername\": \"eps1lon\"\n },\n {\n \"name\": \"Kyle Scully\",\n \"url\": \"https://github.com/zieka\",\n \"githubUsername\": \"zieka\"\n },\n {\n \"name\": \"Cong Zhang\",\n \"url\": \"https://github.com/dancerphil\",\n \"githubUsername\": \"dancerphil\"\n },\n {\n \"name\": \"Dimitri Mitropoulos\",\n \"url\": \"https://github.com/dimitropoulos\",\n \"githubUsername\": \"dimitropoulos\"\n },\n {\n \"name\": \"JongChan Choi\",\n \"url\": \"https://github.com/disjukr\",\n \"githubUsername\": \"disjukr\"\n },\n {\n \"name\": \"Victor Magalhães\",\n \"url\": \"https://github.com/vhfmag\",\n \"githubUsername\": \"vhfmag\"\n },\n {\n \"name\": \"Dale Tan\",\n \"url\": \"https://github.com/hellatan\",\n \"githubUsername\": \"hellatan\"\n },\n {\n \"name\": \"Priyanshu Rav\",\n \"url\": \"https://github.com/priyanshurav\",\n \"githubUsername\": \"priyanshurav\"\n }\n ],\n \"main\": \"\",\n \"types\": \"index.d.ts\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/DefinitelyTyped/DefinitelyTyped.git\",\n \"directory\": \"types/react\"\n },\n \"scripts\": {},\n \"dependencies\": {\n \"@types/prop-types\": \"*\",\n \"@types/scheduler\": \"*\",\n \"csstype\": \"^3.0.2\"\n },\n \"typesPublisherContentHash\": \"5a1553fa1391041fef92ca64fd86edbc8291f251eb9ca9b57bc425f8f41c13fc\",\n \"typeScriptVersion\": \"3.9\",\n \"exports\": {\n \".\": {\n \"types\": {\n \"default\": \"./index.d.ts\"\n }\n },\n \"./next\": {\n \"types\": {\n \"default\": \"./next.d.ts\"\n }\n },\n \"./experimental\": {\n \"types\": {\n \"default\": \"./experimental.d.ts\"\n }\n },\n \"./jsx-runtime\": {\n \"types\": {\n \"default\": \"./jsx-runtime.d.ts\"\n }\n },\n \"./jsx-dev-runtime\": {\n \"types\": {\n \"default\": \"./jsx-dev-runtime.d.ts\"\n }\n },\n \"./package.json\": \"./package.json\"\n }\n}" + } + }, + "/node_modules/@types/scheduler/index.d.ts": { + "module": { + "code": "// Type definitions for scheduler 0.16\n// Project: https://reactjs.org/\n// Definitions by: Nathan Bierema \n// Sebastian Silbermann \n// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped\n// TypeScript Version: 2.8\n\nexport type FrameCallbackType = () => FrameCallbackType | void;\nexport interface CallbackNode {\n callback: FrameCallbackType;\n priorityLevel: number;\n expirationTime: number;\n next: CallbackNode | null;\n prev: CallbackNode | null;\n}\n\nexport const unstable_ImmediatePriority = 1;\nexport const unstable_UserBlockingPriority = 2;\nexport const unstable_NormalPriority = 3;\nexport const unstable_IdlePriority = 5;\nexport const unstable_LowPriority = 4;\nexport function unstable_runWithPriority(priorityLevel: number, eventHandler: () => T): T;\nexport function unstable_scheduleCallback(priorityLevel: number, callback: FrameCallbackType, options?: { delay?: number | undefined, timeout?: number | undefined}): CallbackNode;\nexport function unstable_next(eventHandler: () => T): T;\nexport function unstable_cancelCallback(callbackNode: CallbackNode): void;\nexport function unstable_wrapCallback(callback: FrameCallbackType): () => FrameCallbackType;\nexport function unstable_getCurrentPriorityLevel(): number;\nexport function unstable_shouldYield(): boolean;\nexport function unstable_continueExecution(): void;\nexport function unstable_pauseExecution(): void;\nexport function unstable_getFirstCallbackNode(): CallbackNode | null;\nexport function unstable_now(): number;\n" + } + }, + "/node_modules/@types/scheduler/package.json": { + "module": { + "code": "{\n \"name\": \"@types/scheduler\",\n \"version\": \"0.16.2\",\n \"description\": \"TypeScript definitions for scheduler\",\n \"homepage\": \"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/scheduler\",\n \"license\": \"MIT\",\n \"contributors\": [\n {\n \"name\": \"Nathan Bierema\",\n \"url\": \"https://github.com/Methuselah96\",\n \"githubUsername\": \"Methuselah96\"\n },\n {\n \"name\": \"Sebastian Silbermann\",\n \"url\": \"https://github.com/eps1lon\",\n \"githubUsername\": \"eps1lon\"\n }\n ],\n \"main\": \"\",\n \"types\": \"index.d.ts\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/DefinitelyTyped/DefinitelyTyped.git\",\n \"directory\": \"types/scheduler\"\n },\n \"scripts\": {},\n \"dependencies\": {},\n \"typesPublisherContentHash\": \"122d740959245799b89613cc799b1a2e3274d1ee1db6c9abd7b6e4dadc0696ec\",\n \"typeScriptVersion\": \"3.6\"\n}" + } + }, + "/node_modules/@types/scheduler/tracing.d.ts": { + "module": { + "code": "// disable automatic export\nexport {};\n/**\n * This type is only interesting if you're only using this module for a specifc build environment.\n *\n * With module augmentation you can declare what build of scheduler you are using by\n * augmenting this interface with e.g. `interface Build { type: 'development'; }`\n * Depending on the build some exported members have different types.\n * Possible values are `production`, `profiling` and `development`.\n * The default behavior for the types is to use a union of all possible types.\n */\n// tslint:disable-next-line: no-empty-interface\nexport interface Build {}\n\nexport type EnableSchedulerTracing = Build extends { type: infer BuildType }\n ? BuildType extends \"production\" | \"profiling\"\n ? false\n : BuildType extends \"development\"\n ? true\n : undefined\n : undefined;\n\ntype TypeByBuildFlag<\n Flag extends boolean | undefined,\n WhenTrue,\n WhenFalse\n> = Flag extends undefined\n ? (WhenTrue | WhenFalse)\n : Flag extends true\n ? WhenTrue\n : WhenFalse;\n\ntype IfSchedulerTracing = TypeByBuildFlag<\n EnableSchedulerTracing,\n WhenTrue,\n WhenFalse\n>;\n\nexport interface Interaction {\n __count: number;\n id: number;\n name: string;\n timestamp: number;\n}\n\nexport interface Subscriber {\n /**\n * A new interaction has been created via the trace() method.\n */\n onInteractionTraced: (interaction: Interaction) => void;\n\n /**\n * All scheduled async work for an interaction has finished.\n */\n onInteractionScheduledWorkCompleted: (interaction: Interaction) => void;\n\n /**\n * New async work has been scheduled for a set of interactions.\n * When this work is later run, onWorkStarted/onWorkStopped will be called.\n * A batch of async/yieldy work may be scheduled multiple times before completing.\n * In that case, onWorkScheduled may be called more than once before onWorkStopped.\n * Work is scheduled by a \"thread\" which is identified by a unique ID.\n */\n onWorkScheduled: (interactions: Set, threadID: number) => void;\n\n /**\n * A batch of scheduled work has been canceled.\n * Work is done by a \"thread\" which is identified by a unique ID.\n */\n onWorkCanceled: (interactions: Set, threadID: number) => void;\n\n /**\n * A batch of work has started for a set of interactions.\n * When this work is complete, onWorkStopped will be called.\n * Work is not always completed synchronously; yielding may occur in between.\n * A batch of async/yieldy work may also be re-started before completing.\n * In that case, onWorkStarted may be called more than once before onWorkStopped.\n * Work is done by a \"thread\" which is identified by a unique ID.\n */\n onWorkStarted: (interactions: Set, threadID: number) => void;\n\n /**\n * A batch of work has completed for a set of interactions.\n * Work is done by a \"thread\" which is identified by a unique ID.\n */\n onWorkStopped: (interactions: Set, threadID: number) => void;\n}\n\nexport interface InteractionsRef {\n current: Set;\n}\n\nexport interface SubscriberRef {\n current: Subscriber | null;\n}\n\nexport const __interactionsRef: IfSchedulerTracing;\nexport const __subscriberRef: IfSchedulerTracing;\n\nexport function unstable_clear(callback: () => T): T;\n\nexport function unstable_getCurrent(): Set | null;\n\nexport function unstable_getThreadID(): number;\n\nexport function unstable_trace(\n name: string,\n timestamp: number,\n callback: () => T,\n threadID?: number\n): T;\n\nexport type WrappedFunction any> = T & {\n cancel: () => void;\n};\n\n/**\n * The callback is immediately returned if the enableSchedulerTracing is disabled.\n * It is unclear for which bundles this is the case.\n *\n * @param callback\n * @param threadID\n */\nexport function unstable_wrap any>(\n callback: T,\n threadID?: number\n): IfSchedulerTracing, T>;\n\nexport function unstable_subscribe(subscriber: Subscriber): void;\n\nexport function unstable_unsubscribe(subscriber: Subscriber): void;\n" + } + }, + "/node_modules/csstype/index.d.ts": { + "module": { + "code": "export {};\n\nexport type PropertyValue = TValue extends Array\n ? Array\n : TValue extends infer TUnpacked & {}\n ? TUnpacked\n : TValue;\n\nexport type Fallback = { [P in keyof T]: T[P] | NonNullable[] };\n\nexport interface StandardLonghandProperties {\n /**\n * The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements.\n *\n * **Syntax**: `auto | `\n *\n * **Initial value**: `auto`\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :----: | :-----: | :------: | :----: | :-: |\n * | **93** | **92** | **15.4** | **93** | No |\n *\n * @see https://developer.mozilla.org/docs/Web/CSS/accent-color\n */\n accentColor?: Property.AccentColor | undefined;\n /**\n * The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.\n *\n * **Syntax**: `normal | | | ? `\n *\n * **Initial value**: `normal`\n *\n * ---\n *\n * _Supported in Flex Layout_\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :------: | :-----: | :-----: | :----: | :----: |\n * | **29** | **28** | **9** | **12** | **11** |\n * | 21 _-x-_ | | 7 _-x-_ | | |\n *\n * ---\n *\n * _Supported in Grid Layout_\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :----: | :-----: | :------: | :----: | :-: |\n * | **57** | **52** | **10.1** | **16** | No |\n *\n * ---\n *\n * @see https://developer.mozilla.org/docs/Web/CSS/align-content\n */\n alignContent?: Property.AlignContent | undefined;\n /**\n * The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.\n *\n * **Syntax**: `normal | stretch | | [ ? ]`\n *\n * **Initial value**: `normal`\n *\n * ---\n *\n * _Supported in Flex Layout_\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :------: | :-----: | :-----: | :----: | :----: |\n * | **52** | **20** | **9** | **12** | **11** |\n * | 21 _-x-_ | | 7 _-x-_ | | |\n *\n * ---\n *\n * _Supported in Grid Layout_\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :----: | :-----: | :------: | :----: | :-: |\n * | **57** | **52** | **10.1** | **16** | No |\n *\n * ---\n *\n * @see https://developer.mozilla.org/docs/Web/CSS/align-items\n */\n alignItems?: Property.AlignItems | undefined;\n /**\n * The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.\n *\n * **Syntax**: `auto | normal | stretch | | ? `\n *\n * **Initial value**: `auto`\n *\n * ---\n *\n * _Supported in Flex Layout_\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :------: | :-----: | :-----: | :----: | :----: |\n * | **36** | **20** | **9** | **12** | **11** |\n * | 21 _-x-_ | | 7 _-x-_ | | |\n *\n * ---\n *\n * _Supported in Grid Layout_\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :----: | :-----: | :------: | :----: | :----------: |\n * | **57** | **52** | **10.1** | **16** | **10** _-x-_ |\n *\n * ---\n *\n * @see https://developer.mozilla.org/docs/Web/CSS/align-self\n */\n alignSelf?: Property.AlignSelf | undefined;\n /**\n * The **`align-tracks`** CSS property sets the alignment in the masonry axis for grid containers that have masonry in their block axis.\n *\n * **Syntax**: `[ normal | | | ? ]#`\n *\n * **Initial value**: `normal`\n *\n * | Chrome | Firefox | Safari | Edge | IE |\n * | :----: | :-----: | :----: | :--: | :-: |\n * | No | n/a | No | No | No |\n *\n * @see https://developer.mozilla.org/docs/Web/CSS/align-tracks\n */\n alignTracks?: Property.AlignTracks | undefined;\n /**\n * The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.\n *\n * **Syntax**: `