diff --git a/package.json b/package.json
index 0bbd0283ddc..000e7aba3af 100644
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
         "@sentry/browser": "^10.0.0",
         "@types/png-chunks-extract": "^1.0.2",
         "@vector-im/compound-design-tokens": "6.4.3",
-        "@vector-im/compound-web": "^8.3.1",
+        "@vector-im/compound-web": "^8.3.4",
         "@vector-im/matrix-wysiwyg": "2.40.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
diff --git a/packages/shared-components/package.json b/packages/shared-components/package.json
index 38c186a2434..e3bba648e06 100644
--- a/packages/shared-components/package.json
+++ b/packages/shared-components/package.json
@@ -50,7 +50,7 @@
     },
     "dependencies": {
         "@element-hq/element-web-module-api": "^1.8.0",
-        "@vector-im/compound-design-tokens": "^6.3.0",
+        "@vector-im/compound-design-tokens": "^6.4.3",
         "classnames": "^2.5.1",
         "counterpart": "^0.18.6",
         "lodash": "^4.17.21",
@@ -93,6 +93,6 @@
     },
     "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
     "peerDependencies": {
-        "@vector-im/compound-web": "^8.2.5"
+        "@vector-im/compound-web": "^8.3.4"
     }
 }
diff --git a/packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap b/packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap
index ebb8df0a3d2..9491cc6698c 100644
--- a/packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap
+++ b/packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`AvatarWithDetails renders a banner with an action 1`] = `
       class="actions"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="primary"
         data-size="sm"
         role="button"
@@ -55,7 +55,7 @@ exports[`AvatarWithDetails renders a banner with an action 1`] = `
         Withdraw verification
       </button>
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -92,7 +92,7 @@ exports[`AvatarWithDetails renders a banner with an avatar iamge 1`] = `
       class="actions"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -138,7 +138,7 @@ exports[`AvatarWithDetails renders a critical banner 1`] = `
       class="actions"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -188,7 +188,7 @@ exports[`AvatarWithDetails renders a default banner 1`] = `
       class="actions"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -239,7 +239,7 @@ exports[`AvatarWithDetails renders a info banner 1`] = `
       class="actions"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -285,7 +285,7 @@ exports[`AvatarWithDetails renders a success banner 1`] = `
       class="actions"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
diff --git a/packages/shared-components/src/composer/HistoryVisibleBannerView/__snapshots__/HistoryVisibleBannerView.test.tsx.snap b/packages/shared-components/src/composer/HistoryVisibleBannerView/__snapshots__/HistoryVisibleBannerView.test.tsx.snap
index 1ee67f9a374..37dc6f84ff6 100644
--- a/packages/shared-components/src/composer/HistoryVisibleBannerView/__snapshots__/HistoryVisibleBannerView.test.tsx.snap
+++ b/packages/shared-components/src/composer/HistoryVisibleBannerView/__snapshots__/HistoryVisibleBannerView.test.tsx.snap
@@ -48,7 +48,7 @@ exports[`HistoryVisibleBannerView renders a history visible banner 1`] = `
       class="actions"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
diff --git a/packages/shared-components/src/room-list/RoomListSearchView/__snapshots__/RoomListSearchView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListSearchView/__snapshots__/RoomListSearchView.test.tsx.snap
index 689ea2ad8dc..869e073bd50 100644
--- a/packages/shared-components/src/room-list/RoomListSearchView/__snapshots__/RoomListSearchView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListSearchView/__snapshots__/RoomListSearchView.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`RoomListSearchView Storybook snapshots renders the default state 1`] =
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <button
-      class="_button_187yx_8 search _has-icon_187yx_57"
+      class="_button_13vu4_8 search _has-icon_13vu4_60"
       data-kind="secondary"
       data-size="sm"
       id="room-list-search-button"
@@ -44,7 +44,7 @@ exports[`RoomListSearchView Storybook snapshots renders the default state 1`] =
     </button>
     <button
       aria-label="Explore rooms"
