From 6e36d2f07f3921bfd8d8d0fcbd84bbc265c80da8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=ABl=20Poyet?= <joel.poyet@novaloop.ch>
Date: Sun, 22 Jun 2025 08:43:26 +0200
Subject: [PATCH] Update @vector-im/compound-web (#29641)

* chore: update `@vector-im/compound-web`

* test: update snapshots
# Conflicts:
#	yarn.lock
---
 package.json                                  |   2 +-
 .../RoomSummaryCard-test.tsx.snap             | 306 +++++++++---------
 .../__snapshots__/UserInfo-test.tsx.snap      |  72 ++---
 .../PinnedEventTile-test.tsx.snap             |  48 +--
 .../ThreadsActivityCentre-test.tsx.snap       |  40 +--
 yarn.lock                                     |  13 +-
 6 files changed, 241 insertions(+), 240 deletions(-)

diff --git a/package.json b/package.json
index fee7e6cd48..a2e4fbda8b 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
         "@types/png-chunks-extract": "^1.0.2",
         "@types/react-virtualized": "^9.21.30",
         "@vector-im/compound-design-tokens": "^4.0.0",
-        "@vector-im/compound-web": "^7.9.0",
+        "@vector-im/compound-web": "^7.10.0",
         "@vector-im/matrix-wysiwyg": "2.38.2",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
index 0d12e7deaa..cc498cac96 100644
--- a/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
@@ -161,13 +161,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
       >
         <div
           aria-checked="false"
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitemcheckbox"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -179,7 +179,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Favourite
           </span>
@@ -198,13 +198,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </div>
         </div>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -216,13 +216,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Invite
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -241,13 +241,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           role="separator"
         />
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -265,13 +265,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             People
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -284,13 +284,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -305,13 +305,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Threads
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -328,13 +328,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           aria-haspopup="dialog"
         >
           <button
-            class="_item_1x5l4_8 _interactive_1x5l4_26"
+            class="_item_dyt4i_8 _interactive_dyt4i_26"
             data-kind="primary"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_1x5l4_34"
+              class="_icon_dyt4i_50"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -348,13 +348,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
             >
               Pinned messages
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_1x5l4_50"
+              class="_nav-hint_dyt4i_59"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -373,13 +373,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </button>
         </div>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -391,13 +391,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Files
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -410,13 +410,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -428,13 +428,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Extensions
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -453,13 +453,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           role="separator"
         />
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -471,13 +471,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Copy link
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -490,13 +490,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -508,13 +508,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Polls
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -527,13 +527,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -545,13 +545,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Export Chat
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -564,13 +564,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -585,13 +585,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Settings
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -613,13 +613,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           class="mx_RoomSummaryCard_bottomOptions"
         >
           <button
-            class="mx_RoomSummaryCard_leave _item_1x5l4_8 _interactive_1x5l4_26"
+            class="mx_RoomSummaryCard_leave _item_dyt4i_8 _interactive_dyt4i_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_1x5l4_34"
+              class="_icon_dyt4i_50"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -634,13 +634,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
             >
               Leave room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_1x5l4_50"
+              class="_nav-hint_dyt4i_59"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -653,13 +653,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             </svg>
           </button>
           <button
-            class="_item_1x5l4_8 _interactive_1x5l4_26"
+            class="_item_dyt4i_8 _interactive_dyt4i_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_1x5l4_34"
+              class="_icon_dyt4i_50"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -671,13 +671,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
             >
               Report room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_1x5l4_50"
+              class="_nav-hint_dyt4i_59"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -820,13 +820,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
       >
         <div
           aria-checked="false"
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitemcheckbox"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -838,7 +838,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Favourite
           </span>
@@ -857,13 +857,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </div>
         </div>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -875,13 +875,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Invite
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -900,13 +900,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           role="separator"
         />
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -924,13 +924,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             People
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -943,13 +943,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -964,13 +964,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Threads
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -987,13 +987,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           aria-haspopup="dialog"
         >
           <button
-            class="_item_1x5l4_8 _interactive_1x5l4_26"
+            class="_item_dyt4i_8 _interactive_dyt4i_26"
             data-kind="primary"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_1x5l4_34"
+              class="_icon_dyt4i_50"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -1007,13 +1007,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
             >
               Pinned messages
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_1x5l4_50"
+              class="_nav-hint_dyt4i_59"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -1032,13 +1032,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </button>
         </div>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1050,13 +1050,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Files
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1069,13 +1069,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1087,13 +1087,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Extensions
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1112,13 +1112,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           role="separator"
         />
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1130,13 +1130,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Copy link
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1149,13 +1149,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1167,13 +1167,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Polls
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1186,13 +1186,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1204,13 +1204,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Export Chat
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1223,13 +1223,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1244,13 +1244,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Settings
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1272,13 +1272,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           class="mx_RoomSummaryCard_bottomOptions"
         >
           <button
-            class="mx_RoomSummaryCard_leave _item_1x5l4_8 _interactive_1x5l4_26"
+            class="mx_RoomSummaryCard_leave _item_dyt4i_8 _interactive_dyt4i_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_1x5l4_34"
+              class="_icon_dyt4i_50"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -1293,13 +1293,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
             >
               Leave room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_1x5l4_50"
+              class="_nav-hint_dyt4i_59"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -1312,13 +1312,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             </svg>
           </button>
           <button
-            class="_item_1x5l4_8 _interactive_1x5l4_26"
+            class="_item_dyt4i_8 _interactive_dyt4i_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_1x5l4_34"
+              class="_icon_dyt4i_50"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -1330,13 +1330,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
             >
               Report room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_1x5l4_50"
+              class="_nav-hint_dyt4i_59"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -1516,13 +1516,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
       >
         <div
           aria-checked="false"
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitemcheckbox"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1534,7 +1534,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Favourite
           </span>
@@ -1553,13 +1553,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </div>
         </div>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1571,13 +1571,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Invite
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1596,13 +1596,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           role="separator"
         />
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1620,13 +1620,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             People
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1639,13 +1639,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1660,13 +1660,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Threads
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1683,13 +1683,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           aria-haspopup="dialog"
         >
           <button
-            class="_item_1x5l4_8 _interactive_1x5l4_26"
+            class="_item_dyt4i_8 _interactive_dyt4i_26"
             data-kind="primary"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_1x5l4_34"
+              class="_icon_dyt4i_50"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -1703,13 +1703,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
             >
               Pinned messages
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_1x5l4_50"
+              class="_nav-hint_dyt4i_59"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -1728,13 +1728,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </button>
         </div>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1746,13 +1746,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Files
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1765,13 +1765,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1783,13 +1783,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Extensions
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1808,13 +1808,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           role="separator"
         />
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1826,13 +1826,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Copy link
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1845,13 +1845,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1863,13 +1863,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Polls
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1882,13 +1882,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1900,13 +1900,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Export Chat
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1919,13 +1919,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1940,13 +1940,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Settings
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1968,13 +1968,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           class="mx_RoomSummaryCard_bottomOptions"
         >
           <button
-            class="mx_RoomSummaryCard_leave _item_1x5l4_8 _interactive_1x5l4_26"
+            class="mx_RoomSummaryCard_leave _item_dyt4i_8 _interactive_dyt4i_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_1x5l4_34"
+              class="_icon_dyt4i_50"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -1989,13 +1989,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
             >
               Leave room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_1x5l4_50"
+              class="_nav-hint_dyt4i_59"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -2008,13 +2008,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             </svg>
           </button>
           <button
-            class="_item_1x5l4_8 _interactive_1x5l4_26"
+            class="_item_dyt4i_8 _interactive_dyt4i_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_1x5l4_34"
+              class="_icon_dyt4i_50"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -2026,13 +2026,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
             >
               Report room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_1x5l4_50"
+              class="_nav-hint_dyt4i_59"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
index bdb4800f90..db0252ebe9 100644
--- a/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
@@ -128,13 +128,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -146,13 +146,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Send message
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -165,14 +165,14 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26 _disabled_1x5l4_109"
+          class="_item_dyt4i_8 _interactive_dyt4i_26 _disabled_dyt4i_118"
           data-kind="primary"
           disabled=""
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -184,13 +184,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Jump to read receipt
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -203,13 +203,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -221,13 +221,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Share profile
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -244,13 +244,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="critical"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -262,13 +262,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Ignore
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -422,13 +422,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -440,13 +440,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Send message
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -459,14 +459,14 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26 _disabled_1x5l4_109"
+          class="_item_dyt4i_8 _interactive_dyt4i_26 _disabled_dyt4i_118"
           data-kind="primary"
           disabled=""
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -478,13 +478,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Jump to read receipt
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -497,13 +497,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
           </svg>
         </button>
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -515,13 +515,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Share profile
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -538,13 +538,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="critical"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -556,13 +556,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Deactivate user
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -579,13 +579,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="critical"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_1x5l4_34"
+            class="_icon_dyt4i_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -597,13 +597,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
           >
             Ignore
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_1x5l4_50"
+            class="_nav-hint_dyt4i_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
index bb22f55b2f..35a74e5b2d 100644
--- a/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
@@ -196,7 +196,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   tabindex="-1"
 >
   <button
-    class="_item_1x5l4_8 _interactive_1x5l4_26"
+    class="_item_dyt4i_8 _interactive_dyt4i_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -205,7 +205,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_1x5l4_34"
+      class="_icon_dyt4i_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -217,13 +217,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
     >
       View in timeline
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_1x5l4_50"
+      class="_nav-hint_dyt4i_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -236,7 +236,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     </svg>
   </button>
   <button
-    class="_item_1x5l4_8 _interactive_1x5l4_26"
+    class="_item_dyt4i_8 _interactive_dyt4i_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -245,7 +245,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_1x5l4_34"
+      class="_icon_dyt4i_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -262,13 +262,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
     >
       Unpin
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_1x5l4_50"
+      class="_nav-hint_dyt4i_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -281,7 +281,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     </svg>
   </button>
   <button
-    class="_item_1x5l4_8 _interactive_1x5l4_26"
+    class="_item_dyt4i_8 _interactive_dyt4i_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -290,7 +290,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_1x5l4_34"
+      class="_icon_dyt4i_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -302,13 +302,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
     >
       Forward
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_1x5l4_50"
+      class="_nav-hint_dyt4i_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -327,7 +327,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     role="separator"
   />
   <button
-    class="_item_1x5l4_8 _interactive_1x5l4_26"
+    class="_item_dyt4i_8 _interactive_dyt4i_26"
     data-kind="critical"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -336,7 +336,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_1x5l4_34"
+      class="_icon_dyt4i_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -348,13 +348,13 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
     >
       Delete
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_1x5l4_50"
+      class="_nav-hint_dyt4i_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -387,7 +387,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   tabindex="-1"
 >
   <button
-    class="_item_1x5l4_8 _interactive_1x5l4_26"
+    class="_item_dyt4i_8 _interactive_dyt4i_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -396,7 +396,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   >
     <svg
       aria-hidden="true"
-      class="_icon_1x5l4_34"
+      class="_icon_dyt4i_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -408,13 +408,13 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
     >
       View in timeline
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_1x5l4_50"
+      class="_nav-hint_dyt4i_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -427,7 +427,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
     </svg>
   </button>
   <button
-    class="_item_1x5l4_8 _interactive_1x5l4_26"
+    class="_item_dyt4i_8 _interactive_dyt4i_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -436,7 +436,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   >
     <svg
       aria-hidden="true"
-      class="_icon_1x5l4_34"
+      class="_icon_dyt4i_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -448,13 +448,13 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
       />
     </svg>
     <span
-      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
     >
       Forward
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_1x5l4_50"
+      class="_nav-hint_dyt4i_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
index 535e95d4d9..4e61e6cd0e 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
@@ -26,7 +26,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
     class="mx_ThreadsActivityCentre_rows"
   >
     <button
-      class="mx_ThreadsActivityCentreRow _item_1x5l4_8 _interactive_1x5l4_26"
+      class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -34,7 +34,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       tabindex="-1"
     >
       <div
-        class="_icon_1x5l4_34"
+        class="_icon_dyt4i_50"
       >
         <span
           class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -48,13 +48,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
       >
         This is a real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_1x5l4_50"
+        class="_nav-hint_dyt4i_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -74,7 +74,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       </div>
     </button>
     <button
-      class="mx_ThreadsActivityCentreRow _item_1x5l4_8 _interactive_1x5l4_26"
+      class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -82,7 +82,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
       tabindex="-1"
     >
       <div
-        class="_icon_1x5l4_34"
+        class="_icon_dyt4i_50"
       >
         <span
           class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -96,13 +96,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
       >
         A notification
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_1x5l4_50"
+        class="_nav-hint_dyt4i_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -328,7 +328,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
     class="mx_ThreadsActivityCentre_rows"
   >
     <button
-      class="mx_ThreadsActivityCentreRow _item_1x5l4_8 _interactive_1x5l4_26"
+      class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -336,7 +336,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="_icon_1x5l4_34"
+        class="_icon_dyt4i_50"
       >
         <span
           class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -350,13 +350,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
       >
         This is a third real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_1x5l4_50"
+        class="_nav-hint_dyt4i_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -376,7 +376,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       </div>
     </button>
     <button
-      class="mx_ThreadsActivityCentreRow _item_1x5l4_8 _interactive_1x5l4_26"
+      class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -384,7 +384,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="_icon_1x5l4_34"
+        class="_icon_dyt4i_50"
       >
         <span
           class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -398,13 +398,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
       >
         This is a real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_1x5l4_50"
+        class="_nav-hint_dyt4i_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -424,7 +424,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       </div>
     </button>
     <button
-      class="mx_ThreadsActivityCentreRow _item_1x5l4_8 _interactive_1x5l4_26"
+      class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -432,7 +432,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="_icon_1x5l4_34"
+        class="_icon_dyt4i_50"
       >
         <span
           class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -446,13 +446,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         </span>
       </div>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_1x5l4_43"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
       >
         This is a second real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_1x5l4_50"
+        class="_nav-hint_dyt4i_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
diff --git a/yarn.lock b/yarn.lock
index 52bf1c1013..931f3c61b1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3662,10 +3662,10 @@
   resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-4.0.1.tgz#5c4ea7ad664d8e6206dc42e41649c80ef060a760"
   integrity sha512-V4AsK1FVFxZ6DmmCoeAi8FyvE7ODMlXPWjqRGotcnVaoGNrDQrVz2ZGV85DCz5ISxB3iynYASe6OXsDVXT1zFA==
 
-"@vector-im/compound-web@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.9.0.tgz#72eccdd501e54f7b88317ba927bfeca61af72de0"
-  integrity sha512-2rBD+1Mit+kOd7+ZPUxdH7y6V1mi7Fga85cyC2cvUeL/sXBn0Q5HuyJ8whmdgLmgZiI4LkLriCFaeogYipKE+Q==
+"@vector-im/compound-web@^7.10.0":
+  version "7.10.0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.10.0.tgz#d3913ea8737c56271152a1643f12d5c5be370718"
+  integrity sha512-lqIA/eHum5tekFkNeHmgK9Cm48pl7leWKVvJDy/hJFX2KDHqGvPcIy6E0waqTIsodV8z0GAztj1c/1cYRpdYIA==
   dependencies:
     "@floating-ui/react" "^0.27.0"
     "@radix-ui/react-context-menu" "^2.2.1"
@@ -3677,15 +3677,16 @@
     classnames "^2.5.1"
     vaul "^1.0.0"
 
-"@vector-im/matrix-wysiwyg-wasm@link:../../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.2-3fa19a2a17fd12d955ef1e14fd63aecbcf3b95e8-integrity/node_modules/bindings/wysiwyg-wasm":
+"@vector-im/matrix-wysiwyg-wasm@link:../../../../Library/Caches/Yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.2-3fa19a2a17fd12d955ef1e14fd63aecbcf3b95e8-integrity/node_modules/bindings/wysiwyg-wasm":
   version "0.0.0"
+  uid ""
 
 "@vector-im/matrix-wysiwyg@2.38.2":
   version "2.38.2"
   resolved "https://registry.yarnpkg.com/@vector-im/matrix-wysiwyg/-/matrix-wysiwyg-2.38.2.tgz#3fa19a2a17fd12d955ef1e14fd63aecbcf3b95e8"
   integrity sha512-TUnLPgZ8/zGUccQZxjIP3MVHjqybgV4u0r6kXibs35wlXgomXjwcN5gchl3FpgGkiHbi8g3D2ao0oHaqi2GaIw==
   dependencies:
-    "@vector-im/matrix-wysiwyg-wasm" "link:../../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.2-3fa19a2a17fd12d955ef1e14fd63aecbcf3b95e8-integrity/node_modules/bindings/wysiwyg-wasm"
+    "@vector-im/matrix-wysiwyg-wasm" "link:../../../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.2-3fa19a2a17fd12d955ef1e14fd63aecbcf3b95e8-integrity/node_modules/bindings/wysiwyg-wasm"
 
 "@webassemblyjs/ast@1.14.1", "@webassemblyjs/ast@^1.14.1":
   version "1.14.1"