diff --git a/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap b/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap
index 0ab00c6917..5c2d62c558 100644
--- a/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap
+++ b/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`PlayPauseButton > renders the button in default state 1`] = `
     aria-disabled="false"
     aria-label="Play"
     aria-labelledby="_r_0_"
-    class="_icon-button_1215g_8 button"
+    class="_icon-button_1215g_8 PlayPauseButton-module_button"
     data-kind="primary"
     role="button"
     style="--cpd-icon-button-size: 32px;"
@@ -38,7 +38,7 @@ exports[`PlayPauseButton > renders the button in playing state 1`] = `
     aria-disabled="false"
     aria-label="Pause"
     aria-labelledby="_r_6_"
-    class="_icon-button_1215g_8 button"
+    class="_icon-button_1215g_8 PlayPauseButton-module_button"
     data-kind="primary"
     role="button"
     style="--cpd-icon-button-size: 32px;"
diff --git a/packages/shared-components/src/audio/SeekBar/__snapshots__/SeekBar.test.tsx.snap b/packages/shared-components/src/audio/SeekBar/__snapshots__/SeekBar.test.tsx.snap
index db496e5853..5713504b9f 100644
--- a/packages/shared-components/src/audio/SeekBar/__snapshots__/SeekBar.test.tsx.snap
+++ b/packages/shared-components/src/audio/SeekBar/__snapshots__/SeekBar.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Seekbar > renders the clock 1`] = `
 <div>
   <input
     aria-label="Audio seek bar"
-    class="seekBar"
+    class="SeekBar-module_seekBar"
     max="100"
     min="0"
     step="1"
diff --git a/packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap b/packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap
index 9cc4cd3666..01e8c45b9e 100644
--- a/packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap
+++ b/packages/shared-components/src/composer/Banner/__snapshots__/Banner.test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`AvatarWithDetails > renders a banner with an action 1`] = `
 <div>
   <div
-    class="banner"
+    class="Banner-module_banner"
   >
     <div
-      class="icon"
+      class="Banner-module_icon"
     >
       <svg
         fill="currentColor"
@@ -27,7 +27,7 @@ exports[`AvatarWithDetails > renders a banner with an action 1`] = `
       </svg>
     </div>
     <div
-      class="content"
+      class="Banner-module_content"
     >
       <p>
         Alice's (
@@ -43,7 +43,7 @@ exports[`AvatarWithDetails > renders a banner with an action 1`] = `
       </p>
     </div>
     <div
-      class="actions"
+      class="Banner-module_actions"
     >
       <button
         class="_button_13vu4_8"
@@ -71,10 +71,10 @@ exports[`AvatarWithDetails > renders a banner with an action 1`] = `
 exports[`AvatarWithDetails > renders a banner with an avatar iamge 1`] = `
 <div>
   <div
-    class="banner"
+    class="Banner-module_banner"
   >
     <div
-      class="icon"
+      class="Banner-module_icon"
     >
       <img
         alt="Example"
@@ -82,14 +82,14 @@ exports[`AvatarWithDetails > renders a banner with an avatar iamge 1`] = `
       />
     </div>
     <div
-      class="content"
+      class="Banner-module_content"
     >
       <p>
         Hello! This is a status banner.
       </p>
     </div>
     <div
-      class="actions"
+      class="Banner-module_actions"
     >
       <button
         class="_button_13vu4_8"
@@ -108,11 +108,11 @@ exports[`AvatarWithDetails > renders a banner with an avatar iamge 1`] = `
 exports[`AvatarWithDetails > renders a critical banner 1`] = `
 <div>
   <div
-    class="banner"
+    class="Banner-module_banner"
     data-type="critical"
   >
     <div
-      class="icon"
+      class="Banner-module_icon"
     >
       <svg
         fill="currentColor"
@@ -128,14 +128,14 @@ exports[`AvatarWithDetails > renders a critical banner 1`] = `
       </svg>
     </div>
     <div
-      class="content"
+      class="Banner-module_content"
     >
       <p>
         Hello! This is a status banner.
       </p>
     </div>
     <div
-      class="actions"
+      class="Banner-module_actions"
     >
       <button
         class="_button_13vu4_8"
@@ -154,10 +154,10 @@ exports[`AvatarWithDetails > renders a critical banner 1`] = `
 exports[`AvatarWithDetails > renders a default banner 1`] = `
 <div>
   <div
-    class="banner"
+    class="Banner-module_banner"
   >
     <div
-      class="icon"
+      class="Banner-module_icon"
     >
       <svg
         fill="currentColor"
@@ -178,14 +178,14 @@ exports[`AvatarWithDetails > renders a default banner 1`] = `
       </svg>
     </div>
     <div
-      class="content"
+      class="Banner-module_content"
     >
       <p>
         Hello! This is a status banner.
       </p>
     </div>
     <div
-      class="actions"
+      class="Banner-module_actions"
     >
       <button
         class="_button_13vu4_8"
@@ -204,11 +204,11 @@ exports[`AvatarWithDetails > renders a default banner 1`] = `
 exports[`AvatarWithDetails > renders a info banner 1`] = `
 <div>
   <div
-    class="banner"
+    class="Banner-module_banner"
     data-type="info"
   >
     <div
-      class="icon"
+      class="Banner-module_icon"
     >
       <svg
         fill="currentColor"
@@ -229,14 +229,14 @@ exports[`AvatarWithDetails > renders a info banner 1`] = `
       </svg>
     </div>
     <div
-      class="content"
+      class="Banner-module_content"
     >
       <p>
         Hello! This is a status banner.
       </p>
     </div>
     <div
-      class="actions"
+      class="Banner-module_actions"
     >
       <button
         class="_button_13vu4_8"
@@ -255,11 +255,11 @@ exports[`AvatarWithDetails > renders a info banner 1`] = `
 exports[`AvatarWithDetails > renders a success banner 1`] = `
 <div>
   <div
-    class="banner"
+    class="Banner-module_banner"
     data-type="success"
   >
     <div
-      class="icon"
+      class="Banner-module_icon"
     >
       <svg
         fill="currentColor"
@@ -275,14 +275,14 @@ exports[`AvatarWithDetails > renders a success banner 1`] = `
       </svg>
     </div>
     <div
-      class="content"
+      class="Banner-module_content"
     >
       <p>
         Hello! This is a status banner.
       </p>
     </div>
     <div
-      class="actions"
+      class="Banner-module_actions"
     >
       <button
         class="_button_13vu4_8"
diff --git a/packages/shared-components/src/core/avatar/AvatarWithDetails/__snapshots__/AvatarWithDetails.test.tsx.snap b/packages/shared-components/src/core/avatar/AvatarWithDetails/__snapshots__/AvatarWithDetails.test.tsx.snap
index 6c5e1c8511..60a488a647 100644
--- a/packages/shared-components/src/core/avatar/AvatarWithDetails/__snapshots__/AvatarWithDetails.test.tsx.snap
+++ b/packages/shared-components/src/core/avatar/AvatarWithDetails/__snapshots__/AvatarWithDetails.test.tsx.snap
@@ -3,22 +3,22 @@
 exports[`AvatarWithDetails > renders a textual event 1`] = `
 <div>
   <div
-    class="avatarWithDetails"
+    class="AvatarWithDetails-module_avatarWithDetails"
   >
     <div
       style="width: 40px; height: 40px; background-color: rgb(136, 136, 136); border-radius: 50%;"
     />
     <div
-      class="flex"
+      class="Flex-module_flex"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <span
-        class="title"
+        class="AvatarWithDetails-module_title"
       >
         Room Name
       </span>
       <span
-        class="details"
+        class="AvatarWithDetails-module_details"
       >
         Details about the avatar go here
       </span>
diff --git a/packages/shared-components/src/core/pill-input/Pill/__snapshots__/Pill.test.tsx.snap b/packages/shared-components/src/core/pill-input/Pill/__snapshots__/Pill.test.tsx.snap
index 0574e9ba39..2757185f08 100644
--- a/packages/shared-components/src/core/pill-input/Pill/__snapshots__/Pill.test.tsx.snap
+++ b/packages/shared-components/src/core/pill-input/Pill/__snapshots__/Pill.test.tsx.snap
@@ -3,14 +3,14 @@
 exports[`Pill > renders the pill 1`] = `
 <div>
   <div
-    class="flex pill"
+    class="Flex-module_flex Pill-module_pill"
     style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
   >
     <div
       style="width: 20px; height: 20px; border-radius: 100%; background-color: rgb(204, 204, 204);"
     />
     <span
-      class="label"
+      class="Pill-module_label"
       id="_r_0_"
     >
       Pill
@@ -48,14 +48,14 @@ exports[`Pill > renders the pill 1`] = `
 exports[`Pill > renders the pill without close button 1`] = `
 <div>
   <div
-    class="flex pill"
+    class="Flex-module_flex Pill-module_pill"
     style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
   >
     <div
       style="width: 20px; height: 20px; border-radius: 100%; background-color: rgb(204, 204, 204);"
     />
     <span
-      class="label"
+      class="Pill-module_label"
       id="_r_1_"
     >
       Pill
diff --git a/packages/shared-components/src/core/pill-input/PillInput/__snapshots__/PillInput.test.tsx.snap b/packages/shared-components/src/core/pill-input/PillInput/__snapshots__/PillInput.test.tsx.snap
index 64f85adc8b..cd298542b3 100644
--- a/packages/shared-components/src/core/pill-input/PillInput/__snapshots__/PillInput.test.tsx.snap
+++ b/packages/shared-components/src/core/pill-input/PillInput/__snapshots__/PillInput.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`PillInput > renders only the input without children 1`] = `
 <div>
   <div
-    class="flex pillInput"
+    class="Flex-module_flex PillInput-module_pillInput"
     style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
     <input
       aria-label="pill input"
       autocomplete="off"
-      class="input"
+      class="PillInput-module_input"
       placeholder="Type something..."
     />
   </div>
@@ -19,11 +19,11 @@ exports[`PillInput > renders only the input without children 1`] = `
 exports[`PillInput > renders the pill input 1`] = `
 <div>
   <div
-    class="flex pillInput"
+    class="Flex-module_flex PillInput-module_pillInput"
     style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
   >
     <div
-      class="flex"
+      class="Flex-module_flex"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: wrap;"
     >
       <div
@@ -36,7 +36,7 @@ exports[`PillInput > renders the pill input 1`] = `
     <input
       aria-label="pill input"
       autocomplete="off"
-      class="input largerInput"
+      class="PillInput-module_input PillInput-module_largerInput"
       placeholder="Type something..."
     />
   </div>
diff --git a/packages/shared-components/src/core/rich-list/RichItem/__snapshots__/RichItem.test.tsx.snap b/packages/shared-components/src/core/rich-list/RichItem/__snapshots__/RichItem.test.tsx.snap
index ee19b558eb..bbe20579e4 100644
--- a/packages/shared-components/src/core/rich-list/RichItem/__snapshots__/RichItem.test.tsx.snap
+++ b/packages/shared-components/src/core/rich-list/RichItem/__snapshots__/RichItem.test.tsx.snap
@@ -8,12 +8,12 @@ exports[`RichItem > renders the item in default state 1`] = `
   >
     <li
       aria-label="Rich Item Title"
-      class="richItem"
+      class="RichItem-module_richItem"
       role="option"
       tabindex="-1"
     >
       <div
-        class="flex avatar"
+        class="Flex-module_flex RichItem-module_avatar"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <div
@@ -21,17 +21,17 @@ exports[`RichItem > renders the item in default state 1`] = `
         />
       </div>
       <span
-        class="title"
+        class="RichItem-module_title"
       >
         Rich Item Title
       </span>
       <span
-        class="description"
+        class="RichItem-module_description"
       >
         This is a description of the rich item.
       </span>
       <span
-        class="timestamp"
+        class="RichItem-module_timestamp"
         role="timer"
       >
         145 days ago
@@ -50,13 +50,13 @@ exports[`RichItem > renders the item in selected state 1`] = `
     <li
       aria-label="Rich Item Title"
       aria-selected="true"
-      class="richItem"
+      class="RichItem-module_richItem"
       role="option"
       tabindex="-1"
     >
       <div
         aria-hidden="true"
-        class="flex checkmark"
+        class="Flex-module_flex RichItem-module_checkmark"
         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;"
       >
         <svg
@@ -73,17 +73,17 @@ exports[`RichItem > renders the item in selected state 1`] = `
         </svg>
       </div>
       <span
-        class="title"
+        class="RichItem-module_title"
       >
         Rich Item Title
       </span>
       <span
-        class="description"
+        class="RichItem-module_description"
       >
         This is a description of the rich item.
       </span>
       <span
-        class="timestamp"
+        class="RichItem-module_timestamp"
         role="timer"
       >
         145 days ago
@@ -101,12 +101,12 @@ exports[`RichItem > renders the item without timestamp 1`] = `
   >
     <li
       aria-label="Rich Item Title"
-      class="richItem"
+      class="RichItem-module_richItem"
       role="option"
       tabindex="-1"
     >
       <div
-        class="flex avatar"
+        class="Flex-module_flex RichItem-module_avatar"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <div
@@ -114,12 +114,12 @@ exports[`RichItem > renders the item without timestamp 1`] = `
         />
       </div>
       <span
-        class="title"
+        class="RichItem-module_title"
       >
         Rich Item Title
       </span>
       <span
-        class="description"
+        class="RichItem-module_description"
       >
         This is a description of the rich item.
       </span>
diff --git a/packages/shared-components/src/core/rich-list/RichList/__snapshots__/RichList.test.tsx.snap b/packages/shared-components/src/core/rich-list/RichList/__snapshots__/RichList.test.tsx.snap
index bd10576b65..3643d11abf 100644
--- a/packages/shared-components/src/core/rich-list/RichList/__snapshots__/RichList.test.tsx.snap
+++ b/packages/shared-components/src/core/rich-list/RichList/__snapshots__/RichList.test.tsx.snap
@@ -6,29 +6,29 @@ exports[`RichItem > renders the list 1`] = `
     style="height: 220px; overflow: hidden;"
   >
     <div
-      class="flex richList"
+      class="Flex-module_flex RichList-module_richList"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <span
-        class="title"
+        class="RichList-module_title"
         id="_r_0_"
       >
         Rich List Title
       </span>
       <ul
         aria-labelledby="_r_0_"
-        class="content"
+        class="RichList-module_content"
         role="listbox"
         tabindex="0"
       >
         <li
           aria-label="First Item"
-          class="richItem"
+          class="RichItem-module_richItem"
           role="option"
           tabindex="-1"
         >
           <div
-            class="flex avatar"
+            class="Flex-module_flex RichItem-module_avatar"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
           >
             <div
@@ -36,12 +36,12 @@ exports[`RichItem > renders the list 1`] = `
             />
           </div>
           <span
-            class="title"
+            class="RichItem-module_title"
           >
             First Item
           </span>
           <span
-            class="description"
+            class="RichItem-module_description"
           >
             description
           </span>
@@ -49,13 +49,13 @@ exports[`RichItem > renders the list 1`] = `
         <li
           aria-label="Second Item"
           aria-selected="true"
-          class="richItem"
+          class="RichItem-module_richItem"
           role="option"
           tabindex="-1"
         >
           <div
             aria-hidden="true"
-            class="flex checkmark"
+            class="Flex-module_flex RichItem-module_checkmark"
             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;"
           >
             <svg
@@ -72,24 +72,24 @@ exports[`RichItem > renders the list 1`] = `
             </svg>
           </div>
           <span
-            class="title"
+            class="RichItem-module_title"
           >
             Second Item
           </span>
           <span
-            class="description"
+            class="RichItem-module_description"
           >
             description
           </span>
         </li>
         <li
           aria-label="Third Item"
-          class="richItem"
+          class="RichItem-module_richItem"
           role="option"
           tabindex="-1"
         >
           <div
-            class="flex avatar"
+            class="Flex-module_flex RichItem-module_avatar"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
           >
             <div
@@ -97,24 +97,24 @@ exports[`RichItem > renders the list 1`] = `
             />
           </div>
           <span
-            class="title"
+            class="RichItem-module_title"
           >
             Third Item
           </span>
           <span
-            class="description"
+            class="RichItem-module_description"
           >
             description
           </span>
         </li>
         <li
           aria-label="Fourth Item"
-          class="richItem"
+          class="RichItem-module_richItem"
           role="option"
           tabindex="-1"
         >
           <div
-            class="flex avatar"
+            class="Flex-module_flex RichItem-module_avatar"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
           >
             <div
@@ -122,24 +122,24 @@ exports[`RichItem > renders the list 1`] = `
             />
           </div>
           <span
-            class="title"
+            class="RichItem-module_title"
           >
             Fourth Item
           </span>
           <span
-            class="description"
+            class="RichItem-module_description"
           >
             description
           </span>
         </li>
         <li
           aria-label="Fifth Item"
-          class="richItem"
+          class="RichItem-module_richItem"
           role="option"
           tabindex="-1"
         >
           <div
-            class="flex avatar"
+            class="Flex-module_flex RichItem-module_avatar"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
           >
             <div
@@ -147,12 +147,12 @@ exports[`RichItem > renders the list 1`] = `
             />
           </div>
           <span
-            class="title"
+            class="RichItem-module_title"
           >
             Fifth Item
           </span>
           <span
-            class="description"
+            class="RichItem-module_description"
           >
             description
           </span>
@@ -169,17 +169,17 @@ exports[`RichItem > renders the list with isEmpty=true 1`] = `
     style="height: 220px; overflow: hidden;"
   >
     <div
-      class="flex richList"
+      class="Flex-module_flex RichList-module_richList"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <span
-        class="title"
+        class="RichList-module_title"
         id="_r_1_"
       >
         Rich List Title
       </span>
       <span
-        class="empty"
+        class="RichList-module_empty"
       >
         No items available
       </span>
diff --git a/packages/shared-components/src/core/utils/LinkedText/__snapshots__/LinkedText.test.tsx.snap b/packages/shared-components/src/core/utils/LinkedText/__snapshots__/LinkedText.test.tsx.snap
index cf847b30f1..a7928026cb 100644
--- a/packages/shared-components/src/core/utils/LinkedText/__snapshots__/LinkedText.test.tsx.snap
+++ b/packages/shared-components/src/core/utils/LinkedText/__snapshots__/LinkedText.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`LinkedText > renders a custom href 1`] = `
 <div>
   <p
-    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container"
+    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container"
   >
     I love working on 
     <a
@@ -22,7 +22,7 @@ exports[`LinkedText > renders a custom href 1`] = `
 exports[`LinkedText > renders a custom target 1`] = `
 <div>
   <p
-    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container"
+    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container"
   >
     I love working on 
     <a
@@ -41,7 +41,7 @@ exports[`LinkedText > renders a custom target 1`] = `
 exports[`LinkedText > renders a room alias 1`] = `
 <div>
   <p
-    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container"
+    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container"
   >
     I love talking in 
     <a
@@ -60,7 +60,7 @@ exports[`LinkedText > renders a room alias 1`] = `
 exports[`LinkedText > renders a standard link 1`] = `
 <div>
   <p
-    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container"
+    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container"
   >
     I love working on 
     <a
@@ -79,7 +79,7 @@ exports[`LinkedText > renders a standard link 1`] = `
 exports[`LinkedText > renders a user ID 1`] = `
 <div>
   <p
-    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container"
+    class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container"
   >
     I love talking to 
     <a
diff --git a/packages/shared-components/src/crypto/SasEmoji/__snapshots__/SasEmoji.test.tsx.snap b/packages/shared-components/src/crypto/SasEmoji/__snapshots__/SasEmoji.test.tsx.snap
index 27f53cb870..e85f735721 100644
--- a/packages/shared-components/src/crypto/SasEmoji/__snapshots__/SasEmoji.test.tsx.snap
+++ b/packages/shared-components/src/crypto/SasEmoji/__snapshots__/SasEmoji.test.tsx.snap
@@ -3,109 +3,109 @@
 exports[`<SasEmoji/> > should match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="container"
+    class="SasEmoji-module_container"
   >
     <div
-      class="segment"
+      class="SasEmoji-module_segment"
     >
       <div
         aria-hidden="true"
-        class="emoji"
+        class="SasEmoji-module_emoji"
       >
         🦋
       </div>
       <div
-        class="label"
+        class="SasEmoji-module_label"
       >
         Butterfly
       </div>
     </div>
     <div
-      class="segment"
+      class="SasEmoji-module_segment"
     >
       <div
         aria-hidden="true"
-        class="emoji"
+        class="SasEmoji-module_emoji"
       >
         🍄
       </div>
       <div
-        class="label"
+        class="SasEmoji-module_label"
       >
         Mushroom
       </div>
     </div>
     <div
-      class="segment"
+      class="SasEmoji-module_segment"
     >
       <div
         aria-hidden="true"
-        class="emoji"
+        class="SasEmoji-module_emoji"
       >
         ⚽
       </div>
       <div
-        class="label"
+        class="SasEmoji-module_label"
       >
         Ball
       </div>
     </div>
     <div
-      class="segment"
+      class="SasEmoji-module_segment"
     >
       <div
         aria-hidden="true"
-        class="emoji"
+        class="SasEmoji-module_emoji"
       >
         🌏
       </div>
       <div
-        class="label"
+        class="SasEmoji-module_label"
       >
         Globe
       </div>
     </div>
     <div
-      class="segment"
+      class="SasEmoji-module_segment"
     >
       <div
         aria-hidden="true"
-        class="emoji"
+        class="SasEmoji-module_emoji"
       >
         🦄
       </div>
       <div
-        class="label"
+        class="SasEmoji-module_label"
       >
         Unicorn
       </div>
     </div>
     <div
-      class="segment"
+      class="SasEmoji-module_segment"
     >
       <div
         aria-hidden="true"
-        class="emoji"
+        class="SasEmoji-module_emoji"
       >
         🚀
       </div>
       <div
-        class="label"
+        class="SasEmoji-module_label"
       >
         Rocket
       </div>
     </div>
     <div
-      class="segment"
+      class="SasEmoji-module_segment"
     >
       <div
         aria-hidden="true"
-        class="emoji"
+        class="SasEmoji-module_emoji"
       >
         🔧
       </div>
       <div
-        class="label"
+        class="SasEmoji-module_label"
       >
         Spanner
       </div>
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/__snapshots__/LinkPreview.test.tsx.snap b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/__snapshots__/LinkPreview.test.tsx.snap
index 83d50ff719..1e0d988f1b 100644
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/__snapshots__/LinkPreview.test.tsx.snap
+++ b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/LinkPreview/__snapshots__/LinkPreview.test.tsx.snap
@@ -3,29 +3,29 @@
 exports[`LinkPreview > renders a preview 1`] = `
 <div>
   <div
-    class="container"
+    class="LinkPreview-module_container"
   >
     <div
-      class="wrapImageCaption"
+      class="LinkPreview-module_wrapImageCaption"
     >
       <button
         aria-label="View image"
-        class="image"
+        class="LinkPreview-module_image"
       >
         <img
           alt=""
-          class="thumbnail"
+          class="LinkPreview-module_thumbnail"
           src="/static/element.png"
         />
       </button>
       <div
-        class="caption"
+        class="LinkPreview-module_caption"
       >
         <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkPreview-module_title"
         >
           <a
-            class="link"
+            class="LinkPreview-module_link"
             href="https://matrix.org"
             rel="noreferrer noopener"
             target="_blank"
@@ -39,7 +39,7 @@ exports[`LinkPreview > renders a preview 1`] = `
           </span>
         </p>
         <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
         >
           A simple description
         </p>
