diff --git a/package.json b/package.json
index a2d89ad252..236f88bd2b 100644
--- a/package.json
+++ b/package.json
@@ -92,8 +92,8 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^10.0.0",
         "@types/png-chunks-extract": "^1.0.2",
-        "@vector-im/compound-design-tokens": "^6.0.0",
-        "@vector-im/compound-web": "^8.1.2",
+        "@vector-im/compound-design-tokens": "6.4.1",
+        "@vector-im/compound-web": "^8.3.1",
         "@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/src/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap b/packages/shared-components/src/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap
index 89b47dfecb..85004e4ba5 100644
--- a/packages/shared-components/src/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap
+++ b/packages/shared-components/src/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`AudioPlayerView renders the audio player in default state 1`] = `
         tabindex="-1"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -114,7 +114,7 @@ exports[`AudioPlayerView renders the audio player in error state 1`] = `
         tabindex="-1"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -210,7 +210,7 @@ exports[`AudioPlayerView renders the audio player without media name 1`] = `
         tabindex="-1"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -301,7 +301,7 @@ exports[`AudioPlayerView renders the audio player without size 1`] = `
         tabindex="-1"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
diff --git a/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap b/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap
index 872de81cb9..3b98652cd1 100644
--- a/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap
+++ b/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`PlayPauseButton renders the button in default state 1`] = `
     tabindex="0"
   >
     <div
-      class="_indicator-icon_zr2a0_17"
+      class="_indicator-icon_147l5_17"
       style="--cpd-icon-button-size: 100%;"
     >
       <svg
@@ -45,7 +45,7 @@ exports[`PlayPauseButton renders the button in playing state 1`] = `
     tabindex="0"
   >
     <div