-      class="_button_187yx_8 _has-icon_187yx_57 _icon-only_187yx_50"
+      class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -76,7 +76,7 @@ exports[`RoomListSearchView Storybook snapshots renders with all buttons visible
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <button
-      class="_button_187yx_8 search _has-icon_187yx_57"
+      class="_button_13vu4_8 search _has-icon_13vu4_60"
       data-kind="secondary"
       data-size="sm"
       id="room-list-search-button"
@@ -111,7 +111,7 @@ exports[`RoomListSearchView Storybook snapshots renders with all buttons visible
     </button>
     <button
       aria-label="Open dial pad"
-      class="_button_187yx_8 _has-icon_187yx_57 _icon-only_187yx_50"
+      class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -132,7 +132,7 @@ exports[`RoomListSearchView Storybook snapshots renders with all buttons visible
     </button>
     <button
       aria-label="Explore rooms"
-      class="_button_187yx_8 _has-icon_187yx_57 _icon-only_187yx_50"
+      class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -164,7 +164,7 @@ exports[`RoomListSearchView Storybook snapshots renders with dial pad button 1`]
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <button
-      class="_button_187yx_8 search _has-icon_187yx_57"
+      class="_button_13vu4_8 search _has-icon_13vu4_60"
       data-kind="secondary"
       data-size="sm"
       id="room-list-search-button"
@@ -199,7 +199,7 @@ exports[`RoomListSearchView Storybook snapshots renders with dial pad button 1`]
     </button>
     <button
       aria-label="Open dial pad"
-      class="_button_187yx_8 _has-icon_187yx_57 _icon-only_187yx_50"
+      class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -220,7 +220,7 @@ exports[`RoomListSearchView Storybook snapshots renders with dial pad button 1`]
     </button>
     <button
       aria-label="Explore rooms"
-      class="_button_187yx_8 _has-icon_187yx_57 _icon-only_187yx_50"
+      class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -252,7 +252,7 @@ exports[`RoomListSearchView Storybook snapshots renders without explore button 1
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <button
-      class="_button_187yx_8 search _has-icon_187yx_57"
+      class="_button_13vu4_8 search _has-icon_13vu4_60"
       data-kind="secondary"
       data-size="sm"
       id="room-list-search-button"
diff --git a/packages/shared-components/yarn.lock b/packages/shared-components/yarn.lock
index ceeb5ab89e9..b0d80c01e8c 100644
--- a/packages/shared-components/yarn.lock
+++ b/packages/shared-components/yarn.lock
@@ -2031,10 +2031,10 @@
   resolved "https://registry.yarnpkg.com/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz#538b1e103bf8d9864e7b85cc96fa8d6fb6c40777"
   integrity sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==
 
-"@vector-im/compound-design-tokens@^6.3.0":
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-6.4.2.tgz#29189d6480c8ccf09ce143cb4618fb13a56a7583"
-  integrity sha512-LHLGZgnatH3mQXn9TF+m/SUinPS2nKvuCT/r2AQ7HAgEIG/S/Ck6e/iV4IFQLSZnd9gU0RlMsLkP2UQ/AKUEBA==
+"@vector-im/compound-design-tokens@^6.4.3":
+  version "6.4.3"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-6.4.3.tgz#f8a98308650e841ffba6ca0820055e2bfe2b8af1"
+  integrity sha512-Zyqag2QCAfpRipLHSX/LEXj6OGFgBpilMQvNdr3a0iXeGASfkM3HZGid077kMRp9lvyHiQfPIs1BdllENwDSNQ==
 
 "@vitest/expect@3.2.4":
   version "3.2.4"
diff --git a/playwright/snapshots/app-loading/feature-detection.spec.ts/unsupported-browser-CompatibilityView-linux.png b/playwright/snapshots/app-loading/feature-detection.spec.ts/unsupported-browser-CompatibilityView-linux.png
index b0bb64273eb..b55e83b09ab 100644
Binary files a/playwright/snapshots/app-loading/feature-detection.spec.ts/unsupported-browser-CompatibilityView-linux.png and b/playwright/snapshots/app-loading/feature-detection.spec.ts/unsupported-browser-CompatibilityView-linux.png differ
diff --git a/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png b/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png
index c33dbaadf9a..bdf1a0de47d 100644
Binary files a/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png and b/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png differ
diff --git a/res/themes/light/css/_mods.pcss b/res/themes/light/css/_mods.pcss
index 357a8a11d10..2764c8762fb 100644
--- a/res/themes/light/css/_mods.pcss
+++ b/res/themes/light/css/_mods.pcss
@@ -8,8 +8,15 @@
     background-color: transparent !important;
 }
 
-a:hover,
-a:link,
-a:visited {
-    text-decoration: none;
+/*
+    data-kind is used by the Compound <Link> component and therefore does not override them.
+    This is horrible, but will get less horrible when links in the app are replaced with
+    <Link>.
+*/
+a:not([data-kind]) {
+    &:hover,
+    &:link,
+    &:visited {
+        text-decoration: none;
+    }
 }
diff --git a/test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap b/test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap
index d22d61a0bdc..7f0c6cf9fd8 100644
--- a/test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap
+++ b/test/unit-tests/async-components/structures/__snapshots__/ErrorView-test.tsx.snap
@@ -102,7 +102,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <button
-          class="_button_187yx_8 _has-icon_187yx_57"
+          class="_button_13vu4_8 _has-icon_13vu4_60"
           data-kind="secondary"
           data-size="sm"
           role="button"
@@ -143,7 +143,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
     >
       <a
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/macos/Element.dmg"
@@ -167,7 +167,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         Mac
       </a>
       <a
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/x64/Element%20Setup.exe"
@@ -189,7 +189,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         Windows (64-bit)
       </a>
       <a
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/arm64/Element%20Setup.exe"
@@ -211,7 +211,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         Windows (ARM 64-bit)
       </a>
       <a
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="lg"
         href="https://element.io/download#linux"
diff --git a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
index 31cae614d74..6858a9a6ddf 100644
--- a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -1018,7 +1018,7 @@ exports[`RoomView invites renders an invite room 1`] = `
           Decline
         </div>
         <button
-          class="_button_187yx_8 _destructive_187yx_107"
+          class="_button_13vu4_8 _destructive_13vu4_110"
           data-kind="tertiary"
           data-size="lg"
           role="button"
diff --git a/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap b/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap
index 9606947f168..db02841ed41 100644
--- a/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap
+++ b/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap
@@ -99,7 +99,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
                   class="mx_EncryptionCard_buttons"
                 >
                   <button
-                    class="_button_187yx_8"
+                    class="_button_13vu4_8"
                     data-kind="primary"
                     data-size="lg"
                     role="button"
@@ -119,7 +119,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
                      Use another device
                   </button>
                   <button
-                    class="_button_187yx_8"
+                    class="_button_13vu4_8"
                     data-kind="secondary"
                     data-size="lg"
                     role="button"
@@ -128,7 +128,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
                     Can't confirm?
                   </button>
                   <button
-                    class="_button_187yx_8"
+                    class="_button_13vu4_8"
                     data-kind="tertiary"
                     data-size="lg"
                     role="button"
@@ -279,7 +279,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
                   class="mx_EncryptionCard_buttons"
                 >
                   <button
-                    class="_button_187yx_8"
+                    class="_button_13vu4_8"
                     data-kind="primary"
                     data-size="lg"
                     role="button"
@@ -288,7 +288,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
                     Use recovery key
                   </button>
                   <button
-                    class="_button_187yx_8"
+                    class="_button_13vu4_8"
                     data-kind="secondary"
                     data-size="lg"
                     role="button"
@@ -297,7 +297,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
                     Can't confirm?
                   </button>
                   <button
-                    class="_button_187yx_8"
+                    class="_button_13vu4_8"
                     data-kind="tertiary"
                     data-size="lg"
                     role="button"
diff --git a/test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap b/test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap
index e4c9ec48542..c7e0a1c0be5 100644
--- a/test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap
+++ b/test/unit-tests/components/views/auth/__snapshots__/InteractiveAuthEntryComponents-test.tsx.snap
@@ -73,7 +73,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
       class="mx_EncryptionCard_buttons"
     >
       <button
-        class="_button_187yx_8 mx_Dialog_nonDialogButton _has-icon_187yx_57"
+        class="_button_13vu4_8 mx_Dialog_nonDialogButton _has-icon_13vu4_60"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -97,7 +97,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
         Continue to account
       </button>
       <button
-        class="_button_187yx_8 mx_Dialog_nonDialogButton"
+        class="_button_13vu4_8 mx_Dialog_nonDialogButton"
         data-kind="tertiary"
         data-size="lg"
         role="button"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmKeyStorageOffDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmKeyStorageOffDialog-test.tsx.snap
index 31abd1aedf8..18f325138c9 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmKeyStorageOffDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmKeyStorageOffDialog-test.tsx.snap
@@ -59,7 +59,7 @@ exports[`ConfirmKeyStorageOffDialog renders 1`] = `
       class="mx_EncryptionCard_buttons"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -68,7 +68,7 @@ exports[`ConfirmKeyStorageOffDialog renders 1`] = `
         Go to Settings
       </button>
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="secondary"
         data-size="lg"
         role="button"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap
index e6ead980dd9..7944bbe46cf 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ShareDialog-test.tsx.snap
@@ -36,7 +36,7 @@ exports[`ShareDialog should not render the QR code if disabled 1`] = `
         </span>
       </div>
       <button
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -193,7 +193,7 @@ exports[`ShareDialog should not render the socials if disabled 1`] = `
         </span>
       </div>
       <button
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -319,7 +319,7 @@ exports[`ShareDialog should render a share dialog for a matrix event 1`] = `
         Link to selected message
       </label>
       <button
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -503,7 +503,7 @@ exports[`ShareDialog should render a share dialog for a room 1`] = `
         Link to most recent message
       </label>
       <button
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -660,7 +660,7 @@ exports[`ShareDialog should render a share dialog for a room member 1`] = `
         </span>
       </div>
       <button
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -817,7 +817,7 @@ exports[`ShareDialog should render a share dialog for an URL 1`] = `
         </span>
       </div>
       <button
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="primary"
         data-size="lg"
         role="button"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/UnpinAllDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/UnpinAllDialog-test.tsx.snap
index 044e0a2911c..e9cc5d1f622 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/UnpinAllDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/UnpinAllDialog-test.tsx.snap
@@ -33,7 +33,7 @@ exports[`<UnpinAllDialog /> should render 1`] = `
       class="mx_UnpinAllDialog_buttons"
     >
       <button
-        class="_button_187yx_8 _destructive_187yx_107"
+        class="_button_13vu4_8 _destructive_13vu4_110"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -42,7 +42,7 @@ exports[`<UnpinAllDialog /> should render 1`] = `
         Continue
       </button>
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
diff --git a/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap b/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
index 32164927743..4fd595d51a3 100644
--- a/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
+++ b/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
     </div>
     <button
       aria-disabled="true"
-      class="_button_187yx_8 mx_EnableLiveShare_button"
+      class="_button_13vu4_8 mx_EnableLiveShare_button"
       data-kind="primary"
       data-size="lg"
       role="button"
diff --git a/test/unit-tests/components/views/messages/__snapshots__/MFileBody-test.tsx.snap b/test/unit-tests/components/views/messages/__snapshots__/MFileBody-test.tsx.snap
index 2e4b78b3bc3..a964234e6c3 100644
--- a/test/unit-tests/components/views/messages/__snapshots__/MFileBody-test.tsx.snap
+++ b/test/unit-tests/components/views/messages/__snapshots__/MFileBody-test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<MFileBody/> should show a download button in file rendering type 1`] =
       class="mx_MFileBody_download"
     >
       <a
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="sm"
         rel="noreferrer noopener"
diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
index 5041fa294cc..465b62ae19c 100644
--- a/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
@@ -50,7 +50,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
       tabindex="-1"
     >
       <button
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -151,7 +151,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
       tabindex="-1"
     >
       <button
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="sm"
         role="button"
diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
index 5d528a853cb..c8406d190ca 100644
--- a/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
@@ -296,7 +296,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
         class="mx_PinnedMessagesCard_unpin"
       >
         <button
-          class="_button_187yx_8"
+          class="_button_13vu4_8"
           data-kind="tertiary"
           data-size="lg"
           role="button"
diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
index 350de431851..9ee3e6ce040 100644
--- a/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
@@ -182,13 +182,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
       >
         <div
           aria-checked="false"
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitemcheckbox"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -200,7 +200,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Favourite
           </span>
@@ -220,13 +220,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </div>
         </div>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -238,13 +238,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Invite
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -263,13 +263,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           role="separator"
         />
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -287,13 +287,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             People
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -306,13 +306,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -327,13 +327,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Threads
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -346,13 +346,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -366,13 +366,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Pinned messages
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -390,13 +390,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </span>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -408,13 +408,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Files
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -427,13 +427,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -445,13 +445,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Extensions
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -470,13 +470,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           role="separator"
         />
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -488,13 +488,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Copy link
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -507,13 +507,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -525,13 +525,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Polls
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -544,13 +544,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -562,13 +562,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Export Chat
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -581,13 +581,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -602,13 +602,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Settings
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -630,13 +630,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           class="mx_RoomSummaryCard_bottomOptions"
         >
           <button
-            class="_item_dyt4i_8 _interactive_dyt4i_26"
+            class="_item_lqfwq_8 _interactive_lqfwq_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_dyt4i_50"
+              class="_icon_lqfwq_50"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -648,13 +648,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
             >
               Report room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_dyt4i_59"
+              class="_nav-hint_lqfwq_59"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -667,13 +667,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             </svg>
           </button>
           <button
-            class="mx_RoomSummaryCard_leave _item_dyt4i_8 _interactive_dyt4i_26"
+            class="mx_RoomSummaryCard_leave _item_lqfwq_8 _interactive_lqfwq_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_dyt4i_50"
+              class="_icon_lqfwq_50"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -688,13 +688,13 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
             >
               Leave room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_dyt4i_59"
+              class="_nav-hint_lqfwq_59"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -857,13 +857,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
       >
         <div
           aria-checked="false"
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitemcheckbox"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -875,7 +875,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Favourite
           </span>
@@ -895,13 +895,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </div>
         </div>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -913,13 +913,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Invite
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -938,13 +938,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           role="separator"
         />
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -962,13 +962,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             People
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -981,13 +981,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1002,13 +1002,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Threads
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1021,13 +1021,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1041,13 +1041,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Pinned messages
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1065,13 +1065,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </span>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1083,13 +1083,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Files
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1102,13 +1102,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1120,13 +1120,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Extensions
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1145,13 +1145,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           role="separator"
         />
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1163,13 +1163,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Copy link
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1182,13 +1182,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1200,13 +1200,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Polls
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1219,13 +1219,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1237,13 +1237,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Export Chat
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1256,13 +1256,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1277,13 +1277,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Settings
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1305,13 +1305,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           class="mx_RoomSummaryCard_bottomOptions"
         >
           <button
-            class="_item_dyt4i_8 _interactive_dyt4i_26"
+            class="_item_lqfwq_8 _interactive_lqfwq_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_dyt4i_50"
+              class="_icon_lqfwq_50"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -1323,13 +1323,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
             >
               Report room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_dyt4i_59"
+              class="_nav-hint_lqfwq_59"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -1342,13 +1342,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             </svg>
           </button>
           <button
-            class="mx_RoomSummaryCard_leave _item_dyt4i_8 _interactive_dyt4i_26"
+            class="mx_RoomSummaryCard_leave _item_lqfwq_8 _interactive_lqfwq_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_dyt4i_50"
+              class="_icon_lqfwq_50"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -1363,13 +1363,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
             >
               Leave room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_dyt4i_59"
+              class="_nav-hint_lqfwq_59"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -1570,13 +1570,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
       >
         <div
           aria-checked="false"
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitemcheckbox"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1588,7 +1588,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Favourite
           </span>
@@ -1608,13 +1608,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </div>
         </div>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1626,13 +1626,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Invite
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1651,13 +1651,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           role="separator"
         />
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1675,13 +1675,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             People
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1694,13 +1694,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1715,13 +1715,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Threads
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1734,13 +1734,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1754,13 +1754,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Pinned messages
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1778,13 +1778,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </span>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1796,13 +1796,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Files
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1815,13 +1815,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1833,13 +1833,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Extensions
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1858,13 +1858,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           role="separator"
         />
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1876,13 +1876,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Copy link
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1895,13 +1895,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1913,13 +1913,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Polls
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1932,13 +1932,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1950,13 +1950,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Export Chat
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -1969,13 +1969,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="menuitem"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -1990,13 +1990,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Settings
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -2018,13 +2018,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           class="mx_RoomSummaryCard_bottomOptions"
         >
           <button
-            class="_item_dyt4i_8 _interactive_dyt4i_26"
+            class="_item_lqfwq_8 _interactive_lqfwq_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_dyt4i_50"
+              class="_icon_lqfwq_50"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -2036,13 +2036,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
             >
               Report room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_dyt4i_59"
+              class="_nav-hint_lqfwq_59"
               fill="currentColor"
               height="24"
               viewBox="8 0 8 24"
@@ -2055,13 +2055,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             </svg>
           </button>
           <button
-            class="mx_RoomSummaryCard_leave _item_dyt4i_8 _interactive_dyt4i_26"
+            class="mx_RoomSummaryCard_leave _item_lqfwq_8 _interactive_lqfwq_26"
             data-kind="critical"
             role="menuitem"
           >
             <svg
               aria-hidden="true"
-              class="_icon_dyt4i_50"
+              class="_icon_lqfwq_50"
               fill="currentColor"
               height="24"
               viewBox="0 0 24 24"
@@ -2076,13 +2076,13 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
               />
             </svg>
             <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
             >
               Leave room
             </span>
             <svg
               aria-hidden="true"
-              class="_nav-hint_dyt4i_59"
+              class="_nav-hint_lqfwq_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 14c06a6abc9..8274722fa89 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
@@ -144,13 +144,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -162,13 +162,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Send message
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -181,14 +181,14 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26 _disabled_dyt4i_118"
+          class="_item_lqfwq_8 _interactive_lqfwq_26 _disabled_lqfwq_118"
           data-kind="primary"
           disabled=""
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -200,13 +200,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Jump to read receipt
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -219,13 +219,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -237,13 +237,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Share profile
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -260,13 +260,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="critical"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -278,13 +278,13 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             />
           </svg>
           <span
-            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Ignore
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -446,13 +446,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -464,13 +464,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_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Send message
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -483,14 +483,14 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26 _disabled_dyt4i_118"
+          class="_item_lqfwq_8 _interactive_lqfwq_26 _disabled_lqfwq_118"
           data-kind="primary"
           disabled=""
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -502,13 +502,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_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Jump to read receipt
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -521,13 +521,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
           </svg>
         </button>
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="primary"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -539,13 +539,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_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Share profile
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -562,13 +562,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="critical"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -580,13 +580,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_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Deactivate user
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
@@ -603,13 +603,13 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_UserInfo_container"
       >
         <button
-          class="_item_dyt4i_8 _interactive_dyt4i_26"
+          class="_item_lqfwq_8 _interactive_lqfwq_26"
           data-kind="critical"
           role="button"
         >
           <svg
             aria-hidden="true"
-            class="_icon_dyt4i_50"
+            class="_icon_lqfwq_50"
             fill="currentColor"
             height="24"
             viewBox="0 0 24 24"
@@ -621,13 +621,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_dyt4i_34"
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
           >
             Ignore
           </span>
           <svg
             aria-hidden="true"
-            class="_nav-hint_dyt4i_59"
+            class="_nav-hint_lqfwq_59"
             fill="currentColor"
             height="24"
             viewBox="8 0 8 24"
diff --git a/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap b/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap
index 5573712618d..32f1ed1f0ee 100644
--- a/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoBasic-test.tsx.snap
@@ -43,13 +43,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
       </div>
     </div>
     <button
-      class="_item_dyt4i_8 _interactive_dyt4i_26"
+      class="_item_lqfwq_8 _interactive_lqfwq_26"
       data-kind="primary"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_dyt4i_50"
+        class="_icon_lqfwq_50"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -61,13 +61,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
       >
         Send message
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_dyt4i_59"
+        class="_nav-hint_lqfwq_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -80,13 +80,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
       </svg>
     </button>
     <button
-      class="_item_dyt4i_8 _interactive_dyt4i_26"
+      class="_item_lqfwq_8 _interactive_lqfwq_26"
       data-kind="primary"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_dyt4i_50"
+        class="_icon_lqfwq_50"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -98,13 +98,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
       >
         Invite
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_dyt4i_59"
+        class="_nav-hint_lqfwq_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -117,14 +117,14 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
       </svg>
     </button>
     <button
-      class="_item_dyt4i_8 _interactive_dyt4i_26 _disabled_dyt4i_118"
+      class="_item_lqfwq_8 _interactive_lqfwq_26 _disabled_lqfwq_118"
       data-kind="primary"
       disabled=""
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_dyt4i_50"
+        class="_icon_lqfwq_50"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -136,13 +136,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
       >
         Jump to read receipt
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_dyt4i_59"
+        class="_nav-hint_lqfwq_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -155,13 +155,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
       </svg>
     </button>
     <button
-      class="_item_dyt4i_8 _interactive_dyt4i_26"
+      class="_item_lqfwq_8 _interactive_lqfwq_26"
       data-kind="primary"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_dyt4i_50"
+        class="_icon_lqfwq_50"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -173,13 +173,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
       >
         Share profile
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_dyt4i_59"
+        class="_nav-hint_lqfwq_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -192,13 +192,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
       </svg>
     </button>
     <button
-      class="_item_dyt4i_8 _interactive_dyt4i_26"
+      class="_item_lqfwq_8 _interactive_lqfwq_26"
       data-kind="primary"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_dyt4i_50"
+        class="_icon_lqfwq_50"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -210,13 +210,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
       >
         Mention
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_dyt4i_59"
+        class="_nav-hint_lqfwq_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -233,13 +233,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
     class="mx_UserInfo_container"
   >
     <button
-      class="_item_dyt4i_8 _interactive_dyt4i_26"
+      class="_item_lqfwq_8 _interactive_lqfwq_26"
       data-kind="critical"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_dyt4i_50"
+        class="_icon_lqfwq_50"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -251,13 +251,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
       >
         Deactivate user
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_dyt4i_59"
+        class="_nav-hint_lqfwq_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -274,13 +274,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
     class="mx_UserInfo_container"
   >
     <button
-      class="_item_dyt4i_8 _interactive_dyt4i_26"
+      class="_item_lqfwq_8 _interactive_lqfwq_26"
       data-kind="critical"
       role="button"
     >
       <svg
         aria-hidden="true"
-        class="_icon_dyt4i_50"
+        class="_icon_lqfwq_50"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -292,13 +292,13 @@ exports[`<UserInfoBasic /> should display the defaut values 1`] = `
         />
       </svg>
       <span
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
       >
         Ignore
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_dyt4i_59"
+        class="_nav-hint_lqfwq_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
diff --git a/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderVerificationView-test.tsx.snap b/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderVerificationView-test.tsx.snap
index 87b7c5011a9..5788fe8bae5 100644
--- a/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderVerificationView-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderVerificationView-test.tsx.snap
@@ -59,7 +59,7 @@ exports[`<UserInfoHeaderVerificationView /> renders verify button 1`] = `
       class="mx_UserInfo_container_verifyButton"
     >
       <button
-        class="_button_187yx_8 mx_UserInfo_verify_button"
+        class="_button_13vu4_8 mx_UserInfo_verify_button"
         data-kind="tertiary"
         data-size="sm"
         role="button"
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/EmptyRoomList-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/EmptyRoomList-test.tsx.snap
index c368925df1a..140e1f366bf 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/EmptyRoomList-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/EmptyRoomList-test.tsx.snap
@@ -76,7 +76,7 @@ exports[`<EmptyRoomList /> should display the empty state for the invite filter
       You don't have any unread invites
     </span>
     <button
-      class="_button_187yx_8"
+      class="_button_13vu4_8"
       data-kind="tertiary"
       data-size="lg"
       role="button"
@@ -101,7 +101,7 @@ exports[`<EmptyRoomList /> should display the empty state for the low priority f
       You don't have any low priority rooms
     </span>
     <button
-      class="_button_187yx_8"
+      class="_button_13vu4_8"
       data-kind="tertiary"
       data-size="lg"
       role="button"
@@ -126,7 +126,7 @@ exports[`<EmptyRoomList /> should display the empty state for the mention filter
       You don't have any unread mentions
     </span>
     <button
-      class="_button_187yx_8"
+      class="_button_13vu4_8"
       data-kind="tertiary"
       data-size="lg"
       role="button"
@@ -151,7 +151,7 @@ exports[`<EmptyRoomList /> should display the empty state for the unread filter
       Congrats! You don’t have any unread messages
     </span>
     <button
-      class="_button_187yx_8"
+      class="_button_13vu4_8"
       data-kind="tertiary"
       data-size="lg"
       role="button"
@@ -185,7 +185,7 @@ exports[`<EmptyRoomList /> should not render the new room button if the user doe
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
     >
       <button
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -232,7 +232,7 @@ exports[`<EmptyRoomList /> should render the default placeholder when there is n
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
     >
       <button
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -253,7 +253,7 @@ exports[`<EmptyRoomList /> should render the default placeholder when there is n
         Start chat
       </button>
       <button
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="sm"
         role="button"
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListSearch-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListSearch-test.tsx.snap
index 24377d678f9..b9a99c31e5c 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListSearch-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListSearch-test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<RoomListSearch /> renders 1`] = `
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <button
-      class="_button_187yx_8 _search_z7ks9_16 _has-icon_187yx_57"
+      class="_button_13vu4_8 _search_z7ks9_16 _has-icon_13vu4_60"
       data-kind="secondary"
       data-size="sm"
       id="room-list-search-button"
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 92a846ab057..adc6e8e76d1 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
@@ -202,7 +202,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   tabindex="-1"
 >
   <button
-    class="_item_dyt4i_8 _interactive_dyt4i_26"
+    class="_item_lqfwq_8 _interactive_lqfwq_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -211,7 +211,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_dyt4i_50"
+      class="_icon_lqfwq_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -223,13 +223,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_dyt4i_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
     >
       View in timeline
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_dyt4i_59"
+      class="_nav-hint_lqfwq_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -242,7 +242,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     </svg>
   </button>
   <button
-    class="_item_dyt4i_8 _interactive_dyt4i_26"
+    class="_item_lqfwq_8 _interactive_lqfwq_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -251,7 +251,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_dyt4i_50"
+      class="_icon_lqfwq_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -268,13 +268,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_dyt4i_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
     >
       Unpin
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_dyt4i_59"
+      class="_nav-hint_lqfwq_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -287,7 +287,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     </svg>
   </button>
   <button
-    class="_item_dyt4i_8 _interactive_dyt4i_26"
+    class="_item_lqfwq_8 _interactive_lqfwq_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -296,7 +296,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_dyt4i_50"
+      class="_icon_lqfwq_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -308,13 +308,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_dyt4i_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
     >
       Forward
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_dyt4i_59"
+      class="_nav-hint_lqfwq_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -333,7 +333,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     role="separator"
   />
   <button
-    class="_item_dyt4i_8 _interactive_dyt4i_26"
+    class="_item_lqfwq_8 _interactive_lqfwq_26"
     data-kind="critical"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -342,7 +342,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
   >
     <svg
       aria-hidden="true"
-      class="_icon_dyt4i_50"
+      class="_icon_lqfwq_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -354,13 +354,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_dyt4i_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
     >
       Delete
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_dyt4i_59"
+      class="_nav-hint_lqfwq_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -393,7 +393,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   tabindex="-1"
 >
   <button
-    class="_item_dyt4i_8 _interactive_dyt4i_26"
+    class="_item_lqfwq_8 _interactive_lqfwq_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -402,7 +402,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   >
     <svg
       aria-hidden="true"
-      class="_icon_dyt4i_50"
+      class="_icon_lqfwq_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -414,13 +414,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_dyt4i_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
     >
       View in timeline
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_dyt4i_59"
+      class="_nav-hint_lqfwq_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
@@ -433,7 +433,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
     </svg>
   </button>
   <button
-    class="_item_dyt4i_8 _interactive_dyt4i_26"
+    class="_item_lqfwq_8 _interactive_lqfwq_26"
     data-kind="primary"
     data-orientation="vertical"
     data-radix-collection-item=""
@@ -442,7 +442,7 @@ exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`]
   >
     <svg
       aria-hidden="true"
-      class="_icon_dyt4i_50"
+      class="_icon_lqfwq_50"
       fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
@@ -454,13 +454,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_dyt4i_34"
+      class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
     >
       Forward
     </span>
     <svg
       aria-hidden="true"
-      class="_nav-hint_dyt4i_59"
+      class="_nav-hint_lqfwq_59"
       fill="currentColor"
       height="24"
       viewBox="8 0 8 24"
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
index 25e7a012640..45d3439fb31 100644
--- a/test/unit-tests/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
@@ -128,7 +128,7 @@ exports[`<PinnedMessageBanner /> should display the last message when the pinned
       </div>
     </button>
     <button
-      class="_button_187yx_8 mx_PinnedMessageBanner_actions"
+      class="_button_13vu4_8 mx_PinnedMessageBanner_actions"
       data-kind="tertiary"
       data-size="lg"
       role="button"
@@ -438,7 +438,7 @@ exports[`<PinnedMessageBanner /> should render 2 pinned event 1`] = `
       </div>
     </button>
     <button
-      class="_button_187yx_8 mx_PinnedMessageBanner_actions"
+      class="_button_13vu4_8 mx_PinnedMessageBanner_actions"
       data-kind="tertiary"
       data-size="lg"
       role="button"
@@ -520,7 +520,7 @@ exports[`<PinnedMessageBanner /> should render 4 pinned event 1`] = `
       </div>
     </button>
     <button
-      class="_button_187yx_8 mx_PinnedMessageBanner_actions"
+      class="_button_13vu4_8 mx_PinnedMessageBanner_actions"
       data-kind="tertiary"
       data-size="lg"
       role="button"
diff --git a/test/unit-tests/components/views/settings/__snapshots__/PowerLevelSelector-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/PowerLevelSelector-test.tsx.snap
index 86f466cf6f9..68ddcd2535a 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/PowerLevelSelector-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/PowerLevelSelector-test.tsx.snap
@@ -60,7 +60,7 @@ exports[`PowerLevelSelector should display only the current user 1`] = `
     <button
       aria-disabled="true"
       aria-label="Apply"
-      class="_button_187yx_8 mx_Dialog_nonDialogButton mx_PowerLevelSelector_Button"
+      class="_button_13vu4_8 mx_Dialog_nonDialogButton mx_PowerLevelSelector_Button"
       data-kind="primary"
       data-size="sm"
       role="button"
@@ -222,7 +222,7 @@ exports[`PowerLevelSelector should render 1`] = `
     <button
       aria-disabled="true"
       aria-label="Apply"
-      class="_button_187yx_8 mx_Dialog_nonDialogButton mx_PowerLevelSelector_Button"
+      class="_button_13vu4_8 mx_Dialog_nonDialogButton mx_PowerLevelSelector_Button"
       data-kind="primary"
       data-size="sm"
       role="button"
diff --git a/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap b/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
index f3b6f92ee8d..fb486a0a84a 100644
--- a/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
@@ -53,7 +53,7 @@ exports[`<AdvancedPanel /> <EncryptionDetails /> should display a spinner when l
     class="mx_EncryptionDetails_buttons"
   >
     <button
-      class="_button_187yx_8 _has-icon_187yx_57"
+      class="_button_13vu4_8 _has-icon_13vu4_60"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -74,7 +74,7 @@ exports[`<AdvancedPanel /> <EncryptionDetails /> should display a spinner when l
       Export keys
     </button>
     <button
-      class="_button_187yx_8 _has-icon_187yx_57"
+      class="_button_13vu4_8 _has-icon_13vu4_60"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -96,7 +96,7 @@ exports[`<AdvancedPanel /> <EncryptionDetails /> should display a spinner when l
     </button>
   </div>
   <button
-    class="_button_187yx_8 _destructive_187yx_107"
+    class="_button_13vu4_8 _destructive_13vu4_110"
     data-kind="tertiary"
     data-size="sm"
     role="button"
@@ -145,7 +145,7 @@ exports[`<AdvancedPanel /> <EncryptionDetails /> should display the device keys
     class="mx_EncryptionDetails_buttons"
   >
     <button
-      class="_button_187yx_8 _has-icon_187yx_57"
+      class="_button_13vu4_8 _has-icon_13vu4_60"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -166,7 +166,7 @@ exports[`<AdvancedPanel /> <EncryptionDetails /> should display the device keys
       Export keys
     </button>
     <button
-      class="_button_187yx_8 _has-icon_187yx_57"
+      class="_button_13vu4_8 _has-icon_13vu4_60"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -188,7 +188,7 @@ exports[`<AdvancedPanel /> <EncryptionDetails /> should display the device keys
     </button>
   </div>
   <button
-    class="_button_187yx_8 _destructive_187yx_107"
+    class="_button_13vu4_8 _destructive_13vu4_110"
     data-kind="tertiary"
     data-size="sm"
     role="button"
diff --git a/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap b/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
index 8f6e0fed335..b564f5a6507 100644
--- a/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
@@ -140,7 +140,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
       class="mx_EncryptionCard_buttons"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -149,7 +149,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
         Continue
       </button>
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
@@ -298,7 +298,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       >
         <button
           aria-disabled="true"
-          class="_button_187yx_8"
+          class="_button_13vu4_8"
           data-kind="primary"
           data-size="lg"
           role="button"
@@ -307,7 +307,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
           Finish set up
         </button>
         <button
-          class="_button_187yx_8"
+          class="_button_13vu4_8"
           data-kind="tertiary"
           data-size="lg"
           role="button"
@@ -479,7 +479,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       >
         <button
           aria-disabled="true"
-          class="_button_187yx_8"
+          class="_button_13vu4_8"
           data-kind="primary"
           data-size="lg"
           role="button"
@@ -488,7 +488,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
           Finish set up
         </button>
         <button
-          class="_button_187yx_8"
+          class="_button_13vu4_8"
           data-kind="tertiary"
           data-size="lg"
           role="button"
@@ -597,7 +597,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
       class="mx_EncryptionCard_buttons"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -606,7 +606,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
         Continue
       </button>
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
@@ -759,7 +759,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
       class="mx_EncryptionCard_buttons"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -768,7 +768,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
         Continue
       </button>
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
diff --git a/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap b/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap
index d82823b1e3b..8ac933f0974 100644
--- a/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap
@@ -134,7 +134,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
     >
       <button
         aria-disabled="false"
-        class="_button_187yx_8 _destructive_187yx_107"
+        class="_button_13vu4_8 _destructive_13vu4_110"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -143,7 +143,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
         Delete key storage
       </button>
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
diff --git a/test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanel-test.tsx.snap b/test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanel-test.tsx.snap
index 1a79467c606..2daef635128 100644
--- a/test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanel-test.tsx.snap
@@ -17,7 +17,7 @@ exports[`<RecoveryPanel /> should allow to change the recovery key when everythi
       Recover your cryptographic identity and message history with a recovery key if you’ve lost all your existing devices.
     </div>
     <button
-      class="_button_187yx_8 _has-icon_187yx_57"
+      class="_button_13vu4_8 _has-icon_13vu4_60"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -58,7 +58,7 @@ exports[`<RecoveryPanel /> should ask to set up a recovery key when there is no
       Recover your cryptographic identity and message history with a recovery key if you’ve lost all your existing devices.
     </div>
     <button
-      class="_button_187yx_8 _has-icon_187yx_57"
+      class="_button_13vu4_8 _has-icon_13vu4_60"
       data-kind="primary"
       data-size="sm"
       role="button"
diff --git a/test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanelOutOfSync-test.tsx.snap b/test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanelOutOfSync-test.tsx.snap
index a6d26193a02..9bed9434ef3 100644
--- a/test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanelOutOfSync-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/encryption/__snapshots__/RecoveryPanelOutOfSync-test.tsx.snap
@@ -40,7 +40,7 @@ exports[`<RecoveyPanelOutOfSync /> should render 1`] = `
       class="mx_RecoveryPanelOutOfSync"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -49,7 +49,7 @@ exports[`<RecoveyPanelOutOfSync /> should render 1`] = `
         Forgot recovery key?
       </button>
       <button
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="primary"
         data-size="sm"
         role="button"
diff --git a/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap b/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
index 84ea93adfa5..e6795aa3342 100644
--- a/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
@@ -161,7 +161,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
     >
       <button
         aria-disabled="false"
-        class="_button_187yx_8 _destructive_187yx_107"
+        class="_button_13vu4_8 _destructive_13vu4_110"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -170,7 +170,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
         Continue
       </button>
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
@@ -344,7 +344,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
     >
       <button
         aria-disabled="false"
-        class="_button_187yx_8 _destructive_187yx_107"
+        class="_button_13vu4_8 _destructive_13vu4_110"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -353,7 +353,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
         Continue
       </button>
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
@@ -530,7 +530,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
     >
       <button
         aria-disabled="false"
-        class="_button_187yx_8 _destructive_187yx_107"
+        class="_button_13vu4_8 _destructive_13vu4_110"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -539,7 +539,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
         Continue
       </button>
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
@@ -716,7 +716,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
     >
       <button
         aria-disabled="true"
-        class="_button_187yx_8 _destructive_187yx_107"
+        class="_button_13vu4_8 _destructive_13vu4_110"
         data-kind="primary"
         data-size="lg"
         role="button"
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
index d82653a1805..0bf9086311a 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
@@ -42,7 +42,7 @@ exports[`<EncryptionUserSettingsTab /> should display a verify button when the e
           </div>
         </div>
         <button
-          class="_button_187yx_8 _has-icon_187yx_57"
+          class="_button_13vu4_8 _has-icon_13vu4_60"
           data-kind="primary"
           data-size="sm"
           role="button"
@@ -124,7 +124,7 @@ exports[`<EncryptionUserSettingsTab /> should display the identity needs reset p
         </div>
         <div>
           <button
-            class="_button_187yx_8"
+            class="_button_13vu4_8"
             data-kind="primary"
             data-size="sm"
             role="button"
@@ -186,7 +186,7 @@ exports[`<EncryptionUserSettingsTab /> should display the recovery out of sync p
           class="mx_RecoveryPanelOutOfSync"
         >
           <button
-            class="_button_187yx_8"
+            class="_button_13vu4_8"
             data-kind="secondary"
             data-size="sm"
             role="button"
@@ -195,7 +195,7 @@ exports[`<EncryptionUserSettingsTab /> should display the recovery out of sync p
             Forgot recovery key?
           </button>
           <button
-            class="_button_187yx_8 _has-icon_187yx_57"
+            class="_button_13vu4_8 _has-icon_13vu4_60"
             data-kind="primary"
             data-size="sm"
             role="button"
@@ -393,7 +393,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
         >
           <button
             aria-disabled="false"
-            class="_button_187yx_8 _destructive_187yx_107"
+            class="_button_13vu4_8 _destructive_13vu4_110"
             data-kind="primary"
             data-size="lg"
             role="button"
@@ -402,7 +402,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
             Continue
           </button>
           <button
-            class="_button_187yx_8"
+            class="_button_13vu4_8"
             data-kind="tertiary"
             data-size="lg"
             role="button"
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 38e5fcede0b..4c26f99dc07 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_dyt4i_8 _interactive_dyt4i_26"
+      class="mx_ThreadsActivityCentreRow _item_lqfwq_8 _interactive_lqfwq_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_dyt4i_50"
+        class="_icon_lqfwq_50"
       >
         <span
           class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
@@ -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_dyt4i_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
       >
         This is a real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_dyt4i_59"
+        class="_nav-hint_lqfwq_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_dyt4i_8 _interactive_dyt4i_26"
+      class="mx_ThreadsActivityCentreRow _item_lqfwq_8 _interactive_lqfwq_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_dyt4i_50"
+        class="_icon_lqfwq_50"
       >
         <span
           class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
@@ -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_dyt4i_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
       >
         A notification
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_dyt4i_59"
+        class="_nav-hint_lqfwq_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -185,7 +185,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
     class="mx_ThreadsActivityCentre_rows"
   >
     <button
-      class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
+      class="mx_ThreadsActivityCentreRow _item_lqfwq_8 _interactive_lqfwq_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -193,7 +193,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="_icon_dyt4i_50"
+        class="_icon_lqfwq_50"
       >
         <span
           class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
@@ -207,13 +207,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_dyt4i_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
       >
         This is a third real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_dyt4i_59"
+        class="_nav-hint_lqfwq_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -233,7 +233,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       </div>
     </button>
     <button
-      class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
+      class="mx_ThreadsActivityCentreRow _item_lqfwq_8 _interactive_lqfwq_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -241,7 +241,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="_icon_dyt4i_50"
+        class="_icon_lqfwq_50"
       >
         <span
           class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
@@ -255,13 +255,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_dyt4i_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
       >
         This is a real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_dyt4i_59"
+        class="_nav-hint_lqfwq_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
@@ -281,7 +281,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       </div>
     </button>
     <button
-      class="mx_ThreadsActivityCentreRow _item_dyt4i_8 _interactive_dyt4i_26"
+      class="mx_ThreadsActivityCentreRow _item_lqfwq_8 _interactive_lqfwq_26"
       data-kind="primary"
       data-orientation="vertical"
       data-radix-collection-item=""
@@ -289,7 +289,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
       tabindex="-1"
     >
       <div
-        class="_icon_dyt4i_50"
+        class="_icon_lqfwq_50"
       >
         <span
           class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
@@ -303,13 +303,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_dyt4i_34"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_lqfwq_34"
       >
         This is a second real highlight
       </span>
       <svg
         aria-hidden="true"
-        class="_nav-hint_dyt4i_59"
+        class="_nav-hint_lqfwq_59"
         fill="currentColor"
         height="24"
         viewBox="8 0 8 24"
diff --git a/test/unit-tests/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap b/test/unit-tests/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap
index cf523ee745c..fc0a21028b3 100644
--- a/test/unit-tests/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap
+++ b/test/unit-tests/components/views/toasts/__snapshots__/GenericToast-test.tsx.snap
@@ -15,7 +15,7 @@ exports[`GenericToast should render as expected with detail content 1`] = `
       class="mx_Toast_buttons"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -24,7 +24,7 @@ exports[`GenericToast should render as expected with detail content 1`] = `
         Reject
       </button>
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="primary"
         data-size="sm"
         role="button"
@@ -57,7 +57,7 @@ exports[`GenericToast should render as expected without detail content 1`] = `
       class="mx_Toast_buttons"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -66,7 +66,7 @@ exports[`GenericToast should render as expected without detail content 1`] = `
         Reject
       </button>
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="primary"
         data-size="sm"
         role="button"
diff --git a/test/unit-tests/components/views/toasts/__snapshots__/VerificationRequestToast-test.tsx.snap b/test/unit-tests/components/views/toasts/__snapshots__/VerificationRequestToast-test.tsx.snap
index 98946f5f370..b58444c0525 100644
--- a/test/unit-tests/components/views/toasts/__snapshots__/VerificationRequestToast-test.tsx.snap
+++ b/test/unit-tests/components/views/toasts/__snapshots__/VerificationRequestToast-test.tsx.snap
@@ -13,7 +13,7 @@ exports[`VerificationRequestToast should render a cross-user verification 1`] =
       class="mx_Toast_buttons"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -22,7 +22,7 @@ exports[`VerificationRequestToast should render a cross-user verification 1`] =
         Ignore
       </button>
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="primary"
         data-size="sm"
         role="button"
@@ -53,7 +53,7 @@ exports[`VerificationRequestToast should render a self-verification 1`] = `
       class="mx_Toast_buttons"
     >
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -62,7 +62,7 @@ exports[`VerificationRequestToast should render a self-verification 1`] = `
         Ignore
       </button>
       <button
-        class="_button_187yx_8"
+        class="_button_13vu4_8"
         data-kind="primary"
         data-size="sm"
         role="button"
diff --git a/test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap b/test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
index ab34e13fdae..067578b65d5 100644
--- a/test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
+++ b/test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
@@ -62,7 +62,7 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
               class="mx_Toast_buttons"
             >
               <button
-                class="_button_187yx_8 _destructive_187yx_107"
+                class="_button_13vu4_8 _destructive_13vu4_110"
                 data-kind="secondary"
                 data-size="sm"
                 role="button"
@@ -71,7 +71,7 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
                 No
               </button>
               <button
-                class="_button_187yx_8"
+                class="_button_13vu4_8"
                 data-kind="primary"
                 data-size="sm"
                 role="button"
diff --git a/test/unit-tests/vector/__snapshots__/init-test.ts.snap b/test/unit-tests/vector/__snapshots__/init-test.ts.snap
index 6d10481476c..0b941ac91e2 100644
--- a/test/unit-tests/vector/__snapshots__/init-test.ts.snap
+++ b/test/unit-tests/vector/__snapshots__/init-test.ts.snap
@@ -106,7 +106,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
       >
         <button
-          class="_button_187yx_8 _has-icon_187yx_57"
+          class="_button_13vu4_8 _has-icon_13vu4_60"
           data-kind="secondary"
           data-size="sm"
           role="button"
@@ -130,7 +130,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
           Learn more
         </button>
         <button
-          class="_button_187yx_8"
+          class="_button_13vu4_8"
           data-kind="primary"
           data-size="sm"
           role="button"
@@ -156,7 +156,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
     >
       <a
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/macos/Element.dmg"
@@ -180,7 +180,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
         Mac
       </a>
       <a
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/x64/Element%20Setup.exe"
@@ -202,7 +202,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
         Windows (64-bit)
       </a>
       <a
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/arm64/Element%20Setup.exe"
@@ -224,7 +224,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
         Windows (ARM 64-bit)
       </a>
       <a
-        class="_button_187yx_8 _has-icon_187yx_57"
+        class="_button_13vu4_8 _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="lg"
         href="https://element.io/download#linux"
diff --git a/yarn.lock b/yarn.lock
index 3d7c3ec0e07..ecbd1d4f198 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4197,10 +4197,10 @@
   resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-6.4.1.tgz#b3356300136b974104b4fb818969350c7686f5ae"
   integrity sha512-JhrxnzohxGILrc+IZWoMXcpGHinnJlR2HSCKfypEjPDDF5TOB8HQYTqd5ALAPlob8QZU3N2ghnCF7d0f2LmTxg==
 
-"@vector-im/compound-web@^8.3.1":
-  version "8.3.1"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.3.1.tgz#09cad1c236e89a6d867a674602f9c74628cde000"
-  integrity sha512-VMAHVbpzUK6OQCX+gIm58ESvL6cYzLmr0vz0YBKJ5WoYJxu4/JrAfQ5+2mGn3fufF5Oqy3qBRzlHveFxv7Ij9A==
+"@vector-im/compound-web@^8.3.4":
+  version "8.3.4"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.3.4.tgz#842bfcae9ed11e19656cd4bb90d40fed64dbc2c4"
+  integrity sha512-um+rCfnkEyOEIF8qpsLvvxi/jRQXjhul+mXDCsZHBEfashj08zf5euEQxesleAIuDvNXtIWyxDJpwzxIm21YEg==
   dependencies:
     "@floating-ui/react" "^0.27.0"
     "@radix-ui/react-context-menu" "^2.2.16"