@@ -52,19 +52,19 @@ exports[`LinkPreview > renders a preview 1`] = `
 exports[`LinkPreview > renders a preview with just a title 1`] = `
 <div>
   <div
-    class="container"
+    class="LinkPreview-module_container"
   >
     <div
-      class="wrapImageCaption"
+      class="LinkPreview-module_wrapImageCaption"
     >
       <div
-        class="caption"
+        class="LinkPreview-module_caption"
       >
         <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkPreview-module_title"
         >
           <a
-            class="link"
+            class="LinkPreview-module_link"
             href="https://matrix.org"
             rel="noreferrer noopener"
             target="_blank"
@@ -81,19 +81,19 @@ exports[`LinkPreview > renders a preview with just a title 1`] = `
 exports[`LinkPreview > renders a preview with just a title and description 1`] = `
 <div>
   <div
-    class="container"
+    class="LinkPreview-module_container"
   >
     <div
-      class="wrapImageCaption"
+      class="LinkPreview-module_wrapImageCaption"
     >
       <div
-        class="caption"
+        class="LinkPreview-module_caption"
       >
         <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkPreview-module_title"
         >
           <a
-            class="link"
+            class="LinkPreview-module_link"
             href="https://matrix.org"
             rel="noreferrer noopener"
             target="_blank"
@@ -102,7 +102,7 @@ exports[`LinkPreview > renders a preview with just a title and description 1`] =
           </a>
         </p>
         <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
         >
           A simple description with a link to 
           <a
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap
index 39854e0bfd..fb9e9494d5 100644
--- a/packages/shared-components/src/event-tiles/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap
+++ b/packages/shared-components/src/event-tiles/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap
@@ -3,35 +3,35 @@
 exports[`UrlPreviewGroupView > renders a single preview 1`] = `
 <div>
   <div
-    class="wrapper"
+    class="UrlPreviewGroupView-module_wrapper"
   >
     <div
-      class="previewGroup"
+      class="UrlPreviewGroupView-module_previewGroup"
     >
       <div
-        class="container"
+        class="LinkPreview-module_container"
       >
         <div
-          class="wrapImageCaption"
+          class="LinkPreview-module_wrapImageCaption"
         >
           <button
             aria-label="View image"
-            class="image"
+            class="LinkPreview-module_image"
           >
             <img
               alt=""
-              class="thumbnail"
+              class="LinkPreview-module_thumbnail"
               src="/static/element.png"
             />
           </button>
           <div
-            class="caption"
+            class="LinkPreview-module_caption"
           >
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkPreview-module_title"
             >
               <a
-                class="link"
+                class="LinkPreview-module_link"
                 href="https://matrix.org"
                 rel="noreferrer noopener"
                 target="_blank"
@@ -40,7 +40,7 @@ exports[`UrlPreviewGroupView > renders a single preview 1`] = `
               </a>
             </p>
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
             >
               A simple description
             </p>
@@ -80,35 +80,35 @@ exports[`UrlPreviewGroupView > renders a single preview 1`] = `
 exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
 <div>
   <div
-    class="wrapper"
+    class="UrlPreviewGroupView-module_wrapper"
   >
     <div
-      class="previewGroup"
+      class="UrlPreviewGroupView-module_previewGroup"
     >
       <div
-        class="container"
+        class="LinkPreview-module_container"
       >
         <div
-          class="wrapImageCaption"
+          class="LinkPreview-module_wrapImageCaption"
         >
           <button
             aria-label="View image"
-            class="image"
+            class="LinkPreview-module_image"
           >
             <img
               alt=""
-              class="thumbnail"
+              class="LinkPreview-module_thumbnail"
               src="/static/element.png"
             />
           </button>
           <div
-            class="caption"
+            class="LinkPreview-module_caption"
           >
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkPreview-module_title"
             >
               <a
-                class="link"
+                class="LinkPreview-module_link"
                 href="https://matrix.org"
                 rel="noreferrer noopener"
                 target="_blank"
@@ -117,7 +117,7 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
               </a>
             </p>
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
             >
               A regular square image.
             </p>
@@ -125,29 +125,29 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
         </div>
       </div>
       <div
-        class="container"
+        class="LinkPreview-module_container"
       >
         <div
-          class="wrapImageCaption"
+          class="LinkPreview-module_wrapImageCaption"
         >
           <button
             aria-label="View image"
-            class="image"
+            class="LinkPreview-module_image"
           >
             <img
               alt=""
-              class="thumbnail"
+              class="LinkPreview-module_thumbnail"
               src="/static/tallImage.png"
             />
           </button>
           <div
-            class="caption"
+            class="LinkPreview-module_caption"
           >
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkPreview-module_title"
             >
               <a
-                class="link"
+                class="LinkPreview-module_link"
                 href="https://matrix.org"
                 rel="noreferrer noopener"
                 target="_blank"
@@ -156,7 +156,7 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
               </a>
             </p>
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
             >
               This one has a taller image which should crop nicely.
             </p>
@@ -164,29 +164,29 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
         </div>
       </div>
       <div
-        class="container"
+        class="LinkPreview-module_container"
       >
         <div
-          class="wrapImageCaption"
+          class="LinkPreview-module_wrapImageCaption"
         >
           <button
             aria-label="View image"
-            class="image"
+            class="LinkPreview-module_image"
           >
             <img
               alt=""
-              class="thumbnail"
+              class="LinkPreview-module_thumbnail"
               src="/static/element.png"
             />
           </button>
           <div
-            class="caption"
+            class="LinkPreview-module_caption"
           >
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkPreview-module_title"
             >
               <a
-                class="link"
+                class="LinkPreview-module_link"
                 href="https://matrix.org"
                 rel="noreferrer noopener"
                 target="_blank"
@@ -195,7 +195,7 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
               </a>
             </p>
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
             >
               One more description
             </p>
@@ -203,7 +203,7 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
         </div>
       </div>
       <button
-        class="_button_13vu4_8 toggleButton"
+        class="_button_13vu4_8 UrlPreviewGroupView-module_toggleButton"
         data-kind="tertiary"
         data-size="sm"
         role="button"
@@ -244,35 +244,35 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
 exports[`UrlPreviewGroupView > renders multiple previews which are hidden 1`] = `
 <div>
   <div
-    class="wrapper"
+    class="UrlPreviewGroupView-module_wrapper"
   >
     <div
-      class="previewGroup"
+      class="UrlPreviewGroupView-module_previewGroup"
     >
       <div
-        class="container"
+        class="LinkPreview-module_container"
       >
         <div
-          class="wrapImageCaption"
+          class="LinkPreview-module_wrapImageCaption"
         >
           <button
             aria-label="View image"
-            class="image"
+            class="LinkPreview-module_image"
           >
             <img
               alt=""
-              class="thumbnail"
+              class="LinkPreview-module_thumbnail"
               src="/static/element.png"
             />
           </button>
           <div
-            class="caption"
+            class="LinkPreview-module_caption"
           >
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkPreview-module_title"
             >
               <a
-                class="link"
+                class="LinkPreview-module_link"
                 href="https://matrix.org"
                 rel="noreferrer noopener"
                 target="_blank"
@@ -281,7 +281,7 @@ exports[`UrlPreviewGroupView > renders multiple previews which are hidden 1`] =
               </a>
             </p>
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
             >
               A simple description
             </p>
@@ -289,7 +289,7 @@ exports[`UrlPreviewGroupView > renders multiple previews which are hidden 1`] =
         </div>
       </div>
       <button
-        class="_button_13vu4_8 toggleButton"
+        class="_button_13vu4_8 UrlPreviewGroupView-module_toggleButton"
         data-kind="tertiary"
         data-size="sm"
         role="button"
@@ -330,35 +330,35 @@ exports[`UrlPreviewGroupView > renders multiple previews which are hidden 1`] =
 exports[`UrlPreviewGroupView > renders with a compact view 1`] = `
 <div>
   <div
-    class="wrapper"
+    class="UrlPreviewGroupView-module_wrapper"
   >
     <div
-      class="previewGroup compactLayout"
+      class="UrlPreviewGroupView-module_previewGroup UrlPreviewGroupView-module_compactLayout"
     >
       <div
-        class="container"
+        class="LinkPreview-module_container"
       >
         <div
-          class="wrapImageCaption"
+          class="LinkPreview-module_wrapImageCaption"
         >
           <button
             aria-label="View image"
-            class="image"
+            class="LinkPreview-module_image"
           >
             <img
               alt=""
-              class="thumbnail"
+              class="LinkPreview-module_thumbnail"
               src="/static/element.png"
             />
           </button>
           <div
-            class="caption"
+            class="LinkPreview-module_caption"
           >
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkPreview-module_title"
             >
               <a
-                class="link"
+                class="LinkPreview-module_link"
                 href="https://matrix.org"
                 rel="noreferrer noopener"
                 target="_blank"
@@ -367,7 +367,7 @@ exports[`UrlPreviewGroupView > renders with a compact view 1`] = `
               </a>
             </p>
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
             >
               A regular square image.
             </p>
@@ -375,29 +375,29 @@ exports[`UrlPreviewGroupView > renders with a compact view 1`] = `
         </div>
       </div>
       <div
-        class="container"
+        class="LinkPreview-module_container"
       >
         <div
-          class="wrapImageCaption"
+          class="LinkPreview-module_wrapImageCaption"
         >
           <button
             aria-label="View image"
-            class="image"
+            class="LinkPreview-module_image"
           >
             <img
               alt=""
-              class="thumbnail"
+              class="LinkPreview-module_thumbnail"
               src="/static/tallImage.png"
             />
           </button>
           <div
-            class="caption"
+            class="LinkPreview-module_caption"
           >
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkPreview-module_title"
             >
               <a
-                class="link"
+                class="LinkPreview-module_link"
                 href="https://matrix.org"
                 rel="noreferrer noopener"
                 target="_blank"
@@ -406,7 +406,7 @@ exports[`UrlPreviewGroupView > renders with a compact view 1`] = `
               </a>
             </p>
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
             >
               This one has a taller image which should crop nicely.
             </p>
@@ -414,29 +414,29 @@ exports[`UrlPreviewGroupView > renders with a compact view 1`] = `
         </div>
       </div>
       <div
-        class="container"
+        class="LinkPreview-module_container"
       >
         <div
-          class="wrapImageCaption"
+          class="LinkPreview-module_wrapImageCaption"
         >
           <button
             aria-label="View image"
-            class="image"
+            class="LinkPreview-module_image"
           >
             <img
               alt=""
-              class="thumbnail"
+              class="LinkPreview-module_thumbnail"
               src="/static/element.png"
             />
           </button>
           <div
-            class="caption"
+            class="LinkPreview-module_caption"
           >
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 title"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkPreview-module_title"
             >
               <a
-                class="link"
+                class="LinkPreview-module_link"
                 href="https://matrix.org"
                 rel="noreferrer noopener"
                 target="_blank"
@@ -445,7 +445,7 @@ exports[`UrlPreviewGroupView > renders with a compact view 1`] = `
               </a>
             </p>
             <p
-              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 container description"
+              class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
             >
               One more description
             </p>
@@ -453,7 +453,7 @@ exports[`UrlPreviewGroupView > renders with a compact view 1`] = `
         </div>
       </div>
       <button
-        class="_button_13vu4_8 toggleButton"
+        class="_button_13vu4_8 UrlPreviewGroupView-module_toggleButton"
         data-kind="tertiary"
         data-size="sm"
         role="button"
diff --git a/packages/shared-components/src/resize/group/__snapshots__/GroupView.test.tsx.snap b/packages/shared-components/src/resize/group/__snapshots__/GroupView.test.tsx.snap
index b02e709d0a..a432029dd7 100644
--- a/packages/shared-components/src/resize/group/__snapshots__/GroupView.test.tsx.snap
+++ b/packages/shared-components/src/resize/group/__snapshots__/GroupView.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`<GroupView /> > renders Default story 1`] = `
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
         >
           <div
-            class="flex"
+            class="Flex-module_flex"
             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;"
           >
             LEFT CONTENT
@@ -51,7 +51,7 @@ exports[`<GroupView /> > renders Default story 1`] = `
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
         >
           <div
-            class="flex"
+            class="Flex-module_flex"
             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;"
           >
             MAIN CONTENT
diff --git a/packages/shared-components/src/resize/panel/__snapshots__/LeftResizablePanelView.test.tsx.snap b/packages/shared-components/src/resize/panel/__snapshots__/LeftResizablePanelView.test.tsx.snap
index 729f33b51d..df9befde86 100644
--- a/packages/shared-components/src/resize/panel/__snapshots__/LeftResizablePanelView.test.tsx.snap
+++ b/packages/shared-components/src/resize/panel/__snapshots__/LeftResizablePanelView.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`<LeftResizablePanelView /> > renders Default story 1`] = `
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
         >
           <div
-            class="flex"
+            class="Flex-module_flex"
             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;"
           >
             LEFT CONTENT
@@ -51,7 +51,7 @@ exports[`<LeftResizablePanelView /> > renders Default story 1`] = `
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
         >
           <div
-            class="flex"
+            class="Flex-module_flex"
             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;"
           >
             MAIN CONTENT
diff --git a/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap b/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap
index a8446398b1..57116cb717 100644
--- a/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap
+++ b/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`<SeparatorView /> > renders Default story 1`] = `
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
         >
           <div
-            class="flex"
+            class="Flex-module_flex"
             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;"
             tabindex="0"
           >
@@ -36,7 +36,7 @@ exports[`<SeparatorView /> > renders Default story 1`] = `
         aria-valuemax="99.502"
         aria-valuemin="0"
         aria-valuenow="0"
-        class="separator Separator visible"
+        class="SeparatorView-module_separator Separator SeparatorView-module_visible"
         data-separator="inactive"
         data-testid="_r_2_"
         id="_r_2_"
@@ -67,7 +67,7 @@ exports[`<SeparatorView /> > renders Default story 1`] = `
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
         >
           <div
-            class="flex"
+            class="Flex-module_flex"
             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;"
           >
             MAIN CONTENT
@@ -100,7 +100,7 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
         >
           <div
-            class="flex"
+            class="Flex-module_flex"
             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;"
             tabindex="0"
           >
@@ -115,7 +115,7 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
         aria-valuemax="99.502"
         aria-valuemin="0"
         aria-valuenow="49.751"
-        class="separator Separator visible"
+        class="SeparatorView-module_separator Separator SeparatorView-module_visible"
         data-separator="inactive"
         data-testid="_r_i_"
         id="_r_i_"
@@ -146,7 +146,7 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
         >
           <div
-            class="flex"
+            class="Flex-module_flex"
             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;"
           >
             MAIN CONTENT
@@ -179,7 +179,7 @@ exports[`<SeparatorView /> > renders LeftPanelExpanded story 1`] = `
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
         >
           <div
-            class="flex"
+            class="Flex-module_flex"
             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;"
             tabindex="0"
           >
@@ -190,7 +190,7 @@ exports[`<SeparatorView /> > renders LeftPanelExpanded story 1`] = `
       <div
         aria-label="Click or drag to expand"
         aria-orientation="vertical"
-        class="separator Separator"
+        class="SeparatorView-module_separator Separator"
         data-separator="inactive"
         data-testid="_r_a_"
         id="_r_a_"
@@ -221,7 +221,7 @@ exports[`<SeparatorView /> > renders LeftPanelExpanded story 1`] = `
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
         >
           <div
-            class="flex"
+            class="Flex-module_flex"
             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;"
           >
             MAIN CONTENT
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap
index 9aeef5522c..01c5914797 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap
@@ -4,16 +4,16 @@ exports[`RoomListHeaderView > renders the default state 1`] = `
 <div>
   <header
     aria-label="Room options"
-    class="flex header"
+    class="Flex-module_flex RoomListHeaderView-module_header"
     data-testid="room-list-header"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: end; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <div
-      class="flex container"
+      class="Flex-module_flex RoomListHeaderView-module_container"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <div
-        class="flex title"
+        class="Flex-module_flex RoomListHeaderView-module_title"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
       >
         <h1
@@ -27,7 +27,7 @@ exports[`RoomListHeaderView > renders the default state 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Open space menu"
-          class="_icon-button_1215g_8 button"
+          class="_icon-button_1215g_8 SpaceMenuView-module_button"
           data-kind="primary"
           data-state="closed"
           id="radix-_r_0_"
@@ -55,7 +55,7 @@ exports[`RoomListHeaderView > renders the default state 1`] = `
         </button>
       </div>
       <div
-        class="flex"
+        class="Flex-module_flex"
         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
@@ -137,16 +137,16 @@ exports[`RoomListHeaderView > renders without compose menu 1`] = `
 <div>
   <header
     aria-label="Room options"
-    class="flex header"
+    class="Flex-module_flex RoomListHeaderView-module_header"
     data-testid="room-list-header"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: end; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <div
-      class="flex container"
+      class="Flex-module_flex RoomListHeaderView-module_container"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <div
-        class="flex title"
+        class="Flex-module_flex RoomListHeaderView-module_title"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
       >
         <h1
@@ -160,7 +160,7 @@ exports[`RoomListHeaderView > renders without compose menu 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Open space menu"
-          class="_icon-button_1215g_8 button"
+          class="_icon-button_1215g_8 SpaceMenuView-module_button"
           data-kind="primary"
           data-state="closed"
           id="radix-_r_i_"
@@ -188,7 +188,7 @@ exports[`RoomListHeaderView > renders without compose menu 1`] = `
         </button>
       </div>
       <div
-        class="flex"
+        class="Flex-module_flex"
         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
@@ -265,16 +265,16 @@ exports[`RoomListHeaderView > renders without space menu 1`] = `
 <div>
   <header
     aria-label="Room options"
-    class="flex header"
+    class="Flex-module_flex RoomListHeaderView-module_header"
     data-testid="room-list-header"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: end; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <div
-      class="flex container"
+      class="Flex-module_flex RoomListHeaderView-module_container"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <div
-        class="flex title"
+        class="Flex-module_flex RoomListHeaderView-module_title"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
       >
         <h1
@@ -285,7 +285,7 @@ exports[`RoomListHeaderView > renders without space menu 1`] = `
         </h1>
       </div>
       <div
-        class="flex"
+        class="Flex-module_flex"
         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
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/SpaceMenuView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/SpaceMenuView.test.tsx.snap
index ab644167a6..562e2eb278 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/SpaceMenuView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/SpaceMenuView.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<SpaceMenuView /> > should match snapshot 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Open space menu"
-    class="_icon-button_1215g_8 button"
+    class="_icon-button_1215g_8 SpaceMenuView-module_button"
     data-kind="primary"
     data-state="closed"
     id="radix-_r_0_"
diff --git a/packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/__snapshots__/NotificationDecoration.test.tsx.snap b/packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/__snapshots__/NotificationDecoration.test.tsx.snap
index a7c7da94f4..098f251c7b 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/__snapshots__/NotificationDecoration.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListItemView/NotificationDecoration/__snapshots__/NotificationDecoration.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<NotificationDecoration /> > snapshots > renders ActivityIndicator stor
     style="padding: 16px; background-color: var(--cpd-color-bg-canvas-default);"
   >
     <div
-      class="flex"
+      class="Flex-module_flex"
       data-testid="notification-decoration"
       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;"
     >
@@ -26,7 +26,7 @@ exports[`<NotificationDecoration /> > snapshots > renders Invited story 1`] = `
     style="padding: 16px; background-color: var(--cpd-color-bg-canvas-default);"
   >
     <div
-      class="flex"
+      class="Flex-module_flex"
       data-testid="notification-decoration"
       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;"
     >
@@ -52,7 +52,7 @@ exports[`<NotificationDecoration /> > snapshots > renders Mention story 1`] = `
     style="padding: 16px; background-color: var(--cpd-color-bg-canvas-default);"
   >
     <div
-      class="flex"
+      class="Flex-module_flex"
       data-testid="notification-decoration"
       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;"
     >
@@ -81,7 +81,7 @@ exports[`<NotificationDecoration /> > snapshots > renders MentionWithCount story
     style="padding: 16px; background-color: var(--cpd-color-bg-canvas-default);"
   >
     <div
-      class="flex"
+      class="Flex-module_flex"
       data-testid="notification-decoration"
       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;"
     >
@@ -112,7 +112,7 @@ exports[`<NotificationDecoration /> > snapshots > renders Muted story 1`] = `
     style="padding: 16px; background-color: var(--cpd-color-bg-canvas-default);"
   >
     <div
-      class="flex"
+      class="Flex-module_flex"
       data-testid="notification-decoration"
       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;"
     >
@@ -149,7 +149,7 @@ exports[`<NotificationDecoration /> > snapshots > renders NotificationWithCount
     style="padding: 16px; background-color: var(--cpd-color-bg-canvas-default);"
   >
     <div
-      class="flex"
+      class="Flex-module_flex"
       data-testid="notification-decoration"
       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;"
     >
@@ -169,7 +169,7 @@ exports[`<NotificationDecoration /> > snapshots > renders UnsentMessage story 1`
     style="padding: 16px; background-color: var(--cpd-color-bg-canvas-default);"
   >
     <div
-      class="flex"
+      class="Flex-module_flex"
       data-testid="notification-decoration"
       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;"
     >
@@ -195,7 +195,7 @@ exports[`<NotificationDecoration /> > snapshots > renders VideoCall story 1`] =
     style="padding: 16px; background-color: var(--cpd-color-bg-canvas-default);"
   >
     <div
-      class="flex"
+      class="Flex-module_flex"
       data-testid="notification-decoration"
       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;"
     >
@@ -221,7 +221,7 @@ exports[`<NotificationDecoration /> > snapshots > renders VoiceCall story 1`] =
     style="padding: 16px; background-color: var(--cpd-color-bg-canvas-default);"
   >
     <div
-      class="flex"
+      class="Flex-module_flex"
       data-testid="notification-decoration"
       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;"
     >
diff --git a/packages/shared-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
index 084ce3ec52..f2a160fb7e 100644
--- a/packages/shared-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
       aria-haspopup="menu"
       aria-label="Open room Team Updates"
       aria-selected="false"
-      class="flex roomListItem mx_RoomListItemView bold"
+      class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
       data-state="closed"
       role="option"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -19,7 +19,7 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
       type="button"
     >
       <div
-        class="flex container"
+        class="Flex-module_flex RoomListItemView-module_container"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
@@ -30,28 +30,28 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
           GE
         </div>
         <div
-          class="flex content"
+          class="Flex-module_flex RoomListItemView-module_content"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
-            class="ellipsis"
+            class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="roomName"
+              class="RoomListItemView-module_roomName"
               data-testid="room-name"
               title="Team Updates"
             >
               Team Updates
             </div>
             <div
-              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
               title="Alice: Hey everyone!"
             >
               Alice: Hey everyone!
             </div>
           </div>
           <div
-            class="flex hoverMenu"
+            class="Flex-module_flex RoomListItemView-module_hoverMenu"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
           >
             <button
@@ -121,7 +121,7 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="notificationDecoration"
+            class="RoomListItemView-module_notificationDecoration"
           />
         </div>
       </div>
@@ -141,7 +141,7 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
       aria-haspopup="menu"
       aria-label="Open room General"
       aria-selected="false"
-      class="flex roomListItem mx_RoomListItemView"
+      class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
       data-state="closed"
       role="option"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -149,7 +149,7 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
       type="button"
     >
       <div
-        class="flex container"
+        class="Flex-module_flex RoomListItemView-module_container"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
@@ -160,28 +160,28 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
           GE
         </div>
         <div
-          class="flex content"
+          class="Flex-module_flex RoomListItemView-module_content"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
-            class="ellipsis"
+            class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="roomName"
+              class="RoomListItemView-module_roomName"
               data-testid="room-name"
               title="General"
             >
               General
             </div>
             <div
-              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
               title="Alice: Hey everyone!"
             >
               Alice: Hey everyone!
             </div>
           </div>
           <div
-            class="flex hoverMenu"
+            class="Flex-module_flex RoomListItemView-module_hoverMenu"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
           >
             <button
@@ -251,7 +251,7 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="notificationDecoration"
+            class="RoomListItemView-module_notificationDecoration"
           />
         </div>
       </div>
@@ -271,7 +271,7 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
       aria-haspopup="menu"
       aria-label="Open room Secret Project invitation."
       aria-selected="false"
-      class="flex roomListItem mx_RoomListItemView"
+      class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
       data-state="closed"
       role="option"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -279,7 +279,7 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
       type="button"
     >
       <div
-        class="flex container"
+        class="Flex-module_flex RoomListItemView-module_container"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
@@ -290,28 +290,28 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
           GE
         </div>
         <div
-          class="flex content"
+          class="Flex-module_flex RoomListItemView-module_content"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
-            class="ellipsis"
+            class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="roomName"
+              class="RoomListItemView-module_roomName"
               data-testid="room-name"
               title="Secret Project"
             >
               Secret Project
             </div>
             <div
-              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
               title="Bob invited you"
             >
               Bob invited you
             </div>
           </div>
           <div
-            class="flex hoverMenu"
+            class="Flex-module_flex RoomListItemView-module_hoverMenu"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
           >
             <button
@@ -381,10 +381,10 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="notificationDecoration"
+            class="RoomListItemView-module_notificationDecoration"
           >
             <div
-              class="flex"
+              class="Flex-module_flex"
               data-testid="notification-decoration"
               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;"
             >
@@ -419,7 +419,7 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
       aria-haspopup="menu"
       aria-label="Open room General"
       aria-selected="false"
-      class="flex roomListItem mx_RoomListItemView"
+      class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
       data-state="closed"
       role="option"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -427,7 +427,7 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
       type="button"
     >
       <div
-        class="flex container"
+        class="Flex-module_flex RoomListItemView-module_container"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
@@ -438,14 +438,14 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
           GE
         </div>
         <div
-          class="flex content"
+          class="Flex-module_flex RoomListItemView-module_content"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
-            class="ellipsis"
+            class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="roomName"
+              class="RoomListItemView-module_roomName"
               data-testid="room-name"
               title="General"
             >
@@ -453,7 +453,7 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
             </div>
           </div>
           <div
-            class="flex hoverMenu"
+            class="Flex-module_flex RoomListItemView-module_hoverMenu"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
           >
             <button
@@ -523,7 +523,7 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="notificationDecoration"
+            class="RoomListItemView-module_notificationDecoration"
           />
         </div>
       </div>
@@ -543,7 +543,7 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
       aria-haspopup="menu"
       aria-label="Open room General"
       aria-selected="true"
-      class="flex roomListItem mx_RoomListItemView selected mx_RoomListItemView_selected"
+      class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_selected mx_RoomListItemView_selected"
       data-state="closed"
       role="option"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -551,7 +551,7 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
       type="button"
     >
       <div
-        class="flex container"
+        class="Flex-module_flex RoomListItemView-module_container"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
@@ -562,28 +562,28 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
           GE
         </div>
         <div
-          class="flex content"
+          class="Flex-module_flex RoomListItemView-module_content"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
-            class="ellipsis"
+            class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="roomName"
+              class="RoomListItemView-module_roomName"
               data-testid="room-name"
               title="General"
             >
               General
             </div>
             <div
-              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
               title="Alice: Hey everyone!"
             >
               Alice: Hey everyone!
             </div>
           </div>
           <div
-            class="flex hoverMenu"
+            class="Flex-module_flex RoomListItemView-module_hoverMenu"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
           >
             <button
@@ -653,7 +653,7 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="notificationDecoration"
+            class="RoomListItemView-module_notificationDecoration"
           />
         </div>
       </div>
@@ -673,7 +673,7 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
       aria-haspopup="menu"
       aria-label="Open room General with an unsent message."
       aria-selected="false"
-      class="flex roomListItem mx_RoomListItemView"
+      class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
       data-state="closed"
       role="option"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -681,7 +681,7 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
       type="button"
     >
       <div
-        class="flex container"
+        class="Flex-module_flex RoomListItemView-module_container"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
@@ -692,28 +692,28 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
           GE
         </div>
         <div
-          class="flex content"
+          class="Flex-module_flex RoomListItemView-module_content"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
-            class="ellipsis"
+            class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="roomName"
+              class="RoomListItemView-module_roomName"
               data-testid="room-name"
               title="General"
             >
               General
             </div>
             <div
-              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
               title="Failed to send message"
             >
               Failed to send message
             </div>
           </div>
           <div
-            class="flex hoverMenu"
+            class="Flex-module_flex RoomListItemView-module_hoverMenu"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
           >
             <button
@@ -783,10 +783,10 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="notificationDecoration"
+            class="RoomListItemView-module_notificationDecoration"
           >
             <div
-              class="flex"
+              class="Flex-module_flex"
               data-testid="notification-decoration"
               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;"
             >
@@ -821,7 +821,7 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
       aria-haspopup="menu"
       aria-label="Open room General"
       aria-selected="false"
-      class="flex roomListItem mx_RoomListItemView"
+      class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
       data-state="closed"
       role="option"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -829,7 +829,7 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
       type="button"
     >
       <div
-        class="flex container"
+        class="Flex-module_flex RoomListItemView-module_container"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
@@ -840,28 +840,28 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
           GE
         </div>
         <div
-          class="flex content"
+          class="Flex-module_flex RoomListItemView-module_content"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
-            class="ellipsis"
+            class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="roomName"
+              class="RoomListItemView-module_roomName"
               data-testid="room-name"
               title="General"
             >
               General
             </div>
             <div
-              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
               title="Alice: Hey everyone!"
             >
               Alice: Hey everyone!
             </div>
           </div>
           <div
-            class="flex hoverMenu"
+            class="Flex-module_flex RoomListItemView-module_hoverMenu"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
           >
             <button
@@ -931,7 +931,7 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="notificationDecoration"
+            class="RoomListItemView-module_notificationDecoration"
           />
         </div>
       </div>
@@ -951,7 +951,7 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
       aria-haspopup="menu"
       aria-label="Open room General with 1 unread mention."
       aria-selected="false"
-      class="flex roomListItem mx_RoomListItemView bold"
+      class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
       data-state="closed"
       role="option"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -959,7 +959,7 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
       type="button"
     >
       <div
-        class="flex container"
+        class="Flex-module_flex RoomListItemView-module_container"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
@@ -970,28 +970,28 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
           GE
         </div>
         <div
-          class="flex content"
+          class="Flex-module_flex RoomListItemView-module_content"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
-            class="ellipsis"
+            class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="roomName"
+              class="RoomListItemView-module_roomName"
               data-testid="room-name"
               title="General"
             >
               General
             </div>
             <div
-              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
               title="Alice: Hey everyone!"
             >
               Alice: Hey everyone!
             </div>
           </div>
           <div
-            class="flex hoverMenu"
+            class="Flex-module_flex RoomListItemView-module_hoverMenu"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
           >
             <button
@@ -1061,10 +1061,10 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="notificationDecoration"
+            class="RoomListItemView-module_notificationDecoration"
           >
             <div
-              class="flex"
+              class="Flex-module_flex"
               data-testid="notification-decoration"
               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;"
             >
@@ -1104,7 +1104,7 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
       aria-haspopup="menu"
       aria-label="Open room General with 3 unread messages."
       aria-selected="false"
-      class="flex roomListItem mx_RoomListItemView bold"
+      class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
       data-state="closed"
       role="option"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -1112,7 +1112,7 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
       type="button"
     >
       <div
-        class="flex container"
+        class="Flex-module_flex RoomListItemView-module_container"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
@@ -1123,28 +1123,28 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
           GE
         </div>
         <div
-          class="flex content"
+          class="Flex-module_flex RoomListItemView-module_content"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
-            class="ellipsis"
+            class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="roomName"
+              class="RoomListItemView-module_roomName"
               data-testid="room-name"
               title="General"
             >
               General
             </div>
             <div
-              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
               title="Alice: Hey everyone!"
             >
               Alice: Hey everyone!
             </div>
           </div>
           <div
-            class="flex hoverMenu"
+            class="Flex-module_flex RoomListItemView-module_hoverMenu"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
           >
             <button
@@ -1214,10 +1214,10 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="notificationDecoration"
+            class="RoomListItemView-module_notificationDecoration"
           >
             <div
-              class="flex"
+              class="Flex-module_flex"
               data-testid="notification-decoration"
               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;"
             >
@@ -1246,7 +1246,7 @@ exports[`<RoomListItemView /> > renders WithVideoCall story 1`] = `
       aria-haspopup="menu"
       aria-label="Open room General with a video call."
       aria-selected="false"
-      class="flex roomListItem mx_RoomListItemView bold"
+      class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
       data-state="closed"
       role="option"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -1254,7 +1254,7 @@ exports[`<RoomListItemView /> > renders WithVideoCall story 1`] = `
       type="button"
     >
       <div
-        class="flex container"
+        class="Flex-module_flex RoomListItemView-module_container"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
@@ -1265,28 +1265,28 @@ exports[`<RoomListItemView /> > renders WithVideoCall story 1`] = `
           GE
         </div>
         <div
-          class="flex content"
+          class="Flex-module_flex RoomListItemView-module_content"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
-            class="ellipsis"
+            class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="roomName"
+              class="RoomListItemView-module_roomName"
               data-testid="room-name"
               title="General"
             >
               General
             </div>
             <div
-              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
               title="Alice: Hey everyone!"
             >
               Alice: Hey everyone!
             </div>
           </div>
           <div
-            class="flex hoverMenu"
+            class="Flex-module_flex RoomListItemView-module_hoverMenu"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
           >
             <button
@@ -1356,10 +1356,10 @@ exports[`<RoomListItemView /> > renders WithVideoCall story 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="notificationDecoration"
+            class="RoomListItemView-module_notificationDecoration"
           >
             <div
-              class="flex"
+              class="Flex-module_flex"
               data-testid="notification-decoration"
               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;"
             >
@@ -1394,7 +1394,7 @@ exports[`<RoomListItemView /> > renders WithVoiceCall story 1`] = `
       aria-haspopup="menu"
       aria-label="Open room General with a voice call."
       aria-selected="false"
-      class="flex roomListItem mx_RoomListItemView bold"
+      class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
       data-state="closed"
       role="option"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -1402,7 +1402,7 @@ exports[`<RoomListItemView /> > renders WithVoiceCall story 1`] = `
       type="button"
     >
       <div
-        class="flex container"
+        class="Flex-module_flex RoomListItemView-module_container"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
@@ -1413,28 +1413,28 @@ exports[`<RoomListItemView /> > renders WithVoiceCall story 1`] = `
           GE
         </div>
         <div
-          class="flex content"
+          class="Flex-module_flex RoomListItemView-module_content"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <div
-            class="ellipsis"
+            class="RoomListItemView-module_ellipsis"
           >
             <div
-              class="roomName"
+              class="RoomListItemView-module_roomName"
               data-testid="room-name"
               title="General"
             >
               General
             </div>
             <div
-              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
               title="Alice: Hey everyone!"
             >
               Alice: Hey everyone!
             </div>
           </div>
           <div
-            class="flex hoverMenu"
+            class="Flex-module_flex RoomListItemView-module_hoverMenu"
             style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
           >
             <button
@@ -1504,10 +1504,10 @@ exports[`<RoomListItemView /> > renders WithVoiceCall story 1`] = `
           </div>
           <div
             aria-hidden="true"
-            class="notificationDecoration"
+            class="RoomListItemView-module_notificationDecoration"
           >
             <div
-              class="flex"
+              class="Flex-module_flex"
               data-testid="notification-decoration"
               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;"
             >
diff --git a/packages/shared-components/src/room-list/RoomListPrimaryFilters/__snapshots__/RoomListPrimaryFilters.test.tsx.snap b/packages/shared-components/src/room-list/RoomListPrimaryFilters/__snapshots__/RoomListPrimaryFilters.test.tsx.snap
index 74c281bde5..f4f6fa8b0f 100644
--- a/packages/shared-components/src/room-list/RoomListPrimaryFilters/__snapshots__/RoomListPrimaryFilters.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListPrimaryFilters/__snapshots__/RoomListPrimaryFilters.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<RoomListPrimaryFilters /> stories > snapshots > renders Default story 1`] = `
 <div>
   <div
-    class="flex roomListPrimaryFilters"
+    class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
     data-testid="primary-filters"
     style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
   >
@@ -11,7 +11,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders Default story
       aria-controls="_r_0_"
       aria-expanded="false"
       aria-label="Expand filter list"
-      class="_icon-button_1215g_8 iconButton"
+      class="_icon-button_1215g_8 RoomListPrimaryFilters-module_iconButton"
       data-kind="secondary"
       role="button"
       style="--cpd-icon-button-size: 28px;"
@@ -36,7 +36,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders Default story
     </button>
     <div
       aria-label="Room list filters"
-      class="flex list"
+      class="Flex-module_flex RoomListPrimaryFilters-module_list"
       id="_r_0_"
       role="listbox"
       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: wrap;"
@@ -115,7 +115,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NarrowContaine
     style="width: 180px; border: 1px dashed var(--cpd-color-border-interactive-secondary);"
   >
     <div
-      class="flex roomListPrimaryFilters"
+      class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
       data-testid="primary-filters"
       style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
@@ -123,7 +123,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NarrowContaine
         aria-controls="_r_3_"
         aria-expanded="false"
         aria-label="Expand filter list"
-        class="_icon-button_1215g_8 iconButton"
+        class="_icon-button_1215g_8 RoomListPrimaryFilters-module_iconButton"
         data-kind="secondary"
         role="button"
         style="--cpd-icon-button-size: 28px;"
@@ -148,7 +148,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NarrowContaine
       </button>
       <div
         aria-label="Room list filters"
-        class="flex list"
+        class="Flex-module_flex RoomListPrimaryFilters-module_list"
         id="_r_3_"
         role="listbox"
         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: wrap;"
@@ -192,7 +192,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NarrowWithActi
     style="width: 180px; border: 1px dashed var(--cpd-color-border-interactive-secondary);"
   >
     <div
-      class="flex roomListPrimaryFilters"
+      class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
       data-testid="primary-filters"
       style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
@@ -200,7 +200,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NarrowWithActi
         aria-controls="_r_4_"
         aria-expanded="false"
         aria-label="Expand filter list"
-        class="_icon-button_1215g_8 iconButton"
+        class="_icon-button_1215g_8 RoomListPrimaryFilters-module_iconButton"
         data-kind="secondary"
         role="button"
         style="--cpd-icon-button-size: 28px;"
@@ -225,7 +225,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NarrowWithActi
       </button>
       <div
         aria-label="Room list filters"
-        class="flex list"
+        class="Flex-module_flex RoomListPrimaryFilters-module_list"
         id="_r_4_"
         role="listbox"
         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: wrap;"
@@ -263,13 +263,13 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NarrowWithActi
 exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NoFilters story 1`] = `
 <div>
   <div
-    class="flex roomListPrimaryFilters"
+    class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
     data-testid="primary-filters"
     style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
   >
     <div
       aria-label="Room list filters"
-      class="flex list"
+      class="Flex-module_flex RoomListPrimaryFilters-module_list"
       id="_r_2_"
       role="listbox"
       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: wrap;"
@@ -281,7 +281,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NoFilters stor
 exports[`<RoomListPrimaryFilters /> stories > snapshots > renders PeopleSelected story 1`] = `
 <div>
   <div
-    class="flex roomListPrimaryFilters"
+    class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
     data-testid="primary-filters"
     style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
   >
@@ -289,7 +289,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders PeopleSelected
       aria-controls="_r_1_"
       aria-expanded="false"
       aria-label="Expand filter list"
-      class="_icon-button_1215g_8 iconButton"
+      class="_icon-button_1215g_8 RoomListPrimaryFilters-module_iconButton"
       data-kind="secondary"
       role="button"
       style="--cpd-icon-button-size: 28px;"
@@ -314,7 +314,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders PeopleSelected
     </button>
     <div
       aria-label="Room list filters"
-      class="flex list"
+      class="Flex-module_flex RoomListPrimaryFilters-module_list"
       id="_r_1_"
       role="listbox"
       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: wrap;"
diff --git a/packages/shared-components/src/room-list/RoomListSearchView/__snapshots__/RoomListSearchView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListSearchView/__snapshots__/RoomListSearchView.test.tsx.snap
index 6c6a8ba373..1b243e47d0 100644
--- a/packages/shared-components/src/room-list/RoomListSearchView/__snapshots__/RoomListSearchView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListSearchView/__snapshots__/RoomListSearchView.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`RoomListSearchView > Storybook snapshots > renders the default state 1`] = `
 <div>
   <div
-    class="flex view"
+    class="Flex-module_flex RoomListSearchView-module_view"
     data-testid="room-list-search"
     role="search"
     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_13vu4_8 search _has-icon_13vu4_60"
+      class="_button_13vu4_8 RoomListSearchView-module_search _has-icon_13vu4_60"
       data-kind="secondary"
       data-size="sm"
       id="room-list-search-button"
@@ -29,11 +29,11 @@ exports[`RoomListSearchView > Storybook snapshots > renders the default state 1`
         />
       </svg>
       <span
-        class="flex search_container"
+        class="Flex-module_flex RoomListSearchView-module_search_container"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <span
-          class="search_text"
+          class="RoomListSearchView-module_search_text"
         >
           Search
         </span>
@@ -70,13 +70,13 @@ exports[`RoomListSearchView > Storybook snapshots > renders the default state 1`
 exports[`RoomListSearchView > Storybook snapshots > renders with all buttons visible 1`] = `
 <div>
   <div
-    class="flex view"
+    class="Flex-module_flex RoomListSearchView-module_view"
     data-testid="room-list-search"
     role="search"
     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_13vu4_8 search _has-icon_13vu4_60"
+      class="_button_13vu4_8 RoomListSearchView-module_search _has-icon_13vu4_60"
       data-kind="secondary"
       data-size="sm"
       id="room-list-search-button"
@@ -96,11 +96,11 @@ exports[`RoomListSearchView > Storybook snapshots > renders with all buttons vis
         />
       </svg>
       <span
-        class="flex search_container"
+        class="Flex-module_flex RoomListSearchView-module_search_container"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <span
-          class="search_text"
+          class="RoomListSearchView-module_search_text"
         >
           Search
         </span>
@@ -158,13 +158,13 @@ exports[`RoomListSearchView > Storybook snapshots > renders with all buttons vis
 exports[`RoomListSearchView > Storybook snapshots > renders with dial pad button 1`] = `
 <div>
   <div
-    class="flex view"
+    class="Flex-module_flex RoomListSearchView-module_view"
     data-testid="room-list-search"
     role="search"
     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_13vu4_8 search _has-icon_13vu4_60"
+      class="_button_13vu4_8 RoomListSearchView-module_search _has-icon_13vu4_60"
       data-kind="secondary"
       data-size="sm"
       id="room-list-search-button"
@@ -184,11 +184,11 @@ exports[`RoomListSearchView > Storybook snapshots > renders with dial pad button
         />
       </svg>
       <span
-        class="flex search_container"
+        class="Flex-module_flex RoomListSearchView-module_search_container"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <span
-          class="search_text"
+          class="RoomListSearchView-module_search_text"
         >
           Search
         </span>
@@ -246,13 +246,13 @@ exports[`RoomListSearchView > Storybook snapshots > renders with dial pad button
 exports[`RoomListSearchView > Storybook snapshots > renders without explore button 1`] = `
 <div>
   <div
-    class="flex view"
+    class="Flex-module_flex RoomListSearchView-module_view"
     data-testid="room-list-search"
     role="search"
     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_13vu4_8 search _has-icon_13vu4_60"
+      class="_button_13vu4_8 RoomListSearchView-module_search _has-icon_13vu4_60"
       data-kind="secondary"
       data-size="sm"
       id="room-list-search-button"
@@ -272,11 +272,11 @@ exports[`RoomListSearchView > Storybook snapshots > renders without explore butt
         />
       </svg>
       <span
-        class="flex search_container"
+        class="Flex-module_flex RoomListSearchView-module_search_container"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <span
-          class="search_text"
+          class="RoomListSearchView-module_search_text"
         >
           Search
         </span>
diff --git a/packages/shared-components/src/room-list/RoomListSectionHeaderView/__snapshots__/RoomListSectionHeaderView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListSectionHeaderView/__snapshots__/RoomListSectionHeaderView.test.tsx.snap
index 753bfe632b..2cbf196de1 100644
--- a/packages/shared-components/src/room-list/RoomListSectionHeaderView/__snapshots__/RoomListSectionHeaderView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListSectionHeaderView/__snapshots__/RoomListSectionHeaderView.test.tsx.snap
@@ -17,13 +17,13 @@ exports[`<RoomListSectionHeaderView /> stories > renders Default story 1`] = `
       <button
         aria-expanded="true"
         aria-label="Toggle Favourites section"
-        class="header"
+        class="RoomListSectionHeaderView-module_header"
         role="gridcell"
         tabindex="-1"
         type="button"
       >
         <div
-          class="flex container"
+          class="Flex-module_flex RoomListSectionHeaderView-module_container"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
         >
           <svg
@@ -38,7 +38,7 @@ exports[`<RoomListSectionHeaderView /> stories > renders Default story 1`] = `
             />
           </svg>
           <span
-            class="title"
+            class="RoomListSectionHeaderView-module_title"
           >
             Favourites
           </span>
diff --git a/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap
index 222cdbf7e4..388c0878ff 100644
--- a/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap
@@ -7,13 +7,13 @@ exports[`<RoomListView /> > renders Default story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_0_"
           role="listbox"
           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: wrap;"
@@ -85,7 +85,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="1"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold firstItem"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -93,7 +93,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -104,28 +104,28 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   GE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="General"
                     >
                       General
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in General"
                     >
                       Last message in General
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -195,10 +195,10 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -234,7 +234,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="2"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -242,7 +242,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -253,14 +253,14 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   RA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Random"
                     >
@@ -268,7 +268,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -338,7 +338,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -356,7 +356,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="3"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -364,7 +364,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -375,28 +375,28 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   EN
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Engineering"
                     >
                       Engineering
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Engineering"
                     >
                       Last message in Engineering
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -466,7 +466,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -484,7 +484,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="4"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -492,7 +492,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -503,14 +503,14 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   DE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Design"
                     >
@@ -518,7 +518,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -588,7 +588,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -606,7 +606,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="5"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -614,7 +614,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -625,28 +625,28 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   PR
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Product"
                     >
                       Product
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Product"
                     >
                       Last message in Product
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -716,7 +716,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -734,7 +734,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="6"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -742,7 +742,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -753,14 +753,14 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   MA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Marketing"
                     >
@@ -768,7 +768,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -838,10 +838,10 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -879,7 +879,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="7"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -887,7 +887,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -898,28 +898,28 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   SA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Sales"
                     >
                       Sales
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Sales"
                     >
                       Last message in Sales
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -989,7 +989,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -1007,7 +1007,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="8"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -1015,7 +1015,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -1026,14 +1026,14 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   SU
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Support"
                     >
@@ -1041,7 +1041,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -1111,7 +1111,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -1129,7 +1129,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="9"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -1137,7 +1137,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -1148,28 +1148,28 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   AN
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Announcements"
                     >
                       Announcements
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Announcements"
                     >
                       Last message in Announcements
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -1239,7 +1239,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -1257,7 +1257,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="10"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -1265,7 +1265,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -1276,14 +1276,14 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   OF
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Off-topic"
                     >
@@ -1291,7 +1291,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -1361,7 +1361,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -1379,7 +1379,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="11"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -1387,7 +1387,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -1398,28 +1398,28 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   TE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Team Alpha"
                     >
                       Team Alpha
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Team Alpha"
                     >
                       Last message in Team Alpha
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -1489,10 +1489,10 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -1530,7 +1530,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="12"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -1538,7 +1538,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -1549,14 +1549,14 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   TE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Team Beta"
                     >
@@ -1564,7 +1564,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -1634,7 +1634,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -1652,7 +1652,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="13"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -1660,7 +1660,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -1671,28 +1671,28 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   PR
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Project X"
                     >
                       Project X
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Project X"
                     >
                       Last message in Project X
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -1762,7 +1762,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -1780,7 +1780,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="14"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -1788,7 +1788,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -1799,14 +1799,14 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   PR
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Project Y"
                     >
@@ -1814,7 +1814,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -1884,7 +1884,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -1902,7 +1902,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="15"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -1910,7 +1910,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -1921,28 +1921,28 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   WA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Water Cooler"
                     >
                       Water Cooler
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Water Cooler"
                     >
                       Last message in Water Cooler
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -2012,7 +2012,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -2030,7 +2030,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="16"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -2038,7 +2038,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -2049,14 +2049,14 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   FE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Feedback"
                     >
@@ -2064,7 +2064,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -2134,10 +2134,10 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -2175,7 +2175,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="17"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -2183,7 +2183,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -2194,28 +2194,28 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   ID
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Ideas"
                     >
                       Ideas
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Ideas"
                     >
                       Last message in Ideas
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -2285,7 +2285,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -2303,7 +2303,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="18"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -2311,7 +2311,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -2322,14 +2322,14 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   BU
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Bugs"
                     >
@@ -2337,7 +2337,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -2407,7 +2407,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -2425,7 +2425,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="19"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -2433,7 +2433,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -2444,28 +2444,28 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   FE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Features"
                     >
                       Features
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Features"
                     >
                       Last message in Features
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -2535,7 +2535,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -2553,7 +2553,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               aria-posinset="20"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView lastItem"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_lastItem"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -2561,7 +2561,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -2572,14 +2572,14 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   RE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Releases"
                     >
@@ -2587,7 +2587,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -2657,7 +2657,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -2677,13 +2677,13 @@ exports[`<RoomListView /> > renders Empty story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_a2_"
           role="listbox"
           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: wrap;"
@@ -2728,22 +2728,22 @@ exports[`<RoomListView /> > renders Empty story 1`] = `
       </div>
     </div>
     <div
-      class="flex genericPlaceholder"
+      class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
       data-testid="empty-room-list"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
       <span
-        class="title"
+        class="RoomListEmptyStateView-module_title"
       >
         No chats yet
       </span>
       <span
-        class="description"
+        class="RoomListEmptyStateView-module_description"
       >
         Get started by messaging someone or by creating a room
       </span>
       <div
-        class="flex defaultPlaceholder"
+        class="Flex-module_flex RoomListEmptyStateView-module_defaultPlaceholder"
         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
@@ -2801,13 +2801,13 @@ exports[`<RoomListView /> > renders EmptyFavouriteFilter story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_1q9_"
           role="listbox"
           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: wrap;"
@@ -2834,17 +2834,17 @@ exports[`<RoomListView /> > renders EmptyFavouriteFilter story 1`] = `
       </div>
     </div>
     <div
-      class="flex genericPlaceholder"
+      class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
       data-testid="empty-room-list"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
       <span
-        class="title"
+        class="RoomListEmptyStateView-module_title"
       >
         You don't have favourite chats yet
       </span>
       <span
-        class="description"
+        class="RoomListEmptyStateView-module_description"
       >
         You can add a chat to your favourites in the chat settings
       </span>
@@ -2860,13 +2860,13 @@ exports[`<RoomListView /> > renders EmptyInvitesFilter story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_1qd_"
           role="listbox"
           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: wrap;"
@@ -2893,12 +2893,12 @@ exports[`<RoomListView /> > renders EmptyInvitesFilter story 1`] = `
       </div>
     </div>
     <div
-      class="flex genericPlaceholder"
+      class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
       data-testid="empty-room-list"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
       <span
-        class="title"
+        class="RoomListEmptyStateView-module_title"
       >
         You don't have any unread invites
       </span>
@@ -2923,13 +2923,13 @@ exports[`<RoomListView /> > renders EmptyLowPriorityFilter story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_1qf_"
           role="listbox"
           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: wrap;"
@@ -2956,12 +2956,12 @@ exports[`<RoomListView /> > renders EmptyLowPriorityFilter story 1`] = `
       </div>
     </div>
     <div
-      class="flex genericPlaceholder"
+      class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
       data-testid="empty-room-list"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
       <span
-        class="title"
+        class="RoomListEmptyStateView-module_title"
       >
         You don't have any low priority rooms
       </span>
@@ -2986,13 +2986,13 @@ exports[`<RoomListView /> > renders EmptyMentionsFilter story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_1qe_"
           role="listbox"
           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: wrap;"
@@ -3019,12 +3019,12 @@ exports[`<RoomListView /> > renders EmptyMentionsFilter story 1`] = `
       </div>
     </div>
     <div
-      class="flex genericPlaceholder"
+      class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
       data-testid="empty-room-list"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
       <span
-        class="title"
+        class="RoomListEmptyStateView-module_title"
       >
         You don't have any unread mentions
       </span>
@@ -3049,13 +3049,13 @@ exports[`<RoomListView /> > renders EmptyPeopleFilter story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_1qa_"
           role="listbox"
           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: wrap;"
@@ -3082,17 +3082,17 @@ exports[`<RoomListView /> > renders EmptyPeopleFilter story 1`] = `
       </div>
     </div>
     <div
-      class="flex genericPlaceholder"
+      class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
       data-testid="empty-room-list"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
       <span
-        class="title"
+        class="RoomListEmptyStateView-module_title"
       >
         You don’t have direct chats with anyone yet
       </span>
       <span
-        class="description"
+        class="RoomListEmptyStateView-module_description"
       >
         You can deselect filters in order to see your other chats
       </span>
@@ -3108,13 +3108,13 @@ exports[`<RoomListView /> > renders EmptyRoomsFilter story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_1qb_"
           role="listbox"
           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: wrap;"
@@ -3141,17 +3141,17 @@ exports[`<RoomListView /> > renders EmptyRoomsFilter story 1`] = `
       </div>
     </div>
     <div
-      class="flex genericPlaceholder"
+      class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
       data-testid="empty-room-list"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
       <span
-        class="title"
+        class="RoomListEmptyStateView-module_title"
       >
         You’re not in any room yet
       </span>
       <span
-        class="description"
+        class="RoomListEmptyStateView-module_description"
       >
         You can deselect filters in order to see your other chats
       </span>
@@ -3167,13 +3167,13 @@ exports[`<RoomListView /> > renders EmptyUnreadFilter story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_1qc_"
           role="listbox"
           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: wrap;"
@@ -3200,12 +3200,12 @@ exports[`<RoomListView /> > renders EmptyUnreadFilter story 1`] = `
       </div>
     </div>
     <div
-      class="flex genericPlaceholder"
+      class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
       data-testid="empty-room-list"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
       <span
-        class="title"
+        class="RoomListEmptyStateView-module_title"
       >
         Congrats! You don’t have any unread messages
       </span>
@@ -3230,13 +3230,13 @@ exports[`<RoomListView /> > renders EmptyWithoutCreatePermission story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_a3_"
           role="listbox"
           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: wrap;"
@@ -3281,22 +3281,22 @@ exports[`<RoomListView /> > renders EmptyWithoutCreatePermission story 1`] = `
       </div>
     </div>
     <div
-      class="flex genericPlaceholder"
+      class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
       data-testid="empty-room-list"
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
       <span
-        class="title"
+        class="RoomListEmptyStateView-module_title"
       >
         No chats yet
       </span>
       <span
-        class="description"
+        class="RoomListEmptyStateView-module_description"
       >
         Get started by messaging someone
       </span>
       <div
-        class="flex defaultPlaceholder"
+        class="Flex-module_flex RoomListEmptyStateView-module_defaultPlaceholder"
         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
@@ -3333,13 +3333,13 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_l6_"
           role="listbox"
           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: wrap;"
@@ -3411,7 +3411,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="1"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView bold firstItem"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -3419,7 +3419,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -3430,28 +3430,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   GE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="General"
                     >
                       General
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in General"
                     >
                       Last message in General
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -3521,10 +3521,10 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -3560,7 +3560,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="2"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -3568,7 +3568,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -3579,14 +3579,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   RA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Random"
                     >
@@ -3594,7 +3594,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -3664,7 +3664,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -3682,7 +3682,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="3"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -3690,7 +3690,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -3701,28 +3701,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   EN
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Engineering"
                     >
                       Engineering
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Engineering"
                     >
                       Last message in Engineering
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -3792,7 +3792,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -3810,7 +3810,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="4"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -3818,7 +3818,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -3829,14 +3829,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   DE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Design"
                     >
@@ -3844,7 +3844,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -3914,7 +3914,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -3932,7 +3932,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="5"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -3940,7 +3940,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -3951,28 +3951,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   PR
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Product"
                     >
                       Product
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Product"
                     >
                       Last message in Product
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -4042,7 +4042,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -4060,7 +4060,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="6"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -4068,7 +4068,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -4079,14 +4079,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   MA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Marketing"
                     >
@@ -4094,7 +4094,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -4164,10 +4164,10 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -4205,7 +4205,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="7"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -4213,7 +4213,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -4224,28 +4224,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   SA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Sales"
                     >
                       Sales
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Sales"
                     >
                       Last message in Sales
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -4315,7 +4315,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -4333,7 +4333,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="8"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -4341,7 +4341,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -4352,14 +4352,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   SU
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Support"
                     >
@@ -4367,7 +4367,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -4437,7 +4437,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -4455,7 +4455,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="9"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -4463,7 +4463,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -4474,28 +4474,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   AN
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Announcements"
                     >
                       Announcements
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Announcements"
                     >
                       Last message in Announcements
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -4565,7 +4565,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -4583,7 +4583,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="10"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -4591,7 +4591,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -4602,14 +4602,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   OF
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Off-topic"
                     >
@@ -4617,7 +4617,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -4687,7 +4687,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -4705,7 +4705,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="11"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -4713,7 +4713,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -4724,28 +4724,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   TE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Team Alpha"
                     >
                       Team Alpha
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Team Alpha"
                     >
                       Last message in Team Alpha
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -4815,10 +4815,10 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -4856,7 +4856,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="12"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -4864,7 +4864,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -4875,14 +4875,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   TE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Team Beta"
                     >
@@ -4890,7 +4890,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -4960,7 +4960,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -4978,7 +4978,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="13"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -4986,7 +4986,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -4997,28 +4997,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   PR
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Project X"
                     >
                       Project X
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Project X"
                     >
                       Last message in Project X
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -5088,7 +5088,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -5106,7 +5106,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="14"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -5114,7 +5114,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -5125,14 +5125,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   PR
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Project Y"
                     >
@@ -5140,7 +5140,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -5210,7 +5210,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -5228,7 +5228,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="15"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -5236,7 +5236,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -5247,28 +5247,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   WA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Water Cooler"
                     >
                       Water Cooler
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Water Cooler"
                     >
                       Last message in Water Cooler
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -5338,7 +5338,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -5356,7 +5356,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="16"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -5364,7 +5364,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -5375,14 +5375,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   FE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Feedback"
                     >
@@ -5390,7 +5390,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -5460,10 +5460,10 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -5501,7 +5501,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="17"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -5509,7 +5509,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -5520,28 +5520,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   ID
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Ideas"
                     >
                       Ideas
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Ideas"
                     >
                       Last message in Ideas
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -5611,7 +5611,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -5629,7 +5629,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="18"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -5637,7 +5637,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -5648,14 +5648,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   BU
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Bugs"
                     >
@@ -5663,7 +5663,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -5733,7 +5733,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -5751,7 +5751,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="19"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -5759,7 +5759,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -5770,28 +5770,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   FE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Features"
                     >
                       Features
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Features"
                     >
                       Last message in Features
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -5861,7 +5861,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -5879,7 +5879,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="20"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -5887,7 +5887,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -5898,14 +5898,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   RE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Releases"
                     >
@@ -5913,7 +5913,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -5983,7 +5983,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -6001,7 +6001,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="21"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -6009,7 +6009,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -6020,28 +6020,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   GE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="General"
                     >
                       General
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in General"
                     >
                       Last message in General
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -6111,10 +6111,10 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -6152,7 +6152,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="22"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -6160,7 +6160,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -6171,14 +6171,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   RA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Random"
                     >
@@ -6186,7 +6186,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -6256,7 +6256,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -6274,7 +6274,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="23"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -6282,7 +6282,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -6293,28 +6293,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   EN
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Engineering"
                     >
                       Engineering
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Engineering"
                     >
                       Last message in Engineering
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -6384,7 +6384,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -6402,7 +6402,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="24"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -6410,7 +6410,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -6421,14 +6421,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   DE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Design"
                     >
@@ -6436,7 +6436,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -6506,7 +6506,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -6524,7 +6524,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="25"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -6532,7 +6532,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -6543,28 +6543,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   PR
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Product"
                     >
                       Product
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Product"
                     >
                       Last message in Product
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -6634,7 +6634,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -6652,7 +6652,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="26"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -6660,7 +6660,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -6671,14 +6671,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   MA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Marketing"
                     >
@@ -6686,7 +6686,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -6756,10 +6756,10 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -6797,7 +6797,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="27"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -6805,7 +6805,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -6816,28 +6816,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   SA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Sales"
                     >
                       Sales
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Sales"
                     >
                       Last message in Sales
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -6907,7 +6907,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -6925,7 +6925,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="28"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -6933,7 +6933,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -6944,14 +6944,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   SU
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Support"
                     >
@@ -6959,7 +6959,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -7029,7 +7029,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -7047,7 +7047,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="29"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -7055,7 +7055,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -7066,28 +7066,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   AN
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Announcements"
                     >
                       Announcements
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Announcements"
                     >
                       Last message in Announcements
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -7157,7 +7157,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -7175,7 +7175,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="30"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -7183,7 +7183,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -7194,14 +7194,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   OF
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Off-topic"
                     >
@@ -7209,7 +7209,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -7279,7 +7279,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -7297,7 +7297,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="31"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -7305,7 +7305,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -7316,28 +7316,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   TE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Team Alpha"
                     >
                       Team Alpha
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Team Alpha"
                     >
                       Last message in Team Alpha
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -7407,10 +7407,10 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -7448,7 +7448,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="32"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -7456,7 +7456,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -7467,14 +7467,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   TE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Team Beta"
                     >
@@ -7482,7 +7482,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -7552,7 +7552,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -7570,7 +7570,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="33"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -7578,7 +7578,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -7589,28 +7589,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   PR
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Project X"
                     >
                       Project X
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Project X"
                     >
                       Last message in Project X
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -7680,7 +7680,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -7698,7 +7698,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="34"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -7706,7 +7706,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -7717,14 +7717,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   PR
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Project Y"
                     >
@@ -7732,7 +7732,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -7802,7 +7802,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -7820,7 +7820,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="35"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -7828,7 +7828,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -7839,28 +7839,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   WA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Water Cooler"
                     >
                       Water Cooler
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Water Cooler"
                     >
                       Last message in Water Cooler
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -7930,7 +7930,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -7948,7 +7948,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="36"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -7956,7 +7956,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -7967,14 +7967,14 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   FE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Feedback"
                     >
@@ -7982,7 +7982,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -8052,10 +8052,10 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -8093,7 +8093,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               aria-posinset="37"
               aria-selected="false"
               aria-setsize="100"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -8101,7 +8101,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -8112,28 +8112,28 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   ID
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Ideas"
                     >
                       Ideas
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Ideas"
                     >
                       Last message in Ideas
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -8203,7 +8203,7 @@ exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -8223,13 +8223,13 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_18o_"
           role="listbox"
           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: wrap;"
@@ -8307,13 +8307,13 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
               <button
                 aria-expanded="true"
                 aria-label="Toggle Favourites section"
-                class="header firstHeader"
+                class="RoomListSectionHeaderView-module_header RoomListSectionHeaderView-module_firstHeader"
                 role="gridcell"
                 tabindex="-1"
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListSectionHeaderView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
                 >
                   <svg
@@ -8328,7 +8328,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     />
                   </svg>
                   <span
-                    class="title"
+                    class="RoomListSectionHeaderView-module_title"
                   >
                     Favourites
                   </span>
@@ -8352,7 +8352,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room General"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView bold"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -8360,7 +8360,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -8371,28 +8371,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     GE
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="General"
                       >
                         General
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in General"
                       >
                         Last message in General
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -8462,10 +8462,10 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     >
                       <div
-                        class="flex"
+                        class="Flex-module_flex"
                         data-testid="notification-decoration"
                         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;"
                       >
@@ -8506,7 +8506,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Random"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -8514,7 +8514,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -8525,14 +8525,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     RA
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Random"
                       >
@@ -8540,7 +8540,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -8610,7 +8610,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -8633,7 +8633,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Engineering"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -8641,7 +8641,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -8652,28 +8652,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     EN
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Engineering"
                       >
                         Engineering
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Engineering"
                       >
                         Last message in Engineering
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -8743,7 +8743,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -8766,7 +8766,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Design"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView bold"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -8774,7 +8774,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -8785,14 +8785,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     DE
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Design"
                       >
@@ -8800,7 +8800,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -8870,7 +8870,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -8893,7 +8893,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Product"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -8901,7 +8901,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -8912,28 +8912,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     PR
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Product"
                       >
                         Product
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Product"
                       >
                         Last message in Product
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -9003,7 +9003,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -9026,7 +9026,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Marketing with 5 unread mentions."
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -9034,7 +9034,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -9045,14 +9045,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     MA
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Marketing"
                       >
@@ -9060,7 +9060,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -9130,10 +9130,10 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     >
                       <div
-                        class="flex"
+                        class="Flex-module_flex"
                         data-testid="notification-decoration"
                         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;"
                       >
@@ -9176,7 +9176,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Sales"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView bold"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -9184,7 +9184,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -9195,28 +9195,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     SA
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Sales"
                       >
                         Sales
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Sales"
                       >
                         Last message in Sales
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -9286,7 +9286,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -9309,7 +9309,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Support"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -9317,7 +9317,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -9328,14 +9328,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     SU
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Support"
                       >
@@ -9343,7 +9343,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -9413,7 +9413,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -9436,7 +9436,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Announcements"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -9444,7 +9444,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -9455,28 +9455,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     AN
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Announcements"
                       >
                         Announcements
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Announcements"
                       >
                         Last message in Announcements
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -9546,7 +9546,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -9569,7 +9569,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Off-topic"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView bold"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -9577,7 +9577,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -9588,14 +9588,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     OF
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Off-topic"
                       >
@@ -9603,7 +9603,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -9673,7 +9673,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -9696,7 +9696,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Team Alpha with 10 unread mentions."
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -9704,7 +9704,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -9715,28 +9715,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     TE
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Team Alpha"
                       >
                         Team Alpha
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Team Alpha"
                       >
                         Last message in Team Alpha
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -9806,10 +9806,10 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     >
                       <div
-                        class="flex"
+                        class="Flex-module_flex"
                         data-testid="notification-decoration"
                         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;"
                       >
@@ -9852,7 +9852,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Team Beta"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -9860,7 +9860,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -9871,14 +9871,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     TE
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Team Beta"
                       >
@@ -9886,7 +9886,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -9956,7 +9956,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -9979,7 +9979,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Project X"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView bold"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -9987,7 +9987,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -9998,28 +9998,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     PR
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Project X"
                       >
                         Project X
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Project X"
                       >
                         Last message in Project X
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -10089,7 +10089,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -10112,7 +10112,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Project Y"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -10120,7 +10120,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -10131,14 +10131,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     PR
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Project Y"
                       >
@@ -10146,7 +10146,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -10216,7 +10216,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -10239,7 +10239,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Water Cooler"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -10247,7 +10247,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -10258,28 +10258,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     WA
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Water Cooler"
                       >
                         Water Cooler
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Water Cooler"
                       >
                         Last message in Water Cooler
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -10349,7 +10349,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -10372,7 +10372,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Feedback with 15 unread mentions."
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView bold"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -10380,7 +10380,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -10391,14 +10391,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     FE
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Feedback"
                       >
@@ -10406,7 +10406,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -10476,10 +10476,10 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     >
                       <div
-                        class="flex"
+                        class="Flex-module_flex"
                         data-testid="notification-decoration"
                         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;"
                       >
@@ -10522,7 +10522,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Ideas"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -10530,7 +10530,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -10541,28 +10541,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     ID
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Ideas"
                       >
                         Ideas
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Ideas"
                       >
                         Last message in Ideas
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -10632,7 +10632,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -10655,7 +10655,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Bugs"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -10663,7 +10663,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -10674,14 +10674,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     BU
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Bugs"
                       >
@@ -10689,7 +10689,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -10759,7 +10759,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -10782,7 +10782,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Features"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView bold"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -10790,7 +10790,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -10801,28 +10801,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     FE
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Features"
                       >
                         Features
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Features"
                       >
                         Last message in Features
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -10892,7 +10892,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -10915,7 +10915,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Releases"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -10923,7 +10923,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -10934,14 +10934,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     RE
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Releases"
                       >
@@ -10949,7 +10949,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -11019,7 +11019,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -11042,7 +11042,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room General with 20 unread mentions."
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -11050,7 +11050,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -11061,28 +11061,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     GE
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="General"
                       >
                         General
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in General"
                       >
                         Last message in General
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -11152,10 +11152,10 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     >
                       <div
-                        class="flex"
+                        class="Flex-module_flex"
                         data-testid="notification-decoration"
                         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;"
                       >
@@ -11198,7 +11198,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Random"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView bold"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -11206,7 +11206,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -11217,14 +11217,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     RA
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Random"
                       >
@@ -11232,7 +11232,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -11302,7 +11302,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -11325,7 +11325,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Engineering"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -11333,7 +11333,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -11344,28 +11344,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     EN
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Engineering"
                       >
                         Engineering
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Engineering"
                       >
                         Last message in Engineering
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -11435,7 +11435,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -11459,13 +11459,13 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
               <button
                 aria-expanded="true"
                 aria-label="Toggle Chats section"
-                class="header"
+                class="RoomListSectionHeaderView-module_header"
                 role="gridcell"
                 tabindex="-1"
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListSectionHeaderView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
                 >
                   <svg
@@ -11480,7 +11480,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     />
                   </svg>
                   <span
-                    class="title"
+                    class="RoomListSectionHeaderView-module_title"
                   >
                     Chats
                   </span>
@@ -11504,7 +11504,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Design"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -11512,7 +11512,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -11523,14 +11523,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     DE
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Design"
                       >
@@ -11538,7 +11538,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -11608,7 +11608,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -11631,7 +11631,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Product"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView bold"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -11639,7 +11639,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -11650,28 +11650,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     PR
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Product"
                       >
                         Product
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Product"
                       >
                         Last message in Product
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -11741,7 +11741,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -11764,7 +11764,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Marketing with 25 unread mentions."
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -11772,7 +11772,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -11783,14 +11783,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     MA
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Marketing"
                       >
@@ -11798,7 +11798,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -11868,10 +11868,10 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     >
                       <div
-                        class="flex"
+                        class="Flex-module_flex"
                         data-testid="notification-decoration"
                         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;"
                       >
@@ -11914,7 +11914,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Sales"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -11922,7 +11922,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -11933,28 +11933,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     SA
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Sales"
                       >
                         Sales
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Sales"
                       >
                         Last message in Sales
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -12024,7 +12024,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -12047,7 +12047,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Support"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView bold"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -12055,7 +12055,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -12066,14 +12066,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     SU
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Support"
                       >
@@ -12081,7 +12081,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -12151,7 +12151,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -12174,7 +12174,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Announcements"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -12182,7 +12182,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -12193,28 +12193,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     AN
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Announcements"
                       >
                         Announcements
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Announcements"
                       >
                         Last message in Announcements
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -12284,7 +12284,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -12307,7 +12307,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Off-topic"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -12315,7 +12315,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -12326,14 +12326,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     OF
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Off-topic"
                       >
@@ -12341,7 +12341,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -12411,7 +12411,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -12434,7 +12434,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Team Alpha with 30 unread mentions."
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView bold"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -12442,7 +12442,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -12453,28 +12453,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     TE
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Team Alpha"
                       >
                         Team Alpha
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Team Alpha"
                       >
                         Last message in Team Alpha
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -12544,10 +12544,10 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     >
                       <div
-                        class="flex"
+                        class="Flex-module_flex"
                         data-testid="notification-decoration"
                         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;"
                       >
@@ -12590,7 +12590,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Team Beta"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -12598,7 +12598,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -12609,14 +12609,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     TE
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Team Beta"
                       >
@@ -12624,7 +12624,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -12694,7 +12694,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -12717,7 +12717,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Project X"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -12725,7 +12725,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -12736,28 +12736,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     PR
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Project X"
                       >
                         Project X
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Project X"
                       >
                         Last message in Project X
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -12827,7 +12827,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -12850,7 +12850,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Project Y"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView bold"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -12858,7 +12858,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -12869,14 +12869,14 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     PR
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Project Y"
                       >
@@ -12884,7 +12884,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -12954,7 +12954,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -12977,7 +12977,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Water Cooler"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -12985,7 +12985,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -12996,28 +12996,28 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     WA
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Water Cooler"
                       >
                         Water Cooler
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Water Cooler"
                       >
                         Last message in Water Cooler
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -13087,7 +13087,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -13108,13 +13108,13 @@ exports[`<RoomListView /> > renders Loading story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_a1_"
           role="listbox"
           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: wrap;"
@@ -13159,7 +13159,7 @@ exports[`<RoomListView /> > renders Loading story 1`] = `
       </div>
     </div>
     <div
-      class="skeleton"
+      class="RoomListLoadingSkeleton-module_skeleton"
     />
   </div>
 </div>
@@ -13172,13 +13172,13 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_k5_"
           role="listbox"
           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: wrap;"
@@ -13250,7 +13250,7 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
               aria-posinset="1"
               aria-selected="false"
               aria-setsize="2"
-              class="flex roomListItem mx_RoomListItemView bold firstItem"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -13258,7 +13258,7 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -13269,28 +13269,28 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
                   GE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="General"
                     >
                       General
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in General"
                     >
                       Last message in General
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -13360,10 +13360,10 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -13399,7 +13399,7 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
               aria-posinset="2"
               aria-selected="false"
               aria-setsize="2"
-              class="flex roomListItem mx_RoomListItemView lastItem"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_lastItem"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -13407,7 +13407,7 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -13418,14 +13418,14 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
                   RA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Random"
                     >
@@ -13433,7 +13433,7 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -13503,7 +13503,7 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -13523,13 +13523,13 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_17n_"
           role="listbox"
           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: wrap;"
@@ -13607,13 +13607,13 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
               <button
                 aria-expanded="true"
                 aria-label="Toggle Favourites section"
-                class="header firstHeader"
+                class="RoomListSectionHeaderView-module_header RoomListSectionHeaderView-module_firstHeader"
                 role="gridcell"
                 tabindex="-1"
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListSectionHeaderView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
                 >
                   <svg
@@ -13628,7 +13628,7 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                     />
                   </svg>
                   <span
-                    class="title"
+                    class="RoomListSectionHeaderView-module_title"
                   >
                     Favourites
                   </span>
@@ -13652,7 +13652,7 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room General"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView bold"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -13660,7 +13660,7 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -13671,28 +13671,28 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                     GE
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="General"
                       >
                         General
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in General"
                       >
                         Last message in General
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -13762,10 +13762,10 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     >
                       <div
-                        class="flex"
+                        class="Flex-module_flex"
                         data-testid="notification-decoration"
                         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;"
                       >
@@ -13806,7 +13806,7 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                 aria-haspopup="menu"
                 aria-label="Open room Random"
                 aria-selected="false"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="gridcell"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -13814,7 +13814,7 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -13825,14 +13825,14 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                     RA
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Random"
                       >
@@ -13840,7 +13840,7 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -13910,7 +13910,7 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -13934,13 +13934,13 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
               <button
                 aria-expanded="true"
                 aria-label="Toggle Chats section"
-                class="header"
+                class="RoomListSectionHeaderView-module_header"
                 role="gridcell"
                 tabindex="-1"
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListSectionHeaderView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
                 >
                   <svg
@@ -13955,7 +13955,7 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                     />
                   </svg>
                   <span
-                    class="title"
+                    class="RoomListSectionHeaderView-module_title"
                   >
                     Chats
                   </span>
@@ -13977,13 +13977,13 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
   >
     <div>
       <div
-        class="flex roomListPrimaryFilters"
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
         data-testid="primary-filters"
         style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
       >
         <div
           aria-label="Room list filters"
-          class="flex list"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
           id="_r_a4_"
           role="listbox"
           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: wrap;"
@@ -14055,7 +14055,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="1"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold firstItem"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -14063,7 +14063,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -14074,28 +14074,28 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   GE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="General"
                     >
                       General
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in General"
                     >
                       Last message in General
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -14165,10 +14165,10 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -14204,7 +14204,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="2"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -14212,7 +14212,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -14223,14 +14223,14 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   RA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Random"
                     >
@@ -14238,7 +14238,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -14308,7 +14308,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -14326,7 +14326,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="3"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -14334,7 +14334,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -14345,28 +14345,28 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   EN
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Engineering"
                     >
                       Engineering
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Engineering"
                     >
                       Last message in Engineering
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -14436,7 +14436,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -14454,7 +14454,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="4"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -14462,7 +14462,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -14473,14 +14473,14 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   DE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Design"
                     >
@@ -14488,7 +14488,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -14558,7 +14558,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -14576,7 +14576,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="5"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -14584,7 +14584,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -14595,28 +14595,28 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   PR
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Product"
                     >
                       Product
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Product"
                     >
                       Last message in Product
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -14686,7 +14686,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -14704,7 +14704,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="6"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -14712,7 +14712,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -14723,14 +14723,14 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   MA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Marketing"
                     >
@@ -14738,7 +14738,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -14808,10 +14808,10 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -14849,7 +14849,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="7"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -14857,7 +14857,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -14868,28 +14868,28 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   SA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Sales"
                     >
                       Sales
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Sales"
                     >
                       Last message in Sales
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -14959,7 +14959,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -14977,7 +14977,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="8"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -14985,7 +14985,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -14996,14 +14996,14 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   SU
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Support"
                     >
@@ -15011,7 +15011,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -15081,7 +15081,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -15099,7 +15099,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="9"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -15107,7 +15107,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -15118,28 +15118,28 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   AN
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Announcements"
                     >
                       Announcements
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Announcements"
                     >
                       Last message in Announcements
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -15209,7 +15209,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -15227,7 +15227,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="10"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -15235,7 +15235,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -15246,14 +15246,14 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   OF
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Off-topic"
                     >
@@ -15261,7 +15261,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -15331,7 +15331,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -15349,7 +15349,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="11"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -15357,7 +15357,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -15368,28 +15368,28 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   TE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Team Alpha"
                     >
                       Team Alpha
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Team Alpha"
                     >
                       Last message in Team Alpha
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -15459,10 +15459,10 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -15500,7 +15500,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="12"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -15508,7 +15508,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -15519,14 +15519,14 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   TE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Team Beta"
                     >
@@ -15534,7 +15534,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -15604,7 +15604,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -15622,7 +15622,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="13"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -15630,7 +15630,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -15641,28 +15641,28 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   PR
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Project X"
                     >
                       Project X
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Project X"
                     >
                       Last message in Project X
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -15732,7 +15732,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -15750,7 +15750,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="14"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -15758,7 +15758,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -15769,14 +15769,14 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   PR
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Project Y"
                     >
@@ -15784,7 +15784,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -15854,7 +15854,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -15872,7 +15872,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="15"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -15880,7 +15880,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -15891,28 +15891,28 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   WA
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Water Cooler"
                     >
                       Water Cooler
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Water Cooler"
                     >
                       Last message in Water Cooler
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -15982,7 +15982,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -16000,7 +16000,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="16"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -16008,7 +16008,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -16019,14 +16019,14 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   FE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Feedback"
                     >
@@ -16034,7 +16034,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -16104,10 +16104,10 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   >
                     <div
-                      class="flex"
+                      class="Flex-module_flex"
                       data-testid="notification-decoration"
                       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;"
                     >
@@ -16145,7 +16145,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="17"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -16153,7 +16153,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -16164,28 +16164,28 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   ID
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Ideas"
                     >
                       Ideas
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Ideas"
                     >
                       Last message in Ideas
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -16255,7 +16255,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -16273,7 +16273,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="18"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -16281,7 +16281,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -16292,14 +16292,14 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   BU
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Bugs"
                     >
@@ -16307,7 +16307,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -16377,7 +16377,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -16395,7 +16395,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="19"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView bold"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -16403,7 +16403,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -16414,28 +16414,28 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   FE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Features"
                     >
                       Features
                     </div>
                     <div
-                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                      class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                       title="Last message in Features"
                     >
                       Last message in Features
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -16505,7 +16505,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
@@ -16523,7 +16523,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               aria-posinset="20"
               aria-selected="false"
               aria-setsize="20"
-              class="flex roomListItem mx_RoomListItemView lastItem"
+              class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_lastItem"
               data-state="closed"
               role="option"
               style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -16531,7 +16531,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
               type="button"
             >
               <div
-                class="flex container"
+                class="Flex-module_flex RoomListItemView-module_container"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
               >
                 <div
@@ -16542,14 +16542,14 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   RE
                 </div>
                 <div
-                  class="flex content"
+                  class="Flex-module_flex RoomListItemView-module_content"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="ellipsis"
+                    class="RoomListItemView-module_ellipsis"
                   >
                     <div
-                      class="roomName"
+                      class="RoomListItemView-module_roomName"
                       data-testid="room-name"
                       title="Releases"
                     >
@@ -16557,7 +16557,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                     </div>
                   </div>
                   <div
-                    class="flex hoverMenu"
+                    class="Flex-module_flex RoomListItemView-module_hoverMenu"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                   >
                     <button
@@ -16627,7 +16627,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
                   </div>
                   <div
                     aria-hidden="true"
-                    class="notificationDecoration"
+                    class="RoomListItemView-module_notificationDecoration"
                   />
                 </div>
               </div>
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap b/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap
index 88c6ed703d..6b64e96ad3 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 aria-posinset="1"
                 aria-selected="true"
                 aria-setsize="10"
-                class="flex roomListItem mx_RoomListItemView selected bold firstItem mx_RoomListItemView_selected"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_selected RoomListItemView-module_bold RoomListItemView-module_firstItem mx_RoomListItemView_selected"
                 data-state="closed"
                 role="option"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -44,7 +44,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -55,28 +55,28 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     GE
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="General"
                       >
                         General
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in General"
                       >
                         Last message in General
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -146,10 +146,10 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     >
                       <div
-                        class="flex"
+                        class="Flex-module_flex"
                         data-testid="notification-decoration"
                         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;"
                       >
@@ -185,7 +185,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 aria-posinset="2"
                 aria-selected="false"
                 aria-setsize="10"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="option"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -193,7 +193,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -204,14 +204,14 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     RA
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Random"
                       >
@@ -219,7 +219,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -289,7 +289,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -307,7 +307,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 aria-posinset="3"
                 aria-selected="false"
                 aria-setsize="10"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="option"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -315,7 +315,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -326,28 +326,28 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     EN
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Engineering"
                       >
                         Engineering
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Engineering"
                       >
                         Last message in Engineering
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -417,7 +417,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -435,7 +435,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 aria-posinset="4"
                 aria-selected="false"
                 aria-setsize="10"
-                class="flex roomListItem mx_RoomListItemView bold"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                 data-state="closed"
                 role="option"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -443,7 +443,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -454,14 +454,14 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     DE
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Design"
                       >
@@ -469,7 +469,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -539,7 +539,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -557,7 +557,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 aria-posinset="5"
                 aria-selected="false"
                 aria-setsize="10"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="option"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -565,7 +565,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -576,28 +576,28 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     PR
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Product"
                       >
                         Product
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Product"
                       >
                         Last message in Product
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -667,7 +667,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -685,7 +685,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 aria-posinset="6"
                 aria-selected="false"
                 aria-setsize="10"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="option"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -693,7 +693,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -704,14 +704,14 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     MA
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Marketing"
                       >
@@ -719,7 +719,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -789,10 +789,10 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     >
                       <div
-                        class="flex"
+                        class="Flex-module_flex"
                         data-testid="notification-decoration"
                         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;"
                       >
@@ -830,7 +830,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 aria-posinset="7"
                 aria-selected="false"
                 aria-setsize="10"
-                class="flex roomListItem mx_RoomListItemView bold"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                 data-state="closed"
                 role="option"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -838,7 +838,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -849,28 +849,28 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     SA
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Sales"
                       >
                         Sales
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Sales"
                       >
                         Last message in Sales
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -940,7 +940,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -958,7 +958,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 aria-posinset="8"
                 aria-selected="false"
                 aria-setsize="10"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="option"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -966,7 +966,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -977,14 +977,14 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     SU
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Support"
                       >
@@ -992,7 +992,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -1062,7 +1062,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -1080,7 +1080,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 aria-posinset="9"
                 aria-selected="false"
                 aria-setsize="10"
-                class="flex roomListItem mx_RoomListItemView"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                 data-state="closed"
                 role="option"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -1088,7 +1088,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -1099,28 +1099,28 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     AN
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Announcements"
                       >
                         Announcements
                       </div>
                       <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 ellipsis"
+                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
                         title="Last message in Announcements"
                       >
                         Last message in Announcements
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -1190,7 +1190,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
@@ -1208,7 +1208,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 aria-posinset="10"
                 aria-selected="false"
                 aria-setsize="10"
-                class="flex roomListItem mx_RoomListItemView bold lastItem"
+                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_lastItem"
                 data-state="closed"
                 role="option"
                 style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
@@ -1216,7 +1216,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                 type="button"
               >
                 <div
-                  class="flex container"
+                  class="Flex-module_flex RoomListItemView-module_container"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                 >
                   <div
@@ -1227,14 +1227,14 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     OF
                   </div>
                   <div
-                    class="flex content"
+                    class="Flex-module_flex RoomListItemView-module_content"
                     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="ellipsis"
+                      class="RoomListItemView-module_ellipsis"
                     >
                       <div
-                        class="roomName"
+                        class="RoomListItemView-module_roomName"
                         data-testid="room-name"
                         title="Off-topic"
                       >
@@ -1242,7 +1242,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                       </div>
                     </div>
                     <div
-                      class="flex hoverMenu"
+                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
                       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                     >
                       <button
@@ -1312,7 +1312,7 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                     </div>
                     <div
                       aria-hidden="true"
-                      class="notificationDecoration"
+                      class="RoomListItemView-module_notificationDecoration"
                     />
                   </div>
                 </div>
diff --git a/packages/shared-components/src/room/RoomStatusBar/__snapshots__/RoomStatusBarView.test.tsx.snap b/packages/shared-components/src/room/RoomStatusBar/__snapshots__/RoomStatusBarView.test.tsx.snap
index bab97417b6..3208ac0b2f 100644
--- a/packages/shared-components/src/room/RoomStatusBar/__snapshots__/RoomStatusBarView.test.tsx.snap
+++ b/packages/shared-components/src/room/RoomStatusBar/__snapshots__/RoomStatusBarView.test.tsx.snap
@@ -4,12 +4,12 @@ exports[`RoomStatusBarView > renders connection lost 1`] = `
 <div>
   <div
     aria-labelledby="_r_0_"
-    class="banner"
+    class="Banner-module_banner"
     data-type="critical"
     role="status"
   >
     <div
-      class="icon"
+      class="Banner-module_icon"
     >
       <svg
         fill="currentColor"
@@ -25,26 +25,26 @@ exports[`RoomStatusBarView > renders connection lost 1`] = `
       </svg>
     </div>
     <div
-      class="content"
+      class="Banner-module_content"
     >
       <div
-        class="container"
+        class="RoomStatusBarView-module_container"
       >
         <p
-          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
+          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
           id="_r_0_"
         >
           Connectivity to the server has been lost.
         </p>
         <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 description"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 RoomStatusBarView-module_description"
         >
           Sent messages will be stored until your connection has returned.
         </p>
       </div>
     </div>
     <div
-      class="actions"
+      class="Banner-module_actions"
     />
   </div>
 </div>
@@ -54,12 +54,12 @@ exports[`RoomStatusBarView > renders consent link 1`] = `
 <div>
   <div
     aria-labelledby="_r_2_"
-    class="banner"
+    class="Banner-module_banner"
     data-type="critical"
     role="status"
   >
     <div
-      class="icon"
+      class="Banner-module_icon"
     >
       <svg
         fill="currentColor"
@@ -75,13 +75,13 @@ exports[`RoomStatusBarView > renders consent link 1`] = `
       </svg>
     </div>
     <div
-      class="content"
+      class="Banner-module_content"
     >
       <div
-        class="container"
+        class="RoomStatusBarView-module_container"
       >
         <p
-          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
+          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
           id="_r_2_"
         >
           You can't send any messages until you review and agree to our terms and conditions.
@@ -89,10 +89,10 @@ exports[`RoomStatusBarView > renders consent link 1`] = `
       </div>
     </div>
     <div
-      class="actions"
+      class="Banner-module_actions"
     >
       <a
-        class="_button_13vu4_8 primaryAction"
+        class="_button_13vu4_8 RoomStatusBarView-module_primaryAction"
         data-kind="primary"
         data-size="sm"
         href="#example"
@@ -112,12 +112,12 @@ exports[`RoomStatusBarView > renders local room error 1`] = `
 <div>
   <div
     aria-labelledby="_r_6_"
-    class="banner"
+    class="Banner-module_banner"
     data-type="critical"
     role="status"
   >
     <div
-      class="icon"
+      class="Banner-module_icon"
     >
       <svg
         fill="currentColor"
@@ -133,20 +133,20 @@ exports[`RoomStatusBarView > renders local room error 1`] = `
       </svg>
     </div>
     <div
-      class="content"
+      class="Banner-module_content"
     >
       <p
-        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
+        class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
         id="_r_6_"
       >
         Could not start a chat with this user
       </p>
     </div>
     <div
-      class="actions"
+      class="Banner-module_actions"
     >
       <button
-        class="_button_13vu4_8 primaryAction _has-icon_13vu4_60"
+        class="_button_13vu4_8 RoomStatusBarView-module_primaryAction _has-icon_13vu4_60"
         data-kind="primary"
         data-size="sm"
         role="button"
@@ -175,12 +175,12 @@ exports[`RoomStatusBarView > renders resource limit error 1`] = `
 <div>
   <div
     aria-labelledby="_r_1_"
-    class="banner"
+    class="Banner-module_banner"
     data-type="critical"
     role="status"
   >
     <div
-      class="icon"
+      class="Banner-module_icon"
     >
       <svg
         fill="currentColor"
@@ -196,26 +196,26 @@ exports[`RoomStatusBarView > renders resource limit error 1`] = `
       </svg>
     </div>
     <div
-      class="content"
+      class="Banner-module_content"
     >
       <div
-        class="container"
+        class="RoomStatusBarView-module_container"
       >
         <p
-          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
+          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
           id="_r_1_"
         >
           Your message wasn't sent because this homeserver has been blocked by its administrator.
         </p>
         <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 description"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 RoomStatusBarView-module_description"
         >
           Please contact your service administrator to continue using the service.
         </p>
       </div>
     </div>
     <div
-      class="actions"
+      class="Banner-module_actions"
     >
       <a
         class="_button_13vu4_8"
@@ -238,12 +238,12 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
 <div>
   <div
     aria-labelledby="_r_3_"
-    class="banner"
+    class="Banner-module_banner"
     data-type="critical"
     role="status"
   >
     <div
-      class="icon"
+      class="Banner-module_icon"
     >
       <svg
         fill="currentColor"
@@ -259,29 +259,29 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
       </svg>
     </div>
     <div
-      class="content"
+      class="Banner-module_content"
     >
       <div
-        class="container"
+        class="RoomStatusBarView-module_container"
       >
         <p
-          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
+          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
           id="_r_3_"
         >
           Some of your messages have not been sent
         </p>
         <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 description"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 RoomStatusBarView-module_description"
         >
           You can select all or individual messages to retry or delete
         </p>
       </div>
     </div>
     <div
-      class="actions"
+      class="Banner-module_actions"
     >
       <button
-        class="_button_13vu4_8 secondaryAction _has-icon_13vu4_60"
+        class="_button_13vu4_8 RoomStatusBarView-module_secondaryAction _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -302,7 +302,7 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
         Delete all
       </button>
       <button
-        class="_button_13vu4_8 primaryAction _has-icon_13vu4_60"
+        class="_button_13vu4_8 RoomStatusBarView-module_primaryAction _has-icon_13vu4_60"
         data-kind="primary"
         data-size="sm"
         role="button"
@@ -331,12 +331,12 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
 <div>
   <div
     aria-labelledby="_r_4_"
-    class="banner"
+    class="Banner-module_banner"
     data-type="critical"
     role="status"
   >
     <div
-      class="icon"
+      class="Banner-module_icon"
     >
       <svg
         fill="currentColor"
@@ -352,29 +352,29 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
       </svg>
     </div>
     <div
-      class="content"
+      class="Banner-module_content"
     >
       <div
-        class="container"
+        class="RoomStatusBarView-module_container"
       >
         <p
-          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
+          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
           id="_r_4_"
         >
           Some of your messages have not been sent
         </p>
         <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 description"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 RoomStatusBarView-module_description"
         >
           You can select all or individual messages to retry or delete
         </p>
       </div>
     </div>
     <div
-      class="actions"
+      class="Banner-module_actions"
     >
       <button
-        class="_button_13vu4_8 secondaryAction _has-icon_13vu4_60"
+        class="_button_13vu4_8 RoomStatusBarView-module_secondaryAction _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -395,7 +395,7 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
         Delete all
       </button>
       <button
-        class="_button_13vu4_8 primaryAction _has-icon_13vu4_60"
+        class="_button_13vu4_8 RoomStatusBarView-module_primaryAction _has-icon_13vu4_60"
         data-kind="primary"
         data-size="sm"
         role="button"
@@ -424,12 +424,12 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
 <div>
   <div
     aria-labelledby="_r_5_"
-    class="banner"
+    class="Banner-module_banner"
     data-type="critical"
     role="status"
   >
     <div
-      class="icon"
+      class="Banner-module_icon"
     >
       <svg
         fill="currentColor"
@@ -445,29 +445,29 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
       </svg>
     </div>
     <div
-      class="content"
+      class="Banner-module_content"
     >
       <div
-        class="container"
+        class="RoomStatusBarView-module_container"
       >
         <p
-          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 title"
+          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
           id="_r_5_"
         >
           Some of your messages have not been sent
         </p>
         <p
-          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 description"
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 RoomStatusBarView-module_description"
         >
           You can select all or individual messages to retry or delete
         </p>
       </div>
     </div>
     <div
-      class="actions"
+      class="Banner-module_actions"
     >
       <button
-        class="_button_13vu4_8 secondaryAction _has-icon_13vu4_60"
+        class="_button_13vu4_8 RoomStatusBarView-module_secondaryAction _has-icon_13vu4_60"
         data-kind="secondary"
         data-size="sm"
         role="button"
@@ -488,7 +488,7 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
         Delete all
       </button>
       <button
-        class="_button_13vu4_8 primaryAction _has-icon_13vu4_60"
+        class="_button_13vu4_8 RoomStatusBarView-module_primaryAction _has-icon_13vu4_60"
         data-kind="primary"
         data-size="sm"
         role="button"
diff --git a/packages/shared-components/src/room/WidgetPip/__snapshots__/WidgetPipView.test.tsx.snap b/packages/shared-components/src/room/WidgetPip/__snapshots__/WidgetPipView.test.tsx.snap
index 83479039f8..f2b891c026 100644
--- a/packages/shared-components/src/room/WidgetPip/__snapshots__/WidgetPipView.test.tsx.snap
+++ b/packages/shared-components/src/room/WidgetPip/__snapshots__/WidgetPipView.test.tsx.snap
@@ -3,11 +3,11 @@
 exports[`WidgetPipView > detects back click action 1`] = `
 <div>
   <div
-    class="container"
+    class="WidgetPipView-module_container"
     data-testid="widget-pip-container"
   >
     <div
-      class="header"
+      class="WidgetPipView-module_header"
     >
       <button
         aria-labelledby="_r_6_"
@@ -41,7 +41,7 @@ exports[`WidgetPipView > detects back click action 1`] = `
       Room Name
     </div>
     <div
-      class="roundedCornerContainer"
+      class="WidgetPipView-module_roundedCornerContainer"
     >
       <div
         style="background-color: grey; flex-grow: 1;"
@@ -54,11 +54,11 @@ exports[`WidgetPipView > detects back click action 1`] = `
 exports[`WidgetPipView > detects double click triggers back 1`] = `
 <div>
   <div
-    class="container"
+    class="WidgetPipView-module_container"
     data-testid="widget-pip-container"
   >
     <div
-      class="header"
+      class="WidgetPipView-module_header"
     >
       <button
         aria-labelledby="_r_c_"
@@ -92,7 +92,7 @@ exports[`WidgetPipView > detects double click triggers back 1`] = `
       Room Name
     </div>
     <div
-      class="roundedCornerContainer"
+      class="WidgetPipView-module_roundedCornerContainer"
     >
       <div
         style="background-color: grey; flex-grow: 1;"
@@ -105,11 +105,11 @@ exports[`WidgetPipView > detects double click triggers back 1`] = `
 exports[`WidgetPipView > detects on mouse down for drag 1`] = `
 <div>
   <div
-    class="container"
+    class="WidgetPipView-module_container"
     data-testid="widget-pip-container"
   >
     <div
-      class="header"
+      class="WidgetPipView-module_header"
     >
       <button
         aria-labelledby="_r_i_"
@@ -143,7 +143,7 @@ exports[`WidgetPipView > detects on mouse down for drag 1`] = `
       Room Name
     </div>
     <div
-      class="roundedCornerContainer"
+      class="WidgetPipView-module_roundedCornerContainer"
     >
       <div
         style="background-color: grey; flex-grow: 1;"
@@ -156,11 +156,11 @@ exports[`WidgetPipView > detects on mouse down for drag 1`] = `
 exports[`WidgetPipView > renders with gray widget 1`] = `
 <div>
   <div
-    class="container"
+    class="WidgetPipView-module_container"
     data-testid="widget-pip-container"
   >
     <div
-      class="header"
+      class="WidgetPipView-module_header"
     >
       <button
         aria-labelledby="_r_0_"
@@ -194,7 +194,7 @@ exports[`WidgetPipView > renders with gray widget 1`] = `
       Room Name
     </div>
     <div
-      class="roundedCornerContainer"
+      class="WidgetPipView-module_roundedCornerContainer"
     >
       <div
         style="background-color: grey; flex-grow: 1;"
diff --git a/packages/shared-components/src/room/timeline/DateSeparatorView/__snapshots__/DateSeparatorView.test.tsx.snap b/packages/shared-components/src/room/timeline/DateSeparatorView/__snapshots__/DateSeparatorView.test.tsx.snap
index dc5eb60da4..1be2cc2e0e 100644
--- a/packages/shared-components/src/room/timeline/DateSeparatorView/__snapshots__/DateSeparatorView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/DateSeparatorView/__snapshots__/DateSeparatorView.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`DateSeparatorView > renders default story 1`] = `
 <div>
   <div
     aria-label="Today"
-    class="flex timelineSeparator"
+    class="Flex-module_flex TimelineSeparator-module_timelineSeparator"
     role="separator"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
@@ -12,7 +12,7 @@ exports[`DateSeparatorView > renders default story 1`] = `
       role="none"
     />
     <div
-      class="flex content"
+      class="Flex-module_flex DateSeparatorView-module_content"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <h2
@@ -33,7 +33,7 @@ exports[`DateSeparatorView > renders long localized label story 1`] = `
 <div>
   <div
     aria-label="Wednesday, December 17, 2025 at 11:59 PM Coordinated Universal Time"
-    class="flex timelineSeparator"
+    class="Flex-module_flex TimelineSeparator-module_timelineSeparator"
     role="separator"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
@@ -41,7 +41,7 @@ exports[`DateSeparatorView > renders long localized label story 1`] = `
       role="none"
     />
     <div
-      class="flex content"
+      class="Flex-module_flex DateSeparatorView-module_content"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <h2
@@ -62,7 +62,7 @@ exports[`DateSeparatorView > renders with extra class names 1`] = `
 <div>
   <div
     aria-label="Today"
-    class="flex extra_class_1 extra_class_2 timelineSeparator"
+    class="Flex-module_flex extra_class_1 extra_class_2 TimelineSeparator-module_timelineSeparator"
     role="separator"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
@@ -70,7 +70,7 @@ exports[`DateSeparatorView > renders with extra class names 1`] = `
       role="none"
     />
     <div
-      class="flex content"
+      class="Flex-module_flex DateSeparatorView-module_content"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <h2
@@ -90,7 +90,7 @@ exports[`DateSeparatorView > renders with extra class names 1`] = `
 exports[`DateSeparatorView > renders with jump to date picker story 1`] = `
 <div>
   <div
-    class="flex timelineSeparator"
+    class="Flex-module_flex TimelineSeparator-module_timelineSeparator"
     role="none"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
@@ -105,7 +105,7 @@ exports[`DateSeparatorView > renders with jump to date picker story 1`] = `
       aria-haspopup="menu"
       aria-label="Jump to date"
       aria-live="off"
-      class="flex content"
+      class="Flex-module_flex DateSeparatorView-module_content"
       data-state="open"
       data-testid="jump-to-date-separator-button"
       id="radix-_r_0_"
diff --git a/packages/shared-components/src/room/timeline/TimelineSeparator/__snapshots__/TimelineSeparator.test.tsx.snap b/packages/shared-components/src/room/timeline/TimelineSeparator/__snapshots__/TimelineSeparator.test.tsx.snap
index e45501e14d..1cae5057fd 100644
--- a/packages/shared-components/src/room/timeline/TimelineSeparator/__snapshots__/TimelineSeparator.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/TimelineSeparator/__snapshots__/TimelineSeparator.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`TimelineSeparator > Snapshot tests > renders the timeline separator in
 <div>
   <div
     aria-label="Label Separator"
-    class="flex timelineSeparator"
+    class="Flex-module_flex TimelineSeparator-module_timelineSeparator"
     role="separator"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
@@ -23,7 +23,7 @@ exports[`TimelineSeparator > Snapshot tests > renders the timeline separator wit
 <div>
   <div
     aria-label="Custom Label"
-    class="flex timelineSeparator"
+    class="Flex-module_flex TimelineSeparator-module_timelineSeparator"
     role="separator"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
@@ -32,7 +32,7 @@ exports[`TimelineSeparator > Snapshot tests > renders the timeline separator wit
     />
     <h2
       aria-hidden="true"
-      class="timelineSeparator"
+      class="TimelineSeparator-module_timelineSeparator"
     >
       Thursday
     </h2>
@@ -47,7 +47,7 @@ exports[`TimelineSeparator > Snapshot tests > renders the timeline separator wit
 <div>
   <div
     aria-label="Date Event Separator"
-    class="flex timelineSeparator"
+    class="Flex-module_flex TimelineSeparator-module_timelineSeparator"
     role="separator"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
@@ -66,7 +66,7 @@ exports[`TimelineSeparator > Snapshot tests > renders the timeline separator wit
 <div>
   <div
     aria-label="Late Event Separator"
-    class="flex timelineSeparator"
+    class="Flex-module_flex TimelineSeparator-module_timelineSeparator"
     role="separator"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
@@ -85,7 +85,7 @@ exports[`TimelineSeparator > Snapshot tests > renders the timeline separator wit
 <div>
   <div
     aria-label="Separator without children"
-    class="flex timelineSeparator"
+    class="Flex-module_flex TimelineSeparator-module_timelineSeparator"
     role="separator"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap
index be12923128..3ef52cea4d 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap
@@ -3,12 +3,12 @@
 exports[`DisambiguatedProfileView > renders the default state 1`] = `
 <div>
   <div
-    class="disambiguatedProfile"
+    class="DisambiguatedProfile-module_disambiguatedProfile"
     role="button"
     tabindex="0"
   >
     <span
-      class="disambiguatedProfile_displayName mx_DisambiguatedProfile_displayName"
+      class="DisambiguatedProfile-module_disambiguatedProfile_displayName mx_DisambiguatedProfile_displayName"
       dir="auto"
     >
       Alice
@@ -20,19 +20,19 @@ exports[`DisambiguatedProfileView > renders the default state 1`] = `
 exports[`DisambiguatedProfileView > renders the full example 1`] = `
 <div>
   <div
-    class="disambiguatedProfile"
+    class="DisambiguatedProfile-module_disambiguatedProfile"
     role="button"
     tabindex="0"
     title="Eve (@eve:matrix.org)"
   >
     <span
-      class="mx_Username_color5 disambiguatedProfile_displayName mx_DisambiguatedProfile_displayName"
+      class="mx_Username_color5 DisambiguatedProfile-module_disambiguatedProfile_displayName mx_DisambiguatedProfile_displayName"
       dir="auto"
     >
       Eve
     </span>
     <span
-      class="mx_DisambiguatedProfile_mxid disambiguatedProfile_mxid"
+      class="mx_DisambiguatedProfile_mxid DisambiguatedProfile-module_disambiguatedProfile_mxid"
     >
       @eve:matrix.org
     </span>
@@ -43,18 +43,18 @@ exports[`DisambiguatedProfileView > renders the full example 1`] = `
 exports[`DisambiguatedProfileView > renders with MXID for disambiguation 1`] = `
 <div>
   <div
-    class="disambiguatedProfile"
+    class="DisambiguatedProfile-module_disambiguatedProfile"
     role="button"
     tabindex="0"
   >
     <span
-      class="mx_Username_color1 disambiguatedProfile_displayName mx_DisambiguatedProfile_displayName"
+      class="mx_Username_color1 DisambiguatedProfile-module_disambiguatedProfile_displayName mx_DisambiguatedProfile_displayName"
       dir="auto"
     >
       Alice
     </span>
     <span
-      class="mx_DisambiguatedProfile_mxid disambiguatedProfile_mxid"
+      class="mx_DisambiguatedProfile_mxid DisambiguatedProfile-module_disambiguatedProfile_mxid"
     >
       @alice:example.org
     </span>
@@ -65,12 +65,12 @@ exports[`DisambiguatedProfileView > renders with MXID for disambiguation 1`] = `
 exports[`DisambiguatedProfileView > renders with color class 1`] = `
 <div>
   <div
-    class="disambiguatedProfile"
+    class="DisambiguatedProfile-module_disambiguatedProfile"
     role="button"
     tabindex="0"
   >
     <span
-      class="mx_Username_color3 disambiguatedProfile_displayName mx_DisambiguatedProfile_displayName"
+      class="mx_Username_color3 DisambiguatedProfile-module_disambiguatedProfile_displayName mx_DisambiguatedProfile_displayName"
       dir="auto"
     >
       Bob
@@ -82,12 +82,12 @@ exports[`DisambiguatedProfileView > renders with color class 1`] = `
 exports[`DisambiguatedProfileView > renders with emphasized display name 1`] = `
 <div>
   <div
-    class="disambiguatedProfile"
+    class="DisambiguatedProfile-module_disambiguatedProfile"
     role="button"
     tabindex="0"
   >
     <span
-      class="disambiguatedProfile_displayName mx_DisambiguatedProfile_displayName"
+      class="DisambiguatedProfile-module_disambiguatedProfile_displayName mx_DisambiguatedProfile_displayName"
       dir="auto"
     >
       Charlie
@@ -99,13 +99,13 @@ exports[`DisambiguatedProfileView > renders with emphasized display name 1`] = `
 exports[`DisambiguatedProfileView > renders with tooltip 1`] = `
 <div>
   <div
-    class="disambiguatedProfile"
+    class="DisambiguatedProfile-module_disambiguatedProfile"
     role="button"
     tabindex="0"
     title="Diana (@diana:example.org)"
   >
     <span
-      class="disambiguatedProfile_displayName mx_DisambiguatedProfile_displayName"
+      class="DisambiguatedProfile-module_disambiguatedProfile_displayName mx_DisambiguatedProfile_displayName"
       dir="auto"
     >
       Diana
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EncryptionEventView/__snapshots__/EncryptionEventView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EncryptionEventView/__snapshots__/EncryptionEventView.test.tsx.snap
index 5b67edede9..18a97231f5 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EncryptionEventView/__snapshots__/EncryptionEventView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EncryptionEventView/__snapshots__/EncryptionEventView.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EncryptionEventView > renders Default story 1`] = `
 <div>
   <div
-    class="container content"
+    class="EventTileBubble-module_container EncryptionEventView-module_content"
   >
     <svg
       data-state="supported"
@@ -18,12 +18,12 @@ exports[`EncryptionEventView > renders Default story 1`] = `
       />
     </svg>
     <div
-      class="title"
+      class="EventTileBubble-module_title"
     >
       Encryption enabled
     </div>
     <div
-      class="subtitle"
+      class="EventTileBubble-module_subtitle"
     >
       Messages in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their profile picture.
     </div>
@@ -34,7 +34,7 @@ exports[`EncryptionEventView > renders Default story 1`] = `
 exports[`EncryptionEventView > renders DisableAttempt story 1`] = `
 <div>
   <div
-    class="container content"
+    class="EventTileBubble-module_container EncryptionEventView-module_content"
   >
     <svg
       data-state="supported"
@@ -49,12 +49,12 @@ exports[`EncryptionEventView > renders DisableAttempt story 1`] = `
       />
     </svg>
     <div
-      class="title"
+      class="EventTileBubble-module_title"
     >
       Encryption enabled
     </div>
     <div
-      class="subtitle"
+      class="EventTileBubble-module_subtitle"
     >
       Ignored attempt to disable encryption
     </div>
@@ -65,7 +65,7 @@ exports[`EncryptionEventView > renders DisableAttempt story 1`] = `
 exports[`EncryptionEventView > renders EnabledDirectMessage story 1`] = `
 <div>
   <div
-    class="container content"
+    class="EventTileBubble-module_container EncryptionEventView-module_content"
   >
     <svg
       data-state="supported"
@@ -80,12 +80,12 @@ exports[`EncryptionEventView > renders EnabledDirectMessage story 1`] = `
       />
     </svg>
     <div
-      class="title"
+      class="EventTileBubble-module_title"
     >
       Encryption enabled
     </div>
     <div
-      class="subtitle"
+      class="EventTileBubble-module_subtitle"
     >
       Messages here are end-to-end encrypted. Verify Alice in their profile - tap on their profile picture.
     </div>
@@ -96,7 +96,7 @@ exports[`EncryptionEventView > renders EnabledDirectMessage story 1`] = `
 exports[`EncryptionEventView > renders EnabledLocalRoom story 1`] = `
 <div>
   <div
-    class="container content"
+    class="EventTileBubble-module_container EncryptionEventView-module_content"
   >
     <svg
       data-state="supported"
@@ -111,12 +111,12 @@ exports[`EncryptionEventView > renders EnabledLocalRoom story 1`] = `
       />
     </svg>
     <div
-      class="title"
+      class="EventTileBubble-module_title"
     >
       Encryption enabled
     </div>
     <div
-      class="subtitle"
+      class="EventTileBubble-module_subtitle"
     >
       Messages in this chat will be end-to-end encrypted.
     </div>
@@ -127,7 +127,7 @@ exports[`EncryptionEventView > renders EnabledLocalRoom story 1`] = `
 exports[`EncryptionEventView > renders ParametersChanged story 1`] = `
 <div>
   <div
-    class="container content"
+    class="EventTileBubble-module_container EncryptionEventView-module_content"
   >
     <svg
       data-state="supported"
@@ -142,12 +142,12 @@ exports[`EncryptionEventView > renders ParametersChanged story 1`] = `
       />
     </svg>
     <div
-      class="title"
+      class="EventTileBubble-module_title"
     >
       Encryption enabled
     </div>
     <div
-      class="subtitle"
+      class="EventTileBubble-module_subtitle"
     >
       Some encryption parameters have been changed.
     </div>
@@ -158,7 +158,7 @@ exports[`EncryptionEventView > renders ParametersChanged story 1`] = `
 exports[`EncryptionEventView > renders StateEncryptionEnabled story 1`] = `
 <div>
   <div
-    class="container content"
+    class="EventTileBubble-module_container EncryptionEventView-module_content"
   >
     <svg
       data-state="supported"
@@ -173,12 +173,12 @@ exports[`EncryptionEventView > renders StateEncryptionEnabled story 1`] = `
       />
     </svg>
     <div
-      class="title"
+      class="EventTileBubble-module_title"
     >
       Experimental state encryption enabled
     </div>
     <div
-      class="subtitle"
+      class="EventTileBubble-module_subtitle"
     >
       Messages and state events in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their profile picture.
     </div>
@@ -189,7 +189,7 @@ exports[`EncryptionEventView > renders StateEncryptionEnabled story 1`] = `
 exports[`EncryptionEventView > renders Unsupported story 1`] = `
 <div>
   <div
-    class="container content"
+    class="EventTileBubble-module_container EncryptionEventView-module_content"
   >
     <svg
       data-state="unsupported"
@@ -204,12 +204,12 @@ exports[`EncryptionEventView > renders Unsupported story 1`] = `
       />
     </svg>
     <div
-      class="title"
+      class="EventTileBubble-module_title"
     >
       Encryption not enabled
     </div>
     <div
-      class="subtitle"
+      class="EventTileBubble-module_subtitle"
     >
       The encryption used by this room isn't supported.
     </div>
@@ -220,7 +220,7 @@ exports[`EncryptionEventView > renders Unsupported story 1`] = `
 exports[`EncryptionEventView > renders WithTimestamp story 1`] = `
 <div>
   <div
-    class="container content"
+    class="EventTileBubble-module_container EncryptionEventView-module_content"
   >
     <svg
       data-state="supported"
@@ -235,12 +235,12 @@ exports[`EncryptionEventView > renders WithTimestamp story 1`] = `
       />
     </svg>
     <div
-      class="title"
+      class="EventTileBubble-module_title"
     >
       Encryption enabled
     </div>
     <div
-      class="subtitle"
+      class="EventTileBubble-module_subtitle"
     >
       Messages in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their profile picture.
     </div>
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileBubble/__snapshots__/EventTileBubble.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileBubble/__snapshots__/EventTileBubble.test.tsx.snap
index ce96c45525..d54c5151ee 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileBubble/__snapshots__/EventTileBubble.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileBubble/__snapshots__/EventTileBubble.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EventTileBubble > renders the event tile bubble 1`] = `
 <div>
   <div
-    class="container custom-class"
+    class="EventTileBubble-module_container custom-class"
   >
     <svg
       fill="currentColor"
@@ -17,12 +17,12 @@ exports[`EventTileBubble > renders the event tile bubble 1`] = `
       />
     </svg>
     <div
-      class="title"
+      class="EventTileBubble-module_title"
     >
       Title goes here
     </div>
     <div
-      class="subtitle"
+      class="EventTileBubble-module_subtitle"
     >
       Subtitle goes here
     </div>
@@ -33,7 +33,7 @@ exports[`EventTileBubble > renders the event tile bubble 1`] = `
 exports[`EventTileBubble > renders the event tile bubble as crypto event bubble 1`] = `
 <div>
   <div
-    class="container"
+    class="EventTileBubble-module_container"
   >
     <svg
       fill="currentColor"
@@ -47,12 +47,12 @@ exports[`EventTileBubble > renders the event tile bubble as crypto event bubble
       />
     </svg>
     <div
-      class="title"
+      class="EventTileBubble-module_title"
     >
       Encryption enabled
     </div>
     <div
-      class="subtitle"
+      class="EventTileBubble-module_subtitle"
     >
       Messages here are end-to-end encrypted. Verify XYZ in their profile - tap on their profile picture.
     </div>
@@ -63,7 +63,7 @@ exports[`EventTileBubble > renders the event tile bubble as crypto event bubble
 exports[`EventTileBubble > renders the event tile bubble with children 1`] = `
 <div>
   <div
-    class="container"
+    class="EventTileBubble-module_container"
   >
     <svg
       fill="currentColor"
@@ -77,12 +77,12 @@ exports[`EventTileBubble > renders the event tile bubble with children 1`] = `
       />
     </svg>
     <div
-      class="title"
+      class="EventTileBubble-module_title"
     >
       Title goes here
     </div>
     <div
-      class="subtitle"
+      class="EventTileBubble-module_subtitle"
     >
       Subtitle goes here
     </div>
@@ -96,7 +96,7 @@ exports[`EventTileBubble > renders the event tile bubble with children 1`] = `
 exports[`EventTileBubble > renders the event tile bubble with icon 1`] = `
 <div>
   <div
-    class="container"
+    class="EventTileBubble-module_container"
   >
     <svg
       fill="currentColor"
@@ -110,12 +110,12 @@ exports[`EventTileBubble > renders the event tile bubble with icon 1`] = `
       />
     </svg>
     <div
-      class="title"
+      class="EventTileBubble-module_title"
     >
       Title goes here
     </div>
     <div
-      class="subtitle"
+      class="EventTileBubble-module_subtitle"
     >
       Subtitle goes here
     </div>
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/PinnedMessageBadge/__snapshots__/PinnedMessageBadge.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/PinnedMessageBadge/__snapshots__/PinnedMessageBadge.test.tsx.snap
index 58e9a90e5f..c588c68b29 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/PinnedMessageBadge/__snapshots__/PinnedMessageBadge.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/PinnedMessageBadge/__snapshots__/PinnedMessageBadge.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`PinnedMessageBadge > renders the default badge 1`] = `
 <div>
   <div
     aria-describedby="event-tile-description"
-    class="pinnedMessageBadge"
+    class="PinnedMessageBadge-module_pinnedMessageBadge"
     tabindex="0"
   >
     <svg
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/__snapshots__/TileErrorView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/__snapshots__/TileErrorView.test.tsx.snap
index 57ddb9b997..17775427bf 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/__snapshots__/TileErrorView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/__snapshots__/TileErrorView.test.tsx.snap
@@ -4,15 +4,15 @@ exports[`TileErrorView > renders the bubble layout variant 1`] = `
 <div>
   <ul>
     <li
-      class="tileErrorView bubble"
+      class="TileErrorView-module_tileErrorView TileErrorView-module_bubble"
       data-layout="bubble"
     >
       <div
-        class="line"
+        class="TileErrorView-module_line"
         role="status"
       >
         <span
-          class="message"
+          class="TileErrorView-module_message"
         >
           Can't load this message
            (m.room.message)
@@ -27,7 +27,7 @@ exports[`TileErrorView > renders the bubble layout variant 1`] = `
           Submit debug logs
         </button>
         <button
-          class="viewSourceButton"
+          class="TileErrorView-module_viewSourceButton"
           type="button"
         >
           View source
@@ -42,15 +42,15 @@ exports[`TileErrorView > renders the default tile error state 1`] = `
 <div>
   <ul>
     <li
-      class="tileErrorView"
+      class="TileErrorView-module_tileErrorView"
       data-layout="group"
     >
       <div
-        class="line"
+        class="TileErrorView-module_line"
         role="status"
       >
         <span
-          class="message"
+          class="TileErrorView-module_message"
         >
           Can't load this message
            (m.room.message)
@@ -65,7 +65,7 @@ exports[`TileErrorView > renders the default tile error state 1`] = `
           Submit debug logs
         </button>
         <button
-          class="viewSourceButton"
+          class="TileErrorView-module_viewSourceButton"
           type="button"
         >
           View source
diff --git a/packages/shared-components/src/room/timeline/event-tile/actions/ActionBarView/__snapshots__/ActionBarView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/actions/ActionBarView/__snapshots__/ActionBarView.test.tsx.snap
index ba8fcd6825..28b8869b1b 100644
--- a/packages/shared-components/src/room/timeline/event-tile/actions/ActionBarView/__snapshots__/ActionBarView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/actions/ActionBarView/__snapshots__/ActionBarView.test.tsx.snap
@@ -5,13 +5,13 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
   <div
     aria-label="Message Actions"
     aria-live="off"
-    class="flex mx_MessageActionBar toolbar"
+    class="Flex-module_flex mx_MessageActionBar ActionBarView-module_toolbar"
     role="toolbar"
     style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <button
       aria-label="Hide"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -34,7 +34,7 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     <button
       aria-disabled="false"
       aria-label="Download"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -56,7 +56,7 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="React"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -81,7 +81,7 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="Reply"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -104,7 +104,7 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     <button
       aria-disabled="false"
       aria-label="Reply in thread"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -129,7 +129,7 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="Edit"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -154,7 +154,7 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     <button
       aria-label="Pin"
       aria-pressed="false"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -178,7 +178,7 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="Retry"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -200,7 +200,7 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="Delete"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -223,7 +223,7 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     <button
       aria-expanded="false"
       aria-label="Expand quotes"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -245,7 +245,7 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="Options"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -267,7 +267,7 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="View in room"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -289,7 +289,7 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="Copy link to thread"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -311,7 +311,7 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="Remove"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -333,7 +333,7 @@ exports[`ActionBarView > story snapshots > renders AllIconActions 1`] = `
     </button>
     <button
       aria-label="View Source"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -362,13 +362,13 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
   <div
     aria-label="Message Actions"
     aria-live="off"
-    class="flex mx_MessageActionBar toolbar"
+    class="Flex-module_flex mx_MessageActionBar ActionBarView-module_toolbar"
     role="toolbar"
     style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <button
       aria-label="Hide"
-      class="_button_13vu4_8 toolbar_item"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
       data-size="sm"
@@ -380,7 +380,7 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     <button
       aria-disabled="false"
       aria-label="Download"
-      class="_button_13vu4_8 toolbar_item"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
       data-size="sm"
@@ -391,7 +391,7 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="React"
-      class="_button_13vu4_8 toolbar_item"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
       data-size="sm"
@@ -402,7 +402,7 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="Reply"
-      class="_button_13vu4_8 toolbar_item"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
       data-size="sm"
@@ -414,7 +414,7 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     <button
       aria-disabled="false"
       aria-label="Reply in thread"
-      class="_button_13vu4_8 toolbar_item"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
       data-size="sm"
@@ -425,7 +425,7 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="Edit"
-      class="_button_13vu4_8 toolbar_item"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
       data-size="sm"
@@ -437,7 +437,7 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     <button
       aria-label="Pin"
       aria-pressed="false"
-      class="_button_13vu4_8 toolbar_item"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
       data-size="sm"
@@ -448,7 +448,7 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="Retry"
-      class="_button_13vu4_8 toolbar_item"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
       data-size="sm"
@@ -459,7 +459,7 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="Delete"
-      class="_button_13vu4_8 toolbar_item"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
       data-size="sm"
@@ -471,7 +471,7 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     <button
       aria-expanded="false"
       aria-label="Expand quotes"
-      class="_button_13vu4_8 toolbar_item"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
       data-size="sm"
@@ -482,7 +482,7 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="Options"
-      class="_button_13vu4_8 toolbar_item"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
       data-size="sm"
@@ -493,7 +493,7 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="View in room"
-      class="_button_13vu4_8 toolbar_item"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
       data-size="sm"
@@ -504,7 +504,7 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="Copy link to thread"
-      class="_button_13vu4_8 toolbar_item"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
       data-size="sm"
@@ -515,7 +515,7 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="Remove"
-      class="_button_13vu4_8 toolbar_item"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
       data-size="sm"
@@ -526,7 +526,7 @@ exports[`ActionBarView > story snapshots > renders AllLabelActions 1`] = `
     </button>
     <button
       aria-label="View Source"
-      class="_button_13vu4_8 toolbar_item"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item"
       data-kind="tertiary"
       data-presentation="label"
       data-size="sm"
@@ -544,14 +544,14 @@ exports[`ActionBarView > story snapshots > renders DecryptingAttachment 1`] = `
   <div
     aria-label="Message Actions"
     aria-live="off"
-    class="flex mx_MessageActionBar toolbar"
+    class="Flex-module_flex mx_MessageActionBar ActionBarView-module_toolbar"
     role="toolbar"
     style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <button
       aria-disabled="true"
       aria-label="Decrypting"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -577,7 +577,7 @@ exports[`ActionBarView > story snapshots > renders DecryptingAttachment 1`] = `
     </button>
     <button
       aria-label="Options"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -606,13 +606,13 @@ exports[`ActionBarView > story snapshots > renders DisabledThreadReply 1`] = `
   <div
     aria-label="Message Actions"
     aria-live="off"
-    class="flex mx_MessageActionBar toolbar"
+    class="Flex-module_flex mx_MessageActionBar ActionBarView-module_toolbar"
     role="toolbar"
     style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <button
       aria-label="React"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -637,7 +637,7 @@ exports[`ActionBarView > story snapshots > renders DisabledThreadReply 1`] = `
     </button>
     <button
       aria-label="Reply"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -660,7 +660,7 @@ exports[`ActionBarView > story snapshots > renders DisabledThreadReply 1`] = `
     <button
       aria-disabled="true"
       aria-label="Reply in thread"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -685,7 +685,7 @@ exports[`ActionBarView > story snapshots > renders DisabledThreadReply 1`] = `
     </button>
     <button
       aria-label="Options"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -714,14 +714,14 @@ exports[`ActionBarView > story snapshots > renders DownloadingAttachment 1`] = `
   <div
     aria-label="Message Actions"
     aria-live="off"
-    class="flex mx_MessageActionBar toolbar"
+    class="Flex-module_flex mx_MessageActionBar ActionBarView-module_toolbar"
     role="toolbar"
     style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <button
       aria-disabled="true"
       aria-label="Downloading"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -747,7 +747,7 @@ exports[`ActionBarView > story snapshots > renders DownloadingAttachment 1`] = `
     </button>
     <button
       aria-label="Options"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -776,13 +776,13 @@ exports[`ActionBarView > story snapshots > renders ExpandedReplyChain 1`] = `
   <div
     aria-label="Message Actions"
     aria-live="off"
-    class="flex mx_MessageActionBar toolbar"
+    class="Flex-module_flex mx_MessageActionBar ActionBarView-module_toolbar"
     role="toolbar"
     style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <button
       aria-label="Reply"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -805,7 +805,7 @@ exports[`ActionBarView > story snapshots > renders ExpandedReplyChain 1`] = `
     <button
       aria-expanded="true"
       aria-label="Collapse quotes"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -827,7 +827,7 @@ exports[`ActionBarView > story snapshots > renders ExpandedReplyChain 1`] = `
     </button>
     <button
       aria-label="Options"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -856,13 +856,13 @@ exports[`ActionBarView > story snapshots > renders PinnedMessage 1`] = `
   <div
     aria-label="Message Actions"
     aria-live="off"
-    class="flex mx_MessageActionBar toolbar"
+    class="Flex-module_flex mx_MessageActionBar ActionBarView-module_toolbar"
     role="toolbar"
     style="--mx-flex-display: inline-flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
   >
     <button
       aria-label="React"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -887,7 +887,7 @@ exports[`ActionBarView > story snapshots > renders PinnedMessage 1`] = `
     </button>
     <button
       aria-label="Reply"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -910,7 +910,7 @@ exports[`ActionBarView > story snapshots > renders PinnedMessage 1`] = `
     <button
       aria-label="Unpin"
       aria-pressed="true"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
@@ -937,7 +937,7 @@ exports[`ActionBarView > story snapshots > renders PinnedMessage 1`] = `
     </button>
     <button
       aria-label="Options"
-      class="_button_13vu4_8 toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
+      class="_button_13vu4_8 ActionBarView-module_toolbar_item _has-icon_13vu4_60 _icon-only_13vu4_53"
       data-kind="tertiary"
       data-presentation="icon"
       data-size="sm"
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap
index 051a91da21..a024c42b5f 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap
@@ -4,19 +4,19 @@ exports[`AudioPlayerView > renders the audio player in default state 1`] = `
 <div>
   <div
     aria-label="Audio player"
-    class="mx_MediaBody mediaBody audioPlayer"
+    class="mx_MediaBody MediaBody-module_mediaBody AudioPlayerView-module_audioPlayer"
     role="region"
     tabindex="0"
   >
     <div
-      class="flex"
+      class="Flex-module_flex"
       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
         aria-disabled="false"
         aria-label="Play"
         aria-labelledby="_r_0_"
-        class="_icon-button_1215g_8 button"
+        class="_icon-button_1215g_8 PlayPauseButton-module_button"
         data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -40,17 +40,17 @@ exports[`AudioPlayerView > renders the audio player in default state 1`] = `
         </div>
       </button>
       <div
-        class="flex mediaInfo"
+        class="Flex-module_flex AudioPlayerView-module_mediaInfo"
         style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <span
-          class="mediaName"
+          class="AudioPlayerView-module_mediaName"
           data-testid="audio-player-name"
         >
           Sample Audio
         </span>
         <div
-          class="flex byline"
+          class="Flex-module_flex AudioPlayerView-module_byline"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
         >
           <time
@@ -64,13 +64,13 @@ exports[`AudioPlayerView > renders the audio player in default state 1`] = `
       </div>
     </div>
     <div
-      class="flex"
+      class="Flex-module_flex"
       data-testid="audio-player-seek"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <input
         aria-label="Audio seek bar"
-        class="seekBar"
+        class="SeekBar-module_seekBar"
         max="100"
         min="0"
         step="1"
@@ -80,7 +80,7 @@ exports[`AudioPlayerView > renders the audio player in default state 1`] = `
         value="30"
       />
       <time
-        class="mx_Clock clock"
+        class="mx_Clock AudioPlayerView-module_clock"
         datetime="PT2M"
         role="timer"
       >
@@ -95,19 +95,19 @@ exports[`AudioPlayerView > renders the audio player in error state 1`] = `
 <div>
   <div
     aria-label="Audio player"
-    class="mx_MediaBody mediaBody audioPlayer"
+    class="mx_MediaBody MediaBody-module_mediaBody AudioPlayerView-module_audioPlayer"
     role="region"
     tabindex="0"
   >
     <div
-      class="flex"
+      class="Flex-module_flex"
       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
         aria-disabled="false"
         aria-label="Play"
         aria-labelledby="_r_i_"
-        class="_icon-button_1215g_8 button"
+        class="_icon-button_1215g_8 PlayPauseButton-module_button"
         data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -131,17 +131,17 @@ exports[`AudioPlayerView > renders the audio player in error state 1`] = `
         </div>
       </button>
       <div
-        class="flex mediaInfo"
+        class="Flex-module_flex AudioPlayerView-module_mediaInfo"
         style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <span
-          class="mediaName"
+          class="AudioPlayerView-module_mediaName"
           data-testid="audio-player-name"
         >
           Sample Audio
         </span>
         <div
-          class="flex byline"
+          class="Flex-module_flex AudioPlayerView-module_byline"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
         >
           <time
@@ -155,13 +155,13 @@ exports[`AudioPlayerView > renders the audio player in error state 1`] = `
       </div>
     </div>
     <div
-      class="flex"
+      class="Flex-module_flex"
       data-testid="audio-player-seek"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <input
         aria-label="Audio seek bar"
-        class="seekBar"
+        class="SeekBar-module_seekBar"
         max="100"
         min="0"
         step="1"
@@ -171,7 +171,7 @@ exports[`AudioPlayerView > renders the audio player in error state 1`] = `
         value="30"
       />
       <time
-        class="mx_Clock clock"
+        class="mx_Clock AudioPlayerView-module_clock"
         datetime="PT2M"
         role="timer"
       >
@@ -180,7 +180,7 @@ exports[`AudioPlayerView > renders the audio player in error state 1`] = `
     </div>
   </div>
   <span
-    class="error"
+    class="AudioPlayerView-module_error"
   >
     Error downloading audio
   </span>
@@ -191,19 +191,19 @@ exports[`AudioPlayerView > renders the audio player without media name 1`] = `
 <div>
   <div
     aria-label="Audio player"
-    class="mx_MediaBody mediaBody audioPlayer"
+    class="mx_MediaBody MediaBody-module_mediaBody AudioPlayerView-module_audioPlayer"
     role="region"
     tabindex="0"
   >
     <div
-      class="flex"
+      class="Flex-module_flex"
       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
         aria-disabled="false"
         aria-label="Play"
         aria-labelledby="_r_6_"
-        class="_icon-button_1215g_8 button"
+        class="_icon-button_1215g_8 PlayPauseButton-module_button"
         data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -227,17 +227,17 @@ exports[`AudioPlayerView > renders the audio player without media name 1`] = `
         </div>
       </button>
       <div
-        class="flex mediaInfo"
+        class="Flex-module_flex AudioPlayerView-module_mediaInfo"
         style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <span
-          class="mediaName"
+          class="AudioPlayerView-module_mediaName"
           data-testid="audio-player-name"
         >
           Unnamed audio
         </span>
         <div
-          class="flex byline"
+          class="Flex-module_flex AudioPlayerView-module_byline"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
         >
           <time
@@ -251,13 +251,13 @@ exports[`AudioPlayerView > renders the audio player without media name 1`] = `
       </div>
     </div>
     <div
-      class="flex"
+      class="Flex-module_flex"
       data-testid="audio-player-seek"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <input
         aria-label="Audio seek bar"
-        class="seekBar"
+        class="SeekBar-module_seekBar"
         max="100"
         min="0"
         step="1"
@@ -267,7 +267,7 @@ exports[`AudioPlayerView > renders the audio player without media name 1`] = `
         value="30"
       />
       <time
-        class="mx_Clock clock"
+        class="mx_Clock AudioPlayerView-module_clock"
         datetime="PT2M"
         role="timer"
       >
@@ -282,19 +282,19 @@ exports[`AudioPlayerView > renders the audio player without size 1`] = `
 <div>
   <div
     aria-label="Audio player"
-    class="mx_MediaBody mediaBody audioPlayer"
+    class="mx_MediaBody MediaBody-module_mediaBody AudioPlayerView-module_audioPlayer"
     role="region"
     tabindex="0"
   >
     <div
-      class="flex"
+      class="Flex-module_flex"
       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
         aria-disabled="false"
         aria-label="Play"
         aria-labelledby="_r_c_"
-        class="_icon-button_1215g_8 button"
+        class="_icon-button_1215g_8 PlayPauseButton-module_button"
         data-kind="primary"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -318,17 +318,17 @@ exports[`AudioPlayerView > renders the audio player without size 1`] = `
         </div>
       </button>
       <div
-        class="flex mediaInfo"
+        class="Flex-module_flex AudioPlayerView-module_mediaInfo"
         style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       >
         <span
-          class="mediaName"
+          class="AudioPlayerView-module_mediaName"
           data-testid="audio-player-name"
         >
           Sample Audio
         </span>
         <div
-          class="flex byline"
+          class="Flex-module_flex AudioPlayerView-module_byline"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1-5x); --mx-flex-wrap: nowrap;"
         >
           <time
@@ -341,13 +341,13 @@ exports[`AudioPlayerView > renders the audio player without size 1`] = `
       </div>
     </div>
     <div
-      class="flex"
+      class="Flex-module_flex"
       data-testid="audio-player-seek"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <input
         aria-label="Audio seek bar"
-        class="seekBar"
+        class="SeekBar-module_seekBar"
         max="100"
         min="0"
         step="1"
@@ -357,7 +357,7 @@ exports[`AudioPlayerView > renders the audio player without size 1`] = `
         value="30"
       />
       <time
-        class="mx_Clock clock"
+        class="mx_Clock AudioPlayerView-module_clock"
         datetime="PT2M"
         role="timer"
       >
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/DecryptionFailureBodyView/__snapshots__/DecryptionFailureBodyView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/body/DecryptionFailureBodyView/__snapshots__/DecryptionFailureBodyView.test.tsx.snap
index 3fbd0812d6..0a27ac430d 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/DecryptionFailureBodyView/__snapshots__/DecryptionFailureBodyView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/body/DecryptionFailureBodyView/__snapshots__/DecryptionFailureBodyView.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`DecryptionFailureBodyView > Should display "The sender has blocked you from receiving this message and device verification is false" 1`] = `
 <div>
   <div
-    class="content"
+    class="DecryptionFailureBodyView-module_content"
   >
     The sender has blocked you from receiving this message because your device is unverified
   </div>
@@ -13,7 +13,7 @@ exports[`DecryptionFailureBodyView > Should display "The sender has blocked you
 exports[`DecryptionFailureBodyView > Should display "The sender has blocked you from receiving this message and device verification is true" 1`] = `
 <div>
   <div
-    class="content"
+    class="DecryptionFailureBodyView-module_content"
   >
     The sender has blocked you from receiving this message because your device is unverified
   </div>
@@ -23,7 +23,7 @@ exports[`DecryptionFailureBodyView > Should display "The sender has blocked you
 exports[`DecryptionFailureBodyView > Should display "Unable to decrypt message and device verification is false" 1`] = `
 <div>
   <div
-    class="content"
+    class="DecryptionFailureBodyView-module_content"
   >
     Unable to decrypt message
   </div>
@@ -33,7 +33,7 @@ exports[`DecryptionFailureBodyView > Should display "Unable to decrypt message a
 exports[`DecryptionFailureBodyView > Should display "Unable to decrypt message and device verification is true" 1`] = `
 <div>
   <div
-    class="content"
+    class="DecryptionFailureBodyView-module_content"
   >
     Unable to decrypt message
   </div>
@@ -43,7 +43,7 @@ exports[`DecryptionFailureBodyView > Should display "Unable to decrypt message a
 exports[`DecryptionFailureBodyView > should handle historical messages with no key backup and device verification is false 1`] = `
 <div>
   <div
-    class="content"
+    class="DecryptionFailureBodyView-module_content"
   >
     Historical messages are not available on this device
   </div>
@@ -53,7 +53,7 @@ exports[`DecryptionFailureBodyView > should handle historical messages with no k
 exports[`DecryptionFailureBodyView > should handle historical messages with no key backup and device verification is true 1`] = `
 <div>
   <div
-    class="content"
+    class="DecryptionFailureBodyView-module_content"
   >
     Historical messages are not available on this device
   </div>
@@ -63,11 +63,11 @@ exports[`DecryptionFailureBodyView > should handle historical messages with no k
 exports[`DecryptionFailureBodyView > should handle messages from unverified devices and device verification is false 1`] = `
 <div>
   <div
-    class="content error"
+    class="DecryptionFailureBodyView-module_content DecryptionFailureBodyView-module_error"
   >
     <span>
       <svg
-        class="icon"
+        class="DecryptionFailureBodyView-module_icon"
         fill="currentColor"
         height="16px"
         viewBox="0 0 24 24"
@@ -87,11 +87,11 @@ exports[`DecryptionFailureBodyView > should handle messages from unverified devi
 exports[`DecryptionFailureBodyView > should handle messages from unverified devices and device verification is true 1`] = `
 <div>
   <div
-    class="content error"
+    class="DecryptionFailureBodyView-module_content DecryptionFailureBodyView-module_error"
   >
     <span>
       <svg
-        class="icon"
+        class="DecryptionFailureBodyView-module_icon"
         fill="currentColor"
         height="16px"
         viewBox="0 0 24 24"
@@ -111,11 +111,11 @@ exports[`DecryptionFailureBodyView > should handle messages from unverified devi
 exports[`DecryptionFailureBodyView > should handle messages from users who change identities after verification and device verification is false 1`] = `
 <div>
   <div
-    class="content error"
+    class="DecryptionFailureBodyView-module_content DecryptionFailureBodyView-module_error"
   >
     <span>
       <svg
-        class="icon"
+        class="DecryptionFailureBodyView-module_icon"
         fill="currentColor"
         height="16px"
         viewBox="0 0 24 24"
@@ -135,11 +135,11 @@ exports[`DecryptionFailureBodyView > should handle messages from users who chang
 exports[`DecryptionFailureBodyView > should handle messages from users who change identities after verification and device verification is true 1`] = `
 <div>
   <div
-    class="content error"
+    class="DecryptionFailureBodyView-module_content DecryptionFailureBodyView-module_error"
   >
     <span>
       <svg
-        class="icon"
+        class="DecryptionFailureBodyView-module_icon"
         fill="currentColor"
         height="16px"
         viewBox="0 0 24 24"
@@ -159,7 +159,7 @@ exports[`DecryptionFailureBodyView > should handle messages from users who chang
 exports[`DecryptionFailureBodyView > should handle undecryptable pre-join messages and device verification is false 1`] = `
 <div>
   <div
-    class="content"
+    class="DecryptionFailureBodyView-module_content"
   >
     You don't have access to this message
   </div>
@@ -169,7 +169,7 @@ exports[`DecryptionFailureBodyView > should handle undecryptable pre-join messag
 exports[`DecryptionFailureBodyView > should handle undecryptable pre-join messages and device verification is true 1`] = `
 <div>
   <div
-    class="content"
+    class="DecryptionFailureBodyView-module_content"
   >
     You don't have access to this message
   </div>
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/EventContentBodyView/__snapshots__/EventContentBody.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/body/EventContentBodyView/__snapshots__/EventContentBody.test.tsx.snap
index 614c94839e..964f4d9346 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/EventContentBodyView/__snapshots__/EventContentBody.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/body/EventContentBodyView/__snapshots__/EventContentBody.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EventContentBodyView > renders HTML content correctly 1`] = `
 <div>
   <div
-    class="EventTile_body markdownBody"
+    class="EventContentBody-module_EventTile_body EventContentBody-module_markdownBody"
     dir="auto"
   >
     <p>
@@ -30,7 +30,7 @@ exports[`EventContentBodyView > renders HTML content correctly 1`] = `
 exports[`EventContentBodyView > renders as span when specified 1`] = `
 <div>
   <span
-    class="EventTile_body"
+    class="EventContentBody-module_EventTile_body"
     dir="auto"
   >
     This is rendered as a span element.
@@ -41,17 +41,17 @@ exports[`EventContentBodyView > renders as span when specified 1`] = `
 exports[`EventContentBodyView > renders big emoji correctly 1`] = `
 <div>
   <div
-    class="EventTile_body EventTile_bigEmoji"
+    class="EventContentBody-module_EventTile_body EventContentBody-module_EventTile_bigEmoji"
     dir="auto"
   >
     <span
-      class="Emoji"
+      class="EventContentBody-module_Emoji"
       title=":wave:"
     >
       👋
     </span>
     <span
-      class="Emoji"
+      class="EventContentBody-module_Emoji"
       title=":smile:"
     >
       😊
@@ -63,7 +63,7 @@ exports[`EventContentBodyView > renders big emoji correctly 1`] = `
 exports[`EventContentBodyView > renders code block correctly 1`] = `
 <div>
   <div
-    class="EventTile_body markdownBody"
+    class="EventContentBody-module_EventTile_body EventContentBody-module_markdownBody"
     dir="auto"
   >
     <pre>
@@ -80,12 +80,12 @@ exports[`EventContentBodyView > renders code block correctly 1`] = `
 exports[`EventContentBodyView > renders highlighted content correctly 1`] = `
 <div>
   <div
-    class="EventTile_body"
+    class="EventContentBody-module_EventTile_body"
     dir="auto"
   >
     Message with a 
     <span
-      class="EventTile_searchHighlight"
+      class="EventContentBody-module_EventTile_searchHighlight"
     >
       highlighted
     </span>
@@ -97,7 +97,7 @@ exports[`EventContentBodyView > renders highlighted content correctly 1`] = `
 exports[`EventContentBodyView > renders plain text correctly 1`] = `
 <div>
   <div
-    class="EventTile_body"
+    class="EventContentBody-module_EventTile_body"
     dir="auto"
   >
     Hello, this is a plain text message.
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/__snapshots__/FileBodyView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/__snapshots__/FileBodyView.test.tsx.snap
index 632fd8cafa..55f5815763 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/__snapshots__/FileBodyView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/__snapshots__/FileBodyView.test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`FileBodyView > matches snapshot for audio-info story 1`] = `
 <div>
   <span
-    class="content"
+    class="FileBodyView-module_content"
   >
     <div
-      class="mx_MediaBody mediaBody"
+      class="mx_MediaBody MediaBody-module_mediaBody"
       data-type="info"
     >
       <button
@@ -44,7 +44,7 @@ exports[`FileBodyView > matches snapshot for audio-info story 1`] = `
 exports[`FileBodyView > matches snapshot for decryption-pending-download story 1`] = `
 <div>
   <span
-    class="content"
+    class="FileBodyView-module_content"
   >
     <div
       data-type="download"
@@ -78,10 +78,10 @@ exports[`FileBodyView > matches snapshot for decryption-pending-download story 1
 exports[`FileBodyView > matches snapshot for default story 1`] = `
 <div>
   <span
-    class="content"
+    class="FileBodyView-module_content"
   >
     <div
-      class="mx_MediaBody mediaBody"
+      class="mx_MediaBody MediaBody-module_mediaBody"
       data-type="info"
     >
       <button
@@ -144,7 +144,7 @@ exports[`FileBodyView > matches snapshot for default story 1`] = `
 exports[`FileBodyView > matches snapshot for encrypted-iframe-download story 1`] = `
 <div>
   <span
-    class="content"
+    class="FileBodyView-module_content"
   >
     <div
       data-type="download"
@@ -188,13 +188,13 @@ exports[`FileBodyView > matches snapshot for encrypted-iframe-download story 1`]
 exports[`FileBodyView > matches snapshot for export story 1`] = `
 <div>
   <span
-    class="content"
+    class="FileBodyView-module_content"
   >
     <a
       href="https://example.org/spec.pdf"
     >
       <div
-        class="mx_MediaBody mediaBody"
+        class="mx_MediaBody MediaBody-module_mediaBody"
         data-type="info"
       >
         <button
@@ -230,10 +230,10 @@ exports[`FileBodyView > matches snapshot for export story 1`] = `
 exports[`FileBodyView > matches snapshot for invalid story 1`] = `
 <div>
   <span
-    class="content"
+    class="FileBodyView-module_content"
   >
     <div
-      class="mx_MediaBody mediaBody"
+      class="mx_MediaBody MediaBody-module_mediaBody"
       data-type="info"
     >
       <button
@@ -263,7 +263,7 @@ exports[`FileBodyView > matches snapshot for invalid story 1`] = `
     </div>
   </span>
   <span
-    class="content invalid"
+    class="FileBodyView-module_content FileBodyView-module_invalid"
   >
     Invalid file
   </span>
@@ -273,7 +273,7 @@ exports[`FileBodyView > matches snapshot for invalid story 1`] = `
 exports[`FileBodyView > matches snapshot for long-filename-download story 1`] = `
 <div>
   <span
-    class="content"
+    class="FileBodyView-module_content"
   >
     <div
       data-type="download"
@@ -310,10 +310,10 @@ exports[`FileBodyView > matches snapshot for long-filename-download story 1`] =
 exports[`FileBodyView > matches snapshot for long-filename-info story 1`] = `
 <div>
   <span
-    class="content"
+    class="FileBodyView-module_content"
   >
     <div
-      class="mx_MediaBody mediaBody"
+      class="mx_MediaBody MediaBody-module_mediaBody"
       data-type="info"
     >
       <button
@@ -348,7 +348,7 @@ exports[`FileBodyView > matches snapshot for long-filename-info story 1`] = `
 exports[`FileBodyView > matches snapshot for unencrypted-download story 1`] = `
 <div>
   <span
-    class="content"
+    class="FileBodyView-module_content"
   >
     <div
       data-type="download"
@@ -385,10 +385,10 @@ exports[`FileBodyView > matches snapshot for unencrypted-download story 1`] = `
 exports[`FileBodyView > matches snapshot for video-info story 1`] = `
 <div>
   <span
-    class="content"
+    class="FileBodyView-module_content"
   >
     <div
-      class="mx_MediaBody mediaBody"
+      class="mx_MediaBody MediaBody-module_mediaBody"
       data-type="info"
     >
       <button
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/__snapshots__/VideoBodyView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/__snapshots__/VideoBodyView.test.tsx.snap
index c8e456d2b9..57c2fa47d1 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/__snapshots__/VideoBodyView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/__snapshots__/VideoBodyView.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`VideoBodyView > matches snapshot for error story 1`] = `
 <div>
   <span
-    class="root error"
+    class="VideoBodyView-module_root VideoBodyView-module_error"
   >
     <svg
       fill="currentColor"
@@ -27,18 +27,18 @@ exports[`VideoBodyView > matches snapshot for error story 1`] = `
 exports[`VideoBodyView > matches snapshot for hidden story 1`] = `
 <div>
   <span
-    class="root"
+    class="VideoBodyView-module_root"
   >
     <div
-      class="container"
+      class="VideoBodyView-module_container"
       style="width: min(100%, 320px); max-width: 320px; max-height: 180px; aspect-ratio: 16 / 9;"
     >
       <button
-        class="hiddenButton"
+        class="VideoBodyView-module_hiddenButton"
         type="button"
       >
         <div
-          class="hiddenButtonContent"
+          class="VideoBodyView-module_hiddenButtonContent"
         >
           <svg
             fill="currentColor"
@@ -64,16 +64,16 @@ exports[`VideoBodyView > matches snapshot for hidden story 1`] = `
 exports[`VideoBodyView > matches snapshot for ready story 1`] = `
 <div>
   <span
-    class="root"
+    class="VideoBodyView-module_root"
   >
     <div
-      class="container"
+      class="VideoBodyView-module_container"
       data-video-body-mask-target=""
       style="width: min(100%, 320px); max-width: 320px; max-height: 180px; aspect-ratio: 16 / 9;"
     >
       <video
         aria-label="Product demo video"
-        class="video"
+        class="VideoBodyView-module_video"
         controls=""
         controlslist="nodownload"
         crossorigin="anonymous"
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MediaBody/__snapshots__/MediaBody.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/body/MediaBody/__snapshots__/MediaBody.test.tsx.snap
index 34027a651b..3144691e27 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MediaBody/__snapshots__/MediaBody.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MediaBody/__snapshots__/MediaBody.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`MediaBody > renders the media body 1`] = `
 <div>
   <div
-    class="mx_MediaBody mediaBody"
+    class="mx_MediaBody MediaBody-module_mediaBody"
   >
     Media content goes here
   </div>
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/__snapshots__/RedactedBodyView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/__snapshots__/RedactedBodyView.test.tsx.snap
index 2178dff192..83e30dfdc2 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/__snapshots__/RedactedBodyView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/__snapshots__/RedactedBodyView.test.tsx.snap
@@ -3,11 +3,11 @@
 exports[`RedactedBodyView > renders the default redacted body 1`] = `
 <div>
   <span
-    class="content"
+    class="RedactedBodyView-module_content"
   >
     <svg
       aria-hidden="true"
-      class="icon"
+      class="RedactedBodyView-module_icon"
       fill="currentColor"
       height="1em"
       viewBox="0 0 24 24"
@@ -28,11 +28,11 @@ exports[`RedactedBodyView > renders the default redacted body 1`] = `
 exports[`RedactedBodyView > renders without a tooltip when none is provided 1`] = `
 <div>
   <span
-    class="content"
+    class="RedactedBodyView-module_content"
   >
     <svg
       aria-hidden="true"
-      class="icon"
+      class="RedactedBodyView-module_icon"
       fill="currentColor"
       height="1em"
       viewBox="0 0 24 24"
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/__snapshots__/TextualBody.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/__snapshots__/TextualBody.test.tsx.snap
index 2f69f4985f..79201640bc 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/__snapshots__/TextualBody.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/__snapshots__/TextualBody.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TextualBodyView > renders caption messages with url previews 1`] = `
 <div>
   <div
-    class="root caption"
+    class="TextualBody-module_root TextualBody-module_caption"
   >
     <div>
       Caption for the uploaded image.
@@ -20,26 +20,26 @@ exports[`TextualBodyView > renders caption messages with url previews 1`] = `
 exports[`TextualBodyView > renders emote messages with annotations 1`] = `
 <div>
   <div
-    class="root emote"
+    class="TextualBody-module_root TextualBody-module_emote"
     dir="auto"
   >
     * 
     <button
-      class="emoteSender"
+      class="TextualBody-module_emoteSender"
       type="button"
     >
       Alice
     </button>
      
     <span
-      class="annotated annotatedInline"
+      class="TextualBody-module_annotated TextualBody-module_annotatedInline"
       dir="auto"
     >
       <span>
         waves enthusiastically
       </span>
       <button
-        class="annotation editedMarker"
+        class="TextualBody-module_annotation TextualBody-module_editedMarker"
         type="button"
       >
         <span>
@@ -54,7 +54,7 @@ exports[`TextualBodyView > renders emote messages with annotations 1`] = `
 exports[`TextualBodyView > renders the default message body 1`] = `
 <div>
   <div
-    class="root text"
+    class="TextualBody-module_root TextualBody-module_text"
   >
     <div>
       Hello, this is a textual message.
@@ -66,7 +66,7 @@ exports[`TextualBodyView > renders the default message body 1`] = `
 exports[`TextualBodyView > renders the notice branch 1`] = `
 <div>
   <div
-    class="root notice"
+    class="TextualBody-module_root TextualBody-module_notice"
   >
     <div>
       This is a notice message.
diff --git a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/__snapshots__/ReactionsRow.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/__snapshots__/ReactionsRow.test.tsx.snap
index 404aa6dd05..0c9b68fa91 100644
--- a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/__snapshots__/ReactionsRow.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/__snapshots__/ReactionsRow.test.tsx.snap
@@ -4,69 +4,69 @@ exports[`ReactionsRowView > renders the default reactions row 1`] = `
 <div>
   <div
     aria-label="Reactions"
-    class="reactionsRow"
+    class="ReactionsRow-module_reactionsRow"
     role="toolbar"
   >
     <button
       aria-label="4 reactions for 👍"
-      class="reactionsRowButton reactionsRowButtonSelected"
+      class="ReactionsRowButton-module_reactionsRowButton ReactionsRowButton-module_reactionsRowButtonSelected"
       tabindex="0"
       type="button"
     >
       <span
         aria-hidden="true"
-        class="reactionsRowButtonContent"
+        class="ReactionsRowButton-module_reactionsRowButtonContent"
       >
         👍
       </span>
       <span
         aria-hidden="true"
-        class="reactionsRowButtonCount"
+        class="ReactionsRowButton-module_reactionsRowButtonCount"
       >
         4
       </span>
     </button>
     <button
       aria-label="2 reactions for 🎉"
-      class="reactionsRowButton"
+      class="ReactionsRowButton-module_reactionsRowButton"
       tabindex="0"
       type="button"
     >
       <span
         aria-hidden="true"
-        class="reactionsRowButtonContent"
+        class="ReactionsRowButton-module_reactionsRowButtonContent"
       >
         🎉
       </span>
       <span
         aria-hidden="true"
-        class="reactionsRowButtonCount"
+        class="ReactionsRowButton-module_reactionsRowButtonCount"
       >
         2
       </span>
     </button>
     <button
       aria-label="1 reactions for 👀"
-      class="reactionsRowButton"
+      class="ReactionsRowButton-module_reactionsRowButton"
       tabindex="0"
       type="button"
     >
       <span
         aria-hidden="true"
-        class="reactionsRowButtonContent"
+        class="ReactionsRowButton-module_reactionsRowButtonContent"
       >
         👀
       </span>
       <span
         aria-hidden="true"
-        class="reactionsRowButtonCount"
+        class="ReactionsRowButton-module_reactionsRowButtonCount"
       >
         1
       </span>
     </button>
     <button
       aria-label="Add reaction"
-      class="addReactionButton addReactionButtonVisible"
+      class="ReactionsRow-module_addReactionButton ReactionsRow-module_addReactionButtonVisible"
       type="button"
     >
       <svg
@@ -92,75 +92,75 @@ exports[`ReactionsRowView > renders the row with a show-all button 1`] = `
 <div>
   <div
     aria-label="Reactions"
-    class="reactionsRow"
+    class="ReactionsRow-module_reactionsRow"
     role="toolbar"
   >
     <button
       aria-label="4 reactions for 👍"
-      class="reactionsRowButton reactionsRowButtonSelected"
+      class="ReactionsRowButton-module_reactionsRowButton ReactionsRowButton-module_reactionsRowButtonSelected"
       tabindex="0"
       type="button"
     >
       <span
         aria-hidden="true"
-        class="reactionsRowButtonContent"
+        class="ReactionsRowButton-module_reactionsRowButtonContent"
       >
         👍
       </span>
       <span
         aria-hidden="true"
-        class="reactionsRowButtonCount"
+        class="ReactionsRowButton-module_reactionsRowButtonCount"
       >
         4
       </span>
     </button>
     <button
       aria-label="2 reactions for 🎉"
-      class="reactionsRowButton"
+      class="ReactionsRowButton-module_reactionsRowButton"
       tabindex="0"
       type="button"
     >
       <span
         aria-hidden="true"
-        class="reactionsRowButtonContent"
+        class="ReactionsRowButton-module_reactionsRowButtonContent"
       >
         🎉
       </span>
       <span
         aria-hidden="true"
-        class="reactionsRowButtonCount"
+        class="ReactionsRowButton-module_reactionsRowButtonCount"
       >
         2
       </span>
     </button>
     <button
       aria-label="1 reactions for 👀"
-      class="reactionsRowButton"
+      class="ReactionsRowButton-module_reactionsRowButton"
       tabindex="0"
       type="button"
     >
       <span
         aria-hidden="true"
-        class="reactionsRowButtonContent"
+        class="ReactionsRowButton-module_reactionsRowButtonContent"
       >
         👀
       </span>
       <span
         aria-hidden="true"
-        class="reactionsRowButtonCount"
+        class="ReactionsRowButton-module_reactionsRowButtonCount"
       >
         1
       </span>
     </button>
     <button
-      class="showAllButton"
+      class="ReactionsRow-module_showAllButton"
       type="button"
     >
       Show all
     </button>
     <button
       aria-label="Add reaction"
-      class="addReactionButton addReactionButtonVisible"
+      class="ReactionsRow-module_addReactionButton ReactionsRow-module_addReactionButtonVisible"
       type="button"
     >
       <svg
diff --git a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/__snapshots__/ReactionsRowButton.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/__snapshots__/ReactionsRowButton.test.tsx.snap
index acd1740f5f..087526bc01 100644
--- a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/__snapshots__/ReactionsRowButton.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/__snapshots__/ReactionsRowButton.test.tsx.snap
@@ -4,19 +4,19 @@ exports[`ReactionsRowButton > renders the default reaction button 1`] = `
 <div>
   <button
     aria-label="Alice and Bob reacted with 👍"
-    class="reactionsRowButton"
+    class="ReactionsRowButton-module_reactionsRowButton"
     tabindex="0"
     type="button"
   >
     <span
       aria-hidden="true"
-      class="reactionsRowButtonContent"
+      class="ReactionsRowButton-module_reactionsRowButtonContent"
     >
       👍
     </span>
     <span
       aria-hidden="true"
-      class="reactionsRowButtonCount"
+      class="ReactionsRowButton-module_reactionsRowButtonCount"
     >
       2
     </span>
@@ -28,19 +28,19 @@ exports[`ReactionsRowButton > renders the selected reaction button 1`] = `
 <div>
   <button
     aria-label="Alice and Bob reacted with 👍"
-    class="reactionsRowButton reactionsRowButtonSelected"
+    class="ReactionsRowButton-module_reactionsRowButton ReactionsRowButton-module_reactionsRowButtonSelected"
     tabindex="0"
     type="button"
   >
     <span
       aria-hidden="true"
-      class="reactionsRowButtonContent"
+      class="ReactionsRowButton-module_reactionsRowButtonContent"
     >
       👍
     </span>
     <span
       aria-hidden="true"
-      class="reactionsRowButtonCount"
+      class="ReactionsRowButton-module_reactionsRowButtonCount"
     >
       2
     </span>
diff --git a/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/__snapshots__/MessageTimestampView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/__snapshots__/MessageTimestampView.test.tsx.snap
index 4b896472f5..453090f413 100644
--- a/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/__snapshots__/MessageTimestampView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/__snapshots__/MessageTimestampView.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`MessageTimestampView > renders the message timestamp in default state 1
 <div>
   <span
     aria-live="off"
-    class="content"
+    class="MessageTimestampView-module_content"
     tabindex="0"
   >
     04:58
@@ -16,7 +16,7 @@ exports[`MessageTimestampView > renders the message timestamp with href 1`] = `
 <div>
   <a
     aria-live="off"
-    class="content"
+    class="MessageTimestampView-module_content"
     href="~"
   >
     04:58
diff --git a/packages/shared-components/vitest.config.ts b/packages/shared-components/vitest.config.ts
index 3965060eac..5e4d793477 100644
--- a/packages/shared-components/vitest.config.ts
+++ b/packages/shared-components/vitest.config.ts
@@ -142,8 +142,8 @@ export default defineConfig({
                 },
                 css: {
                     modules: {
-                        // Stabilise snapshots by stripping the hash component of the CSS module class name
-                        generateScopedName: (name) => name,
+                        // Stabilise snapshots while keeping names distinct across CSS modules.
+                        generateScopedName: "[name]_[local]",
                     },
                 },
             },