Update vector-im (#31306)

* Update vector-im

* Update Jest snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix playwright styling overrides

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Hold back Compound Design Tokens as threads icons unexpectedly grew a dot in the top corner where we conditionally draw a dot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update Compound Design Tokens to 6.4.1

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Revert snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak bubble

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update storybook snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update jest snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update jest snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

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-design-tokens": "6.4.1",
-        "@vector-im/compound-web": "^8.1.2",
+        "@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",

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

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

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"

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

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 {

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 {

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 {

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 */
+                /* Align with hidden event content */
-                margin-top: 0;
+                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,

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,

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;
         }
     }
 }

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"

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

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"

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

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"

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

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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>"`,
             );
         });
 

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"

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"

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"

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

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

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"

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

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"

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"

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"

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"

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

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%;"
   >

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"

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"

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

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

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"

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

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"

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>

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"

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"

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"

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"

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"

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

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"

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"

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"

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>

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"

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"

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"

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>

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"

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"

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

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"

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"

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"

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"