update to react 18

We were stuck on react 16.x for a long time but dependencies seem to
have caught up enough that migration is trivial now.

.github/dependabot.yml

@@ -8,7 +8,4 @@ updates:
   ignore:
   - dependency-name: "@types/node"
     versions:
-    - ">= 13.a"
-  - dependency-name: "@types/react"
-    versions:
-    - ">= 17.a"
+    - ">= 19.a"

package.json

@@ -25,13 +25,13 @@
         "@svgr/webpack": "^8.0.1",
         "@testing-library/dom": "^9.3.0",
         "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/react": "^12.1.5",
+        "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^14.4.3",
         "@types/file-saver": "^2.0.5",
         "@types/jest": "^29.5.1",
         "@types/node": "^16.11.7",
-        "@types/react": "^16.14.34",
-        "@types/react-dom": "^16.9.17",
+        "@types/react": "^18.2.6",
+        "@types/react-dom": "^18.2.4",
         "@types/react-splitter-layout": "^3.0.2",
         "@types/redux-logger": "^3.0.9",
         "@types/semver": "^7.5.0",
@@ -87,12 +87,12 @@
         "prompts": "^2.4.2",
         "prop-types": "^15.8.1",
         "pyodide": "0.23.2",
-        "react": "^16.14.0",
+        "react": "^18.2.0",
         "react-app-polyfill": "^3.0.0",
         "react-aria": "^3.24.0",
         "react-complex-tree": "^2.1.4",
         "react-dev-utils": "^12.0.1",
-        "react-dom": "^16.14.0",
+        "react-dom": "^18.2.0",
         "react-dropzone": "^14.2.3",
         "react-joyride": "^2.5.4",
         "react-popper": "^2.3.0",

src/about/AboutDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2022 The Pybricks Authors
+// Copyright (c) 2021-2023 The Pybricks Authors
 
 // The about dialog
 
@@ -24,7 +24,7 @@ import './about.scss';
 
 type AboutDialogProps = { isOpen: boolean; onClose: () => void };
 