-      class="_indicator-icon_zr2a0_17"
+      class="_indicator-icon_147l5_17"
       style="--cpd-icon-button-size: 100%;"
     >
       <svg
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 d8b7f11f74..e790e79831 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
@@ -37,7 +37,7 @@ exports[`AvatarWithDetails renders a banner with an action 1`] = `
       class="actions"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -46,7 +46,7 @@ exports[`AvatarWithDetails renders a banner with an action 1`] = `
         encryption|withdraw_verification_action
       </button>
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -83,7 +83,7 @@ exports[`AvatarWithDetails renders a banner with an avatar iamge 1`] = `
       class="actions"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -129,7 +129,7 @@ exports[`AvatarWithDetails renders a critical banner 1`] = `
       class="actions"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -179,7 +179,7 @@ exports[`AvatarWithDetails renders a default banner 1`] = `
       class="actions"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -230,7 +230,7 @@ exports[`AvatarWithDetails renders a info banner 1`] = `
       class="actions"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -276,7 +276,7 @@ exports[`AvatarWithDetails renders a success banner 1`] = `
       class="actions"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="secondary"
         data-size="sm"
         role="button"
diff --git a/packages/shared-components/src/pill-input/Pill/__snapshots__/Pill.test.tsx.snap b/packages/shared-components/src/pill-input/Pill/__snapshots__/Pill.test.tsx.snap
index 81a541272c..2ef6575b20 100644
--- a/packages/shared-components/src/pill-input/Pill/__snapshots__/Pill.test.tsx.snap
+++ b/packages/shared-components/src/pill-input/Pill/__snapshots__/Pill.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`Pill renders the pill 1`] = `
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
diff --git a/playwright/element-web-test.ts b/playwright/element-web-test.ts
index c75750519d..bf1353ea6c 100644
--- a/playwright/element-web-test.ts
+++ b/playwright/element-web-test.ts
@@ -133,6 +133,7 @@ export const expect = baseExpect.extend<Expectations>({
             }
             .mx_BaseAvatar {
                 background-color: var(--cpd-color-fuchsia-1200) !important;
+                border-color: var(--cpd-color-fuchsia-1200) !important;
                 color: white !important;
             }
             .mx_ReplyChain {
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png
index 8f025b53ef..a3a1894eac 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png
index 2dffefd423..aa9956a50d 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png
index a2147e80d5..d7aa9d2576 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png
index de6fe0cdbb..40b24451fd 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png
index b9bbd316fb..abd658dade 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png differ
diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png
index d5e96b98f9..318d984676 100644
Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png differ
diff --git a/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png
index d37aa2d7cb..98a0d39083 100644
Binary files a/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png differ
diff --git a/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png
index 9c12073079..b48edcf1bb 100644
Binary files a/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png differ
diff --git a/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png
index 6478693586..a995b8a250 100644
Binary files a/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png differ
diff --git a/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png
index 154d678982..0f464ffee4 100644
Binary files a/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png and b/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png differ
diff --git a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png
index a63ad3cc6b..528aaee7c4 100644
Binary files a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png and b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png differ
diff --git a/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png
index e8fc6c378b..1ea40f61d7 100644
Binary files a/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png and b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png differ
diff --git a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png
index 48f4301950..a124d7b520 100644
Binary files a/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png and b/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png
index 8587967655..99577dbece 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png
index dce624b940..14d9d7f3ab 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png
index 33ba54c4a8..ecc69b66a2 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png
index 14e83f74ae..3abab75145 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png
index 3308816188..67e9798ebf 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png
index 2d8687454f..72837a5f2f 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png
index 2f2e95d1ce..3a981c89c9 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png differ
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png
index 7913f39ad5..3c1317c073 100644
Binary files a/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png and b/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png differ
diff --git a/res/css/views/elements/_Pill.pcss b/res/css/views/elements/_Pill.pcss
index 4b3fd3bb68..c466c4d6a3 100644
--- a/res/css/views/elements/_Pill.pcss
+++ b/res/css/views/elements/_Pill.pcss
@@ -57,7 +57,7 @@ Please see LICENSE files in the repository root for full details.
         margin-inline-end: 0.2em;
         min-width: $font-16px; /* ensure the avatar is not compressed */
         user-select: text;
-        vertical-align: -2.5px;
+        vertical-align: top;
     }
 
     .mx_Pill_text {
diff --git a/res/css/views/rooms/_EventBubbleTile.pcss b/res/css/views/rooms/_EventBubbleTile.pcss
index d98babab21..1a38477503 100644
--- a/res/css/views/rooms/_EventBubbleTile.pcss
+++ b/res/css/views/rooms/_EventBubbleTile.pcss
@@ -50,7 +50,7 @@ Please see LICENSE files in the repository root for full details.
         margin-right: 0;
     }
 
-    .mx_EventTile_avatar {
+    &:not(.mx_EventTile_info) .mx_EventTile_avatar {
         line-height: 0;
         border: 4px solid $background;
         border-radius: 50%;
@@ -588,6 +588,7 @@ Please see LICENSE files in the repository root for full details.
         position: static;
         order: -1;
         margin-inline-end: var(--EventTile_bubble_gap-inline); /* Same spacing between E2E icon and a hidden event */
+        display: inline-flex;
     }
 
     .mx_EventTile_e2eIcon {
diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
index 42229b547a..7725dd5600 100644
--- a/res/css/views/rooms/_EventTile.pcss
+++ b/res/css/views/rooms/_EventTile.pcss
@@ -296,13 +296,11 @@ $left-gutter: 64px;
             display: flex;
             align-items: center;
 
-            /* Need to use important to override the js provided height and width values. */
+            /* Need to use important to override the js calculated values. */
             > .mx_BaseAvatar,
             > .mx_BaseAvatar > * {
-                height: $font-14px !important;
-                width: $font-14px !important;
                 font-size: $font-10px !important;
-                line-height: $font-15px !important;
+                line-height: calc($font-15px - 2px) !important;
             }
         }
 
@@ -1166,11 +1164,11 @@ $left-gutter: 64px;
         &.mx_EventTile_info {
             .mx_EventTile_avatar {
                 position: absolute;
-                top: 1.5px; /* Align with hidden event content */
-                margin-top: 0;
+                /* Align with hidden event content */
+                top: 50%;
+                transform: translateY(-50%);
+                margin-top: -2px;
                 margin-bottom: 0;
-                width: 14px; /* avatar img size */
-                height: 14px; /* avatar img size */
             }
 
             &.mx_EventTile_selected .mx_EventTile_line,
diff --git a/res/css/views/rooms/_ReadReceiptGroup.pcss b/res/css/views/rooms/_ReadReceiptGroup.pcss
index 1b6c1b4b44..d6f69c8333 100644
--- a/res/css/views/rooms/_ReadReceiptGroup.pcss
+++ b/res/css/views/rooms/_ReadReceiptGroup.pcss
@@ -41,11 +41,12 @@ Please see LICENSE files in the repository root for full details.
         height: 100%;
 
         .mx_BaseAvatar {
+            /* Compound uses a border on default avatars but no border on actual images, we want a border in all cases */
             box-sizing: content-box;
+            border: 1px solid $background !important;
+            /* Reset the line height as we are no longer box-sizing border-box */
+            line-height: var(--cpd-avatar-size);
             position: absolute;
-            border: 1px solid $background;
-            width: 14px;
-            height: 14px;
             will-change: left, top;
             transition:
                 left var(--transition-short) ease-out,
diff --git a/res/css/views/rooms/_ReplyTile.pcss b/res/css/views/rooms/_ReplyTile.pcss
index 2d7ec9353a..05665887d3 100644
--- a/res/css/views/rooms/_ReplyTile.pcss
+++ b/res/css/views/rooms/_ReplyTile.pcss
@@ -134,7 +134,8 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_BaseAvatar {
-            line-height: 14px; /* To match size */
+            /* Prevent crushing by the flexbox */
+            flex-shrink: 0;
         }
     }
 }
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 3923e61e36..185a8c83e7 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_vczzf_8 _has-icon_vczzf_57"
+          class="_button_187yx_8 _has-icon_187yx_57"
           data-kind="secondary"
           data-size="sm"
           role="button"
@@ -128,7 +128,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="_separator_7ckbw_8"
+      class="_separator_cqpyv_8"
       data-kind="primary"
       data-orientation="horizontal"
       role="separator"
@@ -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_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/macos/Element.dmg"
@@ -158,7 +158,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         Mac
       </a>
       <a
-        class="_button_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/x64/Element%20Setup.exe"
@@ -173,7 +173,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         Windows (64-bit)
       </a>
       <a
-        class="_button_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/arm64/Element%20Setup.exe"
@@ -188,7 +188,7 @@ exports[`<UnsupportedBrowserView /> should match snapshot 1`] = `
         Windows (ARM 64-bit)
       </a>
       <a
-        class="_button_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="secondary"
         data-size="lg"
         href="https://element.io/download#linux"
diff --git a/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap
index 92d3ef3990..9d77be8b68 100644
--- a/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap
@@ -28,7 +28,7 @@ exports[`FilePanel renders empty state 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
diff --git a/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap
index c2728d737d..91a7bfb531 100644
--- a/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap
@@ -94,7 +94,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
                 class="mx_GenericEventListSummary_avatars"
               >
                 <span
-                  class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+                  class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
                   data-color="1"
                   data-testid="avatar-img"
                   data-type="round"
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 b1bafda8ed..8f07cb636f 100644
--- a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -11,7 +11,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
     >
       <span
         aria-label="Open room settings"
-        class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -84,7 +84,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
     >
       <span
         aria-label="Open room settings"
-        class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -162,7 +162,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
                 <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+                  class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"
@@ -243,7 +243,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
     >
       <span
         aria-label="Open room settings"
-        class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -321,7 +321,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                 <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+                  class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"
@@ -570,7 +570,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
     >
       <span
         aria-label="Open room settings"
-        class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -643,7 +643,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                 <button
                   aria-label="Avatar"
                   aria-live="off"
-                  class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+                  class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
                   data-color="3"
                   data-testid="avatar-img"
                   data-type="round"
@@ -879,7 +879,7 @@ exports[`RoomView invites renders an invite room 1`] = `
         </h3>
         <p>
           <span
-            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -918,7 +918,7 @@ exports[`RoomView invites renders an invite room 1`] = `
           Decline
         </div>
         <button
-          class="_button_vczzf_8 _destructive_vczzf_107"
+          class="_button_187yx_8 _destructive_187yx_107"
           data-kind="tertiary"
           data-size="lg"
           role="button"
@@ -960,7 +960,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
           <button
             aria-label="Open room settings"
             aria-live="off"
-            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -1003,7 +1003,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -1031,7 +1031,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -1057,7 +1057,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -1084,7 +1084,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -1112,7 +1112,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
               tabindex="0"
             >
               <div
-                class="_stacked-avatars_1qbcf_102"
+                class="_stacked-avatars_zysgz_109"
               />
               0
             </div>
@@ -1456,7 +1456,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
           <button
             aria-label="Open room settings"
             aria-live="off"
-            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -1499,7 +1499,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -1527,7 +1527,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -1553,7 +1553,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -1580,7 +1580,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -1608,7 +1608,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
               tabindex="0"
             >
               <div
-                class="_stacked-avatars_1qbcf_102"
+                class="_stacked-avatars_zysgz_109"
               />
               0
             </div>
@@ -1890,7 +1890,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
           <button
             aria-label="Open room settings"
             aria-live="off"
-            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -1933,7 +1933,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -1961,7 +1961,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -1987,7 +1987,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -2014,7 +2014,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -2042,7 +2042,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
               tabindex="0"
             >
               <div
-                class="_stacked-avatars_1qbcf_102"
+                class="_stacked-avatars_zysgz_109"
               />
               0
             </div>
@@ -2324,7 +2324,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           <button
             aria-label="Open room settings"
             aria-live="off"
-            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -2367,7 +2367,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -2395,7 +2395,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -2421,7 +2421,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -2448,7 +2448,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -2476,7 +2476,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
               tabindex="0"
             >
               <div
-                class="_stacked-avatars_1qbcf_102"
+                class="_stacked-avatars_zysgz_109"
               />
               0
             </div>
@@ -2536,7 +2536,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           <button
             aria-label="Open room settings"
             aria-live="off"
-            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -2579,7 +2579,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -2607,7 +2607,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -2633,7 +2633,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -2660,7 +2660,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -2688,7 +2688,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
               tabindex="0"
             >
               <div
-                class="_stacked-avatars_1qbcf_102"
+                class="_stacked-avatars_zysgz_109"
               />
               0
             </div>
@@ -2998,7 +2998,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           <button
             aria-label="Open room settings"
             aria-live="off"
-            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -3041,7 +3041,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -3068,7 +3068,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -3095,7 +3095,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
             tabindex="0"
           >
             <div
-              class="_indicator-icon_zr2a0_17"
+              class="_indicator-icon_147l5_17"
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
@@ -3123,7 +3123,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
               tabindex="0"
             >
               <div
-                class="_stacked-avatars_1qbcf_102"
+                class="_stacked-avatars_zysgz_109"
               />
               0
             </div>
@@ -3200,7 +3200,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                 tabindex="0"
               >
                 <div
-                  class="_indicator-icon_zr2a0_17"
+                  class="_indicator-icon_147l5_17"
                   style="--cpd-icon-button-size: 100%;"
                 >
                   <svg
diff --git a/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
index 226db380dc..14143cccfa 100644
--- a/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
@@ -74,7 +74,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
               data-color="5"
               data-testid="avatar-img"
               data-type="round"
@@ -119,18 +119,18 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1hel1_10"
+                  class="_container_1md5v_10"
                 >
                   <input
                     aria-labelledby="_r_8_"
-                    class="_input_1hel1_18"
+                    class="_input_1md5v_18"
                     id="checkbox_MwbPDmfGtm"
                     role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1hel1_19"
+                    class="_ui_1md5v_19"
                   >
                     <svg
                       aria-hidden="true"
@@ -172,7 +172,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
               data-color="6"
               data-testid="avatar-img"
               data-type="round"
@@ -217,18 +217,18 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1hel1_10"
+                  class="_container_1md5v_10"
                 >
                   <input
                     aria-labelledby="_r_c_"
-                    class="_input_1hel1_18"
+                    class="_input_1md5v_18"
                     id="checkbox_GQvdMWe954"
                     role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1hel1_19"
+                    class="_ui_1md5v_19"
                   >
                     <svg
                       aria-hidden="true"
@@ -271,7 +271,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
               data-color="2"
               data-testid="avatar-img"
               data-type="round"
@@ -316,18 +316,18 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1hel1_10"
+                  class="_container_1md5v_10"
                 >
                   <input
                     aria-labelledby="_r_g_"
-                    class="_input_1hel1_18"
+                    class="_input_1md5v_18"
                     id="checkbox_DVIAu5CsiH"
                     role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1hel1_19"
+                    class="_ui_1md5v_19"
                   >
                     <svg
                       aria-hidden="true"
@@ -388,7 +388,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
               data-color="2"
               data-testid="avatar-img"
               data-type="round"
@@ -437,11 +437,11 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                   class="_inline-field-control_19upo_44"
                 >
                   <div
-                    class="_container_1hel1_10"
+                    class="_container_1md5v_10"
                   >
                     <input
                       aria-labelledby="_r_k_"
-                      class="_input_1hel1_18"
+                      class="_input_1md5v_18"
                       disabled=""
                       id="checkbox_RD7nyrA2oh"
                       role="presentation"
@@ -449,7 +449,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                       type="checkbox"
                     />
                     <div
-                      class="_ui_1hel1_19"
+                      class="_ui_1md5v_19"
                     >
                       <svg
                         aria-hidden="true"
@@ -492,7 +492,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
               data-color="6"
               data-testid="avatar-img"
               data-type="round"
@@ -537,18 +537,18 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1hel1_10"
+                  class="_container_1md5v_10"
                 >
                   <input
                     aria-labelledby="_r_t_"
-                    class="_input_1hel1_18"
+                    class="_input_1md5v_18"
                     id="checkbox_jWVJIPauy1"
                     role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1hel1_19"
+                    class="_ui_1md5v_19"
                   >
                     <svg
                       aria-hidden="true"
@@ -651,7 +651,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
               data-color="5"
               data-testid="avatar-img"
               data-type="round"
@@ -696,18 +696,18 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1hel1_10"
+                  class="_container_1md5v_10"
                 >
                   <input
                     aria-labelledby="_r_3i_"
-                    class="_input_1hel1_18"
+                    class="_input_1md5v_18"
                     id="checkbox_EetmBG4yVC"
                     role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1hel1_19"
+                    class="_ui_1md5v_19"
                   >
                     <svg
                       aria-hidden="true"
@@ -749,7 +749,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
               data-color="6"
               data-testid="avatar-img"
               data-type="round"
@@ -794,18 +794,18 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1hel1_10"
+                  class="_container_1md5v_10"
                 >
                   <input
                     aria-labelledby="_r_3m_"
-                    class="_input_1hel1_18"
+                    class="_input_1md5v_18"
                     id="checkbox_eEefiPqpMR"
                     role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1hel1_19"
+                    class="_ui_1md5v_19"
                   >
                     <svg
                       aria-hidden="true"
@@ -848,7 +848,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
             class="mx_SpaceHierarchy_roomTile_avatar"
           >
             <span
-              class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
               data-color="2"
               data-testid="avatar-img"
               data-type="round"
@@ -893,18 +893,18 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1hel1_10"
+                  class="_container_1md5v_10"
                 >
                   <input
                     aria-labelledby="_r_3q_"
-                    class="_input_1hel1_18"
+                    class="_input_1md5v_18"
                     id="checkbox_MwbPDmfGtm"
                     role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1hel1_19"
+                    class="_ui_1md5v_19"
                   >
                     <svg
                       aria-hidden="true"
diff --git a/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
index 6605598714..f7487da90c 100644
--- a/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <div
@@ -53,7 +53,7 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <div
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 a03a0f54e7..825d7ebc01 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
@@ -41,7 +41,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
                   class="mx_EncryptionCard_header"
                 >
                   <div
-                    class="_content_o77nw_8"
+                    class="_content_1r8kr_8"
                     data-size="large"
                   >
                     <svg
@@ -87,7 +87,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
                   class="mx_EncryptionCard_buttons"
                 >
                   <button
-                    class="_button_vczzf_8"
+                    class="_button_187yx_8"
                     data-kind="primary"
                     data-size="lg"
                     role="button"
@@ -107,7 +107,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
                      Use another device
                   </button>
                   <button
-                    class="_button_vczzf_8"
+                    class="_button_187yx_8"
                     data-kind="secondary"
                     data-size="lg"
                     role="button"
@@ -116,7 +116,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
                     Can't confirm?
                   </button>
                   <button
-                    class="_button_vczzf_8"
+                    class="_button_187yx_8"
                     data-kind="tertiary"
                     data-size="lg"
                     role="button"
@@ -209,7 +209,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
                   class="mx_EncryptionCard_header"
                 >
                   <div
-                    class="_content_o77nw_8"
+                    class="_content_1r8kr_8"
                     data-size="large"
                   >
                     <svg
@@ -255,7 +255,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
                   class="mx_EncryptionCard_buttons"
                 >
                   <button
-                    class="_button_vczzf_8"
+                    class="_button_187yx_8"
                     data-kind="primary"
                     data-size="lg"
                     role="button"
@@ -264,7 +264,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
                     Use recovery key
                   </button>
                   <button
-                    class="_button_vczzf_8"
+                    class="_button_187yx_8"
                     data-kind="secondary"
                     data-size="lg"
                     role="button"
@@ -273,7 +273,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
                     Can't confirm?
                   </button>
                   <button
-                    class="_button_vczzf_8"
+                    class="_button_187yx_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 120690c46f..e4c9ec4854 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
@@ -42,7 +42,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_o77nw_8"
+        class="_content_1r8kr_8"
         data-size="large"
       >
         <svg
@@ -73,7 +73,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
       class="mx_EncryptionCard_buttons"
     >
       <button
-        class="_button_vczzf_8 mx_Dialog_nonDialogButton _has-icon_vczzf_57"
+        class="_button_187yx_8 mx_Dialog_nonDialogButton _has-icon_187yx_57"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -97,7 +97,7 @@ exports[`<MasUnlockCrossSigningAuthEntry/> should render 1`] = `
         Continue to account
       </button>
       <button
-        class="_button_vczzf_8 mx_Dialog_nonDialogButton"
+        class="_button_187yx_8 mx_Dialog_nonDialogButton"
         data-kind="tertiary"
         data-size="lg"
         role="button"
diff --git a/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap b/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
index 99299932cc..db3bf6264b 100644
--- a/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
+++ b/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`DecoratedRoomAvatar shows an avatar with globe icon and tooltip for pub
     class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
   >
     <span
-      class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -30,7 +30,7 @@ exports[`DecoratedRoomAvatar shows the presence indicator in a DM room that also
     class="mx_DecoratedRoomAvatar mx_DecoratedRoomAvatar_cutout"
   >
     <span
-      class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
       data-color="5"
       data-testid="avatar-img"
       data-type="round"
diff --git a/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap b/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
index e8b60779a9..68af0da5a0 100644
--- a/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
+++ b/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`RoomAvatar should not render an invite avatar if the user has disabled it 1`] = `
 <div>
   <span
-    class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
     data-color="6"
     data-testid="avatar-img"
     data-type="round"
@@ -19,7 +19,7 @@ exports[`RoomAvatar should render an avatar for a room the user is invited to 1`
 <div>
   <span
     aria-label="Avatar"
-    class="_avatar_1qbcf_8 mx_BaseAvatar"
+    class="_avatar_zysgz_8 mx_BaseAvatar"
     data-color="6"
     data-testid="avatar-img"
     data-type="round"
@@ -27,7 +27,7 @@ exports[`RoomAvatar should render an avatar for a room the user is invited to 1`
   >
     <img
       alt=""
-      class="_image_1qbcf_41"
+      class="_image_zysgz_43"
       data-type="round"
       height="36px"
       loading="lazy"
@@ -42,7 +42,7 @@ exports[`RoomAvatar should render an avatar for a room the user is invited to 1`
 exports[`RoomAvatar should render as expected for a DM room 1`] = `
 <div>
   <span
-    class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
     data-color="1"
     data-testid="avatar-img"
     data-type="round"
@@ -57,7 +57,7 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = `
 exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
 <div>
   <span
-    class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
     data-color="3"
     data-testid="avatar-img"
     data-type="round"
@@ -72,7 +72,7 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
 exports[`RoomAvatar should render as expected for a Room 1`] = `
 <div>
   <span
-    class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
     data-color="6"
     data-testid="avatar-img"
     data-type="round"
diff --git a/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap b/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
index 81444333d8..8c9610eeb4 100644
--- a/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
+++ b/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<RoomAvatarView /> should not render a decoration 1`] = `
 <DocumentFragment>
   <span
     aria-label="Avatar"
-    class="_avatar_1qbcf_8 mx_BaseAvatar"
+    class="_avatar_zysgz_8 mx_BaseAvatar"
     data-color="1"
     data-testid="avatar-img"
     data-type="round"
@@ -12,7 +12,7 @@ exports[`<RoomAvatarView /> should not render a decoration 1`] = `
   >
     <img
       alt=""
-      class="_image_1qbcf_41"
+      class="_image_zysgz_43"
       data-type="round"
       height="32px"
       loading="lazy"
@@ -31,7 +31,7 @@ exports[`<RoomAvatarView /> should render a low priority room decoration 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_1qbcf_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_icon"
+      class="_avatar_zysgz_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_icon"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -39,7 +39,7 @@ exports[`<RoomAvatarView /> should render a low priority room decoration 1`] = `
     >
       <img
         alt=""
-        class="_image_1qbcf_41"
+        class="_image_zysgz_43"
         data-type="round"
         height="32px"
         loading="lazy"
@@ -74,7 +74,7 @@ exports[`<RoomAvatarView /> should render a public room decoration 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_1qbcf_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_icon"
+      class="_avatar_zysgz_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_icon"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -82,7 +82,7 @@ exports[`<RoomAvatarView /> should render a public room decoration 1`] = `
     >
       <img
         alt=""
-        class="_image_1qbcf_41"
+        class="_image_zysgz_43"
         data-type="round"
         height="32px"
         loading="lazy"
@@ -117,7 +117,7 @@ exports[`<RoomAvatarView /> should render a video room decoration 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_1qbcf_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_icon"
+      class="_avatar_zysgz_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_icon"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -125,7 +125,7 @@ exports[`<RoomAvatarView /> should render a video room decoration 1`] = `
     >
       <img
         alt=""
-        class="_image_1qbcf_41"
+        class="_image_zysgz_43"
         data-type="round"
         height="32px"
         loading="lazy"
@@ -160,7 +160,7 @@ exports[`<RoomAvatarView /> should render the AWAY presence 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_1qbcf_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
+      class="_avatar_zysgz_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -168,7 +168,7 @@ exports[`<RoomAvatarView /> should render the AWAY presence 1`] = `
     >
       <img
         alt=""
-        class="_image_1qbcf_41"
+        class="_image_zysgz_43"
         data-type="round"
         height="32px"
         loading="lazy"
@@ -216,7 +216,7 @@ exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_1qbcf_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
+      class="_avatar_zysgz_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -224,7 +224,7 @@ exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
     >
       <img
         alt=""
-        class="_image_1qbcf_41"
+        class="_image_zysgz_43"
         data-type="round"
         height="32px"
         loading="lazy"
@@ -274,7 +274,7 @@ exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_1qbcf_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
+      class="_avatar_zysgz_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -282,7 +282,7 @@ exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
     >
       <img
         alt=""
-        class="_image_1qbcf_41"
+        class="_image_zysgz_43"
         data-type="round"
         height="32px"
         loading="lazy"
@@ -332,7 +332,7 @@ exports[`<RoomAvatarView /> should render the ONLINE presence 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_1qbcf_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
+      class="_avatar_zysgz_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -340,7 +340,7 @@ exports[`<RoomAvatarView /> should render the ONLINE presence 1`] = `
     >
       <img
         alt=""
-        class="_image_1qbcf_41"
+        class="_image_zysgz_43"
         data-type="round"
         height="32px"
         loading="lazy"
diff --git a/test/unit-tests/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap b/test/unit-tests/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
index ce1d31ccf3..71d694a368 100644
--- a/test/unit-tests/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
+++ b/test/unit-tests/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
@@ -11,7 +11,7 @@ exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
         class="mx_Marker_border"
       >
         <span
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="6"
           data-testid="avatar-img"
           data-type="round"
diff --git a/test/unit-tests/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap b/test/unit-tests/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
index 564fb0ba8b..5abc12c29b 100644
--- a/test/unit-tests/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap
@@ -41,7 +41,7 @@ exports[`<BeaconViewDialog /> renders own beacon status when user is live sharin
   class="mx_DialogOwnBeaconStatus"
 >
   <span
-    class="_avatar_1qbcf_8 mx_BaseAvatar mx_DialogOwnBeaconStatus_avatar _avatar-imageless_1qbcf_52"
+    class="_avatar_zysgz_8 mx_BaseAvatar mx_DialogOwnBeaconStatus_avatar _avatar-imageless_zysgz_55"
     data-color="6"
     data-testid="avatar-img"
     data-type="round"
diff --git a/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
index 6a61bcf69a..b8828327aa 100644
--- a/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
+++ b/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
@@ -41,7 +41,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
         class="mx_BeaconListItem"
       >
         <span
-          class="_avatar_1qbcf_8 mx_BaseAvatar mx_BeaconListItem_avatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar mx_BeaconListItem_avatar _avatar-imageless_zysgz_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
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 23d6bb3620..31abd1aedf 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
@@ -9,7 +9,7 @@ exports[`ConfirmKeyStorageOffDialog renders 1`] = `
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_o77nw_8 _destructive_o77nw_34"
+        class="_content_1r8kr_8 _destructive_1r8kr_34"
         data-size="large"
       >
         <svg
@@ -59,7 +59,7 @@ exports[`ConfirmKeyStorageOffDialog renders 1`] = `
       class="mx_EncryptionCard_buttons"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -68,7 +68,7 @@ exports[`ConfirmKeyStorageOffDialog renders 1`] = `
         Go to Settings
       </button>
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="secondary"
         data-size="lg"
         role="button"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
index 629ddfecc3..95b407165c 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
@@ -36,7 +36,7 @@ exports[`ConfirmUserActionDialog renders 1`] = `
           class="mx_ConfirmUserActionDialog_avatar"
         >
           <span
-            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="3"
             data-testid="avatar-img"
             data-type="round"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
index b873347666..fd3ec6425c 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
@@ -161,15 +161,15 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
           class="_inline-field-control_19upo_44"
         >
           <div
-            class="_container_1hel1_10"
+            class="_container_1md5v_10"
           >
             <input
-              class="_input_1hel1_18"
+              class="_input_1md5v_18"
               id="include-attachments"
               type="checkbox"
             />
             <div
-              class="_ui_1hel1_19"
+              class="_ui_1md5v_19"
             >
               <svg
                 aria-hidden="true"
diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
index 11806e9ddc..63495b949d 100644
--- a/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
@@ -73,16 +73,16 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
                 class="_inline-field-control_19upo_44"
               >
                 <div
-                  class="_container_1hel1_10"
+                  class="_container_1md5v_10"
                 >
                   <input
                     aria-describedby="_r_5_"
-                    class="_input_1hel1_18"
+                    class="_input_1md5v_18"
                     id="checkbox_vY7Q4uEh9K"
                     type="checkbox"
                   />
                   <div
-                    class="_ui_1hel1_19"
+                    class="_ui_1md5v_19"
                   >
                     <svg
                       aria-hidden="true"
@@ -108,7 +108,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
                 >
                   <div>
                     <span
-                      class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+                      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
                       data-color="1"
                       data-testid="avatar-img"
                       data-type="round"
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 a4afe442c9..fe1e04cf42 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_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -182,7 +182,7 @@ exports[`ShareDialog should not render the socials if disabled 1`] = `
         </span>
       </div>
       <button
-        class="_button_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -270,15 +270,15 @@ exports[`ShareDialog should render a share dialog for a matrix event 1`] = `
       </div>
       <label>
         <div
-          class="_container_1hel1_10"
+          class="_container_1md5v_10"
         >
           <input
             checked=""
-            class="_input_1hel1_18"
+            class="_input_1md5v_18"
             type="checkbox"
           />
           <div
-            class="_ui_1hel1_19"
+            class="_ui_1md5v_19"
           >
             <svg
               aria-hidden="true"
@@ -297,7 +297,7 @@ exports[`ShareDialog should render a share dialog for a matrix event 1`] = `
         Link to selected message
       </label>
       <button
-        class="_button_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -444,14 +444,14 @@ exports[`ShareDialog should render a share dialog for a room 1`] = `
       </div>
       <label>
         <div
-          class="_container_1hel1_10"
+          class="_container_1md5v_10"
         >
           <input
-            class="_input_1hel1_18"
+            class="_input_1md5v_18"
             type="checkbox"
           />
           <div
-            class="_ui_1hel1_19"
+            class="_ui_1md5v_19"
           >
             <svg
               aria-hidden="true"
@@ -470,7 +470,7 @@ exports[`ShareDialog should render a share dialog for a room 1`] = `
         Link to most recent message
       </label>
       <button
-        class="_button_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -616,7 +616,7 @@ exports[`ShareDialog should render a share dialog for a room member 1`] = `
         </span>
       </div>
       <button
-        class="_button_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -762,7 +762,7 @@ exports[`ShareDialog should render a share dialog for an URL 1`] = `
         </span>
       </div>
       <button
-        class="_button_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         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 d515eb5c8c..044e0a2911 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_vczzf_8 _destructive_vczzf_107"
+        class="_button_187yx_8 _destructive_187yx_107"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -42,7 +42,7 @@ exports[`<UnpinAllDialog /> should render 1`] = `
         Continue
       </button>
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
diff --git a/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
index cfe0ac6c91..b1a6b84aa8 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
@@ -40,7 +40,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
           tabindex="0"
         >
           <div
-            class="_indicator-icon_zr2a0_17"
+            class="_indicator-icon_147l5_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
@@ -103,7 +103,7 @@ exports[`AppTile for a pinned widget should render 1`] = `
         <span>
           <span
             aria-label="Avatar"
-            class="_avatar_1qbcf_8 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_zysgz_8 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -112,7 +112,7 @@ exports[`AppTile for a pinned widget should render 1`] = `
           >
             <img
               alt=""
-              class="_image_1qbcf_41"
+              class="_image_zysgz_43"
               data-type="round"
               height="20px"
               loading="lazy"
@@ -216,7 +216,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
         <span>
           <span
             aria-label="Avatar"
-            class="_avatar_1qbcf_8 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_zysgz_8 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -225,7 +225,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           >
             <img
               alt=""
-              class="_image_1qbcf_41"
+              class="_image_zysgz_43"
               data-type="round"
               height="20px"
               loading="lazy"
@@ -320,7 +320,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           </div>
           <div>
             <span
-              class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
               data-color="1"
               data-testid="avatar-img"
               data-type="round"
@@ -408,7 +408,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
               <span>
                 <span
                   aria-label="Avatar"
-                  class="_avatar_1qbcf_8 mx_BaseAvatar mx_WidgetAvatar"
+                  class="_avatar_zysgz_8 mx_BaseAvatar mx_WidgetAvatar"
                   data-color="1"
                   data-testid="avatar-img"
                   data-type="round"
@@ -417,7 +417,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
                 >
                   <img
                     alt=""
-                    class="_image_1qbcf_41"
+                    class="_image_zysgz_43"
                     data-type="round"
                     height="20px"
                     loading="lazy"
diff --git a/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap
index 7c1bb55886..f12f52b483 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap
@@ -9,10 +9,10 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
     tabindex="0"
   >
     <div
-      class="_stacked-avatars_1qbcf_102"
+      class="_stacked-avatars_zysgz_109"
     >
       <span
-        class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"
diff --git a/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
index 13481219b1..6e759d1810 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
@@ -15,17 +15,17 @@ exports[`<LabelledCheckbox /> should render with byline of "this is a byline" 1`
           class="_inline-field-control_19upo_44"
         >
           <div
-            class="_container_1hel1_10"
+            class="_container_1md5v_10"
           >
             <input
               aria-describedby="_r_4_"
               checked=""
-              class="_input_1hel1_18"
+              class="_input_1md5v_18"
               id="checkbox_vY7Q4uEh9K"
               type="checkbox"
             />
             <div
-              class="_ui_1hel1_19"
+              class="_ui_1md5v_19"
             >
               <svg
                 aria-hidden="true"
@@ -83,16 +83,16 @@ exports[`<LabelledCheckbox /> should render with byline of undefined 1`] = `
           class="_inline-field-control_19upo_44"
         >
           <div
-            class="_container_1hel1_10"
+            class="_container_1md5v_10"
           >
             <input
               checked=""
-              class="_input_1hel1_18"
+              class="_input_1md5v_18"
               id="checkbox_vY7Q4uEh9K"
               type="checkbox"
             />
             <div
-              class="_ui_1hel1_19"
+              class="_ui_1md5v_19"
             >
               <svg
                 aria-hidden="true"
diff --git a/test/unit-tests/components/views/elements/__snapshots__/Pill-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/Pill-test.tsx.snap
index 14ce3a327b..6b5c91b973 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/Pill-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/Pill-test.tsx.snap
@@ -40,7 +40,7 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
         >
           <span
             aria-hidden="true"
-            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -71,7 +71,7 @@ exports[`<Pill> should render the expected pill for a known user not in the room
       >
         <span
           aria-hidden="true"
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="5"
           data-testid="avatar-img"
           data-type="round"
@@ -101,7 +101,7 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
       >
         <span
           aria-hidden="true"
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -131,7 +131,7 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
       >
         <span
           aria-hidden="true"
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="4"
           data-testid="avatar-img"
           data-type="round"
@@ -161,7 +161,7 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
       >
         <span
           aria-hidden="true"
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -191,7 +191,7 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
       >
         <span
           aria-hidden="true"
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="2"
           data-testid="avatar-img"
           data-type="round"
@@ -252,7 +252,7 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
       >
         <span
           aria-hidden="true"
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -282,7 +282,7 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
       >
         <span
           aria-hidden="true"
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="4"
           data-testid="avatar-img"
           data-type="round"
diff --git a/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
index 02a5a22a32..c8e31e7b6f 100644
--- a/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
+++ b/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
@@ -10,10 +10,10 @@ exports[`<RoomFacePile /> renders 1`] = `
     tabindex="0"
   >
     <div
-      class="_stacked-avatars_1qbcf_102"
+      class="_stacked-avatars_zysgz_109"
     >
       <span
-        class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"
diff --git a/test/unit-tests/components/views/messages/TextualBody-test.tsx b/test/unit-tests/components/views/messages/TextualBody-test.tsx
index 78a1261116..3c9daa5d44 100644
--- a/test/unit-tests/components/views/messages/TextualBody-test.tsx
+++ b/test/unit-tests/components/views/messages/TextualBody-test.tsx
@@ -197,7 +197,7 @@ describe("<TextualBody />", () => {
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Chat with <bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1qbcf_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" referrerpolicy="no-referrer" class="_image_1qbcf_41" data-type="round" width="16px" height="16px" src="mxc://avatar.url/image.png"></span><span class="mx_Pill_text">Member</span></a></bdi>"`,
+                `"Chat with <bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" referrerpolicy="no-referrer" class="_image_zysgz_43" data-type="round" width="16px" height="16px" src="mxc://avatar.url/image.png"></span><span class="mx_Pill_text">Member</span></a></bdi>"`,
             );
         });
 
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 ae5bb8806a..2e4b78b3bc 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_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="secondary"
         data-size="sm"
         rel="noreferrer noopener"
diff --git a/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap b/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap
index 4ab00419d1..57ec2b4f2f 100644
--- a/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap
+++ b/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap
@@ -63,7 +63,7 @@ exports[`<MImageBody/> should open ImageView using thumbnail for encrypted svg 1
       <button
         aria-label="Profile picture"
         aria-live="off"
-        class="_avatar_1qbcf_8 mx_BaseAvatar mx_Dialog_nonDialogButton _avatar-imageless_1qbcf_52"
+        class="_avatar_zysgz_8 mx_BaseAvatar mx_Dialog_nonDialogButton _avatar-imageless_zysgz_55"
         data-color="2"
         data-testid="avatar-img"
         data-type="round"
diff --git a/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap b/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
index 39cb1aa2ca..abcee23a75 100644
--- a/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
+++ b/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
@@ -92,7 +92,7 @@ exports[`MLocationBody <MLocationBody> without error renders marker correctly fo
               class="mx_Marker_border"
             >
               <span
-                class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+                class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
                 data-color="3"
                 data-testid="avatar-img"
                 data-type="round"
diff --git a/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
index 352b9bd9bd..2a3fc12f69 100644
--- a/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
+++ b/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
@@ -85,7 +85,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
       <span
         aria-hidden="true"
         aria-label="Profile picture"
-        class="_avatar_1qbcf_8 mx_BaseAvatar"
+        class="_avatar_zysgz_8 mx_BaseAvatar"
         data-color="2"
         data-testid="avatar-img"
         data-type="round"
@@ -93,7 +93,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
       >
         <img
           alt=""
-          class="_image_1qbcf_41"
+          class="_image_zysgz_43"
           data-type="round"
           height="16px"
           loading="lazy"
@@ -130,7 +130,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
           <span
             aria-hidden="true"
             aria-label="Avatar"
-            class="_avatar_1qbcf_8 mx_BaseAvatar"
+            class="_avatar_zysgz_8 mx_BaseAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -138,7 +138,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
           >
             <img
               alt=""
-              class="_image_1qbcf_41"
+              class="_image_zysgz_43"
               data-type="round"
               height="16px"
               loading="lazy"
@@ -177,7 +177,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
           <span
             aria-hidden="true"
             aria-label="Avatar"
-            class="_avatar_1qbcf_8 mx_BaseAvatar"
+            class="_avatar_zysgz_8 mx_BaseAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -185,7 +185,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
           >
             <img
               alt=""
-              class="_image_1qbcf_41"
+              class="_image_zysgz_43"
               data-type="round"
               height="16px"
               loading="lazy"
@@ -289,7 +289,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
       <span
         aria-hidden="true"
         aria-label="Profile picture"
-        class="_avatar_1qbcf_8 mx_BaseAvatar"
+        class="_avatar_zysgz_8 mx_BaseAvatar"
         data-color="2"
         data-testid="avatar-img"
         data-type="round"
@@ -297,7 +297,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
       >
         <img
           alt=""
-          class="_image_1qbcf_41"
+          class="_image_zysgz_43"
           data-type="round"
           height="16px"
           loading="lazy"
@@ -510,9 +510,9 @@ exports[`<TextualBody /> renders plain-text m.text correctly linkification get a
 </div>
 `;
 
-exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to a message in the same room with the label »Message from Member« 1`] = `"Visit <bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room1:example.com/%event_id%"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1qbcf_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" referrerpolicy="no-referrer" class="_image_1qbcf_41" data-type="round" width="16px" height="16px" src="mxc://avatar.url/image.png"></span><span class="mx_Pill_text">Message from Member</span></a></bdi>"`;
+exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to a message in the same room with the label »Message from Member« 1`] = `"Visit <bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room1:example.com/%event_id%"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" referrerpolicy="no-referrer" class="_image_zysgz_43" data-type="round" width="16px" height="16px" src="mxc://avatar.url/image.png"></span><span class="mx_Pill_text">Message from Member</span></a></bdi>"`;
 
-exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an event in another room with the label »Message in Room 2« 1`] = `"Visit <bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room2:example.com/%event_id%"><span aria-label="Avatar" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1qbcf_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" referrerpolicy="no-referrer" class="_image_1qbcf_41" data-type="round" width="16px" height="16px" src="mxc://avatar.url/room.png"></span><span class="mx_Pill_text">Message in Room 2</span></a></bdi>"`;
+exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an event in another room with the label »Message in Room 2« 1`] = `"Visit <bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room2:example.com/%event_id%"><span aria-label="Avatar" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" referrerpolicy="no-referrer" class="_image_zysgz_43" data-type="round" width="16px" height="16px" src="mxc://avatar.url/room.png"></span><span class="mx_Pill_text">Message in Room 2</span></a></bdi>"`;
 
 exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an unknown message in the same room with the label »Message« 1`] = `
 <div
diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/BaseCard-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/BaseCard-test.tsx.snap
index 5b21197ec4..284997b93a 100644
--- a/test/unit-tests/components/views/right_panel/__snapshots__/BaseCard-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/__snapshots__/BaseCard-test.tsx.snap
@@ -28,7 +28,7 @@ exports[`<BaseCard /> should close when clicking X button 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
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 f34a09047f..5041fa294c 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
@@ -28,7 +28,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -50,7 +50,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
       tabindex="-1"
     >
       <button
-        class="_button_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -129,7 +129,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -151,7 +151,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
       tabindex="-1"
     >
       <button
-        class="_button_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -172,7 +172,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
         Add extensions
       </button>
       <div
-        class="_separator_7ckbw_8"
+        class="_separator_cqpyv_8"
         data-kind="primary"
         data-orientation="horizontal"
         role="separator"
@@ -187,7 +187,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
         >
           <span
             aria-label="Avatar"
-            class="_avatar_1qbcf_8 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_zysgz_8 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -196,7 +196,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
           >
             <img
               alt=""
-              class="_image_1qbcf_41"
+              class="_image_zysgz_43"
               data-type="round"
               height="24px"
               loading="lazy"
@@ -228,7 +228,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
         >
           <span
             aria-label="Avatar"
-            class="_avatar_1qbcf_8 mx_BaseAvatar mx_WidgetAvatar"
+            class="_avatar_zysgz_8 mx_BaseAvatar mx_WidgetAvatar"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
@@ -237,7 +237,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
           >
             <img
               alt=""
-              class="_image_1qbcf_41"
+              class="_image_zysgz_43"
               data-type="round"
               height="24px"
               loading="lazy"
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 d5e7c8bc5c..5d528a853c 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
@@ -28,7 +28,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -110,7 +110,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -141,7 +141,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
         >
           <div>
             <span
-              class="_avatar_1qbcf_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_1qbcf_52"
+              class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -180,7 +180,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                 type="button"
               >
                 <div
-                  class="_indicator-icon_zr2a0_17"
+                  class="_indicator-icon_147l5_17"
                   style="--cpd-icon-button-size: 100%;"
                 >
                   <svg
@@ -211,7 +211,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
           </div>
         </div>
         <div
-          class="_separator_7ckbw_8 mx_PinnedMessagesCard_Separator"
+          class="_separator_cqpyv_8 mx_PinnedMessagesCard_Separator"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
@@ -222,7 +222,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
         >
           <div>
             <span
-              class="_avatar_1qbcf_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_1qbcf_52"
+              class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -261,7 +261,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                 type="button"
               >
                 <div
-                  class="_indicator-icon_zr2a0_17"
+                  class="_indicator-icon_147l5_17"
                   style="--cpd-icon-button-size: 100%;"
                 >
                   <svg
@@ -296,7 +296,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
         class="mx_PinnedMessagesCard_unpin"
       >
         <button
-          class="_button_vczzf_8"
+          class="_button_187yx_8"
           data-kind="tertiary"
           data-size="lg"
           role="button"
@@ -338,7 +338,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -369,7 +369,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
         >
           <div>
             <span
-              class="_avatar_1qbcf_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_1qbcf_52"
+              class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -408,7 +408,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                 type="button"
               >
                 <div
-                  class="_indicator-icon_zr2a0_17"
+                  class="_indicator-icon_147l5_17"
                   style="--cpd-icon-button-size: 100%;"
                 >
                   <svg
@@ -439,7 +439,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
           </div>
         </div>
         <div
-          class="_separator_7ckbw_8 mx_PinnedMessagesCard_Separator"
+          class="_separator_cqpyv_8 mx_PinnedMessagesCard_Separator"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
@@ -450,7 +450,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
         >
           <div>
             <span
-              class="_avatar_1qbcf_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_1qbcf_52"
+              class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -489,7 +489,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                 type="button"
               >
                 <div
-                  class="_indicator-icon_zr2a0_17"
+                  class="_indicator-icon_147l5_17"
                   style="--cpd-icon-button-size: 100%;"
                 >
                   <svg
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 0ac3c23ccd..350de43185 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
@@ -24,7 +24,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -49,7 +49,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         class="mx_RoomSummaryCard_container"
       >
         <span
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -73,7 +73,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
             data-kind="blue"
           >
             <svg
@@ -91,7 +91,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             Public room
           </span>
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
             data-kind="blue"
           >
             <svg
@@ -134,7 +134,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
               tabindex="0"
             >
               <div
-                class="_indicator-icon_zr2a0_17"
+                class="_indicator-icon_147l5_17"
                 style="--cpd-icon-button-size: 100%;"
               >
                 <svg
@@ -171,7 +171,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         </section>
       </header>
       <div
-        class="_separator_7ckbw_8"
+        class="_separator_cqpyv_8"
         data-kind="primary"
         data-orientation="horizontal"
         role="separator"
@@ -205,17 +205,17 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             Favourite
           </span>
           <div
-            class="_container_19o42_10"
+            class="_container_udcm8_10"
           >
             <input
               aria-hidden="true"
-              class="_input_19o42_24"
+              class="_input_udcm8_24"
               id="_r_j_"
               role="switch"
               type="checkbox"
             />
             <div
-              class="_ui_19o42_34"
+              class="_ui_udcm8_34"
             />
           </div>
         </div>
@@ -257,7 +257,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_7ckbw_8"
+          class="_separator_cqpyv_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
@@ -464,7 +464,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_7ckbw_8"
+          class="_separator_cqpyv_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
@@ -621,7 +621,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_7ckbw_8"
+          class="_separator_cqpyv_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
@@ -737,7 +737,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -762,7 +762,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         class="mx_RoomSummaryCard_container"
       >
         <span
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -786,7 +786,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
             data-kind="blue"
           >
             <svg
@@ -804,7 +804,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             Public room
           </span>
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
             data-kind="blue"
           >
             <svg
@@ -846,7 +846,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </section>
       </header>
       <div
-        class="_separator_7ckbw_8"
+        class="_separator_cqpyv_8"
         data-kind="primary"
         data-orientation="horizontal"
         role="separator"
@@ -880,17 +880,17 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             Favourite
           </span>
           <div
-            class="_container_19o42_10"
+            class="_container_udcm8_10"
           >
             <input
               aria-hidden="true"
-              class="_input_19o42_24"
+              class="_input_udcm8_24"
               id="_r_5_"
               role="switch"
               type="checkbox"
             />
             <div
-              class="_ui_19o42_34"
+              class="_ui_udcm8_34"
             />
           </div>
         </div>
@@ -932,7 +932,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_7ckbw_8"
+          class="_separator_cqpyv_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
@@ -1139,7 +1139,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_7ckbw_8"
+          class="_separator_cqpyv_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
@@ -1296,7 +1296,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_7ckbw_8"
+          class="_separator_cqpyv_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
@@ -1412,7 +1412,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -1437,7 +1437,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         class="mx_RoomSummaryCard_container"
       >
         <span
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="1"
           data-testid="avatar-img"
           data-type="round"
@@ -1461,7 +1461,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
             data-kind="blue"
           >
             <svg
@@ -1479,7 +1479,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             Public room
           </span>
           <span
-            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8"
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8"
             data-kind="blue"
           >
             <svg
@@ -1522,7 +1522,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
               tabindex="0"
             >
               <div
-                class="_indicator-icon_zr2a0_17"
+                class="_indicator-icon_147l5_17"
                 style="--cpd-icon-button-size: 100%;"
               >
                 <svg
@@ -1559,7 +1559,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         </section>
       </header>
       <div
-        class="_separator_7ckbw_8"
+        class="_separator_cqpyv_8"
         data-kind="primary"
         data-orientation="horizontal"
         role="separator"
@@ -1593,17 +1593,17 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             Favourite
           </span>
           <div
-            class="_container_19o42_10"
+            class="_container_udcm8_10"
           >
             <input
               aria-hidden="true"
-              class="_input_19o42_24"
+              class="_input_udcm8_24"
               id="_r_c_"
               role="switch"
               type="checkbox"
             />
             <div
-              class="_ui_19o42_34"
+              class="_ui_udcm8_34"
             />
           </div>
         </div>
@@ -1645,7 +1645,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_7ckbw_8"
+          class="_separator_cqpyv_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
@@ -1852,7 +1852,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_7ckbw_8"
+          class="_separator_cqpyv_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
@@ -2009,7 +2009,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           </svg>
         </button>
         <div
-          class="_separator_7ckbw_8"
+          class="_separator_cqpyv_8"
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
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 efe0c37810..7b2bcb1c92 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
@@ -28,7 +28,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -61,7 +61,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             <button
               aria-label="Profile picture"
               aria-live="off"
-              class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -315,7 +315,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -348,7 +348,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             <button
               aria-label="Profile picture"
               aria-live="off"
-              class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+              class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
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 3834db0da1..87b7c5011a 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
@@ -24,7 +24,7 @@ exports[`<UserInfoHeaderVerificationView /> renders verified badge when user is
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <span
-      class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_1t12g_8 mx_UserInfo_verified_badge"
+      class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _badge_18gm1_8 mx_UserInfo_verified_badge"
       data-kind="green"
     >
       <svg
@@ -59,7 +59,7 @@ exports[`<UserInfoHeaderVerificationView /> renders verify button 1`] = `
       class="mx_UserInfo_container_verifyButton"
     >
       <button
-        class="_button_vczzf_8 mx_UserInfo_verify_button"
+        class="_button_187yx_8 mx_UserInfo_verify_button"
         data-kind="tertiary"
         data-size="sm"
         role="button"
diff --git a/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap b/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap
index ed0d041702..51c368b0e2 100644
--- a/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap
+++ b/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
         <button
           aria-label="Profile picture"
           aria-live="off"
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="3"
           data-testid="avatar-img"
           data-type="round"
diff --git a/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap
index ef138dd904..9e5835c593 100644
--- a/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap
@@ -9,7 +9,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     <button
       aria-label="Open room settings"
       aria-live="off"
-      class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
       data-color="3"
       data-testid="avatar-img"
       data-type="round"
@@ -52,7 +52,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
@@ -80,7 +80,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
@@ -106,7 +106,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
@@ -133,7 +133,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
diff --git a/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap
index b604a17b87..c17f66e35c 100644
--- a/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap
@@ -12,7 +12,7 @@ exports[`<VideoRoomChatButton /> renders button with an unread marker when room
   tabindex="0"
 >
   <div
-    class="_indicator-icon_zr2a0_17"
+    class="_indicator-icon_147l5_17"
     data-indicator="default"
     style="--cpd-icon-button-size: 100%;"
   >
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 dac18e348b..c368925df1 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_vczzf_8"
+      class="_button_187yx_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_vczzf_8"
+      class="_button_187yx_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_vczzf_8"
+      class="_button_187yx_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_vczzf_8"
+      class="_button_187yx_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_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         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_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         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_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="secondary"
         data-size="sm"
         role="button"
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
index 1b12695913..71bfd45578 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
@@ -39,7 +39,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <span
               aria-label="Avatar"
-              class="_avatar_1qbcf_8 mx_BaseAvatar"
+              class="_avatar_zysgz_8 mx_BaseAvatar"
               data-color="2"
               data-testid="avatar-img"
               data-type="round"
@@ -47,7 +47,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             >
               <img
                 alt=""
-                class="_image_1qbcf_41"
+                class="_image_zysgz_43"
                 data-type="round"
                 height="32px"
                 loading="lazy"
@@ -94,7 +94,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <span
               aria-label="Avatar"
-              class="_avatar_1qbcf_8 mx_BaseAvatar"
+              class="_avatar_zysgz_8 mx_BaseAvatar"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -102,7 +102,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             >
               <img
                 alt=""
-                class="_image_1qbcf_41"
+                class="_image_zysgz_43"
                 data-type="round"
                 height="32px"
                 loading="lazy"
@@ -149,7 +149,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <span
               aria-label="Avatar"
-              class="_avatar_1qbcf_8 mx_BaseAvatar"
+              class="_avatar_zysgz_8 mx_BaseAvatar"
               data-color="4"
               data-testid="avatar-img"
               data-type="round"
@@ -157,7 +157,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             >
               <img
                 alt=""
-                class="_image_1qbcf_41"
+                class="_image_zysgz_43"
                 data-type="round"
                 height="32px"
                 loading="lazy"
@@ -204,7 +204,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <span
               aria-label="Avatar"
-              class="_avatar_1qbcf_8 mx_BaseAvatar"
+              class="_avatar_zysgz_8 mx_BaseAvatar"
               data-color="5"
               data-testid="avatar-img"
               data-type="round"
@@ -212,7 +212,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             >
               <img
                 alt=""
-                class="_image_1qbcf_41"
+                class="_image_zysgz_43"
                 data-type="round"
                 height="32px"
                 loading="lazy"
@@ -259,7 +259,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <span
               aria-label="Avatar"
-              class="_avatar_1qbcf_8 mx_BaseAvatar"
+              class="_avatar_zysgz_8 mx_BaseAvatar"
               data-color="6"
               data-testid="avatar-img"
               data-type="round"
@@ -267,7 +267,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             >
               <img
                 alt=""
-                class="_image_1qbcf_41"
+                class="_image_zysgz_43"
                 data-type="round"
                 height="32px"
                 loading="lazy"
@@ -314,7 +314,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <span
               aria-label="Avatar"
-              class="_avatar_1qbcf_8 mx_BaseAvatar"
+              class="_avatar_zysgz_8 mx_BaseAvatar"
               data-color="1"
               data-testid="avatar-img"
               data-type="round"
@@ -322,7 +322,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             >
               <img
                 alt=""
-                class="_image_1qbcf_41"
+                class="_image_zysgz_43"
                 data-type="round"
                 height="32px"
                 loading="lazy"
@@ -369,7 +369,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <span
               aria-label="Avatar"
-              class="_avatar_1qbcf_8 mx_BaseAvatar"
+              class="_avatar_zysgz_8 mx_BaseAvatar"
               data-color="2"
               data-testid="avatar-img"
               data-type="round"
@@ -377,7 +377,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             >
               <img
                 alt=""
-                class="_image_1qbcf_41"
+                class="_image_zysgz_43"
                 data-type="round"
                 height="32px"
                 loading="lazy"
@@ -424,7 +424,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <span
               aria-label="Avatar"
-              class="_avatar_1qbcf_8 mx_BaseAvatar"
+              class="_avatar_zysgz_8 mx_BaseAvatar"
               data-color="3"
               data-testid="avatar-img"
               data-type="round"
@@ -432,7 +432,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             >
               <img
                 alt=""
-                class="_image_1qbcf_41"
+                class="_image_zysgz_43"
                 data-type="round"
                 height="32px"
                 loading="lazy"
@@ -479,7 +479,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <span
               aria-label="Avatar"
-              class="_avatar_1qbcf_8 mx_BaseAvatar"
+              class="_avatar_zysgz_8 mx_BaseAvatar"
               data-color="4"
               data-testid="avatar-img"
               data-type="round"
@@ -487,7 +487,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             >
               <img
                 alt=""
-                class="_image_1qbcf_41"
+                class="_image_zysgz_43"
                 data-type="round"
                 height="32px"
                 loading="lazy"
@@ -534,7 +534,7 @@ exports[`<RoomList /> should render a room list 1`] = `
           >
             <span
               aria-label="Avatar"
-              class="_avatar_1qbcf_8 mx_BaseAvatar"
+              class="_avatar_zysgz_8 mx_BaseAvatar"
               data-color="5"
               data-testid="avatar-img"
               data-type="round"
@@ -542,7 +542,7 @@ exports[`<RoomList /> should render a room list 1`] = `
             >
               <img
                 alt=""
-                class="_image_1qbcf_41"
+                class="_image_zysgz_43"
                 data-type="round"
                 height="32px"
                 loading="lazy"
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap
index 99a01c4d47..df1080844e 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
         type="button"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -74,7 +74,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
           type="button"
         >
           <div
-            class="_indicator-icon_zr2a0_17"
+            class="_indicator-icon_147l5_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
@@ -111,7 +111,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
           type="button"
         >
           <div
-            class="_indicator-icon_zr2a0_17"
+            class="_indicator-icon_147l5_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
@@ -172,7 +172,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
         type="button"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -214,7 +214,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
           type="button"
         >
           <div
-            class="_indicator-icon_zr2a0_17"
+            class="_indicator-icon_147l5_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
@@ -245,7 +245,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
           tabindex="0"
         >
           <div
-            class="_indicator-icon_zr2a0_17"
+            class="_indicator-icon_147l5_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
@@ -306,7 +306,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
         type="button"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -348,7 +348,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
           type="button"
         >
           <div
-            class="_indicator-icon_zr2a0_17"
+            class="_indicator-icon_147l5_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
@@ -385,7 +385,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
           type="button"
         >
           <div
-            class="_indicator-icon_zr2a0_17"
+            class="_indicator-icon_147l5_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
@@ -446,7 +446,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
         type="button"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -488,7 +488,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
           type="button"
         >
           <div
-            class="_indicator-icon_zr2a0_17"
+            class="_indicator-icon_147l5_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
@@ -525,7 +525,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
           type="button"
         >
           <div
-            class="_indicator-icon_zr2a0_17"
+            class="_indicator-icon_147l5_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
@@ -596,7 +596,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
           type="button"
         >
           <div
-            class="_indicator-icon_zr2a0_17"
+            class="_indicator-icon_147l5_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
@@ -633,7 +633,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
           type="button"
         >
           <div
-            class="_indicator-icon_zr2a0_17"
+            class="_indicator-icon_147l5_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap
index 07b67f7819..a5f199f767 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemMenuView-test.tsx.snap
@@ -22,7 +22,7 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
       type="button"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
@@ -55,7 +55,7 @@ exports[`<RoomListItemMenuView /> should render the more options menu 1`] = `
         type="button"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -101,7 +101,7 @@ exports[`<RoomListItemMenuView /> should render the notification options menu 1`
       type="button"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
@@ -134,7 +134,7 @@ exports[`<RoomListItemMenuView /> should render the notification options menu 1`
         type="button"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap
index 6cbcbe3263..9e84fc2d40 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListItemView-test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_1qbcf_8 mx_BaseAvatar"
+      class="_avatar_zysgz_8 mx_BaseAvatar"
       data-color="3"
       data-testid="avatar-img"
       data-type="round"
@@ -23,7 +23,7 @@ exports[`<RoomListItemView /> should be selected if isSelected=true 1`] = `
     >
       <img
         alt=""
-        class="_image_1qbcf_41"
+        class="_image_zysgz_43"
         data-type="round"
         height="32px"
         loading="lazy"
@@ -66,7 +66,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_1qbcf_8 mx_BaseAvatar"
+      class="_avatar_zysgz_8 mx_BaseAvatar"
       data-color="3"
       data-testid="avatar-img"
       data-type="round"
@@ -74,7 +74,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
     >
       <img
         alt=""
-        class="_image_1qbcf_41"
+        class="_image_zysgz_43"
         data-type="round"
         height="32px"
         loading="lazy"
@@ -115,7 +115,7 @@ exports[`<RoomListItemView /> should display notification decoration 1`] = `
           />
         </svg>
         <span
-          class="_unread-counter_9mg0k_8"
+          class="_unread-counter_1147r_8"
         >
           1
         </span>
@@ -140,7 +140,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
   >
     <span
       aria-label="Avatar"
-      class="_avatar_1qbcf_8 mx_BaseAvatar"
+      class="_avatar_zysgz_8 mx_BaseAvatar"
       data-color="3"
       data-testid="avatar-img"
       data-type="round"
@@ -148,7 +148,7 @@ exports[`<RoomListItemView /> should render a room item 1`] = `
     >
       <img
         alt=""
-        class="_image_1qbcf_41"
+        class="_image_zysgz_43"
         data-type="round"
         height="32px"
         loading="lazy"
@@ -191,7 +191,7 @@ exports[`<RoomListItemView /> should render a room item with a message preview 1
   >
     <span
       aria-label="Avatar"
-      class="_avatar_1qbcf_8 mx_BaseAvatar"
+      class="_avatar_zysgz_8 mx_BaseAvatar"
       data-color="3"
       data-testid="avatar-img"
       data-type="round"
@@ -199,7 +199,7 @@ exports[`<RoomListItemView /> should render a room item with a message preview 1
     >
       <img
         alt=""
-        class="_image_1qbcf_41"
+        class="_image_zysgz_43"
         data-type="round"
         height="32px"
         loading="lazy"
diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListOptionsMenu-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListOptionsMenu-test.tsx.snap
index 3f73e18842..574fcbd094 100644
--- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListOptionsMenu-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListOptionsMenu-test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<RoomListOptionsMenu /> should match snapshot 1`] = `
     type="button"
   >
     <div
-      class="_indicator-icon_zr2a0_17"
+      class="_indicator-icon_147l5_17"
       style="--cpd-icon-button-size: 100%;"
     >
       <svg
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 d6a4c01dd5..9bf82a6529 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
@@ -8,7 +8,7 @@ exports[`<RoomListSearch /> should display search and explore buttons 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_vczzf_8 mx_RoomListSearch_search _has-icon_vczzf_57"
+      class="_button_187yx_8 mx_RoomListSearch_search _has-icon_187yx_57"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -42,7 +42,7 @@ exports[`<RoomListSearch /> should display search and explore buttons 1`] = `
     </button>
     <button
       aria-label="Explore rooms"
-      class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+      class="_button_187yx_8 _has-icon_187yx_57 _icon-only_187yx_50"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -73,7 +73,7 @@ exports[`<RoomListSearch /> should display the dial button when the PTSN protoco
     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_vczzf_8 mx_RoomListSearch_search _has-icon_vczzf_57"
+      class="_button_187yx_8 mx_RoomListSearch_search _has-icon_187yx_57"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -107,7 +107,7 @@ exports[`<RoomListSearch /> should display the dial button when the PTSN protoco
     </button>
     <button
       aria-label="Open dial pad"
-      class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+      class="_button_187yx_8 _has-icon_187yx_57 _icon-only_187yx_50"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -128,7 +128,7 @@ exports[`<RoomListSearch /> should display the dial button when the PTSN protoco
     </button>
     <button
       aria-label="Explore rooms"
-      class="_button_vczzf_8 _has-icon_vczzf_57 _icon-only_vczzf_50"
+      class="_button_187yx_8 _has-icon_187yx_57 _icon-only_187yx_50"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -159,7 +159,7 @@ exports[`<RoomListSearch /> should hide the explore button when UIComponent.Expl
     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_vczzf_8 mx_RoomListSearch_search _has-icon_vczzf_57"
+      class="_button_187yx_8 mx_RoomListSearch_search _has-icon_187yx_57"
       data-kind="secondary"
       data-size="sm"
       role="button"
@@ -203,7 +203,7 @@ exports[`<RoomListSearch /> should hide the explore button when the active space
     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_vczzf_8 mx_RoomListSearch_search _has-icon_vczzf_57"
+      class="_button_187yx_8 mx_RoomListSearch_search _has-icon_187yx_57"
       data-kind="secondary"
       data-size="sm"
       role="button"
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap
index 4eff2799e4..9cbc1a6464 100644
--- a/test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap
@@ -8,7 +8,7 @@ exports[`<NotificationDecoration /> should render the activity decoration 1`] =
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
     <div
-      class="_unread_1k06b_8"
+      class="_unread_cti0f_8"
     >
       <div />
     </div>
@@ -79,7 +79,7 @@ exports[`<NotificationDecoration /> should render the mention decoration 1`] = `
       />
     </svg>
     <span
-      class="_unread-counter_9mg0k_8"
+      class="_unread-counter_1147r_8"
     >
       1
     </span>
@@ -120,7 +120,7 @@ exports[`<NotificationDecoration /> should render the notification decoration 1`
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
     <span
-      class="_unread-counter_9mg0k_8"
+      class="_unread-counter_1147r_8"
     >
       1
     </span>
@@ -136,7 +136,7 @@ exports[`<NotificationDecoration /> should render the notification decoration wi
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
     <div
-      class="_unread-counter_9mg0k_8"
+      class="_unread-counter_1147r_8"
     />
   </div>
 </DocumentFragment>
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 5e25fe3953..92a846ab05 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
@@ -8,7 +8,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
   >
     <div>
       <span
-        class="_avatar_1qbcf_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_1qbcf_52"
+        class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
         data-color="2"
         data-testid="avatar-img"
         data-type="round"
@@ -46,7 +46,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
           type="button"
         >
           <div
-            class="_indicator-icon_zr2a0_17"
+            class="_indicator-icon_147l5_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
@@ -87,7 +87,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
   >
     <div>
       <span
-        class="_avatar_1qbcf_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_1qbcf_52"
+        class="_avatar_zysgz_8 mx_BaseAvatar mx_PinnedEventTile_senderAvatar _avatar-imageless_zysgz_55"
         data-color="2"
         data-testid="avatar-img"
         data-type="round"
@@ -125,7 +125,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
           type="button"
         >
           <div
-            class="_indicator-icon_zr2a0_17"
+            class="_indicator-icon_147l5_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
@@ -327,7 +327,7 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
     </svg>
   </button>
   <div
-    class="_separator_7ckbw_8"
+    class="_separator_cqpyv_8"
     data-kind="primary"
     data-orientation="horizontal"
     role="separator"
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 ffcbe3530b..25e7a01264 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_vczzf_8 mx_PinnedMessageBanner_actions"
+      class="_button_187yx_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_vczzf_8 mx_PinnedMessageBanner_actions"
+      class="_button_187yx_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_vczzf_8 mx_PinnedMessageBanner_actions"
+      class="_button_187yx_8 mx_PinnedMessageBanner_actions"
       data-kind="tertiary"
       data-size="lg"
       role="button"
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap
index 6f043991e6..dd09e7bde9 100644
--- a/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
 <div
-  class="_tooltip_6ode6_8"
+  class="_tooltip_1nqnq_8"
   data-floating-ui-focusable=""
   id="_r_6_"
   role="tooltip"
@@ -11,7 +11,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
 >
   <svg
     aria-hidden="true"
-    class="_arrow_6ode6_33"
+    class="_arrow_1nqnq_33"
     height="10"
     style="position: absolute; pointer-events: none; top: 100%; left: -1px;"
     viewBox="0 0 10 10"
@@ -38,7 +38,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
     Alice
   </span>
   <span
-    class="_caption_6ode6_28 cpd-theme-dark"
+    class="_caption_1nqnq_28 cpd-theme-dark"
     id="_r_5_"
   >
     @alice:example.org
@@ -59,7 +59,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should fall back to userId if ro
       <span
         aria-hidden="true"
         aria-live="off"
-        class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -99,7 +99,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should render 1`] = `
         aria-hidden="true"
         aria-label="Profile picture"
         aria-live="off"
-        class="_avatar_1qbcf_8 mx_BaseAvatar"
+        class="_avatar_zysgz_8 mx_BaseAvatar"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -107,7 +107,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should render 1`] = `
       >
         <img
           alt=""
-          class="_image_1qbcf_41"
+          class="_image_zysgz_43"
           data-type="round"
           height="24px"
           loading="lazy"
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
index 0f0208962e..0de553d401 100644
--- a/test/unit-tests/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
@@ -23,7 +23,7 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
   </h3>
   <p>
     <span
-      class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
       data-color="6"
       data-testid="avatar-img"
       data-type="round"
@@ -48,7 +48,7 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
   </h3>
   <p>
     <span
-      class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
       data-color="6"
       data-testid="avatar-img"
       data-type="round"
@@ -73,7 +73,7 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
   </h3>
   <p>
     <span
-      class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
       data-color="1"
       data-testid="avatar-img"
       data-type="round"
@@ -252,7 +252,7 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when client has
   </h3>
   <p>
     <span
-      class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
       data-color="6"
       data-testid="avatar-img"
       data-type="round"
@@ -310,7 +310,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
   </h3>
   <p>
     <span
-      class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
       data-color="6"
       data-testid="avatar-img"
       data-type="round"
@@ -348,7 +348,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
   </h3>
   <p>
     <span
-      class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+      class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
       data-color="6"
       data-testid="avatar-img"
       data-type="round"
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
index 25fc2f927b..a75c5829c7 100644
--- a/test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`RoomTile when message previews are enabled and there is a message in a
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -88,7 +88,7 @@ exports[`RoomTile when message previews are enabled and there is a message in th
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -170,7 +170,7 @@ exports[`RoomTile when message previews are enabled should render a room without
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
@@ -232,7 +232,7 @@ exports[`RoomTile when message previews are not enabled should render the room 1
       class="mx_DecoratedRoomAvatar"
     >
       <span
-        class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+        class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
         data-color="3"
         data-testid="avatar-img"
         data-type="round"
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
index ba19347450..81c3d70b58 100644
--- a/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
@@ -28,7 +28,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -103,7 +103,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
diff --git a/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap b/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
index cb9cb1fad0..4b5fbda763 100644
--- a/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
@@ -19,7 +19,7 @@ exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon wh
           class="mx_MemberTileView_avatar"
         >
           <span
-            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -93,7 +93,7 @@ exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon whe
           class="mx_MemberTileView_avatar"
         >
           <span
-            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -167,7 +167,7 @@ exports[`MemberTileView RoomMemberTileView should not display an E2EIcon when th
           class="mx_MemberTileView_avatar"
         >
           <span
-            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="2"
             data-testid="avatar-img"
             data-type="round"
@@ -224,7 +224,7 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
         >
           <span
             aria-hidden="true"
-            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="1"
             data-testid="avatar-img"
             data-type="round"
diff --git a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
index 557ac3f688..339a3e7d4a 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
@@ -33,11 +33,11 @@ exports[`<LayoutSwitcher /> should render 1`] = `
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
             >
               <div
-                class="_container_1e0uz_10"
+                class="_container_1qhtc_10"
               >
                 <input
                   checked=""
-                  class="_input_1e0uz_18"
+                  class="_input_1qhtc_18"
                   id="radix-_r_0_"
                   name="layout"
                   title=""
@@ -45,7 +45,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                   value="group"
                 />
                 <div
-                  class="_ui_1e0uz_19"
+                  class="_ui_1qhtc_19"
                 />
               </div>
               <span>
@@ -84,7 +84,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                   class="mx_EventTile_avatar"
                 >
                   <span
-                    class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+                    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
                     data-color="2"
                     data-testid="avatar-img"
                     data-type="round"
@@ -173,10 +173,10 @@ exports[`<LayoutSwitcher /> should render 1`] = `
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
             >
               <div
-                class="_container_1e0uz_10"
+                class="_container_1qhtc_10"
               >
                 <input
-                  class="_input_1e0uz_18"
+                  class="_input_1qhtc_18"
                   id="radix-_r_9_"
                   name="layout"
                   title=""
@@ -184,7 +184,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                   value="bubble"
                 />
                 <div
-                  class="_ui_1e0uz_19"
+                  class="_ui_1qhtc_19"
                 />
               </div>
               <span>
@@ -223,7 +223,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                   class="mx_EventTile_avatar"
                 >
                   <span
-                    class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+                    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
                     data-color="2"
                     data-testid="avatar-img"
                     data-type="round"
@@ -312,10 +312,10 @@ exports[`<LayoutSwitcher /> should render 1`] = `
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
             >
               <div
-                class="_container_1e0uz_10"
+                class="_container_1qhtc_10"
               >
                 <input
-                  class="_input_1e0uz_18"
+                  class="_input_1qhtc_18"
                   id="radix-_r_i_"
                   name="layout"
                   title=""
@@ -323,7 +323,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                   value="irc"
                 />
                 <div
-                  class="_ui_1e0uz_19"
+                  class="_ui_1qhtc_19"
                 />
               </div>
               <span>
@@ -365,7 +365,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                   class="mx_EventTile_avatar"
                 >
                   <span
-                    class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+                    class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
                     data-color="2"
                     data-testid="avatar-img"
                     data-type="round"
@@ -453,11 +453,11 @@ exports[`<LayoutSwitcher /> should render 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_19o42_10"
+              class="_container_udcm8_10"
             >
               <input
                 aria-describedby="radix-_r_s_"
-                class="_input_19o42_24"
+                class="_input_udcm8_24"
                 id="radix-_r_r_"
                 name="compactLayout"
                 role="switch"
@@ -465,7 +465,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                 type="checkbox"
               />
               <div
-                class="_ui_19o42_34"
+                class="_ui_udcm8_34"
               />
             </div>
           </div>
@@ -489,7 +489,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
       </form>
     </div>
     <div
-      class="_separator_7ckbw_8"
+      class="_separator_cqpyv_8"
       data-kind="primary"
       data-orientation="horizontal"
       role="separator"
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 a282a0d8fa..86f466cf6f 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_vczzf_8 mx_Dialog_nonDialogButton mx_PowerLevelSelector_Button"
+      class="_button_187yx_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_vczzf_8 mx_Dialog_nonDialogButton mx_PowerLevelSelector_Button"
+      class="_button_187yx_8 mx_Dialog_nonDialogButton mx_PowerLevelSelector_Button"
       data-kind="primary"
       data-size="sm"
       role="button"
diff --git a/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap
index e534bfe099..52bcc520f4 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap
@@ -49,16 +49,16 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] =
         class="_inline-field-control_19upo_44"
       >
         <div
-          class="_container_19o42_10"
+          class="_container_udcm8_10"
         >
           <input
-            class="_input_19o42_24"
+            class="_input_udcm8_24"
             id="mx_SetIntegrationManager_Toggle"
             role="switch"
             type="checkbox"
           />
           <div
-            class="_ui_19o42_34"
+            class="_ui_udcm8_34"
           />
         </div>
       </div>
diff --git a/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
index e49a1d4d43..c86e81f8c5 100644
--- a/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
@@ -28,10 +28,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_19o42_10"
+              class="_container_udcm8_10"
             >
               <input
-                class="_input_19o42_24"
+                class="_input_udcm8_24"
                 id="radix-_r_28_"
                 name="systemTheme"
                 role="switch"
@@ -39,7 +39,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
                 type="checkbox"
               />
               <div
-                class="_ui_19o42_34"
+                class="_ui_udcm8_34"
               />
             </div>
           </div>
@@ -65,11 +65,11 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1e0uz_10"
+              class="_container_1qhtc_10"
             >
               <input
                 checked=""
-                class="_input_1e0uz_18"
+                class="_input_1qhtc_18"
                 id="radix-_r_29_"
                 name="themeSelector"
                 title=""
@@ -77,7 +77,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
                 value="light"
               />
               <div
-                class="_ui_1e0uz_19"
+                class="_ui_1qhtc_19"
               />
             </div>
           </div>
@@ -99,10 +99,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1e0uz_10"
+              class="_container_1qhtc_10"
             >
               <input
-                class="_input_1e0uz_18"
+                class="_input_1qhtc_18"
                 id="radix-_r_2a_"
                 name="themeSelector"
                 title=""
@@ -110,7 +110,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
                 value="dark"
               />
               <div
-                class="_ui_1e0uz_19"
+                class="_ui_1qhtc_19"
               />
             </div>
           </div>
@@ -132,10 +132,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1e0uz_10"
+              class="_container_1qhtc_10"
             >
               <input
-                class="_input_1e0uz_18"
+                class="_input_1qhtc_18"
                 id="radix-_r_2b_"
                 name="themeSelector"
                 title=""
@@ -143,7 +143,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
                 value="light-high-contrast"
               />
               <div
-                class="_ui_1e0uz_19"
+                class="_ui_1qhtc_19"
               />
             </div>
           </div>
@@ -165,10 +165,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1e0uz_10"
+              class="_container_1qhtc_10"
             >
               <input
-                class="_input_1e0uz_18"
+                class="_input_1qhtc_18"
                 id="radix-_r_2c_"
                 name="themeSelector"
                 title=""
@@ -176,7 +176,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
                 value="custom-Alice theme"
               />
               <div
-                class="_ui_1e0uz_19"
+                class="_ui_1qhtc_19"
               />
             </div>
           </div>
@@ -249,7 +249,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
               tabindex="0"
             >
               <div
-                class="_indicator-icon_zr2a0_17"
+                class="_indicator-icon_147l5_17"
                 style="--cpd-icon-button-size: 100%;"
               >
                 <svg
@@ -270,7 +270,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
       </div>
     </div>
     <div
-      class="_separator_7ckbw_8"
+      class="_separator_cqpyv_8"
       data-kind="primary"
       data-orientation="horizontal"
       role="separator"
@@ -307,10 +307,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_19o42_10"
+              class="_container_udcm8_10"
             >
               <input
-                class="_input_19o42_24"
+                class="_input_udcm8_24"
                 id="radix-_r_10_"
                 name="systemTheme"
                 role="switch"
@@ -318,7 +318,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
                 type="checkbox"
               />
               <div
-                class="_ui_19o42_34"
+                class="_ui_udcm8_34"
               />
             </div>
           </div>
@@ -344,11 +344,11 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1e0uz_10"
+              class="_container_1qhtc_10"
             >
               <input
                 checked=""
-                class="_input_1e0uz_18"
+                class="_input_1qhtc_18"
                 id="radix-_r_11_"
                 name="themeSelector"
                 title=""
@@ -356,7 +356,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
                 value="light"
               />
               <div
-                class="_ui_1e0uz_19"
+                class="_ui_1qhtc_19"
               />
             </div>
           </div>
@@ -378,10 +378,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1e0uz_10"
+              class="_container_1qhtc_10"
             >
               <input
-                class="_input_1e0uz_18"
+                class="_input_1qhtc_18"
                 id="radix-_r_12_"
                 name="themeSelector"
                 title=""
@@ -389,7 +389,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
                 value="dark"
               />
               <div
-                class="_ui_1e0uz_19"
+                class="_ui_1qhtc_19"
               />
             </div>
           </div>
@@ -411,10 +411,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1e0uz_10"
+              class="_container_1qhtc_10"
             >
               <input
-                class="_input_1e0uz_18"
+                class="_input_1qhtc_18"
                 id="radix-_r_13_"
                 name="themeSelector"
                 title=""
@@ -422,7 +422,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
                 value="light-high-contrast"
               />
               <div
-                class="_ui_1e0uz_19"
+                class="_ui_1qhtc_19"
               />
             </div>
           </div>
@@ -444,10 +444,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1e0uz_10"
+              class="_container_1qhtc_10"
             >
               <input
-                class="_input_1e0uz_18"
+                class="_input_1qhtc_18"
                 id="radix-_r_14_"
                 name="themeSelector"
                 title=""
@@ -455,7 +455,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
                 value="custom-Alice theme"
               />
               <div
-                class="_ui_1e0uz_19"
+                class="_ui_1qhtc_19"
               />
             </div>
           </div>
@@ -528,7 +528,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
               tabindex="0"
             >
               <div
-                class="_indicator-icon_zr2a0_17"
+                class="_indicator-icon_147l5_17"
                 style="--cpd-icon-button-size: 100%;"
               >
                 <svg
@@ -549,7 +549,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
       </div>
     </div>
     <div
-      class="_separator_7ckbw_8"
+      class="_separator_cqpyv_8"
       data-kind="primary"
       data-orientation="horizontal"
       role="separator"
@@ -586,10 +586,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_19o42_10"
+              class="_container_udcm8_10"
             >
               <input
-                class="_input_19o42_24"
+                class="_input_udcm8_24"
                 id="radix-_r_0_"
                 name="systemTheme"
                 role="switch"
@@ -597,7 +597,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
                 type="checkbox"
               />
               <div
-                class="_ui_19o42_34"
+                class="_ui_udcm8_34"
               />
             </div>
           </div>
@@ -623,11 +623,11 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1e0uz_10"
+              class="_container_1qhtc_10"
             >
               <input
                 checked=""
-                class="_input_1e0uz_18"
+                class="_input_1qhtc_18"
                 id="radix-_r_1_"
                 name="themeSelector"
                 title=""
@@ -635,7 +635,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
                 value="light"
               />
               <div
-                class="_ui_1e0uz_19"
+                class="_ui_1qhtc_19"
               />
             </div>
           </div>
@@ -657,10 +657,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1e0uz_10"
+              class="_container_1qhtc_10"
             >
               <input
-                class="_input_1e0uz_18"
+                class="_input_1qhtc_18"
                 id="radix-_r_2_"
                 name="themeSelector"
                 title=""
@@ -668,7 +668,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
                 value="dark"
               />
               <div
-                class="_ui_1e0uz_19"
+                class="_ui_1qhtc_19"
               />
             </div>
           </div>
@@ -690,10 +690,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1e0uz_10"
+              class="_container_1qhtc_10"
             >
               <input
-                class="_input_1e0uz_18"
+                class="_input_1qhtc_18"
                 id="radix-_r_3_"
                 name="themeSelector"
                 title=""
@@ -701,7 +701,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
                 value="light-high-contrast"
               />
               <div
-                class="_ui_1e0uz_19"
+                class="_ui_1qhtc_19"
               />
             </div>
           </div>
@@ -719,7 +719,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
       </form>
     </div>
     <div
-      class="_separator_7ckbw_8"
+      class="_separator_cqpyv_8"
       data-kind="primary"
       data-orientation="horizontal"
       role="separator"
diff --git a/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap b/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
index 9c0a96748a..3a41085d0a 100644
--- a/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
@@ -19,19 +19,19 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1hel1_10"
+              class="_container_1md5v_10"
             >
               <input
                 aria-label="Deselect all"
                 aria-labelledby="_r_9_"
                 checked=""
-                class="_input_1hel1_18"
+                class="_input_1md5v_18"
                 data-testid="device-select-all-checkbox"
                 id="device-select-all-checkbox"
                 type="checkbox"
               />
               <div
-                class="_ui_1hel1_19"
+                class="_ui_1md5v_19"
               >
                 <svg
                   aria-hidden="true"
@@ -85,18 +85,18 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
             class="_inline-field-control_19upo_44"
           >
             <div
-              class="_container_1hel1_10"
+              class="_container_1md5v_10"
             >
               <input
                 aria-label="Select all"
                 aria-labelledby="_r_0_"
-                class="_input_1hel1_18"
+                class="_input_1md5v_18"
                 data-testid="device-select-all-checkbox"
                 id="device-select-all-checkbox"
                 type="checkbox"
               />
               <div
-                class="_ui_1hel1_19"
+                class="_ui_1md5v_19"
               >
                 <svg
                   aria-hidden="true"
diff --git a/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap b/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
index 2b585c8fc2..4cfccb6d9a 100644
--- a/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<SelectableDeviceTile /> renders selected tile 1`] = `
 <input
   checked=""
-  class="_input_1hel1_18"
+  class="_input_1md5v_18"
   data-testid="device-tile-checkbox-my-device"
   id="device-tile-checkbox-my-device"
   type="checkbox"
@@ -25,16 +25,16 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
           class="_inline-field-control_19upo_44"
         >
           <div
-            class="_container_1hel1_10"
+            class="_container_1md5v_10"
           >
             <input
-              class="_input_1hel1_18"
+              class="_input_1md5v_18"
               data-testid="device-tile-checkbox-my-device"
               id="device-tile-checkbox-my-device"
               type="checkbox"
             />
             <div
-              class="_ui_1hel1_19"
+              class="_ui_1md5v_19"
             >
               <svg
                 aria-hidden="true"
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 554adb2af1..f3b6f92ee8 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_vczzf_8 _has-icon_vczzf_57"
+      class="_button_187yx_8 _has-icon_187yx_57"
       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_vczzf_8 _has-icon_vczzf_57"
+      class="_button_187yx_8 _has-icon_187yx_57"
       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_vczzf_8 _destructive_vczzf_107"
+    class="_button_187yx_8 _destructive_187yx_107"
     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_vczzf_8 _has-icon_vczzf_57"
+      class="_button_187yx_8 _has-icon_187yx_57"
       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_vczzf_8 _has-icon_vczzf_57"
+      class="_button_187yx_8 _has-icon_187yx_57"
       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_vczzf_8 _destructive_vczzf_107"
+    class="_button_187yx_8 _destructive_187yx_107"
     data-kind="tertiary"
     data-size="sm"
     role="button"
@@ -216,12 +216,12 @@ exports[`<AdvancedPanel /> <OtherSettings /> should display the blacklist of unv
       class="_inline-field-control_19upo_44"
     >
       <div
-        class="_container_19o42_10"
+        class="_container_udcm8_10"
       >
         <input
           aria-describedby="radix-_r_7_"
           checked=""
-          class="_input_19o42_24"
+          class="_input_udcm8_24"
           id="radix-_r_6_"
           name="neverSendEncrypted"
           role="switch"
@@ -229,7 +229,7 @@ exports[`<AdvancedPanel /> <OtherSettings /> should display the blacklist of unv
           type="checkbox"
         />
         <div
-          class="_ui_19o42_34"
+          class="_ui_udcm8_34"
         />
       </div>
     </div>
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 3a018a29cb..8f6e0fed33 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
@@ -14,7 +14,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
@@ -62,7 +62,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_o77nw_8"
+        class="_content_1r8kr_8"
         data-size="large"
       >
         <svg
@@ -116,7 +116,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -140,7 +140,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
       class="mx_EncryptionCard_buttons"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_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_vczzf_8"
+        class="_button_187yx_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
@@ -176,7 +176,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
@@ -224,7 +224,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_o77nw_8"
+        class="_content_1r8kr_8"
         data-size="large"
       >
         <svg
@@ -298,7 +298,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       >
         <button
           aria-disabled="true"
-          class="_button_vczzf_8"
+          class="_button_187yx_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_vczzf_8"
+          class="_button_187yx_8"
           data-kind="tertiary"
           data-size="lg"
           role="button"
@@ -335,7 +335,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
@@ -383,7 +383,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_o77nw_8"
+        class="_content_1r8kr_8"
         data-size="large"
       >
         <svg
@@ -479,7 +479,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       >
         <button
           aria-disabled="true"
-          class="_button_vczzf_8"
+          class="_button_187yx_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_vczzf_8"
+          class="_button_187yx_8"
           data-kind="tertiary"
           data-size="lg"
           role="button"
@@ -516,7 +516,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
@@ -564,7 +564,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_o77nw_8"
+        class="_content_1r8kr_8"
         data-size="large"
       >
         <svg
@@ -597,7 +597,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
       class="mx_EncryptionCard_buttons"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_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_vczzf_8"
+        class="_button_187yx_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
@@ -633,7 +633,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
@@ -681,7 +681,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_o77nw_8"
+        class="_content_1r8kr_8"
         data-size="large"
       >
         <svg
@@ -735,7 +735,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
         tabindex="0"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -759,7 +759,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
       class="mx_EncryptionCard_buttons"
     >
       <button
-        class="_button_vczzf_8"
+        class="_button_187yx_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_vczzf_8"
+        class="_button_187yx_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 9c3547952e..d82823b1e3 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
@@ -14,7 +14,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
@@ -62,7 +62,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_o77nw_8 _destructive_o77nw_34"
+        class="_content_1r8kr_8 _destructive_1r8kr_34"
         data-size="large"
       >
         <svg
@@ -89,14 +89,14 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
     >
       Deleting key storage will remove your cryptographic identity and message keys from the server and turn off the following security features:
       <ul
-        class="_visual-list_15wzx_8"
+        class="_visual-list_1mgc1_8"
       >
         <li
-          class="_visual-list-item_1ma3e_8"
+          class="_visual-list-item_1nc1y_8"
         >
           <svg
             aria-hidden="true"
-            class="_visual-list-item-icon_1ma3e_17 _visual-list-item-icon-destructive_1ma3e_26"
+            class="_visual-list-item-icon_1nc1y_17 _visual-list-item-icon-destructive_1nc1y_26"
             fill="currentColor"
             height="24px"
             viewBox="0 0 24 24"
@@ -110,11 +110,11 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
           You will not have encrypted message history on new devices
         </li>
         <li
-          class="_visual-list-item_1ma3e_8"
+          class="_visual-list-item_1nc1y_8"
         >
           <svg
             aria-hidden="true"
-            class="_visual-list-item-icon_1ma3e_17 _visual-list-item-icon-destructive_1ma3e_26"
+            class="_visual-list-item-icon_1nc1y_17 _visual-list-item-icon-destructive_1nc1y_26"
             fill="currentColor"
             height="24px"
             viewBox="0 0 24 24"
@@ -134,7 +134,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
     >
       <button
         aria-disabled="false"
-        class="_button_vczzf_8 _destructive_vczzf_107"
+        class="_button_187yx_8 _destructive_187yx_107"
         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_vczzf_8"
+        class="_button_187yx_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
diff --git a/test/unit-tests/components/views/settings/encryption/__snapshots__/EncryptionCard-test.tsx.snap b/test/unit-tests/components/views/settings/encryption/__snapshots__/EncryptionCard-test.tsx.snap
index b5929d2ebb..3c72479607 100644
--- a/test/unit-tests/components/views/settings/encryption/__snapshots__/EncryptionCard-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/encryption/__snapshots__/EncryptionCard-test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<EncryptionCard /> should render 1`] = `
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_o77nw_8"
+        class="_content_1r8kr_8"
         data-size="large"
       >
         <svg
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 05cd68870b..1a79467c60 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_vczzf_8 _has-icon_vczzf_57"
+      class="_button_187yx_8 _has-icon_187yx_57"
       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_vczzf_8 _has-icon_vczzf_57"
+      class="_button_187yx_8 _has-icon_187yx_57"
       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 e7537f728b..a6d26193a0 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_vczzf_8"
+        class="_button_187yx_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_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         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 d8ca41b492..84ea93adfa 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
@@ -14,7 +14,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
@@ -62,7 +62,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_o77nw_8 _destructive_o77nw_34"
+        class="_content_1r8kr_8 _destructive_1r8kr_34"
         data-size="large"
       >
         <svg
@@ -88,14 +88,14 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <ul
-        class="_visual-list_15wzx_8"
+        class="_visual-list_1mgc1_8"
       >
         <li
-          class="_visual-list-item_1ma3e_8"
+          class="_visual-list-item_1nc1y_8"
         >
           <svg
             aria-hidden="true"
-            class="_visual-list-item-icon_1ma3e_17 _visual-list-item-icon-success_1ma3e_22"
+            class="_visual-list-item-icon_1nc1y_17 _visual-list-item-icon-success_1nc1y_22"
             fill="currentColor"
             height="24px"
             viewBox="0 0 24 24"
@@ -109,11 +109,11 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
           Your account details, contacts, preferences, and chat list will be kept
         </li>
         <li
-          class="_visual-list-item_1ma3e_8"
+          class="_visual-list-item_1nc1y_8"
         >
           <svg
             aria-hidden="true"
-            class="_visual-list-item-icon_1ma3e_17"
+            class="_visual-list-item-icon_1nc1y_17"
             fill="currentColor"
             height="24px"
             viewBox="0 0 24 24"
@@ -132,11 +132,11 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
           You will lose any message history that’s stored only on the server
         </li>
         <li
-          class="_visual-list-item_1ma3e_8"
+          class="_visual-list-item_1nc1y_8"
         >
           <svg
             aria-hidden="true"
-            class="_visual-list-item-icon_1ma3e_17"
+            class="_visual-list-item-icon_1nc1y_17"
             fill="currentColor"
             height="24px"
             viewBox="0 0 24 24"
@@ -161,7 +161,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
     >
       <button
         aria-disabled="false"
-        class="_button_vczzf_8 _destructive_vczzf_107"
+        class="_button_187yx_8 _destructive_187yx_107"
         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_vczzf_8"
+        class="_button_187yx_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
@@ -197,7 +197,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
@@ -245,7 +245,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_o77nw_8 _destructive_o77nw_34"
+        class="_content_1r8kr_8 _destructive_1r8kr_34"
         data-size="large"
       >
         <svg
@@ -271,14 +271,14 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <ul
-        class="_visual-list_15wzx_8"
+        class="_visual-list_1mgc1_8"
       >
         <li
-          class="_visual-list-item_1ma3e_8"
+          class="_visual-list-item_1nc1y_8"
         >
           <svg
             aria-hidden="true"
-            class="_visual-list-item-icon_1ma3e_17 _visual-list-item-icon-success_1ma3e_22"
+            class="_visual-list-item-icon_1nc1y_17 _visual-list-item-icon-success_1nc1y_22"
             fill="currentColor"
             height="24px"
             viewBox="0 0 24 24"
@@ -292,11 +292,11 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
           Your account details, contacts, preferences, and chat list will be kept
         </li>
         <li
-          class="_visual-list-item_1ma3e_8"
+          class="_visual-list-item_1nc1y_8"
         >
           <svg
             aria-hidden="true"
-            class="_visual-list-item-icon_1ma3e_17"
+            class="_visual-list-item-icon_1nc1y_17"
             fill="currentColor"
             height="24px"
             viewBox="0 0 24 24"
@@ -315,11 +315,11 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
           You will lose any message history that’s stored only on the server
         </li>
         <li
-          class="_visual-list-item_1ma3e_8"
+          class="_visual-list-item_1nc1y_8"
         >
           <svg
             aria-hidden="true"
-            class="_visual-list-item-icon_1ma3e_17"
+            class="_visual-list-item-icon_1nc1y_17"
             fill="currentColor"
             height="24px"
             viewBox="0 0 24 24"
@@ -344,7 +344,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
     >
       <button
         aria-disabled="false"
-        class="_button_vczzf_8 _destructive_vczzf_107"
+        class="_button_187yx_8 _destructive_187yx_107"
         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_vczzf_8"
+        class="_button_187yx_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
@@ -380,7 +380,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
@@ -428,7 +428,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_o77nw_8 _destructive_o77nw_34"
+        class="_content_1r8kr_8 _destructive_1r8kr_34"
         data-size="large"
       >
         <svg
@@ -454,14 +454,14 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <ul
-        class="_visual-list_15wzx_8"
+        class="_visual-list_1mgc1_8"
       >
         <li
-          class="_visual-list-item_1ma3e_8"
+          class="_visual-list-item_1nc1y_8"
         >
           <svg
             aria-hidden="true"
-            class="_visual-list-item-icon_1ma3e_17 _visual-list-item-icon-success_1ma3e_22"
+            class="_visual-list-item-icon_1nc1y_17 _visual-list-item-icon-success_1nc1y_22"
             fill="currentColor"
             height="24px"
             viewBox="0 0 24 24"
@@ -475,11 +475,11 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
           Your account details, contacts, preferences, and chat list will be kept
         </li>
         <li
-          class="_visual-list-item_1ma3e_8"
+          class="_visual-list-item_1nc1y_8"
         >
           <svg
             aria-hidden="true"
-            class="_visual-list-item-icon_1ma3e_17"
+            class="_visual-list-item-icon_1nc1y_17"
             fill="currentColor"
             height="24px"
             viewBox="0 0 24 24"
@@ -498,11 +498,11 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
           You will lose any message history that’s stored only on the server
         </li>
         <li
-          class="_visual-list-item_1ma3e_8"
+          class="_visual-list-item_1nc1y_8"
         >
           <svg
             aria-hidden="true"
-            class="_visual-list-item-icon_1ma3e_17"
+            class="_visual-list-item-icon_1nc1y_17"
             fill="currentColor"
             height="24px"
             viewBox="0 0 24 24"
@@ -530,7 +530,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
     >
       <button
         aria-disabled="false"
-        class="_button_vczzf_8 _destructive_vczzf_107"
+        class="_button_187yx_8 _destructive_187yx_107"
         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_vczzf_8"
+        class="_button_187yx_8"
         data-kind="tertiary"
         data-size="lg"
         role="button"
@@ -566,7 +566,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       tabindex="0"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
@@ -614,7 +614,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       class="mx_EncryptionCard_header"
     >
       <div
-        class="_content_o77nw_8 _destructive_o77nw_34"
+        class="_content_1r8kr_8 _destructive_1r8kr_34"
         data-size="large"
       >
         <svg
@@ -640,14 +640,14 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <ul
-        class="_visual-list_15wzx_8"
+        class="_visual-list_1mgc1_8"
       >
         <li
-          class="_visual-list-item_1ma3e_8"
+          class="_visual-list-item_1nc1y_8"
         >
           <svg
             aria-hidden="true"
-            class="_visual-list-item-icon_1ma3e_17 _visual-list-item-icon-success_1ma3e_22"
+            class="_visual-list-item-icon_1nc1y_17 _visual-list-item-icon-success_1nc1y_22"
             fill="currentColor"
             height="24px"
             viewBox="0 0 24 24"
@@ -661,11 +661,11 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
           Your account details, contacts, preferences, and chat list will be kept
         </li>
         <li
-          class="_visual-list-item_1ma3e_8"
+          class="_visual-list-item_1nc1y_8"
         >
           <svg
             aria-hidden="true"
-            class="_visual-list-item-icon_1ma3e_17"
+            class="_visual-list-item-icon_1nc1y_17"
             fill="currentColor"
             height="24px"
             viewBox="0 0 24 24"
@@ -684,11 +684,11 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
           You will lose any message history that’s stored only on the server
         </li>
         <li
-          class="_visual-list-item_1ma3e_8"
+          class="_visual-list-item_1nc1y_8"
         >
           <svg
             aria-hidden="true"
-            class="_visual-list-item-icon_1ma3e_17"
+            class="_visual-list-item-icon_1nc1y_17"
             fill="currentColor"
             height="24px"
             viewBox="0 0 24 24"
@@ -716,7 +716,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
     >
       <button
         aria-disabled="true"
-        class="_button_vczzf_8 _destructive_vczzf_107"
+        class="_button_187yx_8 _destructive_187yx_107"
         data-kind="primary"
         data-size="lg"
         role="button"
diff --git a/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap b/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
index 3f67ad12af..04b6501f8a 100644
--- a/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
@@ -245,17 +245,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         disabled=""
                         id="checkbox_vY7Q4uEh9K"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -302,17 +302,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         disabled=""
                         id="checkbox_38QgU2Pomx"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -359,17 +359,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         disabled=""
                         id="checkbox_wKpa6hpi3Y"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -433,17 +433,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         disabled=""
                         id="checkbox_EetmBG4yVC"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -490,16 +490,16 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         disabled=""
                         id="checkbox_eEefiPqpMR"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -546,17 +546,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         disabled=""
                         id="checkbox_MwbPDmfGtm"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -641,17 +641,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         disabled=""
                         id="checkbox_GQvdMWe954"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -698,17 +698,17 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         disabled=""
                         id="checkbox_DVIAu5CsiH"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -755,18 +755,18 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         aria-describedby="_r_24_"
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         disabled=""
                         id="checkbox_RD7nyrA2oh"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -1219,16 +1219,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         id="checkbox_pWwAHG75JN"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -1275,16 +1275,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         id="checkbox_TNkNU64raT"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -1331,16 +1331,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         id="checkbox_LcRsQRlYy7"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -1404,16 +1404,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         id="checkbox_5nfv5bOEPN"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -1460,15 +1460,15 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         id="checkbox_1su1JYVtOy"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -1515,16 +1515,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         id="checkbox_R5kbu3pEwu"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -1609,16 +1609,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         id="checkbox_Ln9EnnYuxf"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -1665,16 +1665,16 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         id="checkbox_FEpOsztWhQ"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -1721,17 +1721,17 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         aria-describedby="_r_t_"
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         id="checkbox_kBerF1ejc4"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -2135,15 +2135,15 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1hel1_10"
+                        class="_container_1md5v_10"
                       >
                         <input
-                          class="_input_1hel1_18"
+                          class="_input_1md5v_18"
                           id="checkbox_GFes1UFzOK"
                           type="checkbox"
                         />
                         <div
-                          class="_ui_1hel1_19"
+                          class="_ui_1md5v_19"
                         >
                           <svg
                             aria-hidden="true"
diff --git a/test/unit-tests/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
index d5694eec6d..e9dcae3c93 100644
--- a/test/unit-tests/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap
@@ -17,7 +17,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
     >
       <span
         aria-label="Profile picture"
-        class="_avatar_1qbcf_8 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar"
+        class="_avatar_zysgz_8 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"
@@ -26,7 +26,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
       >
         <img
           alt=""
-          class="_image_1qbcf_41"
+          class="_image_zysgz_43"
           data-type="round"
           height="42px"
           loading="lazy"
@@ -123,7 +123,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
       class="mx_PeopleRoomSettingsTab_knock"
     >
       <span
-        class="_avatar_1qbcf_8 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar _avatar-imageless_1qbcf_52"
+        class="_avatar_zysgz_8 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar _avatar-imageless_zysgz_55"
         data-color="4"
         data-testid="avatar-img"
         data-type="round"
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
index 8391ea25d1..5ad2eb43f7 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
@@ -41,10 +41,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1e0uz_10"
+                      class="_container_1qhtc_10"
                     >
                       <input
-                        class="_input_1e0uz_18"
+                        class="_input_1qhtc_18"
                         disabled=""
                         id="radix-_r_0_"
                         name="themeSelector"
@@ -53,7 +53,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                         value="light"
                       />
                       <div
-                        class="_ui_1e0uz_19"
+                        class="_ui_1qhtc_19"
                       />
                     </div>
                   </div>
@@ -75,10 +75,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1e0uz_10"
+                      class="_container_1qhtc_10"
                     >
                       <input
-                        class="_input_1e0uz_18"
+                        class="_input_1qhtc_18"
                         disabled=""
                         id="radix-_r_1_"
                         name="themeSelector"
@@ -87,7 +87,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                         value="dark"
                       />
                       <div
-                        class="_ui_1e0uz_19"
+                        class="_ui_1qhtc_19"
                       />
                     </div>
                   </div>
@@ -109,10 +109,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1e0uz_10"
+                      class="_container_1qhtc_10"
                     >
                       <input
-                        class="_input_1e0uz_18"
+                        class="_input_1qhtc_18"
                         disabled=""
                         id="radix-_r_2_"
                         name="themeSelector"
@@ -121,7 +121,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                         value="light-high-contrast"
                       />
                       <div
-                        class="_ui_1e0uz_19"
+                        class="_ui_1qhtc_19"
                       />
                     </div>
                   </div>
@@ -139,7 +139,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
               </form>
             </div>
             <div
-              class="_separator_7ckbw_8"
+              class="_separator_cqpyv_8"
               data-kind="primary"
               data-orientation="horizontal"
               role="separator"
@@ -176,11 +176,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
                     >
                       <div
-                        class="_container_1e0uz_10"
+                        class="_container_1qhtc_10"
                       >
                         <input
                           checked=""
-                          class="_input_1e0uz_18"
+                          class="_input_1qhtc_18"
                           id="radix-_r_3_"
                           name="layout"
                           title=""
@@ -188,7 +188,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                           value="group"
                         />
                         <div
-                          class="_ui_1e0uz_19"
+                          class="_ui_1qhtc_19"
                         />
                       </div>
                       <span>
@@ -227,7 +227,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                           class="mx_EventTile_avatar"
                         >
                           <span
-                            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+                            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
                             data-color="2"
                             data-testid="avatar-img"
                             data-type="round"
@@ -316,10 +316,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
                     >
                       <div
-                        class="_container_1e0uz_10"
+                        class="_container_1qhtc_10"
                       >
                         <input
-                          class="_input_1e0uz_18"
+                          class="_input_1qhtc_18"
                           id="radix-_r_c_"
                           name="layout"
                           title=""
@@ -327,7 +327,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                           value="bubble"
                         />
                         <div
-                          class="_ui_1e0uz_19"
+                          class="_ui_1qhtc_19"
                         />
                       </div>
                       <span>
@@ -366,7 +366,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                           class="mx_EventTile_avatar"
                         >
                           <span
-                            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+                            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
                             data-color="2"
                             data-testid="avatar-img"
                             data-type="round"
@@ -455,10 +455,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
                     >
                       <div
-                        class="_container_1e0uz_10"
+                        class="_container_1qhtc_10"
                       >
                         <input
-                          class="_input_1e0uz_18"
+                          class="_input_1qhtc_18"
                           id="radix-_r_l_"
                           name="layout"
                           title=""
@@ -466,7 +466,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                           value="irc"
                         />
                         <div
-                          class="_ui_1e0uz_19"
+                          class="_ui_1qhtc_19"
                         />
                       </div>
                       <span>
@@ -508,7 +508,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                           class="mx_EventTile_avatar"
                         >
                           <span
-                            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+                            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
                             data-color="2"
                             data-testid="avatar-img"
                             data-type="round"
@@ -596,11 +596,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_19o42_10"
+                      class="_container_udcm8_10"
                     >
                       <input
                         aria-describedby="radix-_r_v_"
-                        class="_input_19o42_24"
+                        class="_input_udcm8_24"
                         id="radix-_r_u_"
                         name="compactLayout"
                         role="switch"
@@ -608,7 +608,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                         type="checkbox"
                       />
                       <div
-                        class="_ui_19o42_34"
+                        class="_ui_udcm8_34"
                       />
                     </div>
                   </div>
@@ -632,7 +632,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
               </form>
             </div>
             <div
-              class="_separator_7ckbw_8"
+              class="_separator_cqpyv_8"
               data-kind="primary"
               data-orientation="horizontal"
               role="separator"
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 c46b0e4e46..a3dc5dfecf 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_vczzf_8 _has-icon_vczzf_57"
+          class="_button_187yx_8 _has-icon_187yx_57"
           data-kind="primary"
           data-size="sm"
           role="button"
@@ -128,7 +128,7 @@ exports[`<EncryptionUserSettingsTab /> should display the recovery out of sync p
           class="mx_RecoveryPanelOutOfSync"
         >
           <button
-            class="_button_vczzf_8"
+            class="_button_187yx_8"
             data-kind="secondary"
             data-size="sm"
             role="button"
@@ -137,7 +137,7 @@ exports[`<EncryptionUserSettingsTab /> should display the recovery out of sync p
             Forgot recovery key?
           </button>
           <button
-            class="_button_vczzf_8 _has-icon_vczzf_57"
+            class="_button_187yx_8 _has-icon_187yx_57"
             data-kind="primary"
             data-size="sm"
             role="button"
@@ -185,7 +185,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
           tabindex="0"
         >
           <div
-            class="_indicator-icon_zr2a0_17"
+            class="_indicator-icon_147l5_17"
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
@@ -233,7 +233,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
           class="mx_EncryptionCard_header"
         >
           <div
-            class="_content_o77nw_8 _destructive_o77nw_34"
+            class="_content_1r8kr_8 _destructive_1r8kr_34"
             data-size="large"
           >
             <svg
@@ -259,14 +259,14 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
         >
           <ul
-            class="_visual-list_15wzx_8"
+            class="_visual-list_1mgc1_8"
           >
             <li
-              class="_visual-list-item_1ma3e_8"
+              class="_visual-list-item_1nc1y_8"
             >
               <svg
                 aria-hidden="true"
-                class="_visual-list-item-icon_1ma3e_17 _visual-list-item-icon-success_1ma3e_22"
+                class="_visual-list-item-icon_1nc1y_17 _visual-list-item-icon-success_1nc1y_22"
                 fill="currentColor"
                 height="24px"
                 viewBox="0 0 24 24"
@@ -280,11 +280,11 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
               Your account details, contacts, preferences, and chat list will be kept
             </li>
             <li
-              class="_visual-list-item_1ma3e_8"
+              class="_visual-list-item_1nc1y_8"
             >
               <svg
                 aria-hidden="true"
-                class="_visual-list-item-icon_1ma3e_17"
+                class="_visual-list-item-icon_1nc1y_17"
                 fill="currentColor"
                 height="24px"
                 viewBox="0 0 24 24"
@@ -303,11 +303,11 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
               You will lose any message history that’s stored only on the server
             </li>
             <li
-              class="_visual-list-item_1ma3e_8"
+              class="_visual-list-item_1nc1y_8"
             >
               <svg
                 aria-hidden="true"
-                class="_visual-list-item-icon_1ma3e_17"
+                class="_visual-list-item-icon_1nc1y_17"
                 fill="currentColor"
                 height="24px"
                 viewBox="0 0 24 24"
@@ -335,7 +335,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
         >
           <button
             aria-disabled="false"
-            class="_button_vczzf_8 _destructive_vczzf_107"
+            class="_button_187yx_8 _destructive_187yx_107"
             data-kind="primary"
             data-size="lg"
             role="button"
@@ -344,7 +344,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
             Continue
           </button>
           <button
-            class="_button_vczzf_8"
+            class="_button_187yx_8"
             data-kind="tertiary"
             data-size="lg"
             role="button"
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
index 6fb3eec888..e298e13b7c 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
@@ -1220,15 +1220,15 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1e0uz_10"
+                        class="_container_1qhtc_10"
                       >
                         <input
-                          class="_input_1e0uz_18"
+                          class="_input_1qhtc_18"
                           id="mx_media_previews_off"
                           type="radio"
                         />
                         <div
-                          class="_ui_1e0uz_19"
+                          class="_ui_1qhtc_19"
                         />
                       </div>
                     </div>
@@ -1250,15 +1250,15 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1e0uz_10"
+                        class="_container_1qhtc_10"
                       >
                         <input
-                          class="_input_1e0uz_18"
+                          class="_input_1qhtc_18"
                           id="mx_media_previews_private"
                           type="radio"
                         />
                         <div
-                          class="_ui_1e0uz_19"
+                          class="_ui_1qhtc_19"
                         />
                       </div>
                     </div>
@@ -1280,16 +1280,16 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       class="_inline-field-control_19upo_44"
                     >
                       <div
-                        class="_container_1e0uz_10"
+                        class="_container_1qhtc_10"
                       >
                         <input
                           checked=""
-                          class="_input_1e0uz_18"
+                          class="_input_1qhtc_18"
                           id="mx_media_previews_on"
                           type="radio"
                         />
                         <div
-                          class="_ui_1e0uz_19"
+                          class="_ui_1qhtc_19"
                         />
                       </div>
                     </div>
@@ -1338,7 +1338,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               </form>
             </div>
             <div
-              class="_separator_7ckbw_8"
+              class="_separator_cqpyv_8"
               data-kind="primary"
               data-orientation="horizontal"
               role="separator"
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
index 9686d1b9e7..1f0a6cb75e 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
@@ -82,17 +82,17 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
               class="_inline-field-control_19upo_44"
             >
               <div
-                class="_container_19o42_10"
+                class="_container_udcm8_10"
               >
                 <input
                   checked=""
-                  class="_input_19o42_24"
+                  class="_input_udcm8_24"
                   id="mx_SetIntegrationManager_Toggle"
                   role="switch"
                   type="checkbox"
                 />
                 <div
-                  class="_ui_19o42_34"
+                  class="_ui_udcm8_34"
                 />
               </div>
             </div>
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index a0d4a13c70..c9fb4869db 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -393,18 +393,18 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
           class="_inline-field-control_19upo_44"
         >
           <div
-            class="_container_1hel1_10"
+            class="_container_1md5v_10"
           >
             <input
               aria-label="Select all"
               aria-labelledby="_r_4q_"
-              class="_input_1hel1_18"
+              class="_input_1md5v_18"
               data-testid="device-select-all-checkbox"
               id="device-select-all-checkbox"
               type="checkbox"
             />
             <div
-              class="_ui_1hel1_19"
+              class="_ui_1md5v_19"
             >
               <svg
                 aria-hidden="true"
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
index 9305a55f2e..891213fe1b 100644
--- a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
@@ -48,18 +48,18 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         aria-describedby="_r_1_"
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         disabled=""
                         id="checkbox_vY7Q4uEh9K"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -116,17 +116,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         aria-describedby="_r_5_"
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                         id="checkbox_38QgU2Pomx"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -171,16 +171,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         aria-describedby="_r_9_"
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         id="checkbox_wKpa6hpi3Y"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -225,16 +225,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         aria-describedby="_r_d_"
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         id="checkbox_EetmBG4yVC"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -338,18 +338,18 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         aria-describedby="_r_h_"
                         checked=""
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         disabled=""
                         id="checkbox_vY7Q4uEh9K"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -406,17 +406,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         aria-describedby="_r_l_"
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                         id="checkbox_38QgU2Pomx"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -461,16 +461,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         aria-describedby="_r_p_"
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         id="checkbox_wKpa6hpi3Y"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
@@ -515,16 +515,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     class="_inline-field-control_19upo_44"
                   >
                     <div
-                      class="_container_1hel1_10"
+                      class="_container_1md5v_10"
                     >
                       <input
                         aria-describedby="_r_t_"
-                        class="_input_1hel1_18"
+                        class="_input_1md5v_18"
                         id="checkbox_EetmBG4yVC"
                         type="checkbox"
                       />
                       <div
-                        class="_ui_1hel1_19"
+                        class="_ui_1md5v_19"
                       >
                         <svg
                           aria-hidden="true"
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
index ae20276470..36ebccb871 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
@@ -27,7 +27,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
         >
           <span
             aria-label="Avatar"
-            class="_avatar_1qbcf_8 mx_BaseAvatar"
+            class="_avatar_zysgz_8 mx_BaseAvatar"
             data-color="2"
             data-testid="avatar-img"
             data-type="square"
@@ -35,7 +35,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
           >
             <img
               alt=""
-              class="_image_1qbcf_41"
+              class="_image_zysgz_43"
               data-type="square"
               height="40px"
               loading="lazy"
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/QuickSettingsButton-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/QuickSettingsButton-test.tsx.snap
index c1e8027d2b..a944c2173c 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/QuickSettingsButton-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/QuickSettingsButton-test.tsx.snap
@@ -13,7 +13,7 @@ exports[`QuickSettingsButton should render the quick settings button in expanded
     tabindex="0"
   >
     <div
-      class="_indicator-icon_zr2a0_17"
+      class="_indicator-icon_147l5_17"
       style="--cpd-icon-button-size: 100%;"
     >
       <svg
diff --git a/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap b/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
index 1b15e90960..c6fdc70948 100644
--- a/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
+++ b/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
@@ -25,7 +25,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
           class="mx_UserMenu_userAvatar"
         >
           <span
-            class="_avatar_1qbcf_8 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar mx_UserMenu_userAvatar_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="5"
             data-testid="avatar-img"
             data-type="round"
@@ -248,7 +248,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         type="button"
       >
         <div
-          class="_indicator-icon_zr2a0_17"
+          class="_indicator-icon_147l5_17"
           style="--cpd-icon-button-size: 100%;"
         >
           <svg
@@ -278,7 +278,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
       title="Quick settings"
     >
       <div
-        class="_indicator-icon_zr2a0_17"
+        class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
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 3214cc3085..38e5fcede0 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
@@ -37,7 +37,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         class="_icon_dyt4i_50"
       >
         <span
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="3"
           data-testid="avatar-img"
           data-type="round"
@@ -85,7 +85,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         class="_icon_dyt4i_50"
       >
         <span
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="2"
           data-testid="avatar-img"
           data-type="round"
@@ -196,7 +196,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         class="_icon_dyt4i_50"
       >
         <span
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="5"
           data-testid="avatar-img"
           data-type="round"
@@ -244,7 +244,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         class="_icon_dyt4i_50"
       >
         <span
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="3"
           data-testid="avatar-img"
           data-type="round"
@@ -292,7 +292,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         class="_icon_dyt4i_50"
       >
         <span
-          class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+          class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
           data-color="4"
           data-testid="avatar-img"
           data-type="round"
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 6c2d07c5e0..cf523ee745 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_vczzf_8"
+        class="_button_187yx_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_vczzf_8"
+        class="_button_187yx_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_vczzf_8"
+        class="_button_187yx_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_vczzf_8"
+        class="_button_187yx_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 e4ba317980..98946f5f37 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_vczzf_8"
+        class="_button_187yx_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_vczzf_8"
+        class="_button_187yx_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_vczzf_8"
+        class="_button_187yx_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_vczzf_8"
+        class="_button_187yx_8"
         data-kind="primary"
         data-size="sm"
         role="button"
diff --git a/test/unit-tests/renderer/__snapshots__/pill-test.tsx.snap b/test/unit-tests/renderer/__snapshots__/pill-test.tsx.snap
index ecbb75ab02..a2f21d6ece 100644
--- a/test/unit-tests/renderer/__snapshots__/pill-test.tsx.snap
+++ b/test/unit-tests/renderer/__snapshots__/pill-test.tsx.snap
@@ -48,7 +48,7 @@ exports[`mention pills should pillify @room 1`] = `
         >
           <span
             aria-hidden="true"
-            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="4"
             data-testid="avatar-img"
             data-type="round"
@@ -81,7 +81,7 @@ exports[`mention pills should pillify @room in an intentional mentions world 1`]
         >
           <span
             aria-hidden="true"
-            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
+            class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
             data-color="4"
             data-testid="avatar-img"
             data-type="round"
diff --git a/test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap b/test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
index 62a95dc664..a1ddb2b88c 100644
--- a/test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
+++ b/test/unit-tests/toasts/__snapshots__/UnverifiedSessionToast-test.tsx.snap
@@ -50,7 +50,7 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
               class="mx_Toast_buttons"
             >
               <button
-                class="_button_vczzf_8 _destructive_vczzf_107"
+                class="_button_187yx_8 _destructive_187yx_107"
                 data-kind="secondary"
                 data-size="sm"
                 role="button"
@@ -59,7 +59,7 @@ exports[`UnverifiedSessionToast when rendering the toast should render as expect
                 No
               </button>
               <button
-                class="_button_vczzf_8"
+                class="_button_187yx_8"
                 data-kind="primary"
                 data-size="sm"
                 role="button"
diff --git a/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
index 127a5f56a8..550d25ea7d 100644
--- a/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
+++ b/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
@@ -18,7 +18,7 @@ exports[`HTMLExport should export 1`] = `
                         <div class="mx_MatrixChat">
                         <main class="mx_RoomView">
                             <div class="mx_RoomHeader light-panel">
-                                <span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size:32px">!</span>
+                                <span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size:32px">!</span>
                                 <div class="mx_RoomHeader_infoWrapper">
                                     <div
                                         dir="auto"
@@ -51,13 +51,13 @@ exports[`HTMLExport should export 1`] = `
                                         role="list"
                                     >
                                     <div class="mx_NewRoomIntro">
-                                            <span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size:32px">!</span>
+                                            <span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size:32px">!</span>
                                             <h2> !myroom:example.org </h2>
                                             <p>  created this room. <br/><br/> <p><span>This is the start of export of <strong>!myroom:example.org</strong>. Exported by <a href="https://matrix.to/#/%40userId%3Amatrix.org" target="_blank" rel="noopener noreferrer"><strong>@userId:matrix.org</strong></a> at 11/17/2022.</span></p> </p>
                                             <br/>
                                             <p>  </p>
                                         </div>
-                                    <li><div class="mx_TimelineSeparator" role="separator" aria-label="Thu, Jan 1, 1970"><hr role="none"/><div class="mx_DateSeparator_dateContent"><h2 class="mx_DateSeparator_dateHeading" aria-hidden="true">Thu, Jan 1, 1970</h2></div><hr role="none"/></div></li><div class="mx_Export_EventWrapper" id="49"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="49" data-layout="group" data-self="false" data-event-id="49" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user49:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user49:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="1" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/49" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #49</div></div></div></li></div><div class="mx_Export_EventWrapper" id="48"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="48" data-layout="group" data-self="false" data-event-id="48" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user48:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user48:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="2" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/48" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #48</div></div></div></li></div><div class="mx_Export_EventWrapper" id="47"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="47" data-layout="group" data-self="false" data-event-id="47" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user47:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user47:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="3" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/47" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #47</div></div></div></li></div><div class="mx_Export_EventWrapper" id="46"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="46" data-layout="group" data-self="false" data-event-id="46" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user46:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user46:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="4" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/46" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #46</div></div></div></li></div><div class="mx_Export_EventWrapper" id="45"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="45" data-layout="group" data-self="false" data-event-id="45" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user45:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user45:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="5" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/45" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #45</div></div></div></li></div><div class="mx_Export_EventWrapper" id="44"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="44" data-layout="group" data-self="false" data-event-id="44" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user44:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user44:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="6" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/44" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #44</div></div></div></li></div><div class="mx_Export_EventWrapper" id="43"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="43" data-layout="group" data-self="false" data-event-id="43" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user43:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user43:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="7" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/43" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #43</div></div></div></li></div><div class="mx_Export_EventWrapper" id="42"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="42" data-layout="group" data-self="false" data-event-id="42" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user42:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user42:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="8" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/42" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #42</div></div></div></li></div><div class="mx_Export_EventWrapper" id="41"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="41" data-layout="group" data-self="false" data-event-id="41" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user41:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user41:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="9" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/41" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #41</div></div></div></li></div><div class="mx_Export_EventWrapper" id="40"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="40" data-layout="group" data-self="false" data-event-id="40" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user40:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user40:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="10" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/40" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #40</div></div></div></li></div><div class="mx_Export_EventWrapper" id="39"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="39" data-layout="group" data-self="false" data-event-id="39" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user39:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user39:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="11" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/39" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #39</div></div></div></li></div><div class="mx_Export_EventWrapper" id="38"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="38" data-layout="group" data-self="false" data-event-id="38" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user38:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user38:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="12" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/38" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #38</div></div></div></li></div><div class="mx_Export_EventWrapper" id="37"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="37" data-layout="group" data-self="false" data-event-id="37" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user37:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user37:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="13" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/37" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #37</div></div></div></li></div><div class="mx_Export_EventWrapper" id="36"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="36" data-layout="group" data-self="false" data-event-id="36" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user36:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user36:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="14" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/36" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #36</div></div></div></li></div><div class="mx_Export_EventWrapper" id="35"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="35" data-layout="group" data-self="false" data-event-id="35" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user35:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user35:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="15" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/35" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #35</div></div></div></li></div><div class="mx_Export_EventWrapper" id="34"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="34" data-layout="group" data-self="false" data-event-id="34" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user34:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user34:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="16" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/34" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #34</div></div></div></li></div><div class="mx_Export_EventWrapper" id="33"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="33" data-layout="group" data-self="false" data-event-id="33" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user33:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user33:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="17" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/33" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #33</div></div></div></li></div><div class="mx_Export_EventWrapper" id="32"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="32" data-layout="group" data-self="false" data-event-id="32" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user32:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user32:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="18" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/32" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #32</div></div></div></li></div><div class="mx_Export_EventWrapper" id="31"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="31" data-layout="group" data-self="false" data-event-id="31" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user31:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user31:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="19" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/31" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #31</div></div></div></li></div><div class="mx_Export_EventWrapper" id="30"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="30" data-layout="group" data-self="false" data-event-id="30" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user30:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user30:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="20" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/30" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #30</div></div></div></li></div><div class="mx_Export_EventWrapper" id="29"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="29" data-layout="group" data-self="false" data-event-id="29" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user29:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user29:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="21" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/29" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #29</div></div></div></li></div><div class="mx_Export_EventWrapper" id="28"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="28" data-layout="group" data-self="false" data-event-id="28" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user28:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user28:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="22" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/28" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #28</div></div></div></li></div><div class="mx_Export_EventWrapper" id="27"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="27" data-layout="group" data-self="false" data-event-id="27" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user27:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user27:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="23" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/27" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #27</div></div></div></li></div><div class="mx_Export_EventWrapper" id="26"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="26" data-layout="group" data-self="false" data-event-id="26" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user26:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user26:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="24" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/26" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #26</div></div></div></li></div><div class="mx_Export_EventWrapper" id="25"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="25" data-layout="group" data-self="false" data-event-id="25" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user25:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user25:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="25" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/25" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #25</div></div></div></li></div><div class="mx_Export_EventWrapper" id="24"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="24" data-layout="group" data-self="false" data-event-id="24" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user24:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user24:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="26" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/24" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #24</div></div></div></li></div><div class="mx_Export_EventWrapper" id="23"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="23" data-layout="group" data-self="false" data-event-id="23" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user23:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user23:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="27" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/23" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #23</div></div></div></li></div><div class="mx_Export_EventWrapper" id="22"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="22" data-layout="group" data-self="false" data-event-id="22" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user22:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user22:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="28" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/22" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #22</div></div></div></li></div><div class="mx_Export_EventWrapper" id="21"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="21" data-layout="group" data-self="false" data-event-id="21" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user21:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user21:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="29" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/21" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #21</div></div></div></li></div><div class="mx_Export_EventWrapper" id="20"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="20" data-layout="group" data-self="false" data-event-id="20" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user20:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user20:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="30" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/20" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #20</div></div></div></li></div><div class="mx_Export_EventWrapper" id="19"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="19" data-layout="group" data-self="false" data-event-id="19" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user19:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user19:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="31" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/19" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #19</div></div></div></li></div><div class="mx_Export_EventWrapper" id="18"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="18" data-layout="group" data-self="false" data-event-id="18" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user18:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user18:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="32" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/18" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #18</div></div></div></li></div><div class="mx_Export_EventWrapper" id="17"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="17" data-layout="group" data-self="false" data-event-id="17" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user17:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user17:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="33" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/17" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #17</div></div></div></li></div><div class="mx_Export_EventWrapper" id="16"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="16" data-layout="group" data-self="false" data-event-id="16" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user16:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user16:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="34" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/16" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #16</div></div></div></li></div><div class="mx_Export_EventWrapper" id="15"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="15" data-layout="group" data-self="false" data-event-id="15" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user15:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user15:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="35" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/15" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #15</div></div></div></li></div><div class="mx_Export_EventWrapper" id="14"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="14" data-layout="group" data-self="false" data-event-id="14" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user14:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user14:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="36" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/14" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #14</div></div></div></li></div><div class="mx_Export_EventWrapper" id="13"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="13" data-layout="group" data-self="false" data-event-id="13" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user13:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user13:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="37" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/13" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #13</div></div></div></li></div><div class="mx_Export_EventWrapper" id="12"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="12" data-layout="group" data-self="false" data-event-id="12" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user12:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user12:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="38" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/12" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #12</div></div></div></li></div><div class="mx_Export_EventWrapper" id="11"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="11" data-layout="group" data-self="false" data-event-id="11" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user11:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user11:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="39" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/11" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #11</div></div></div></li></div><div class="mx_Export_EventWrapper" id="10"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="10" data-layout="group" data-self="false" data-event-id="10" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user10:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user10:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="40" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/10" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #10</div></div></div></li></div><div class="mx_Export_EventWrapper" id="9"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="9" data-layout="group" data-self="false" data-event-id="9" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user9:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user9:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="41" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/9" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #9</div></div></div></li></div><div class="mx_Export_EventWrapper" id="8"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="8" data-layout="group" data-self="false" data-event-id="8" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user8:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user8:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="42" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/8" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #8</div></div></div></li></div><div class="mx_Export_EventWrapper" id="7"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="7" data-layout="group" data-self="false" data-event-id="7" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user7:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user7:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="43" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/7" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #7</div></div></div></li></div><div class="mx_Export_EventWrapper" id="6"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="6" data-layout="group" data-self="false" data-event-id="6" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user6:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user6:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="44" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/6" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #6</div></div></div></li></div><div class="mx_Export_EventWrapper" id="5"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="5" data-layout="group" data-self="false" data-event-id="5" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user5:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user5:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="45" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/5" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #5</div></div></div></li></div><div class="mx_Export_EventWrapper" id="4"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="4" data-layout="group" data-self="false" data-event-id="4" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user4:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user4:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="46" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/4" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #4</div></div></div></li></div><div class="mx_Export_EventWrapper" id="3"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="3" data-layout="group" data-self="false" data-event-id="3" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user3:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user3:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="47" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/3" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #3</div></div></div></li></div><div class="mx_Export_EventWrapper" id="2"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="2" data-layout="group" data-self="false" data-event-id="2" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user2:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user2:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="48" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/2" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #2</div></div></div></li></div><div class="mx_Export_EventWrapper" id="1"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="1" data-layout="group" data-self="false" data-event-id="1" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user1:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user1:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="49" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/1" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #1</div></div></div></li></div><div class="mx_Export_EventWrapper" id="0"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="0" data-layout="group" data-self="false" data-event-id="0" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user0:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user0:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52" style="--cpd-avatar-size: 30px;">u</button></div><div id="50" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/0" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #0</div></div></div><div class="mx_EventTile_footer"><div class="mx_ReactionsRow" role="toolbar" aria-label="Reactions"><div aria-label="@user0:example.com reacted with 🙃" tabindex="0" role="button" aria-disabled="true" disabled="" class="mx_AccessibleButton mx_ReactionsRowButton mx_AccessibleButton_disabled"><span class="mx_ReactionsRowButton_content" aria-hidden="true">🙃</span><span class="mx_ReactionsRowButton_count" aria-hidden="true">1</span></div></div></div></li></div>
+                                    <li><div class="mx_TimelineSeparator" role="separator" aria-label="Thu, Jan 1, 1970"><hr role="none"/><div class="mx_DateSeparator_dateContent"><h2 class="mx_DateSeparator_dateHeading" aria-hidden="true">Thu, Jan 1, 1970</h2></div><hr role="none"/></div></li><div class="mx_Export_EventWrapper" id="49"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="49" data-layout="group" data-self="false" data-event-id="49" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user49:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user49:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="1" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/49" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #49</div></div></div></li></div><div class="mx_Export_EventWrapper" id="48"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="48" data-layout="group" data-self="false" data-event-id="48" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user48:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user48:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="2" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/48" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #48</div></div></div></li></div><div class="mx_Export_EventWrapper" id="47"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="47" data-layout="group" data-self="false" data-event-id="47" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user47:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user47:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="3" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/47" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #47</div></div></div></li></div><div class="mx_Export_EventWrapper" id="46"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="46" data-layout="group" data-self="false" data-event-id="46" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user46:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user46:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="4" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/46" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #46</div></div></div></li></div><div class="mx_Export_EventWrapper" id="45"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="45" data-layout="group" data-self="false" data-event-id="45" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user45:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user45:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="5" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/45" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #45</div></div></div></li></div><div class="mx_Export_EventWrapper" id="44"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="44" data-layout="group" data-self="false" data-event-id="44" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user44:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user44:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="6" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/44" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #44</div></div></div></li></div><div class="mx_Export_EventWrapper" id="43"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="43" data-layout="group" data-self="false" data-event-id="43" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user43:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user43:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="7" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/43" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #43</div></div></div></li></div><div class="mx_Export_EventWrapper" id="42"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="42" data-layout="group" data-self="false" data-event-id="42" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user42:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user42:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="8" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/42" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #42</div></div></div></li></div><div class="mx_Export_EventWrapper" id="41"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="41" data-layout="group" data-self="false" data-event-id="41" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user41:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user41:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="9" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/41" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #41</div></div></div></li></div><div class="mx_Export_EventWrapper" id="40"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="40" data-layout="group" data-self="false" data-event-id="40" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user40:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user40:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="10" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/40" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #40</div></div></div></li></div><div class="mx_Export_EventWrapper" id="39"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="39" data-layout="group" data-self="false" data-event-id="39" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user39:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user39:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="11" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/39" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #39</div></div></div></li></div><div class="mx_Export_EventWrapper" id="38"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="38" data-layout="group" data-self="false" data-event-id="38" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user38:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user38:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="12" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/38" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #38</div></div></div></li></div><div class="mx_Export_EventWrapper" id="37"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="37" data-layout="group" data-self="false" data-event-id="37" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user37:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user37:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="13" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/37" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #37</div></div></div></li></div><div class="mx_Export_EventWrapper" id="36"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="36" data-layout="group" data-self="false" data-event-id="36" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user36:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user36:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="14" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/36" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #36</div></div></div></li></div><div class="mx_Export_EventWrapper" id="35"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="35" data-layout="group" data-self="false" data-event-id="35" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user35:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user35:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="15" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/35" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #35</div></div></div></li></div><div class="mx_Export_EventWrapper" id="34"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="34" data-layout="group" data-self="false" data-event-id="34" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user34:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user34:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="16" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/34" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #34</div></div></div></li></div><div class="mx_Export_EventWrapper" id="33"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="33" data-layout="group" data-self="false" data-event-id="33" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user33:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user33:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="17" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/33" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #33</div></div></div></li></div><div class="mx_Export_EventWrapper" id="32"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="32" data-layout="group" data-self="false" data-event-id="32" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user32:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user32:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="18" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/32" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #32</div></div></div></li></div><div class="mx_Export_EventWrapper" id="31"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="31" data-layout="group" data-self="false" data-event-id="31" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user31:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user31:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="19" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/31" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #31</div></div></div></li></div><div class="mx_Export_EventWrapper" id="30"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="30" data-layout="group" data-self="false" data-event-id="30" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user30:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user30:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="20" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/30" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #30</div></div></div></li></div><div class="mx_Export_EventWrapper" id="29"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="29" data-layout="group" data-self="false" data-event-id="29" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user29:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user29:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="21" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/29" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #29</div></div></div></li></div><div class="mx_Export_EventWrapper" id="28"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="28" data-layout="group" data-self="false" data-event-id="28" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user28:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user28:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="22" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/28" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #28</div></div></div></li></div><div class="mx_Export_EventWrapper" id="27"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="27" data-layout="group" data-self="false" data-event-id="27" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user27:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user27:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="23" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/27" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #27</div></div></div></li></div><div class="mx_Export_EventWrapper" id="26"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="26" data-layout="group" data-self="false" data-event-id="26" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user26:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user26:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="24" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/26" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #26</div></div></div></li></div><div class="mx_Export_EventWrapper" id="25"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="25" data-layout="group" data-self="false" data-event-id="25" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user25:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user25:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="25" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/25" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #25</div></div></div></li></div><div class="mx_Export_EventWrapper" id="24"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="24" data-layout="group" data-self="false" data-event-id="24" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user24:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user24:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="26" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/24" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #24</div></div></div></li></div><div class="mx_Export_EventWrapper" id="23"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="23" data-layout="group" data-self="false" data-event-id="23" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user23:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user23:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="27" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/23" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #23</div></div></div></li></div><div class="mx_Export_EventWrapper" id="22"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="22" data-layout="group" data-self="false" data-event-id="22" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user22:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user22:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="28" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/22" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #22</div></div></div></li></div><div class="mx_Export_EventWrapper" id="21"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="21" data-layout="group" data-self="false" data-event-id="21" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user21:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user21:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="29" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/21" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #21</div></div></div></li></div><div class="mx_Export_EventWrapper" id="20"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="20" data-layout="group" data-self="false" data-event-id="20" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user20:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user20:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="30" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/20" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #20</div></div></div></li></div><div class="mx_Export_EventWrapper" id="19"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="19" data-layout="group" data-self="false" data-event-id="19" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user19:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user19:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="31" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/19" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #19</div></div></div></li></div><div class="mx_Export_EventWrapper" id="18"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="18" data-layout="group" data-self="false" data-event-id="18" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user18:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user18:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="32" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/18" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #18</div></div></div></li></div><div class="mx_Export_EventWrapper" id="17"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="17" data-layout="group" data-self="false" data-event-id="17" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user17:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user17:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="33" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/17" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #17</div></div></div></li></div><div class="mx_Export_EventWrapper" id="16"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="16" data-layout="group" data-self="false" data-event-id="16" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user16:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user16:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="34" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/16" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #16</div></div></div></li></div><div class="mx_Export_EventWrapper" id="15"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="15" data-layout="group" data-self="false" data-event-id="15" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user15:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user15:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="35" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/15" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #15</div></div></div></li></div><div class="mx_Export_EventWrapper" id="14"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="14" data-layout="group" data-self="false" data-event-id="14" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user14:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user14:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="36" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/14" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #14</div></div></div></li></div><div class="mx_Export_EventWrapper" id="13"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="13" data-layout="group" data-self="false" data-event-id="13" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user13:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user13:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="37" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/13" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #13</div></div></div></li></div><div class="mx_Export_EventWrapper" id="12"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="12" data-layout="group" data-self="false" data-event-id="12" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user12:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user12:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="38" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/12" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #12</div></div></div></li></div><div class="mx_Export_EventWrapper" id="11"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="11" data-layout="group" data-self="false" data-event-id="11" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user11:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user11:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="39" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/11" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #11</div></div></div></li></div><div class="mx_Export_EventWrapper" id="10"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="10" data-layout="group" data-self="false" data-event-id="10" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user10:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user10:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="40" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/10" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #10</div></div></div></li></div><div class="mx_Export_EventWrapper" id="9"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="9" data-layout="group" data-self="false" data-event-id="9" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user9:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user9:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="41" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/9" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #9</div></div></div></li></div><div class="mx_Export_EventWrapper" id="8"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="8" data-layout="group" data-self="false" data-event-id="8" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user8:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user8:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="42" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/8" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #8</div></div></div></li></div><div class="mx_Export_EventWrapper" id="7"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="7" data-layout="group" data-self="false" data-event-id="7" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user7:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user7:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="43" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/7" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #7</div></div></div></li></div><div class="mx_Export_EventWrapper" id="6"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="6" data-layout="group" data-self="false" data-event-id="6" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user6:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user6:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="44" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/6" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #6</div></div></div></li></div><div class="mx_Export_EventWrapper" id="5"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="5" data-layout="group" data-self="false" data-event-id="5" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color2 mx_DisambiguatedProfile_displayName" dir="auto">@user5:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user5:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="45" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/5" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #5</div></div></div></li></div><div class="mx_Export_EventWrapper" id="4"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="4" data-layout="group" data-self="false" data-event-id="4" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color1 mx_DisambiguatedProfile_displayName" dir="auto">@user4:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user4:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="46" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/4" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #4</div></div></div></li></div><div class="mx_Export_EventWrapper" id="3"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="3" data-layout="group" data-self="false" data-event-id="3" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color6 mx_DisambiguatedProfile_displayName" dir="auto">@user3:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user3:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="47" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/3" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #3</div></div></div></li></div><div class="mx_Export_EventWrapper" id="2"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="2" data-layout="group" data-self="false" data-event-id="2" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color5 mx_DisambiguatedProfile_displayName" dir="auto">@user2:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user2:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="48" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/2" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #2</div></div></div></li></div><div class="mx_Export_EventWrapper" id="1"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="1" data-layout="group" data-self="false" data-event-id="1" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color4 mx_DisambiguatedProfile_displayName" dir="auto">@user1:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user1:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="49" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/1" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #1</div></div></div></li></div><div class="mx_Export_EventWrapper" id="0"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="0" data-layout="group" data-self="false" data-event-id="0" data-has-reply="false"><div class="mx_DisambiguatedProfile"><span class="mx_Username_color3 mx_DisambiguatedProfile_displayName" dir="auto">@user0:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user0:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="50" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/0" class="mx_MessageTimestamp" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content"><div class="mx_EventTile_body translate" dir="auto">Message #0</div></div></div><div class="mx_EventTile_footer"><div class="mx_ReactionsRow" role="toolbar" aria-label="Reactions"><div aria-label="@user0:example.com reacted with 🙃" tabindex="0" role="button" aria-disabled="true" disabled="" class="mx_AccessibleButton mx_ReactionsRowButton mx_AccessibleButton_disabled"><span class="mx_ReactionsRowButton_content" aria-hidden="true">🙃</span><span class="mx_ReactionsRowButton_count" aria-hidden="true">1</span></div></div></div></li></div>
                                     </ol>
                                     </div>
                                 </div>
diff --git a/test/unit-tests/vector/__snapshots__/init-test.ts.snap b/test/unit-tests/vector/__snapshots__/init-test.ts.snap
index dd40fe6e84..b441bfa55f 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_vczzf_8 _has-icon_vczzf_57"
+          class="_button_187yx_8 _has-icon_187yx_57"
           data-kind="secondary"
           data-size="sm"
           role="button"
@@ -130,7 +130,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
           Learn more
         </button>
         <button
-          class="_button_vczzf_8"
+          class="_button_187yx_8"
           data-kind="primary"
           data-size="sm"
           role="button"
@@ -141,7 +141,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="_separator_7ckbw_8"
+      class="_separator_cqpyv_8"
       data-kind="primary"
       data-orientation="horizontal"
       role="separator"
@@ -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_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/macos/Element.dmg"
@@ -171,7 +171,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
         Mac
       </a>
       <a
-        class="_button_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/x64/Element%20Setup.exe"
@@ -186,7 +186,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
         Windows (64-bit)
       </a>
       <a
-        class="_button_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="secondary"
         data-size="lg"
         href="https://packages.element.io/desktop/install/win32/arm64/Element%20Setup.exe"
@@ -201,7 +201,7 @@ exports[`showIncompatibleBrowser should match snapshot 1`] = `
         Windows (ARM 64-bit)
       </a>
       <a
-        class="_button_vczzf_8 _has-icon_vczzf_57"
+        class="_button_187yx_8 _has-icon_187yx_57"
         data-kind="secondary"
         data-size="lg"
         href="https://element.io/download#linux"
diff --git a/yarn.lock b/yarn.lock
index 94b1985a26..1d74509e23 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1579,16 +1579,8 @@
     yaml "^2.7.0"
 
 "@element-hq/web-shared-components@link:packages/shared-components":
-  version "0.0.0-test.8"
-  dependencies:
-    "@vector-im/compound-design-tokens" "^6.3.0"
-    classnames "^2.5.1"
-    counterpart "^0.18.6"
-    lodash "^4.17.21"
-    matrix-web-i18n "^3.4.0"
-    patch-package "^8.0.1"
-    react-merge-refs "^3.0.2"
-    temporal-polyfill "^0.3.0"
+  version "0.0.0"
+  uid ""
 
 "@emnapi/core@^1.4.3", "@emnapi/core@^1.5.0":
   version "1.7.0"
@@ -4139,20 +4131,15 @@
   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.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-6.0.0.tgz#a07975ee46307fc31c2ec64a216b6be2b3b27fb3"
-  integrity sha512-Jk0NsLPCvdcuZi6an1cfyf4MDcIuoPlvja5ZWgJcORyGQZV1eLMHPYKShq9gj+EYk/BXZoPvQ1d6/T+/LSCNPA==
-
-"@vector-im/compound-design-tokens@^6.3.0":
+"@vector-im/compound-design-tokens@6.4.1", "@vector-im/compound-design-tokens@^6.3.0":
   version "6.4.1"
   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.1.2":
-  version "8.2.4"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-8.2.4.tgz#1109537365fe49368b13e05c5a32f23956e71fe8"
-  integrity sha512-Fsb/99r98ICMdtNt/bFcWtLmjyngcye9Ugqm9VDapo1VnrO0wLFJHOcm+J+SvKZwTXCaSndBklygAr5FXk0E9w==
+"@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==
   dependencies:
     "@floating-ui/react" "^0.27.0"
     "@radix-ui/react-context-menu" "^2.2.16"