Refactor Home component

2025-07-25 13:26:26 +00:00 · 2022-12-14 23:34:51 +01:00 · 2022-12-14 23:34:51 +01:00 · 6e237d72fd
commit 6e237d72fd
parent 08071fba44
8 changed files with 627 additions and 198 deletions
--- a/client/.eslintrc.cjs
+++ b/client/.eslintrc.cjs
@ -1,5 +1,11 @@
 module.exports = {
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended'
+  ],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  root: true,
@ -7,4 +13,14 @@ module.exports = {
    browser: true,
    node: true,
  },
+  settings: {
+    react: {
+      pragma: 'React', // Pragma to use, default to "React"
+      version: 'detect', // React version. "detect" automatically picks the version you have installed.
+    },
+  },
+  rules: {
+    "react/prop-types": "off",
+    "@typescript-eslint/no-empty-function": "off"
+  }
 };
--- a/client/jsconfig.json
+++ b/client/jsconfig.json
@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "src",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  }
-}
-
--- a/client/package.json
+++ b/client/package.json
@ -54,6 +54,8 @@
    "eslint": "^8.29.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
    "jest-environment-jsdom-sixteen": "^1.0.3",
    "jest-fetch-mock": "^3.0.3",
    "prettier": "^2.0.5",
--- a/client/src/components/Home/Home.jsx
+++ b/client/src/components/Home/Home.jsx
@ -1,5 +1,5 @@
-import React, { Component } from 'react';
-import Modal from 'react-modal';
+import React from 'react';
+import ReactModal from 'react-modal';
 import PropTypes from 'prop-types';
 import { nanoid } from 'nanoid';
 import { X, AlertCircle } from 'react-feather';
@ -21,68 +21,26 @@ import styles from './styles.module.scss';

 const crypto = new Crypto();

-Modal.setAppElement('#root');
+ReactModal.setAppElement('#root');