-const AboutDialog: React.VoidFunctionComponent<AboutDialogProps> = ({
+const AboutDialog: React.FunctionComponent<AboutDialogProps> = ({
     isOpen,
     onClose,
 }) => {

src/activities/Activities.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './activities.scss';
 import { Icon, Tab, Tabs } from '@blueprintjs/core';
@@ -12,7 +12,7 @@ import { useI18n } from './i18n';
 /**
  * React component that acts as a tab control to select activities.
  */
-const Activities: React.VoidFunctionComponent = () => {
+const Activities: React.FunctionComponent = () => {
     const [selectedActivity, setSelectedActivity] = useActivitiesSelectedActivity();
     const i18n = useI18n();
 

src/alerts/UnexpectedErrorAlert.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './UnexpectedErrorAlert.scss';
 import {
@@ -19,7 +19,7 @@ type UnexpectedErrorAlertProps = {
     error: Error;
 };
 
-const UnexpectedErrorAlert: React.VoidFunctionComponent<UnexpectedErrorAlertProps> = ({
+const UnexpectedErrorAlert: React.FunctionComponent<UnexpectedErrorAlertProps> = ({
     error,
 }) => {
     const i18n = useI18n();

src/app/App.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2023 The Pybricks Authors
 
 import 'react-splitter-layout/lib/index.css';
 import './app.scss';
@@ -46,7 +46,7 @@ const Terminal = React.lazy(async () => {
     return componentModule;
 });
 
-const Docs: React.VFC = () => {
+const Docs: React.FunctionComponent = () => {
     const { setIsSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();
     const { initialDocsPage, setLastDocsPage } = useAppLastDocsPageSetting();
 
@@ -153,7 +153,7 @@ const Docs: React.VFC = () => {
     );
 };
 
-const App: React.VFC = () => {
+const App: React.FunctionComponent = () => {
     const i18n = useI18n();
     const { isDarkMode } = useTernaryDarkMode();
     const { isSettingShowDocsEnabled } = useSettingIsShowDocsEnabled();

src/app/alerts/UpdateServerFailure.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const UpdateServerFailure: React.VoidFunctionComponent = () => {
+const UpdateServerFailure: React.FunctionComponent = () => {
     const i18n = useI18n();
     return <p>{i18n.translate('updateServerFailure.message')}</p>;
 };

src/ble/alerts/BluetoothNotAvailable.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const BluetoothNotAvailable: React.VoidFunctionComponent = () => {
+const BluetoothNotAvailable: React.FunctionComponent = () => {
     const i18n = useI18n();
     return (
         <>

src/ble/alerts/Disconnected.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const Disconnected: React.VoidFunctionComponent = () => {
+const Disconnected: React.FunctionComponent = () => {
     const i18n = useI18n();
     return <p>{i18n.translate('disconnected.message')}</p>;
 };

src/ble/alerts/MissingService.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
@@ -11,7 +11,7 @@ type MissingServiceProps = {
     hubName: string;
 };
 
-const MissingService: React.VoidFunctionComponent<MissingServiceProps> = ({
+const MissingService: React.FunctionComponent<MissingServiceProps> = ({
     serviceName,
     hubName,
 }) => {

src/ble/alerts/NewPybricksProfile.tsx

@@ -14,7 +14,7 @@ type NewPybricksProfileProps = {
     supportedVersion: string;
 };
 
-const NewPybricksProfile: React.VoidFunctionComponent<NewPybricksProfileProps> = ({
+const NewPybricksProfile: React.FunctionComponent<NewPybricksProfileProps> = ({
     hubVersion,
     supportedVersion,
 }) => {

src/ble/alerts/NoGatt.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const NoGatt: React.VoidFunctionComponent = () => {
+const NoGatt: React.FunctionComponent = () => {
     const i18n = useI18n();
     return <p>{i18n.translate('noGatt.message')}</p>;
 };

src/ble/alerts/NoHub.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './index.scss';
 import { AnchorButton, Button, Intent } from '@blueprintjs/core';
@@ -13,7 +13,7 @@ type NoHubProps = {
     onFlashFirmware: () => void;
 };
 
-const NoHub: React.VoidFunctionComponent<NoHubProps> = ({ onFlashFirmware }) => {
+const NoHub: React.FunctionComponent<NoHubProps> = ({ onFlashFirmware }) => {
     const i18n = useI18n();
 
     return (

src/ble/alerts/NoWebBluetooth.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Button, Code, Intent } from '@blueprintjs/core';
 import React from 'react';
@@ -7,7 +7,7 @@ import type { CreateToast } from '../../toasterTypes';
 import { isIOS, isLinux } from '../../utils/os';
 import { useI18n } from './i18n';
 
-const NoWebBluetooth: React.VoidFunctionComponent = () => {
+const NoWebBluetooth: React.FunctionComponent = () => {
     const i18n = useI18n();
     return (
         <>

src/ble/alerts/OldFirmware.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './index.scss';
 import { Button, Intent } from '@blueprintjs/core';
@@ -11,7 +11,7 @@ type OldFirmwareProps = {
     onFlashFirmware: () => void;
 };
 
-const OldFirmware: React.VoidFunctionComponent<OldFirmwareProps> = ({
+const OldFirmware: React.FunctionComponent<OldFirmwareProps> = ({
     onFlashFirmware,
 }) => {
     const i18n = useI18n();

src/components/Button.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Classes, Icon, IconName, IconSize, Spinner } from '@blueprintjs/core';
 import { mergeRefs, useId } from '@react-aria/utils';
@@ -29,7 +29,7 @@ type ButtonProps = {
 };
 
 /** Similar to Blueprint.js button with better accessibility. */
-export const Button: React.VoidFunctionComponent<ButtonProps> = ({
+export const Button: React.FunctionComponent<ButtonProps> = ({
     id,
     label,
     hideLabel,

src/components/ClipboardIcon.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2022 The Pybricks Authors
+// Copyright (c) 2021-2023 The Pybricks Authors
 
 // Icon for indicating external links
 
@@ -8,7 +8,7 @@ import React from 'react';
 
 import './clipboard.scss';
 
-const ClipboardIcon: React.VFC = (_props) => {
+const ClipboardIcon: React.FunctionComponent = () => {
     return (
         <span className="pb-clipboard">
             &nbsp;

src/components/ExternalLinkIcon.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021 The Pybricks Authors
+// Copyright (c) 2021-2023 The Pybricks Authors
 
 // Icon for indicating external links
 
@@ -8,7 +8,7 @@ import React from 'react';
 
 import './external-link.scss';
 
-const ExternalLinkIcon: React.VFC = (_props) => {
+const ExternalLinkIcon: React.FunctionComponent = () => {
     return (
         <span className="pb-external-link">
             &nbsp;

src/components/HelpButton.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Classes } from '@blueprintjs/core';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -16,7 +16,7 @@ type HelpButtonProps = {
     content: React.ReactNode;
 };
 
-const HelpButton: React.VoidFunctionComponent<HelpButtonProps> = ({
+const HelpButton: React.FunctionComponent<HelpButtonProps> = ({
     helpForLabel,
     content,
 }) => {

src/components/HelpDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './HelpDialog.scss';
 import { Classes } from '@blueprintjs/core';
@@ -9,7 +9,7 @@ import {
     Popover2Arrow,
 } from '@blueprintjs/popover2/lib/cjs/popover2Arrow';
 import classNames from 'classnames';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useMemo, useRef, useState } from 'react';
 import {
     DismissButton,
     FocusScope,
@@ -36,7 +36,7 @@ type HelpDialogProps = {
 };
 
 /** React component for showing help as a dialog. */
-const HelpDialog: React.FunctionComponent<HelpDialogProps> = ({
+const HelpDialog: React.FunctionComponent<PropsWithChildren<HelpDialogProps>> = ({
     title,
     isOpen,
     openButton,

src/components/hubPicker/HubPicker.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './hubPicker.scss';
 import { Radio, RadioGroup } from '@blueprintjs/core';
@@ -12,7 +12,7 @@ type HubIconProps = {
     label: string;
 };
 
-const HubIcon: React.VoidFunctionComponent<HubIconProps> = ({ url, label }) => {
+const HubIcon: React.FunctionComponent<HubIconProps> = ({ url, label }) => {
     return <img src={url.toString()} width={64} height={64} title={label} />;
 };
 
@@ -20,9 +20,7 @@ type HubPickerProps = {
     disabled?: boolean;
 };
 
-export const HubPicker: React.VoidFunctionComponent<HubPickerProps> = ({
-    disabled,
-}) => {
+export const HubPicker: React.FunctionComponent<HubPickerProps> = ({ disabled }) => {
     const [selectedHub, setSelectedHub] = useHubPickerSelectedHub();
 
     return (

src/components/toolbar/Toolbar.test.tsx

@@ -11,7 +11,7 @@ afterEach(() => {
     cleanup();
 });
 
-const TestToolbar: React.VoidFunctionComponent = () => {
+const TestToolbar: React.FunctionComponent = () => {
     return (
         <Toolbar
             className="test-class"

src/components/toolbar/Toolbar.tsx

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { FocusScope } from 'react-aria';
 import { useToolbar } from './aria';
 import { ToolbarStateContext, useToolbarState } from './state';
@@ -22,7 +22,9 @@ type ToolbarProps = Pick<
  *
  * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role
  */
-export const Toolbar: React.FunctionComponent<ToolbarProps> = (props) => {
+export const Toolbar: React.FunctionComponent<PropsWithChildren<ToolbarProps>> = (
+    props,
+) => {
     const { className, children } = props;
     const state = useToolbarState(props);
     const { toolbarProps } = useToolbar(props);

src/editor/Editor.tsx

@@ -87,9 +87,14 @@ type EditorContextMenuItemProps = Readonly<{
     editorAction: string;
 }>;
 
-const EditorContextMenuItem: React.VoidFunctionComponent<
-    EditorContextMenuItemProps
-> = ({ label, icon, keyboardShortcut, disabled, editor, editorAction }) => {
+const EditorContextMenuItem: React.FunctionComponent<EditorContextMenuItemProps> = ({
+    label,
+    icon,
+    keyboardShortcut,
+    disabled,
+    editor,
+    editorAction,
+}) => {
     const labelId = useId();
 
     return (
@@ -114,7 +119,7 @@ type EditorContextMenuProps = {
     editor: monaco.editor.IStandaloneCodeEditor | undefined;
 };
 
-const EditorContextMenu: React.VoidFunctionComponent<EditorContextMenuProps> = ({
+const EditorContextMenu: React.FunctionComponent<EditorContextMenuProps> = ({
     editor,
 }) => {
     const i18n = useI18n();
@@ -181,7 +186,7 @@ type FileNameProps = {
     onNameChanged: () => void;
 };
 
-const TabLabel: React.VoidFunctionComponent<FileNameProps> = ({
+const TabLabel: React.FunctionComponent<FileNameProps> = ({
     id,
     uuid,
     onNameChanged,
@@ -204,7 +209,7 @@ type TabCloseButtonProps = {
     uuid: UUID;
 };
 
-const TabCloseButton: React.VoidFunctionComponent<TabCloseButtonProps> = ({ uuid }) => {
+const TabCloseButton: React.FunctionComponent<TabCloseButtonProps> = ({ uuid }) => {
     const fileName = useFileStoragePath(uuid) ?? '';
     const dispatch = useDispatch();
     const i18n = useI18n();
@@ -235,7 +240,7 @@ type EditorTabsProps = Readonly<{
     onChange?: () => void;
 }>;
 
-const EditorTabs: React.VoidFunctionComponent<EditorTabsProps> = ({ onChange }) => {
+const EditorTabs: React.FunctionComponent<EditorTabsProps> = ({ onChange }) => {
     const openFiles = useSelector((s) => s.editor.openFileUuids);
     const activeFile = useSelector((s) => s.editor.activeFileUuid);
     const dispatch = useDispatch();
@@ -369,7 +374,7 @@ function useEditorAction(
     );
 }
 
-const Editor: React.VFC = () => {
+const Editor: React.FunctionComponent = () => {
     const dispatch = useDispatch();
 
     const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor>();

src/editor/Welcome.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 // welcome screen that is shown when no editor is open.
 
@@ -60,7 +60,7 @@ type WelcomeProps = {
     isVisible: boolean;
 };
 
-const Welcome: React.VoidFunctionComponent<WelcomeProps> = ({ isVisible }) => {
+const Welcome: React.FunctionComponent<WelcomeProps> = ({ isVisible }) => {
     const stateRef = useRef<State>({
         rotation: defaultRotation,
         rotationSpeed: 0,

src/explorer/Explorer.tsx

@@ -71,7 +71,7 @@ type ActionButtonProps = {
     onClick: () => void;
 };
 
-const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
+const ActionButton: React.FunctionComponent<ActionButtonProps> = ({
     id,
     icon,
     tooltip,
@@ -109,7 +109,7 @@ type ActionButtonGroupProps = {
     item: TreeItem;
 };
 
-const FileActionButtonGroup: React.VoidFunctionComponent<ActionButtonGroupProps> = ({
+const FileActionButtonGroup: React.FunctionComponent<ActionButtonGroupProps> = ({
     item,
 }) => {
     const i18n = useI18n();
@@ -174,7 +174,7 @@ const FileActionButtonGroup: React.VoidFunctionComponent<ActionButtonGroupProps>
 const archiveButtonId = 'pb-explorer-archive-button';
 const newButtonId = 'pb-explorer-add-button';
 
-const Header: React.VoidFunctionComponent = () => {
+const Header: React.FunctionComponent = () => {
     const exportButtonId = useId();
     const dispatch = useDispatch();
     const i18n = useI18n();
@@ -263,7 +263,7 @@ function useLiveDescriptors(): LiveDescriptors {
  * REVISIT: maybe there will be a better way to do this some day:
  * https://github.com/lukasbach/react-complex-tree/issues/47
  */
-const TreeContainer: React.VoidFunctionComponent<RenderProps<'renderTreeContainer'>> = (
+const TreeContainer: React.FunctionComponent<RenderProps<'renderTreeContainer'>> = (
     props,
 ) => {
     const dispatch = useDispatch();
@@ -352,7 +352,7 @@ const TreeContainer: React.VoidFunctionComponent<RenderProps<'renderTreeContaine
     return <div onKeyDown={handleKeyDown}>{renderers.renderTreeContainer(props)}</div>;
 };
 
-const FileTree: React.VoidFunctionComponent = () => {
+const FileTree: React.FunctionComponent = () => {
     const [focusedItem, setFocusedItem] = useState<TreeItemIndex>();
     const files = useFileStorageMetadata();
     const liveDescriptors = useLiveDescriptors();
@@ -447,7 +447,7 @@ const FileTree: React.VoidFunctionComponent = () => {
     );
 };
 
-const Explorer: React.VFC = () => {
+const Explorer: React.FunctionComponent = () => {
     return (
         <div className="pb-explorer">
             <Header />

src/explorer/alerts/FileInUseAlert.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
@@ -10,9 +10,7 @@ type FileInUseAlertProps = {
     fileName: string;
 };
 
-const FileInUseAlert: React.VoidFunctionComponent<FileInUseAlertProps> = ({
-    fileName,
-}) => {
+const FileInUseAlert: React.FunctionComponent<FileInUseAlertProps> = ({ fileName }) => {
     const i18n = useI18n();
     return <>{i18n.translate('fileInUse.message', { fileName })}</>;
 };

src/explorer/alerts/NoFilesToBackup.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Icon, Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const NoFilesToBackup: React.VoidFunctionComponent = () => {
+const NoFilesToBackup: React.FunctionComponent = () => {
     const i18n = useI18n();
     return (
         <>

src/explorer/alerts/NoPyFiles.tsx

@@ -7,7 +7,7 @@ import { pythonFileExtension } from '../../pybricksMicropython/lib';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const NoPyFiles: React.VoidFunctionComponent = () => {
+const NoPyFiles: React.FunctionComponent = () => {
     const i18n = useI18n();
     return (
         <>

src/explorer/deleteFileAlert/DeleteFileAlert.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Alert, Classes, Intent } from '@blueprintjs/core';
 import React, { useCallback } from 'react';
@@ -8,7 +8,7 @@ import { useSelector } from '../../reducers';
 import { deleteFileAlertDidAccept, deleteFileAlertDidCancel } from './actions';
 import { useI18n } from './i18n';
 
-const DeleteFileAlert: React.VoidFunctionComponent = () => {
+const DeleteFileAlert: React.FunctionComponent = () => {
     const { isOpen, fileName } = useSelector((s) => s.explorer.deleteFileAlert);
     const dispatch = useDispatch();
     const i18n = useI18n();

src/explorer/duplicateFileDialog/DuplicateFileDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Button, Classes, Dialog } from '@blueprintjs/core';
 import React, { useCallback, useRef, useState } from 'react';
@@ -14,7 +14,7 @@ import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
 import { duplicateFileDialogDidAccept, duplicateFileDialogDidCancel } from './actions';
 import { useI18n } from './i18n';
 
-const DuplicateFileDialog: React.VFC = () => {
+const DuplicateFileDialog: React.FunctionComponent = () => {
     const i18n = useI18n();
     const dispatch = useDispatch();
     const isOpen = useSelector((s) => s.explorer.duplicateFileDialog.isOpen);

src/explorer/fileNameFormGroup/FileNameFormGroup.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Classes, Code, FormGroup, InputGroup, Intent, Tag } from '@blueprintjs/core';
 import type { AriaButtonProps } from '@react-types/button';
@@ -39,7 +39,7 @@ function replaceInvalidCharacters(value: string): string {
 
 type FixItButtonProps = Pick<AriaButtonProps<'a'>, 'onPress'>;
 
-const FixItButton: React.VoidFunctionComponent<FixItButtonProps> = (props) => {
+const FixItButton: React.FunctionComponent<FixItButtonProps> = (props) => {
     const i18n = useI18n();
     const ref = useRef<HTMLAnchorElement>(null);
 
@@ -66,7 +66,7 @@ type FileNameHelpTextProps = {
 /**
  * Component that maps FileNameValidationResult to help message to display to user.
  */
-const FileNameHelpText: React.VoidFunctionComponent<FileNameHelpTextProps> = ({
+const FileNameHelpText: React.FunctionComponent<FileNameHelpTextProps> = ({
     fileName,
     validation,
     onFix,
@@ -145,7 +145,7 @@ type FileNameFormGroupProps = {
 /**
  * Component used to get a valid new file name.
  */
-const FileNameFormGroup: React.VoidFunctionComponent<FileNameFormGroupProps> = ({
+const FileNameFormGroup: React.FunctionComponent<FileNameFormGroupProps> = ({
     fileName,
     fileExtension,
     validationResult,

src/explorer/newFileWizard/NewFileWizard.tsx

@@ -27,7 +27,7 @@ import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
 import { newFileWizardDidAccept, newFileWizardDidCancel } from './actions';
 import { useI18n } from './i18n';
 
-const NewFileWizard: React.VoidFunctionComponent = () => {
+const NewFileWizard: React.FunctionComponent = () => {
     const i18n = useI18n();
     const dispatch = useDispatch();
 

src/explorer/renameFileDialog/RenameFileDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Button, Classes, Dialog } from '@blueprintjs/core';
 import React, { useCallback, useRef, useState } from 'react';
@@ -14,7 +14,7 @@ import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
 import { renameFileDialogDidAccept, renameFileDialogDidCancel } from './actions';
 import { useI18n } from './i18n';
 
-const RenameFileDialog: React.VFC = () => {
+const RenameFileDialog: React.FunctionComponent = () => {
     const i18n = useI18n();
     const dispatch = useDispatch();
     const isOpen = useSelector((s) => s.explorer.renameFileDialog.isOpen);

src/explorer/renameImportDialog/RenameImportDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Button, Classes, Dialog } from '@blueprintjs/core';
 import React, { useCallback, useRef, useState } from 'react';
@@ -15,7 +15,7 @@ import FileNameFormGroup from '../fileNameFormGroup/FileNameFormGroup';
 import { renameImportDialogDidAccept, renameImportDialogDidCancel } from './actions';
 import { useI18n } from './i18n';
 
-const RenameImportDialog: React.VFC = () => {
+const RenameImportDialog: React.FunctionComponent = () => {
     const i18n = useI18n();
     const dispatch = useDispatch();
     const isOpen = useSelector((s) => s.explorer.renameImportDialog.isOpen);

src/explorer/replaceImportDialog/ReplaceImportDialog.tsx

@@ -13,7 +13,7 @@ import {
 } from './actions';
 import { useI18n } from './i18n';
 
-const RenameImportDialog: React.VFC = () => {
+const RenameImportDialog: React.FunctionComponent = () => {
     const i18n = useI18n();
     const dispatch = useDispatch();
     const isOpen = useSelector((s) => s.explorer.replaceImportDialog.isOpen);

src/firmware/alerts/DfuError.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Button, Intent } from '@blueprintjs/core';
 import React from 'react';
@@ -10,7 +10,7 @@ type DfuErrorProps = {
     onTryAgain: () => void;
 };
 
-const DfuError: React.VoidFunctionComponent<DfuErrorProps> = ({ onTryAgain }) => {
+const DfuError: React.FunctionComponent<DfuErrorProps> = ({ onTryAgain }) => {
     const i18n = useI18n();
     return (
         <>

src/firmware/alerts/FlashProgress.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent, ProgressBar } from '@blueprintjs/core';
 import React from 'react';
@@ -11,7 +11,7 @@ type FlashProgressProps = {
     progress: number | undefined;
 };
 
-const FlashProgress: React.VoidFunctionComponent<FlashProgressProps> = ({
+const FlashProgress: React.FunctionComponent<FlashProgressProps> = ({
     action,
     progress,
 }) => {

src/firmware/alerts/NoDfuHub.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { AnchorButton, Button, Intent } from '@blueprintjs/core';
 import React from 'react';
@@ -16,7 +16,7 @@ type NoDfuHubProps = {
     onInstallWindowsDriver: () => void;
 };
 
-const NoDfuHub: React.VoidFunctionComponent<NoDfuHubProps> = ({
+const NoDfuHub: React.FunctionComponent<NoDfuHubProps> = ({
     onInstallWindowsDriver,
 }) => {
     const i18n = useI18n();

src/firmware/alerts/NoDfuInterface.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const NoDfuInterface: React.VoidFunctionComponent = () => {
+const NoDfuInterface: React.FunctionComponent = () => {
     const i18n = useI18n();
     return <p>{i18n.translate('noDfuInterface.message')}</p>;
 };

src/firmware/alerts/NoWebUsb.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const NoWebUsb: React.VoidFunctionComponent = () => {
+const NoWebUsb: React.FunctionComponent = () => {
     const i18n = useI18n();
     return (
         <>

src/firmware/alerts/ReleaseButton.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const ReleaseButton: React.VoidFunctionComponent = () => {
+const ReleaseButton: React.FunctionComponent = () => {
     const i18n = useI18n();
     return <p>{i18n.translate('releaseButton.message')}</p>;
 };

src/firmware/bootloaderInstructions/BootloaderInstructions.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './bootloaderInstructions.scss';
 import { Callout, Intent } from '@blueprintjs/core';
@@ -105,9 +105,11 @@ function countValidChildren(children: React.ReactNode) {
  * Provides customized instructions on how to enter bootloader mode based
  * on the hub type.
  */
-const BootloaderInstructions: React.VoidFunctionComponent<
-    BootloaderInstructionsProps
-> = ({ hubType, recovery, flashButtonText }) => {
+const BootloaderInstructions: React.FunctionComponent<BootloaderInstructionsProps> = ({
+    hubType,
+    recovery,
+    flashButtonText,
+}) => {
     const dispatch = useDispatch();
     const i18n = useI18n();
 

src/firmware/dfuWindowsDriverInstallDialog/DfuWindowsDriverInstallDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import './dfuWindowsDriverInstallDialog.scss';
 import {
@@ -90,7 +90,7 @@ type ScreenshotProps = {
     url: URL;
 };
 
-const Screenshot: React.VoidFunctionComponent<ScreenshotProps> = ({ url }) => {
+const Screenshot: React.FunctionComponent<ScreenshotProps> = ({ url }) => {
     return (
         <Card elevation={Elevation.FOUR}>
             <img src={url.toString()} alt="Screenshot" width={673} height={523} />
@@ -102,7 +102,7 @@ type HubTypeProps = {
     hub: Hub;
 };
 
-const Step1: React.VoidFunctionComponent = () => {
+const Step1: React.FunctionComponent = () => {
     const i18n = useI18n();
 
     return (
@@ -123,7 +123,7 @@ const Step1: React.VoidFunctionComponent = () => {
     );
 };
 
-const Step2: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
+const Step2: React.FunctionComponent<HubTypeProps> = ({ hub }) => {
     const i18n = useI18n();
 
     return (
@@ -164,7 +164,7 @@ const Step2: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
     );
 };
 
-const Step3: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
+const Step3: React.FunctionComponent<HubTypeProps> = ({ hub }) => {
     const i18n = useI18n();
 
     return (
@@ -201,7 +201,7 @@ const Step3: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
     );
 };
 
-const Step4: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
+const Step4: React.FunctionComponent<HubTypeProps> = ({ hub }) => {
     const i18n = useI18n();
 
     return (
@@ -228,7 +228,7 @@ const Step4: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
     );
 };
 
-const Step5: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
+const Step5: React.FunctionComponent<HubTypeProps> = ({ hub }) => {
     const i18n = useI18n();
 
     return (
@@ -252,7 +252,7 @@ const Step5: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
     );
 };
 
-const Step6: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
+const Step6: React.FunctionComponent<HubTypeProps> = ({ hub }) => {
     const i18n = useI18n();
 
     return (
@@ -277,7 +277,7 @@ const Step6: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
     );
 };
 
-const Step7: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
+const Step7: React.FunctionComponent<HubTypeProps> = ({ hub }) => {
     const i18n = useI18n();
 
     return (
@@ -304,7 +304,7 @@ const Step7: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
     );
 };
 
-const Step8: React.VoidFunctionComponent = () => {
+const Step8: React.FunctionComponent = () => {
     const i18n = useI18n();
 
     return (
@@ -322,7 +322,7 @@ const Step8: React.VoidFunctionComponent = () => {
     );
 };
 
-const Step9: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
+const Step9: React.FunctionComponent<HubTypeProps> = ({ hub }) => {
     const i18n = useI18n();
 
     return (
@@ -346,7 +346,7 @@ const Step9: React.VoidFunctionComponent<HubTypeProps> = ({ hub }) => {
     );
 };
 
-const DfuWindowsDriverInstallDialog: React.VoidFunctionComponent = () => {
+const DfuWindowsDriverInstallDialog: React.FunctionComponent = () => {
     const [hub] = useHubPickerSelectedHub();
     const { isOpen } = useSelector((s) => s.firmware.dfuWindowsDriverInstallDialog);
     const dispatch = useDispatch();

src/firmware/installPybricksDialog/InstallPybricksDialog.tsx

@@ -93,7 +93,7 @@ function getHubTypeNameFromMetadata(metadata: FirmwareMetadata | undefined): str
     }
 }
 
-const UnsupportedHubs: React.VoidFunctionComponent = () => {
+const UnsupportedHubs: React.FunctionComponent = () => {
     const i18n = useI18n();
 
     return (
@@ -180,7 +180,7 @@ type SelectHubPanelProps = {
     onCustomFirmwareZip: (firmwareZip: File | undefined) => void;
 };
 
-const SelectHubPanel: React.VoidFunctionComponent<SelectHubPanelProps> = ({
+const SelectHubPanel: React.FunctionComponent<SelectHubPanelProps> = ({
     isCustomFirmwareRequested,
     customFirmwareData,
     onCustomFirmwareZip,
@@ -335,7 +335,7 @@ type AcceptLicensePanelProps = {
     onLicenseAcceptedChanged: (accepted: boolean) => void;
 };
 
-const AcceptLicensePanel: React.VoidFunctionComponent<AcceptLicensePanelProps> = ({
+const AcceptLicensePanel: React.FunctionComponent<AcceptLicensePanelProps> = ({
     licenseAccepted,
     firmwareData,
     firmwareError,
@@ -386,7 +386,7 @@ type SelectOptionsPanelProps = {
     onChangeHubName(hubName: string): void;
 };
 
-const ConfigureOptionsPanel: React.VoidFunctionComponent<SelectOptionsPanelProps> = ({
+const ConfigureOptionsPanel: React.FunctionComponent<SelectOptionsPanelProps> = ({
     hubName,
     metadata,
     onChangeHubName,
@@ -432,7 +432,7 @@ type BootloaderModePanelProps = {
     hubType: Hub;
 };
 
-const BootloaderModePanel: React.VoidFunctionComponent<BootloaderModePanelProps> = ({
+const BootloaderModePanel: React.FunctionComponent<BootloaderModePanelProps> = ({
     hubType,
 }) => {
     const i18n = useI18n();
@@ -447,7 +447,7 @@ const BootloaderModePanel: React.VoidFunctionComponent<BootloaderModePanelProps>
     );
 };
 
-export const InstallPybricksDialog: React.VoidFunctionComponent = () => {
+export const InstallPybricksDialog: React.FunctionComponent = () => {
     const { isOpen } = useSelector((s) => s.firmware.installPybricksDialog);
     const dispatch = useDispatch();
     const [hubName, setHubName] = useState('');

src/firmware/restoreOfficialDialog/RestoreOfficialDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import {
     Button,
@@ -25,7 +25,7 @@ import BootloaderInstructions from '../bootloaderInstructions/BootloaderInstruct
 import { firmwareRestoreOfficialDialogHide } from './actions';
 import { useI18n } from './i18n';
 
-const SelectHubPanel: React.VoidFunctionComponent = () => {
+const SelectHubPanel: React.FunctionComponent = () => {
     const i18n = useI18n();
 
     return (
@@ -42,7 +42,7 @@ const SelectHubPanel: React.VoidFunctionComponent = () => {
     );
 };
 
-const RestoreFirmwarePanel: React.VoidFunctionComponent = () => {
+const RestoreFirmwarePanel: React.FunctionComponent = () => {
     const [hubType] = useHubPickerSelectedHub();
     const dispatch = useDispatch();
     const i18n = useI18n();
@@ -84,7 +84,7 @@ const RestoreFirmwarePanel: React.VoidFunctionComponent = () => {
     );
 };
 
-const RestoreOfficialDialog: React.VoidFunctionComponent = () => {
+const RestoreOfficialDialog: React.FunctionComponent = () => {
     const { isOpen } = useSelector((s) => s.firmware.restoreOfficialDialog);
     const dispatch = useDispatch();
     const i18n = useI18n();

src/hub/alerts/UserProgramSize.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
@@ -13,7 +13,7 @@ type UserProgramSizeProps = {
     max: number;
 };
 
-const UserProgramSize: React.VoidFunctionComponent<UserProgramSizeProps> = ({
+const UserProgramSize: React.FunctionComponent<UserProgramSizeProps> = ({
     actual,
     max,
 }) => {

src/licenses/LicenseDialog.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2022 The Pybricks Authors
+// Copyright (c) 2021-2023 The Pybricks Authors
 
 // The license dialog
 
@@ -44,7 +44,7 @@ type ListItemProps = {
  *
  * Style uses blueprints tree styles since there is no list style.
  */
-const ListItem: React.VoidFunctionComponent<ListItemProps> = ({ item, state }) => {
+const ListItem: React.FunctionComponent<ListItemProps> = ({ item, state }) => {
     const ref = React.useRef<HTMLLIElement>(null);
     const { optionProps, isSelected } = useOption({ key: item.key }, state, ref);
 
@@ -105,7 +105,7 @@ type ListBoxProps = ListProps<LicenseInfo>;
  *
  * Style uses blueprints tree styles since there is no list style.
  */
-const ListBox: React.VoidFunctionComponent<ListBoxProps> = (props) => {
+const ListBox: React.FunctionComponent<ListBoxProps> = (props) => {
     // Create state based on the incoming props
     const state = useListState(props);
 
@@ -133,7 +133,7 @@ type LicenseListPanelProps = {
     onItemSelected(info?: LicenseInfo): void;
 };
 
-const LicenseListPanel: React.VoidFunctionComponent<LicenseListPanelProps> = ({
+const LicenseListPanel: React.FunctionComponent<LicenseListPanelProps> = ({
     onItemSelected,
 }) => {
     const i18n = useI18n();
@@ -228,7 +228,7 @@ type LicenseDialogProps = {
     onClose(): void;
 };
 
-const LicenseDialog: React.VoidFunctionComponent<LicenseDialogProps> = ({
+const LicenseDialog: React.FunctionComponent<LicenseDialogProps> = ({
     isOpen,
     onClose,
 }) => {

src/mpy/alerts/CompilerError.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Button, Intent } from '@blueprintjs/core';
 import React, { useMemo } from 'react';
@@ -13,7 +13,7 @@ type CompilerErrorProps = {
     error: string[];
 };
 
-const CompilerError: React.VoidFunctionComponent<CompilerErrorProps> = ({ error }) => {
+const CompilerError: React.FunctionComponent<CompilerErrorProps> = ({ error }) => {
     const dispatch = useDispatch();
     const i18n = useI18n();
 

src/notifications/NotificationAction.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2022 The Pybricks Authors
+// Copyright (c) 2021-2023 The Pybricks Authors
 
 // provides translation for notification text
 
@@ -12,7 +12,7 @@ type NotificationActionProps = {
     replacements?: Replacements;
 };
 
-const NotificationAction: React.VoidFunctionComponent<NotificationActionProps> = ({
+const NotificationAction: React.FunctionComponent<NotificationActionProps> = ({
     messageId,
     replacements,
 }) => {

src/notifications/NotificationMessage.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2022 The Pybricks Authors
+// Copyright (c) 2021-2023 The Pybricks Authors
 
 // provides translation for notification text
 
@@ -12,7 +12,7 @@ type NotificationMessageProps = {
     replacements?: Replacements;
 };
 
-const NotificationMessage: React.VoidFunctionComponent<NotificationMessageProps> = ({
+const NotificationMessage: React.FunctionComponent<NotificationMessageProps> = ({
     messageId,
     replacements,
 }) => {

src/settings/Settings.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2021-2022 The Pybricks Authors
+// Copyright (c) 2021-2023 The Pybricks Authors
 
 import {
     AnchorButton,
@@ -32,7 +32,7 @@ import { isMacOS } from '../utils/os';
 import { useI18n } from './i18n';
 import './settings.scss';
 
-const Settings: React.VoidFunctionComponent = () => {
+const Settings: React.FunctionComponent = () => {
     const [isAboutDialogOpen, setIsAboutDialogOpen] = useState(false);
     const { isDarkMode, setTernaryDarkMode } = useTernaryDarkMode();
 

src/sponsor/SponsorDialog.tsx

@@ -18,7 +18,7 @@ import ethIcon from './eth_logo.svg';
 import { useI18n } from './i18n';
 import paypalIcon from './paypal_logo.svg';
 
-const SponsorDialog: React.VoidFunctionComponent = () => {
+const SponsorDialog: React.FunctionComponent = () => {
     const { showDialog } = useSelector((s) => s.sponsor);
     const dispatch = useDispatch();
     const i18n = useI18n();

src/sponsor/alerts/AddressCopied.tsx

@@ -1,12 +1,12 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Intent } from '@blueprintjs/core';
 import React from 'react';
 import type { CreateToast } from '../../toasterTypes';
 import { useI18n } from './i18n';
 
-const AddressCopied: React.VoidFunctionComponent = () => {
+const AddressCopied: React.FunctionComponent = () => {
     const i18n = useI18n();
     return <p>{i18n.translate('addressCopied.message')}</p>;
 };

src/status-bar/StatusBar.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2023 The Pybricks Authors
 
 import {
     Button,
@@ -25,7 +25,7 @@ const commonPopoverProps: Partial<Popover2Props> = {
     placement: 'top',
 };
 
-const CompletionEngineIndicator: React.VoidFunctionComponent = () => {
+const CompletionEngineIndicator: React.FunctionComponent = () => {
     const { status } = useSelector((s) => s.editor.codeCompletion);
     const i18n = useI18n();
 
@@ -69,7 +69,7 @@ const CompletionEngineIndicator: React.VoidFunctionComponent = () => {
     );
 };
 
-const HubInfoButton: React.VoidFunctionComponent = () => {
+const HubInfoButton: React.FunctionComponent = () => {
     const i18n = useI18n();
     const deviceName = useSelector((s) => s.ble.deviceName);
     const deviceType = useSelector((s) => s.ble.deviceType);
@@ -110,7 +110,7 @@ const HubInfoButton: React.VoidFunctionComponent = () => {
     );
 };
 
-const BatteryIndicator: React.VoidFunctionComponent = () => {
+const BatteryIndicator: React.FunctionComponent = () => {
     const i18n = useI18n();
     const charging = useSelector((s) => s.ble.deviceBatteryCharging);
     const lowBatteryWarning = useSelector((s) => s.ble.deviceLowBatteryWarning);
@@ -142,7 +142,7 @@ const BatteryIndicator: React.VoidFunctionComponent = () => {
     );
 };
 
-const StatusBar: React.VFC = (_props) => {
+const StatusBar: React.FunctionComponent = () => {
     const connection = useSelector((s) => s.ble.connection);
 
     return (

src/terminal/Terminal.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2023 The Pybricks Authors
 
 import 'xterm/css/xterm.css';
 import './terminal.scss';
@@ -102,7 +102,7 @@ function createContextMenu(
     return ContextMenu;
 }
 
-const Terminal: React.FC = (_props) => {
+const Terminal: React.FunctionComponent = () => {
     const { xterm, fitAddon } = useMemo(createXTerm, [createXTerm]);
     const terminalRef = useRef<HTMLDivElement>(null);
     const { isDarkMode } = useTernaryDarkMode();

src/toolbar/ActionButton.tsx

@@ -39,7 +39,7 @@ export interface ActionButtonProps {
     readonly onAction: () => void;
 }
 
-const ActionButton: React.VoidFunctionComponent<ActionButtonProps> = ({
+const ActionButton: React.FunctionComponent<ActionButtonProps> = ({
     id,
     label,
     keyboardShortcut,

src/toolbar/Toolbar.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2023 The Pybricks Authors
 
 import { ButtonGroup } from '@blueprintjs/core';
 import React from 'react';
@@ -19,7 +19,7 @@ const bluetoothButtonId = 'pb-toolbar-bluetooth-button';
 const runButtonId = 'pb-toolbar-run-button';
 const sponsorButtonId = 'pb-toolbar-sponsor-button';
 
-const Toolbar: React.VFC = () => {
+const Toolbar: React.FunctionComponent = () => {
     const i18n = useI18n();
     const stopButtonId = useId();
     const replButtonId = useId();

src/toolbar/buttons/bluetooth/BluetoothButton.tsx

@@ -14,7 +14,7 @@ import { useI18n } from './i18n';
 
 type BluetoothButtonProps = Pick<ActionButtonProps, 'id'>;
 
-const BluetoothButton: React.VoidFunctionComponent<BluetoothButtonProps> = ({ id }) => {
+const BluetoothButton: React.FunctionComponent<BluetoothButtonProps> = ({ id }) => {
     const bootloaderConnection = useSelector((s) => s.bootloader.connection);
     const bleConnection = useSelector((s) => s.ble.connection);
 

src/toolbar/buttons/repl/ReplButton.tsx

@@ -13,7 +13,7 @@ import icon from './icon.svg';
 
 type ReplButtonProps = Pick<ActionButtonProps, 'id'>;
 
-const ReplButton: React.VoidFunctionComponent<ReplButtonProps> = ({ id }) => {
+const ReplButton: React.FunctionComponent<ReplButtonProps> = ({ id }) => {
     const { runtime, useLegacyDownload, hasRepl } = useSelector((s) => s.hub);
     const i18n = useI18n();
     const dispatch = useDispatch();

src/toolbar/buttons/run/RunButton.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2023 The Pybricks Authors
 
 import React from 'react';
 import { useDispatch } from 'react-redux';
@@ -12,7 +12,7 @@ import icon from './icon.svg';
 
 type RunButtonProps = Pick<ActionButtonProps, 'id'>;
 
-const RunButton: React.VoidFunctionComponent<RunButtonProps> = ({ id }) => {
+const RunButton: React.FunctionComponent<RunButtonProps> = ({ id }) => {
     const { downloadProgress, preferredFileFormat, runtime, useLegacyDownload } =
         useSelector((s) => s.hub);
     const activeFile = useSelector((s) => s.editor.activeFileUuid);

src/toolbar/buttons/sponsor/SponsorButton.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2022 The Pybricks Authors
+// Copyright (c) 2020-2023 The Pybricks Authors
 
 import React from 'react';
 import { useDispatch } from 'react-redux';
@@ -10,7 +10,7 @@ import icon from './icon.svg';
 
 type SponsorButtonProps = Pick<ActionButtonProps, 'id'>;
 
-const SponsorButton: React.VoidFunctionComponent<SponsorButtonProps> = ({ id }) => {
+const SponsorButton: React.FunctionComponent<SponsorButtonProps> = ({ id }) => {
     const i18n = useI18n();
     const dispatch = useDispatch();
 

src/toolbar/buttons/stop/StopButton.tsx

@@ -13,7 +13,7 @@ import icon from './icon.svg';
 
 type StopButtonProps = Pick<ActionButtonProps, 'id'>;
 
-const StopButton: React.VoidFunctionComponent<StopButtonProps> = ({ id }) => {
+const StopButton: React.FunctionComponent<StopButtonProps> = ({ id }) => {
     const runtime = useSelector((s) => s.hub.runtime);
     const keyboardShortcut = 'F6';
 

src/tour/Tour.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 import { Colors, Icon } from '@blueprintjs/core';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -107,7 +107,7 @@ const DownloadAndRunStep = React.memo(function DownloadAndRunStep() {
     );
 });
 
-const Tour: React.VoidFunctionComponent = () => {
+const Tour: React.FunctionComponent = () => {
     const [selectedActivity, setSelectedActivity] = useActivitiesSelectedActivity();
     const [showOnStartup, setShowOnStartup] = useLocalStorage(
         'tour.showOnStartup',

src/utils/tree-renderer.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 /***/
 // react-complex-tree renderers for bluetprintjs integration
@@ -49,7 +49,7 @@ export type RenderProps<T extends keyof RendererFuncs> = Parameters<
     RendererFuncs[T]
 >[0];
 
-const TreeContainer: React.VoidFunctionComponent<RenderProps<'renderTreeContainer'>> = (
+const TreeContainer: React.FunctionComponent<RenderProps<'renderTreeContainer'>> = (
     props,
 ) => {
     return (
@@ -62,9 +62,9 @@ const TreeContainer: React.VoidFunctionComponent<RenderProps<'renderTreeContaine
     );
 };
 
-const ItemsContainer: React.VoidFunctionComponent<
-    RenderProps<'renderTreeContainer'>
-> = (props) => (
+const ItemsContainer: React.FunctionComponent<RenderProps<'renderTreeContainer'>> = (
+    props,
+) => (
     <ul
         className={cx(Classes.TREE_NODE_LIST, Classes.TREE_ROOT)}
         {...props.containerProps}
@@ -76,7 +76,7 @@ const ItemsContainer: React.VoidFunctionComponent<
     </ul>
 );
 
-const Item: React.VoidFunctionComponent<RenderProps<'renderItem'>> = (props) => {
+const Item: React.FunctionComponent<RenderProps<'renderItem'>> = (props) => {
     const {
         value: isHover,
         setTrue: setIsHoverTrue,
@@ -129,9 +129,7 @@ const Item: React.VoidFunctionComponent<RenderProps<'renderItem'>> = (props) =>
     );
 };
 
-const ItemArrow: React.VoidFunctionComponent<RenderProps<'renderItemArrow'>> = (
-    props,
-) => (
+const ItemArrow: React.FunctionComponent<RenderProps<'renderItemArrow'>> = (props) => (
     <Icon
         icon="chevron-right"
         className={cx(
@@ -147,7 +145,7 @@ const ItemArrow: React.VoidFunctionComponent<RenderProps<'renderItemArrow'>> = (
     />
 );
 
-const ItemTitle: React.VoidFunctionComponent<RenderProps<'renderItemTitle'>> = ({
+const ItemTitle: React.FunctionComponent<RenderProps<'renderItemTitle'>> = ({
     title,
     context,
     info,
@@ -172,7 +170,7 @@ const ItemTitle: React.VoidFunctionComponent<RenderProps<'renderItemTitle'>> = (
     }
 };
 
-const DragBetweenLine: React.VoidFunctionComponent<
+const DragBetweenLine: React.FunctionComponent<
     RenderProps<'renderDragBetweenLine'>
 > = ({ draggingPosition, lineProps }) => (
     <div
@@ -195,7 +193,7 @@ const DragBetweenLine: React.VoidFunctionComponent<
     />
 );
 
-const RenameInput: React.VoidFunctionComponent<RenderProps<'renderRenameInput'>> = (
+const RenameInput: React.FunctionComponent<RenderProps<'renderRenameInput'>> = (
     props,
 ) => (
     <form {...props.formProps} style={{ display: 'contents' }}>
@@ -218,7 +216,7 @@ const RenameInput: React.VoidFunctionComponent<RenderProps<'renderRenameInput'>>
     </form>
 );
 
-const SearchInput: React.VoidFunctionComponent<RenderProps<'renderSearchInput'>> = (
+const SearchInput: React.FunctionComponent<RenderProps<'renderSearchInput'>> = (
     props,
 ) => {
     const { ref, defaultValue, value, ...inputProps } = props.inputProps;

yarn.lock

@@ -2644,13 +2644,13 @@ __metadata:
     "@svgr/webpack": ^8.0.1
     "@testing-library/dom": ^9.3.0
     "@testing-library/jest-dom": ^5.16.5
-    "@testing-library/react": ^12.1.5
+    "@testing-library/react": ^14.0.0
     "@testing-library/user-event": ^14.4.3
     "@types/file-saver": ^2.0.5
     "@types/jest": ^29.5.1
     "@types/node": ^16.11.7
-    "@types/react": ^16.14.34
-    "@types/react-dom": ^16.9.17
+    "@types/react": ^18.2.6
+    "@types/react-dom": ^18.2.4
     "@types/react-splitter-layout": ^3.0.2
     "@types/redux-logger": ^3.0.9
     "@types/semver": ^7.5.0
@@ -2719,12 +2719,12 @@ __metadata:
     prompts: ^2.4.2
     prop-types: ^15.8.1
     pyodide: 0.23.2
-    react: ^16.14.0
+    react: ^18.2.0
     react-app-polyfill: ^3.0.0
     react-aria: ^3.24.0
     react-complex-tree: ^2.1.4
     react-dev-utils: ^12.0.1
-    react-dom: ^16.14.0
+    react-dom: ^18.2.0
     react-dropzone: ^14.2.3
     react-joyride: ^2.5.4
     react-popper: ^2.3.0
@@ -4547,23 +4547,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^8.0.0":
-  version: 8.20.0
-  resolution: "@testing-library/dom@npm:8.20.0"
-  dependencies:
-    "@babel/code-frame": ^7.10.4
-    "@babel/runtime": ^7.12.5
-    "@types/aria-query": ^5.0.1
-    aria-query: ^5.0.0
-    chalk: ^4.1.0
-    dom-accessibility-api: ^0.5.9
-    lz-string: ^1.4.4
-    pretty-format: ^27.0.2
-  checksum: 1e599129a2fe91959ce80900a0a4897232b89e2a8e22c1f5950c36d39c97629ea86b4986b60b173b5525a05de33fde1e35836ea597b03de78cc51b122835c6f0
-  languageName: node
-  linkType: hard
-
-"@testing-library/dom@npm:^9.3.0":
+"@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.0":
   version: 9.3.0
   resolution: "@testing-library/dom@npm:9.3.0"
   dependencies:
@@ -4596,17 +4580,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:^12.1.5":
-  version: 12.1.5
-  resolution: "@testing-library/react@npm:12.1.5"
+"@testing-library/react@npm:^14.0.0":
+  version: 14.0.0
+  resolution: "@testing-library/react@npm:14.0.0"
   dependencies:
     "@babel/runtime": ^7.12.5
-    "@testing-library/dom": ^8.0.0
-    "@types/react-dom": <18.0.0
+    "@testing-library/dom": ^9.0.0
+    "@types/react-dom": ^18.0.0
   peerDependencies:
-    react: <18.0.0
-    react-dom: <18.0.0
-  checksum: 4abd0490405e709a7df584a0db604e508a4612398bb1326e8fa32dd9393b15badc826dcf6d2f7525437886d507871f719f127b9860ed69ddd204d1fa834f576a
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: 4a54c8f56cc4a39b50803205f84f06280bb76521d6d5d4b3b36651d760c7c7752ef142d857d52aaf4fad4848ed7a8be49afc793a5dda105955d2f8bef24901ac
   languageName: node
   linkType: hard
 
@@ -4941,21 +4925,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:<18.0.0":
-  version: 17.0.17
-  resolution: "@types/react-dom@npm:17.0.17"
+"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.2.4":
+  version: 18.2.4
+  resolution: "@types/react-dom@npm:18.2.4"
   dependencies:
-    "@types/react": ^17
-  checksum: 23caf98aa03e968811560f92a2c8f451694253ebe16b670929b24eaf0e7fa62ba549abe9db0ac028a9d8a9086acd6ab9c6c773f163fa21224845edbc00ba6232
-  languageName: node
-  linkType: hard
-
-"@types/react-dom@npm:^16.9.17":
-  version: 16.9.17
-  resolution: "@types/react-dom@npm:16.9.17"
-  dependencies:
-    "@types/react": ^16
-  checksum: c9246eb4d35993463608de61111f2bdae5afbd22556c8b9918081516b67eafd1a9ef141c3ed459dd4c753dd7ea037b6a375a856e677c2586396c23732772831d
+    "@types/react": "*"
+  checksum: 8301f35cf1cbfec8c723e9477aecf87774e3c168bd457d353b23c45064737213d3e8008b067c6767b7b08e4f2b3823ee239242a6c225fc91e7f8725ef8734124
   languageName: node
   linkType: hard
 
@@ -4968,25 +4943,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:^17":
-  version: 17.0.45
-  resolution: "@types/react@npm:17.0.45"
+"@types/react@npm:*, @types/react@npm:^18.2.6":
+  version: 18.2.6
+  resolution: "@types/react@npm:18.2.6"
   dependencies:
     "@types/prop-types": "*"
     "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: 3cc13a02824c13f6fa4807a83abd065ac1d9943359e76bd995cc7cd2b4148c1176ebd54a30a9f4eb8a0f141ff359d712876f256c4fee707e4290607ef8410b3e
-  languageName: node
-  linkType: hard
-
-"@types/react@npm:^16, @types/react@npm:^16.14.34":
-  version: 16.14.34
-  resolution: "@types/react@npm:16.14.34"
-  dependencies:
-    "@types/prop-types": "*"
-    "@types/scheduler": "*"
-    csstype: ^3.0.2
-  checksum: a1a105c131bd7fd5cae693c641b3a05eb03c079875fe8e780e616afc54d86e3fa1e8c6433e7a30d2a7f8a1a7681cf1a4f652e9eb48b6abe1f80f7cafe858ebf2
+  checksum: dea9d232d8df7ac357367a69dcb557711ab3d5501807ffa77cebeee73d49ee94d095f298e36853c63ed47cce097eee4c7eae2aaa8c02fac3f0171ec1b523a819
   languageName: node
   linkType: hard
 
@@ -5022,14 +4986,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/semver@npm:^7.3.12":
-  version: 7.3.13
-  resolution: "@types/semver@npm:7.3.13"
-  checksum: 00c0724d54757c2f4bc60b5032fe91cda6410e48689633d5f35ece8a0a66445e3e57fa1d6e07eb780f792e82ac542948ec4d0b76eb3484297b79bd18b8cf1cb0
-  languageName: node
-  linkType: hard
-
-"@types/semver@npm:^7.5.0":
+"@types/semver@npm:^7.3.12, @types/semver@npm:^7.5.0":
   version: 7.5.0
   resolution: "@types/semver@npm:7.5.0"
   checksum: 0a64b9b9c7424d9a467658b18dd70d1d781c2d6f033096a6e05762d20ebbad23c1b69b0083b0484722aabf35640b78ccc3de26368bcae1129c87e9df028a22e2
@@ -5170,31 +5127,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:^5.5.0, @typescript-eslint/eslint-plugin@npm:^5.55.0":
-  version: 5.59.2
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.59.2"
-  dependencies:
-    "@eslint-community/regexpp": ^4.4.0
-    "@typescript-eslint/scope-manager": 5.59.2
-    "@typescript-eslint/type-utils": 5.59.2
-    "@typescript-eslint/utils": 5.59.2
-    debug: ^4.3.4
-    grapheme-splitter: ^1.0.4
-    ignore: ^5.2.0
-    natural-compare-lite: ^1.4.0
-    semver: ^7.3.7
-    tsutils: ^3.21.0
-  peerDependencies:
-    "@typescript-eslint/parser": ^5.0.0
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 1045883173a36a069b56e906ed7e5b4106e1efc2ed0969a1718683aef58fd39e5dfa17774b8782c3ced0529a4edd6dedfcb54348a14525f191a6816e6f3b90dc
-  languageName: node
-  linkType: hard
-
-"@typescript-eslint/eslint-plugin@npm:^5.59.6":
+"@typescript-eslint/eslint-plugin@npm:^5.5.0, @typescript-eslint/eslint-plugin@npm:^5.55.0, @typescript-eslint/eslint-plugin@npm:^5.59.6":
   version: 5.59.6
   resolution: "@typescript-eslint/eslint-plugin@npm:5.59.6"
   dependencies:
@@ -5229,24 +5162,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:^5.5.0, @typescript-eslint/parser@npm:^5.55.0":
-  version: 5.59.2
-  resolution: "@typescript-eslint/parser@npm:5.59.2"
-  dependencies:
-    "@typescript-eslint/scope-manager": 5.59.2
-    "@typescript-eslint/types": 5.59.2
-    "@typescript-eslint/typescript-estree": 5.59.2
-    debug: ^4.3.4
-  peerDependencies:
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 0d3f992c49e062ff509606fb72846abaa66602d93ca15bc6498c345c55effa28c8d523b829cd180d901eaf04bca3d93a165d56a387ce109333d60d67b09b5638
-  languageName: node
-  linkType: hard
-
-"@typescript-eslint/parser@npm:^5.59.6":
+"@typescript-eslint/parser@npm:^5.5.0, @typescript-eslint/parser@npm:^5.55.0, @typescript-eslint/parser@npm:^5.59.6":
   version: 5.59.6
   resolution: "@typescript-eslint/parser@npm:5.59.6"
   dependencies:
@@ -5273,16 +5189,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:5.59.2":
-  version: 5.59.2
-  resolution: "@typescript-eslint/scope-manager@npm:5.59.2"
-  dependencies:
-    "@typescript-eslint/types": 5.59.2
-    "@typescript-eslint/visitor-keys": 5.59.2
-  checksum: e7adce27890ebaadd0fb36a35639c9a97d2965973643aef4b4b0dcfabb03181c82235d7171e718b002dd398e52fefd67816eb34912ddbc2bb738b47755bd502a
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/scope-manager@npm:5.59.6":
   version: 5.59.6
   resolution: "@typescript-eslint/scope-manager@npm:5.59.6"
@@ -5293,24 +5199,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:5.59.2, @typescript-eslint/type-utils@npm:^5.50.0, @typescript-eslint/type-utils@npm:^5.55.0":
-  version: 5.59.2
-  resolution: "@typescript-eslint/type-utils@npm:5.59.2"
-  dependencies:
-    "@typescript-eslint/typescript-estree": 5.59.2
-    "@typescript-eslint/utils": 5.59.2
-    debug: ^4.3.4
-    tsutils: ^3.21.0
-  peerDependencies:
-    eslint: "*"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: d9dc037509a97b11a3c7f758f0f6e985cf5b4909fab860018a75b1550711ce9ff07bf5b67d4197ba7a0a831fec7255851b1e6a773a69030fc8ea7ec649859f52
-  languageName: node
-  linkType: hard
-
-"@typescript-eslint/type-utils@npm:5.59.6":
+"@typescript-eslint/type-utils@npm:5.59.6, @typescript-eslint/type-utils@npm:^5.50.0, @typescript-eslint/type-utils@npm:^5.55.0":
   version: 5.59.6
   resolution: "@typescript-eslint/type-utils@npm:5.59.6"
   dependencies:
@@ -5334,13 +5223,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:5.59.2":
-  version: 5.59.2
-  resolution: "@typescript-eslint/types@npm:5.59.2"
-  checksum: 5a91cfbcaa8c7e92ad91f67abd0ce43ae562fdbdd8c32aa968731bf7c200d13a0415e87fc032bd48f7e5b7d3ed1447cb14449ef2592c269ca311974b15ce0af2
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/types@npm:5.59.6":
   version: 5.59.6
   resolution: "@typescript-eslint/types@npm:5.59.6"
@@ -5366,24 +5248,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.59.2":
-  version: 5.59.2
-  resolution: "@typescript-eslint/typescript-estree@npm:5.59.2"
-  dependencies:
-    "@typescript-eslint/types": 5.59.2
-    "@typescript-eslint/visitor-keys": 5.59.2
-    debug: ^4.3.4
-    globby: ^11.1.0
-    is-glob: ^4.0.3
-    semver: ^7.3.7
-    tsutils: ^3.21.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: e8bb8817fe53f826f54e4ca584e48a6700dae25e0cc20ab7db38e7e5308987c5759408b39a4e494d4d6dcd7b4bca9f9c507fae987213380dc1c98607cb0a60b1
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/typescript-estree@npm:5.59.6":
   version: 5.59.6
   resolution: "@typescript-eslint/typescript-estree@npm:5.59.6"
@@ -5420,25 +5284,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.59.2, @typescript-eslint/utils@npm:^5.13.0, @typescript-eslint/utils@npm:^5.50.0, @typescript-eslint/utils@npm:^5.55.0":
-  version: 5.59.2
-  resolution: "@typescript-eslint/utils@npm:5.59.2"
-  dependencies:
-    "@eslint-community/eslint-utils": ^4.2.0
-    "@types/json-schema": ^7.0.9
-    "@types/semver": ^7.3.12
-    "@typescript-eslint/scope-manager": 5.59.2
-    "@typescript-eslint/types": 5.59.2
-    "@typescript-eslint/typescript-estree": 5.59.2
-    eslint-scope: ^5.1.1
-    semver: ^7.3.7
-  peerDependencies:
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 483c35a592a36a5973204ce4cd11d52935c097b414d7edac2ecd15dba460b8c540b793ffc232c0f8580fef0624eb7704156ce33c66bd09a76769ed019bddd1d1
-  languageName: node
-  linkType: hard
-
-"@typescript-eslint/utils@npm:5.59.6":
+"@typescript-eslint/utils@npm:5.59.6, @typescript-eslint/utils@npm:^5.13.0, @typescript-eslint/utils@npm:^5.50.0, @typescript-eslint/utils@npm:^5.55.0":
   version: 5.59.6
   resolution: "@typescript-eslint/utils@npm:5.59.6"
   dependencies:
@@ -5466,16 +5312,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.59.2":
-  version: 5.59.2
-  resolution: "@typescript-eslint/visitor-keys@npm:5.59.2"
-  dependencies:
-    "@typescript-eslint/types": 5.59.2
-    eslint-visitor-keys: ^3.3.0
-  checksum: 3057a017bca03b4ec3bee442044f2bc2f77a4af0d83ea9bf7c6cb2a12811126d93d9d300d89ef8078d981e478c6cc38693c51a2ae4b10a717796bba880eff924
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/visitor-keys@npm:5.59.6":
   version: 5.59.6
   resolution: "@typescript-eslint/visitor-keys@npm:5.59.6"
@@ -8444,14 +8280,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-visitor-keys@npm:^3.3.0":
-  version: 3.4.0
-  resolution: "eslint-visitor-keys@npm:3.4.0"
-  checksum: 33159169462d3989321a1ec1e9aaaf6a24cc403d5d347e9886d1b5bfe18ffa1be73bdc6203143a28a606b142b1af49787f33cff0d6d0813eb5f2e8d2e1a6043c
-  languageName: node
-  linkType: hard
-
-"eslint-visitor-keys@npm:^3.4.1":
+"eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.1":
   version: 3.4.1
   resolution: "eslint-visitor-keys@npm:3.4.1"
   checksum: f05121d868202736b97de7d750847a328fcfa8593b031c95ea89425333db59676ac087fa905eba438d0a3c5769632f828187e0c1a0d271832a2153c1d3661c2c
@@ -11162,7 +10991,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lz-string@npm:^1.4.4, lz-string@npm:^1.5.0":
+"lz-string@npm:^1.5.0":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
   bin:
@@ -13390,17 +13219,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^16.14.0":
-  version: 16.14.0
-  resolution: "react-dom@npm:16.14.0"
+"react-dom@npm:^18.2.0":
+  version: 18.2.0
+  resolution: "react-dom@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    prop-types: ^15.6.2
-    scheduler: ^0.19.1
+    scheduler: ^0.23.0
   peerDependencies:
-    react: ^16.14.0
-  checksum: 5a5c49da0f106b2655a69f96c622c347febcd10532db391c262b26aec225b235357d9da1834103457683482ab1b229af7a50f6927a6b70e53150275e31785544
+    react: ^18.2.0
+  checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
   languageName: node
   linkType: hard
 
@@ -13592,14 +13419,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^16.14.0":
-  version: 16.14.0
-  resolution: "react@npm:16.14.0"
+"react@npm:^18.2.0":
+  version: 18.2.0
+  resolution: "react@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    prop-types: ^15.6.2
-  checksum: 8484f3ecb13414526f2a7412190575fc134da785c02695eb92bb6028c930bfe1c238d7be2a125088fec663cc7cda0a3623373c46807cf2c281f49c34b79881ac
+  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
   languageName: node
   linkType: hard
 
@@ -14104,13 +13929,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.19.1":
-  version: 0.19.1
-  resolution: "scheduler@npm:0.19.1"
+"scheduler@npm:^0.23.0":
+  version: 0.23.0
+  resolution: "scheduler@npm:0.23.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: 73e185a59e2ff5aa3609f5b9cb97ddd376f89e1610579d29939d952411ca6eb7a24907a4ea4556569dacb931467a1a4a56d94fe809ef713aa76748642cd96a6c
+  checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a
   languageName: node
   linkType: hard
 
@@ -14187,18 +14011,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.3.2, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8":
-  version: 7.5.0
-  resolution: "semver@npm:7.5.0"
-  dependencies:
-    lru-cache: ^6.0.0
-  bin:
-    semver: bin/semver.js
-  checksum: 2d266937756689a76f124ffb4c1ea3e1bbb2b263219f90ada8a11aebebe1280b13bb76cca2ca96bdee3dbc554cbc0b24752eb895b2a51577aa644427e9229f2b
-  languageName: node
-  linkType: hard
-
-"semver@npm:^7.5.1":
+"semver@npm:^7.3.2, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.1":
   version: 7.5.1
   resolution: "semver@npm:7.5.1"
   dependencies:
@@ -15044,29 +14857,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser-webpack-plugin@npm:^5.3.7":
-  version: 5.3.7
-  resolution: "terser-webpack-plugin@npm:5.3.7"
-  dependencies:
-    "@jridgewell/trace-mapping": ^0.3.17
-    jest-worker: ^27.4.5
-    schema-utils: ^3.1.1
-    serialize-javascript: ^6.0.1
-    terser: ^5.16.5
-  peerDependencies:
-    webpack: ^5.1.0
-  peerDependenciesMeta:
-    "@swc/core":
-      optional: true
-    esbuild:
-      optional: true
-    uglify-js:
-      optional: true
-  checksum: 095e699fdeeb553cdf2c6f75f983949271b396d9c201d7ae9fc633c45c1c1ad14c7257ef9d51ccc62213dd3e97f875870ba31550f6d4f1b6674f2615562da7f7
-  languageName: node
-  linkType: hard
-
-"terser-webpack-plugin@npm:^5.3.8":
+"terser-webpack-plugin@npm:^5.3.7, terser-webpack-plugin@npm:^5.3.8":
   version: 5.3.8
   resolution: "terser-webpack-plugin@npm:5.3.8"
   dependencies:
@@ -15088,21 +14879,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser@npm:^5.0.0, terser@npm:^5.10.0, terser@npm:^5.16.5":
-  version: 5.16.6
-  resolution: "terser@npm:5.16.6"
-  dependencies:
-    "@jridgewell/source-map": ^0.3.2
-    acorn: ^8.5.0
-    commander: ^2.20.0
-    source-map-support: ~0.5.20
-  bin:
-    terser: bin/terser
-  checksum: f763a7bcc7b98cb2bfc41434f7b92bfe8a701a12c92ea6049377736c8e6de328240d654a20dfe15ce170fd783491b9873fad9f4cd8fee4f6c6fb8ca407859dee
-  languageName: node
-  linkType: hard
-
-"terser@npm:^5.16.8":
+"terser@npm:^5.0.0, terser@npm:^5.10.0, terser@npm:^5.16.8":
   version: 5.17.1
   resolution: "terser@npm:5.17.1"
   dependencies: