From 2c3d21f3441eadab547e3be5ec1622e7cc9df82d Mon Sep 17 00:00:00 2001
From: Linerly <linerly@protonmail.com>
Date: Tue, 27 Jun 2023 06:52:20 +0000
Subject: [PATCH 01/18] Translated using Weblate (Indonesian)

Currently translated at 100.0% (117 of 117 strings)

Translation: Element Call/element-call
Translate-URL: https://translate.element.io/projects/element-call/element-call/id/
---
 public/locales/id/app.json | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/locales/id/app.json b/public/locales/id/app.json
index 9d891b3..1388dae 100644
--- a/public/locales/id/app.json
+++ b/public/locales/id/app.json
@@ -53,7 +53,6 @@
   "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Pengguna lain sedang mencoba bergabung ke panggilan ini dari versi yang tidak kompatibel. Pengguna berikut seharusnya memastikan bahwa mereka telah memuat ulang peramban mereka: <1>{userLis}</1>",
   "Password": "Kata sandi",
   "Passwords must match": "Kata sandi harus cocok",
-  "Press and hold to talk over {{name}}": "Tekan dan tahan untuk berbicara pada {{name}}",
   "Profile": "Profil",
   "Recaptcha dismissed": "Recaptcha ditutup",
   "Recaptcha not loaded": "Recaptcha tidak dimuat",
@@ -113,5 +112,8 @@
   "<0>Thanks for your feedback!</0>": "<0>Terima kasih atas masukan Anda!</0>",
   "How did it go?": "Bagaimana rasanya?",
   "{{count}} stars|one": "{{count}} bintang",
-  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Kami ingin mendengar masukan Anda supaya kami bisa meningkatkan pengalaman Anda.</0>"
+  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Kami ingin mendengar masukan Anda supaya kami bisa meningkatkan pengalaman Anda.</0>",
+  "Show connection stats": "Tampilkan statistik koneksi",
+  "{{displayName}} is presenting": "{{displayName}} sedang menampilkan",
+  "{{count}} stars|other": "{{count}} bintang"
 }

From a857ee3ce45e705bd11e4cfd89d3bd3ba93b960e Mon Sep 17 00:00:00 2001
From: Ihor Hordiichuk <igor_ck@outlook.com>
Date: Mon, 26 Jun 2023 20:53:52 +0000
Subject: [PATCH 02/18] Translated using Weblate (Ukrainian)

Currently translated at 100.0% (117 of 117 strings)

Translation: Element Call/element-call
Translate-URL: https://translate.element.io/projects/element-call/element-call/uk/
---
 public/locales/uk/app.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/locales/uk/app.json b/public/locales/uk/app.json
index 8e3a578..6e5ab0c 100644
--- a/public/locales/uk/app.json
+++ b/public/locales/uk/app.json
@@ -39,7 +39,6 @@
   "Recaptcha not loaded": "Recaptcha не завантажено",
   "Recaptcha dismissed": "Recaptcha не пройдено",
   "Profile": "Профіль",
-  "Press and hold spacebar to talk": "Затисніть пробіл, щоб говорити",
   "Passwords must match": "Паролі відрізняються",
   "Password": "Пароль",
   "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Інші користувачі намагаються приєднатися до цього виклику з несумісних версій. Ці користувачі повинні переконатися, що вони оновили сторінки своїх браузерів:<1>{userLis}</1>",
@@ -94,7 +93,6 @@
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Створити обліковий запис</0> або <2>Отримати доступ як гість</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Уже маєте обліковий запис?</0><1><0>Увійти</0> Or <2>Отримати доступ як гість</2></1>",
   "{{names}}, {{name}}": "{{names}}, {{name}}",
-  "{{count}} people connected|one": "{{count}} під'єднується",
   "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Приєднатися до виклику зараз</0><1>Or</1><2>Скопіювати посилання на виклик і приєднатися пізніше</2>",
   "Element Call Home": "Домівка Element Call",
   "Copy": "Копіювати",
@@ -115,5 +113,7 @@
   "{{count}} stars|other": "{{count}} зірок",
   "{{displayName}}, your call has ended.": "{{displayName}}, ваш виклик завершено.",
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Ми будемо раді почути ваші відгуки, щоб поліпшити роботу застосунку.</0>",
-  "How did it go?": "Вам усе сподобалось?"
+  "How did it go?": "Вам усе сподобалось?",
+  "{{displayName}} is presenting": "{{displayName}} представляє",
+  "Show connection stats": "Показати стан з'єднання"
 }

From 62e2ac92953707cf2509dbd5713794954de0d311 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Priit=20J=C3=B5er=C3=BC=C3=BCt?= <riot@joeruut.com>
Date: Tue, 27 Jun 2023 06:23:56 +0000
Subject: [PATCH 03/18] Translated using Weblate (Estonian)

Currently translated at 100.0% (117 of 117 strings)

Translation: Element Call/element-call
Translate-URL: https://translate.element.io/projects/element-call/element-call/et/
---
 public/locales/et/app.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/public/locales/et/app.json b/public/locales/et/app.json
index 2b5fcbf..8c6a4af 100644
--- a/public/locales/et/app.json
+++ b/public/locales/et/app.json
@@ -4,7 +4,6 @@
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Loo konto</0> Või <2>Sisene külalisena</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>On sul juba konto?</0><1><0>Logi sisse</0> Või <2>Logi sisse külalisena</2></1>",
   "{{names}}, {{name}}": "{{names}}, {{name}}",
-  "{{count}} people connected|other": "{{count}} osalejat liitunud",
   "Invite people": "Kutsu inimesi",
   "Invite": "Kutsu",
   "Inspector": "Inspektor",
@@ -114,5 +113,7 @@
   "How did it go?": "Kuidas sujus?",
   "{{displayName}}, your call has ended.": "{{displayName}}, sinu kõne on lõppenud.",
   "<0>Thanks for your feedback!</0>": "<0>Täname Sind tagasiside eest!</0>",
-  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Meie rakenduse paremaks muutmiseks me hea meelega ootame Sinu arvamusi.</0>"
+  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Meie rakenduse paremaks muutmiseks me hea meelega ootame Sinu arvamusi.</0>",
+  "Show connection stats": "Näita ühenduse statistikat",
+  "{{displayName}} is presenting": "{{displayName}} on esitlemas"
 }

From 0ea88188e1d57e4ebdf29d5b0418603d60fea6ad Mon Sep 17 00:00:00 2001
From: Jeff Huang <s8321414@gmail.com>
Date: Tue, 27 Jun 2023 02:45:51 +0000
Subject: [PATCH 04/18] Translated using Weblate (Chinese (Traditional))

Currently translated at 100.0% (117 of 117 strings)

Translation: Element Call/element-call
Translate-URL: https://translate.element.io/projects/element-call/element-call/zh_Hant/
---
 public/locales/zh-Hant/app.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/locales/zh-Hant/app.json b/public/locales/zh-Hant/app.json
index 5ac0980..b507a75 100644
--- a/public/locales/zh-Hant/app.json
+++ b/public/locales/zh-Hant/app.json
@@ -3,7 +3,6 @@
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>建立帳號</0> 或<2>以訪客身份登入</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>已經有帳號?</0><1><0>登入</0> 或<2>以訪客身份登入</2></1>",
   "{{names}}, {{name}}": "{{names}}, {{name}}",
-  "{{name}} (Connecting...)": "{{name}} (連結中...)",
   "Expose developer settings in the settings window.": "在設定視窗中顯示開發者設定。",
   "Developer Settings": "開發者設定",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>送出除錯紀錄，可幫助我們修正問題。</0>",
@@ -47,7 +46,6 @@
   "Recaptcha not loaded": "驗證碼未載入",
   "Recaptcha dismissed": "略過驗證碼",
   "Profile": "個人檔案",
-  "Press and hold spacebar to talk": "說話時請按住空白鍵",
   "Passwords must match": "密碼必須相符",
   "Password": "密碼",
   "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "有使用者試著加入通話，但他們的軟體版本不相容。這些使用者需要確認已將瀏覽器更新到最新版本：<1>{userLis}</1>",
@@ -115,5 +113,7 @@
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>我們想要聽到您的回饋，如此我們才能改善您的體驗。</0>",
   "{{count}} stars|one": "{{count}} 個星星",
   "{{displayName}}, your call has ended.": "{{displayName}}，您的通話已結束。",
-  "How did it go?": "進展如何？"
+  "How did it go?": "進展如何？",
+  "{{displayName}} is presenting": "{{displayName}} 正在展示",
+  "Show connection stats": "顯示連線統計資料"
 }

From f80c5971b92e6214ead35ab0fa3550f4c5df572f Mon Sep 17 00:00:00 2001
From: Weblate <noreply@weblate.org>
Date: Tue, 27 Jun 2023 07:07:19 +0000
Subject: [PATCH 05/18] Update translation files

Updated by "Cleanup translation files" hook in Weblate.

Translation: Element Call/element-call
Translate-URL: https://translate.element.io/projects/element-call/element-call/
---
 public/locales/bg/app.json      | 1 -
 public/locales/cs/app.json      | 1 -
 public/locales/de/app.json      | 1 -
 public/locales/el/app.json      | 3 +--
 public/locales/es/app.json      | 1 -
 public/locales/fa/app.json      | 2 --
 public/locales/fr/app.json      | 1 -
 public/locales/ja/app.json      | 1 -
 public/locales/pl/app.json      | 2 --
 public/locales/ru/app.json      | 2 --
 public/locales/sk/app.json      | 2 --
 public/locales/zh-Hans/app.json | 2 --
 12 files changed, 1 insertion(+), 18 deletions(-)

diff --git a/public/locales/bg/app.json b/public/locales/bg/app.json
index 0aea00e..4cf4665 100644
--- a/public/locales/bg/app.json
+++ b/public/locales/bg/app.json
@@ -53,7 +53,6 @@
   "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Други потребители се опитват да се присъединят в разговора от несъвместими версии. Следните потребители трябва да проверят дали са презаредили браузърите си<1>{userLis}</1>",
   "Password": "Парола",
   "Passwords must match": "Паролите не съвпадат",
-  "Press and hold to talk over {{name}}": "Натиснете и задръжте за да говорите заедно с {{name}}",
   "Profile": "Профил",
   "Recaptcha dismissed": "Recaptcha отхвърлена",
   "Recaptcha not loaded": "Recaptcha не е заредена",
diff --git a/public/locales/cs/app.json b/public/locales/cs/app.json
index 91f1c36..40bcd5a 100644
--- a/public/locales/cs/app.json
+++ b/public/locales/cs/app.json
@@ -62,7 +62,6 @@
   "Inspector": "Insepktor",
   "Incompatible versions!": "Nekompatibilní verze!",
   "Incompatible versions": "Nekompatibilní verze",
-  "{{count}} people connected|other": "{{count}} lidí připojeno",
   "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "Tato stárnka je chráněna pomocí ReCAPTCHA a Google <2>zásad ochrany osobních údajů</2> a <6>podmínky služby</6> platí.<9></9>Kliknutím na \"Registrovat\", souhlasíte s <12>Pravidly a podmínkami</12>",
   "Walkie-talkie call name": "Jméno vysílačkového hovoru",
   "Walkie-talkie call": "Vysílačkový hovor",
diff --git a/public/locales/de/app.json b/public/locales/de/app.json
index c7eb44e..ef6a8f3 100644
--- a/public/locales/de/app.json
+++ b/public/locales/de/app.json
@@ -52,7 +52,6 @@
   "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Andere Benutzer versuchen, diesem Aufruf von einer inkompatiblen Softwareversion aus beizutreten. Diese Benutzer sollten ihre Web-Browser Seite neu laden:<1>{userLis}</1>",
   "Password": "Passwort",
   "Passwords must match": "Passwörter müssen übereinstimmen",
-  "Press and hold to talk over {{name}}": "Zum Verdrängen von {{name}} und Sprechen gedrückt halten",
   "Profile": "Profil",
   "Recaptcha dismissed": "Recaptcha abgelehnt",
   "Recaptcha not loaded": "Recaptcha nicht geladen",
diff --git a/public/locales/el/app.json b/public/locales/el/app.json
index 79157df..d61ba14 100644
--- a/public/locales/el/app.json
+++ b/public/locales/el/app.json
@@ -71,6 +71,5 @@
   "Close": "Κλείσιμο",
   "Change layout": "Αλλαγή διάταξης",
   "Camera": "Κάμερα",
-  "Audio": "Ήχος",
-  "{{name}} (Connecting...)": "{{name}} (Συνδέεται...)"
+  "Audio": "Ήχος"
 }
diff --git a/public/locales/es/app.json b/public/locales/es/app.json
index 318ece5..facea46 100644
--- a/public/locales/es/app.json
+++ b/public/locales/es/app.json
@@ -94,7 +94,6 @@
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Crear una cuenta</0> o <2>Acceder como invitado</2>",
   "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Unirse ahora</0><1>Or</1><2>Copiar el enlace y unirse más tarde</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>¿Ya tienes una cuenta?</0><1><0>Iniciar sesión</0> o <2>Acceder como invitado</2></1>",
-  "{{name}} (Connecting...)": "{{name}} (Conectando...)",
   "Element Call Home": "Inicio de Element Call",
   "Copy": "Copiar",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Subir los registros de depuración nos ayudará a encontrar el problema.</0>",
diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json
index 9006512..0877ab7 100644
--- a/public/locales/fa/app.json
+++ b/public/locales/fa/app.json
@@ -54,7 +54,6 @@
   "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>چرا یک رمز عبور برای حساب کاربری خود تنظیم نمی‌کنید؟</0><1>شما می‌توانید نام خود را حفظ کنید و یک آواتار برای تماس‌های آینده بسازید</1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>ساخت حساب کاربری</0> Or <2>دسترسی به عنوان میهمان</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>از قبل حساب کاربری دارید؟</0><1><0>ورود</0> Or <2>به عنوان یک میهمان وارد شوید</2></1>",
-  "{{count}} people connected|other": "{{count}} نفر متصل هستند",
   "Local volume": "حجم داخلی",
   "Inspector": "بازرس",
   "Incompatible versions!": "نسخه‌های ناسازگار!",
@@ -72,7 +71,6 @@
   "Register": "ثبت‌نام",
   "Recaptcha not loaded": "کپچا بارگیری نشد",
   "Recaptcha dismissed": "ریکپچا رد شد",
-  "Press and hold spacebar to talk": "برای صحبت کردن کلید فاصله را فشار داده و نگه دارید",
   "Passwords must match": "رمز عبور باید همخوانی داشته باشد",
   "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "کاربران دیگر تلاش می‌کنند با ورژن‌های ناسازگار به مکالمه بپیوندند. این کاربران باید از بروزرسانی مرورگرشان اطمینان داشته باشند:<1>{userLis}</1>",
   "Not registered yet? <2>Create an account</2>": "هنوز ثبت‌نام نکرده‌اید؟ <2>ساخت حساب کاربری</2>",
diff --git a/public/locales/fr/app.json b/public/locales/fr/app.json
index 91b3ba7..353a255 100644
--- a/public/locales/fr/app.json
+++ b/public/locales/fr/app.json
@@ -50,7 +50,6 @@
   "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Des utilisateurs essayent de rejoindre cet appel à partir de versions incompatibles. Ces utilisateurs doivent rafraîchir la page dans leur navigateur : <1>{userLis}</1>",
   "Password": "Mot de passe",
   "Passwords must match": "Les mots de passe doivent correspondre",
-  "Press and hold to talk over {{name}}": "Appuyez et maintenez enfoncé pour parler par dessus {{name}}",
   "Profile": "Profil",
   "Recaptcha dismissed": "Recaptcha refusé",
   "Recaptcha not loaded": "Recaptcha non chargé",
diff --git a/public/locales/ja/app.json b/public/locales/ja/app.json
index 0687914..9aac334 100644
--- a/public/locales/ja/app.json
+++ b/public/locales/ja/app.json
@@ -1,5 +1,4 @@
 {
-  "{{name}} (Waiting for video...)": "{{name}}（ビデオを待機しています…）",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>既にアカウントをお持ちですか？</0><1><0>ログイン</0>または<2>ゲストとしてアクセス</2></1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>アカウントを作成</0>または<2>ゲストとしてアクセス</2>",
   "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>今すぐ通話に参加</0><1>または</1><2>通話リンクをコピーし、後で参加</2>",
diff --git a/public/locales/pl/app.json b/public/locales/pl/app.json
index c8ae0a8..3e2b1d4 100644
--- a/public/locales/pl/app.json
+++ b/public/locales/pl/app.json
@@ -40,7 +40,6 @@
   "Recaptcha not loaded": "Recaptcha nie została załadowana",
   "Recaptcha dismissed": "Recaptcha odrzucona",
   "Profile": "Profil",
-  "Press and hold spacebar to talk": "Przytrzymaj spację, aby mówić",
   "Passwords must match": "Hasła muszą pasować",
   "Password": "Hasło",
   "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Inni użytkownicy próbują dołączyć do tego połączenia przy użyciu niekompatybilnych wersji. Powinni oni upewnić się, że odświeżyli stronę w swoich przeglądarkach:<1>{userLis}</1>",
@@ -93,7 +92,6 @@
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Utwórz konto</0> lub <2>Dołącz jako gość</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Masz już konto?</0><1><0>Zaloguj się</0> lub <2>Dołącz jako gość</2></1>",
   "{{names}}, {{name}}": "{{names}}, {{name}}",
-  "This feature is only supported on Firefox.": "Ta funkcjonalność jest dostępna tylko w Firefox.",
   "Copy": "Kopiuj",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Wysłanie dzienników debuggowania pomoże nam ustalić przyczynę problemu.</0>",
   "<0>Oops, something's gone wrong.</0>": "<0>Ojej, coś poszło nie tak.</0>",
diff --git a/public/locales/ru/app.json b/public/locales/ru/app.json
index 3041cce..5d20cb6 100644
--- a/public/locales/ru/app.json
+++ b/public/locales/ru/app.json
@@ -10,7 +10,6 @@
   "Submit feedback": "Отправить отзыв",
   "Sending debug logs…": "Отправка журнала отладки…",
   "Select an option": "Выберите вариант",
-  "Press and hold spacebar to talk over {{name}}": "Чтобы говорить поверх участника {{name}}, нажмите и удерживайте [Пробел]",
   "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Другие пользователи пытаются присоединиться с неподдерживаемых версий программы. Этим участникам надо перезагрузить браузер: <1>{userLis}</1>",
   "Grid layout menu": "Меню \"Расположение сеткой\"",
   "By clicking \"Join call now\", you agree to our <2>Terms and conditions</2>": "Нажимая \"Присоединиться сейчас\", вы соглашаетесь с нашими <2>положениями и условиями</2>",
@@ -94,7 +93,6 @@
   "Call link copied": "Ссылка на звонок скопирована",
   "Avatar": "Аватар",
   "Audio": "Аудио",
-  "{{name}} is presenting": "{{name}} показывает",
   "Element Call Home": "Главная Element Call",
   "Copy": "Копировать",
   "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Присоединиться сейчас к звонку</0><1>или<1><2>Скопировать ссылку на звонок и присоединиться позже</2>",
diff --git a/public/locales/sk/app.json b/public/locales/sk/app.json
index bae6aac..9266ee6 100644
--- a/public/locales/sk/app.json
+++ b/public/locales/sk/app.json
@@ -22,7 +22,6 @@
   "Recaptcha not loaded": "Recaptcha sa nenačítala",
   "Recaptcha dismissed": "Recaptcha zamietnutá",
   "Profile": "Profil",
-  "Press and hold spacebar to talk": "Stlačte a podržte medzerník, ak chcete hovoriť",
   "Passwords must match": "Heslá sa musia zhodovať",
   "Password": "Heslo",
   "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "Ostatní používatelia sa pokúšajú pripojiť k tomuto hovoru z nekompatibilných verzií. Títo používatelia by sa mali uistiť, že si obnovili svoje prehliadače:<1>{userLis}</1>",
@@ -97,7 +96,6 @@
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Vytvoriť konto</0> Alebo <2>Prihlásiť sa ako hosť</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Už máte konto?</0><1><0>Prihláste sa</0> Alebo <2>Prihlásiť sa ako hosť</2></1>",
   "{{names}}, {{name}}": "{{names}}, {{name}}",
-  "{{name}} (Connecting...)": "{{name}} (Pripájanie...)",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Odoslanie záznamov ladenia nám pomôže nájsť problém.</0>",
   "<0>Oops, something's gone wrong.</0>": "<0>Hups, niečo sa pokazilo.</0>",
   "Expose developer settings in the settings window.": "Zobraziť nastavenia pre vývojárov v okne nastavení.",
diff --git a/public/locales/zh-Hans/app.json b/public/locales/zh-Hans/app.json
index 46f6a9a..a7126f8 100644
--- a/public/locales/zh-Hans/app.json
+++ b/public/locales/zh-Hans/app.json
@@ -31,7 +31,6 @@
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>创建账户</0> Or <2>以访客身份继续</2>",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>已有账户？</0><1><0>登录</0> Or <2>以访客身份继续</2></1>",
   "{{names}}, {{name}}": "{{names}}, {{name}}",
-  "{{name}} (Connecting...)": "{{name}} (正在连接……)",
   "Inspector": "检查器",
   "Show call inspector": "显示通话检查器",
   "Share screen": "屏幕共享",
@@ -47,7 +46,6 @@
   "Recaptcha not loaded": "reCaptcha未加载",
   "Recaptcha dismissed": "reCaptcha验证失败",
   "Profile": "个人信息",
-  "Press and hold spacebar to talk": "按住空格键发言",
   "Passwords must match": "密码必须匹配",
   "Password": "密码",
   "Other users are trying to join this call from incompatible versions. These users should ensure that they have refreshed their browsers:<1>{userLis}</1>": "其他用户正试图从不兼容的版本加入这一呼叫。这些用户应该确保已经刷新了浏览器：<1>{userLis}</1>",

From cd4e5d3543c09582bda5729d50ee124275a9e542 Mon Sep 17 00:00:00 2001
From: Michael Kaye <1917473+michaelkaye@users.noreply.github.com>
Date: Wed, 14 Jun 2023 17:36:26 +0100
Subject: [PATCH 06/18] Push code coverage percentages to codecov.io.

---
 .github/workflows/test.yaml | 3 +++
 package.json                | 7 ++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index 161557d..5143f30 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -16,3 +16,6 @@ jobs:
         run: "yarn install"
       - name: Jest
         run: "yarn run test"
+      - name: Upload to codecov
+        uses: codecov/codecov-action@v3
+        flags: unittests
diff --git a/package.json b/package.json
index 6a077d0..360c84c 100644
--- a/package.json
+++ b/package.json
@@ -122,6 +122,11 @@
       "\\.(css|less|svg)+$": "identity-obj-proxy",
       "^\\./IndexedDBWorker\\?worker$": "<rootDir>/test/mocks/workerMock.ts",
       "^\\./olm$": "<rootDir>/test/mocks/olmMock.ts"
-    }
+    },
+    "collectCoverage": true,
+    "coverageReporters": [
+      "text",
+      "cobertura"
+    ]
   }
 }

From 11733784a6af9932190752d7f553d4c91de4fa3e Mon Sep 17 00:00:00 2001
From: Michael Kaye <1917473+michaelkaye@users.noreply.github.com>
Date: Thu, 22 Jun 2023 09:18:17 +0100
Subject: [PATCH 07/18] Fix typo in github action config.

---
 .github/workflows/test.yaml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
index 5143f30..06dccc2 100644
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -18,4 +18,5 @@ jobs:
         run: "yarn run test"
       - name: Upload to codecov
         uses: codecov/codecov-action@v3
-        flags: unittests
+        with:
+          flags: unittests

From cc35f243f2ddfb974e36cc09c3429df5afa952a2 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Tue, 27 Jun 2023 12:19:06 -0400
Subject: [PATCH 08/18] Make NewVideoGrid support arbitrary layout systems
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In preparation for adding layouts other than big grid to the NewVideoGrid component, I've abstracted the grid layout system into an interface called Layout. For now, the only implementation of this interface is BigGrid, but this will allow us to easily plug in Spotlight, SplitGrid, and OneOnOne layout systems so we can get rid of the old VideoGrid component and have One Grid to Rule Them All™.

Please do shout if any of this seems obtuse or underdocumented, because I'm not super happy with how approachable the NewVideoGrid code looks right now…

Incidentally, this refactoring made it way easier to save the state of the grid while in fullscreen / another layout, so I went ahead and did that.
---
 src/room/InCallView.tsx                       |   7 +-
 src/video-grid/BigGrid.module.css             |  29 ++
 src/video-grid/{model.ts => BigGrid.tsx}      | 257 ++++++++++--
 src/video-grid/Layout.ts                      |  74 ++++
 src/video-grid/NewVideoGrid.module.css        |  11 +-
 src/video-grid/NewVideoGrid.tsx               | 368 ++++++++----------
 src/video-grid/VideoGrid.tsx                  |   2 +
 .../{model-test.ts => BigGrid-test.ts}        |  51 +--
 8 files changed, 501 insertions(+), 298 deletions(-)
 create mode 100644 src/video-grid/BigGrid.module.css
 rename src/video-grid/{model.ts => BigGrid.tsx} (74%)
 create mode 100644 src/video-grid/Layout.ts
 rename test/video-grid/{model-test.ts => BigGrid-test.ts} (88%)

diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 7125720..4a3fc4a 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -73,7 +73,7 @@ import { useJoinRule } from "./useJoinRule";
 import { ParticipantInfo } from "./useGroupCall";
 import { ItemData, TileContent } from "../video-grid/VideoTile";
 import { Config } from "../config/Config";
-import { NewVideoGrid } from "../video-grid/NewVideoGrid";
+import { NewVideoGrid, useLayoutStates } from "../video-grid/NewVideoGrid";
 import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal } from "../settings/SettingsModal";
 import { InviteModal } from "./InviteModal";
@@ -253,6 +253,10 @@ export function InCallView({
 
   const prefersReducedMotion = usePrefersReducedMotion();
 
+  // This state is lifted out of NewVideoGrid so that layout states can be
+  // restored after a layout switch or upon exiting fullscreen
+  const layoutStates = useLayoutStates();
+
   const renderContent = (): JSX.Element => {
     if (items.length === 0) {
       return (
@@ -282,6 +286,7 @@ export function InCallView({
         items={items}
         layout={layout}
         disableAnimations={prefersReducedMotion || isSafari}
+        layoutStates={layoutStates}
       >
         {(props) => (
           <VideoTile
diff --git a/src/video-grid/BigGrid.module.css b/src/video-grid/BigGrid.module.css
new file mode 100644
index 0000000..cde593a
--- /dev/null
+++ b/src/video-grid/BigGrid.module.css
@@ -0,0 +1,29 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.bigGrid {
+  display: grid;
+  grid-auto-rows: 163px;
+  gap: 8px;
+}
+
+@media (min-width: 800px) {
+  .bigGrid {
+    grid-auto-rows: 183px;
+    column-gap: 18px;
+    row-gap: 21px;
+  }
+}
diff --git a/src/video-grid/model.ts b/src/video-grid/BigGrid.tsx
similarity index 74%
rename from src/video-grid/model.ts
rename to src/video-grid/BigGrid.tsx
index 974a755..650278d 100644
--- a/src/video-grid/model.ts
+++ b/src/video-grid/BigGrid.tsx
@@ -15,33 +15,48 @@ limitations under the License.
 */
 
 import TinyQueue from "tinyqueue";
+import { RectReadOnly } from "react-use-measure";
+import { FC, memo, ReactNode } from "react";
+import React from "react";
 
 import { TileDescriptor } from "./VideoGrid";
+import { Slot } from "./NewVideoGrid";
+import { Layout } from "./Layout";
 import { count, findLastIndex } from "../array-utils";
+import styles from "./BigGrid.module.css";
 
 /**
  * A 1×1 cell in a grid which belongs to a tile.
  */
-export interface Cell {
+interface Cell {
   /**
    * The item displayed on the tile.
    */
-  item: TileDescriptor<unknown>;
+  readonly item: TileDescriptor<unknown>;
   /**
    * Whether this cell is the origin (top left corner) of the tile.
    */
-  origin: boolean;
+  readonly origin: boolean;
   /**
    * The width, in columns, of the tile.
    */
-  columns: number;
+  readonly columns: number;
   /**
    * The height, in rows, of the tile.
    */
-  rows: number;
+  readonly rows: number;
 }
 
-export interface Grid {
+export interface BigGridState {
+  readonly columns: number;
+  /**
+   * The cells of the grid, in left-to-right top-to-bottom order.
+   * undefined = empty.
+   */
+  readonly cells: (Cell | undefined)[];
+}
+
+interface MutableBigGridState {
   columns: number;
   /**
    * The cells of the grid, in left-to-right top-to-bottom order.
@@ -58,7 +73,7 @@ export interface Grid {
  * @returns An array in which each cell holds the index of the next cell to move
  *   to to reach the destination, or null if it is the destination.
  */
-export function getPaths(dest: number, g: Grid): (number | null)[] {
+export function getPaths(dest: number, g: BigGridState): (number | null)[] {
   const destRow = row(dest, g);
   const destColumn = column(dest, g);
 
@@ -106,18 +121,23 @@ export function getPaths(dest: number, g: Grid): (number | null)[] {
   return edges as (number | null)[];
 }
 
-const findLast1By1Index = (g: Grid): number | null =>
+const findLast1By1Index = (g: BigGridState): number | null =>
   findLastIndex(g.cells, (c) => c?.rows === 1 && c?.columns === 1);
 
-export function row(index: number, g: Grid): number {
+export function row(index: number, g: BigGridState): number {
   return Math.floor(index / g.columns);
 }
 
-export function column(index: number, g: Grid): number {
+export function column(index: number, g: BigGridState): number {
   return ((index % g.columns) + g.columns) % g.columns;
 }
 
-function inArea(index: number, start: number, end: number, g: Grid): boolean {
+function inArea(
+  index: number,
+  start: number,
+  end: number,
+  g: BigGridState
+): boolean {
   const indexColumn = column(index, g);
   const indexRow = row(index, g);
   return (
@@ -131,7 +151,7 @@ function inArea(index: number, start: number, end: number, g: Grid): boolean {
 function* cellsInArea(
   start: number,
   end: number,
-  g: Grid
+  g: BigGridState
 ): Generator<number, void, unknown> {
   const startColumn = column(start, g);
   const endColumn = column(end, g);
@@ -149,7 +169,7 @@ function* cellsInArea(
 export function forEachCellInArea(
   start: number,
   end: number,
-  g: Grid,
+  g: BigGridState,
   fn: (c: Cell | undefined, i: number) => void
 ): void {
   for (const i of cellsInArea(start, end, g)) fn(g.cells[i], i);
@@ -158,7 +178,7 @@ export function forEachCellInArea(
 function allCellsInArea(
   start: number,
   end: number,
-  g: Grid,
+  g: BigGridState,
   fn: (c: Cell | undefined, i: number) => boolean
 ): boolean {
   for (const i of cellsInArea(start, end, g)) {
@@ -172,16 +192,19 @@ const areaEnd = (
   start: number,
   columns: number,
   rows: number,
-  g: Grid
+  g: BigGridState
 ): number => start + columns - 1 + g.columns * (rows - 1);
 
-const cloneGrid = (g: Grid): Grid => ({ ...g, cells: [...g.cells] });
+const cloneGrid = (g: BigGridState): BigGridState => ({
+  ...g,
+  cells: [...g.cells],
+});
 
 /**
  * Gets the index of the next gap in the grid that should be backfilled by 1×1
  * tiles.
  */
-function getNextGap(g: Grid): number | null {
+function getNextGap(g: BigGridState): number | null {
   const last1By1Index = findLast1By1Index(g);
   if (last1By1Index === null) return null;
 
@@ -204,7 +227,7 @@ function getNextGap(g: Grid): number | null {
 /**
  * Gets the index of the origin of the tile to which the given cell belongs.
  */
-function getOrigin(g: Grid, index: number): number {
+function getOrigin(g: BigGridState, index: number): number {
   const initialColumn = column(index, g);
 
   for (
@@ -229,7 +252,7 @@ function getOrigin(g: Grid, index: number): number {
  * along the way.
  * Precondition: the destination area must consist of only 1×1 tiles.
  */
-function moveTile(g: Grid, from: number, to: number) {
+function moveTileUnchecked(g: BigGridState, from: number, to: number) {
   const tile = g.cells[from]!;
   const fromEnd = areaEnd(from, tile.columns, tile.rows, g);
   const toEnd = areaEnd(to, tile.columns, tile.rows, g);
@@ -262,10 +285,15 @@ function moveTile(g: Grid, from: number, to: number) {
 /**
  * Moves the tile at index "from" over to index "to", if there is space.
  */
-export function tryMoveTile(g: Grid, from: number, to: number): Grid {
+export function moveTile(
+  g: BigGridState,
+  from: number,
+  to: number
+): BigGridState {
   const tile = g.cells[from]!;
 
   if (
+    to !== from && // Skip the operation if nothing would move
     to >= 0 &&
     to < g.cells.length &&
     column(to, g) <= g.columns - tile.columns
@@ -283,7 +311,7 @@ export function tryMoveTile(g: Grid, from: number, to: number): Grid {
     if (allCellsInArea(to, toEnd, g, displaceable)) {
       // The target space is free; move
       const gClone = cloneGrid(g);
-      moveTile(gClone, from, to);
+      moveTileUnchecked(gClone, from, to);
       return gClone;
     }
   }
@@ -297,7 +325,7 @@ export function tryMoveTile(g: Grid, from: number, to: number): Grid {
  * enlarged tiles around when necessary.
  * @returns Whether the tile was actually pushed
  */
-function pushTileUp(g: Grid, from: number): boolean {
+function pushTileUp(g: BigGridState, from: number): boolean {
   const tile = g.cells[from]!;
 
   // TODO: pushing large tiles sideways might be more successful in some
@@ -315,7 +343,7 @@ function pushTileUp(g: Grid, from: number): boolean {
     );
 
   if (cellsAboveAreDisplacable) {
-    moveTile(g, from, from - g.columns);
+    moveTileUnchecked(g, from, from - g.columns);
     return true;
   } else {
     return false;
@@ -325,8 +353,8 @@ function pushTileUp(g: Grid, from: number): boolean {
 /**
  * Backfill any gaps in the grid.
  */
-export function fillGaps(g: Grid): Grid {
-  const result = cloneGrid(g);
+export function fillGaps(g: BigGridState): BigGridState {
+  const result = cloneGrid(g) as MutableBigGridState;
 
   // This will hopefully be the size of the grid after we're done here, assuming
   // that we can pack the large tiles tightly enough
@@ -403,7 +431,11 @@ export function fillGaps(g: Grid): Grid {
   return result;
 }
 
-function createRows(g: Grid, count: number, atRow: number): Grid {
+function createRows(
+  g: BigGridState,
+  count: number,
+  atRow: number
+): BigGridState {
   const result = {
     columns: g.columns,
     cells: new Array(g.cells.length + g.columns * count),
@@ -430,9 +462,12 @@ function createRows(g: Grid, count: number, atRow: number): Grid {
 }
 
 /**
- * Adds a set of new items into the grid.
+ * Adds a set of new items into the grid. (May leave gaps.)
  */
-export function addItems(items: TileDescriptor<unknown>[], g: Grid): Grid {
+export function addItems(
+  items: TileDescriptor<unknown>[],
+  g: BigGridState
+): BigGridState {
   let result = cloneGrid(g);
 
   for (const item of items) {
@@ -444,13 +479,11 @@ export function addItems(items: TileDescriptor<unknown>[], g: Grid): Grid {
     };
 
     let placeAt: number;
-    let hasGaps: boolean;
 
     if (item.placeNear === undefined) {
       // This item has no special placement requests, so let's put it
       // uneventfully at the end of the grid
       placeAt = result.cells.length;
-      hasGaps = false;
     } else {
       // This item wants to be placed near another; let's put it on a row
       // directly below the related tile
@@ -460,7 +493,6 @@ export function addItems(items: TileDescriptor<unknown>[], g: Grid): Grid {
       if (placeNear === -1) {
         // Can't find the related tile, so let's give up and place it at the end
         placeAt = result.cells.length;
-        hasGaps = false;
       } else {
         const placeNearCell = result.cells[placeNear]!;
         const placeNearEnd = areaEnd(
@@ -475,7 +507,6 @@ export function addItems(items: TileDescriptor<unknown>[], g: Grid): Grid {
           placeNear +
           Math.floor(placeNearCell.columns / 2) +
           result.columns * placeNearCell.rows;
-        hasGaps = true;
       }
     }
 
@@ -484,21 +515,19 @@ export function addItems(items: TileDescriptor<unknown>[], g: Grid): Grid {
     if (item.largeBaseSize) {
       // Cycle the tile size once to set up the tile with its larger base size
       // This also fills any gaps in the grid, hence no extra call to fillGaps
-      result = cycleTileSize(item.id, result);
-    } else if (hasGaps) {
-      result = fillGaps(result);
+      result = cycleTileSize(result, item);
     }
   }
 
   return result;
 }
 
-const largeTileDimensions = (g: Grid): [number, number] => [
+const largeTileDimensions = (g: BigGridState): [number, number] => [
   Math.min(3, Math.max(2, g.columns - 1)),
   2,
 ];
 
-const extraLargeTileDimensions = (g: Grid): [number, number] =>
+const extraLargeTileDimensions = (g: BigGridState): [number, number] =>
   g.columns > 3 ? [4, 3] : [g.columns, 2];
 
 /**
@@ -507,8 +536,11 @@ const extraLargeTileDimensions = (g: Grid): [number, number] =>
  * @param g The grid.
  * @returns The updated grid.
  */
-export function cycleTileSize(tileId: string, g: Grid): Grid {
-  const from = g.cells.findIndex((c) => c?.item.id === tileId);
+export function cycleTileSize(
+  g: BigGridState,
+  tile: TileDescriptor<unknown>
+): BigGridState {
+  const from = g.cells.findIndex((c) => c?.item === tile);
   if (from === -1) return g; // Tile removed, no change
   const fromCell = g.cells[from]!;
   const fromWidth = fromCell.columns;
@@ -629,8 +661,8 @@ export function cycleTileSize(tileId: string, g: Grid): Grid {
 /**
  * Resizes the grid to a new column width.
  */
-export function resize(g: Grid, columns: number): Grid {
-  const result: Grid = { columns, cells: [] };
+export function resize(g: BigGridState, columns: number): BigGridState {
+  const result: BigGridState = { columns, cells: [] };
   const [largeColumns, largeRows] = largeTileDimensions(result);
 
   // Copy each tile from the old grid to the resized one in the same order
@@ -640,6 +672,7 @@ export function resize(g: Grid, columns: number): Grid {
 
   for (const cell of g.cells) {
     if (cell?.origin) {
+      // TODO make aware of extra large tiles
       const [nextColumns, nextRows] =
         cell.columns > 1 || cell.rows > 1 ? [largeColumns, largeRows] : [1, 1];
 
@@ -672,7 +705,7 @@ export function resize(g: Grid, columns: number): Grid {
 /**
  * Promotes speakers to the first page of the grid.
  */
-export function promoteSpeakers(g: Grid) {
+export function promoteSpeakers(g: BigGridState) {
   // This is all a bit of a hack right now, because we don't know if the designs
   // will stick with this approach in the long run
   // We assume that 4 rows are probably about 1 page
@@ -694,10 +727,148 @@ export function promoteSpeakers(g: Grid) {
           toCell === undefined ||
           (toCell.columns === 1 && toCell.rows === 1)
         ) {
-          moveTile(g, from, to);
+          moveTileUnchecked(g, from, to);
           break;
         }
       }
     }
   }
 }
+
+/**
+ * The algorithm for updating a grid with a new set of tiles.
+ */
+function updateTiles(
+  g: BigGridState,
+  tiles: TileDescriptor<unknown>[]
+): BigGridState {
+  // Step 1: Update tiles that still exist, and remove tiles that have left
+  // the grid
+  const itemsById = new Map(tiles.map((i) => [i.id, i]));
+  const grid1: BigGridState = {
+    ...g,
+    cells: g.cells.map((c) => {
+      if (c === undefined) return undefined;
+      const item = itemsById.get(c.item.id);
+      return item === undefined ? undefined : { ...c, item };
+    }),
+  };
+
+  // Step 2: Add new tiles
+  const existingItemIds = new Set(
+    grid1.cells.filter((c) => c !== undefined).map((c) => c!.item.id)
+  );
+  const newItems = tiles.filter((i) => !existingItemIds.has(i.id));
+  const grid2 = addItems(newItems, grid1);
+
+  // Step 3: Promote speakers to the top
+  promoteSpeakers(grid2);
+
+  return fillGaps(grid2);
+}
+
+function updateBounds(g: BigGridState, bounds: RectReadOnly): BigGridState {
+  const columns = Math.max(2, Math.floor(bounds.width * 0.0045));
+  return columns === g.columns ? g : resize(g, columns);
+}
+
+const Slots: FC<{ s: BigGridState }> = memo(({ s: g }) => {
+  const areas = new Array<(number | null)[]>(
+    Math.ceil(g.cells.length / g.columns)
+  );
+  for (let i = 0; i < areas.length; i++)
+    areas[i] = new Array<number | null>(g.columns).fill(null);
+
+  let slotCount = 0;
+  for (let i = 0; i < g.cells.length; i++) {
+    const cell = g.cells[i];
+    if (cell?.origin) {
+      const slotEnd = i + cell.columns - 1 + g.columns * (cell.rows - 1);
+      forEachCellInArea(
+        i,
+        slotEnd,
+        g,
+        (_c, j) => (areas[row(j, g)][column(j, g)] = slotCount)
+      );
+      slotCount++;
+    }
+  }
+
+  const style = {
+    gridTemplateAreas: areas
+      .map(
+        (row) =>
+          `'${row
+            .map((slotId) => (slotId === null ? "." : `s${slotId}`))
+            .join(" ")}'`
+      )
+      .join(" "),
+    gridTemplateColumns: `repeat(${g.columns}, 1fr)`,
+  };
+
+  const slots = new Array<ReactNode>(slotCount);
+  for (let i = 0; i < slotCount; i++)
+    slots[i] = <Slot key={i} style={{ gridArea: `s${i}` }} />;
+
+  return (
+    <div className={styles.bigGrid} style={style}>
+      {slots}
+    </div>
+  );
+});
+
+/**
+ * Given a tile and numbers in the range [0, 1) describing a position within the
+ * tile, this returns the index of the specific cell in which that position
+ * lies.
+ */
+function positionOnTileToCell(
+  g: BigGridState,
+  tileOriginIndex: number,
+  xPositionOnTile: number,
+  yPositionOnTile: number
+): number {
+  const tileOrigin = g.cells[tileOriginIndex]!;
+  const columnOnTile = Math.floor(xPositionOnTile * tileOrigin.columns);
+  const rowOnTile = Math.floor(yPositionOnTile * tileOrigin.rows);
+  return tileOriginIndex + columnOnTile + g.columns * rowOnTile;
+}
+
+function dragTile(
+  g: BigGridState,
+  from: TileDescriptor<unknown>,
+  to: TileDescriptor<unknown>,
+  xPositionOnFrom: number,
+  yPositionOnFrom: number,
+  xPositionOnTo: number,
+  yPositionOnTo: number
+): BigGridState {
+  const fromOrigin = g.cells.findIndex((c) => c?.item === from);
+  const toOrigin = g.cells.findIndex((c) => c?.item === to);
+  const fromCell = positionOnTileToCell(
+    g,
+    fromOrigin,
+    xPositionOnFrom,
+    yPositionOnFrom
+  );
+  const toCell = positionOnTileToCell(
+    g,
+    toOrigin,
+    xPositionOnTo,
+    yPositionOnTo
+  );
+
+  return moveTile(g, fromOrigin, fromOrigin + toCell - fromCell);
+}
+
+export const BigGrid: Layout<BigGridState> = {
+  emptyState: { columns: 4, cells: [] },
+  updateTiles,
+  updateBounds,
+  getTiles: (g) => g.cells.filter((c) => c?.origin).map((c) => c!.item),
+  canDragTile: () => true,
+  dragTile,
+  toggleFocus: cycleTileSize,
+  Slots,
+  rememberState: false,
+};
diff --git a/src/video-grid/Layout.ts b/src/video-grid/Layout.ts
new file mode 100644
index 0000000..d4467aa
--- /dev/null
+++ b/src/video-grid/Layout.ts
@@ -0,0 +1,74 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import type { ComponentType } from "react";
+import type { RectReadOnly } from "react-use-measure";
+import type { TileDescriptor } from "./VideoGrid";
+
+/**
+ * A video grid layout system with concrete states of type State.
+ */
+export interface Layout<State> {
+  /**
+   * The layout state for zero tiles.
+   */
+  readonly emptyState: State;
+  /**
+   * Updates/adds/removes tiles in a way that looks natural in the context of
+   * the given initial state.
+   */
+  readonly updateTiles: (s: State, tiles: TileDescriptor<unknown>[]) => State;
+  /**
+   * Adapts the layout to a new container size.
+   */
+  readonly updateBounds: (s: State, bounds: RectReadOnly) => State;
+  /**
+   * Gets tiles in the order created by the layout.
+   */
+  readonly getTiles: (s: State) => TileDescriptor<unknown>[];
+  /**
+   * Determines whether a tile is draggable.
+   */
+  readonly canDragTile: (s: State, tile: TileDescriptor<unknown>) => boolean;
+  /**
+   * Drags the tile 'from' to the location of the tile 'to' (if possible).
+   * The position parameters are numbers in the range [0, 1) describing the
+   * specific positions on 'from' and 'to' that the drag gesture is targeting.
+   */
+  readonly dragTile: (
+    s: State,
+    from: TileDescriptor<unknown>,
+    to: TileDescriptor<unknown>,
+    xPositionOnFrom: number,
+    yPositionOnFrom: number,
+    xPositionOnTo: number,
+    yPositionOnTo: number
+  ) => State;
+  /**
+   * Toggles the focus of the given tile (if this layout has the concept of
+   * focus).
+   */
+  readonly toggleFocus?: (s: State, tile: TileDescriptor<unknown>) => State;
+  /**
+   * A React component generating the slot elements for a given layout state.
+   */
+  readonly Slots: ComponentType<{ s: State }>;
+  /**
+   * Whether the state of this layout should be remembered even while a
+   * different layout is active.
+   */
+  readonly rememberState: boolean;
+}
diff --git a/src/video-grid/NewVideoGrid.module.css b/src/video-grid/NewVideoGrid.module.css
index 7e34a2d..c822b41 100644
--- a/src/video-grid/NewVideoGrid.module.css
+++ b/src/video-grid/NewVideoGrid.module.css
@@ -23,11 +23,8 @@ limitations under the License.
   overflow-x: hidden;
 }
 
-.slotGrid {
+.slots {
   position: relative;
-  display: grid;
-  grid-auto-rows: 163px;
-  gap: 8px;
 }
 
 .slot {
@@ -38,10 +35,4 @@ limitations under the License.
   .grid {
     padding: 0 22px var(--footerHeight);
   }
-
-  .slotGrid {
-    grid-auto-rows: 183px;
-    column-gap: 18px;
-    row-gap: 21px;
-  }
 }
diff --git a/src/video-grid/NewVideoGrid.tsx b/src/video-grid/NewVideoGrid.tsx
index 754b029..97d9f2c 100644
--- a/src/video-grid/NewVideoGrid.tsx
+++ b/src/video-grid/NewVideoGrid.tsx
@@ -17,17 +17,17 @@ limitations under the License.
 import { SpringRef, TransitionFn, useTransition } from "@react-spring/web";
 import { EventTypes, Handler, useScroll } from "@use-gesture/react";
 import React, {
-  Dispatch,
+  CSSProperties,
+  FC,
   ReactNode,
-  SetStateAction,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
-import useMeasure from "react-use-measure";
-import { zipWith } from "lodash";
+import useMeasure, { RectReadOnly } from "react-use-measure";
+import { zip } from "lodash";
 
 import styles from "./NewVideoGrid.module.css";
 import {
@@ -38,98 +38,85 @@ import {
 } from "./VideoGrid";
 import { useReactiveState } from "../useReactiveState";
 import { useMergedRefs } from "../useMergedRefs";
-import {
-  Grid,
-  Cell,
-  row,
-  column,
-  fillGaps,
-  forEachCellInArea,
-  cycleTileSize,
-  addItems,
-  tryMoveTile,
-  resize,
-  promoteSpeakers,
-} from "./model";
 import { TileWrapper } from "./TileWrapper";
+import { BigGrid } from "./BigGrid";
+import { Layout } from "./Layout";
 
-interface GridState extends Grid {
-  /**
-   * The ID of the current state of the grid.
-   */
-  generation: number;
-}
+export const useLayoutStates = () => {
+  const layoutStates = useRef<Map<Layout<unknown>, unknown>>();
+  if (layoutStates.current === undefined) layoutStates.current = new Map();
+  return layoutStates.current;
+};
 
-const useGridState = (
-  columns: number | null,
-  items: TileDescriptor<unknown>[]
-): [GridState | null, Dispatch<SetStateAction<Grid>>] => {
-  const [grid, setGrid_] = useReactiveState<GridState | null>(
-    (prevGrid = null) => {
-      if (prevGrid === null) {
-        // We can't do anything if the column count isn't known yet
-        if (columns === null) {
-          return null;
-        } else {
-          prevGrid = { generation: 0, columns, cells: [] };
-        }
-      }
+const useGrid = (
+  layout: Layout<unknown>,
+  items: TileDescriptor<unknown>[],
+  bounds: RectReadOnly,
+  layoutStates: Map<Layout<unknown>, unknown>
+) => {
+  const prevLayout = useRef<Layout<unknown>>(layout);
+  const prevState = layoutStates.get(layout);
 
-      // Step 1: Update tiles that still exist, and remove tiles that have left
-      // the grid
-      const itemsById = new Map(items.map((i) => [i.id, i]));
-      const grid1: Grid = {
-        ...prevGrid,
-        cells: prevGrid.cells.map((c) => {
-          if (c === undefined) return undefined;
-          const item = itemsById.get(c.item.id);
-          return item === undefined ? undefined : { ...c, item };
-        }),
-      };
+  const [state, setState] = useReactiveState<unknown>(() => {
+    // If the bounds aren't known yet, don't add anything to the layout
+    if (bounds.width === 0) {
+      return layout.emptyState;
+    } else {
+      if (layout !== prevLayout.current && !prevLayout.current.rememberState)
+        layoutStates.delete(prevLayout.current);
 
-      // Step 2: Resize the grid if necessary and backfill gaps left behind by
-      // removed tiles
-      // Resizing already takes care of backfilling gaps
-      const grid2 =
-        columns !== grid1.columns ? resize(grid1, columns!) : fillGaps(grid1);
+      const baseState = layoutStates.get(layout) ?? layout.emptyState;
+      return layout.updateTiles(layout.updateBounds(baseState, bounds), items);
+    }
+  }, [layout, items, bounds]);
 
-      // Step 3: Add new tiles to the end of the grid
-      const existingItemIds = new Set(
-        grid2.cells.filter((c) => c !== undefined).map((c) => c!.item.id)
-      );
-      const newItems = items.filter((i) => !existingItemIds.has(i.id));
-      const grid3 = addItems(newItems, grid2);
+  const generation = useRef<number>(0);
+  if (state !== prevState) generation.current++;
 
-      // Step 4: Promote speakers to the top
-      promoteSpeakers(grid3);
+  prevLayout.current = layout;
+  // No point in remembering an empty state, plus it would end up clobbering the
+  // real saved state while restoring a layout
+  if (state !== layout.emptyState) layoutStates.set(layout, state);
 
-      return { ...grid3, generation: prevGrid.generation + 1 };
-    },
-    [columns, items]
-  );
-
-  const setGrid: Dispatch<SetStateAction<Grid>> = useCallback(
-    (action) => {
-      if (typeof action === "function") {
-        setGrid_((prevGrid) =>
-          prevGrid === null
-            ? null
-            : {
-                ...(action as (prev: Grid) => Grid)(prevGrid),
-                generation: prevGrid.generation + 1,
-              }
-        );
-      } else {
-        setGrid_((prevGrid) => ({
-          ...action,
-          generation: prevGrid?.generation ?? 1,
-        }));
-      }
-    },
-    [setGrid_]
-  );
-
-  return [grid, setGrid];
+  return {
+    grid: state,
+    orderedItems: useMemo(() => layout.getTiles(state), [layout, state]),
+    generation: generation.current,
+    canDragTile: useCallback(
+      (tile: TileDescriptor<unknown>) => layout.canDragTile(state, tile),
+      [layout, state]
+    ),
+    dragTile: useCallback(
+      (
+        from: TileDescriptor<unknown>,
+        to: TileDescriptor<unknown>,
+        xPositionOnFrom: number,
+        yPositionOnFrom: number,
+        xPositionOnTo: number,
+        yPositionOnTo: number
+      ) =>
+        setState((s) =>
+          layout.dragTile(
+            s,
+            from,
+            to,
+            xPositionOnFrom,
+            yPositionOnFrom,
+            xPositionOnTo,
+            yPositionOnTo
+          )
+        ),
+      [layout, setState]
+    ),
+    toggleFocus: useMemo(
+      () =>
+        layout.toggleFocus &&
+        ((tile: TileDescriptor<unknown>) =>
+          setState((s) => layout.toggleFocus!(s, tile))),
+      [layout, setState]
+    ),
+    slots: <layout.Slots s={state} />,
+  };
 };
 
 interface Rect {
@@ -151,12 +138,21 @@ interface DragState {
   cursorY: number;
 }
 
+interface SlotProps {
+  style?: CSSProperties;
+}
+
+export const Slot: FC<SlotProps> = ({ style }) => (
+  <div className={styles.slot} style={style} />
+);
+
 /**
  * An interactive, animated grid of video tiles.
  */
 export function NewVideoGrid<T>({
   items,
   disableAnimations,
+  layoutStates,
   children,
 }: Props<T>) {
   // Overview: This component lays out tiles by rendering an invisible template
@@ -169,36 +165,36 @@ export function NewVideoGrid<T>({
   // most recently rendered generation of the grid, and watch it with a
   // MutationObserver.
 
-  const [slotGrid, setSlotGrid] = useState<HTMLDivElement | null>(null);
-  const [slotGridGeneration, setSlotGridGeneration] = useState(0);
+  const [slotsRoot, setSlotsRoot] = useState<HTMLDivElement | null>(null);
+  const [renderedGeneration, setRenderedGeneration] = useState(0);
 
   useEffect(() => {
-    if (slotGrid !== null) {
-      setSlotGridGeneration(
-        parseInt(slotGrid.getAttribute("data-generation")!)
+    if (slotsRoot !== null) {
+      setRenderedGeneration(
+        parseInt(slotsRoot.getAttribute("data-generation")!)
       );
 
       const observer = new MutationObserver((mutations) => {
         if (mutations.some((m) => m.type === "attributes")) {
-          setSlotGridGeneration(
-            parseInt(slotGrid.getAttribute("data-generation")!)
+          setRenderedGeneration(
+            parseInt(slotsRoot.getAttribute("data-generation")!)
           );
         }
       });
 
-      observer.observe(slotGrid, { attributes: true });
+      observer.observe(slotsRoot, { attributes: true });
       return () => observer.disconnect();
     }
-  }, [slotGrid, setSlotGridGeneration]);
+  }, [slotsRoot, setRenderedGeneration]);
 
   const [gridRef1, gridBounds] = useMeasure();
   const gridRef2 = useRef<HTMLDivElement | null>(null);
   const gridRef = useMergedRefs(gridRef1, gridRef2);
 
   const slotRects = useMemo(() => {
-    if (slotGrid === null) return [];
+    if (slotsRoot === null) return [];
 
-    const slots = slotGrid.getElementsByClassName(styles.slot);
+    const slots = slotsRoot.getElementsByClassName(styles.slot);
     const rects = new Array<Rect>(slots.length);
     for (let i = 0; i < slots.length; i++) {
       const slot = slots[i] as HTMLElement;
@@ -214,32 +210,34 @@ export function NewVideoGrid<T>({
     // The rects may change due to the grid being resized or rerendered, but
     // eslint can't statically verify this
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [slotGrid, slotGridGeneration, gridBounds]);
+  }, [slotsRoot, renderedGeneration, gridBounds]);
 
-  const columns = useMemo(
-    () =>
-      // The grid bounds might not be known yet
-      gridBounds.width === 0
-        ? null
-        : Math.max(2, Math.floor(gridBounds.width * 0.0045)),
-    [gridBounds]
-  );
-
-  const [grid, setGrid] = useGridState(columns, items);
+  // TODO: Implement more layouts and select the right one here
+  const layout = BigGrid;
+  const {
+    grid,
+    orderedItems,
+    generation,
+    canDragTile,
+    dragTile,
+    toggleFocus,
+    slots,
+  } = useGrid(layout as Layout<unknown>, items, gridBounds, layoutStates);
 
   const [tiles] = useReactiveState<Tile[]>(
     (prevTiles) => {
       // If React hasn't yet rendered the current generation of the grid, skip
       // the update, because grid and slotRects will be out of sync
-      if (slotGridGeneration !== grid?.generation) return prevTiles ?? [];
+      if (renderedGeneration !== generation) return prevTiles ?? [];
 
-      const tileCells = grid.cells.filter((c) => c?.origin) as Cell[];
       const tileRects = new Map<TileDescriptor<unknown>, Rect>(
-        zipWith(tileCells, slotRects, (cell, rect) => [cell.item, rect])
+        zip(orderedItems, slotRects) as [TileDescriptor<unknown>, Rect][]
       );
+      // In order to not break drag gestures, it's critical that we render tiles
+      // in a stable order (that of 'items')
       return items.map((item) => ({ ...tileRects.get(item)!, item }));
     },
-    [slotRects, grid, slotGridGeneration]
+    [slotRects, grid, renderedGeneration]
   );
 
   // Drag state is stored in a ref rather than component state, because we use
@@ -288,8 +286,6 @@ export function NewVideoGrid<T>({
   const animateDraggedTile = (endOfGesture: boolean) => {
     const { tileId, tileX, tileY, cursorX, cursorY } = dragState.current!;
     const tile = tiles.find((t) => t.item.id === tileId)!;
-    const originIndex = grid!.cells.findIndex((c) => c?.item.id === tileId);
-    const originCell = grid!.cells[originIndex]!;
 
     springRef.current
       .find((c) => (c.item as Tile).item.id === tileId)
@@ -320,36 +316,23 @@ export function NewVideoGrid<T>({
             }
       );
 
-    const columns = grid!.columns;
-    const rows = row(grid!.cells.length - 1, grid!) + 1;
-
-    const cursorColumn = Math.floor(
-      (cursorX / slotGrid!.clientWidth) * columns
-    );
-    const cursorRow = Math.floor((cursorY / slotGrid!.clientHeight) * rows);
-
-    const cursorColumnOnTile = Math.floor(
-      ((cursorX - tileX) / tile.width) * originCell.columns
-    );
-    const cursorRowOnTile = Math.floor(
-      ((cursorY - tileY) / tile.height) * originCell.rows
+    const overTile = tiles.find(
+      (t) =>
+        cursorX >= t.x &&
+        cursorX < t.x + t.width &&
+        cursorY >= t.y &&
+        cursorY < t.y + t.height
     );
 
-    const dest =
-      Math.max(
-        0,
-        Math.min(
-          columns - originCell.columns,
-          cursorColumn - cursorColumnOnTile
-        )
-      ) +
-      grid!.columns *
-        Math.max(
-          0,
-          Math.min(rows - originCell.rows, cursorRow - cursorRowOnTile)
-        );
-
-    if (dest !== originIndex) setGrid((g) => tryMoveTile(g, originIndex, dest));
+    if (overTile !== undefined)
+      dragTile(
+        tile.item,
+        overTile.item,
+        (cursorX - tileX) / tile.width,
+        (cursorY - tileY) / tile.height,
+        (cursorX - overTile.x) / overTile.width,
+        (cursorY - overTile.y) / overTile.height
+      );
   };
 
   // Callback for useDrag. We could call useDrag here, but the default
@@ -367,29 +350,33 @@ export function NewVideoGrid<T>({
     }: Parameters<Handler<"drag", EventTypes["drag"]>>[0]
   ) => {
     if (tap) {
-      setGrid((g) => cycleTileSize(tileId, g!));
+      toggleFocus?.(items.find((i) => i.id === tileId)!);
     } else {
-      const tileSpring = springRef.current
-        .find((c) => (c.item as Tile).item.id === tileId)!
-        .get();
+      const tileController = springRef.current.find(
+        (c) => (c.item as Tile).item.id === tileId
+      )!;
 
-      if (dragState.current === null) {
-        dragState.current = {
-          tileId,
-          tileX: tileSpring.x,
-          tileY: tileSpring.y,
-          cursorX: initialX - gridBounds.x,
-          cursorY: initialY - gridBounds.y + scrollOffset.current,
-        };
+      if (canDragTile((tileController.item as Tile).item)) {
+        if (dragState.current === null) {
+          const tileSpring = tileController.get();
+          dragState.current = {
+            tileId,
+            tileX: tileSpring.x,
+            tileY: tileSpring.y,
+            cursorX: initialX - gridBounds.x,
+            cursorY: initialY - gridBounds.y + scrollOffset.current,
+          };
+        }
+
+        dragState.current.tileX += dx;
+        dragState.current.tileY += dy;
+        dragState.current.cursorX += dx;
+        dragState.current.cursorY += dy;
+
+        animateDraggedTile(last);
+
+        if (last) dragState.current = null;
       }
-      dragState.current.tileX += dx;
-      dragState.current.tileY += dy;
-      dragState.current.cursorX += dx;
-      dragState.current.cursorY += dy;
-
-      animateDraggedTile(last);
-
-      if (last) dragState.current = null;
     }
   };
 
@@ -411,52 +398,6 @@ export function NewVideoGrid<T>({
     { target: gridRef2 }
   );
 
-  const slotGridStyle = useMemo(() => {
-    if (grid === null) return {};
-
-    const areas = new Array<(number | null)[]>(
-      Math.ceil(grid.cells.length / grid.columns)
-    );
-    for (let i = 0; i < areas.length; i++)
-      areas[i] = new Array<number | null>(grid.columns).fill(null);
-
-    let slotId = 0;
-    for (let i = 0; i < grid.cells.length; i++) {
-      const cell = grid.cells[i];
-      if (cell?.origin) {
-        const slotEnd = i + cell.columns - 1 + grid.columns * (cell.rows - 1);
-        forEachCellInArea(
-          i,
-          slotEnd,
-          grid,
-          (_c, j) => (areas[row(j, grid)][column(j, grid)] = slotId)
-        );
-        slotId++;
-      }
-    }
-
-    return {
-      gridTemplateAreas: areas
-        .map(
-          (row) =>
-            `'${row
-              .map((slotId) => (slotId === null ? "." : `s${slotId}`))
-              .join(" ")}'`
-        )
-        .join(" "),
-      gridTemplateColumns: `repeat(${columns}, 1fr)`,
-    };
-  }, [grid, columns]);
-
-  const slots = useMemo(() => {
-    const slots = new Array<ReactNode>(items.length);
-    for (let i = 0; i < items.length; i++)
-      slots[i] = (
-        <div className={styles.slot} key={i} style={{ gridArea: `s${i}` }} />
-      );
-    return slots;
-  }, [items.length]);
-
   // Render nothing if the grid has yet to be generated
   if (grid === null) {
     return <div ref={gridRef} className={styles.grid} />;
@@ -465,10 +406,9 @@ export function NewVideoGrid<T>({
   return (
     <div ref={gridRef} className={styles.grid}>
       <div
-        style={slotGridStyle}
-        ref={setSlotGrid}
-        className={styles.slotGrid}
-        data-generation={grid.generation}
+        ref={setSlotsRoot}
+        className={styles.slots}
+        data-generation={generation}
       >
         {slots}
       </div>
diff --git a/src/video-grid/VideoGrid.tsx b/src/video-grid/VideoGrid.tsx
index d87f58b..acf3cf5 100644
--- a/src/video-grid/VideoGrid.tsx
+++ b/src/video-grid/VideoGrid.tsx
@@ -42,6 +42,7 @@ import { ResizeObserver as JuggleResizeObserver } from "@juggle/resize-observer"
 import styles from "./VideoGrid.module.css";
 import { Layout } from "../room/GridLayoutMenu";
 import { TileWrapper } from "./TileWrapper";
+import { Layout as LayoutSystem } from "./Layout";
 
 interface TilePosition {
   x: number;
@@ -817,6 +818,7 @@ export interface VideoGridProps<T> {
   items: TileDescriptor<T>[];
   layout: Layout;
   disableAnimations: boolean;
+  layoutStates: Map<LayoutSystem<unknown>, unknown>;
   children: (props: ChildrenProperties<T>) => React.ReactNode;
 }
 
diff --git a/test/video-grid/model-test.ts b/test/video-grid/BigGrid-test.ts
similarity index 88%
rename from test/video-grid/model-test.ts
rename to test/video-grid/BigGrid-test.ts
index 3699487..b035bd2 100644
--- a/test/video-grid/model-test.ts
+++ b/test/video-grid/BigGrid-test.ts
@@ -20,23 +20,23 @@ import {
   cycleTileSize,
   fillGaps,
   forEachCellInArea,
-  Grid,
+  BigGridState,
   resize,
   row,
-  tryMoveTile,
-} from "../../src/video-grid/model";
+  moveTile,
+} from "../../src/video-grid/BigGrid";
 import { TileDescriptor } from "../../src/video-grid/VideoGrid";
 
 /**
  * Builds a grid from a string specifying the contents of each cell as a letter.
  */
-function mkGrid(spec: string): Grid {
+function mkGrid(spec: string): BigGridState {
   const secondNewline = spec.indexOf("\n", 1);
   const columns = secondNewline === -1 ? spec.length : secondNewline - 1;
   const cells = spec.match(/[a-z ]/g) ?? ([] as string[]);
   const areas = new Set(cells);
   areas.delete(" "); // Space represents an empty cell, not an area
-  const grid: Grid = { columns, cells: new Array(cells.length) };
+  const grid: BigGridState = { columns, cells: new Array(cells.length) };
 
   for (const area of areas) {
     const start = cells.indexOf(area);
@@ -60,12 +60,12 @@ function mkGrid(spec: string): Grid {
 /**
  * Turns a grid into a string showing the contents of each cell as a letter.
  */
-function showGrid(g: Grid): string {
+function showGrid(g: BigGridState): string {
   let result = "\n";
-  g.cells.forEach((c, i) => {
+  for (let i = 0; i < g.cells.length; i++) {
     if (i > 0 && i % g.columns == 0) result += "\n";
-    result += c?.item.id ?? " ";
-  });
+    result += g.cells[i]?.item.id ?? " ";
+  }
   return result;
 }
 
@@ -222,21 +222,12 @@ function testCycleTileSize(
   output: string
 ): void {
   test(`cycleTileSize ${title}`, () => {
-    expect(showGrid(cycleTileSize(tileId, mkGrid(input)))).toBe(output);
+    const grid = mkGrid(input);
+    const tile = grid.cells.find((c) => c?.item.id === tileId)!.item;
+    expect(showGrid(cycleTileSize(grid, tile))).toBe(output);
   });
 }
 
-testCycleTileSize(
-  "does nothing if the tile is not present",
-  "z",
-  `
-abcd
-efgh`,
-  `
-abcd
-efgh`
-);
-
 testCycleTileSize(
   "expands a tile to 2×2 in a 3 column layout",
   "c",
@@ -345,8 +336,8 @@ abc
 def`,
   `
 abc
-gfe
-d`
+ g 
+def`
 );
 
 testAddItems(
@@ -362,19 +353,19 @@ gge
 d`
 );
 
-function testTryMoveTile(
+function testMoveTile(
   title: string,
   from: number,
   to: number,
   input: string,
   output: string
 ): void {
-  test(`tryMoveTile ${title}`, () => {
-    expect(showGrid(tryMoveTile(mkGrid(input), from, to))).toBe(output);
+  test(`moveTile ${title}`, () => {
+    expect(showGrid(moveTile(mkGrid(input), from, to))).toBe(output);
   });
 }
 
-testTryMoveTile(
+testMoveTile(
   "refuses to move a tile too far to the left",
   1,
   -1,
@@ -384,7 +375,7 @@ abc`,
 abc`
 );
 
-testTryMoveTile(
+testMoveTile(
   "refuses to move a tile too far to the right",
   1,
   3,
@@ -394,7 +385,7 @@ abc`,
 abc`
 );
 
-testTryMoveTile(
+testMoveTile(
   "moves a large tile to an unoccupied space",
   3,
   1,
@@ -408,7 +399,7 @@ bcc
 d e`
 );
 
-testTryMoveTile(
+testMoveTile(
   "refuses to move a large tile to an occupied space",
   3,
   1,

From d91be3433d07f79b27949c04bd7040790a869833 Mon Sep 17 00:00:00 2001
From: Glandos <bugs-github@antipoul.fr>
Date: Tue, 27 Jun 2023 09:15:18 +0000
Subject: [PATCH 09/18] Translated using Weblate (French)

Currently translated at 100.0% (117 of 117 strings)

Translation: Element Call/element-call
Translate-URL: https://translate.element.io/projects/element-call/element-call/fr/
---
 public/locales/fr/app.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/public/locales/fr/app.json b/public/locales/fr/app.json
index 353a255..837c677 100644
--- a/public/locales/fr/app.json
+++ b/public/locales/fr/app.json
@@ -113,5 +113,7 @@
   "{{count}} stars|one": "{{count}} favori",
   "{{displayName}}, your call has ended.": "{{displayName}}, votre appel est terminé.",
   "<0>Thanks for your feedback!</0>": "<0>Merci pour votre commentaire !</0>",
-  "How did it go?": "Comment cela s’est-il passé ?"
+  "How did it go?": "Comment cela s’est-il passé ?",
+  "{{displayName}} is presenting": "{{displayName}} est à l’écran",
+  "Show connection stats": "Afficher les statistiques de la connexion"
 }

From a5df558264348d4e8508c4bd45c9efca47662f27 Mon Sep 17 00:00:00 2001
From: Jozef Gaal <preklady@mayday.sk>
Date: Tue, 27 Jun 2023 14:24:34 +0000
Subject: [PATCH 10/18] Translated using Weblate (Slovak)

Currently translated at 100.0% (117 of 117 strings)

Translation: Element Call/element-call
Translate-URL: https://translate.element.io/projects/element-call/element-call/sk/
---
 public/locales/sk/app.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/public/locales/sk/app.json b/public/locales/sk/app.json
index 9266ee6..57b0e26 100644
--- a/public/locales/sk/app.json
+++ b/public/locales/sk/app.json
@@ -113,5 +113,7 @@
   "{{count}} stars|other": "{{count}} hviezdičiek",
   "{{displayName}}, your call has ended.": "{{displayName}}, váš hovor skončil.",
   "<0>Thanks for your feedback!</0>": "<0> Ďakujeme za vašu spätnú väzbu!</0>",
-  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0> Radi si vypočujeme vašu spätnú väzbu, aby sme mohli zlepšiť vaše skúsenosti.</0>"
+  "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0> Radi si vypočujeme vašu spätnú väzbu, aby sme mohli zlepšiť vaše skúsenosti.</0>",
+  "{{displayName}} is presenting": "{{displayName}} prezentuje",
+  "Show connection stats": "Zobraziť štatistiky pripojenia"
 }

From 12e008a434839bc16499ca73924277e21831a832 Mon Sep 17 00:00:00 2001
From: Vri <element@vrifox.cc>
Date: Wed, 28 Jun 2023 04:04:23 +0000
Subject: [PATCH 11/18] Translated using Weblate (German)

Currently translated at 100.0% (117 of 117 strings)

Translation: Element Call/element-call
Translate-URL: https://translate.element.io/projects/element-call/element-call/de/
---
 public/locales/de/app.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/public/locales/de/app.json b/public/locales/de/app.json
index ef6a8f3..516ad79 100644
--- a/public/locales/de/app.json
+++ b/public/locales/de/app.json
@@ -113,5 +113,7 @@
   "<0>We'd love to hear your feedback so we can improve your experience.</0>": "<0>Wir würden uns freuen, deine Rückmeldung zu hören, um deine Erfahrung verbessern zu können.</0>",
   "How did it go?": "Wie ist es gelaufen?",
   "{{count}} stars|one": "{{count}} Stern",
-  "<0>Thanks for your feedback!</0>": "<0>Danke für deine Rückmeldung!</0>"
+  "<0>Thanks for your feedback!</0>": "<0>Danke für deine Rückmeldung!</0>",
+  "{{displayName}} is presenting": "{{displayName}} präsentiert",
+  "Show connection stats": "Verbindungsstatistiken zeigen"
 }

From 1c6ef974576c5a39f4fb6a31595d0cd28c34e09b Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Wed, 28 Jun 2023 10:59:36 -0400
Subject: [PATCH 12/18] Improve typing around layouts and grid components

---
 src/room/InCallView.tsx         |   3 +-
 src/video-grid/BigGrid.tsx      |   3 +-
 src/video-grid/Layout.ts        |  74 -------------
 src/video-grid/Layout.tsx       | 178 ++++++++++++++++++++++++++++++++
 src/video-grid/NewVideoGrid.tsx | 112 +++-----------------
 src/video-grid/TileWrapper.tsx  |   9 +-
 src/video-grid/VideoGrid.tsx    |   4 +-
 7 files changed, 207 insertions(+), 176 deletions(-)
 delete mode 100644 src/video-grid/Layout.ts
 create mode 100644 src/video-grid/Layout.tsx

diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 4a3fc4a..a8a171b 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -73,7 +73,7 @@ import { useJoinRule } from "./useJoinRule";
 import { ParticipantInfo } from "./useGroupCall";
 import { ItemData, TileContent } from "../video-grid/VideoTile";
 import { Config } from "../config/Config";
-import { NewVideoGrid, useLayoutStates } from "../video-grid/NewVideoGrid";
+import { NewVideoGrid } from "../video-grid/NewVideoGrid";
 import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal } from "../settings/SettingsModal";
 import { InviteModal } from "./InviteModal";
@@ -83,6 +83,7 @@ import { VideoTile } from "../video-grid/VideoTile";
 import { UserChoices, useLiveKit } from "../livekit/useLiveKit";
 import { useMediaDevices } from "../livekit/useMediaDevices";
 import { useFullscreen } from "./useFullscreen";
+import { useLayoutStates } from "../video-grid/Layout";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
diff --git a/src/video-grid/BigGrid.tsx b/src/video-grid/BigGrid.tsx
index 650278d..f08676f 100644
--- a/src/video-grid/BigGrid.tsx
+++ b/src/video-grid/BigGrid.tsx
@@ -865,7 +865,8 @@ export const BigGrid: Layout<BigGridState> = {
   emptyState: { columns: 4, cells: [] },
   updateTiles,
   updateBounds,
-  getTiles: (g) => g.cells.filter((c) => c?.origin).map((c) => c!.item),
+  getTiles: <T,>(g) =>
+    g.cells.filter((c) => c?.origin).map((c) => c!.item as T),
   canDragTile: () => true,
   dragTile,
   toggleFocus: cycleTileSize,
diff --git a/src/video-grid/Layout.ts b/src/video-grid/Layout.ts
deleted file mode 100644
index d4467aa..0000000
--- a/src/video-grid/Layout.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import type { ComponentType } from "react";
-import type { RectReadOnly } from "react-use-measure";
-import type { TileDescriptor } from "./VideoGrid";
-
-/**
- * A video grid layout system with concrete states of type State.
- */
-export interface Layout<State> {
-  /**
-   * The layout state for zero tiles.
-   */
-  readonly emptyState: State;
-  /**
-   * Updates/adds/removes tiles in a way that looks natural in the context of
-   * the given initial state.
-   */
-  readonly updateTiles: (s: State, tiles: TileDescriptor<unknown>[]) => State;
-  /**
-   * Adapts the layout to a new container size.
-   */
-  readonly updateBounds: (s: State, bounds: RectReadOnly) => State;
-  /**
-   * Gets tiles in the order created by the layout.
-   */
-  readonly getTiles: (s: State) => TileDescriptor<unknown>[];
-  /**
-   * Determines whether a tile is draggable.
-   */
-  readonly canDragTile: (s: State, tile: TileDescriptor<unknown>) => boolean;
-  /**
-   * Drags the tile 'from' to the location of the tile 'to' (if possible).
-   * The position parameters are numbers in the range [0, 1) describing the
-   * specific positions on 'from' and 'to' that the drag gesture is targeting.
-   */
-  readonly dragTile: (
-    s: State,
-    from: TileDescriptor<unknown>,
-    to: TileDescriptor<unknown>,
-    xPositionOnFrom: number,
-    yPositionOnFrom: number,
-    xPositionOnTo: number,
-    yPositionOnTo: number
-  ) => State;
-  /**
-   * Toggles the focus of the given tile (if this layout has the concept of
-   * focus).
-   */
-  readonly toggleFocus?: (s: State, tile: TileDescriptor<unknown>) => State;
-  /**
-   * A React component generating the slot elements for a given layout state.
-   */
-  readonly Slots: ComponentType<{ s: State }>;
-  /**
-   * Whether the state of this layout should be remembered even while a
-   * different layout is active.
-   */
-  readonly rememberState: boolean;
-}
diff --git a/src/video-grid/Layout.tsx b/src/video-grid/Layout.tsx
new file mode 100644
index 0000000..2b29594
--- /dev/null
+++ b/src/video-grid/Layout.tsx
@@ -0,0 +1,178 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { ComponentType, useCallback, useMemo, useRef } from "react";
+
+import type { RectReadOnly } from "react-use-measure";
+import { useReactiveState } from "../useReactiveState";
+import type { TileDescriptor } from "./VideoGrid";
+
+/**
+ * A video grid layout system with concrete states of type State.
+ */
+// Ideally State would be parameterized by the tile data type, but then that
+// makes Layout a higher-kinded type, which isn't achievable in TypeScript
+// (unless you invoke some dark type-level computation magic… 😏)
+// So we're stuck with these types being a little too strong.
+export interface Layout<State> {
+  /**
+   * The layout state for zero tiles.
+   */
+  readonly emptyState: State;
+  /**
+   * Updates/adds/removes tiles in a way that looks natural in the context of
+   * the given initial state.
+   */
+  readonly updateTiles: <T>(s: State, tiles: TileDescriptor<T>[]) => State;
+  /**
+   * Adapts the layout to a new container size.
+   */
+  readonly updateBounds: (s: State, bounds: RectReadOnly) => State;
+  /**
+   * Gets tiles in the order created by the layout.
+   */
+  readonly getTiles: <T>(s: State) => TileDescriptor<T>[];
+  /**
+   * Determines whether a tile is draggable.
+   */
+  readonly canDragTile: <T>(s: State, tile: TileDescriptor<T>) => boolean;
+  /**
+   * Drags the tile 'from' to the location of the tile 'to' (if possible).
+   * The position parameters are numbers in the range [0, 1) describing the
+   * specific positions on 'from' and 'to' that the drag gesture is targeting.
+   */
+  readonly dragTile: <T>(
+    s: State,
+    from: TileDescriptor<T>,
+    to: TileDescriptor<T>,
+    xPositionOnFrom: number,
+    yPositionOnFrom: number,
+    xPositionOnTo: number,
+    yPositionOnTo: number
+  ) => State;
+  /**
+   * Toggles the focus of the given tile (if this layout has the concept of
+   * focus).
+   */
+  readonly toggleFocus?: <T>(s: State, tile: TileDescriptor<T>) => State;
+  /**
+   * A React component generating the slot elements for a given layout state.
+   */
+  readonly Slots: ComponentType<{ s: State }>;
+  /**
+   * Whether the state of this layout should be remembered even while a
+   * different layout is active.
+   */
+  readonly rememberState: boolean;
+}
+
+/**
+ * A version of Map with stronger types that allow us to save layout states in a
+ * type-safe way.
+ */
+export interface LayoutStatesMap {
+  get<State>(layout: Layout<State>): State | undefined;
+  set<State>(layout: Layout<State>, state: State): LayoutStatesMap;
+  delete<State>(layout: Layout<State>): boolean;
+}
+
+/**
+ * Hook creating a Map to store layout states in.
+ */
+export const useLayoutStates = (): LayoutStatesMap => {
+  const layoutStates = useRef<Map<unknown, unknown>>();
+  if (layoutStates.current === undefined) layoutStates.current = new Map();
+  return layoutStates.current as LayoutStatesMap;
+};
+
+/**
+ * Hook which uses the provided layout system to arrange a set of items into a
+ * concrete layout state, and provides callbacks for user interaction.
+ */
+export const useLayout = <State, T>(
+  layout: Layout<State>,
+  items: TileDescriptor<T>[],
+  bounds: RectReadOnly,
+  layoutStates: LayoutStatesMap
+) => {
+  const prevLayout = useRef<Layout<unknown>>();
+  const prevState = layoutStates.get(layout);
+
+  const [state, setState] = useReactiveState<State>(() => {
+    // If the bounds aren't known yet, don't add anything to the layout
+    if (bounds.width === 0) {
+      return layout.emptyState;
+    } else {
+      if (
+        prevLayout.current !== undefined &&
+        layout !== prevLayout.current &&
+        !prevLayout.current.rememberState
+      )
+        layoutStates.delete(prevLayout.current);
+
+      const baseState = layoutStates.get(layout) ?? layout.emptyState;
+      return layout.updateTiles(layout.updateBounds(baseState, bounds), items);
+    }
+  }, [layout, items, bounds]);
+
+  const generation = useRef<number>(0);
+  if (state !== prevState) generation.current++;
+
+  prevLayout.current = layout as Layout<unknown>;
+  // No point in remembering an empty state, plus it would end up clobbering the
+  // real saved state while restoring a layout
+  if (state !== layout.emptyState) layoutStates.set(layout, state);
+
+  return {
+    state,
+    orderedItems: useMemo(() => layout.getTiles<T>(state), [layout, state]),
+    generation: generation.current,
+    canDragTile: useCallback(
+      (tile: TileDescriptor<T>) => layout.canDragTile(state, tile),
+      [layout, state]
+    ),
+    dragTile: useCallback(
+      (
+        from: TileDescriptor<T>,
+        to: TileDescriptor<T>,
+        xPositionOnFrom: number,
+        yPositionOnFrom: number,
+        xPositionOnTo: number,
+        yPositionOnTo: number
+      ) =>
+        setState((s) =>
+          layout.dragTile(
+            s,
+            from,
+            to,
+            xPositionOnFrom,
+            yPositionOnFrom,
+            xPositionOnTo,
+            yPositionOnTo
+          )
+        ),
+      [layout, setState]
+    ),
+    toggleFocus: useMemo(
+      () =>
+        layout.toggleFocus &&
+        ((tile: TileDescriptor<T>) =>
+          setState((s) => layout.toggleFocus!(s, tile))),
+      [layout, setState]
+    ),
+    slots: <layout.Slots s={state} />,
+  };
+};
diff --git a/src/video-grid/NewVideoGrid.tsx b/src/video-grid/NewVideoGrid.tsx
index 97d9f2c..b88128d 100644
--- a/src/video-grid/NewVideoGrid.tsx
+++ b/src/video-grid/NewVideoGrid.tsx
@@ -20,13 +20,12 @@ import React, {
   CSSProperties,
   FC,
   ReactNode,
-  useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
-import useMeasure, { RectReadOnly } from "react-use-measure";
+import useMeasure from "react-use-measure";
 import { zip } from "lodash";
 
 import styles from "./NewVideoGrid.module.css";
@@ -40,84 +39,7 @@ import { useReactiveState } from "../useReactiveState";
 import { useMergedRefs } from "../useMergedRefs";
 import { TileWrapper } from "./TileWrapper";
 import { BigGrid } from "./BigGrid";
-import { Layout } from "./Layout";
-
-export const useLayoutStates = () => {
-  const layoutStates = useRef<Map<Layout<unknown>, unknown>>();
-  if (layoutStates.current === undefined) layoutStates.current = new Map();
-  return layoutStates.current;
-};
-
-const useGrid = (
-  layout: Layout<unknown>,
-  items: TileDescriptor<unknown>[],
-  bounds: RectReadOnly,
-  layoutStates: Map<Layout<unknown>, unknown>
-) => {
-  const prevLayout = useRef<Layout<unknown>>(layout);
-  const prevState = layoutStates.get(layout);
-
-  const [state, setState] = useReactiveState<unknown>(() => {
-    // If the bounds aren't known yet, don't add anything to the layout
-    if (bounds.width === 0) {
-      return layout.emptyState;
-    } else {
-      if (layout !== prevLayout.current && !prevLayout.current.rememberState)
-        layoutStates.delete(prevLayout.current);
-
-      const baseState = layoutStates.get(layout) ?? layout.emptyState;
-      return layout.updateTiles(layout.updateBounds(baseState, bounds), items);
-    }
-  }, [layout, items, bounds]);
-
-  const generation = useRef<number>(0);
-  if (state !== prevState) generation.current++;
-
-  prevLayout.current = layout;
-  // No point in remembering an empty state, plus it would end up clobbering the
-  // real saved state while restoring a layout
-  if (state !== layout.emptyState) layoutStates.set(layout, state);
-
-  return {
-    grid: state,
-    orderedItems: useMemo(() => layout.getTiles(state), [layout, state]),
-    generation: generation.current,
-    canDragTile: useCallback(
-      (tile: TileDescriptor<unknown>) => layout.canDragTile(state, tile),
-      [layout, state]
-    ),
-    dragTile: useCallback(
-      (
-        from: TileDescriptor<unknown>,
-        to: TileDescriptor<unknown>,
-        xPositionOnFrom: number,
-        yPositionOnFrom: number,
-        xPositionOnTo: number,
-        yPositionOnTo: number
-      ) =>
-        setState((s) =>
-          layout.dragTile(
-            s,
-            from,
-            to,
-            xPositionOnFrom,
-            yPositionOnFrom,
-            xPositionOnTo,
-            yPositionOnTo
-          )
-        ),
-      [layout, setState]
-    ),
-    toggleFocus: useMemo(
-      () =>
-        layout.toggleFocus &&
-        ((tile: TileDescriptor<unknown>) =>
-          setState((s) => layout.toggleFocus!(s, tile))),
-      [layout, setState]
-    ),
-    slots: <layout.Slots s={state} />,
-  };
-};
+import { useLayout } from "./Layout";
 
 interface Rect {
   x: number;
@@ -126,8 +48,8 @@ interface Rect {
   height: number;
 }
 
-interface Tile extends Rect {
-  item: TileDescriptor<unknown>;
+interface Tile<T> extends Rect {
+  item: TileDescriptor<T>;
 }
 
 interface DragState {
@@ -215,23 +137,23 @@ export function NewVideoGrid<T>({
   // TODO: Implement more layouts and select the right one here
   const layout = BigGrid;
   const {
-    grid,
+    state: grid,
     orderedItems,
     generation,
     canDragTile,
     dragTile,
     toggleFocus,
     slots,
-  } = useGrid(layout as Layout<unknown>, items, gridBounds, layoutStates);
+  } = useLayout(layout, items, gridBounds, layoutStates);
 
-  const [tiles] = useReactiveState<Tile[]>(
+  const [tiles] = useReactiveState<Tile<T>[]>(
     (prevTiles) => {
       // If React hasn't yet rendered the current generation of the grid, skip
       // the update, because grid and slotRects will be out of sync
       if (renderedGeneration !== generation) return prevTiles ?? [];
 
-      const tileRects = new Map<TileDescriptor<unknown>, Rect>(
-        zip(orderedItems, slotRects) as [TileDescriptor<unknown>, Rect][]
+      const tileRects = new Map(
+        zip(orderedItems, slotRects) as [TileDescriptor<T>, Rect][]
       );
       // In order to not break drag gestures, it's critical that we render tiles
       // in a stable order (that of 'items')
@@ -247,8 +169,8 @@ export function NewVideoGrid<T>({
   const [tileTransitions, springRef] = useTransition(
     tiles,
     () => ({
-      key: ({ item }: Tile) => item.id,
-      from: ({ x, y, width, height }: Tile) => ({
+      key: ({ item }: Tile<T>) => item.id,
+      from: ({ x, y, width, height }: Tile<T>) => ({
         opacity: 0,
         scale: 0,
         shadow: 1,
@@ -261,7 +183,7 @@ export function NewVideoGrid<T>({
         immediate: disableAnimations,
       }),
       enter: { opacity: 1, scale: 1, immediate: disableAnimations },
-      update: ({ item, x, y, width, height }: Tile) =>
+      update: ({ item, x, y, width, height }: Tile<T>) =>
         item.id === dragState.current?.tileId
           ? null
           : {
@@ -275,7 +197,7 @@ export function NewVideoGrid<T>({
       config: { mass: 0.7, tension: 252, friction: 25 },
     })
     // react-spring's types are bugged and can't infer the spring type
-  ) as unknown as [TransitionFn<Tile, TileSpring>, SpringRef<TileSpring>];
+  ) as unknown as [TransitionFn<Tile<T>, TileSpring>, SpringRef<TileSpring>];
 
   // Because we're using react-spring in imperative mode, we're responsible for
   // firing animations manually whenever the tiles array updates
@@ -288,7 +210,7 @@ export function NewVideoGrid<T>({
     const tile = tiles.find((t) => t.item.id === tileId)!;
 
     springRef.current
-      .find((c) => (c.item as Tile).item.id === tileId)
+      .find((c) => (c.item as Tile<T>).item.id === tileId)
       ?.start(
         endOfGesture
           ? {
@@ -353,10 +275,10 @@ export function NewVideoGrid<T>({
       toggleFocus?.(items.find((i) => i.id === tileId)!);
     } else {
       const tileController = springRef.current.find(
-        (c) => (c.item as Tile).item.id === tileId
+        (c) => (c.item as Tile<T>).item.id === tileId
       )!;
 
-      if (canDragTile((tileController.item as Tile).item)) {
+      if (canDragTile((tileController.item as Tile<T>).item)) {
         if (dragState.current === null) {
           const tileSpring = tileController.get();
           dragState.current = {
@@ -422,7 +344,7 @@ export function NewVideoGrid<T>({
           data={tile.item.data}
           {...spring}
         >
-          {children as (props: ChildrenProperties<unknown>) => ReactNode}
+          {children as (props: ChildrenProperties<T>) => ReactNode}
         </TileWrapper>
       ))}
     </div>
diff --git a/src/video-grid/TileWrapper.tsx b/src/video-grid/TileWrapper.tsx
index b9f84b5..09b67aa 100644
--- a/src/video-grid/TileWrapper.tsx
+++ b/src/video-grid/TileWrapper.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FC, memo, ReactNode, RefObject, useRef } from "react";
+import React, { memo, ReactNode, RefObject, useRef } from "react";
 import { EventTypes, Handler, useDrag } from "@use-gesture/react";
 import { SpringValue, to } from "@react-spring/web";
 
@@ -47,7 +47,7 @@ interface Props<T> {
  * A wrapper around a tile in a video grid. This component exists to decouple
  * child components from the grid.
  */
-export const TileWrapper: FC<Props<unknown>> = memo(
+export const TileWrapper = memo(
   ({
     id,
     onDragRef,
@@ -97,4 +97,7 @@ export const TileWrapper: FC<Props<unknown>> = memo(
       </>
     );
   }
-);
+  // We pretend this component is a simple function rather than a
+  // NamedExoticComponent, because that's the only way we can fit in a type
+  // parameter
+) as <T>(props: Props<T>) => JSX.Element;
diff --git a/src/video-grid/VideoGrid.tsx b/src/video-grid/VideoGrid.tsx
index acf3cf5..a9b847b 100644
--- a/src/video-grid/VideoGrid.tsx
+++ b/src/video-grid/VideoGrid.tsx
@@ -42,7 +42,7 @@ import { ResizeObserver as JuggleResizeObserver } from "@juggle/resize-observer"
 import styles from "./VideoGrid.module.css";
 import { Layout } from "../room/GridLayoutMenu";
 import { TileWrapper } from "./TileWrapper";
-import { Layout as LayoutSystem } from "./Layout";
+import { LayoutStatesMap } from "./Layout";
 
 interface TilePosition {
   x: number;
@@ -818,7 +818,7 @@ export interface VideoGridProps<T> {
   items: TileDescriptor<T>[];
   layout: Layout;
   disableAnimations: boolean;
-  layoutStates: Map<LayoutSystem<unknown>, unknown>;
+  layoutStates: LayoutStatesMap;
   children: (props: ChildrenProperties<T>) => React.ReactNode;
 }
 

From 87bd9cf026c8b0b5ad79fed184393019ac0462cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 28 Jun 2023 18:11:51 +0200
Subject: [PATCH 13/18] Remove avatar from header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/Header.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/Header.tsx b/src/Header.tsx
index c79953c..d9ad1e9 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -24,9 +24,7 @@ import styles from "./Header.module.css";
 import { useModalTriggerState } from "./Modal";
 import { Button } from "./button";
 import { ReactComponent as Logo } from "./icons/Logo.svg";
-import { ReactComponent as VideoIcon } from "./icons/Video.svg";
 import { Subtitle } from "./typography/Typography";
-import { Avatar, Size } from "./Avatar";
 import { IncompatibleVersionModal } from "./IncompatibleVersionModal";
 
 interface HeaderProps extends HTMLAttributes<HTMLElement> {
@@ -122,15 +120,6 @@ interface RoomHeaderInfo {
 export function RoomHeaderInfo({ roomName, avatarUrl }: RoomHeaderInfo) {
   return (
     <>
-      <div className={styles.roomAvatar}>
-        <Avatar
-          size={Size.MD}
-          src={avatarUrl ?? undefined}
-          bgKey={roomName}
-          fallback={roomName.slice(0, 1).toUpperCase()}
-        />
-        <VideoIcon width={16} height={16} />
-      </div>
       <Subtitle data-testid="roomHeader_roomName" fontWeight="semiBold">
         {roomName}
       </Subtitle>

From 8cafe0f25d8d4a459d8e635d073e53ffce56e2b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 29 Jun 2023 08:03:30 +0200
Subject: [PATCH 14/18] Remove `roomAvatarUrl` from `MatrixInfo`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/Header.tsx             | 3 +--
 src/room/GroupCallView.tsx | 3 ---
 src/room/InCallView.tsx    | 5 +----
 src/room/LobbyView.tsx     | 5 +----
 src/room/VideoPreview.tsx  | 1 -
 5 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/Header.tsx b/src/Header.tsx
index d9ad1e9..8974bcc 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -114,10 +114,9 @@ export function HeaderLogo({ className }: HeaderLogoProps) {
 
 interface RoomHeaderInfo {
   roomName: string;
-  avatarUrl: string | null;
 }
 
-export function RoomHeaderInfo({ roomName, avatarUrl }: RoomHeaderInfo) {
+export function RoomHeaderInfo({ roomName }: RoomHeaderInfo) {
   return (
     <>
       <Subtitle data-testid="roomHeader_roomName" fontWeight="semiBold">
diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx
index 471bfa4..3872ec2 100644
--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -35,7 +35,6 @@ import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
 import { UserChoices } from "../livekit/useLiveKit";
 import { findDeviceByName } from "../media-utils";
-import { useRoomAvatar } from "./useRoomAvatar";
 
 declare global {
   interface Window {
@@ -82,14 +81,12 @@ export function GroupCallView({
   }, [groupCall]);
 
   const { displayName, avatarUrl } = useProfile(client);
-  const roomAvatarUrl = useRoomAvatar(groupCall.room);
 
   const matrixInfo: MatrixInfo = {
     displayName,
     avatarUrl,
     roomName: groupCall.room.name,
     roomIdOrAlias,
-    roomAvatarUrl,
   };
 
   useEffect(() => {
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 7125720..617c66a 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -389,10 +389,7 @@ export function InCallView({
       {!hideHeader && maximisedParticipant === null && (
         <Header>
           <LeftNav>
-            <RoomHeaderInfo
-              roomName={matrixInfo.roomName}
-              avatarUrl={matrixInfo.roomAvatarUrl}
-            />
+            <RoomHeaderInfo roomName={matrixInfo.roomName} />
             <VersionMismatchWarning
               users={unencryptedEventsFromUsers}
               room={groupCall.room}
diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx
index ce301a0..4fb9f0f 100644
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -55,10 +55,7 @@ export function LobbyView(props: Props) {
       {!props.hideHeader && (
         <Header>
           <LeftNav>
-            <RoomHeaderInfo
-              roomName={props.matrixInfo.roomName}
-              avatarUrl={props.matrixInfo.roomAvatarUrl}
-            />
+            <RoomHeaderInfo roomName={props.matrixInfo.roomName} />
           </LeftNav>
           <RightNav>
             <UserMenuContainer />
diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx
index ed31f6e..6c7cbf4 100644
--- a/src/room/VideoPreview.tsx
+++ b/src/room/VideoPreview.tsx
@@ -35,7 +35,6 @@ export type MatrixInfo = {
   avatarUrl: string;
   roomName: string;
   roomIdOrAlias: string;
-  roomAvatarUrl: string | null;
 };
 
 interface Props {

From 52ed76a02f7e90c054443508a275f39fc8da54c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 29 Jun 2023 18:33:06 +0200
Subject: [PATCH 15/18] Double click to cycle size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/video-grid/NewVideoGrid.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/video-grid/NewVideoGrid.tsx b/src/video-grid/NewVideoGrid.tsx
index b88128d..d6c3718 100644
--- a/src/video-grid/NewVideoGrid.tsx
+++ b/src/video-grid/NewVideoGrid.tsx
@@ -257,6 +257,11 @@ export function NewVideoGrid<T>({
       );
   };
 
+  const [lastTappedTileId, setLastTappedTileId] = useState<string | undefined>(
+    undefined
+  );
+  const [lastTapTime, setLastTapTime] = useState<number>(0);
+
   // Callback for useDrag. We could call useDrag here, but the default
   // pattern of spreading {...bind()} across the children to bind the gesture
   // ends up breaking memoization and ruining this component's performance.
@@ -272,7 +277,14 @@ export function NewVideoGrid<T>({
     }: Parameters<Handler<"drag", EventTypes["drag"]>>[0]
   ) => {
     if (tap) {
-      toggleFocus?.(items.find((i) => i.id === tileId)!);
+      const now = Date.now();
+
+      if (tileId === lastTappedTileId && now - lastTapTime < 500) {
+        toggleFocus?.(items.find((i) => i.id === tileId)!);
+      }
+
+      setLastTappedTileId(tileId);
+      setLastTapTime(now);
     } else {
       const tileController = springRef.current.find(
         (c) => (c.item as Tile<T>).item.id === tileId

From 17450b453195aedeb3abb4d91d12672135e85688 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Fri, 30 Jun 2023 18:21:18 -0400
Subject: [PATCH 16/18] Fix big grid crashing due to missing React import

by fixing the cause rather than the symptom: this upgrades the code to use the new, recommended JSX transform mode of React 17+, which no longer requires you to import React manually just to write JSX.
---
 .gitignore                            |   1 +
 .storybook/preview.jsx                |   1 -
 package.json                          |   5 +-
 src/App.tsx                           |   2 +-
 src/Avatar.tsx                        |   6 +-
 src/ClientContext.tsx                 |   2 +-
 src/Facepile.tsx                      |   2 +-
 src/FullScreenView.tsx                |   2 +-
 src/Header.stories.jsx                |   1 -
 src/Header.tsx                        |   2 +-
 src/IncompatibleVersionModal.tsx      |   4 +-
 src/ListBox.tsx                       |   6 +-
 src/Menu.tsx                          |   2 +-
 src/Modal.tsx                         |   2 +-
 src/SequenceDiagramViewerPage.tsx     |   2 +-
 src/Tooltip.tsx                       |   2 +-
 src/UserMenu.tsx                      |   2 +-
 src/UserMenuContainer.tsx             |   2 +-
 src/analytics/AnalyticsNotice.tsx     |   2 +-
 src/auth/LoginPage.tsx                |   2 +-
 src/auth/RegisterPage.tsx             |   2 +-
 src/button/Button.tsx                 |   2 +-
 src/button/CopyButton.tsx             |   1 -
 src/button/LinkButton.tsx             |   2 +-
 src/button/VolumeIcon.tsx             |   2 -
 src/form/Form.tsx                     |   2 +-
 src/home/CallList.tsx                 |   1 -
 src/home/CallTypeDropdown.tsx         |   2 +-
 src/home/HomePage.tsx                 |   1 -
 src/home/JoinExistingCallModal.tsx    |   1 -
 src/home/RegisteredView.tsx           |   7 +-
 src/home/UnauthenticatedView.tsx      |   2 +-
 src/input/AvatarInputField.tsx        |   4 +-
 src/input/Input.tsx                   |  13 +-
 src/input/SelectInput.tsx             |   2 +-
 src/input/StarRatingInput.tsx         |   2 +-
 src/livekit/useLiveKit.ts             |   6 +-
 src/main.tsx                          |   2 +-
 src/popover/Popover.tsx               |   2 +-
 src/popover/PopoverMenu.tsx           |   2 +-
 src/room/CallEndedView.tsx            |   2 +-
 src/room/GridLayoutMenu.tsx           |   2 +-
 src/room/GroupCallInspector.tsx       |  12 +-
 src/room/GroupCallLoader.tsx          |   2 +-
 src/room/GroupCallView.tsx            |   2 +-
 src/room/InCallView.tsx               |  11 +-
 src/room/InviteModal.tsx              |   2 +-
 src/room/LobbyView.tsx                |   8 +-
 src/room/RageshakeRequestModal.tsx    |   2 +-
 src/room/RoomAuthView.tsx             |   2 +-
 src/room/RoomPage.tsx                 |   2 +-
 src/room/RoomRedirect.tsx             |   2 +-
 src/room/VideoPreview.tsx             |  14 +-
 src/settings/FeedbackSettingsTab.tsx  |   2 +-
 src/settings/ProfileSettingsTab.tsx   |   2 +-
 src/settings/SettingsModal.tsx        |  10 +-
 src/tabs/Tabs.stories.tsx             |   4 +-
 src/tabs/Tabs.tsx                     |   2 +-
 src/typography/Typography.stories.tsx |   4 +-
 src/video-grid/BigGrid.tsx            |   1 -
 src/video-grid/NewVideoGrid.tsx       |   2 +-
 src/video-grid/TileWrapper.tsx        |   2 +-
 src/video-grid/VideoGrid.tsx          |   4 +-
 src/video-grid/VideoTile.tsx          |   8 +-
 test/home/CallList-test.tsx           |   2 -
 tsconfig.json                         |   2 +-
 vite.config.js                        |   7 +-
 yarn.lock                             | 706 ++++++++++++++++++--------
 68 files changed, 600 insertions(+), 329 deletions(-)

diff --git a/.gitignore b/.gitignore
index 263dea0..6ad79d7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@ dist-ssr
 .idea/
 public/config.json
 /coverage
+yarn-error.log
diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
index 9fda6df..928e10e 100644
--- a/.storybook/preview.jsx
+++ b/.storybook/preview.jsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { addDecorator } from "@storybook/react";
 import { MemoryRouter } from "react-router-dom";
 import { usePageFocusStyle } from "../src/usePageFocusStyle";
diff --git a/package.json b/package.json
index 360c84c..c98dbe5 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "@types/grecaptcha": "^3.0.4",
     "@types/sdp-transform": "^2.4.5",
     "@use-gesture/react": "^10.2.11",
+    "@vitejs/plugin-react": "^4.0.1",
     "classnames": "^2.3.1",
     "color-hash": "^2.0.1",
     "events": "^3.3.0",
@@ -105,9 +106,9 @@
     "storybook-builder-vite": "^0.1.12",
     "typescript": "^4.9.5",
     "typescript-strict-plugin": "^2.0.1",
-    "vite": "^2.4.2",
+    "vite": "^4.2.0",
     "vite-plugin-html-template": "^1.1.0",
-    "vite-plugin-svgr": "^0.4.0"
+    "vite-plugin-svgr": "^3.2.0"
   },
   "jest": {
     "testEnvironment": "jsdom",
diff --git a/src/App.tsx b/src/App.tsx
index f859a19..d020655 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { Suspense, useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { OverlayProvider } from "@react-aria/overlays";
diff --git a/src/Avatar.tsx b/src/Avatar.tsx
index a6d151f..9549cd4 100644
--- a/src/Avatar.tsx
+++ b/src/Avatar.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useMemo, CSSProperties } from "react";
+import { useMemo, CSSProperties, HTMLAttributes, FC } from "react";
 import classNames from "classnames";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 
@@ -62,7 +62,7 @@ function hashStringToArrIndex(str: string, arrLength: number) {
 const resolveAvatarSrc = (client: MatrixClient, src: string, size: number) =>
   src?.startsWith("mxc://") ? client && getAvatarUrl(client, src, size) : src;
 
-interface Props extends React.HTMLAttributes<HTMLDivElement> {
+interface Props extends HTMLAttributes<HTMLDivElement> {
   bgKey?: string;
   src?: string;
   size?: Size | number;
@@ -71,7 +71,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   fallback: string;
 }
 
-export const Avatar: React.FC<Props> = ({
+export const Avatar: FC<Props> = ({
   bgKey,
   src,
   fallback,
diff --git a/src/ClientContext.tsx b/src/ClientContext.tsx
index 08593a4..c69dd44 100644
--- a/src/ClientContext.tsx
+++ b/src/ClientContext.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {
+import {
   FC,
   useCallback,
   useEffect,
diff --git a/src/Facepile.tsx b/src/Facepile.tsx
index 79e2788..f5ffff6 100644
--- a/src/Facepile.tsx
+++ b/src/Facepile.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { HTMLAttributes, useMemo } from "react";
+import { HTMLAttributes, useMemo } from "react";
 import classNames from "classnames";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
diff --git a/src/FullScreenView.tsx b/src/FullScreenView.tsx
index 774e55a..95a8a7a 100644
--- a/src/FullScreenView.tsx
+++ b/src/FullScreenView.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode, useCallback, useEffect } from "react";
+import { ReactNode, useCallback, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import classNames from "classnames";
 import { Trans, useTranslation } from "react-i18next";
diff --git a/src/Header.stories.jsx b/src/Header.stories.jsx
index 2ab1696..e5c4473 100644
--- a/src/Header.stories.jsx
+++ b/src/Header.stories.jsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { GridLayoutMenu } from "./room/GridLayoutMenu";
 import {
   Header,
diff --git a/src/Header.tsx b/src/Header.tsx
index 8974bcc..8d754b9 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import classNames from "classnames";
-import React, { HTMLAttributes, ReactNode, useCallback } from "react";
+import { HTMLAttributes, ReactNode, useCallback } from "react";
 import { Link } from "react-router-dom";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { useTranslation } from "react-i18next";
diff --git a/src/IncompatibleVersionModal.tsx b/src/IncompatibleVersionModal.tsx
index 49c9044..d11822d 100644
--- a/src/IncompatibleVersionModal.tsx
+++ b/src/IncompatibleVersionModal.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { Room } from "matrix-js-sdk/src/models/room";
-import React, { useMemo } from "react";
+import { FC, useMemo } from "react";
 import { Trans, useTranslation } from "react-i18next";
 
 import { Modal, ModalContent } from "./Modal";
@@ -27,7 +27,7 @@ interface Props {
   onClose: () => void;
 }
 
-export const IncompatibleVersionModal: React.FC<Props> = ({
+export const IncompatibleVersionModal: FC<Props> = ({
   userIds,
   room,
   onClose,
diff --git a/src/ListBox.tsx b/src/ListBox.tsx
index 121f367..0ee2542 100644
--- a/src/ListBox.tsx
+++ b/src/ListBox.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useRef } from "react";
+import { MutableRefObject, PointerEvent, useCallback, useRef } from "react";
 import { useListBox, useOption, AriaListBoxOptions } from "@react-aria/listbox";
 import { ListState } from "@react-stately/list";
 import { Node } from "@react-types/shared";
@@ -26,7 +26,7 @@ interface ListBoxProps<T> extends AriaListBoxOptions<T> {
   optionClassName: string;
   state: ListState<T>;
   className?: string;
-  listBoxRef?: React.MutableRefObject<HTMLUListElement>;
+  listBoxRef?: MutableRefObject<HTMLUListElement>;
 }
 
 export function ListBox<T>({
@@ -84,7 +84,7 @@ function Option<T>({ item, state, className }: OptionProps<T>) {
   delete optionProps.onPointerUp;
   optionProps.onClick = useCallback(
     (e) => {
-      origPointerUp(e as unknown as React.PointerEvent<HTMLElement>);
+      origPointerUp(e as unknown as PointerEvent<HTMLElement>);
     },
     [origPointerUp]
   );
diff --git a/src/Menu.tsx b/src/Menu.tsx
index 0a995af..1e15841 100644
--- a/src/Menu.tsx
+++ b/src/Menu.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { Key, useRef, useState } from "react";
+import { Key, useRef, useState } from "react";
 import { AriaMenuOptions, useMenu, useMenuItem } from "@react-aria/menu";
 import { TreeState, useTreeState } from "@react-stately/tree";
 import { mergeProps } from "@react-aria/utils";
diff --git a/src/Modal.tsx b/src/Modal.tsx
index 6c24f0a..0721753 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -16,7 +16,7 @@ limitations under the License.
 
 /* eslint-disable jsx-a11y/no-autofocus */
 
-import React, { useRef, useMemo, ReactNode } from "react";
+import { useRef, useMemo, ReactNode } from "react";
 import {
   useOverlay,
   usePreventScroll,
diff --git a/src/SequenceDiagramViewerPage.tsx b/src/SequenceDiagramViewerPage.tsx
index e04837d..208352f 100644
--- a/src/SequenceDiagramViewerPage.tsx
+++ b/src/SequenceDiagramViewerPage.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import {
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
index c2f64f2..e090633 100644
--- a/src/Tooltip.tsx
+++ b/src/Tooltip.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {
+import {
   ForwardedRef,
   forwardRef,
   ReactElement,
diff --git a/src/UserMenu.tsx b/src/UserMenu.tsx
index afb4248..5648edd 100644
--- a/src/UserMenu.tsx
+++ b/src/UserMenu.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { Item } from "@react-stately/collections";
 import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
diff --git a/src/UserMenuContainer.tsx b/src/UserMenuContainer.tsx
index 0a116d9..4702c4f 100644
--- a/src/UserMenuContainer.tsx
+++ b/src/UserMenuContainer.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 
 import { useClient } from "./ClientContext";
diff --git a/src/analytics/AnalyticsNotice.tsx b/src/analytics/AnalyticsNotice.tsx
index feceef7..544de61 100644
--- a/src/analytics/AnalyticsNotice.tsx
+++ b/src/analytics/AnalyticsNotice.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { Trans } from "react-i18next";
 
 import { Link } from "../typography/Typography";
diff --git a/src/auth/LoginPage.tsx b/src/auth/LoginPage.tsx
index 68cd326..c5a090f 100644
--- a/src/auth/LoginPage.tsx
+++ b/src/auth/LoginPage.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FC, FormEvent, useCallback, useRef, useState } from "react";
+import { FC, FormEvent, useCallback, useRef, useState } from "react";
 import { useHistory, useLocation, Link } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 
diff --git a/src/auth/RegisterPage.tsx b/src/auth/RegisterPage.tsx
index 5eec26d..fd8e3f0 100644
--- a/src/auth/RegisterPage.tsx
+++ b/src/auth/RegisterPage.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {
+import {
   ChangeEvent,
   FC,
   FormEvent,
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index 289f2b9..50184f0 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import React, { forwardRef, useCallback } from "react";
+import { forwardRef, useCallback } from "react";
 import { PressEvent } from "@react-types/shared";
 import classNames from "classnames";
 import { useButton } from "@react-aria/button";
diff --git a/src/button/CopyButton.tsx b/src/button/CopyButton.tsx
index 7453e45..91c8e75 100644
--- a/src/button/CopyButton.tsx
+++ b/src/button/CopyButton.tsx
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
 import { useTranslation } from "react-i18next";
 import useClipboard from "react-use-clipboard";
 
diff --git a/src/button/LinkButton.tsx b/src/button/LinkButton.tsx
index e918965..3f3b1d5 100644
--- a/src/button/LinkButton.tsx
+++ b/src/button/LinkButton.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { HTMLAttributes } from "react";
+import { HTMLAttributes } from "react";
 import { Link } from "react-router-dom";
 import classNames from "classnames";
 import * as H from "history";
diff --git a/src/button/VolumeIcon.tsx b/src/button/VolumeIcon.tsx
index d4958e4..163699f 100644
--- a/src/button/VolumeIcon.tsx
+++ b/src/button/VolumeIcon.tsx
@@ -15,8 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-
 import { ReactComponent as AudioMuted } from "../icons/AudioMuted.svg";
 import { ReactComponent as AudioLow } from "../icons/AudioLow.svg";
 import { ReactComponent as Audio } from "../icons/Audio.svg";
diff --git a/src/form/Form.tsx b/src/form/Form.tsx
index fd98a62..5496179 100644
--- a/src/form/Form.tsx
+++ b/src/form/Form.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import classNames from "classnames";
-import React, { FormEventHandler, forwardRef, ReactNode } from "react";
+import { FormEventHandler, forwardRef, ReactNode } from "react";
 
 import styles from "./Form.module.css";
 
diff --git a/src/home/CallList.tsx b/src/home/CallList.tsx
index b2a7774..545dfad 100644
--- a/src/home/CallList.tsx
+++ b/src/home/CallList.tsx
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
 import { Link } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
diff --git a/src/home/CallTypeDropdown.tsx b/src/home/CallTypeDropdown.tsx
index 991c528..712523d 100644
--- a/src/home/CallTypeDropdown.tsx
+++ b/src/home/CallTypeDropdown.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FC } from "react";
+import { FC } from "react";
 import { Item } from "@react-stately/collections";
 import { useTranslation } from "react-i18next";
 
diff --git a/src/home/HomePage.tsx b/src/home/HomePage.tsx
index 7ff6efc..4c5522d 100644
--- a/src/home/HomePage.tsx
+++ b/src/home/HomePage.tsx
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
 import { useTranslation } from "react-i18next";
 
 import { useClient } from "../ClientContext";
diff --git a/src/home/JoinExistingCallModal.tsx b/src/home/JoinExistingCallModal.tsx
index 078d317..dfa6b09 100644
--- a/src/home/JoinExistingCallModal.tsx
+++ b/src/home/JoinExistingCallModal.tsx
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
 import { PressEvent } from "@react-types/shared";
 import { useTranslation } from "react-i18next";
 
diff --git a/src/home/RegisteredView.tsx b/src/home/RegisteredView.tsx
index 41559d6..ee696d2 100644
--- a/src/home/RegisteredView.tsx
+++ b/src/home/RegisteredView.tsx
@@ -14,12 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {
-  useState,
-  useCallback,
-  FormEvent,
-  FormEventHandler,
-} from "react";
+import { useState, useCallback, FormEvent, FormEventHandler } from "react";
 import { useHistory } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
diff --git a/src/home/UnauthenticatedView.tsx b/src/home/UnauthenticatedView.tsx
index 44f16ad..1fb1a84 100644
--- a/src/home/UnauthenticatedView.tsx
+++ b/src/home/UnauthenticatedView.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FC, useCallback, useState, FormEventHandler } from "react";
+import { FC, useCallback, useState, FormEventHandler } from "react";
 import { useHistory } from "react-router-dom";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { Trans, useTranslation } from "react-i18next";
diff --git a/src/input/AvatarInputField.tsx b/src/input/AvatarInputField.tsx
index aec4880..9280fad 100644
--- a/src/input/AvatarInputField.tsx
+++ b/src/input/AvatarInputField.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { useObjectRef } from "@react-aria/utils";
-import React, { AllHTMLAttributes, useEffect } from "react";
+import { AllHTMLAttributes, ChangeEvent, useEffect } from "react";
 import { useCallback } from "react";
 import { useState } from "react";
 import { forwardRef } from "react";
@@ -51,7 +51,7 @@ export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
       const currentInput = fileInputRef.current;
 
       const onChange = (e: Event) => {
-        const inputEvent = e as unknown as React.ChangeEvent<HTMLInputElement>;
+        const inputEvent = e as unknown as ChangeEvent<HTMLInputElement>;
         if (inputEvent.target.files.length > 0) {
           setObjUrl(URL.createObjectURL(inputEvent.target.files[0]));
           setRemoved(false);
diff --git a/src/input/Input.tsx b/src/input/Input.tsx
index 3548d5b..a983f71 100644
--- a/src/input/Input.tsx
+++ b/src/input/Input.tsx
@@ -14,7 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ChangeEvent, FC, forwardRef, ReactNode, useId } from "react";
+import {
+  ChangeEvent,
+  FC,
+  ForwardedRef,
+  forwardRef,
+  ReactNode,
+  useId,
+} from "react";
 import classNames from "classnames";
 
 import styles from "./Input.module.css";
@@ -114,7 +121,7 @@ export const InputField = forwardRef<
         {type === "textarea" ? (
           <textarea
             id={id}
-            ref={ref as React.ForwardedRef<HTMLTextAreaElement>}
+            ref={ref as ForwardedRef<HTMLTextAreaElement>}
             disabled={disabled}
             aria-describedby={descriptionId}
             {...rest}
@@ -122,7 +129,7 @@ export const InputField = forwardRef<
         ) : (
           <input
             id={id}
-            ref={ref as React.ForwardedRef<HTMLInputElement>}
+            ref={ref as ForwardedRef<HTMLInputElement>}
             type={type}
             checked={checked}
             disabled={disabled}
diff --git a/src/input/SelectInput.tsx b/src/input/SelectInput.tsx
index dcce2d3..cc86e43 100644
--- a/src/input/SelectInput.tsx
+++ b/src/input/SelectInput.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useRef } from "react";
+import { useRef } from "react";
 import { AriaSelectOptions, HiddenSelect, useSelect } from "@react-aria/select";
 import { useButton } from "@react-aria/button";
 import { useSelectState } from "@react-stately/select";
diff --git a/src/input/StarRatingInput.tsx b/src/input/StarRatingInput.tsx
index 5362078..3017a11 100644
--- a/src/input/StarRatingInput.tsx
+++ b/src/input/StarRatingInput.tsx
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import styles from "./StarRatingInput.module.css";
diff --git a/src/livekit/useLiveKit.ts b/src/livekit/useLiveKit.ts
index b160550..2276740 100644
--- a/src/livekit/useLiveKit.ts
+++ b/src/livekit/useLiveKit.ts
@@ -1,6 +1,6 @@
 import { Room, RoomOptions } from "livekit-client";
 import { useLiveKitRoom, useToken } from "@livekit/components-react";
-import React from "react";
+import { useMemo } from "react";
 
 import { defaultLiveKitOptions } from "./options";
 
@@ -26,7 +26,7 @@ export function useLiveKit(
   userChoices: UserChoices,
   config: LiveKitConfig
 ): Room | undefined {
-  const tokenOptions = React.useMemo(
+  const tokenOptions = useMemo(
     () => ({
       userInfo: {
         name: config.userDisplayName,
@@ -37,7 +37,7 @@ export function useLiveKit(
   );
   const token = useToken(config.jwtUrl, config.roomName, tokenOptions);
 
-  const roomOptions = React.useMemo((): RoomOptions => {
+  const roomOptions = useMemo((): RoomOptions => {
     const options = defaultLiveKitOptions;
     options.videoCaptureDefaults = {
       ...options.videoCaptureDefaults,
diff --git a/src/main.tsx b/src/main.tsx
index 11361e1..d04a3a9 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -20,7 +20,7 @@ limitations under the License.
 // dependency references.
 import "matrix-js-sdk/src/browser-index";
 
-import React, { StrictMode } from "react";
+import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserHistory } from "history";
 
diff --git a/src/popover/Popover.tsx b/src/popover/Popover.tsx
index d2e3200..02662eb 100644
--- a/src/popover/Popover.tsx
+++ b/src/popover/Popover.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { forwardRef, HTMLAttributes } from "react";
+import { forwardRef, HTMLAttributes } from "react";
 import { DismissButton, useOverlay } from "@react-aria/overlays";
 import { FocusScope } from "@react-aria/focus";
 import classNames from "classnames";
diff --git a/src/popover/PopoverMenu.tsx b/src/popover/PopoverMenu.tsx
index 543042e..fc6fbc6 100644
--- a/src/popover/PopoverMenu.tsx
+++ b/src/popover/PopoverMenu.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { forwardRef, useRef } from "react";
+import { forwardRef, useRef } from "react";
 import { useMenuTriggerState } from "@react-stately/menu";
 import { useMenuTrigger } from "@react-aria/menu";
 import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
diff --git a/src/room/CallEndedView.tsx b/src/room/CallEndedView.tsx
index 9f5f121..26c1b1f 100644
--- a/src/room/CallEndedView.tsx
+++ b/src/room/CallEndedView.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FormEventHandler, useCallback, useState } from "react";
+import { FormEventHandler, useCallback, useState } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Trans, useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
diff --git a/src/room/GridLayoutMenu.tsx b/src/room/GridLayoutMenu.tsx
index b1bd31b..dac8f46 100644
--- a/src/room/GridLayoutMenu.tsx
+++ b/src/room/GridLayoutMenu.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { Item } from "@react-stately/collections";
 import { useTranslation } from "react-i18next";
 
diff --git a/src/room/GroupCallInspector.tsx b/src/room/GroupCallInspector.tsx
index ad67c7a..69986e1 100644
--- a/src/room/GroupCallInspector.tsx
+++ b/src/room/GroupCallInspector.tsx
@@ -16,13 +16,16 @@ limitations under the License.
 
 import * as Sentry from "@sentry/react";
 import { Resizable } from "re-resizable";
-import React, {
+import {
   useEffect,
   useState,
   useReducer,
   useRef,
   createContext,
   useContext,
+  Dispatch,
+  SetStateAction,
+  ReactNode,
 } from "react";
 import ReactJson, { CollapsedFieldProps } from "react-json-view";
 import mermaid from "mermaid";
@@ -136,16 +139,13 @@ function lineForEvent(event: SequenceDiagramMatrixEvent): string {
 
 export const InspectorContext =
   createContext<
-    [
-      InspectorContextState,
-      React.Dispatch<React.SetStateAction<InspectorContextState>>
-    ]
+    [InspectorContextState, Dispatch<SetStateAction<InspectorContextState>>]
   >(undefined);
 
 export function InspectorContextProvider({
   children,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
   // We take the tuple of [currentState, setter] and stick
   // it straight into the context for other things to call
diff --git a/src/room/GroupCallLoader.tsx b/src/room/GroupCallLoader.tsx
index 15a5f90..f116155 100644
--- a/src/room/GroupCallLoader.tsx
+++ b/src/room/GroupCallLoader.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
 import { useTranslation } from "react-i18next";
diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx
index 3872ec2..76a4c41 100644
--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useHistory } from "react-router-dom";
 import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
 import { MatrixClient } from "matrix-js-sdk/src/client";
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index ee5cee9..80df493 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -28,7 +28,7 @@ import { Room, Track } from "livekit-client";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
-import React, { Ref, useCallback, useEffect, useMemo, useRef } from "react";
+import { Ref, useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import useMeasure from "react-use-measure";
 import { OverlayTriggerState } from "@react-stately/overlays";
@@ -50,11 +50,7 @@ import {
   RoomHeaderInfo,
   VersionMismatchWarning,
 } from "../Header";
-import {
-  VideoGrid,
-  useVideoGridLayout,
-  TileDescriptor,
-} from "../video-grid/VideoGrid";
+import { useVideoGridLayout, TileDescriptor } from "../video-grid/VideoGrid";
 import {
   useShowInspector,
   useShowConnectionStats,
@@ -249,8 +245,7 @@ export function InCallView({
     [fullscreenItem, noControls, items]
   );
 
-  const Grid =
-    items.length > 12 && layout === "freedom" ? NewVideoGrid : VideoGrid;
+  const Grid = NewVideoGrid;
 
   const prefersReducedMotion = usePrefersReducedMotion();
 
diff --git a/src/room/InviteModal.tsx b/src/room/InviteModal.tsx
index 9db8fdd..781f2ed 100644
--- a/src/room/InviteModal.tsx
+++ b/src/room/InviteModal.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FC } from "react";
+import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Modal, ModalContent, ModalProps } from "../Modal";
diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx
index 4fb9f0f..4224c0c 100644
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import { useRef, useEffect, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 
 import styles from "./LobbyView.module.css";
@@ -39,14 +39,14 @@ export function LobbyView(props: Props) {
   const { t } = useTranslation();
   useLocationNavigation();
 
-  const joinCallButtonRef = React.useRef<HTMLButtonElement>();
-  React.useEffect(() => {
+  const joinCallButtonRef = useRef<HTMLButtonElement>();
+  useEffect(() => {
     if (joinCallButtonRef.current) {
       joinCallButtonRef.current.focus();
     }
   }, [joinCallButtonRef]);
 
-  const [userChoices, setUserChoices] = React.useState<UserChoices | undefined>(
+  const [userChoices, setUserChoices] = useState<UserChoices | undefined>(
     undefined
   );
 
diff --git a/src/room/RageshakeRequestModal.tsx b/src/room/RageshakeRequestModal.tsx
index 21d9215..2e08903 100644
--- a/src/room/RageshakeRequestModal.tsx
+++ b/src/room/RageshakeRequestModal.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FC, useEffect } from "react";
+import { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 import { Modal, ModalContent, ModalProps } from "../Modal";
diff --git a/src/room/RoomAuthView.tsx b/src/room/RoomAuthView.tsx
index 12adcc1..de0c759 100644
--- a/src/room/RoomAuthView.tsx
+++ b/src/room/RoomAuthView.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 
diff --git a/src/room/RoomPage.tsx b/src/room/RoomPage.tsx
index 21ebc63..4974d34 100644
--- a/src/room/RoomPage.tsx
+++ b/src/room/RoomPage.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { FC, useEffect, useState, useCallback } from "react";
+import { FC, useEffect, useState, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 
 import type { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
diff --git a/src/room/RoomRedirect.tsx b/src/room/RoomRedirect.tsx
index 0c4cbe2..3d45086 100644
--- a/src/room/RoomRedirect.tsx
+++ b/src/room/RoomRedirect.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useLocation, useHistory } from "react-router-dom";
 
 import { Config } from "../config/Config";
diff --git a/src/room/VideoPreview.tsx b/src/room/VideoPreview.tsx
index 6c7cbf4..9f6c627 100644
--- a/src/room/VideoPreview.tsx
+++ b/src/room/VideoPreview.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { OverlayTriggerState } from "@react-stately/overlays";
@@ -65,8 +65,8 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
   const mediaDevices = useMediaDevices();
 
   // Create local media tracks.
-  const [videoEnabled, setVideoEnabled] = React.useState<boolean>(true);
-  const [audioEnabled, setAudioEnabled] = React.useState<boolean>(true);
+  const [videoEnabled, setVideoEnabled] = useState<boolean>(true);
+  const [audioEnabled, setAudioEnabled] = useState<boolean>(true);
   const [videoId, audioId] = [
     mediaDevices.videoIn.selectedId,
     mediaDevices.audioIn.selectedId,
@@ -85,7 +85,7 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
 
   const activeVideoId = video?.selectedDevice?.deviceId;
   const activeAudioId = audio?.selectedDevice?.deviceId;
-  React.useEffect(() => {
+  useEffect(() => {
     const createChoices = (
       enabled: boolean,
       deviceId?: string
@@ -116,7 +116,7 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
     mediaDevices.videoIn.setSelected,
     mediaDevices.audioIn.setSelected,
   ];
-  React.useEffect(() => {
+  useEffect(() => {
     if (activeVideoId && activeVideoId !== "") {
       selectVideo(activeVideoId);
     }
@@ -125,8 +125,8 @@ export function VideoPreview({ matrixInfo, onUserChoicesChanged }: Props) {
     }
   }, [selectVideo, selectAudio, activeVideoId, activeAudioId]);
 
-  const mediaElement = React.useRef(null);
-  React.useEffect(() => {
+  const mediaElement = useRef(null);
+  useEffect(() => {
     if (mediaElement.current) {
       video?.localTrack?.attach(mediaElement.current);
     }
diff --git a/src/settings/FeedbackSettingsTab.tsx b/src/settings/FeedbackSettingsTab.tsx
index b57f0f7..18e5073 100644
--- a/src/settings/FeedbackSettingsTab.tsx
+++ b/src/settings/FeedbackSettingsTab.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { useTranslation } from "react-i18next";
 
diff --git a/src/settings/ProfileSettingsTab.tsx b/src/settings/ProfileSettingsTab.tsx
index 409c0e6..edb7873 100644
--- a/src/settings/ProfileSettingsTab.tsx
+++ b/src/settings/ProfileSettingsTab.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
 
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index dbc60ba..4756268 100644
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useState } from "react";
+import { ChangeEvent, useCallback, useState } from "react";
 import { Item } from "@react-stately/collections";
 import { Trans, useTranslation } from "react-i18next";
 import { MatrixClient } from "matrix-js-sdk";
@@ -188,7 +188,7 @@ export const SettingsModal = (props: Props) => {
               description={t(
                 "Expose developer settings in the settings window."
               )}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              onChange={(event: ChangeEvent<HTMLInputElement>) =>
                 setDeveloperSettingsTab(event.target.checked)
               }
             />
@@ -200,7 +200,7 @@ export const SettingsModal = (props: Props) => {
               type="checkbox"
               checked={optInAnalytics}
               description={optInDescription}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              onChange={(event: ChangeEvent<HTMLInputElement>) =>
                 setOptInAnalytics(event.target.checked)
               }
             />
@@ -230,7 +230,7 @@ export const SettingsModal = (props: Props) => {
                 label={t("Show call inspector")}
                 type="checkbox"
                 checked={showInspector}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   setShowInspector(e.target.checked)
                 }
               />
@@ -242,7 +242,7 @@ export const SettingsModal = (props: Props) => {
                 label={t("Show connection stats")}
                 type="checkbox"
                 checked={showConnectionStats}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                   setShowConnectionStats(e.target.checked)
                 }
               />
diff --git a/src/tabs/Tabs.stories.tsx b/src/tabs/Tabs.stories.tsx
index acc92c3..87d76ba 100644
--- a/src/tabs/Tabs.stories.tsx
+++ b/src/tabs/Tabs.stories.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import { FC } from "react";
 
 import { TabContainer, TabItem } from "./Tabs";
 import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
@@ -30,7 +30,7 @@ export default {
   },
 };
 
-export const Tabs: React.FC<{}> = () => (
+export const Tabs: FC = () => (
   <TabContainer>
     <TabItem
       title={
diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx
index 81cc931..fec060a 100644
--- a/src/tabs/Tabs.tsx
+++ b/src/tabs/Tabs.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useRef } from "react";
+import { useRef } from "react";
 import { useTabList, useTab, useTabPanel } from "@react-aria/tabs";
 import { Item } from "@react-stately/collections";
 import { useTabListState, TabListState } from "@react-stately/tabs";
diff --git a/src/typography/Typography.stories.tsx b/src/typography/Typography.stories.tsx
index 4174d93..db484c9 100644
--- a/src/typography/Typography.stories.tsx
+++ b/src/typography/Typography.stories.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import { FC } from "react";
 
 import { Headline, Title, Subtitle, Body, Caption, Micro } from "./Typography";
 
@@ -25,7 +25,7 @@ export default {
   },
 };
 
-export const Typography: React.FC<{}> = () => (
+export const Typography: FC = () => (
   <>
     <Headline>Headline Semi Bold</Headline>
     <Title>Title</Title>
diff --git a/src/video-grid/BigGrid.tsx b/src/video-grid/BigGrid.tsx
index f08676f..c2cba0a 100644
--- a/src/video-grid/BigGrid.tsx
+++ b/src/video-grid/BigGrid.tsx
@@ -17,7 +17,6 @@ limitations under the License.
 import TinyQueue from "tinyqueue";
 import { RectReadOnly } from "react-use-measure";
 import { FC, memo, ReactNode } from "react";
-import React from "react";
 
 import { TileDescriptor } from "./VideoGrid";
 import { Slot } from "./NewVideoGrid";
diff --git a/src/video-grid/NewVideoGrid.tsx b/src/video-grid/NewVideoGrid.tsx
index d6c3718..0361e97 100644
--- a/src/video-grid/NewVideoGrid.tsx
+++ b/src/video-grid/NewVideoGrid.tsx
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { SpringRef, TransitionFn, useTransition } from "@react-spring/web";
 import { EventTypes, Handler, useScroll } from "@use-gesture/react";
-import React, {
+import {
   CSSProperties,
   FC,
   ReactNode,
diff --git a/src/video-grid/TileWrapper.tsx b/src/video-grid/TileWrapper.tsx
index 09b67aa..d1712ce 100644
--- a/src/video-grid/TileWrapper.tsx
+++ b/src/video-grid/TileWrapper.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { memo, ReactNode, RefObject, useRef } from "react";
+import { memo, ReactNode, RefObject, useRef } from "react";
 import { EventTypes, Handler, useDrag } from "@use-gesture/react";
 import { SpringValue, to } from "@react-spring/web";
 
diff --git a/src/video-grid/VideoGrid.tsx b/src/video-grid/VideoGrid.tsx
index a9b847b..e659093 100644
--- a/src/video-grid/VideoGrid.tsx
+++ b/src/video-grid/VideoGrid.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {
+import {
   ComponentProps,
   Key,
   ReactNode,
@@ -819,7 +819,7 @@ export interface VideoGridProps<T> {
   layout: Layout;
   disableAnimations: boolean;
   layoutStates: LayoutStatesMap;
-  children: (props: ChildrenProperties<T>) => React.ReactNode;
+  children: (props: ChildrenProperties<T>) => ReactNode;
 }
 
 // Represents something that should get a tile on the layout,
diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index 1cf77d3..1ea4b29 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback } from "react";
+import { ComponentProps, forwardRef, useCallback, useEffect } from "react";
 import { animated } from "@react-spring/web";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
@@ -57,12 +57,12 @@ interface Props {
   targetWidth: number;
   targetHeight: number;
   className?: string;
-  style?: React.ComponentProps<typeof animated.div>["style"];
+  style?: ComponentProps<typeof animated.div>["style"];
   showSpeakingIndicator: boolean;
   showConnectionStats: boolean;
 }
 
-export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
+export const VideoTile = forwardRef<HTMLDivElement, Props>(
   (
     {
       data,
@@ -87,7 +87,7 @@ export const VideoTile = React.forwardRef<HTMLDivElement, Props>(
       () => member?.rawDisplayName ?? "[👻]",
       [member]
     );
-    React.useEffect(() => {
+    useEffect(() => {
       if (member) {
         const updateName = () => {
           setDisplayName(member.rawDisplayName);
diff --git a/test/home/CallList-test.tsx b/test/home/CallList-test.tsx
index a0dba2c..7b3925d 100644
--- a/test/home/CallList-test.tsx
+++ b/test/home/CallList-test.tsx
@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
-
 import { render, RenderResult } from "@testing-library/react";
 import { CallList } from "../../src/home/CallList";
 import { MatrixClient } from "matrix-js-sdk";
diff --git a/tsconfig.json b/tsconfig.json
index 47d1bdb..c588d0e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,7 @@
     "noEmit": true,
     "noImplicitAny": false,
     "noUnusedLocals": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "lib": ["es2020", "dom", "dom.iterable"],
     "strict": false,
     "plugins": [
diff --git a/vite.config.js b/vite.config.js
index 99116ec..70d9fb8 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -18,14 +18,14 @@ import { defineConfig, loadEnv } from "vite";
 import svgrPlugin from "vite-plugin-svgr";
 import htmlTemplate from "vite-plugin-html-template";
 import sentryVitePlugin from "@sentry/vite-plugin";
-
-import path from "path";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd());
 
   const plugins = [
+    react(),
     svgrPlugin(),
     htmlTemplate.default({
       data: {
@@ -49,6 +49,9 @@ export default defineConfig(({ mode }) => {
   }
 
   return {
+    server: {
+      port: 3000,
+    },
     build: {
       sourcemap: true,
     },
diff --git a/yarn.lock b/yarn.lock
index 244dd11..0051059 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -20,6 +20,14 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@ampproject/remapping@^2.2.0":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630"
+  integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
@@ -27,6 +35,13 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
+"@babel/code-frame@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.5.tgz#234d98e1551960604f1246e6475891a570ad5658"
+  integrity sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==
+  dependencies:
+    "@babel/highlight" "^7.22.5"
+
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.18.6":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.8.tgz#2483f565faca607b8535590e84e7de323f27764d"
@@ -37,6 +52,11 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.19.4.tgz#95c86de137bf0317f3a570e1b6e996b427299747"
   integrity sha512-CHIGpJcUQ5lU9KrPHTjBMhVwQG6CQjxfg36fGXl3qk/Gik1WwWachaXFuo0uCWJT/mStOKtcbFJCaVLihC1CMw==
 
+"@babel/compat-data@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.5.tgz#b1f6c86a02d85d2dd3368a2b67c09add8cd0c255"
+  integrity sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA==
+
 "@babel/core@7.12.9":
   version "7.12.9"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8"
@@ -101,6 +121,27 @@
     json5 "^2.2.1"
     semver "^6.3.0"
 
+"@babel/core@^7.21.3", "@babel/core@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.22.5.tgz#d67d9747ecf26ee7ecd3ebae1ee22225fe902a89"
+  integrity sha512-SBuTAjg91A3eKOvD+bPEz3LlhHZRNu1nFOVts9lzDJTXshHTjII0BAtDS3Y2DAkdZdDKWVZGVwkDfc4Clxn1dg==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.22.5"
+    "@babel/generator" "^7.22.5"
+    "@babel/helper-compilation-targets" "^7.22.5"
+    "@babel/helper-module-transforms" "^7.22.5"
+    "@babel/helpers" "^7.22.5"
+    "@babel/parser" "^7.22.5"
+    "@babel/template" "^7.22.5"
+    "@babel/traverse" "^7.22.5"
+    "@babel/types" "^7.22.5"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.2"
+    semver "^6.3.0"
+
 "@babel/generator@^7.12.11", "@babel/generator@^7.12.5", "@babel/generator@^7.18.6", "@babel/generator@^7.18.7":
   version "7.18.7"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.7.tgz#2aa78da3c05aadfc82dbac16c99552fc802284bd"
@@ -119,6 +160,16 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.22.5.tgz#1e7bf768688acfb05cf30b2369ef855e82d984f7"
+  integrity sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==
+  dependencies:
+    "@babel/types" "^7.22.5"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
@@ -154,6 +205,17 @@
     browserslist "^4.21.3"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.5.tgz#fc7319fc54c5e2fa14b2909cf3c5fd3046813e02"
+  integrity sha512-Ji+ywpHeuqxB8WDxraCiqR0xfhYjiDE/e6k7FuIaANnoOFxAHskHChz4vA1mJC9Lbm01s1PVAGhQY4FUKSkGZw==
+  dependencies:
+    "@babel/compat-data" "^7.22.5"
+    "@babel/helper-validator-option" "^7.22.5"
+    browserslist "^4.21.3"
+    lru-cache "^5.1.1"
+    semver "^6.3.0"
+
 "@babel/helper-create-class-features-plugin@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.6.tgz#6f15f8459f3b523b39e00a99982e2c040871ed72"
@@ -213,6 +275,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
   integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
 
+"@babel/helper-environment-visitor@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz#f06dd41b7c1f44e1f8da6c4055b41ab3a09a7e98"
+  integrity sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==
+
 "@babel/helper-explode-assignable-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz#41f8228ef0a6f1a036b8dfdfec7ce94f9a6bc096"
@@ -236,6 +303,14 @@
     "@babel/template" "^7.18.10"
     "@babel/types" "^7.19.0"
 
+"@babel/helper-function-name@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz#ede300828905bb15e582c037162f99d5183af1be"
+  integrity sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==
+  dependencies:
+    "@babel/template" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-hoist-variables@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
@@ -243,6 +318,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-hoist-variables@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
+  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-member-expression-to-functions@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.6.tgz#44802d7d602c285e1692db0bad9396d007be2afc"
@@ -257,6 +339,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-module-imports@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz#1a8f4c9f4027d23f520bd76b364d44434a72660c"
+  integrity sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.18.6":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.8.tgz#4f8408afead0188cfa48672f9d0e5787b61778c8"
@@ -285,6 +374,20 @@
     "@babel/traverse" "^7.19.6"
     "@babel/types" "^7.19.4"
 
+"@babel/helper-module-transforms@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.22.5.tgz#0f65daa0716961b6e96b164034e737f60a80d2ef"
+  integrity sha512-+hGKDt/Ze8GFExiVHno/2dvG5IdstpzCq0y4Qc9OJ25D4q3pKfiIP/4Vp3/JvhDkLKsDK2api3q3fpIgiIF5bw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-module-imports" "^7.22.5"
+    "@babel/helper-simple-access" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.5"
+    "@babel/template" "^7.22.5"
+    "@babel/traverse" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-optimise-call-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
@@ -302,6 +405,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz#9448974dd4fb1d80fefe72e8a0af37809cd30d6d"
   integrity sha512-gvZnm1YAAxh13eJdkb9EWHBnF3eAub3XTLCZEehHT2kWxiKVRL64+ae5Y6Ivne0mVHmMYKT+xWgZO+gQhuLUBg==
 
+"@babel/helper-plugin-utils@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
+  integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
+
 "@babel/helper-remap-async-to-generator@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.6.tgz#fa1f81acd19daee9d73de297c0308783cd3cfc23"
@@ -337,6 +445,13 @@
   dependencies:
     "@babel/types" "^7.19.4"
 
+"@babel/helper-simple-access@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de"
+  integrity sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.18.6.tgz#7dff00a5320ca4cf63270e5a0eca4b268b7380d9"
@@ -351,11 +466,23 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-split-export-declaration@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.5.tgz#88cf11050edb95ed08d596f7a044462189127a08"
+  integrity sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-string-parser@^7.19.4":
   version "7.19.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
   integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==
 
+"@babel/helper-string-parser@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
+  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
+
 "@babel/helper-validator-identifier@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
@@ -366,11 +493,21 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 
+"@babel/helper-validator-identifier@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz#9544ef6a33999343c8740fa51350f30eeaaaf193"
+  integrity sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==
+
 "@babel/helper-validator-option@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
   integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
 
+"@babel/helper-validator-option@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz#de52000a15a177413c8234fa3a8af4ee8102d0ac"
+  integrity sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==
+
 "@babel/helper-wrap-function@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.18.6.tgz#ec44ea4ad9d8988b90c3e465ba2382f4de81a073"
@@ -399,6 +536,15 @@
     "@babel/traverse" "^7.19.4"
     "@babel/types" "^7.19.4"
 
+"@babel/helpers@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.22.5.tgz#74bb4373eb390d1ceed74a15ef97767e63120820"
+  integrity sha512-pSXRmfE1vzcUIDFQcSGA5Mr+GxBV9oiRKDuDxXvWQQBCh8HoIjs/2DlDB7H8smac1IVrB9/xdXj2N3Wol9Cr+Q==
+  dependencies:
+    "@babel/template" "^7.22.5"
+    "@babel/traverse" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
 "@babel/highlight@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
@@ -408,6 +554,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.5.tgz#aa6c05c5407a67ebce408162b7ede789b4d22031"
+  integrity sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.5"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.18.10", "@babel/parser@^7.19.6":
   version "7.19.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.6.tgz#b923430cb94f58a7eae8facbffa9efd19130e7f8"
@@ -418,6 +573,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.8.tgz#822146080ac9c62dac0823bb3489622e0bc1cbdf"
   integrity sha512-RSKRfYX20dyH+elbJK2uqAkVyucL+xXzhqlMD5/ZXx+dAAwpyB7HsvnHe/ZUGOF+xLr5Wx9/JoXVTj6BQE2/oA==
 
+"@babel/parser@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.5.tgz#721fd042f3ce1896238cf1b341c77eb7dee7dbea"
+  integrity sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
@@ -967,6 +1127,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
+"@babel/plugin-transform-react-jsx-self@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.22.5.tgz#ca2fdc11bc20d4d46de01137318b13d04e481d8e"
+  integrity sha512-nTh2ogNUtxbiSbxaT4Ds6aXnXEipHweN9YRgOX/oNXdf0cCrGn/+2LozFa3lnPV5D90MkjhgckCPBrsoSc1a7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-transform-react-jsx-source@^7.16.7":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.18.6.tgz#06e9ae8a14d2bc19ce6e3c447d842032a50598fc"
@@ -974,6 +1141,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.18.6"
 
+"@babel/plugin-transform-react-jsx-source@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.22.5.tgz#49af1615bfdf6ed9d3e9e43e425e0b2b65d15b6c"
+  integrity sha512-yIiRO6yobeEIaI0RTbIr8iAK9FcBHLtZq0S89ZPjDLQXBA4xvghaKqI0etp/tF3htTM0sazJKKLz9oEiGRtu7w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-transform-react-jsx@^7.12.12", "@babel/plugin-transform-react-jsx@^7.17.3", "@babel/plugin-transform-react-jsx@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.18.6.tgz#2721e96d31df96e3b7ad48ff446995d26bc028ff"
@@ -1255,6 +1429,15 @@
     "@babel/parser" "^7.18.10"
     "@babel/types" "^7.18.10"
 
+"@babel/template@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
+  integrity sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==
+  dependencies:
+    "@babel/code-frame" "^7.22.5"
+    "@babel/parser" "^7.22.5"
+    "@babel/types" "^7.22.5"
+
 "@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.18.6", "@babel/traverse@^7.18.8":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.8.tgz#f095e62ab46abf1da35e5a2011f43aee72d8d5b0"
@@ -1287,6 +1470,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.5.tgz#44bd276690db6f4940fdb84e1cb4abd2f729ccd1"
+  integrity sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==
+  dependencies:
+    "@babel/code-frame" "^7.22.5"
+    "@babel/generator" "^7.22.5"
+    "@babel/helper-environment-visitor" "^7.22.5"
+    "@babel/helper-function-name" "^7.22.5"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.5"
+    "@babel/parser" "^7.22.5"
+    "@babel/types" "^7.22.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.18.10", "@babel/types@^7.19.0", "@babel/types@^7.19.4", "@babel/types@^7.3.0", "@babel/types@^7.3.3":
   version "7.19.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.19.4.tgz#0dd5c91c573a202d600490a35b33246fed8a41c7"
@@ -1296,7 +1495,7 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.12.11", "@babel/types@^7.12.6", "@babel/types@^7.12.7", "@babel/types@^7.18.6", "@babel/types@^7.18.7", "@babel/types@^7.18.8", "@babel/types@^7.2.0", "@babel/types@^7.4.4":
+"@babel/types@^7.12.11", "@babel/types@^7.12.7", "@babel/types@^7.18.6", "@babel/types@^7.18.7", "@babel/types@^7.18.8", "@babel/types@^7.2.0", "@babel/types@^7.4.4":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.8.tgz#c5af199951bf41ba4a6a9a6d0d8ad722b30cd42f"
   integrity sha512-qwpdsmraq0aJ3osLJRApsc2ouSJCdnMeZwB0DhbtHAtRpZNZCdlbRnHIgcRKzdE1g0iOGg644fzjOBcdOz9cPw==
@@ -1304,6 +1503,15 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.21.3", "@babel/types@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.22.5.tgz#cd93eeaab025880a3a47ec881f4b096a5b786fbe"
+  integrity sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.22.5"
+    "@babel/helper-validator-identifier" "^7.22.5"
+    to-fast-properties "^2.0.0"
+
 "@base2/pretty-print-object@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4"
@@ -1421,6 +1629,116 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
+"@esbuild/android-arm64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz#bafb75234a5d3d1b690e7c2956a599345e84a2fd"
+  integrity sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==
+
+"@esbuild/android-arm@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.17.19.tgz#5898f7832c2298bc7d0ab53701c57beb74d78b4d"
+  integrity sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==
+
+"@esbuild/android-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.17.19.tgz#658368ef92067866d95fb268719f98f363d13ae1"
+  integrity sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==
+
+"@esbuild/darwin-arm64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz#584c34c5991b95d4d48d333300b1a4e2ff7be276"
+  integrity sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==
+
+"@esbuild/darwin-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz#7751d236dfe6ce136cce343dce69f52d76b7f6cb"
+  integrity sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==
+
+"@esbuild/freebsd-arm64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz#cacd171665dd1d500f45c167d50c6b7e539d5fd2"
+  integrity sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==
+
+"@esbuild/freebsd-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz#0769456eee2a08b8d925d7c00b79e861cb3162e4"
+  integrity sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==
+
+"@esbuild/linux-arm64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz#38e162ecb723862c6be1c27d6389f48960b68edb"
+  integrity sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==
+
+"@esbuild/linux-arm@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz#1a2cd399c50040184a805174a6d89097d9d1559a"
+  integrity sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==
+
+"@esbuild/linux-ia32@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz#e28c25266b036ce1cabca3c30155222841dc035a"
+  integrity sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==
+
+"@esbuild/linux-loong64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz#0f887b8bb3f90658d1a0117283e55dbd4c9dcf72"
+  integrity sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==
+
+"@esbuild/linux-mips64el@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz#f5d2a0b8047ea9a5d9f592a178ea054053a70289"
+  integrity sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==
+
+"@esbuild/linux-ppc64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz#876590e3acbd9fa7f57a2c7d86f83717dbbac8c7"
+  integrity sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==
+
+"@esbuild/linux-riscv64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz#7f49373df463cd9f41dc34f9b2262d771688bf09"
+  integrity sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==
+
+"@esbuild/linux-s390x@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz#e2afd1afcaf63afe2c7d9ceacd28ec57c77f8829"
+  integrity sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==
+
+"@esbuild/linux-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz#8a0e9738b1635f0c53389e515ae83826dec22aa4"
+  integrity sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==
+
+"@esbuild/netbsd-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz#c29fb2453c6b7ddef9a35e2c18b37bda1ae5c462"
+  integrity sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==
+
+"@esbuild/openbsd-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz#95e75a391403cb10297280d524d66ce04c920691"
+  integrity sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==
+
+"@esbuild/sunos-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz#722eaf057b83c2575937d3ffe5aeb16540da7273"
+  integrity sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==
+
+"@esbuild/win32-arm64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz#9aa9dc074399288bdcdd283443e9aeb6b9552b6f"
+  integrity sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==
+
+"@esbuild/win32-ia32@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz#95ad43c62ad62485e210f6299c7b2571e48d2b03"
+  integrity sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==
+
+"@esbuild/win32-x64@0.17.19":
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz#8cfaf2ff603e9aabb910e9c0558c26cf32744061"
+  integrity sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==
+
 "@eslint/eslintrc@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz#29f92c30bb3e771e4a2048c95fa6855392dfac4f"
@@ -1835,6 +2153,14 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@jridgewell/trace-mapping@^0.3.17":
+  version "0.3.18"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6"
+  integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==
+  dependencies:
+    "@jridgewell/resolve-uri" "3.1.0"
+    "@jridgewell/sourcemap-codec" "1.4.14"
+
 "@juggle/resize-observer@^3.3.1":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"
@@ -2604,6 +2930,15 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
+"@rollup/pluginutils@^5.0.2":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
+  integrity sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
 "@sentry/browser@6.19.7":
   version "6.19.7"
   resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-6.19.7.tgz#a40b6b72d911b5f1ed70ed3b4e7d4d4e625c0b5f"
@@ -3390,85 +3725,87 @@
     regenerator-runtime "^0.13.7"
     resolve-from "^5.0.0"
 
-"@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
-  integrity sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==
+"@svgr/babel-plugin-add-jsx-attribute@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-7.0.0.tgz#80856c1b7a3b7422d232f6e079f0beb90c4a13e9"
+  integrity sha512-khWbXesWIP9v8HuKCl2NU2HNAyqpSQ/vkIl36Nbn4HIwEYSRWL0H7Gs6idJdha2DkpFDWlsqMELvoCE8lfFY6Q==
 
-"@svgr/babel-plugin-remove-jsx-attribute@^5.4.0":
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz#6b2c770c95c874654fd5e1d5ef475b78a0a962ef"
-  integrity sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==
+"@svgr/babel-plugin-remove-jsx-attribute@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-7.0.0.tgz#91da77a009dc38e8d30da45d9b62ef8736f2d90a"
+  integrity sha512-iiZaIvb3H/c7d3TH2HBeK91uI2rMhZNwnsIrvd7ZwGLkFw6mmunOCoVnjdYua662MqGFxlN9xTq4fv9hgR4VXQ==
 
-"@svgr/babel-plugin-remove-jsx-empty-expression@^5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz#25621a8915ed7ad70da6cea3d0a6dbc2ea933efd"
-  integrity sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==
+"@svgr/babel-plugin-remove-jsx-empty-expression@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-7.0.0.tgz#5154ff1213509e36ab315974c8c2fd48dafb827b"
+  integrity sha512-sQQmyo+qegBx8DfFc04PFmIO1FP1MHI1/QEpzcIcclo5OAISsOJPW76ZIs0bDyO/DBSJEa/tDa1W26pVtt0FRw==
 
-"@svgr/babel-plugin-replace-jsx-attribute-value@^5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz#0b221fc57f9fcd10e91fe219e2cd0dd03145a897"
-  integrity sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==
+"@svgr/babel-plugin-replace-jsx-attribute-value@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-7.0.0.tgz#7e72f44ee57fdbcb02fb0d4a7629466c5242725e"
+  integrity sha512-i6MaAqIZXDOJeikJuzocByBf8zO+meLwfQ/qMHIjCcvpnfvWf82PFvredEZElErB5glQFJa2KVKk8N2xV6tRRA==
 
-"@svgr/babel-plugin-svg-dynamic-title@^5.4.0":
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz#139b546dd0c3186b6e5db4fefc26cb0baea729d7"
-  integrity sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==
+"@svgr/babel-plugin-svg-dynamic-title@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-7.0.0.tgz#8caf0449c678ea29be756b89960b2b16c9f33f00"
+  integrity sha512-BoVSh6ge3SLLpKC0pmmN9DFlqgFy4NxNgdZNLPNJWBUU7TQpDWeBuyVuDW88iXydb5Cv0ReC+ffa5h3VrKfk1w==
 
-"@svgr/babel-plugin-svg-em-dimensions@^5.4.0":
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz#6543f69526632a133ce5cabab965deeaea2234a0"
-  integrity sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==
+"@svgr/babel-plugin-svg-em-dimensions@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-7.0.0.tgz#4db6b5af6d29e93db236b1a013fa953754071d41"
+  integrity sha512-tNDcBa+hYn0gO+GkP/AuNKdVtMufVhU9fdzu+vUQsR18RIJ9RWe7h/pSBY338RO08wArntwbDk5WhQBmhf2PaA==
 
-"@svgr/babel-plugin-transform-react-native-svg@^5.4.0":
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz#00bf9a7a73f1cad3948cdab1f8dfb774750f8c80"
-  integrity sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==
+"@svgr/babel-plugin-transform-react-native-svg@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-7.0.0.tgz#236995e58b5e36ff06365d5310509ce5391aeec9"
+  integrity sha512-qw54u8ljCJYL2KtBOjI5z7Nzg8LnSvQOP5hPKj77H4VQL4+HdKbAT5pnkkZLmHKYwzsIHSYKXxHouD8zZamCFQ==
 
-"@svgr/babel-plugin-transform-svg-component@^5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz#583a5e2a193e214da2f3afeb0b9e8d3250126b4a"
-  integrity sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==
+"@svgr/babel-plugin-transform-svg-component@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-7.0.0.tgz#a9b62730acf10d22a2aa57e0f701c0ecbc270430"
+  integrity sha512-CcFECkDj98daOg9jE3Bh3uyD9kzevCAnZ+UtzG6+BQG/jOQ2OA3jHnX6iG4G1MCJkUQFnUvEv33NvQfqrb/F3A==
 
-"@svgr/babel-preset@^5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-5.5.0.tgz#8af54f3e0a8add7b1e2b0fcd5a882c55393df327"
-  integrity sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==
+"@svgr/babel-preset@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-7.0.0.tgz#55aaca4cec2ff6515a571715b6b6fa98675b66d9"
+  integrity sha512-EX/NHeFa30j5UjldQGVQikuuQNHUdGmbh9kEpBKofGUtF0GUPJ4T4rhoYiqDAOmBOxojyot36JIFiDUHUK1ilQ==
   dependencies:
-    "@svgr/babel-plugin-add-jsx-attribute" "^5.4.0"
-    "@svgr/babel-plugin-remove-jsx-attribute" "^5.4.0"
-    "@svgr/babel-plugin-remove-jsx-empty-expression" "^5.0.1"
-    "@svgr/babel-plugin-replace-jsx-attribute-value" "^5.0.1"
-    "@svgr/babel-plugin-svg-dynamic-title" "^5.4.0"
-    "@svgr/babel-plugin-svg-em-dimensions" "^5.4.0"
-    "@svgr/babel-plugin-transform-react-native-svg" "^5.4.0"
-    "@svgr/babel-plugin-transform-svg-component" "^5.5.0"
+    "@svgr/babel-plugin-add-jsx-attribute" "^7.0.0"
+    "@svgr/babel-plugin-remove-jsx-attribute" "^7.0.0"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "^7.0.0"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^7.0.0"
+    "@svgr/babel-plugin-svg-dynamic-title" "^7.0.0"
+    "@svgr/babel-plugin-svg-em-dimensions" "^7.0.0"
+    "@svgr/babel-plugin-transform-react-native-svg" "^7.0.0"
+    "@svgr/babel-plugin-transform-svg-component" "^7.0.0"
 
-"@svgr/core@^5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-5.5.0.tgz#82e826b8715d71083120fe8f2492ec7d7874a579"
-  integrity sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==
+"@svgr/core@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-7.0.0.tgz#def863d2670c682615583c80b408e83c095c2233"
+  integrity sha512-ztAoxkaKhRVloa3XydohgQQCb0/8x9T63yXovpmHzKMkHO6pkjdsIAWKOS4bE95P/2quVh1NtjSKlMRNzSBffw==
   dependencies:
-    "@svgr/plugin-jsx" "^5.5.0"
+    "@babel/core" "^7.21.3"
+    "@svgr/babel-preset" "^7.0.0"
     camelcase "^6.2.0"
-    cosmiconfig "^7.0.0"
+    cosmiconfig "^8.1.3"
 
-"@svgr/hast-util-to-babel-ast@^5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz#5ee52a9c2533f73e63f8f22b779f93cd432a5461"
-  integrity sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==
+"@svgr/hast-util-to-babel-ast@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-7.0.0.tgz#d457dfbe74ebc1e5a6daf97ded49e9576a3a00cf"
+  integrity sha512-42Ej9sDDEmsJKjrfQ1PHmiDiHagh/u9AHO9QWbeNx4KmD9yS5d1XHmXUNINfUcykAU+4431Cn+k6Vn5mWBYimQ==
   dependencies:
-    "@babel/types" "^7.12.6"
+    "@babel/types" "^7.21.3"
+    entities "^4.4.0"
 
-"@svgr/plugin-jsx@^5.5.0":
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz#1aa8cd798a1db7173ac043466d7b52236b369000"
-  integrity sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==
+"@svgr/plugin-jsx@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-7.0.0.tgz#b9e0c7d05bc890d70163ac0490ba8c41f1afab90"
+  integrity sha512-SWlTpPQmBUtLKxXWgpv8syzqIU8XgFRvyhfkam2So8b3BE0OS0HPe5UfmlJ2KIC+a7dpuuYovPR2WAQuSyMoPw==
   dependencies:
-    "@babel/core" "^7.12.3"
-    "@svgr/babel-preset" "^5.5.0"
-    "@svgr/hast-util-to-babel-ast" "^5.5.0"
-    svg-parser "^2.0.2"
+    "@babel/core" "^7.21.3"
+    "@svgr/babel-preset" "^7.0.0"
+    "@svgr/hast-util-to-babel-ast" "^7.0.0"
+    svg-parser "^2.0.4"
 
 "@testing-library/dom@^8.5.0":
   version "8.19.0"
@@ -3582,6 +3919,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
   integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
 
+"@types/estree@^1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194"
+  integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
+
 "@types/events@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -4000,6 +4342,16 @@
     react-refresh "^0.13.0"
     resolve "^1.22.0"
 
+"@vitejs/plugin-react@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-4.0.1.tgz#793aa790633433558da7ac0a38c58ddf47dff518"
+  integrity sha512-g25lL98essfeSj43HJ0o4DMp0325XK0ITkxpgChzJU/CyemgyChtlxfnRbjfwxDGCTRxTiXtQAsdebQXKMRSOA==
+  dependencies:
+    "@babel/core" "^7.22.5"
+    "@babel/plugin-transform-react-jsx-self" "^7.22.5"
+    "@babel/plugin-transform-react-jsx-source" "^7.22.5"
+    react-refresh "^0.14.0"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -5948,6 +6300,16 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+cosmiconfig@^8.1.3:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.2.0.tgz#f7d17c56a590856cd1e7cee98734dca272b0d8fd"
+  integrity sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==
+  dependencies:
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+
 cp-file@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/cp-file/-/cp-file-7.0.0.tgz#b9454cfd07fe3b974ab9ea0e5f29655791a9b8cd"
@@ -7293,191 +7655,91 @@ es6-shim@^0.35.5:
   resolved "https://registry.yarnpkg.com/es6-shim/-/es6-shim-0.35.6.tgz#d10578301a83af2de58b9eadb7c2c9945f7388a0"
   integrity sha512-EmTr31wppcaIAgblChZiuN/l9Y7DPyw8Xtbg7fIVngn6zMW+IEBJDJngeKC3x6wr0V/vcA2wqeFnaw1bFJbDdA==
 
-esbuild-android-64@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.48.tgz#7e6394a0e517f738641385aaf553c7e4fb6d1ae3"
-  integrity sha512-3aMjboap/kqwCUpGWIjsk20TtxVoKck8/4Tu19rubh7t5Ra0Yrpg30Mt1QXXlipOazrEceGeWurXKeFJgkPOUg==
-
 esbuild-android-arm64@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.8.tgz#c20e875c3c98164b1ffba9b28637bdf96f5e9e7c"
   integrity sha512-AilbChndywpk7CdKkNSZ9klxl+9MboLctXd9LwLo3b0dawmOF/i/t2U5d8LM6SbT1Xw36F8yngSUPrd8yPs2RA==
 
-esbuild-android-arm64@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.48.tgz#6877566be0f82dd5a43030c0007d06ece7f7c02f"
-  integrity sha512-vptI3K0wGALiDq+EvRuZotZrJqkYkN5282iAfcffjI5lmGG9G1ta/CIVauhY42MBXwEgDJkweiDcDMRLzBZC4g==
-
 esbuild-darwin-64@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.8.tgz#f46e6b471ddbf62265234808a6a1aa91df18a417"
   integrity sha512-b6sdiT84zV5LVaoF+UoMVGJzR/iE2vNUfUDfFQGrm4LBwM/PWXweKpuu6RD9mcyCq18cLxkP6w/LD/w9DtX3ng==
 
-esbuild-darwin-64@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.48.tgz#ea3caddb707d88f844b1aa1dea5ff3b0a71ef1fd"
-  integrity sha512-gGQZa4+hab2Va/Zww94YbshLuWteyKGD3+EsVon8EWTWhnHFRm5N9NbALNbwi/7hQ/hM1Zm4FuHg+k6BLsl5UA==
-
 esbuild-darwin-arm64@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.8.tgz#a991157a6013facd4f2e14159b7da52626c90154"
   integrity sha512-R8YuPiiJayuJJRUBG4H0VwkEKo6AvhJs2m7Tl0JaIer3u1FHHXwGhMxjJDmK+kXwTFPriSysPvcobXC/UrrZCQ==
 
-esbuild-darwin-arm64@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.48.tgz#4e5eaab54df66cc319b76a2ac0e8af4e6f0d9c2f"
-  integrity sha512-bFjnNEXjhZT+IZ8RvRGNJthLWNHV5JkCtuOFOnjvo5pC0sk2/QVk0Qc06g2PV3J0TcU6kaPC3RN9yy9w2PSLEA==
-
 esbuild-freebsd-64@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.8.tgz#301601d2e443ad458960e359b402a17d9500be9d"
   integrity sha512-zBn6urrn8FnKC+YSgDxdof9jhPCeU8kR/qaamlV4gI8R3KUaUK162WYM7UyFVAlj9N0MyD3AtB+hltzu4cysTw==
 
-esbuild-freebsd-64@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.48.tgz#47b5abc7426eae66861490ffbb380acc67af5b15"
-  integrity sha512-1NOlwRxmOsnPcWOGTB10JKAkYSb2nue0oM1AfHWunW/mv3wERfJmnYlGzL3UAOIUXZqW8GeA2mv+QGwq7DToqA==
-
 esbuild-freebsd-arm64@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.8.tgz#039a63acc12ec0892006c147ea221e55f9125a9f"
   integrity sha512-pWW2slN7lGlkx0MOEBoUGwRX5UgSCLq3dy2c8RIOpiHtA87xAUpDBvZK10MykbT+aMfXc0NI2lu1X+6kI34xng==
 
-esbuild-freebsd-arm64@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.48.tgz#e8c54c8637cd44feed967ea12338b0a4da3a7b11"
-  integrity sha512-gXqKdO8wabVcYtluAbikDH2jhXp+Klq5oCD5qbVyUG6tFiGhrC9oczKq3vIrrtwcxDQqK6+HDYK8Zrd4bCA9Gw==
-
 esbuild-linux-32@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.13.8.tgz#c537b67d7e694b60bfa2786581412838c6ba0284"
   integrity sha512-T0I0ueeKVO/Is0CAeSEOG9s2jeNNb8jrrMwG9QBIm3UU18MRB60ERgkS2uV3fZ1vP2F8i3Z2e3Zju4lg9dhVmw==
 
-esbuild-linux-32@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.48.tgz#229cf3246de2b7937c3ac13fac622d4d7a1344c5"
-  integrity sha512-ghGyDfS289z/LReZQUuuKq9KlTiTspxL8SITBFQFAFRA/IkIvDpnZnCAKTCjGXAmUqroMQfKJXMxyjJA69c/nQ==
-
 esbuild-linux-64@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.13.8.tgz#0092fc8a064001a777bfa0e3b425bb8be8f96e6a"
   integrity sha512-Bm8SYmFtvfDCIu9sjKppFXzRXn2BVpuCinU1ChTuMtdKI/7aPpXIrkqBNOgPTOQO9AylJJc1Zw6EvtKORhn64w==
 
-esbuild-linux-64@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.48.tgz#7c0e7226c02c42aacc5656c36977493dc1e96c4f"
-  integrity sha512-vni3p/gppLMVZLghI7oMqbOZdGmLbbKR23XFARKnszCIBpEMEDxOMNIKPmMItQrmH/iJrL1z8Jt2nynY0bE1ug==
-
 esbuild-linux-arm64@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.8.tgz#5cd3f2bb924212971482e8dbc25c4afd09b28110"
   integrity sha512-X4pWZ+SL+FJ09chWFgRNO3F+YtvAQRcWh0uxKqZSWKiWodAB20flsW/OWFYLXBKiVCTeoGMvENZS/GeVac7+tQ==
 
-esbuild-linux-arm64@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.48.tgz#0af1eda474b5c6cc0cace8235b74d0cb8fcf57a7"
-  integrity sha512-3CFsOlpoxlKPRevEHq8aAntgYGYkE1N9yRYAcPyng/p4Wyx0tPR5SBYsxLKcgPB9mR8chHEhtWYz6EZ+H199Zw==
-
 esbuild-linux-arm@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.13.8.tgz#ad634f96bf2975536907aeb9fdb75a3194f4ddce"
   integrity sha512-4/HfcC40LJ4GPyboHA+db0jpFarTB628D1ifU+/5bunIgY+t6mHkJWyxWxAAE8wl/ZIuRYB9RJFdYpu1AXGPdg==
 
-esbuild-linux-arm@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.48.tgz#de4d1fa6b77cdcd00e2bb43dd0801e4680f0ab52"
-  integrity sha512-+VfSV7Akh1XUiDNXgqgY1cUP1i2vjI+BmlyXRfVz5AfV3jbpde8JTs5Q9sYgaoq5cWfuKfoZB/QkGOI+QcL1Tw==
-
 esbuild-linux-mips64le@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.8.tgz#57857edfebf9bf65766dc8be1637f2179c990572"
   integrity sha512-o7e0D+sqHKT31v+mwFircJFjwSKVd2nbkHEn4l9xQ1hLR+Bv8rnt3HqlblY3+sBdlrOTGSwz0ReROlKUMJyldA==
 
-esbuild-linux-mips64le@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.48.tgz#822c1778495f7868e990d4da47ad7281df28fd15"
-  integrity sha512-cs0uOiRlPp6ymknDnjajCgvDMSsLw5mST2UXh+ZIrXTj2Ifyf2aAP3Iw4DiqgnyYLV2O/v/yWBJx+WfmKEpNLA==
-
 esbuild-linux-ppc64le@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.8.tgz#fdb82a059a5b86bb10fb42091b4ebcf488b9cd46"
   integrity sha512-eZSQ0ERsWkukJp2px/UWJHVNuy0lMoz/HZcRWAbB6reoaBw7S9vMzYNUnflfL3XA6WDs+dZn3ekHE4Y2uWLGig==
 
-esbuild-linux-ppc64le@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.48.tgz#55de0a9ec4a48fedfe82a63e083164d001709447"
-  integrity sha512-+2F0vJMkuI0Wie/wcSPDCqXvSFEELH7Jubxb7mpWrA/4NpT+/byjxDz0gG6R1WJoeDefcrMfpBx4GFNN1JQorQ==
-
-esbuild-linux-riscv64@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.48.tgz#cd2b7381880b2f4b21a5a598fb673492120f18a5"
-  integrity sha512-BmaK/GfEE+5F2/QDrIXteFGKnVHGxlnK9MjdVKMTfvtmudjY3k2t8NtlY4qemKSizc+QwyombGWTBDc76rxePA==
-
-esbuild-linux-s390x@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.48.tgz#4b319eca2a5c64637fc7397ffbd9671719cdb6bf"
-  integrity sha512-tndw/0B9jiCL+KWKo0TSMaUm5UWBLsfCKVdbfMlb3d5LeV9WbijZ8Ordia8SAYv38VSJWOEt6eDCdOx8LqkC4g==
-
 esbuild-netbsd-64@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.8.tgz#d7879e7123d3b2c04754ece8bd061aa6866deeff"
   integrity sha512-gZX4kP7gVvOrvX0ZwgHmbuHczQUwqYppxqtoyC7VNd80t5nBHOFXVhWo2Ad/Lms0E8b+wwgI/WjZFTCpUHOg9Q==
 
-esbuild-netbsd-64@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.48.tgz#c27cde8b5cb55dcc227943a18ab078fb98d0adbf"
-  integrity sha512-V9hgXfwf/T901Lr1wkOfoevtyNkrxmMcRHyticybBUHookznipMOHoF41Al68QBsqBxnITCEpjjd4yAos7z9Tw==
-
 esbuild-openbsd-64@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.8.tgz#88b280b6cb0a3f6adb60abf27fc506c506a35cf0"
   integrity sha512-afzza308X4WmcebexbTzAgfEWt9MUkdTvwIa8xOu4CM2qGbl2LanqEl8/LUs8jh6Gqw6WsicEK52GPrS9wvkcw==
 
-esbuild-openbsd-64@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.48.tgz#af5ab2d1cb41f09064bba9465fc8bf1309150df1"
-  integrity sha512-+IHf4JcbnnBl4T52egorXMatil/za0awqzg2Vy6FBgPcBpisDWT2sVz/tNdrK9kAqj+GZG/jZdrOkj7wsrNTKA==
-
 esbuild-sunos-64@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.13.8.tgz#229ae7c7703196a58acd0f0291ad9bebda815d63"
   integrity sha512-mWPZibmBbuMKD+LDN23LGcOZ2EawMYBONMXXHmbuxeT0XxCNwadbCVwUQ/2p5Dp5Kvf6mhrlIffcnWOiCBpiVw==
 
-esbuild-sunos-64@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.48.tgz#db3ae20526055cf6fd5c4582676233814603ac54"
-  integrity sha512-77m8bsr5wOpOWbGi9KSqDphcq6dFeJyun8TA+12JW/GAjyfTwVtOnN8DOt6DSPUfEV+ltVMNqtXUeTeMAxl5KA==
-
 esbuild-windows-32@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.13.8.tgz#892d093e32a21c0c9135e5a0ffdc380aeb70e763"
   integrity sha512-QsZ1HnWIcnIEApETZWw8HlOhDSWqdZX2SylU7IzGxOYyVcX7QI06ety/aDcn437mwyO7Ph4RrbhB+2ntM8kX8A==
 
-esbuild-windows-32@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.48.tgz#021ffceb0a3f83078262870da88a912293c57475"
-  integrity sha512-EPgRuTPP8vK9maxpTGDe5lSoIBHGKO/AuxDncg5O3NkrPeLNdvvK8oywB0zGaAZXxYWfNNSHskvvDgmfVTguhg==
-
 esbuild-windows-64@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.13.8.tgz#7defd8d79ae3bb7e6f53b65a7190be7daf901686"
   integrity sha512-76Fb57B9eE/JmJi1QmUW0tRLQZfGo0it+JeYoCDTSlbTn7LV44ecOHIMJSSgZADUtRMWT9z0Kz186bnaB3amSg==
 
-esbuild-windows-64@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.48.tgz#a4d3407b580f9faac51f61eec095fa985fb3fee4"
-  integrity sha512-YmpXjdT1q0b8ictSdGwH3M8VCoqPpK1/UArze3X199w6u8hUx3V8BhAi1WjbsfDYRBanVVtduAhh2sirImtAvA==
-
 esbuild-windows-arm64@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.8.tgz#e59ae004496fd8a5ab67bfc7945a2e47480d6fb9"
   integrity sha512-HW6Mtq5eTudllxY2YgT62MrVcn7oq2o8TAoAvDUhyiEmRmDY8tPwAhb1vxw5/cdkbukM3KdMYtksnUhF/ekWeg==
 
-esbuild-windows-arm64@0.14.48:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.48.tgz#762c0562127d8b09bfb70a3c816460742dd82880"
-  integrity sha512-HHaOMCsCXp0rz5BT2crTka6MPWVno121NKApsGs/OIW5QC0ggC69YMGs1aJct9/9FSUF4A1xNE/cLvgB5svR4g==
-
 esbuild@0.13.8:
   version "0.13.8"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.13.8.tgz#bd7cc51b881ab067789f88e17baca74724c1ec4f"
@@ -7501,31 +7763,33 @@ esbuild@0.13.8:
     esbuild-windows-64 "0.13.8"
     esbuild-windows-arm64 "0.13.8"
 
-esbuild@^0.14.27:
-  version "0.14.48"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.48.tgz#da5d8d25cd2d940c45ea0cfecdca727f7aee2b85"
-  integrity sha512-w6N1Yn5MtqK2U1/WZTX9ZqUVb8IOLZkZ5AdHkT6x3cHDMVsYWC7WPdiLmx19w3i4Rwzy5LqsEMtVihG3e4rFzA==
+esbuild@^0.17.5:
+  version "0.17.19"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.17.19.tgz#087a727e98299f0462a3d0bcdd9cd7ff100bd955"
+  integrity sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==
   optionalDependencies:
-    esbuild-android-64 "0.14.48"
-    esbuild-android-arm64 "0.14.48"
-    esbuild-darwin-64 "0.14.48"
-    esbuild-darwin-arm64 "0.14.48"
-    esbuild-freebsd-64 "0.14.48"
-    esbuild-freebsd-arm64 "0.14.48"
-    esbuild-linux-32 "0.14.48"
-    esbuild-linux-64 "0.14.48"
-    esbuild-linux-arm "0.14.48"
-    esbuild-linux-arm64 "0.14.48"
-    esbuild-linux-mips64le "0.14.48"
-    esbuild-linux-ppc64le "0.14.48"
-    esbuild-linux-riscv64 "0.14.48"
-    esbuild-linux-s390x "0.14.48"
-    esbuild-netbsd-64 "0.14.48"
-    esbuild-openbsd-64 "0.14.48"
-    esbuild-sunos-64 "0.14.48"
-    esbuild-windows-32 "0.14.48"
-    esbuild-windows-64 "0.14.48"
-    esbuild-windows-arm64 "0.14.48"
+    "@esbuild/android-arm" "0.17.19"
+    "@esbuild/android-arm64" "0.17.19"
+    "@esbuild/android-x64" "0.17.19"
+    "@esbuild/darwin-arm64" "0.17.19"
+    "@esbuild/darwin-x64" "0.17.19"
+    "@esbuild/freebsd-arm64" "0.17.19"
+    "@esbuild/freebsd-x64" "0.17.19"
+    "@esbuild/linux-arm" "0.17.19"
+    "@esbuild/linux-arm64" "0.17.19"
+    "@esbuild/linux-ia32" "0.17.19"
+    "@esbuild/linux-loong64" "0.17.19"
+    "@esbuild/linux-mips64el" "0.17.19"
+    "@esbuild/linux-ppc64" "0.17.19"
+    "@esbuild/linux-riscv64" "0.17.19"
+    "@esbuild/linux-s390x" "0.17.19"
+    "@esbuild/linux-x64" "0.17.19"
+    "@esbuild/netbsd-x64" "0.17.19"
+    "@esbuild/openbsd-x64" "0.17.19"
+    "@esbuild/sunos-x64" "0.17.19"
+    "@esbuild/win32-arm64" "0.17.19"
+    "@esbuild/win32-ia32" "0.17.19"
+    "@esbuild/win32-x64" "0.17.19"
 
 escalade@^3.1.1:
   version "3.1.1"
@@ -7787,7 +8051,7 @@ estree-to-babel@^3.1.0:
     "@babel/types" "^7.2.0"
     c8 "^7.6.0"
 
-estree-walker@^2.0.1:
+estree-walker@^2.0.1, estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
@@ -10310,6 +10574,11 @@ json5@^2.1.2, json5@^2.1.3, json5@^2.2.1:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
+json5@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
@@ -11090,11 +11359,16 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.16.0.tgz#664f43e45460fb98faf00edca0bb0d7b8dce7916"
   integrity sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==
 
-nanoid@^3.3.1, nanoid@^3.3.4:
+nanoid@^3.3.1:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
+nanoid@^3.3.6:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
+  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -12204,12 +12478,12 @@ postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.4.13:
-  version "8.4.14"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
-  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
+postcss@^8.4.23:
+  version "8.4.24"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.24.tgz#f714dba9b2284be3cc07dbd2fc57ee4dc972d2df"
+  integrity sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==
   dependencies:
-    nanoid "^3.3.4"
+    nanoid "^3.3.6"
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
@@ -12669,6 +12943,11 @@ react-refresh@^0.13.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.13.0.tgz#cbd01a4482a177a5da8d44c9755ebb1f26d5a1c1"
   integrity sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg==
 
+react-refresh@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
+  integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
+
 react-router-dom@^5.2.0:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.3.tgz#8779fc28e6691d07afcaf98406d3812fe6f11199"
@@ -13176,10 +13455,10 @@ robust-predicates@^3.0.0:
   resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.1.tgz#ecde075044f7f30118682bd9fb3f123109577f9a"
   integrity sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==
 
-rollup@^2.59.0:
-  version "2.76.0"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.76.0.tgz#c69fe03db530ac53fcb9523b3caa0d3c0b9491a1"
-  integrity sha512-9jwRIEY1jOzKLj3nsY/yot41r19ITdQrhs+q3ggNWhr9TQgduHqANvPpS32RNpzGklJu3G1AJfvlZLi/6wFgWA==
+rollup@^3.21.0:
+  version "3.26.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.26.0.tgz#9f2e0316a4ca641911cefd8515c562a9124e6130"
+  integrity sha512-YzJH0eunH2hr3knvF3i6IkLO/jTjAEwU4HoMUbQl4//Tnl3ou0e7P5SjxdDr8HQJdeUJShlbEHXrrnEHy1l7Yg==
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -13946,7 +14225,7 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-svg-parser@^2.0.2:
+svg-parser@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
   integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
@@ -14898,22 +15177,23 @@ vite-plugin-mdx@^3.5.6:
     resolve "^1.20.0"
     unified "^9.2.1"
 
-vite-plugin-svgr@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-0.4.0.tgz#f9cebfde9000bbe4c699ab13182fe867d0f1bdcc"
-  integrity sha512-aNhPEYxn2L4m1lOvUpJksMPxNZbYBq1npnMhi6D5HUykBV03bVmcu3WGHZ50lIYr0CC5t+yEvck8hNbHOOgKxg==
+vite-plugin-svgr@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/vite-plugin-svgr/-/vite-plugin-svgr-3.2.0.tgz#920375aaf6635091c9ac8e467825f92d32544476"
+  integrity sha512-Uvq6niTvhqJU6ga78qLKBFJSDvxWhOnyfQSoKpDPMAGxJPo5S3+9hyjExE5YDj6Lpa4uaLkGc1cBgxXov+LjSw==
   dependencies:
-    "@svgr/core" "^5.5.0"
+    "@rollup/pluginutils" "^5.0.2"
+    "@svgr/core" "^7.0.0"
+    "@svgr/plugin-jsx" "^7.0.0"
 
-vite@^2.4.2:
-  version "2.9.14"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.14.tgz#c438324c6594afd1050df3777da981dee988bb1b"
-  integrity sha512-P/UCjSpSMcE54r4mPak55hWAZPlyfS369svib/gpmz8/01L822lMPOJ/RYW6tLCe1RPvMvOsJ17erf55bKp4Hw==
+vite@^4.2.0:
+  version "4.3.9"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.9.tgz#db896200c0b1aa13b37cdc35c9e99ee2fdd5f96d"
+  integrity sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==
   dependencies:
-    esbuild "^0.14.27"
-    postcss "^8.4.13"
-    resolve "^1.22.0"
-    rollup "^2.59.0"
+    esbuild "^0.17.5"
+    postcss "^8.4.23"
+    rollup "^3.21.0"
   optionalDependencies:
     fsevents "~2.3.2"
 

From 9704033dc895b3de1800a85e2827919eee53cd70 Mon Sep 17 00:00:00 2001
From: Robin Townsend <robin@robin.town>
Date: Fri, 30 Jun 2023 18:45:32 -0400
Subject: [PATCH 17/18] Fix tests

---
 babel.config.cjs   | 7 ++++++-
 package.json       | 3 ++-
 test/mocks/svgr.ts | 3 +++
 3 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 test/mocks/svgr.ts

diff --git a/babel.config.cjs b/babel.config.cjs
index f7ff0ee..1a472c4 100644
--- a/babel.config.cjs
+++ b/babel.config.cjs
@@ -8,7 +8,12 @@ module.exports = {
         },
       },
     ],
-    "@babel/preset-react",
+    [
+      "@babel/preset-react",
+      {
+        runtime: "automatic",
+      },
+    ],
     "@babel/preset-typescript",
   ],
   plugins: ["babel-plugin-transform-vite-meta-env"],
diff --git a/package.json b/package.json
index c98dbe5..39f930a 100644
--- a/package.json
+++ b/package.json
@@ -120,7 +120,8 @@
       "/node_modules/(?!internmap)+$"
     ],
     "moduleNameMapper": {
-      "\\.(css|less|svg)+$": "identity-obj-proxy",
+      "\\.css$": "identity-obj-proxy",
+      "\\.svg$": "<rootDir>/test/mocks/svgr.ts",
       "^\\./IndexedDBWorker\\?worker$": "<rootDir>/test/mocks/workerMock.ts",
       "^\\./olm$": "<rootDir>/test/mocks/olmMock.ts"
     },
diff --git a/test/mocks/svgr.ts b/test/mocks/svgr.ts
new file mode 100644
index 0000000..1849060
--- /dev/null
+++ b/test/mocks/svgr.ts
@@ -0,0 +1,3 @@
+// Mock file for SVG imports
+export default "SvgrURL";
+export const ReactComponent = "div";

From 52551580908872bb182896188ddecc7e8e9decf8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 3 Jul 2023 10:03:24 +0200
Subject: [PATCH 18/18] Fix new grid layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/room/InCallView.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 80df493..e3c7e94 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -50,7 +50,11 @@ import {
   RoomHeaderInfo,
   VersionMismatchWarning,
 } from "../Header";
-import { useVideoGridLayout, TileDescriptor } from "../video-grid/VideoGrid";
+import {
+  useVideoGridLayout,
+  TileDescriptor,
+  VideoGrid,
+} from "../video-grid/VideoGrid";
 import {
   useShowInspector,
   useShowConnectionStats,
@@ -245,7 +249,8 @@ export function InCallView({
     [fullscreenItem, noControls, items]
   );
 
-  const Grid = NewVideoGrid;
+  const Grid =
+    items.length > 12 && layout === "freedom" ? NewVideoGrid : VideoGrid;
 
   const prefersReducedMotion = usePrefersReducedMotion();