-class Home extends Component {
-  async componentWillMount() {
-    const user = await this.createUser();
-
-    const socket = connectSocket(this.props.socketId);
-
-    this.socket = socket;
-
-    socket.on('disconnect', () => {
-      this.props.toggleSocketConnected(false);
-    });
-
-    socket.on('connect', () => {
-      this.initApp(user);
-      this.props.toggleSocketConnected(true);
-    });
-
-    socket.on('USER_ENTER', payload => {
-      this.props.receiveUnencryptedMessage('USER_ENTER', payload);
-      this.props.sendEncryptedMessage({
-        type: 'ADD_USER',
-        payload: {
-          username: this.props.username,
-          publicKey: this.props.publicKey,
-          isOwner: this.props.iAmOwner,
-          id: this.props.userId,
-        },
-      });
-      if (payload.users.length === 1) {
-        this.props.openModal('Welcome');
-      }
-    });
-
-    socket.on('USER_EXIT', payload => {
-      this.props.receiveUnencryptedMessage('USER_EXIT', payload);
-    });
-
-    socket.on('ENCRYPTED_MESSAGE', payload => {
-      this.props.receiveEncryptedMessage(payload);
-    });
-
-    socket.on('TOGGLE_LOCK_ROOM', payload => {
-      this.props.receiveUnencryptedMessage('TOGGLE_LOCK_ROOM', payload);
-    });
-
-    socket.on('ROOM_LOCKED', payload => {
-      this.props.openModal('Room Locked');
-    });
-
-    window.addEventListener('beforeunload', evt => {
-      socket.emit('USER_DISCONNECT');
-    });
-  }
-
-  componentDidMount() {
-    this.bindEvents();
-  }
-
-  getModal() {
-    switch (this.props.modalComponent) {
+const Modal = ({
+  closeModal,
+  modalComponent,
+  roomId,
+  translations,
+  toggleSoundEnabled,
+  togglePersistenceEnabled,
+  soundIsEnabled,
+  persistenceIsEnabled,
+  toggleNotificationEnabled,
+  toggleNotificationAllowed,
+  notificationIsEnabled,
+  notificationIsAllowed,
+  setLanguage,
+  language,
+}) => {
+  const getModal = () => {
+    switch (modalComponent) {
      case 'Connecting':
        return {
          component: <Connecting />,
@ -91,40 +49,38 @@ class Home extends Component {
        };
      case 'About':
        return {
-          component: <About roomId={this.props.roomId} />,
-          title: this.props.translations.aboutHeader,
+          component: <About roomId={roomId} />,
+          title: translations.aboutHeader,
        };
      case 'Settings':
        return {
          component: (
            <Settings
-              roomId={this.props.roomId}
-              toggleSoundEnabled={this.props.toggleSoundEnabled}
-              togglePersistenceEnabled={this.props.togglePersistenceEnabled}
-              soundIsEnabled={this.props.soundIsEnabled}
-              persistenceIsEnabled={this.props.persistenceIsEnabled}
-              toggleNotificationEnabled={this.props.toggleNotificationEnabled}
-              toggleNotificationAllowed={this.props.toggleNotificationAllowed}
-              notificationIsEnabled={this.props.notificationIsEnabled}
-              notificationIsAllowed={this.props.notificationIsAllowed}
-              setLanguage={this.props.setLanguage}
-              language={this.props.language}
-              translations={this.props.translations}
+              roomId={roomId}
+              toggleSoundEnabled={toggleSoundEnabled}
+              togglePersistenceEnabled={togglePersistenceEnabled}
+              soundIsEnabled={soundIsEnabled}
+              persistenceIsEnabled={persistenceIsEnabled}
+              toggleNotificationEnabled={toggleNotificationEnabled}
+              toggleNotificationAllowed={toggleNotificationAllowed}
+              notificationIsEnabled={notificationIsEnabled}
+              notificationIsAllowed={notificationIsAllowed}
+              setLanguage={setLanguage}
+              language={language}
+              translations={translations}
            />
          ),
-          title: this.props.translations.settingsHeader,
+          title: translations.settingsHeader,
        };
      case 'Welcome':
        return {
-          component: (
-            <Welcome roomId={this.props.roomId} close={this.props.closeModal} translations={this.props.translations} />
-          ),
-          title: this.props.translations.welcomeHeader,
+          component: <Welcome roomId={roomId} close={closeModal} translations={translations} />,
+          title: translations.welcomeHeader,
        };
      case 'Room Locked':
        return {
-          component: <RoomLocked modalContent={this.props.translations.lockedRoomHeader} />,
-          title: this.props.translations.lockedRoomHeader,
+          component: <RoomLocked modalContent={translations.lockedRoomHeader} />,
+          title: translations.lockedRoomHeader,
          preventClose: true,
        };
      default:
@ -133,106 +89,254 @@ class Home extends Component {
          title: null,
        };
    }
-  }
+  };

-  initApp(user) {
-    this.socket.emit('USER_ENTER', {
-      publicKey: user.publicKey,
+  const modalOpts = getModal();
+  return (
+    <ReactModal
+      isOpen={Boolean(modalComponent)}
+      contentLabel="Modal"
+      style={{ overlay: { zIndex: 10 } }}
+      className={{
+        base: 'react-modal-content',
+        afterOpen: 'react-modal-content_after-open',
+        beforeClose: 'react-modal-content_before-close',
+      }}
+      overlayClassName={{
+        base: 'react-modal-overlay',
+        afterOpen: 'react-modal-overlay_after-open',
+        beforeClose: 'react-modal-overlay_before-close',
+      }}
+      shouldCloseOnOverlayClick={!modalOpts.preventClose}
+      onRequestClose={closeModal}
+    >
+      <div className="react-modal-header">
+        {!modalOpts.preventClose && (
+          <button onClick={closeModal} className="btn btn-link btn-plain close-modal">
+            <X />
+          </button>
+        )}
+        <h3 className="react-modal-title">{modalOpts.title}</h3>
+      </div>
+      <div className="react-modal-component">{modalOpts.component}</div>
+    </ReactModal>
+  );
+};
+
+const Home = ({
+  receiveEncryptedMessage,
+  receiveUnencryptedMessage,
+  activities,
+  username,
+  publicKey,
+  members,
+  socketId,
+  roomId,
+  roomLocked,
+  modalComponent,
+  openModal,
+  closeModal,
+  iAmOwner,
+  userId,
+  toggleWindowFocus,
+  soundIsEnabled,
+  persistenceIsEnabled,
+  toggleSoundEnabled,
+  togglePersistenceEnabled,
+  notificationIsEnabled,
+  notificationIsAllowed,
+  toggleNotificationEnabled,
+  toggleNotificationAllowed,
+  toggleSocketConnected,
+  socketConnected,
+  sendUnencryptedMessage,
+  sendEncryptedMessage,
+  translations,
+  setLanguage,
+  language,
+}) => {
+  const socketPayloadRef = React.useRef({
+    username: username,
+    publicKey: publicKey,
+    isOwner: iAmOwner,
+    id: userId,
+  });
+  socketPayloadRef.current = {
+    username: username,
+    publicKey: publicKey,
+    isOwner: iAmOwner,
+    id: userId,
+  };
+
+  // Add blur et focus listeners
+  React.useEffect(() => {
+    const onFocus = () => {
+      toggleWindowFocus(true);
+    };
+    const onBlur = () => {
+      toggleWindowFocus(false);
+    };
+
+    window.addEventListener('focus', onFocus);
+    window.addEventListener('blur', onBlur);
+
+    return () => {
+      window.removeEventListener('focus', onFocus);
+      window.removeEventListener('blur', onBlur);
+    };
+  }, [toggleWindowFocus]);
+
+  React.useEffect(() => {
+    const socket = connectSocket(socketId);
+
+    socket.on('disconnect', () => {
+      toggleSocketConnected(false);
    });
-  }

-  bindEvents() {
-    window.onfocus = () => {
-      this.props.toggleWindowFocus(true);
+    socket.on('connect', () => {
+      socket.emit('USER_ENTER', {
+        publicKey: socketPayloadRef.current.publicKey,
+      });
+      toggleSocketConnected(true);
+    });
+
+    socket.on('USER_ENTER', payload => {
+      receiveUnencryptedMessage('USER_ENTER', payload);
+      sendEncryptedMessage({
+        type: 'ADD_USER',
+        payload: socketPayloadRef.current,
+      });
+      if (payload.users.length === 1) {
+        openModal('Welcome');
+      }
+    });
+
+    socket.on('USER_EXIT', payload => {
+      receiveUnencryptedMessage('USER_EXIT', payload);
+    });
+
+    socket.on('ENCRYPTED_MESSAGE', payload => {
+      receiveEncryptedMessage(payload);
+    });
+
+    socket.on('TOGGLE_LOCK_ROOM', payload => {
+      receiveUnencryptedMessage('TOGGLE_LOCK_ROOM', payload);
+    });
+
+    socket.on('ROOM_LOCKED', () => {
+      openModal('Room Locked');
+    });
+
+    const onUnload = () => {
+      socket.emit('USER_DISCONNECT');
    };

-    window.onblur = () => {
-      this.props.toggleWindowFocus(false);
-    };
-  }
+    window.addEventListener('beforeunload', onUnload);

-  createUser() {
-    return new Promise(async resolve => {
-      const username = this.props.username || nanoid();
+    return () => {
+      window.removeEventListener('beforeunload', onUnload);
+      onUnload();
+      socket.close();
+    };
+  }, [
+    openModal,
+    receiveEncryptedMessage,
+    receiveUnencryptedMessage,
+    sendEncryptedMessage,
+    socketId,
+    toggleSocketConnected,
+  ]);
+
+  return (
+    <div className={classNames(styles.styles, 'h-100')}>
+      <div className="nav-container">
+        {!socketConnected && (
+          <div className="alert-banner">
+            <span className="icon">
+              <AlertCircle size="15" />
+            </span>{' '}
+            <span>Disconnected</span>
+          </div>
+        )}
+        <Nav
+          members={members}
+          roomId={roomId}
+          roomLocked={roomLocked}
+          toggleLockRoom={() => sendUnencryptedMessage('TOGGLE_LOCK_ROOM')}
+          openModal={openModal}
+          iAmOwner={iAmOwner}
+          userId={userId}
+          translations={translations}
+        />
+      </div>
+      <ActivityList openModal={openModal} activities={activities} />
+      <Modal
+        closeModal={closeModal}
+        modalComponent={modalComponent}
+        roomId={roomId}
+        translations={translations}
+        toggleSoundEnabled={toggleSoundEnabled}
+        togglePersistenceEnabled={togglePersistenceEnabled}
+        soundIsEnabled={soundIsEnabled}
+        persistenceIsEnabled={persistenceIsEnabled}
+        toggleNotificationEnabled={toggleNotificationEnabled}
+        toggleNotificationAllowed={toggleNotificationAllowed}
+        notificationIsEnabled={notificationIsEnabled}
+        notificationIsAllowed={notificationIsAllowed}
+        setLanguage={setLanguage}
+        language={language}
+      />
+    </div>
+  );
+};
+
+const User = ({ createUser, username, ...rest }) => {
+  const [loaded, setLoaded] = React.useState(false);
+  const loading = React.useRef(false);
+
+  React.useEffect(() => {
+    let mounted = true;
+
+    const createUserLocal = async () => {
+      const localUsername = username || nanoid();

      const encryptDecryptKeys = await crypto.createEncryptDecryptKeys();
      const exportedEncryptDecryptPrivateKey = await crypto.exportKey(encryptDecryptKeys.privateKey);
      const exportedEncryptDecryptPublicKey = await crypto.exportKey(encryptDecryptKeys.publicKey);

-      this.props.createUser({
-        username,
+      if (!mounted) {
+        return;
+      }
+
+      createUser({
+        username: localUsername,
        publicKey: exportedEncryptDecryptPublicKey,
        privateKey: exportedEncryptDecryptPrivateKey,
      });
+      setLoaded(true);
+    };

-      resolve({
-        publicKey: exportedEncryptDecryptPublicKey,
-      });
-    });
+    if (!loaded && !loading.current) {
+      loading.current = true;
+      createUserLocal();
+    }
+
+    return () => {
+      mounted = false;
+    };
+  }, [createUser, loaded, username]);
+
+  if (!loaded) {
+    return null;
  }
+  return <Home username={username} {...rest} />;
+};

-  render() {
-    const modalOpts = this.getModal();
-    return (
-      <div className={classNames(styles.styles, 'h-100')}>
-        <div className="nav-container">
-          {!this.props.socketConnected && (
-            <div className="alert-banner">
-              <span className="icon">
-                <AlertCircle size="15" />
-              </span>{' '}
-              <span>Disconnected</span>
-            </div>
-          )}
-          <Nav
-            members={this.props.members}
-            roomId={this.props.roomId}
-            roomLocked={this.props.roomLocked}
-            toggleLockRoom={() => this.props.sendUnencryptedMessage('TOGGLE_LOCK_ROOM')}
-            openModal={this.props.openModal}
-            iAmOwner={this.props.iAmOwner}
-            userId={this.props.userId}
-            translations={this.props.translations}
-          />
-        </div>
-        <ActivityList openModal={this.props.openModal} activities={this.props.activities} />
-        <Modal
-          isOpen={Boolean(this.props.modalComponent)}
-          contentLabel="Modal"
-          style={{ overlay: { zIndex: 10 } }}
-          className={{
-            base: 'react-modal-content',
-            afterOpen: 'react-modal-content_after-open',
-            beforeClose: 'react-modal-content_before-close',
-          }}
-          overlayClassName={{
-            base: 'react-modal-overlay',
-            afterOpen: 'react-modal-overlay_after-open',
-            beforeClose: 'react-modal-overlay_before-close',
-          }}
-          shouldCloseOnOverlayClick={!modalOpts.preventClose}
-          onRequestClose={this.props.closeModal}
-        >
-          <div className="react-modal-header">
-            {!modalOpts.preventClose && (
-              <button onClick={this.props.closeModal} className="btn btn-link btn-plain close-modal">
-                <X />
-              </button>
-            )}
-            <h3 className="react-modal-title">{modalOpts.title}</h3>
-          </div>
-          <div className="react-modal-component">{modalOpts.component}</div>
-        </Modal>
-      </div>
-    );
-  }
-}
-
-Home.defaultProps = {
+User.defaultProps = {
  modalComponent: null,
 };

-Home.propTypes = {
+User.propTypes = {
  receiveEncryptedMessage: PropTypes.func.isRequired,
  receiveUnencryptedMessage: PropTypes.func.isRequired,
  createUser: PropTypes.func.isRequired,
@ -249,7 +353,6 @@ Home.propTypes = {
  iAmOwner: PropTypes.bool.isRequired,
  userId: PropTypes.string.isRequired,
  toggleWindowFocus: PropTypes.func.isRequired,
-  faviconCount: PropTypes.number.isRequired,
  soundIsEnabled: PropTypes.bool.isRequired,
  persistenceIsEnabled: PropTypes.bool.isRequired,
  toggleSoundEnabled: PropTypes.func.isRequired,
@ -262,6 +365,9 @@ Home.propTypes = {
  socketConnected: PropTypes.bool.isRequired,
  sendUnencryptedMessage: PropTypes.func.isRequired,
  sendEncryptedMessage: PropTypes.func.isRequired,
+  setLanguage: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
+  translations: PropTypes.object.isRequired,
 };

-export default Home;
+export default User;
--- a/client/src/components/Home/snapshots/index.test.jsx.snap
+++ b/client/src/components/Home/snapshots/index.test.jsx.snap
@ -143,7 +143,7 @@ exports[`Connected Home component > should display 1`] = `
                </svg>
              </button>
              <span>
-                0
+                1
              </span>
            </a>
            <div
@ -151,7 +151,48 @@ exports[`Connected Home component > should display 1`] = `
            >
              <ul
                class="plain"
-              />
+              >
+                <li>
+                  <span
+                    class="username"
+                    style="color: rgb(159, 244, 144);"
+                  >
+                    shortidgenerated
+                  </span>
+                  <span
+                    class="icon-container"
+                  >
+                    <span
+                      class="me-icon-wrap"
+                      data-placement="bottom"
+                      data-toggle="tooltip"
+                      title="Me"
+                    >
+                      <svg
+                        class="me-icon"
+                        fill="none"
+                        height="24"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        viewBox="0 0 24 24"
+                        width="24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
+                        />
+                        <circle
+                          cx="12"
+                          cy="7"
+                          r="4"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </li>
+              </ul>
            </div>
          </div>
        </div>
--- a/client/src/components/Home/index.test.jsx
+++ b/client/src/components/Home/index.test.jsx
@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import Tinycon from 'tinycon';
@ -12,6 +11,8 @@ import { notify, beep } from '@/utils/notifications';

 import { ConnectedHome } from './';

+import { act } from 'react-dom/test-utils';
+
 const store = configureStore();

 vi.useFakeTimers();
@ -45,12 +46,14 @@ vi.mock('@/utils/socket', () => {
      return {
        on: vi.fn(),
        emit: vi.fn(),
+        close: vi.fn(),
      };
    }),
    getSocket: vi.fn().mockImplementation(() => {
      return {
        on: vi.fn(),
        emit: vi.fn(),
+        close: vi.fn(),
      };
    }),
  };
@ -102,23 +105,27 @@ describe('Connected Home component', () => {
    delete global.Notification;
  });

-  it('should display', () => {
-    const { asFragment } = render(
+  it('should display', async () => {
+    const { asFragment, findByText } = render(
      <Provider store={store}>
-        <ConnectedHome match={{ params: { roomId: 'roomTest' } }} userId="testUserId" />
+        <ConnectedHome userId="testUserId" socketId="roomTest" />
      </Provider>,
    );

+    await findByText('Disconnected');
+
    expect(asFragment()).toMatchSnapshot();
  });

-  it('should set notification', () => {
-    render(
+  it('should set notification', async () => {
+    const { findByText } = render(
      <Provider store={store}>
-        <ConnectedHome match={{ params: { roomId: 'roomTest' } }} userId="testUserId" />
+        <ConnectedHome userId="testUserId" socketId="roomTest" />
      </Provider>,
    );

+    await findByText('Disconnected');
+
    expect(store.getState().app.notificationIsAllowed).toBe(true);
    expect(store.getState().app.notificationIsEnabled).toBe(true);

@ -126,24 +133,28 @@ describe('Connected Home component', () => {
      permission: 'denied',
    };

-    render(
+    const { findByText: findByText2 } = render(
      <Provider store={store}>
-        <ConnectedHome match={{ params: { roomId: 'roomTest' } }} userId="testUserId" />
+        <ConnectedHome userId="testUserId" socketId="roomTest" />
      </Provider>,
    );

+    await findByText2('Disconnected');
+
    expect(store.getState().app.notificationIsAllowed).toBe(false);

    global.Notification = {
      permission: 'default',
    };

-    render(
+    const { findByText: findByText3 } = render(
      <Provider store={store}>
-        <ConnectedHome match={{ params: { roomId: 'roomTest' } }} userId="testUserId" />
+        <ConnectedHome match={{ params: { roomId: 'roomTest' } }} userId="testUserId" socketId="roomTest" />
      </Provider>,
    );

+    await findByText3('Disconnected');
+
    expect(store.getState().app.notificationIsAllowed).toBe(null);
  });

--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@ -15,6 +15,7 @@
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
+    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
--- a/client/yarn.lock
+++ b/client/yarn.lock
@ -895,11 +895,43 @@ aria-query@^5.0.0:
  dependencies:
    deep-equal "^2.0.5"

+array-includes@^3.1.5, array-includes@^3.1.6:
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.6.tgz#9e9e720e194f198266ba9e18c29e6a9b0e4b225f"
+  integrity sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    get-intrinsic "^1.1.3"
+    is-string "^1.0.7"
+
 array-union@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==

+array.prototype.flatmap@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz#1aae7903c2100433cb8261cd4ed310aab5c4a183"
+  integrity sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.tosorted@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz#ccf44738aa2b5ac56578ffda97c03fd3e23dd532"
+  integrity sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    es-shim-unscopables "^1.0.0"
+    get-intrinsic "^1.1.3"
+
 assertion-error@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
@ -1233,6 +1265,13 @@ dir-glob@^3.0.1:
  dependencies:
    path-type "^4.0.0"

+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
 doctrine@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
@ -1308,6 +1347,37 @@ entities@^2.0.0:
  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==

+es-abstract@^1.19.0, es-abstract@^1.20.4:
+  version "1.20.5"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.5.tgz#e6dc99177be37cacda5988e692c3fa8b218e95d2"
+  integrity sha512-7h8MM2EQhsCA7pU/Nv78qOXFpD8Rhqd12gYiSJVkrH9+e8VuA8JlPJK/hQjjlLv6pJvx/z1iRFKzYb0XT/RuAQ==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    function.prototype.name "^1.1.5"
+    get-intrinsic "^1.1.3"
+    get-symbol-description "^1.0.0"
+    gopd "^1.0.1"
+    has "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    is-callable "^1.2.7"
+    is-negative-zero "^2.0.2"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    is-string "^1.0.7"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.4.3"
+    safe-regex-test "^1.0.0"
+    string.prototype.trimend "^1.0.6"
+    string.prototype.trimstart "^1.0.6"
+    unbox-primitive "^1.0.2"
+
 es-get-iterator@^1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.2.tgz#9234c54aba713486d7ebde0220864af5e2b283f7"
@ -1322,6 +1392,22 @@ es-get-iterator@^1.1.2:
    is-string "^1.0.5"
    isarray "^2.0.5"

+es-shim-unscopables@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
+  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  dependencies:
+    has "^1.0.3"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
 esbuild@^0.16.3:
  version "0.16.4"
  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.16.4.tgz#06c86298d233386f5e41bcc14d36086daf3f40bd"
@ -1396,6 +1482,32 @@ eslint-plugin-prettier@^3.1.3:
  dependencies:
    prettier-linter-helpers "^1.0.0"

+eslint-plugin-react-hooks@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+
+eslint-plugin-react@^7.31.11:
+  version "7.31.11"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.31.11.tgz#011521d2b16dcf95795df688a4770b4eaab364c8"
+  integrity sha512-TTvq5JsT5v56wPa9OYHzsrOlHzKZKjV+aLgS+55NJP/cuzdiQPC7PfYoUjMoxlffKtvijpk7vA/jmuqRb9nohw==
+  dependencies:
+    array-includes "^3.1.6"
+    array.prototype.flatmap "^1.3.1"
+    array.prototype.tosorted "^1.1.1"
+    doctrine "^2.1.0"
+    estraverse "^5.3.0"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.1.2"
+    object.entries "^1.1.6"
+    object.fromentries "^2.0.6"
+    object.hasown "^1.1.2"
+    object.values "^1.1.6"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.3"
+    semver "^6.3.0"
+    string.prototype.matchall "^4.0.8"
+
 eslint-scope@^5.1.1:
  version "5.1.1"
  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
@ -1507,7 +1619,7 @@ estraverse@^4.1.1:
  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==

-estraverse@^5.1.0, estraverse@^5.2.0:
+estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
  version "5.3.0"
  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
@ -1637,6 +1749,16 @@ function-bind@^1.1.1:
  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==

+function.prototype.name@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
+  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.0"
+    functions-have-names "^1.2.2"
+
 functions-have-names@^1.2.2:
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
@ -1666,6 +1788,14 @@ get-stdin@^6.0.0:
  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
  integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==

+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
 glob-parent@^5.1.2, glob-parent@~5.1.2:
  version "5.1.2"
  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@ -1740,7 +1870,7 @@ grapheme-splitter@^1.0.4:
  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==

-has-bigints@^1.0.1:
+has-bigints@^1.0.1, has-bigints@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
@ -1875,6 +2005,15 @@ inherits@2:
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==

+internal-slot@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
+  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
+  dependencies:
+    get-intrinsic "^1.1.0"
+    has "^1.0.3"
+    side-channel "^1.0.4"
+
 is-arguments@^1.1.0, is-arguments@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
@ -1905,7 +2044,7 @@ is-boolean-object@^1.1.0:
    call-bind "^1.0.2"
    has-tostringtag "^1.0.0"

-is-callable@^1.1.3:
+is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
  version "1.2.7"
  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
@ -1924,7 +2063,7 @@ is-core-module@^2.9.0:
  dependencies:
    has "^1.0.3"

-is-date-object@^1.0.5:
+is-date-object@^1.0.1, is-date-object@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
  integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
@ -1948,6 +2087,11 @@ is-map@^2.0.1, is-map@^2.0.2:
  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==

+is-negative-zero@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
+  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+
 is-number-object@^1.0.4:
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
@ -1988,14 +2132,21 @@ is-set@^2.0.1, is-set@^2.0.2:
  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==

-is-string@^1.0.5:
+is-shared-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
+  integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-string@^1.0.5, is-string@^1.0.7:
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.7.tgz#0dd12bf2006f255bb58f695110eff7491eebc0fd"
  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
  dependencies:
    has-tostringtag "^1.0.0"

-is-symbol@^1.0.3:
+is-symbol@^1.0.2, is-symbol@^1.0.3:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.4.tgz#a6dac93b635b063ca6872236de88910a57af139c"
  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
@ -2018,6 +2169,13 @@ is-weakmap@^2.0.1:
  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==

+is-weakref@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
 is-weakset@^2.0.1:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.2.tgz#4569d67a747a1ce5a994dfd4ef6dcea76e7c0a1d"
@ -2255,6 +2413,14 @@ json5@^2.2.1:
  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==

+"jsx-ast-utils@^2.4.1 || ^3.0.0":
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
+  integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==
+  dependencies:
+    array-includes "^3.1.5"
+    object.assign "^4.1.3"
+
 levn@^0.4.1:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@ -2441,7 +2607,7 @@ object-assign@^4.1.1:
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==

-object-inspect@^1.9.0:
+object-inspect@^1.12.2, object-inspect@^1.9.0:
  version "1.12.2"
  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
@ -2459,7 +2625,7 @@ object-keys@^1.1.1:
  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==

-object.assign@^4.1.4:
+object.assign@^4.1.3, object.assign@^4.1.4:
  version "4.1.4"
  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
@ -2469,6 +2635,41 @@ object.assign@^4.1.4:
    has-symbols "^1.0.3"
    object-keys "^1.1.1"

+object.entries@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.6.tgz#9737d0e5b8291edd340a3e3264bb8a3b00d5fa23"
+  integrity sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+object.fromentries@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.6.tgz#cdb04da08c539cffa912dcd368b886e0904bfa73"
+  integrity sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+object.hasown@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.2.tgz#f919e21fad4eb38a57bc6345b3afd496515c3f92"
+  integrity sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==
+  dependencies:
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+object.values@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.6.tgz#4abbaa71eba47d63589d402856f908243eea9b1d"
+  integrity sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
 once@^1.3.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@ -2634,7 +2835,7 @@ promise-polyfill@^8.1.3:
  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.2.3.tgz#2edc7e4b81aff781c88a0d577e5fe9da822107c6"
  integrity sha512-Og0+jCRQetV84U8wVjMNccfGCnMQ9mGs9Hv78QFe+pSDD3gWTpz0y+1QCuxy5d/vBFuZ3iwP2eycAkvqIMPmWg==

-prop-types@^15.5.8, prop-types@^15.7.2:
+prop-types@^15.5.8, prop-types@^15.7.2, prop-types@^15.8.1:
  version "15.8.1"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -2833,6 +3034,15 @@ resolve@^1.22.1:
    path-parse "^1.0.7"
    supports-preserve-symlinks-flag "^1.0.0"

+resolve@^2.0.0-next.3:
+  version "2.0.0-next.4"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
+  integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 reusify@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
@ -2859,6 +3069,15 @@ run-parallel@^1.1.9:
  dependencies:
    queue-microtask "^1.2.2"

+safe-regex-test@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.0.tgz#793b874d524eb3640d1873aad03596db2d4f2295"
+  integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    is-regex "^1.1.4"
+
 "safer-buffer@>= 2.1.2 < 3":
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
@ -2984,6 +3203,38 @@ stack-utils@^2.0.3:
  dependencies:
    escape-string-regexp "^2.0.0"

+string.prototype.matchall@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz#3bf85722021816dcd1bf38bb714915887ca79fd3"
+  integrity sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    get-intrinsic "^1.1.3"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    regexp.prototype.flags "^1.4.3"
+    side-channel "^1.0.4"
+
+string.prototype.trimend@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz#c4a27fa026d979d79c04f17397f250a462944533"
+  integrity sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
+string.prototype.trimstart@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz#e90ab66aa8e4007d92ef591bbf3cd422c56bdcf4"
+  integrity sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+
 strip-ansi@^6.0.1:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
@ -3158,6 +3409,16 @@ uc.micro@^1.0.1:
  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==

+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+  dependencies:
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
+    which-boxed-primitive "^1.0.2"
+
 universalify@^0.2.0:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"